/* ============================================================
   PROJECT GAGE — Premium 2026 Design System
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --green:       #8DFF3F;
  --green-dim:   rgba(141,255,63,0.07);
  --green-mid:   rgba(141,255,63,0.15);
  --green-glow:  rgba(141,255,63,0.38);
  --blue-glow:   rgba(80,160,255,0.2);
  --bg:          #04040a;
  --bg1:         #080812;
  --bg2:         #0d0d18;
  --bg3:         #13131f;
  --bg4:         #1a1a28;
  --border:      rgba(255,255,255,0.07);
  --border-hi:   rgba(141,255,63,0.22);
  --text:        #eef2e8;
  --text-dim:    #8a9e82;
  --text-muted:  #4e5e48;
  --font-head:   'Baloo 2', 'Space Grotesk', sans-serif;
  --font-body:   'Inter', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  --r:           14px;
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}

h1,h2,h3,h4,.nav-logo,.footer-logo {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p { color: var(--text-dim); }
ul { list-style: none; }
button { cursor: none; border: none; background: none; font: inherit; }

/* ── Section Container ─────────────────────────────────────── */
.sc { max-width: 1200px; margin: 0 auto; padding: 110px 2rem; }

/* ── Section Headers ───────────────────────────────────────── */
.sec-head { margin-bottom: 60px; }
.sec-head h2 {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.sec-head p { font-size: 1rem; color: var(--text-dim); max-width: 580px; line-height: 1.75; }

.sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 16px;
}

/* ── Pulse dot ─────────────────────────────────────────────── */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(141,255,63,0.8), 0 0 14px rgba(141,255,63,0.3);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
.pulse-dot.sm { width: 6px; height: 6px; }
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.55; transform:scale(0.8); }
}

/* ── Custom Cursor ─────────────────────────────────────────── */
.cursor-dot {
  position: fixed; top:0; left:0; z-index:9999;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  pointer-events: none; transform: translate(-50%,-50%);
  box-shadow: 0 0 10px rgba(141,255,63,0.9);
  transition: transform .08s ease;
}
.cursor-ring {
  position: fixed; top:0; left:0; z-index:9998;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(141,255,63,0.45);
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease),
              border-color .3s ease, opacity .3s ease;
}
.cursor-ring.hov { width:50px; height:50px; border-color:var(--green); opacity:.55; }
.cursor-ring.click { width:22px; height:22px; border-color:var(--green); opacity:.9; }
@media (pointer:coarse) { .cursor-dot,.cursor-ring { display:none; } body { cursor:auto; } }

