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

    :root {
      --ink: #0c0c14;
      --ink-1: #111118;
      --ink-2: #16161f;
      --ink-3: #1d1d28;
      --surface: #222230;
      --surface-2: #2a2a3a;
      --border: #ffffff0c;
      --border-mid: #ffffff16;
      --border-hi: #ffffff24;
      --text: #eeeef4;
      --text-2: #9090a8;
      --text-3: #52526a;
      --blue: #5b8dee;
      --blue-dim: #5b8dee1a;
      --blue-glow: #5b8dee28;
      --mint: #34d399;
      --mint-dim: #34d39912;
      --red: #e4605e;
      --red-dim: #e4605e10;
      --amber: #f0a732;
      --purple: #a78bfa;
      --r: 8px;
      --r-lg: 14px;
      --r-xl: 20px;
      --ff: 'Inter', sans-serif;
      --mono: 'JetBrains Mono', monospace;
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--ink);
      color: var(--text);
      font-family: var(--ff);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font-family: var(--ff);
      cursor: pointer;
      border: none;
      outline: none
    }

    /* subtle grain */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      opacity: .018;
      pointer-events: none;
      z-index: 9998;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    @media (max-width: 900px), (prefers-reduced-motion: reduce) {
      body::after {
        display: none;
      }
    }


    /* ── NAV ── */
    /* ── NAV ── */
.site-nav {
  position: fixed;
  top: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 100;
  width: min(1120px, calc(100% - 32px));
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--border-mid);
  border-radius: 16px;
  background: rgba(12, 12, 20, .78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap:9px;
  min-width: max-content;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.4px;
  color: var(--text);
}

.logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(140deg, #5b8dee, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.nav-links a {
  padding: 6px 11px;
  font-size: 13px;
  color: var(--text-2);
  border-radius: 9px;
  transition: color .15s, background .15s;
  font-weight: 500;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--text);
  background: var(--ink-3);
}

.nav-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.nav-stars {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-2);
  background: rgba(255, 255, 255, .025);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.nav-gh {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  background: var(--ink-3);
  border: 1px solid var(--border-mid);
  color: var(--text-2);
  font-size: 13px;
  border-radius: 9px;
  transition: all .15s;
  font-weight: 550;
  white-space: nowrap;
}

.nav-gh:hover {
  color: var(--text);
  border-color: var(--border-hi);
}

.nav-dl {
  padding: 7px 13px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  border-radius: 9px;
  letter-spacing: -.2px;
  transition: all .15s;
  white-space: nowrap;
}

.nav-dl:hover {
  background: #4a7de0;
  box-shadow: 0 4px 20px var(--blue-glow);
}

