/* ── Shell & navigation ── */
.shell{max-width:1180px; margin:0 auto; padding:0 1.5rem 3rem}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 1.5rem; margin:0 -1.5rem 1.75rem;
  background:rgba(7,11,20,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.8rem}
.brand-mark{
  width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto;
  border-radius:12px; background:linear-gradient(160deg,rgba(34,197,94,.22),rgba(217,119,6,.16));
  border:1px solid var(--border-strong); font-family:var(--font-display); font-size:1.35rem; color:var(--gold);
  text-shadow:0 0 14px rgba(251,191,36,.45);
}
.brand h1{font-family:var(--font-display); font-size:1.25rem; letter-spacing:.06em; line-height:1.1}
.brand p{color:var(--muted); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase}
.topnav{display:flex; gap:.5rem; flex-wrap:wrap}
.ghost-btn, .primary-btn, .danger-btn{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; font-size:.83rem;
  font-weight:500; padding:.5rem 1.05rem; border:1px solid var(--border);
  background:var(--card); transition:transform .16s ease, box-shadow .16s ease, background .2s, border-color .2s;
}
.ghost-btn:hover,.primary-btn:hover,.danger-btn:hover{transform:translateY(-2px)}
.ghost-btn:hover{background:var(--card-hover); border-color:var(--border-strong)}
.ghost-btn[aria-pressed="true"]{border-color:var(--primary-lt); color:var(--primary-lt); background:var(--primary-dim)}
.primary-btn{
  border-color:transparent; color:#04140A; font-weight:700;
  background:linear-gradient(135deg,#22C55E,#15803D); box-shadow:0 8px 26px rgba(34,197,94,.26);
}
.primary-btn:hover{box-shadow:0 14px 34px rgba(34,197,94,.4)}
.danger-btn{border-color:rgba(248,113,113,.35); color:var(--danger-lt); background:var(--danger-dim)}
.primary-btn:disabled,.ghost-btn:disabled{opacity:.45; cursor:not-allowed; transform:none}

/* ── Hero ── */
.hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:1.25rem; align-items:stretch;
  margin-bottom:1.75rem; animation:fadeUp .5s ease both;
}
.hero-copy{
  padding:2rem; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:linear-gradient(150deg, rgba(15,23,42,.92), rgba(7,11,20,.72)); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero-copy::after{
  content:''; position:absolute; inset:auto -20% -60% auto; width:60%; height:150%;
  background:radial-gradient(circle, rgba(34,197,94,.16), transparent 65%); pointer-events:none;
}
.kicker{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-dim);
  background:var(--gold-dim); padding:.25rem .7rem; border-radius:999px; margin-bottom:1rem;
}
.hero-copy h2{font-family:var(--font-display); font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.08; letter-spacing:.01em}
.hero-copy h2 em{font-style:normal; color:var(--primary-lt)}
.hero-copy p.lead{color:#C7CEDC; margin:1rem 0 1.5rem; max-width:56ch}
.hero-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.hero-side{
  padding:1.5rem; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--bg-panel);
  backdrop-filter:blur(12px); box-shadow:var(--shadow);
}
.spec-list{list-style:none; display:grid; gap:.7rem}
.spec-list li{display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:#CBD3E1}
.spec-list li b{color:var(--text); font-weight:500}
.spec-list .dot{width:7px; height:7px; border-radius:50%; background:var(--primary-lt); box-shadow:0 0 10px var(--primary-lt); flex:0 0 auto}

/* ── Panels & cards ── */
.panel{
  border-radius:var(--radius); border:1px solid var(--border); background:var(--card);
  backdrop-filter:blur(12px); box-shadow:var(--shadow); padding:1.4rem;
}
.panel > h3{font-family:var(--font-display); font-size:1rem; letter-spacing:.08em; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem}
.section-title{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:2.25rem 0 1rem}
.section-title h3{font-family:var(--font-display); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:#D6DCE8}
.section-title span{color:var(--muted); font-size:.78rem}
.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.fade-up{animation:fadeUp .45s ease both}