:root{
  --bg:#08111a;
  --bg2:#0b1621;
  --panel:#101c28;
  --panel2:#142334;
  --text:#f4f7fb;
  --muted:#aeb8c5;
  --line:rgba(255,255,255,.09);
  --accent:#ff9966;
  --blue:#2f6ee4;
  --green:#4db7a0;
  --coral:#f06f67;
  --purple:#8a78fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#0d1620 0%,#08111a 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
a{color:inherit;text-decoration:none}
main{min-height:100vh}
.hero{
  position:relative;
  min-height:680px;
  background:url('/hero.jpg') center 56%/cover no-repeat;
  isolation:isolate;
}
.hero-overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,13,22,.18) 0%,rgba(6,13,22,.28) 34%,rgba(6,13,22,.62) 70%,#08111a 100%),
    linear-gradient(90deg,rgba(6,13,22,.62) 0%,rgba(6,13,22,.22) 42%,rgba(6,13,22,.06) 100%);
}
.hero-inner{width:min(1200px,calc(100% - 40px));margin:0 auto;padding:18px 0 28px}
.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,22,34,.58);
  backdrop-filter:blur(16px);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{
  display:grid;
  grid-template-columns:repeat(2,18px);
  grid-template-rows:repeat(2,18px);
  gap:4px;
}
.logo-mark span{border-radius:5px}
.logo-mark span:nth-child(1){background:#2f6ee4}
.logo-mark span:nth-child(2){background:#f06f67}
.logo-mark span:nth-child(3){background:#4db7a0}
.logo-mark span:nth-child(4){background:#62b0ff}
.brand strong{font-size:26px;letter-spacing:-.04em;display:block;line-height:1}
.brand small{display:block;color:#cfd7df;font-size:13px;margin-top:2px}
.nav-links{display:flex;justify-content:center;gap:30px;font-size:13px}
.nav-links a{color:#c7d0db;padding:8px 0;border-bottom:2px solid transparent}
.nav-links a.active,.nav-links a:hover{color:white;border-color:#6bc5ff}
.nav-actions{display:flex;gap:8px;align-items:center}
.ghost-btn,.primary-btn,.secondary-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;font-weight:700;transition:.2s ease;
}
.ghost-btn{padding:11px 15px;border:1px solid rgba(255,255,255,.17);color:#eef3f8}
.primary-btn{
  padding:13px 20px;
  background:linear-gradient(135deg,#ffb07a,#ff8d5d);
  color:#1f160f;
  box-shadow:0 10px 24px rgba(255,141,93,.22);
}
.primary-btn.small{padding:11px 15px;font-size:12px}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover{transform:translateY(-1px)}
.secondary-btn{padding:13px 20px;border:1px solid rgba(255,255,255,.32);background:rgba(8,15,24,.46)}
.hero-copy{padding:44px 20px 20px 20px;max-width:760px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;color:#ffb27f;margin-bottom:8px}
.hero-copy h1{
  margin:0;
  font-size:clamp(50px,7vw,84px);
  line-height:.96;
  letter-spacing:-.055em;
}
.hero-copy h1 span{color:white}
.hero-copy h1{color:#ff9c69}
.hero-copy h2{
  max-width:720px;
  margin:16px 0 18px;
  font-size:clamp(22px,3vw,34px);
  line-height:1.16;
  letter-spacing:-.03em;
  color:#f2f5f8;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.privacy-pill{
  margin-top:15px;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(8,17,27,.58);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:8px 13px;
  color:#dce3eb;font-size:12px;
  backdrop-filter:blur(10px)
}
.online-dot{width:8px;height:8px;background:#1ed68f;border-radius:50%;box-shadow:0 0 0 4px rgba(30,214,143,.12)}
.divider{width:1px;height:14px;background:rgba(255,255,255,.15)}
.service-row{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.service-card{
  position:relative;
  min-height:138px;
  padding:15px;
  display:flex;gap:12px;
  background:linear-gradient(180deg,rgba(22,33,47,.88),rgba(15,26,38,.92));
  border:1px solid rgba(255,255,255,.10);
  border-radius:17px;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
}
.service-card:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.service-icon,.quick-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  flex:0 0 auto;font-size:21px;font-weight:700;
  box-shadow:inset 0 1px rgba(255,255,255,.25),0 6px 14px rgba(0,0,0,.14)
}
.orange{background:linear-gradient(135deg,#ffb46f,#d47b45)}
.green{background:linear-gradient(135deg,#34c990,#159f6e)}
.purple{background:linear-gradient(135deg,#a186ff,#7057e3)}
.coral{background:linear-gradient(135deg,#ff8b7f,#e45c54)}
.blue{background:linear-gradient(135deg,#64a8ff,#2f6ee4)}
.grey{background:linear-gradient(135deg,#bababa,#6d6d6d)}
.tag{
  display:inline-block;
  font-size:8px;font-weight:800;letter-spacing:.04em;
  padding:4px 7px;border-radius:999px;
  background:rgba(255,153,102,.14);color:#ffbd9b
}
.green-tag{background:rgba(77,183,160,.14);color:#79d4c1}
.purple-tag{background:rgba(138,120,250,.14);color:#bcb0ff}
.coral-tag{background:rgba(240,111,103,.14);color:#ff9a94}
.blue-tag{background:rgba(47,110,228,.14);color:#89b0ff}
.grey-tag{background:rgba(255,255,255,.08);color:#cfd6de}
.service-card h3{margin:8px 0 6px;font-size:15px}
.service-card p{margin:0;color:#aeb9c7;font-size:12px;line-height:1.4}
.service-card .arrow{
  position:absolute;right:12px;bottom:12px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);color:#d4dce5
}
.muted-card{cursor:default}
.content{
  width:min(1200px,calc(100% - 40px));
  margin:0 auto;
  padding:18px 0 34px;
}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 12px}
.section-heading>div{display:flex;align-items:baseline;gap:12px}
.section-heading h2{margin:0;font-size:24px;letter-spacing:-.025em}
.section-heading p{margin:0;color:#a9b4c0;font-size:13px}
.section-heading>a{font-size:12px;color:#ffb27f}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quick-card{
  min-height:138px;
  border-radius:16px;
  border:1px solid var(--line);
  padding:18px;
  display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;
  background:#111d29;
}
.quick-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,15,23,.18),rgba(8,15,23,.70));
  pointer-events:none
}
.dashboard-card{background:linear-gradient(90deg,rgba(10,18,27,.30),rgba(10,18,27,.85)),url('/hero.jpg') center 75%/cover}
.photos-card{background:linear-gradient(90deg,rgba(10,18,27,.28),rgba(10,18,27,.82)),url('/hero.jpg') center 61%/cover}
.home-card{background:linear-gradient(90deg,rgba(10,18,27,.3),rgba(10,18,27,.88)),url('/hero.jpg') center 48%/cover}
.quick-icon,.quick-copy,.round-arrow{position:relative;z-index:1}
.quick-copy h3{margin:0 0 5px;font-size:18px}
.quick-copy p{margin:0;color:#c0c8d2;font-size:12px}
.round-arrow{
  margin-left:auto;
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);background:rgba(0,0,0,.15)
}
.daily-heading{margin-top:18px}
.daily-grid{display:grid;grid-template-columns:1.1fr 1fr .8fr 1.1fr 1.1fr;gap:10px}
.daily-card{
  min-height:145px;
  background:linear-gradient(180deg,#132131,#101c28);
  border:1px solid var(--line);
  border-radius:16px;
  padding:15px;
}
.daily-title{font-size:14px;font-weight:800;margin-bottom:9px}
.daily-card p,.daily-card li,.daily-card small{color:#aeb8c5;font-size:12px}
.daily-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.daily-card li{display:flex;align-items:center;gap:7px}
.daily-card li span:last-child{margin-left:auto;color:#d3d9e0}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
.red{background:#ff6e6e}.yellow{background:#f0c75e}.green{background:#46ce92}
.mini-list{display:flex;flex-direction:column;gap:8px}
.mini-list div{display:grid;grid-template-columns:36px 1fr;gap:8px;color:#b9c3ce;font-size:12px}
.mini-list strong{color:#f7c36f}
.weather-card{display:flex;align-items:center;gap:12px}
.weather-icon{font-size:42px}
.temperature{display:block;font-size:38px;line-height:1;margin:5px 0}
.centralise{
  margin-top:18px;padding:18px;
  border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0d1823,#0b1520)
}
.centralise h2{margin:0 0 3px;font-size:22px}
.centralise>div>p{margin:0;color:#aeb8c5;font-size:13px}
.centralise-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px}
.centralise-grid>div{display:grid;grid-template-columns:34px 1fr;column-gap:9px;align-items:start}
.centralise-grid>div>span{
  grid-row:1/3;
  width:34px;height:34px;border-radius:10px;background:#182738;display:grid;place-items:center
}
.centralise-grid strong{font-size:12px}
.centralise-grid small{color:#9ca8b6;font-size:10px;line-height:1.4;margin-top:2px}
footer{
  border-top:1px solid var(--line);
  width:min(1200px,calc(100% - 40px));
  margin:0 auto;
  padding:18px 0 24px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  color:#9aa6b4;font-size:12px
}
.footer-brand{display:flex;align-items:center;gap:9px}
.small-logo{grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:2px}
.footer-brand strong,.footer-brand small{display:block}
.footer-brand strong{font-size:18px;color:white;line-height:1}
.footer-links{display:flex;gap:16px}
.footer-copy{text-align:center}
@media(max-width:1050px){
  .nav{grid-template-columns:auto 1fr}.nav-actions{display:none}
  .service-row{grid-template-columns:repeat(3,1fr)}
  .daily-grid{grid-template-columns:repeat(2,1fr)}
  .centralise-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .hero-inner,.content,footer{width:min(100% - 22px,1200px)}
  .hero{min-height:auto;background-position:center}
  .nav{display:flex;justify-content:space-between}
  .nav-links{display:none}
  .hero-copy{padding:36px 4px 20px}
  .hero-copy h1{font-size:54px}
  .hero-copy h2{font-size:23px}
  .service-row{grid-template-columns:1fr}
  .quick-grid,.daily-grid,.centralise-grid{grid-template-columns:1fr}
  .section-heading{align-items:flex-start}
  .section-heading>div{display:block}
  .section-heading p{margin-top:4px}
  footer{grid-template-columns:1fr;text-align:center}
  .footer-brand,.footer-links{justify-content:center}
}