:root{
  --bg:#07142a; --bg2:#0a1a35; --grid:#173560; --ink:#e7eef6; --muted:#a9b8cc; --accent:#00e5ff; --accent2:#ff7a00; --card:#0e213f; --outline:#16345f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background: radial-gradient(1200px 800px at 10% -10%, var(--bg2), var(--bg)), #061020; color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;padding:8px 12px;background:#fff;color:#000;border-radius:8px}
.site{position:sticky;top:0;display:flex;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--outline);background: linear-gradient(180deg, rgba(15,41,80,.7), rgba(15,41,80,0));backdrop-filter: blur(8px);z-index:10}
.brand img{height:24px;display:block}
.crumbs{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.crumbs a{color:var(--ink);text-decoration:none}

.hero{position:relative;min-height:66vh;display:grid;place-items:center;padding:64px 20px}
.hero__inner{max-width:960px;text-align:center}
.hero h1{font-size: clamp(28px, 5vw, 56px);letter-spacing:-.02em;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 22px}
.cta{display:inline-block;padding:12px 16px;border-radius:999px;background:linear-gradient(90deg, var(--accent), #84f2ff);color:#01242a;text-decoration:none;font-weight:600;box-shadow:0 6px 24px rgba(0,229,255,.25)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero__grid{position:absolute;inset:0;background:
 linear-gradient(transparent 31px, rgba(0,229,255,.06) 32px, rgba(0,229,255,.06) 33px, transparent 34px),
 linear-gradient(90deg, transparent 31px, rgba(0,229,255,.06) 32px, rgba(0,229,255,.06) 33px, transparent 34px),
 radial-gradient(800px 400px at 80% -20%, rgba(0,229,255,.10), rgba(0,0,0,0));
 background-size: 34px 34px, 34px 34px, auto; opacity:.6; mask-image: radial-gradient(60% 50% at 50% 20%, #000, transparent 80%);
}

.stage{display:grid;grid-template-columns: min(480px, 40vw) 1fr;gap:24px;max-width:1200px;margin:0 auto;padding:12px 20px 80px}
.stage__schematic{position:sticky;top:72px;height:calc(100dvh - 88px);border:1px solid var(--outline);border-radius:16px;background:linear-gradient(180deg, #081733, #06142d);display:grid;place-items:center;overflow:hidden}
.blueprint{position:relative;width:100%;height:100%}
.bp-svg{position:absolute;inset:0;margin:auto;max-width:90%;max-height:90%;opacity:0;transform: scale(.98);transition: opacity .5s ease, transform .5s ease;filter: drop-shadow(0 0 8px rgba(0,229,255,.15))}
.blueprint[data-active="aerospace"] .bp-svg[data-for="aerospace"],
.blueprint[data-active="industry"] .bp-svg[data-for="industry"],
.blueprint[data-active="smart"] .bp-svg[data-for="smart"],
.blueprint[data-active="custom"] .bp-svg[data-for="custom"]{opacity:1;transform:none}

.stage__content{display:flex;flex-direction:column;gap:24px}
.card{background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(255,255,255,.02));border:1px solid var(--outline);padding:20px;border-radius:16px}
.card h2{margin:0 0 8px;font-size:22px}
.card p{margin:0 0 10px;color:var(--muted)}
.bullets{margin:0 0 10px;padding-left:18px;color:var(--ink)}
.bullets li{margin:4px 0}
.chip{display:inline-block;border:1px solid var(--accent);color:var(--accent);text-decoration:none;padding:8px 12px;border-radius:999px}
.chip:hover{background:rgba(0,229,255,.1)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.reveal{opacity:0;transform: translateY(8px);transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 980px){
  .stage{grid-template-columns: 1fr}
  .stage__schematic{order:2;height: 50vh;top: 16px}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important }
}