/* v3.1 — add overlay action row & a primary style for Skip */
:root{
  --bg:#05070b; --bg-2:#0a0e17; --ink:#d8f0ff; --muted:#8fb8d3;
  --accent:#00b3ff; --accent-2:#2bd2ff; --glow:#7ae1ff;
  --card:#0e1421cc; --card-2:#0b1322cc; --border:#16324b;
  --ghost:#7a91a6; --shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35);
}

*{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}
body{ margin:0; color:var(--ink);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0,179,255,.15), transparent 40%),
              radial-gradient(800px 400px at 20% 120%, rgba(0,179,255,.08), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;
}
body::before{ content:""; position:fixed; inset:0;
  background:
    repeating-linear-gradient( to right, rgba(0,179,255,.045) 0 1px, transparent 1px 120px),
    repeating-linear-gradient( to bottom, rgba(0,179,255,.045) 0 1px, transparent 1px 120px);
  transform: perspective(600px) rotateX(55deg); transform-origin: top center;
  filter: blur(.2px); pointer-events:none; opacity:.35;
}

.skip-link{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--accent);
  color:#00121b; padding:.6rem .9rem; border-radius:.6rem; z-index:9999; }

.site-header{ position:relative; display:flex; align-items:center; justify-content:space-between;
  padding: clamp(16px, 2vw, 28px); backdrop-filter: saturate(135%) blur(6px); }
.brand{ display:flex; align-items:center; gap:.75rem }
.brand .logo svg path{ fill:var(--accent) }
.title{ margin:0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing:.4px; font-weight:800;
  background: linear-gradient(90deg, var(--ink), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.top-nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0 }
.top-nav a{ color:var(--muted); text-decoration:none; font-weight:600; padding:.5rem .8rem; border-radius:.6rem; transition:all .2s ease; }
.top-nav a:hover{ color:var(--ink); background:rgba(0,179,255,.08); box-shadow: inset 0 0 0 1px rgba(43,210,255,.25) }

.hero{ position:relative; padding: clamp(52px, 10vmin, 120px) 2rem 2rem; display:grid; place-items:center; text-align:center; min-height: 60vh; }
.hero .headline{ font-size: clamp(1.8rem, 6.2vw, 3.8rem); line-height:1.05; margin: 0 0 .55rem; letter-spacing:.5px; font-weight:900; }
.hero .headline span{ background: linear-gradient(90deg, var(--accent), var(--glow));
  -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 8px 22px rgba(0,179,255,.25)); }
.tagline{ color:var(--muted); max-width: 72ch; margin: 0 auto 1.4rem }
.btn-primary{ display:inline-block; text-decoration:none; font-weight:900; padding:.95rem 1.25rem; border-radius:1rem;
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#00121b; box-shadow: 0 10px 30px rgba(0,179,255,.35);
  letter-spacing:.3px; transition: transform .15s ease, box-shadow .15s ease; border:0; }
.btn-primary:hover{ transform: translateY(-1px) }
.hero-glow{ position:absolute; inset:auto 0 -25% 0; height: 320px;
  background: radial-gradient(50% 60% at 50% 40%, rgba(0,179,255,.25), transparent 70%); filter: blur(30px); pointer-events:none; z-index:-1; }

#app[data-state="closed"] #hub{ display:block; opacity:0; transform: translateY(18px); pointer-events:none; }
#app[data-state="closed"] #hub[hidden]{ display:block }
#app[data-state="open"] #hub{ opacity:1; transform:none; pointer-events:auto; }
#app[data-state="open"] #hub[hidden]{ display:block }

.hub{ padding: min(7vmin, 56px) 2rem 80px; transition: opacity .5s ease, transform .5s ease }
.hub-header{ text-align:center; margin: 0 0 1.2rem }
.hub-header h3{ font-size: clamp(1.2rem, 2.8vw, 1.6rem); margin:.2rem 0 .3rem }
.hub-header p{ color:var(--muted); margin:0 }
.hub-grid{ display:grid; gap: clamp(14px, 2.2vw, 22px); grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); margin-top: 1.2rem; }

.hub-card{ position:relative; isolation:isolate; display:block; padding:0; border:0; background:transparent; cursor:pointer;
  text-align:left; color:inherit; text-decoration:none; border-radius: 1.25rem; overflow:hidden; box-shadow: var(--shadow);
  transform: translateZ(0); opacity:0; transform: translateY(14px) scale(.98);
  animation: cardIn .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--stagger, 1) * .08s + .15s);
}
@keyframes cardIn{ to{ opacity:1; transform: translateY(0) scale(1) } }
.hub-card.disabled{ cursor: not-allowed; opacity:.85 }
.hub-card .card-border{ position:absolute; inset:0; border-radius: inherit;
  background: conic-gradient(from 180deg at 50% 50%, rgba(43,210,255,.45), rgba(0,179,255,.15), rgba(43,210,255,.45));
  filter: blur(18px); opacity:.35; transition: opacity .2s ease; z-index:0; }
