:root {
  --bg: #070b12;
  --bg2: #0c1220;
  --text: #e9f1ff;
  --muted: #97a6c4;
  --brand: #4ea1ff;
  --line: #1b2740;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 500px at 50% -50%, #17325f 0%, var(--bg) 50%), var(--bg);
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('./assets/ai-web3-bg.svg') center/cover no-repeat;
  opacity: .5;
  pointer-events: none;
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,8,16,.55), rgba(4,8,16,.88));
  pointer-events: none;
  z-index: -1;
}
.container { width: min(1100px, 92%); margin: 0 auto; }
.nav { position: sticky; top: 0; backdrop-filter: blur(8px); background: rgba(7,11,18,.7); border-bottom: 1px solid var(--line); z-index: 9; box-shadow: 0 1px 0 rgba(100,160,255,.18), 0 6px 30px rgba(14,40,90,.25); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo-brand { display:flex; align-items:center; gap:10px; }
.logo-img { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(132,210,255,.55); box-shadow: 0 0 16px rgba(90,198,255,.45); animation: logoGlow 2.4s ease-in-out infinite; }
.logo-text { font-size: 24px; font-weight: 800; color:#eaf3ff; text-shadow:0 0 16px rgba(95,160,255,.45); }
nav a { color: var(--muted); text-decoration: none; margin: 0 10px; position: relative; padding-bottom: 4px; transition: color .2s ease; }
nav a:hover { color: var(--text); }
nav a.active { color: #d7ecff; }
nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background: linear-gradient(90deg,#67b7ff,#8c8aff); box-shadow: 0 0 10px rgba(104,176,255,.6); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle { background: transparent; border: 1px solid #36507c; color: #cfe1ff; border-radius: 10px; padding: 10px 12px; font-weight: 700; cursor: pointer; }
.btn { background: var(--brand); color: #061020; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; display: inline-block; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.btn::after { content:""; position:absolute; inset:-40% auto -40% -120%; width:60%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left .5s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(78,161,255,.45); }
.btn:hover::after { left: 140%; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid #36507c; }

.hero { position: relative; overflow: hidden; padding: 84px 0 60px; border-bottom: 1px solid var(--line); }
.jarvis-fx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; pointer-events: none; z-index: 0; }
.hud-rings { position: absolute; right: -80px; top: -30px; width: 320px; height: 320px; pointer-events: none; z-index: 0; }
.hud-rings span { position: absolute; inset: 0; border: 1px solid rgba(122,180,255,.35); border-radius: 50%; animation: spin 18s linear infinite; }
.hud-rings span:nth-child(2) { inset: 35px; border-color: rgba(85,148,255,.5); animation-direction: reverse; animation-duration: 12s; }
.hud-rings span:nth-child(3) { inset: 70px; border-color: rgba(137,189,255,.7); animation-duration: 8s; }
.scanline { position: absolute; left: 0; right: 0; top: -20%; height: 30%; background: linear-gradient(180deg, rgba(70,140,255,0) 0%, rgba(70,140,255,.12) 45%, rgba(70,140,255,0) 100%); animation: sweep 6s ease-in-out infinite; pointer-events: none; z-index: 0; }
.aurora { position:absolute; inset:-20% -10% auto -10%; height: 55%; background: conic-gradient(from 0deg, rgba(72,143,255,.22), rgba(101,255,222,.16), rgba(128,121,255,.2), rgba(72,143,255,.22)); filter: blur(28px); animation: auroraSpin 14s linear infinite; pointer-events:none; z-index:0; }
.hud-corners { position:absolute; inset: 18px; pointer-events:none; z-index:0; }
.hud-corners span { position:absolute; width: 30px; height: 30px; border: 2px solid rgba(117,190,255,.6); animation: cornerBlink 2s ease-in-out infinite; }
.hud-corners span:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
.hud-corners span:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; animation-delay:.4s; }
.hud-corners span:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; animation-delay:.8s; }
.hud-corners span:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; animation-delay:1.2s; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.jarvis-typing { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9fcbff; margin-top: 8px; border-right: 2px solid #79b9ff; white-space: nowrap; overflow: hidden; width: 0; animation: typing 5s steps(48,end) infinite alternate, blink .8s step-end infinite; }
.hero-core-fx { position: relative; width: min(220px, 58%); aspect-ratio: 1 / 1; margin: 0 auto 14px; display:grid; place-items:center; }
.core-pulse { position:absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(123,201,255,.45); box-shadow: 0 0 24px rgba(76,156,255,.35); animation: ringPulse 2.6s ease-out infinite; }
.core-pulse.delay { animation-delay: 1.1s; }
.core-dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #dff3ff 0%, #6fb6ff 60%, #2b6cff 100%); box-shadow: 0 0 24px rgba(112,186,255,.9), 0 0 56px rgba(73,130,255,.55); animation: coreBreath 1.8s ease-in-out infinite; }
.hero-visual { width: 100%; border: 1px solid #3b5f94; border-radius: 16px; box-shadow: 0 0 0 1px rgba(113,175,255,.15), 0 0 40px rgba(48,104,210,.35); animation: floaty 5s ease-in-out infinite; }
.bg-glow { position: absolute; inset: auto -10% -20% -10%; height: 240px; background: radial-gradient(circle, rgba(68,150,255,.35), rgba(68,150,255,0)); filter: blur(20px); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logoGlow { 0%,100%{ box-shadow: 0 0 14px rgba(90,198,255,.35);} 50%{ box-shadow: 0 0 26px rgba(90,198,255,.75);} }
@keyframes ringPulse { 0% { transform: scale(.72); opacity:0; } 35% { opacity:.8; } 100% { transform: scale(1.12); opacity:0; } }
@keyframes coreBreath { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.18); filter: brightness(1.22); } }
@keyframes sweep { 0%,100% { transform: translateY(0); } 50% { transform: translateY(240%); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes typing { from { width: 0; } to { width: 48ch; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes titlePulse { 0%,100% { text-shadow: 0 0 16px rgba(115,184,255,.25);} 50% { text-shadow: 0 0 30px rgba(115,184,255,.55);} }
@keyframes auroraSpin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.08);} to { transform: rotate(360deg) scale(1);} }
@keyframes cornerBlink { 0%,100%{opacity:.35} 50%{opacity:1} }
@keyframes glitchA { 0%{transform:translate(0,0)} 20%{transform:translate(1px,-1px)} 40%{transform:translate(-1px,1px)} 60%{transform:translate(1px,0)} 80%{transform:translate(-1px,-1px)} 100%{transform:translate(0,0)} }
@keyframes glitchB { 0%{transform:translate(0,0)} 25%{transform:translate(-1px,1px)} 50%{transform:translate(1px,-1px)} 75%{transform:translate(-1px,0)} 100%{transform:translate(0,0)} }
@keyframes bars { 0%,100%{transform:scaleY(.6);opacity:.65} 50%{transform:scaleY(1.2);opacity:1} }
@keyframes cardSweep { 0% { transform: translateX(-30%) rotate(-8deg);} 100% { transform: translateX(35%) rotate(-8deg);} }
.section.flash { animation: sectionFlash .6s ease; }
@keyframes sectionFlash { 0% { box-shadow: inset 0 0 0 rgba(109,181,255,0); } 50% { box-shadow: inset 0 0 80px rgba(109,181,255,.1); } 100% { box-shadow: inset 0 0 0 rgba(109,181,255,0); } }

.badge { display:inline-block; padding: 6px 10px; border: 1px solid #2f4f82; border-radius: 999px; color: #a6c7ff; font-size: 12px; letter-spacing: .8px; }
h1 { font-size: 64px; margin: 12px 0 0; position: relative; text-shadow: 0 0 24px rgba(115,184,255,.35); animation: titlePulse 3s ease-in-out infinite; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: rgba(93,223,255,.85); transform: translate(1px,0); clip-path: inset(0 0 52% 0); animation: glitchA 2.2s infinite linear alternate-reverse; }
.glitch::after { color: rgba(132,144,255,.8); transform: translate(-1px,0); clip-path: inset(48% 0 0 0); animation: glitchB 1.8s infinite linear alternate-reverse; }
.subtitle { font-size: 24px; color: #bed5ff; margin: 6px 0 20px; }
.hero-copy { color: var(--muted); max-width: 680px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.pill-row span { border: 1px solid #2f4f82; color: #c9ddff; padding: 8px 12px; border-radius: 999px; font-size: 14px; }
.signal-bars { display:flex; gap: 5px; align-items:flex-end; height: 24px; margin: 8px 0 14px; }
.signal-bars span { width: 4px; background: linear-gradient(180deg,#99cbff,#4f88ff); border-radius: 3px; animation: bars 1s ease-in-out infinite; }
.signal-bars span:nth-child(1){height:8px;animation-delay:0s}
.signal-bars span:nth-child(2){height:14px;animation-delay:.15s}
.signal-bars span:nth-child(3){height:22px;animation-delay:.3s}
.signal-bars span:nth-child(4){height:16px;animation-delay:.45s}
.signal-bars span:nth-child(5){height:10px;animation-delay:.6s}

.cta-row { display:flex; gap: 10px; margin-top: 20px; }
.section { padding: 56px 0; border-bottom: 1px solid var(--line); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.show { opacity: 1; transform: translateY(0); }
h2 { font-size: 30px; margin: 0 0 14px; }
.muted { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.card { background: linear-gradient(180deg, rgba(12,18,32,.86), rgba(10,16,32,.92)); border: 1px solid var(--line); border-radius: 12px; padding: 16px; backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(92,150,255,.08); position: relative; overflow: hidden; }
.card::after { content:""; position:absolute; width:180%; height:60px; left:-40%; top:-30px; background: linear-gradient(90deg, transparent, rgba(110,190,255,.18), transparent); transform: rotate(-8deg); animation: cardSweep 5s linear infinite; }
.card .num { font-weight: 800; font-size: 22px; color: #dff0ff; text-shadow: 0 0 14px rgba(88,160,255,.35); }
.card .label { color: var(--muted); font-size: 13px; margin-top: 8px; }
.token .content { display: grid; gap: 8px; color: #d6e4ff; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.panel { background: #0b1324; border: 1px solid var(--line); border-radius: 12px; padding: 16px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; transform-style: preserve-3d; }
.panel:hover { transform: translateY(-4px) scale(1.01); border-color: #3d6fae; box-shadow: 0 10px 30px rgba(29,77,170,.28); }
.panel img { width: 100%; border-radius: 10px; border: 1px solid #233959; margin-bottom: 12px; }
.panel h3 { margin: 0 0 8px; }
.timeline { display: grid; gap: 10px; }
.timeline div { display: grid; grid-template-columns: 100px 1fr; gap: 14px; border: 1px solid var(--line); padding: 12px; border-radius: 10px; background: #0a1323; }
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.arch-card { border: 1px solid var(--line); border-radius: 12px; background: rgba(12,20,38,.72); padding: 16px; }
.arch-card h3 { margin: 0 0 8px; color: #cfe5ff; }
.token-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.token-box { border: 1px solid #2a4367; border-radius: 10px; background: rgba(11,21,39,.8); padding: 12px; }
.token-box h4 { margin: 0 0 6px; color: #d4e8ff; font-size: 14px; }
.token-box p { margin: 0; color: #8fb2de; font-size: 13px; }
.list-check { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #d5e8ff; }
.contact-box { text-align: center; }
.footer { padding: 20px 0 40px; }
.footer-inner { display:flex; justify-content: space-between; align-items:center; color: var(--muted); }
.footer a { color: #b4cbf8; text-decoration: none; margin-left: 14px; }

.boot-screen { position: fixed; inset: 0; background: radial-gradient(circle at center, #0b1a31, #04070f 70%); display: grid; place-items: center; z-index: 9999; transition: opacity .6s ease, visibility .6s ease; animation: bootFade .8s ease 1.6s forwards; }
.boot-screen.hidden { opacity: 0; visibility: hidden; }
@keyframes bootFade { to { opacity: 0; visibility: hidden; } }
.boot-core { font-size: 54px; font-weight: 800; letter-spacing: 8px; color: #c7e2ff; text-shadow: 0 0 28px rgba(95,172,255,.8); }
.boot-sub { text-align: center; margin-top: 8px; color: #8bbcff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.scroll-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 1000; background: linear-gradient(90deg, #5eb2ff, #7a78ff); box-shadow: 0 0 18px rgba(91,168,255,.8); }
.cursor-glow { position: fixed; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(82,150,255,.18), rgba(82,150,255,0) 70%); pointer-events: none; transform: translate(-50%, -50%); z-index: 0; mix-blend-mode: screen; }
.click-ripple { position: fixed; width: 12px; height: 12px; border: 2px solid rgba(138,201,255,.85); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1001; animation: ripple .65s ease-out forwards; }
@keyframes ripple { from { opacity: .9; width:12px; height:12px; } to { opacity:0; width:120px; height:120px; } }

@media (max-width: 900px) {
  h1 { font-size: 42px; }
  .hero-inner { grid-template-columns: 1fr; }
  .logo-text { font-size: 18px; }
  .logo-img { width: 36px; height: 36px; }
  .jarvis-typing { white-space: normal; width: auto; animation: none; border-right: 0; }
  .hud-rings { opacity: .35; right: -120px; top: -80px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .arch-grid { grid-template-columns: 1fr; }
  .token-grid { grid-template-columns: repeat(2,1fr); }
  nav { display:none; }
}