/* Design tokens */
:root{
  --bg:#070814;
  --card:rgba(255,255,255,0.06);
  --stroke:rgba(255,255,255,0.12);
  --txt:#E7E7EE;
  --muted:#A7A7B7;
  --grad-a:#00E5FF;
  --grad-b:#7C3AED;
  --accent:#8B5CF6;
  --glow: 0 0 24px rgba(124,58,237,.35), 0 0 48px rgba(0,229,255,.25);
  --radius:18px;
  --shadow:0 6px 30px rgba(0,0,0,.35);
}

/* Light theme */
:root.light{
  --bg:#0f1222;
  --card:rgba(255,255,255,0.14);
  --stroke:rgba(255,255,255,0.22);
  --txt:#F4F7FF;
  --muted:#D0D6F0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 80% -10%, rgba(0,229,255,.10), transparent 60%),
              radial-gradient(1000px 700px at -20% 30%, rgba(124,58,237,.10), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

/* Background layers */
#bg-constellation{position:fixed; inset:0; z-index:-2;}
.gradient-orb{
  position:fixed; inset:auto -20% -20% auto; width:55vmax; height:55vmax;
  background:radial-gradient(circle at 30% 30%, rgba(0,229,255,.35), transparent 60%),
             conic-gradient(from 0deg, rgba(124,58,237,.25), transparent 40%, rgba(0,229,255,.25));
  filter: blur(60px) saturate(140%);
  border-radius:50%;
  z-index:-1; pointer-events:none; animation: drift 18s linear infinite alternate;
}
@keyframes drift{to{transform:translate3d(-4vw, -2vh, 0) rotate(12deg)}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:14px clamp(16px,4vw,40px);
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(7,8,20,.65), rgba(7,8,20,.25));
  border-bottom:1px solid var(--stroke);
}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.purpose-badge{
  justify-self:center; font-weight:600; font-size:.95rem; letter-spacing:.02em;
  padding:8px 12px; border-radius:999px; color:#E9F8FF;
  border:1px solid var(--stroke); background:rgba(255,255,255,.06);
}
.header-right{display:flex; gap:10px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{
  color:var(--txt); text-decoration:none; font-weight:500; opacity:.9;
  padding:10px 12px; border-radius:12px; border:1px solid transparent;
}
.nav a:hover{border-color:var(--stroke); background:rgba(255,255,255,.03)}
.menu-btn{
  display:none; width:42px; height:42px; border-radius:12px;
  background:var(--card); border:1px solid var(--stroke);
}
.menu-btn span{display:block; height:2px; margin:7px 9px; background:#cfe;}

/* CTA */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg, rgba(0,229,255,.18), rgba(124,58,237,.18));
  box-shadow: var(--glow); color:white; text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.cta:hover{transform:translateY(-1px); box-shadow: 0 0 18px rgba(124,58,237,.55), 0 0 34px rgba(0,229,255,.35)}
.cta.ghost{background:rgba(255,255,255,.04)}
.cta.lg{padding:14px 22px; font-weight:600}
.cta.block{width:100%}
.cta.sm{padding:8px 12px; font-size:.95rem}

/* Hero */
.hero{min-height:72vh; display:grid; place-items:center; padding:80px 20px}
.hero-inner{max-width:1060px; width:100%; text-align:center}
.eyebrow{letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-size:.82rem}
h1{font-size: clamp(2rem, 4vw + 1rem, 4rem); line-height:1.08; margin:.4rem 0 1rem}
.grad{background:linear-gradient(90deg, var(--grad-a), var(--grad-b)); -webkit-background-clip:text; background-clip:text; color:transparent}
.subhead{font-size: clamp(1rem, .8vw + 1rem, 1.25rem); color:#CFD3F1; opacity:.95}
.hero-cta{display:flex; gap:12px; justify-content:center; margin:26px 0 14px}
.chains{display:flex; gap:8px; justify-content:center; margin-top:10px}
.chip{
  border:1px solid var(--stroke); background:rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px; font-size:.9rem; color:#DDE8FF;
}

/* Sections */
.section{padding:64px 20px}
.section-head{max-width:900px; margin:0 auto 28px; text-align:center}
.section h2{font-size: clamp(1.5rem, 2.4vw + .4rem, 2.2rem); margin:0 0 6px}
.muted{color:var(--muted)}

/* Grid */
.grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(12, 1fr); gap:16px}
.card{
  grid-column:span 12; padding:22px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--stroke); box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.card.glass{backdrop-filter: blur(8px) saturate(140%)}
.card.glow{box-shadow:var(--glow)}
.card .icon{color:var(--grad-a); margin-bottom:10px}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:0; color:#DDE4FF}
.grid .card:nth-child(1), .grid .card:nth-child(2), .grid .card:nth-child(3){min-height:160px}
.price-grid .card{display:flex; flex-direction:column; gap:12px}
.price{font-size:1.6rem; font-weight:800; background:linear-gradient(90deg, var(--grad-a), var(--grad-b)); -webkit-background-clip:text; color:transparent}
.list{margin:0 0 10px 0; padding:0 0 0 18px; color:#DDE8FF}
.accent{outline:1px solid rgba(124,58,237,.45); box-shadow:0 0 0 2px rgba(124,58,237,.25) inset}

/* Responsive columns */
@media (min-width:720px){
  .grid .card{grid-column: span 4}
  .price-grid .card{grid-column: span 4}
}

/* Snap showcase */
.snap{
  max-width:1100px; margin:0 auto; display:grid; grid-auto-flow:column;
  overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; padding:4px;
}
.snap::-webkit-scrollbar{height:10px}
.snap::-webkit-scrollbar-thumb{background:linear-gradient(90deg, var(--grad-a), var(--grad-b)); border-radius:99px}
.snap-item{
  scroll-snap-align:center; min-width:320px; max-width:520px; padding:22px;
  border:1px solid var(--stroke); border-radius:var(--radius); background:var(--card);
}
.kpis{display:flex; gap:12px; margin-top:12px}
.kpi{flex:1; padding:12px; border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.03)}
.kpi span{color:var(--muted); font-size:.9rem}
.kpi strong{display:block; font-size:1.2rem}

/* Pattern demos */
.demo-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* Case studies */
.preview iframe{width:100%; height:220px; border:0; border-radius:14px}

/* Tech stack badges */
.stack-wrap{
  max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.badge{
  padding:8px 12px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:#EAF6FF; font-weight:600;
}

/* Testimonials */
.logo-row{display:flex; gap:8px; margin-bottom:8px}
.logo-dot{width:18px; height:18px; border-radius:50%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}

/* Forms */
.form{max-width:720px; margin:0 auto; display:grid; gap:12px}
label{display:grid; gap:6px; color:#DAE1FF}
input,textarea{
  width:100%; color:var(--txt); background:rgba(255,255,255,.03);
  border:1px solid var(--stroke); border-radius:12px; padding:12px 14px;
}
input:focus, textarea:focus{outline:2px solid rgba(124,58,237,.45); box-shadow:var(--glow)}

/* Footer */
.footer{
  padding:36px 20px; text-align:center; color:var(--muted);
  border-top:1px solid var(--stroke); background:rgba(255,255,255,.02)
}

/* Mobile nav */
@media (max-width:1100px){
  .menu-btn{display:inline-grid; place-items:center}
  .nav{
    position:fixed; top:64px; right:16px; left:16px;
    background:rgba(7,8,20,.95); border:1px solid var(--stroke);
    border-radius:16px; padding:12px; display:none; flex-direction:column; max-height:70vh; overflow:auto;
  }
  .nav.open{display:flex}
}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition: all .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}
.delay-5{transition-delay:.5s}

/* Wallet modal */
.wallet::backdrop{background:rgba(0,0,0,.5); backdrop-filter: blur(3px)}
.wallet-box{min-width:min(92vw,420px); padding:20px}
.wallet-opt{
  width:100%; margin:8px 0; padding:12px; border-radius:12px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:#fff; cursor:pointer;
}
.wallet-opt:hover{background:rgba(255,255,255,.08)}

/* Utility */
.hidden{display:none !important}