/* ── Reveal animations ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s var(--ease) var(--d,0s),
              transform .65s var(--ease) var(--d,0s);
}
.reveal-up.visible { opacity:1; transform:none; }

/* ── Navigation ────────────────────────────────────────────── */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(4,4,10,0.88);
  border-bottom-color: var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem 2rem;
}
.nav-logo {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
}
.logo-g { color: var(--green); }
.nav-links { display:flex; gap:1.8rem; margin-left:1rem; }
.nav-links a {
  font-size: .875rem; font-weight:500; color:var(--text-dim);
  transition: color .2s ease;
}
.nav-links a:hover { color:var(--green); }
.nav-actions { display:flex; align-items:center; gap:.7rem; margin-left:auto; }
.btn-nav-ghost {
  padding: .45rem 1rem; border-radius:8px;
  border: 1px solid var(--border);
  font-size: .875rem; font-weight:500; color:var(--text-dim);
  transition: all .2s ease;
}
.btn-nav-ghost:hover { border-color:var(--border-hi); color:var(--text); }
.btn-nav-primary {
  display:flex; align-items:center; gap:.4rem;
  padding: .45rem 1.1rem; border-radius:8px;
  background: var(--green-dim); border:1px solid var(--border-hi);
  color:var(--green); font-size:.875rem; font-weight:600;
  transition: all .2s ease;
}
.btn-nav-primary:hover { background:var(--green); color:#000; box-shadow:0 4px 18px var(--green-glow); }
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  padding:4px; background:none; border:none;
}
.nav-toggle span {
  display:block; width:22px; height:1.5px;
  background:var(--text-dim); border-radius:2px; transition:all .3s ease;
}
.mobile-menu {
  display:none; flex-direction:column;
  background:rgba(4,4,10,0.97); border-top:1px solid var(--border);
  max-height:0; overflow:hidden; transition:max-height .4s ease;
}
.mobile-menu.open { display:flex; max-height:500px; }
.mobile-menu a {
  padding:.9rem 2rem; font-size:1rem; font-weight:500;
  color:var(--text-dim); border-bottom:1px solid var(--border);
  transition:color .2s ease;
}
.mobile-menu a:hover { color:var(--green); }
@media(max-width:900px) {
  .nav-links,.nav-actions { display:none; }
  .nav-toggle { display:flex; margin-left:auto; }
  .mobile-menu { display:flex; }
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:.9rem 1.8rem; border-radius:12px;
  background:var(--green); color:#030a00;
  font-size:.95rem; font-weight:700;
  transition: all .25s var(--ease);
}
.btn-primary:hover { box-shadow:0 10px 32px var(--green-glow); transform:translateY(-2px); }
.btn-glass {
  display:inline-flex; align-items:center; gap:8px;
  padding:.9rem 1.6rem; border-radius:12px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  color:var(--text-dim); font-size:.95rem; font-weight:500;
  transition:all .25s var(--ease);
}
.btn-glass:hover { border-color:var(--border-hi); color:var(--text); background:rgba(255,255,255,0.07); }
.btn-arr { font-size:.9rem; transition:transform .2s ease; }
.btn-primary:hover .btn-arr { transform:translateX(3px); }
.btn-star {
  display:inline-flex; align-items:center; gap:8px;
  padding:.85rem 2.2rem; border-radius:100px;
  border:1px solid var(--border-hi); background:var(--green-dim);
  color:var(--green); font-size:1rem; font-weight:700;
  transition:all .25s var(--ease);
}
.btn-star:hover { background:var(--green); color:#000; box-shadow:0 6px 28px var(--green-glow); transform:translateY(-2px); }

/* Magnetic button base */
.mag-btn { position:relative; }

/* ══ HERO ════════════════════════════════════════════════════ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:120px 0 80px;
}
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:.4;
}
.hero-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(141,255,63,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141,255,63,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
  pointer-events:none;
}
.orb {
  position:absolute; border-radius:50%;
  pointer-events:none; filter:blur(80px);
}
.orb-l {
  top:-10%; left:-15%; width:700px; height:700px;
  background:radial-gradient(circle, rgba(141,255,63,0.07) 0%, transparent 65%);
}
.orb-r {
  bottom:-20%; right:-10%; width:600px; height:600px;
  background:radial-gradient(circle, rgba(80,120,255,0.06) 0%, transparent 65%);
}
.hero-container {
  max-width:1240px; margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:60px;
  position:relative; z-index:1;
}

/* Hero content */
.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  padding:.45rem 1rem; border-radius:100px;
  background:rgba(141,255,63,0.06);
  border:1px solid rgba(141,255,63,0.18);
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--green); letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:28px;
}
.hero-title {
  font-size:clamp(44px,6.5vw,80px);
  font-weight:800; color:var(--text);
  letter-spacing:-0.04em; line-height:1.0;
  margin-bottom:24px;
}
.g-text {
  background:linear-gradient(135deg, var(--green) 0%, #c8ff88 55%, var(--green) 100%);
  background-size:200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

.hero-sub {
  font-size:1.08rem; color:var(--text-dim);
  max-width:480px; line-height:1.8; margin-bottom:36px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:52px; }
.hero-stats { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hs-item { text-align:left; }
.hs-val {
  font-family:var(--font-head); font-size:1.9rem; font-weight:800;
  color:var(--green); line-height:1;
}
.hs-lbl { font-size:.76rem; color:var(--text-muted); margin-top:4px; letter-spacing:.04em; }
.hs-sep { width:1px; height:38px; background:var(--border); }

/* ── Phone Mockup ───────────────────────────────────────────── */
.hero-phone-wrap {
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.phone-ambient {
  position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(141,255,63,0.14) 0%, transparent 68%);
  filter:blur(40px); animation:ambient-pulse 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ambient-pulse {
  0%,100%{opacity:.8;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}
.phone-3d {
  transform-style:preserve-3d;
  transition:transform .12s ease;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,0.7)) drop-shadow(0 0 60px rgba(141,255,63,0.1));
}
.phone-frame {
  width:268px; height:560px; border-radius:42px;
  background:linear-gradient(170deg,#1c1c2e 0%,#0a0a14 60%);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.5),
    0 4px 2px rgba(255,255,255,0.04);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}
.phone-status-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.35rem 1rem;
  background:rgba(0,0,0,0.3);
  flex-shrink:0;
}
.psb-time { font-family:var(--font-mono); font-size:11px; font-weight:600; color:#fff; }
.psb-icons { display:flex; align-items:center; gap:5px; }
.phone-screen {
  flex:1; position:relative; overflow:hidden;
  background:#f0f0f0;
}
.phone-home-bar {
  height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:#0a0a14;
}
.phone-home-bar::after {
  content:''; width:80px; height:3px; border-radius:2px;
  background:rgba(255,255,255,0.3);
}

/* Phone states */
.ps {
  position:absolute; inset:0;
  display:none; flex-direction:column;
  background:#f5f5f5;
  transition:opacity .4s ease;
}
.ps.active { display:flex; }

/* STATE: Voice */
.ps-voice { background:#1a1a2e; align-items:center; justify-content:center; }
.ps-voice-inner {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:24px;
}
.voice-rings { position:relative; width:90px; height:90px; margin-bottom:4px; }
.vr {
  position:absolute; border-radius:50%;
  border:1.5px solid rgba(141,255,63,0.3);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.vr1 { width:50px; height:50px; animation:vring 2s ease-in-out infinite; }
.vr2 { width:70px; height:70px; animation:vring 2s ease-in-out infinite .3s; }
.vr3 { width:90px; height:90px; animation:vring 2s ease-in-out infinite .6s; }
@keyframes vring {
  0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:.15;transform:translate(-50%,-50%) scale(1.04);}
}
.voice-mic {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1; animation:mic-glow 2s ease-in-out infinite;
}
@keyframes mic-glow {
  0%,100%{filter:drop-shadow(0 0 6px rgba(141,255,63,.7));}
  50%{filter:drop-shadow(0 0 16px rgba(141,255,63,1));}
}
.voice-waves {
  display:flex; gap:3px; align-items:center; height:30px;
}
.voice-waves span {
  width:3px; border-radius:2px; background:var(--green);
  animation:wave-bar 1s ease-in-out infinite;
}
.voice-waves span:nth-child(1){height:8px;animation-delay:0s;}
.voice-waves span:nth-child(2){height:20px;animation-delay:.1s;}
.voice-waves span:nth-child(3){height:28px;animation-delay:.2s;}
.voice-waves span:nth-child(4){height:18px;animation-delay:.1s;}
.voice-waves span:nth-child(5){height:8px;animation-delay:0s;}
@keyframes wave-bar {
  0%,100%{transform:scaleY(1);}
  50%{transform:scaleY(0.4);}
}
.voice-label {
  font-family:var(--font-mono); font-size:12px;
  color:rgba(141,255,63,0.8); letter-spacing:.06em;
}
.voice-cmd {
  font-size:11.5px; color:rgba(255,255,255,0.5);
  text-align:center; line-height:1.5; font-style:italic;
  max-width:200px;
}

/* WhatsApp UI (shared) */
.wa-app { display:flex; flex-direction:column; height:100%; }
.wa-blur { filter:blur(3px); opacity:.5; }
.wa-header {
  display:flex; align-items:center; justify-content:space-between;
  background:#075E54; color:#fff; padding:.6rem 1rem;
  font-weight:700; font-size:15px; flex-shrink:0;
}
.wa-search { padding:.4rem .6rem; background:#f0f0f0; flex-shrink:0; }
.wa-search-inner {
  background:#fff; border-radius:20px;
  padding:.3rem .8rem; font-size:12px; color:#aaa;
}
.wa-list { flex:1; overflow:hidden; background:#fff; }
.wa-item {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .8rem; border-bottom:1px solid #f5f5f5;
  transition:background .2s ease;
}
.wa-item-flash { background:rgba(141,255,63,0.15) !important; }
.wa-av {
  width:40px; height:40px; border-radius:50%;
  background:var(--c, #ccc);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:15px; flex-shrink:0;
}
.wa-info { flex:1; min-width:0; }
.wa-nm { font-size:13.5px; font-weight:600; color:#111; }
.wa-pr { font-size:12px; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-ti { font-size:11px; color:#667781; flex-shrink:0; }

/* Scan overlay */
.scan-overlay { position:absolute; inset:0; pointer-events:none; }
.scan-beam {
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(141,255,63,0.6), rgba(141,255,63,1), rgba(141,255,63,0.6), transparent);
  box-shadow:0 0 12px rgba(141,255,63,0.5);
  animation:scan 2s linear infinite;
  top:0;
}
@keyframes scan {
  0%{top:0%;opacity:0;}
  5%{opacity:1;}
  95%{opacity:1;}
  100%{top:100%;opacity:0;}
}

/* Element boxes */
.el-boxes { position:absolute; inset:0; pointer-events:none; }
.el-box {
  position:absolute; left:5%; width:90%;
  border:1px solid rgba(141,255,63,0.35); border-radius:4px;
  display:flex; align-items:center; gap:6px;
  padding:2px 6px; background:rgba(141,255,63,0.04);
  animation:el-appear .3s ease forwards;
}
.el-hi { border-color:rgba(141,255,63,0.9); background:rgba(141,255,63,0.1); }
.el-n {
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  background:rgba(141,255,63,0.2); border:1px solid rgba(141,255,63,0.4);
  border-radius:3px; padding:1px 4px; color:var(--green);
}
.el-n-hi { background:var(--green); color:#000; border-color:var(--green); }
.el-l { font-size:9px; color:rgba(141,255,63,0.8); font-family:var(--font-mono); }
@keyframes el-appear { from{opacity:0;transform:scaleX(0.9);} to{opacity:1;transform:scaleX(1);} }

/* Reason overlay */
.reason-glass {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:20px;
  background:rgba(4,4,16,0.85);
  backdrop-filter:blur(6px);
}
.rg-model {
  font-family:var(--font-mono); font-size:10px; color:var(--green);
  text-transform:uppercase; letter-spacing:.1em;
  padding:3px 10px; border:1px solid rgba(141,255,63,.25);
  border-radius:20px; background:rgba(141,255,63,.06);
}
.rg-dots { display:flex; gap:5px; }
.rg-dots span {
  width:8px; height:8px; border-radius:50%;
  background:var(--green); opacity:.3;
  animation:think-dot 1.2s ease-in-out infinite;
}
.rg-dots span:nth-child(2){animation-delay:.2s;}
.rg-dots span:nth-child(3){animation-delay:.4s;}
@keyframes think-dot {
  0%,100%{opacity:.3;transform:scale(1);}
  50%{opacity:1;transform:scale(1.3);}
}
.rg-lines { width:100%; }
.rg-line {
  font-family:var(--font-mono); font-size:10.5px;
  color:rgba(141,255,63,0.55); line-height:1.9;
}
.rg-action { color:var(--green); font-weight:600; }

/* Tap cursor */
.tap-cursor-el {
  position:absolute; width:20px; height:20px; border-radius:50%;
  background:rgba(141,255,63,0.8);
  box-shadow:0 0 0 4px rgba(141,255,63,0.2);
  pointer-events:none; z-index:10;
  animation:cursor-move 1.8s ease-in-out forwards;
}
.tap-ripple-el {
  position:absolute; width:40px; height:40px; border-radius:50%;
  border:2px solid var(--green); opacity:0;
  pointer-events:none; z-index:9;
  animation:ripple-out 1.8s ease-in-out forwards 1.2s;
}
@keyframes cursor-move {
  0%{top:60%;left:50%;opacity:0;}
  20%{opacity:1;}
  70%{top:35%;left:50%;opacity:1;}
  85%{top:35%;left:50%;transform:scale(0.7);}
  100%{top:35%;left:50%;transform:scale(1);opacity:.8;}
}
@keyframes ripple-out {
  0%{opacity:.8;transform:translate(-50%,-50%) scale(0.5);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2);}
}

/* WhatsApp chat view */
.wa-chat { display:flex; flex-direction:column; height:100%; background:#e5ddd5; }
.wa-chat-hdr {
  display:flex; align-items:center; gap:.5rem;
  background:#075E54; color:#fff; padding:.5rem .7rem; flex-shrink:0;
}
.wa-back { font-size:18px; padding:0 4px; }
.wa-chat-meta { flex:1; min-width:0; }
.wa-chat-meta .wa-nm { font-size:13px; font-weight:700; }
.wa-online { font-size:10.5px; opacity:.75; }
.wa-more { margin-left:auto; font-size:18px; }
.wa-msgs { flex:1; padding:.8rem .7rem; display:flex; flex-direction:column; gap:.4rem; overflow:hidden; }
.wa-bub {
  max-width:75%; border-radius:8px;
  padding:.4rem .65rem; font-size:12px; line-height:1.45; position:relative;
}
.wa-recv { background:#fff; align-self:flex-start; border-radius:0 8px 8px 8px; }
.wa-sent { background:#dcf8c6; align-self:flex-end; border-radius:8px 0 8px 8px; }
.wa-new-msg { animation:bub-in .4s ease forwards; }
@keyframes bub-in { from{opacity:0;transform:scale(0.8) translateX(10px);} to{opacity:1;transform:none;} }
.wa-t { display:block; font-size:9.5px; color:#667781; text-align:right; margin-top:2px; }
.wa-input {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .6rem; background:#f0f0f0; flex-shrink:0;
}
.wa-input-txt {
  flex:1; background:#fff; border-radius:20px;
  padding:.35rem .8rem; font-size:12px; color:#333;
  min-height:30px; display:flex; align-items:center;
}
.wa-send {
  width:34px; height:34px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px;
}
.type-cur {
  display:inline-block;
  animation:cur-blink .7s step-end infinite;
}
@keyframes cur-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Done overlay */
.done-glass {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:rgba(0,40,0,0.6); backdrop-filter:blur(4px);
  animation:done-in .5s ease forwards;
}
@keyframes done-in { from{opacity:0;} to{opacity:1;} }
.done-check-ring {
  width:54px; height:54px; border-radius:50%;
  border:2px solid var(--green);
  background:rgba(141,255,63,0.12);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--green);
  animation:done-pop .4s var(--ease) .1s both;
}
@keyframes done-pop { from{transform:scale(0);} to{transform:scale(1);} }
.done-ttl { font-family:var(--font-head); font-size:15px; font-weight:700; color:#fff; }
.done-sub { font-family:var(--font-mono); font-size:10px; color:rgba(141,255,63,.75); text-align:center; }

/* Floating chips around phone */
.float-chip {
  position:absolute; display:flex; align-items:center; gap:7px;
  padding:.45rem .9rem; border-radius:100px;
  background:rgba(8,8,20,0.82); backdrop-filter:blur(14px);
  border:1px solid rgba(141,255,63,0.2);
  font-size:11px; color:rgba(141,255,63,.85); white-space:nowrap;
  font-family:var(--font-mono);
  animation:fc-float 4s ease-in-out infinite;
}
.fc-1 { top:12%; right:-18%; animation-delay:0s; }
.fc-2 { top:48%; right:-20%; animation-delay:.8s; }
.fc-3 { top:76%; right:-14%; animation-delay:1.6s; }
@keyframes fc-float {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* State badges */
.ps-badge {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; color:var(--green);
  background:rgba(4,4,14,0.82); padding:4px 12px; border-radius:20px;
  border:1px solid rgba(141,255,63,.22); white-space:nowrap;
  backdrop-filter:blur(8px);
}
.ps-badge-b { bottom:10px; }

/* Scroll hint */
.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text-muted); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.6;
}
.scroll-line-anim {
  width:1px; height:30px;
  background:linear-gradient(to bottom, transparent, var(--green), transparent);
  animation:scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%,100%{transform:scaleY(1);opacity:1;}
  50%{transform:scaleY(.5);opacity:.4;}
}

/* Mobile hero */
@media(max-width:960px) {
  .hero-container { grid-template-columns:1fr; text-align:center; gap:50px; }
  .hero-sub,.hero-badge { margin-left:auto; margin-right:auto; }
  .hero-actions,.hero-stats { justify-content:center; }
  .hero-phone-wrap { order:-1; }
  .fc-1,.fc-2,.fc-3 { display:none; }
  .phone-frame { width:230px; height:480px; }
}
@media(max-width:480px) {
  .hero-title { font-size:clamp(36px,10vw,52px); }
  .phone-frame { width:200px; height:420px; }
}

/* ══ PROBLEM ════════════════════════════════════════════════ */
.problem { background:var(--bg1); border-bottom:1px solid var(--border); }
.prob-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:700px){ .prob-grid{grid-template-columns:1fr;} }

.prob-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:32px 28px;
}
.gage-way {
  border-color:var(--border-hi);
  background:linear-gradient(160deg, rgba(141,255,63,0.04) 0%, var(--bg2) 60%);
  position:relative; overflow:hidden;
}
.gage-way::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(141,255,63,0.4), transparent);
}
.prob-card-tag {
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); margin-bottom:8px;
}
.gage-tag { color:var(--green) !important; }
.prob-sub {
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:24px;
}
.prob-flow { display:flex; flex-direction:column; }
.pf-step {
  display:flex; align-items:center; gap:14px;
  padding:10px 0; font-size:14px; color:var(--text-dim);
}
.gage-step { color:var(--text); }
.pf-n {
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; color:var(--text-muted);
}
.gage-n { background:rgba(141,255,63,.1); border-color:var(--border-hi); color:var(--green); }
.pf-line { width:1px; height:14px; margin-left:12px; background:var(--border); }
.gage-line { background:rgba(141,255,63,.25); }
.prob-block {
  margin-top:20px; padding:14px 16px; border-radius:10px;
  background:rgba(255,70,70,.05); border:1px solid rgba(255,70,70,.18);
  font-size:13px; color:#e07070; line-height:1.55;
  display:flex; gap:10px; align-items:flex-start;
}
.block-x { font-size:18px; flex-shrink:0; }

/* ══ HOW IT WORKS ════════════════════════════════════════════ */
.how-it-works { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.pipeline-wrap { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media(max-width:860px){ .pipeline-wrap{grid-template-columns:1fr;} }

/* Vertical pipeline */
.pipeline-v { display:flex; flex-direction:column; gap:0; }
.pip-step {
  display:flex; gap:0; opacity:.4;
  transition:opacity .5s ease;
}
.pip-step.pip-active { opacity:1; }
.pip-left {
  display:flex; flex-direction:column; align-items:center;
  width:24px; flex-shrink:0; margin-right:20px;
}
.pip-dot {
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--text-muted);
  background:transparent;
  transition:all .4s ease;
}
.pip-step.pip-active .pip-dot {
  border-color:var(--green); background:var(--green);
  box-shadow:0 0 12px var(--green-glow);
}
.pip-rail {
  width:2px; flex:1; background:var(--border); margin-top:4px;
  position:relative; overflow:hidden; min-height:40px;
}
.pip-step.pip-active .pip-rail { background:rgba(141,255,63,0.25); }
.pip-particle {
  position:absolute; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--green), transparent);
  top:-16px; left:-1px;
  animation:particle-flow 1.5s linear infinite;
  opacity:0;
}
.pip-step.pip-active .pip-particle { opacity:1; }
@keyframes particle-flow { 0%{top:-16px;} 100%{top:100%;} }

.pip-right {
  display:flex; gap:16px; padding-bottom:32px; flex:1;
}
.pip-step:last-child .pip-right { padding-bottom:0; }
.pip-icon-wrap {
  font-size:22px; width:46px; height:46px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all .4s ease;
}
.pip-step.pip-active .pip-icon-wrap {
  border-color:var(--border-hi);
  background:rgba(141,255,63,.08);
  box-shadow:0 0 20px rgba(141,255,63,.1);
}
.pip-body h3 { font-size:16px; font-weight:700; color:var(--text); margin-bottom:6px; }
.pip-body p { font-size:13px; color:var(--text-dim); line-height:1.65; margin-bottom:10px; }
.pip-tags { display:flex; flex-wrap:wrap; gap:4px; }
.pip-tags span {
  font-family:var(--font-mono); font-size:10px; color:var(--text-muted);
  background:var(--bg3); border:1px solid var(--border);
  border-radius:4px; padding:2px 7px;
}
.pip-step.pip-active .pip-tags span { color:var(--green); border-color:rgba(141,255,63,.2); background:rgba(141,255,63,.05); }

/* Pipeline terminal */
.pip-terminal {
  background:#06080a; border:1px solid var(--border);
  border-radius:16px; overflow:hidden; position:sticky; top:90px;
}
.term-head {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:var(--bg3); border-bottom:1px solid var(--border);
}
.td { width:9px; height:9px; border-radius:50%; }
.td-r{background:#ff5f57;} .td-y{background:#febc2e;} .td-g{background:#28c840;}
.term-title { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-left:4px; }
.term-body { padding:18px 20px; font-family:var(--font-mono); font-size:12.5px; line-height:2.0; }
.tc.cmd { color:var(--text-dim); }
.tc.out { color:rgba(141,255,63,.75); }
.tc.ok  { color:#b0ff7a; font-weight:600; }
.t-line { opacity:0; }
.t-ok   { color:#b0ff7a; }

/* ══ INTERACTIVE DEMO ════════════════════════════════════════ */
.demo-section { background:var(--bg); border-bottom:1px solid var(--border); }
.demo-wrap { max-width:800px; margin:0 auto; }

.demo-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.demo-chip {
  padding:.5rem 1.1rem; border-radius:100px;
  border:1px solid var(--border); background:var(--bg2);
  font-size:13px; color:var(--text-dim); cursor:none;
  transition:all .2s ease;
}
.demo-chip:hover,.active-chip {
  border-color:var(--border-hi); color:var(--green);
  background:rgba(141,255,63,.06);
}
.demo-input-wrap { display:flex; gap:10px; margin-bottom:20px; }
.demo-input {
  flex:1; background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:.75rem 1.1rem; color:var(--text);
  font-family:var(--font-body); font-size:.9rem;
  transition:border-color .2s ease; outline:none; cursor:text;
}
.demo-input:focus { border-color:var(--border-hi); }
.demo-input::placeholder { color:var(--text-muted); }
.demo-run {
  padding:.75rem 1.5rem; border-radius:12px;
  background:var(--green); color:#030a00;
  font-size:.9rem; font-weight:700; cursor:none;
  transition:all .2s ease; white-space:nowrap;
}
.demo-run:hover { box-shadow:0 6px 24px var(--green-glow); transform:translateY(-1px); }
.demo-output {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:24px; min-height:200px;
}
.demo-idle {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; height:160px; color:var(--text-muted);
  font-family:var(--font-mono); font-size:13px;
}
.demo-idle-icon { font-size:32px; opacity:.4; }
.demo-step {
  display:flex; align-items:flex-start; gap:12px; padding:8px 0;
  border-bottom:1px solid var(--border); animation:step-in .35s ease forwards;
  opacity:0;
}
.demo-step:last-child { border-bottom:none; }
@keyframes step-in { to{opacity:1;transform:translateX(0);} from{opacity:0;transform:translateX(-8px);} }
.ds-icon {
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ds-icon.active { border-color:var(--border-hi); background:rgba(141,255,63,.06); }
.ds-icon.done   { border-color:rgba(141,255,63,.5); background:rgba(141,255,63,.1); }
.ds-body { flex:1; }
.ds-title { font-size:13.5px; font-weight:600; color:var(--text); }
.ds-detail { font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); margin-top:3px; }
.ds-ok { color:var(--green); font-weight:600; }

/* ══ MODELS ═════════════════════════════════════════════════ */
.models-section { background:var(--bg1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.models-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:40px;
}
@media(max-width:960px){ .models-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:580px){ .models-grid{grid-template-columns:1fr;} }

.model-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:18px; padding:22px 20px;
  transition:all .25s var(--ease);
  display:flex; flex-direction:column; gap:10px;
  position:relative; overflow:hidden;
}
.model-card::before {
  content:''; position:absolute; inset:0; border-radius:18px;
  background:radial-gradient(circle at 70% 20%, rgba(141,255,63,0.04), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.model-card:hover { border-color:var(--border-hi); transform:translateY(-3px); box-shadow:0 10px 40px rgba(0,0,0,0.4); }
.model-card:hover::before { opacity:1; }
.mc-hi {
  border-color:var(--border-hi);
  background:linear-gradient(160deg, rgba(141,255,63,0.05) 0%, var(--bg2) 60%);
}
.mc-top { display:flex; align-items:center; gap:10px; }
.mc-av {
  width:40px; height:40px; border-radius:10px;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:17px; font-weight:800;
  color:var(--text-dim); flex-shrink:0;
}
.mc-av-hi { background:rgba(141,255,63,.1); border-color:var(--border-hi); color:var(--green); }
.mc-meta { flex:1; min-width:0; }
.mc-name { font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--text); }
.mc-org  { font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.mc-badge {
  padding:3px 9px; border-radius:20px;
  font-family:var(--font-mono); font-size:10px;
  font-weight:600; white-space:nowrap; flex-shrink:0;
}
.b-device { background:rgba(141,255,63,.1); border:1px solid rgba(141,255,63,.25); color:var(--green); }
.b-cloud  { background:rgba(100,180,255,.1); border:1px solid rgba(100,180,255,.25); color:#80c8ff; }
.b-mixed  { background:rgba(180,140,255,.1); border:1px solid rgba(180,140,255,.25); color:#c4a0ff; }
.mc-role {
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
}
.mc-hi .mc-role { color:var(--green); }
.mc-desc { font-size:13px; color:var(--text-dim); line-height:1.7; flex:1; }
.mc-eg {
  padding:10px 12px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border);
  font-size:12px; color:var(--text-dim); line-height:1.55; font-style:italic;
}
.eg-lbl {
  display:block; font-family:var(--font-mono); font-size:9.5px;
  font-style:normal; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:4px;
}
.model-router-flow {
  background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:22px 26px;
}
.mrf-label {
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px;
}
.mrf-steps { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mrf-step {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:10px;
}
.mrf-n {
  width:20px; height:20px; border-radius:5px; flex-shrink:0;
  background:rgba(141,255,63,.1); border:1px solid var(--border-hi);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; color:var(--green);
}
.mrf-txt { font-size:12.5px; color:var(--text-dim); }
.mrf-arr { color:var(--text-muted); font-size:14px; flex-shrink:0; }
@media(max-width:680px){ .mrf-steps{flex-direction:column;align-items:stretch;} .mrf-arr{transform:rotate(90deg);align-self:center;} }

/* ══ COMPARISON ═════════════════════════════════════════════ */
.comparison { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.compare-face {
  display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:start;
  margin-bottom:28px;
}
@media(max-width:760px){ .compare-face{grid-template-columns:1fr;} .cf-vs{display:none;} }

.cf-col {
  border:1px solid var(--border); border-radius:20px;
  padding:30px 26px; background:var(--bg);
}
.cf-gage {
  border-color:var(--border-hi);
  background:linear-gradient(160deg, rgba(141,255,63,0.04) 0%, var(--bg) 50%);
  position:relative;
}
.cf-gage::before {
  content:''; position:absolute; inset:-1px; border-radius:20px;
  background:linear-gradient(140deg, rgba(141,255,63,.2), transparent 50%);
  z-index:-1;
}
.cf-badge {
  display:inline-block; padding:3px 12px; border-radius:100px;
  background:var(--green); color:#030a00;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:10px;
}
.cf-type {
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px;
}
.cf-col h3 { font-size:20px; font-weight:800; color:var(--text); margin-bottom:6px; }
.cf-eg { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-bottom:22px; }
.cf-list { display:flex; flex-direction:column; gap:10px; }
.cf-list li {
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; color:var(--text-dim);
}
.cf-list li::before { flex-shrink:0; margin-top:1px; }
.cf-no::before  { content:'✕'; color:#e07070; }
.cf-yes::before { content:'✓'; color:var(--green); font-weight:700; }
.cf-col.cf-gage .cf-list li { color:var(--text); }

.cf-vs {
  display:flex; align-items:center; justify-content:center;
  padding:0 8px;
}
.cf-vs-inner {
  font-family:var(--font-head); font-size:13px; font-weight:700;
  color:var(--text-muted); letter-spacing:.05em;
  border:1px solid var(--border); border-radius:100px;
  padding:8px 10px;
}

.compare-detail {
  background:var(--bg); border:1px solid var(--border); border-radius:16px;
}
.compare-detail summary {
  padding:16px 22px; cursor:none; font-size:14px; color:var(--text-dim);
  list-style:none; transition:color .2s ease;
}
.compare-detail summary:hover { color:var(--green); }
.compare-detail[open] summary { border-bottom:1px solid var(--border); }
.table-wrap { overflow-x:auto; padding:4px; }
table { width:100%; border-collapse:collapse; min-width:700px; }
th,td { text-align:left; padding:16px 18px; font-size:13.5px; vertical-align:top; }
thead th {
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted); background:var(--bg3);
  border-bottom:1px solid var(--border); font-weight:500;
}
tbody tr { border-bottom:1px solid var(--border); transition:background .2s ease; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.015); }
tbody tr.row-us { background:rgba(141,255,63,.04); }
tbody tr.row-us:hover { background:rgba(141,255,63,.07); }
td.name { font-family:var(--font-head); font-size:14.5px; font-weight:700; color:var(--text); min-width:190px; }
td.name-us { color:var(--green); }
.td-sub { display:block; color:var(--text-muted); font-size:11.5px; margin-top:3px; font-weight:400; font-family:var(--font-body); }
td p { margin:0; color:var(--text-dim); font-size:13px; line-height:1.65; }

/* ══ WHY GAGE ═══════════════════════════════════════════════ */
.why { background:var(--bg); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:820px){ .why-grid{grid-template-columns:1fr;} }
.why-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:20px; padding:30px 24px;
  transition:all .25s var(--ease);
}
.why-card:hover { border-color:var(--border-hi); transform:translateY(-4px); box-shadow:0 14px 44px rgba(0,0,0,.35); }
.why-icon { font-size:28px; margin-bottom:16px; }
.why-card h3 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:12px; }
.why-card p  { font-size:14px; line-height:1.75; color:var(--text-dim); }

/* ══ ARCHITECTURE ═══════════════════════════════════════════ */
.architecture { background:var(--bg1); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.arch-wrap { display:flex; justify-content:center; }
.arch-diagram { display:flex; flex-direction:column; align-items:center; gap:0; }
.arch-node {
  padding:14px 26px; border-radius:14px;
  border:1px solid var(--border); background:var(--bg2);
  text-align:center; min-width:210px;
  transition:box-shadow .3s ease;
}
.arch-node:hover { box-shadow:0 0 20px rgba(141,255,63,.08); }
.arch-input { border-color:rgba(141,255,63,.25); }
.arch-core  { border-color:rgba(141,255,63,.18); }
.arch-sec   { min-width:150px; }
.arch-sys   { border-color:var(--border-hi); }
.arch-icon  { font-size:20px; margin-bottom:5px; }
.arch-label { font-size:14px; font-weight:700; color:var(--text); }
.arch-sub   { font-size:11px; color:var(--text-muted); margin-top:3px; font-family:var(--font-mono); }
.arch-arrow-v { font-size:18px; color:var(--text-muted); line-height:2.2; }
.arch-dual { display:flex; align-items:center; }
.arch-dual-line { width:36px; height:1px; background:var(--border); }
.arch-model-router {
  background:rgba(141,255,63,.03); border:1px solid var(--border-hi);
  border-radius:16px; padding:14px 18px; text-align:center;
  width:100%; max-width:520px;
}
.arch-router-label {
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--green); margin-bottom:12px;
}
.arch-router-row { display:flex; gap:10px; justify-content:center; }
.arch-model-l,.arch-model-c,.arch-model-v { flex:1; min-width:0; padding:12px 8px; border-radius:10px; border:1px solid var(--border); background:var(--bg2); }
.arch-model-c { border-color:rgba(100,180,255,.25); }
.arch-model-v { border-color:rgba(255,190,80,.25); }
.arch-loop-row {
  display:flex; align-items:center; gap:8px;
  margin-top:4px; padding:12px 22px; border-radius:12px;
  border:1px solid var(--border-hi); background:rgba(141,255,63,.03);
}
.arch-loop-node { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text); }
.arch-loop-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 2.5s infinite; }
.arch-loop-arrow { color:var(--text-muted); font-size:13px; }
.arch-loop-back  { font-size:17px; color:var(--green); margin-left:3px; }
@media(max-width:580px){ .arch-router-row{flex-direction:column;} .arch-model-router{max-width:100%;} .arch-dual{flex-direction:column;gap:8px;} .arch-dual-line{width:1px;height:20px;} }

/* ══ ROADMAP ════════════════════════════════════════════════ */
.roadmap { background:var(--bg); }
.rm-track { position:relative; }
.rm-line {
  position:relative; height:2px;
  background:var(--bg3); border-radius:2px;
  margin-bottom:32px; overflow:visible;
}
.rm-fill {
  position:absolute; top:0; left:0; height:100%;
  background:linear-gradient(90deg, var(--green), rgba(141,255,63,.4));
  border-radius:2px;
  box-shadow:0 0 12px rgba(141,255,63,.5);
}
.rm-nodes {
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
}
@media(max-width:900px){ .rm-nodes{grid-template-columns:repeat(3,1fr);} }
@media(max-width:540px){ .rm-nodes{grid-template-columns:repeat(2,1fr);} }

.rm-node { position:relative; }
.rm-dot-wrap {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg2); border:2px solid var(--border);
  margin-bottom:14px; transition:all .4s ease;
  position:relative;
}
.rm-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--border); transition:all .4s ease;
}
.rm-done .rm-dot-wrap {
  border-color:var(--green);
  background:rgba(141,255,63,.12);
  box-shadow:0 0 16px rgba(141,255,63,.35);
}
.rm-done .rm-dot { background:var(--green); box-shadow:0 0 8px var(--green); }
.rm-content .rm-num {
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
  letter-spacing:.05em; margin-bottom:6px;
}
.rm-done .rm-num { color:var(--green); }
.rm-content h4 { font-size:14px; font-weight:700; color:var(--text-dim); margin-bottom:8px; }
.rm-done .rm-content h4 { color:var(--text); }
.rm-content ul { display:flex; flex-direction:column; gap:4px; }
.rm-content ul li { font-size:12px; color:var(--text-muted); line-height:1.5; padding-left:10px; position:relative; }
.rm-content ul li::before { content:'–'; position:absolute; left:0; color:var(--text-muted); }
.rm-done .rm-content ul li { color:var(--text-dim); }

/* ══ TECH STACK ═════════════════════════════════════════════ */
.tech { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.tech-grid { display:flex; flex-wrap:wrap; gap:10px; }
.tc-chip {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:100px;
  background:var(--bg3); border:1px solid var(--border);
  font-size:13px; font-weight:500; color:var(--text-dim);
  font-family:var(--font-mono); transition:all .2s ease; cursor:default;
}
.tc-chip:hover { border-color:var(--border-hi); color:var(--text); }
.tc-chip.tc-hi { border-color:var(--border-hi); color:var(--green); }
.tc-dot { width:6px; height:6px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.tc-hi .tc-dot { background:var(--green); box-shadow:0 0 5px var(--green); }

/* ══ OPEN SOURCE ════════════════════════════════════════════ */
.open-src { background:var(--bg); position:relative; overflow:hidden; }
.os-inner { position:relative; z-index:1; }
.os-orb {
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(141,255,63,.05) 0%, transparent 65%);
  pointer-events:none;
}
.os-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(max-width:700px){ .os-cards{grid-template-columns:1fr;} }
.os-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:18px; padding:24px 22px;
  transition:all .25s var(--ease);
}
.os-card:hover { border-color:var(--border-hi); transform:translateY(-3px); }
.os-icon {
  width:42px; height:42px; border-radius:10px;
  background:rgba(141,255,63,.07); border:1px solid var(--border-hi);
  display:flex; align-items:center; justify-content:center;
  color:var(--green); margin-bottom:14px;
}
.os-card h3 { font-size:15.5px; font-weight:700; color:var(--text); margin-bottom:6px; }
.os-card p  { font-size:13.5px; color:var(--text-dim); line-height:1.65; margin-bottom:14px; }
.os-link { font-size:13px; color:var(--green); font-weight:600; }
.os-link:hover { text-decoration:underline; }

/* ══ MISSION ════════════════════════════════════════════════ */
.mission {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:110px 0; text-align:center;
  position:relative; overflow:hidden;
}
.mission::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(141,255,63,.04) 0%, transparent 65%);
  pointer-events:none;
}
.mission-inner { max-width:760px; margin:0 auto; padding:0 2rem; position:relative; }
.mission blockquote {
  font-family:var(--font-head); font-size:clamp(20px,3vw,30px);
  font-weight:600; line-height:1.5; color:var(--text); font-style:normal;
}
.mission blockquote em { color:var(--green); font-style:normal; }

/* ══ FOOTER ═════════════════════════════════════════════════ */
.footer { background:var(--bg3); border-top:1px solid var(--border); padding:60px 0 0; }
.footer-inner { max-width:1200px; margin:0 auto; padding:0 2rem; }
.footer-top {
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:60px; margin-bottom:48px;
}
@media(max-width:720px){ .footer-top{grid-template-columns:1fr;gap:36px;} }
.footer-logo { font-size:1.35rem; font-weight:800; margin-bottom:10px; color:var(--text); }
.footer-tag-line { font-size:.9rem; color:var(--text-dim); margin-bottom:6px; font-style:italic; }
.footer-desc { font-size:.85rem; color:var(--text-muted); line-height:1.7; }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fc-title {
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-muted); margin-bottom:14px;
}
.footer-col a {
  display:block; font-size:.875rem; color:var(--text-dim);
  margin-bottom:10px; transition:color .2s ease;
}
.footer-col a:hover { color:var(--green); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0; border-top:1px solid var(--border);
  flex-wrap:wrap; gap:12px;
}
.footer-copy { font-size:.8rem; color:var(--text-muted); }
.footer-bdgs { display:flex; gap:8px; }
.footer-bdgs span {
  padding:3px 10px; border-radius:20px;
  border:1px solid var(--border); background:var(--bg2);
  font-size:11px; color:var(--text-muted); font-family:var(--font-mono);
}

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media(max-width:480px){
  .sc { padding:72px 1.25rem; }
  .footer-cols { grid-template-columns:repeat(2,1fr); }
  .prob-card { padding:22px 18px; }
}