.hub-card .card-core{ position:relative; z-index:1; border-radius:inherit; background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border); padding: 1.2rem 1.2rem 1rem; backdrop-filter: blur(8px) saturate(120%);
  min-height: 210px; display:flex; flex-direction:column; gap:.65rem; justify-content:space-between; will-change: transform; }
.hub-card .card-icon svg .bolt{ fill: var(--accent) } .hub-card .card-icon svg .handle{ fill: #0f2537 }
.hub-card .card-icon svg .placeholder{ fill:#0f2537; stroke: #184465; stroke-width:2 }
.hub-card h4{ margin:.15rem 0; font-size: 1.05rem } .hub-card p{ margin:0; color: var(--muted); font-size:.95rem }
.hub-card .card-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:.35rem }
.chip, .chip.ghost{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; padding:.28rem .55rem; border-radius:.6rem;
  border:1px solid rgba(43,210,255,.35); background: rgba(0,179,255,.12); color: var(--ink); }
.chip.ghost{ border-color: rgba(122,145,166,.35); background: rgba(122,145,166,.08); color: var(--ghost) }
.enter{ font-weight:800; color: var(--glow); letter-spacing:.2px }

.hub-card:not(.disabled):hover .card-border { opacity:.8 }
.hub-card:not(.disabled):hover .card-core { box-shadow: 0 0 0 1px rgba(0,179,255,.25), 0 10px 30px rgba(0,179,255,.25) }
.hub-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px }

#bgCanvas{ position:fixed; inset:0; z-index:-2; background: linear-gradient(180deg, var(--bg), var(--bg-2)) }

.intro-overlay{ position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,179,255,.10), transparent 45%),
              linear-gradient(180deg, rgba(0,10,16,.85), rgba(0,10,16,.85));
  animation: overlayIn .4s ease both; }
@keyframes overlayIn{ from{ opacity:0 } to{ opacity:1 } }
.holo-frame{ position:relative; width:min(960px, 92vw); aspect-ratio: 16/9; border-radius: 22px; overflow:hidden;
  box-shadow: 0 30px 120px rgba(0,179,255,.25), 0 10px 30px rgba(0,0,0,.65); transform: perspective(1200px) rotateX(2deg); }
.holo-border{ position:absolute; inset:-2px; border-radius: 24px; pointer-events:none;
  background: conic-gradient(from 0deg, rgba(43,210,255,.8), rgba(0,179,255,.2), rgba(43,210,255,.8)); filter: blur(16px); opacity:.7; }
.holo-frame::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(122,225,255,.10), rgba(0,179,255,.03)),
              radial-gradient(60% 100% at 50% -20%, rgba(122,225,255,.22), transparent 60%); mix-blend-mode: screen; }
.intro-video{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(115%) contrast(105%) brightness(105%); mix-blend-mode: screen; }
.scanlines{ position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient( to bottom, rgba(0,179,255,.12) 0 1px, transparent 1px 3px);
  opacity:.25; animation: scan 6s linear infinite; }
@keyframes scan{ 0%{ background-position-y:0 } 100%{ background-position-y:8px } }

.overlay-actions{ position:absolute; inset:auto 12px 12px auto; right:12px; display:flex; gap:.5rem; }
.btn-skip{ font-weight:800; letter-spacing:.3px; padding:.5rem .8rem; border-radius:.7rem; border:1px solid rgba(43,210,255,.35);
  background: rgba(0,179,255,.12); color: var(--ink); text-transform:uppercase; cursor:pointer; box-shadow: 0 10px 20px rgba(0,0,0,.35); }
.btn-skip:hover{ background: rgba(0,179,255,.20) }
.btn-skip--primary{ border-color: rgba(20,241,149,.45); background: rgba(20,241,149,.12); }

.intro-overlay.is-hidden{ animation: overlayOut .4s ease both; pointer-events:none; }
@keyframes overlayOut{ to{ opacity:0; visibility:hidden } }

.site-footer{ text-align:center; color:var(--muted); padding: 3rem 1rem 4rem }
@media (max-width: 480px){ .hero{ padding-top: 72px } .top-nav ul{ gap:.5rem } .top-nav a{ padding:.35rem .6rem } }