/* Tablet */
@media (max-width: 900px) {
  .site-nav {
    top: 10px;
    width: calc(100% - 24px);
    min-height: 56px;
    padding: 8px 10px 8px 12px;
    gap: 12px;
  }

  .nav-links {
    display: none;
  }

  .nav-end {
    gap: 7px;
  }

  .nav-stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .site-nav {
    top: 8px;
    width: calc(100% - 16px);
    min-height: 54px;
    border-radius: 14px;
    padding: 8px 8px 8px 10px;
    gap: 8px;
  }

  .nav-logo {
    gap: 8px;
    font-size: 14px;
  }

  .logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
  }

  .nav-end {
    gap: 5px;
  }

  .nav-stars {
    padding: 7px 8px;
    font-size: 12px;
    border-radius: 8px;
    max-width: 54px;
    overflow: hidden;
  }

  .nav-gh {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
  }

  .nav-gh span {
    display: none;
  }

  .nav-gh svg {
    width: 15px;
    height: 15px;
  }

  .nav-dl {
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 8px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .nav-logo span {
    display: none;
  }

  .site-nav {
    width: calc(100% - 12px);
    padding-left: 8px;
    padding-right: 7px;
  }

  .nav-stars {
    max-width: 48px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .nav-dl {
    padding: 7px 9px;
  }
}

    /* ── HERO ── */
    .hero {
      padding: 132px 0 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      justify-content: center
    }

    #aurora-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0
    }

    /* CSS fallback aurora — always visible, WebGL layers on top */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 90% 55% at 28% 58%, rgba(225, 0, 255, .15) 0%, transparent 68%),
        radial-gradient(ellipse 75% 48% at 72% 44%, rgba(247, 247, 247, .08) 0%, transparent 65%),
        radial-gradient(ellipse 85% 42% at 52% 62%, rgba(91, 141, 238, .11) 0%, transparent 62%)
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: .018;
      background-image: linear-gradient(var(--text-3) 1px, transparent 1px), linear-gradient(90deg, var(--text-3) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
      z-index: 1
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 13px;
      border: 1px solid var(--border-mid);
      border-radius: 100px;
      font-size: 11.5px;
      color: var(--text-3);
      margin-bottom: 24px;
      background: var(--ink-2);
      letter-spacing: .4px;
      font-weight: 500
    }

    .eyebrow-pip {
      width: 5px;
      height: 5px;
      background: var(--mint);
      border-radius: 50%;
      flex-shrink: 0;
      animation: pip 2.4s ease infinite
    }

    @keyframes pip {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4;
        transform: scale(.7)
      }
    }

    .hero h1 {
      font-size: clamp(44px, 6.5vw, 76px);
      font-weight: 900;
      letter-spacing: -3px;
      line-height: 1.0;
      margin-bottom: 20px;
      max-width: 780px
    }

    .hero h1 em {
      font-style: normal;
      background: linear-gradient(125deg, var(--blue) 20%, var(--purple) 60%, var(--blue));
      background-size: 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: grad-shift 5s linear infinite
    }

    @keyframes grad-shift {
      0% {
        background-position: 0% 50%
      }

      100% {
        background-position: 200% 50%
      }
    }

    .hero-desc {
      font-size: 17.5px;
      color: var(--text-2);
      max-width: 480px;
      line-height: 1.7;
      margin-bottom: 34px;
      font-weight: 400
    }

    .hero-cta {
      display: flex;
      align-items: center;
      gap: 11px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 72px
    }

    .btn-dl {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      background: var(--blue);
      color: #fff;
      font-size: 14.5px;
      font-weight: 600;
      border-radius: 9px;
      transition: all .2s;
      letter-spacing: -.25px
    }

    .btn-dl:hover {
      background: #4a7de0;
      box-shadow: 0 8px 28px var(--blue-glow);
      transform: translateY(-1px)
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      background: transparent;
      color: var(--text-2);
      font-size: 14.5px;
      font-weight: 500;
      border-radius: 9px;
      border: 1px solid var(--border-mid);
      transition: all .2s;
      letter-spacing: -.2px
    }

    .btn-outline:hover {
      background: var(--ink-2);
      border-color: var(--border-hi);
      color: var(--text)
    }

    /* ── HERO ILLUSTRATION ── */
    .hero-illo {
      width: 100%;
      max-width: 860px;
      position: relative;
      margin: 0 auto
    }

    .illo-frame {
      background: var(--ink-1);
      border: 1px solid var(--border-mid);
      border-radius: var(--r-xl);
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px var(--border), 0 0 60px rgba(91, 141, 238, .06)
    }

    .illo-bar {
      height: 40px;
      background: var(--ink-2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 7px
    }

    .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .illo-title {
      margin-left: 12px;
      font-size: 11.5px;
      color: var(--text-3);
      font-family: var(--mono);
      flex: 1;
      text-align: center
    }

    .illo-body {
      aspect-ratio: 16/9;
      position: relative;
      overflow: hidden;
      background: var(--ink);
      display: flex;
      align-items: stretch
    }

    /* illustration panels */
    .illo-left {
      flex: 1;
      padding: 20px 18px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-3);
      overflow: hidden
    }

    .illo-right {
      width: 42%;
      display: flex;
      flex-direction: column
    }

    .illo-preview {
      flex: 1;
      position: relative;
      background: var(--ink-1);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .illo-timeline {
      height: 72px;
      background: var(--ink-2);
      border-top: 1px solid var(--border);
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    /* code lines */
    .cl {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 16px
    }

    .ln {
      width: 18px;
      color: var(--text-3);
      opacity: .4;
      font-size: 10px;
      text-align: right;
      flex-shrink: 0
    }

    .kw {
      color: #a78bfa
    }

    .fn {
      color: var(--blue)
    }

    .st {
      color: var(--mint)
    }

    .cm {
      color: #52526a;
      font-style: italic
    }

    .hl-line {
      background: #5b8dee0c;
      border-left: 2px solid var(--blue);
      margin: 0 -18px;
      padding: 0 18px;
      padding-left: 16px
    }

    /* focus overlay in preview */
    .focus-box {
      position: absolute;
      border: 1.5px solid var(--blue);
      border-radius: 6px;
      box-shadow: 0 0 0 4px var(--blue-dim);
      animation: focus-pulse 2.8s ease infinite
    }

    @keyframes focus-pulse {

      0%,
      100% {
        box-shadow: 0 0 0 4px var(--blue-dim)
      }

      50% {
        box-shadow: 0 0 0 8px transparent
      }
    }

    .cursor-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .3)
    }

    .ripple {
      position: absolute;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--blue);
      animation: ripple 1.4s ease-out infinite
    }

    .ripple2 {
      position: absolute;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid var(--blue);
      opacity: .5;
      animation: ripple 1.4s ease-out .5s infinite
    }

    @keyframes ripple {
      0% {
        transform: translate(-50%, -50%) scale(.4);
        opacity: .8
      }

      100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0
      }
    }

    .preview-mockcode {
      font-family: var(--mono);
      font-size: 9px;
      color: var(--text-3);
      opacity: .4;
      position: absolute;
      inset: 0;
      padding: 12px;
      line-height: 1.8;
      overflow: hidden;
      pointer-events: none
    }

    .zoom-chip {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(12, 12, 20, .88);
      border: 1px solid var(--border-mid);
      border-radius: 5px;
      padding: 3px 8px;
      font-size: 10px;
      font-family: var(--mono);
      color: var(--blue);
      display: flex;
      align-items: center;
      gap: 5px;
      backdrop-filter: blur(6px)
    }

    .zoom-chip span {
      background: var(--blue);
      color: #fff;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 3px;
      font-size: 9px
    }

    .rec-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(12, 12, 20, .88);
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 3px 8px;
      font-size: 10px;
      color: var(--text-2);
      font-family: var(--mono);
      backdrop-filter: blur(6px)
    }

    .rec-pip {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--red);
      flex-shrink: 0;
      animation: rec 1.1s ease infinite
    }

    @keyframes rec {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .2
      }
    }

    /* timeline */
    .tl-label {
      font-size: 9.5px;
      font-family: var(--mono);
      color: var(--text-3);
      margin-bottom: 4px;
      letter-spacing: .3px
    }

    .tl-track {
      height: 18px;
      background: var(--ink-3);
      border-radius: 3px;
      position: relative;
      overflow: hidden
    }

    .tl-segment {
      position: absolute;
      height: 100%;
      border-radius: 3px;
      top: 0
    }

    .tl-event {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 14px;
      border-radius: 2px;
      background: var(--blue);
      opacity: .8
    }

    /* floating callouts */
    .callout {
      position: absolute;
      background: rgba(12, 12, 20, .94);
      border: 1px solid var(--border-mid);
      border-radius: 8px;
      padding: 7px 11px;
      font-size: 11px;
      font-weight: 500;
      backdrop-filter: blur(8px);
      white-space: nowrap;
      line-height: 1.3
    }

    .callout-mint {
      color: var(--mint);
      border-color: #34d39925
    }

    .callout-blue {
      color: var(--blue);
      border-color: #5b8dee25
    }

    .callout-amber {
      color: var(--amber);
      border-color: #f0a73225
    }

    .callout small {
      display: block;
      font-size: 9.5px;
      color: var(--text-3);
      font-weight: 400;
      margin-top: 1px
    }

    /* ── LAYOUT ── */
    .container {
      max-width: 1060px;
      margin: 0 auto;
      padding: 0 28px
    }

    .container-sm {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 28px
    }

    section {
      position: relative
    }

    /* ── TRUST BAR ── */
    .trust {
      padding: 32px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border)
    }

    .trust-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
      flex-wrap: wrap
    }

    .trust-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-3);
      font-weight: 450
    }

    .trust-pill svg {
      opacity: .5
    }

    .trust-pipe {
      width: 1px;
      height: 28px;
      background: var(--border)
    }

    /* ── PROBLEM ── */
    .problem {
      padding: 100px 0
    }

    .problem-header {
      margin-bottom: 60px
    }

    .problem-header h2 {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 12px
    }

    .problem-header p {
      font-size: 16px;
      color: var(--text-2);
      max-width: 440px;
      line-height: 1.7
    }

    .problem-layout {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 52px;
      align-items: start
    }

    .pain-points {
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .pain-item {
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 16px;
      align-items: flex-start
    }

    .pain-item:first-child {
      border-top: 1px solid var(--border)
    }

    .pain-num {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-3);
      width: 20px;
      padding-top: 2px;
      flex-shrink: 0
    }

    .pain-body h4 {
      font-size: 14.5px;
      font-weight: 600;
      margin-bottom: 4px;
      letter-spacing: -.3px
    }

    .pain-body p {
      font-size: 13px;
      color: var(--text-2);
      line-height: 1.6
    }

    .wasted-time {
      background: var(--ink-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden
    }

    .wt-head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-3);
      letter-spacing: .5px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .wt-head-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--red);
      opacity: .7
    }

    .wt-rows {
      padding: 4px 0
    }

    .wt-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 18px;
      position: relative
    }

    .wt-row.hurt {
      background: var(--red-dim)
    }

    .wt-row-label {
      font-size: 13px;
      flex: 1
    }

    .wt-row.hurt .wt-row-label {
      color: var(--text)
    }

    .wt-bar-wrap {
      width: 80px
    }

    .wt-bar {
      height: 4px;
      border-radius: 2px;
      background: var(--ink-3)
    }

    .wt-bar-fill {
      height: 100%;
      border-radius: 2px;
      background: var(--text-3)
    }

    .wt-row.hurt .wt-bar-fill {
      background: var(--red);
      opacity: .7
    }

    .wt-time {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-3);
      width: 40px;
      text-align: right;
      flex-shrink: 0
    }

    .wt-row.hurt .wt-time {
      color: var(--red)
    }

    .wt-total {
      padding: 12px 18px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12.5px
    }

    .wt-total-label {
      color: var(--text-2)
    }

    .wt-total-val {
      font-family: var(--mono);
      font-weight: 700;
      color: var(--red)
    }

    /* ── HOW IT WORKS ── */
    .how {
      padding: 100px 0;
      background: linear-gradient(180deg, transparent, var(--ink-1) 20%, var(--ink-1) 80%, transparent)
    }

    .how-header {
      text-align: center;
      margin-bottom: 64px
    }

    .how-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 12px
    }

    .how-header h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.1;
      margin-bottom: 14px
    }

    .how-header p {
      font-size: 16px;
      color: var(--text-2);
      max-width: 440px;
      margin: 0 auto;
      line-height: 1.7
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      overflow: hidden
    }

    .step {
      background: var(--ink-1);
      padding: 28px 24px;
      position: relative
    }

    .step-n {
      font-size: 11px;
      font-family: var(--mono);
      color: var(--text-3);
      margin-bottom: 18px;
      opacity: .6
    }

    .step-icon {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px
    }

    .step:nth-child(1) .step-icon {
      background: #5b8dee12;
      color: var(--blue)
    }

    .step:nth-child(2) .step-icon {
      background: #a78bfa12;
      color: var(--purple)
    }

    .step:nth-child(3) .step-icon {
      background: #34d39912;
      color: var(--mint)
    }

    .step:nth-child(4) .step-icon {
      background: #f0a73212;
      color: var(--amber)
    }

    .step h4 {
      font-size: 14.5px;
      font-weight: 650;
      margin-bottom: 6px;
      letter-spacing: -.3px
    }

    .step p {
      font-size: 12.5px;
      color: var(--text-2);
      line-height: 1.6
    }

    .step-arrow {
      position: absolute;
      top: 50%;
      right: -1px;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background: var(--ink-2);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1
    }

    .step-arrow svg {
      width: 8px;
      height: 8px;
      color: var(--text-3)
    }

    .time-saved {
      margin-top: 32px;
      padding: 18px 28px;
      background: var(--mint-dim);
      border: 1px solid #34d39920;
      border-radius: var(--r-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap
    }

    .time-before {
      font-size: 22px;
      font-weight: 800;
      font-family: var(--mono);
      color: var(--red);
      letter-spacing: -1px;
      opacity: .8
    }

    .time-arrow {
      color: var(--text-3);
      font-size: 20px
    }

    .time-after {
      font-size: 22px;
      font-weight: 800;
      font-family: var(--mono);
      color: var(--mint);
      letter-spacing: -1px
    }

    .time-label {
      font-size: 12.5px;
      color: var(--text-3);
      margin-left: 4px;
      align-self: flex-end;
      padding-bottom: 3px
    }

    /* ── BEFORE/AFTER DEMO ── */
    .demo {
      padding: 100px 0
    }

    .demo-header {
      margin-bottom: 56px
    }

    .demo-header h2 {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 12px
    }

    .demo-header p {
      font-size: 16px;
      color: var(--text-2);
      max-width: 480px;
      line-height: 1.7
    }

    .demo-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border-mid);
      border-radius: var(--r-lg);
      overflow: hidden
    }

    .demo-pane {
      background: var(--ink-1);
      padding: 0
    }

    .demo-pane-head {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .demo-pane-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .2px
    }

    .demo-pane-body {
      padding: 20px
    }

    .demo-screen {
      background: var(--ink);
      border: 1px solid var(--border);
      border-radius: var(--r);
      aspect-ratio: 16/9;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .demo-screen-code {
      font-family: var(--mono);
      font-size: 9.5px;
      color: var(--text-3);
      line-height: 1.8;
      padding: 14px;
      position: absolute;
      inset: 0;
      overflow: hidden;
      opacity: .5
    }

    .demo-stats {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin-top: 14px;
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden
    }

    .demo-stat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 14px;
      background: var(--ink-2);
      font-size: 12.5px
    }

    .demo-stat-label {
      color: var(--text-2)
    }

    .demo-stat-val {
      font-family: var(--mono);
      font-weight: 600
    }

    /* ── FEATURES ── */
    .features {
      padding: 100px 0
    }

    .features-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 56px;
      flex-wrap: wrap
    }

    .features-header-left h2 {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 10px
    }

    .features-header-left p {
      font-size: 16px;
      color: var(--text-2);
      max-width: 400px;
      line-height: 1.7
    }

    .feat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .feat {
      background: var(--ink-1);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 24px 22px;
      transition: border-color .2s, background .2s;
      position: relative;
      overflow: hidden
    }

    .feat:hover {
      border-color: var(--border-mid);
      background: var(--ink-2)
    }

    .feat::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, var(--blue-glow), transparent 50%);
      opacity: 0;
      transition: opacity .3s
    }

    .feat:hover::after {
      opacity: 1
    }

    .feat-ico {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      position: relative;
      z-index: 1
    }

    .feat-ico.b {
      background: #5b8dee12;
      color: var(--blue)
    }

    .feat-ico.p {
      background: #a78bfa12;
      color: var(--purple)
    }

    .feat-ico.m {
      background: #34d39912;
      color: var(--mint)
    }

    .feat-ico.a {
      background: #f0a73212;
      color: var(--amber)
    }

    .feat h3 {
      font-size: 14px;
      font-weight: 650;
      margin-bottom: 6px;
      letter-spacing: -.25px;
      position: relative;
      z-index: 1
    }

    .feat p {
      font-size: 12.5px;
      color: var(--text-2);
      line-height: 1.6;
      position: relative;
      z-index: 1
    }

    /* ── WHY / ORIGIN ── */
    .why {
      padding: 100px 0
    }

    .why-inner {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 64px;
      align-items: start
    }

    .why-left h2 {
      font-size: clamp(24px, 2.8vw, 36px);
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1.15;
      margin-bottom: 8px
    }

    .why-left .tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 16px
    }

    .why-right {
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .why-quote {
      font-size: clamp(17px, 2.2vw, 22px);
      font-weight: 500;
      line-height: 1.55;
      color: var(--text);
      letter-spacing: -.4px;
      padding-left: 20px;
      border-left: 2px solid var(--blue);
      font-style: italic
    }

    .why-right p {
      font-size: 15px;
      color: var(--text-2);
      line-height: 1.75
    }

    /* ── TECH ── */
    .tech {
      padding: 80px 0;
      border-top: 1px solid var(--border)
    }

    .tech-inner {
      display: flex;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
      justify-content: space-between
    }

    .tech-left {
      flex: 1;
      min-width: 260px
    }

    .tech-left h3 {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.5px;
      margin-bottom: 6px
    }

    .tech-left p {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.7;
      max-width: 340px
    }

    .tech-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .tech-pill {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      background: var(--ink-2);
      border: 1px solid var(--border-mid);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-2);
      transition: all .15s;
      letter-spacing: -.2px
    }

    .tech-pill:hover {
      color: var(--text);
      border-color: var(--border-hi)
    }

    .tech-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%
    }

    /* ── OPEN SOURCE CARD ── */
    .oss {
      padding: 80px 0
    }

    .oss-card {
      background: linear-gradient(145deg, var(--ink-2), var(--surface));
      border: 1px solid var(--border-mid);
      border-radius: var(--r-xl);
      padding: 56px 48px;
      position: relative;
      overflow: hidden
    }

    .oss-card::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, #5b8dee08, transparent 70%)
    }

    .oss-card::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -40px;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, #a78bfa06, transparent 70%)
    }

    .oss-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .oss-text h2 {
      font-size: clamp(26px, 3vw, 38px);
      font-weight: 800;
      letter-spacing: -1.2px;
      line-height: 1.15;
      margin-bottom: 12px
    }

    .oss-text p {
      font-size: 15px;
      color: var(--text-2);
      line-height: 1.7;
      max-width: 400px
    }

    .oss-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-shrink: 0
    }

    .oss-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      background: var(--blue);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 9px;
      white-space: nowrap;
      transition: all .2s
    }

    .oss-btn-primary:hover {
      background: #4a7de0;
      box-shadow: 0 6px 22px var(--blue-glow)
    }

    .oss-btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 20px;
      background: var(--ink-2);
      border: 1px solid var(--border-mid);
      color: var(--text-2);
      font-size: 13.5px;
      font-weight: 500;
      border-radius: 8px;
      transition: all .15s;
      white-space: nowrap
    }

    .oss-btn-ghost:hover {
      color: var(--text);
      border-color: var(--border-hi)
    }

    /* ── ROADMAP ── */
    .roadmap {
      padding: 80px 0
    }

    .roadmap-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 8px;
      margin-top: 40px
    }

    .rm {
      background: var(--ink-1);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      color: var(--text-2);
      transition: all .15s;
      cursor: default
    }

    .rm:hover {
      border-color: var(--border-mid);
      color: var(--text)
    }

    .rm-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 1.5px solid var(--text-3);
      flex-shrink: 0;
      transition: all .15s
    }

    .rm.active .rm-dot {
      background: var(--blue);
      border-color: var(--blue);
      box-shadow: 0 0 6px var(--blue-glow)
    }

    .rm.active {
      color: var(--text)
    }

    /* ── DOWNLOAD CTA ── */
    .dl-section {
      padding: 80px 0
    }

    .dl-card {
      background: var(--ink-1);
      border: 1px solid var(--border-mid);
      border-radius: var(--r-xl);
      padding: 64px 48px;
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .dl-card::before {
      content: '';
      position: absolute;
      top: -80px;
      left: 50%;
      transform: translateX(-50%);
      width: 500px;
      height: 360px;
      background: radial-gradient(ellipse, var(--blue-glow), transparent 65%);
      pointer-events: none
    }

    .dl-card h2 {
      font-size: clamp(28px, 4vw, 48px);
      font-weight: 900;
      letter-spacing: -2px;
      margin-bottom: 12px;
      position: relative;
      z-index: 1
    }

    .dl-card p {
      font-size: 16px;
      color: var(--text-2);
      margin-bottom: 32px;
      position: relative;
      z-index: 1
    }

    .dl-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 30px;
      background: var(--blue);
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      border-radius: 11px;
      transition: all .2s;
      letter-spacing: -.3px;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 40px var(--blue-dim)
    }

    .dl-btn:hover {
      background: #4a7de0;
      transform: translateY(-2px);
      box-shadow: 0 12px 40px var(--blue-glow)
    }

    .dl-meta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1
    }

    .dl-meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12.5px;
      color: var(--text-3)
    }

    .dl-sep {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--text-3);
      opacity: .3
    }

    /* ── FOOTER ── */
    footer {
      border-top: 1px solid var(--border);
      padding: 36px 0;
      margin-top: 32px
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-2)
    }

    .footer-links {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap
    }

    .footer-links a {
      font-size: 12.5px;
      color: var(--text-3);
      transition: color .15s
    }

    .footer-links a:hover {
      color: var(--text-2)
    }

    .footer-copy {
      font-size: 12px;
      color: var(--text-3)
    }

    /* ── CUSTOM CURSOR ── */
    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      body.custom-cursor-enabled,
      body.custom-cursor-enabled * {
        cursor: none !important;
      }

      #cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 8px;
        height: 8px;
        background: #fff;
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        transform: translate3d(-50%, -50%, 0);
        transition: width .15s, height .15s, background .15s;
        will-change: transform;
      }

      #cursor-dot.clicking {
        width: 6px;
        height: 6px;
        background: var(--blue);
      }
    }

    @media (pointer: coarse), (prefers-reduced-motion: reduce) {
      #cursor-dot {
        display: none;
      }
    }
