/* Drive GOOSE — Minimal dark system, no external libs */
@font-face {
  font-family: 'InterVar';
  src: url('/assets/Inter-VariableFont.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root{
  --bg:#0c0d10; --fg:#e9ecf1; --muted:#a6aab3; --card:#13151a; --glass:rgba(255,255,255,.06);
  --brand:#9ee07a; --brand-2:#5cd4ff; --accent:#b099ff; --line:rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: InterVar, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell;
  color:var(--fg); background:radial-gradient(1200px 600px at 70% -10%, #1a1f28 0%, var(--bg) 60%),
  radial-gradient(1200px 600px at -10% 80%, #151924 0%, var(--bg) 60%), var(--bg);
  line-height:1.55; letter-spacing:.2px;
}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.wrap.narrow{max-width:960px}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
@media (max-width:1000px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(12,13,16,.9), rgba(12,13,16,.6));
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:700}
.brand svg stop:first-child{stop-color:var(--brand)}
.brand svg stop:last-child{stop-color:var(--brand-2)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--fg); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.btn{display:inline-block; padding:12px 18px; border-radius:12px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#101216; font-weight:700; text-decoration:none; border:0; cursor:pointer}
.btn.small{padding:8px 12px; font-size:.9rem}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--fg)}
.theme-toggle{border:1px solid var(--line); background:transparent; color:var(--fg); padding:8px 10px; border-radius:10px; cursor:pointer}

.hero{padding:64px 0 36px}
.hero h1{font-size:clamp(28px,4.2vw,48px); line-height:1.1; letter-spacing:.2px; margin:0 0 12px}
.lede{font-size:1.15rem; color:var(--muted)}
.cta{display:flex; gap:12px; margin:18px 0 8px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.badge{padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.85rem}

.hero-visual .panel{border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--line); box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
.panel-head .dots i{display:inline-block; width:8px; height:8px; background:var(--line); margin-left:6px; border-radius:50%}
.panel-body{display:grid; grid-template-columns:1fr 240px; gap:16px; padding:14px}
.map{position:relative; height:320px; border-radius:12px; background:
  radial-gradient(600px 300px at 30% 10%, rgba(158,224,122,.15), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
  #0f1217;
  border:1px solid var(--line); overflow:hidden}
.pulse{position:absolute; left:54%; top:44%; width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 0 rgba(158,224,122,.6); animation:pulse 2s infinite}
@keyframes pulse{to{box-shadow:0 0 0 24px rgba(158,224,122,0)}}
.route{position:absolute; left:10%; top:40%; width:80%; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); filter:blur(.2px)}
.car{position:absolute; width:12px; height:12px; border-radius:3px; background:var(--fg)}
.car.a{left:20%; top:38%}
.car.b{left:55%; top:42%; background:#ffd166}
.car.c{left:80%; top:41%; background:#ef476f}
.stats{display:grid; gap:10px; align-content:start}
.stats div{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:10px}
.stats span{display:block; color:var(--muted); font-size:.85rem}
.stats strong{font-size:1.2rem}

.section{padding:68px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
h2{font-size:clamp(22px,3.5vw,32px); margin:0 0 12px}
h3{margin:0 0 8px}
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.cards .card{transition:transform .25s ease, border-color .25s ease}
.cards .card:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.25)}
.pillars .card p{color:var(--muted)}
.check{list-style:none; padding-left:0}
.check li{position:relative; padding-left:24px; margin:8px 0}
.check li::before{content:'✔'; position:absolute; left:0; top:0; color:var(--brand)}
.check.small li{margin:6px 0; font-size:.95rem}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:12px; padding:14px}

.diagram ol{margin:0; padding-left:18px}
.note p{margin:0 0 6px}
.kpi-grid .kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; text-align:center}
.kpi span{display:block; color:var(--muted)}
.kpi strong{font-size:1.6rem}

.tabs{display:flex; gap:8px; margin:10px 0 16px; flex-wrap:wrap}
.tab{border:1px solid var(--line); background:transparent; color:var(--fg); padding:10px 12px; border-radius:999px; cursor:pointer}
.tab.active{background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b0e12; border-color:transparent}
.tabpane[hidden]{display:none}

.contact{display:grid; gap:10px; margin-top:10px}
.contact label{display:grid; gap:6px; font-size:.95rem}
input, textarea{background:#0f1217; border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--fg)}
input:focus, textarea:focus{outline:2px solid var(--brand-2); outline-offset:2px}
.form-status{min-height:1.2em; color:var(--muted)}

.site-footer{border-top:1px solid var(--line); padding:28px 0 60px; color:var(--muted)}
.site-footer .foot{display:flex; gap:12px; flex-wrap:wrap}