:root{
  --radius: 18px;
  --max: 1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --shadow-lg: 0 20px 50px rgba(0,0,0,.18);
  --shadow: 0 12px 28px rgba(0,0,0,.12);
  --focus: 0 0 0 4px rgba(77,163,255,.35);
}

html[data-theme="dark"]{
  --bg0:#070A12;
  --bg1:#0B1220;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  --text:#EAF0FF;
  --muted:#A9B4D0;
  --brand:#4DA3FF;
  --brand2:#7C5CFF;
  --ok:#38D39F;
  --chip-bg: rgba(255,255,255,.04);
  --chip-stroke: rgba(255,255,255,.10);
}

html[data-theme="light"]{
  --bg0:#F7F9FF;
  --bg1:#FFFFFF;
  --surface: rgba(20,24,40,.04);
  --surface2: rgba(20,24,40,.06);
  --stroke: rgba(20,24,40,.10);
  --text:#0B1220;
  --muted:#4B556E;
  --brand:#0A67FF;
  --brand2:#5B3CFF;
  --ok:#0E9F6E;
  --chip-bg: rgba(10,103,255,.07);
  --chip-stroke: rgba(10,103,255,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 20% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, color-mix(in oklab, var(--brand2) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  line-height:1.5;
  letter-spacing:.2px;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg0) 92%, transparent), color-mix(in oklab, var(--bg0) 60%, transparent));
  border-bottom:1px solid color-mix(in oklab, var(--stroke) 55%, transparent);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px;}
.brandmark{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.7px;}
.logo{width:34px;height:34px;border-radius:10px;background:radial-gradient(circle at 30% 30%, var(--brand), var(--brand2)); box-shadow:0 12px 30px color-mix(in oklab, var(--brand) 18%, transparent);}
nav{display:flex; gap:2px; flex-wrap:wrap}
nav a{color:var(--muted); font-weight:700; padding:10px 10px; border-radius:12px;}
nav a:hover{color:var(--text); background: color-mix(in oklab, var(--surface) 100%, transparent);}
nav a.active{color:var(--text); background: color-mix(in oklab, var(--surface2) 100%, transparent); border:1px solid color-mix(in oklab, var(--stroke) 85%, transparent);}
.nav-right{display:flex; align-items:center; gap:10px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  color:var(--text);
  font-weight:800;
  transition:.2s ease;
}
.btn:hover{transform: translateY(-1px); background: color-mix(in oklab, var(--surface2) 100%, transparent);}
.btn.primary{
  border:1px solid color-mix(in oklab, var(--brand) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 22%, transparent), color-mix(in oklab, var(--brand2) 16%, transparent));
  box-shadow: 0 18px 40px color-mix(in oklab, var(--brand) 12%, transparent);
}
.iconbtn{padding:10px 12px; min-width:44px;}

.hero{padding:46px 0 10px;}
.grid-hero{display:grid; grid-template-columns:1.25fr .75fr; gap:22px; align-items:stretch;}
.card{
  background: var(--surface);
  border:1px solid color-mix(in oklab, var(--stroke) 85%, transparent);
  border-radius: calc(var(--radius) + 6px);
  padding:24px;
  box-shadow: var(--shadow-lg);
}
.hero-card{position:relative; overflow:hidden;}
.hero-card:before{content:""; position:absolute; inset:-2px; background: radial-gradient(520px 280px at 30% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 62%); pointer-events:none;}
.hchip{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--chip-stroke); background: var(--chip-bg); color:var(--muted); font-weight:800; font-size:13px;}

h1{margin:14px 0 10px; font-size:clamp(30px, 4vw, 52px); line-height:1.05; letter-spacing:-.6px;}
.sub{color:var(--muted); font-size:clamp(15px, 1.4vw, 18px); max-width:62ch;}
.cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px;}
.kpi{background: color-mix(in oklab, var(--surface) 90%, transparent); border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent); border-radius:16px; padding:12px;}
.kpi b{display:block; font-size:16px;}
.kpi span{color:var(--muted); font-size:13px;}

section{padding:30px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px;}
.section-head h2{margin:0; font-size:clamp(20px, 2.2vw, 28px); letter-spacing:-.2px;}
.section-head p{margin:0; color:var(--muted); max-width:70ch;}

.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:14px;}
.tile{grid-column:span 4; background: var(--surface); border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); transition:.2s ease;}
.tile:hover{transform: translateY(-2px); background: var(--surface2);}
.tile h3{margin:6px 0 8px; font-size:16px;}
.tile p{margin:0; color:var(--muted);}
.tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent); background: color-mix(in oklab, var(--surface) 80%, transparent); border-radius:999px; padding:6px 10px;}

.form{display:grid; gap:12px;}
.field{display:grid; gap:6px;}
label{font-weight:800; color:var(--text); font-size:13px;}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--stroke) 85%, transparent);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  color:var(--text);
  font: inherit;
}
textarea{min-height:120px; resize:vertical;}
input::placeholder, textarea::placeholder{color: color-mix(in oklab, var(--muted) 75%, transparent);}
.help{color:var(--muted); font-size:13px; margin:0;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.rates{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.rate{background: linear-gradient(180deg, color-mix(in oklab, var(--surface2) 100%, transparent), color-mix(in oklab, var(--surface) 100%, transparent)); border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent); border-radius: var(--radius); padding:18px;}
.rate b{font-size:18px;}
.rate span{display:block; color:var(--muted); margin-top:6px;}

.map{border-radius: var(--radius); overflow:hidden; border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent); box-shadow: var(--shadow);}
.map iframe{display:block; width:100%; height:420px; border:0;}

footer{border-top:1px solid color-mix(in oklab, var(--stroke) 60%, transparent); padding:26px 0 40px; color:var(--muted);}
.foot{display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:18px;}
.foot h4{margin:0 0 10px; color:var(--text);}
.foot a{color:var(--muted);} .foot a:hover{color:var(--text);}

:focus-visible{outline:none; box-shadow: var(--focus);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

@media (max-width: 900px){
  .grid-hero{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr;}
  .tile{grid-column:span 6;}
  .foot{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  nav{display:none;}
  .tile{grid-column:span 12;}
  .rates{grid-template-columns:1fr;}
  .row2{grid-template-columns:1fr;}
}