/* ── CLICK SPARK canvas ── */
    #spark-canvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 99997
    }

    /* ── SCROLL FADE ── */
    .fade-up {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .55s ease, transform .55s ease
    }

    .fade-up.in {
      opacity: 1;
      transform: none
    }

    .d1 {
      transition-delay: .08s
    }

    .d2 {
      transition-delay: .16s
    }

    .d3 {
      transition-delay: .24s
    }

    .d4 {
      transition-delay: .32s
    }

    /* ── RESPONSIVE ── */
    @media(max-width:900px) {
      .problem-layout {
        grid-template-columns: 1fr
      }

      .steps {
        grid-template-columns: 1fr 1fr
      }

      .step-arrow {
        display: none
      }

      .why-inner {
        grid-template-columns: 1fr
      }

      .oss-inner {
        grid-template-columns: 1fr
      }

      .oss-actions {
  flex-direction: column;
}
    }

    @media(max-width:768px) {
      .nav-links {
        display: none
      }

      .hero h1 {
        font-size: 40px;
        letter-spacing: -2px
      }

      .hero-desc {
        font-size: 16px
      }

      .demo-split {
        grid-template-columns: 1fr
      }

      .feat-grid {
        grid-template-columns: 1fr 1fr
      }

      .illo-left {
        display: none
      }

      .illo-right {
        width: 100%
      }
    }

    @media(max-width:500px) {
      .feat-grid {
        grid-template-columns: 1fr
      }

      .features-header {
        flex-direction: column;
        align-items: flex-start
      }
    }
/* ── OPEN SOURCE MOBILE FIX ── */
@media (max-width: 900px) {
  .oss-card {
    padding: 36px 28px;
  }

  .oss-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .oss-actions {
    width: 100%;
    flex-direction: column;
  }

  .oss-btn-primary,
  .oss-btn-ghost {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 500px) {
  .oss {
    padding: 56px 0;
  }

  .oss-card {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .oss-text h2 {
    font-size: 28px;
    letter-spacing: -0.8px;
  }

  .oss-text p {
    font-size: 14px;
  }

  .oss-actions {
    gap: 9px;
  }

  .oss-btn-primary,
  .oss-btn-ghost {
    padding: 11px 14px;
    font-size: 13.5px;
  }
}