:root{
    --bg:#0a0c0a;
    --bg-soft:#0f120f;
    --card:#13160f;
    --card-border:#23271f;
    --lime:#00E0CC;
    --lime-dim:#00B3A3;
    --text:#f5f7f0;
    --muted:#9aa298;
    --muted-2:#6e756b;
    --radius:16px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  ::selection{background:rgba(0,224,204,0.28);color:#fff;}
  html{scroll-behavior:smooth;}
  section[id], main [id]{scroll-margin-top:90px;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3,.brand{
    font-family:'Poppins',sans-serif;
  }
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;border:none;}

  .container{
    max-width:1280px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ===== Background texture ===== */
  .bg-glow{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(700px 500px at 78% 8%, rgba(0,224,204,0.10), transparent 60%),
      radial-gradient(900px 700px at 10% 90%, rgba(0,224,204,0.05), transparent 60%);
  }
  .grain-overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
    opacity:0.035;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .ball-pattern{
    position:absolute;
    top:60px;
    right:-120px;
    width:560px;
    height:560px;
    opacity:0.5;
    z-index:0;
    pointer-events:none;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:#23271f;border-radius:6px;border:2px solid var(--bg);}
  ::-webkit-scrollbar-thumb:hover{background:#34392c;}
  html{scrollbar-color:#23271f var(--bg);scrollbar-width:thin;}

  /* Page-load fade-in */
  body{animation:pageFadeIn .6s ease both;}
  @keyframes pageFadeIn{
    from{opacity:0;}
    to{opacity:1;}
  }

  /* ===== Story ===== */
  .story{
    position:relative;
    z-index:1;
    padding:70px 0;
    border-top:1px solid var(--card-border);
    border-bottom:1px solid var(--card-border);
    background:radial-gradient(900px 400px at 15% 0%, rgba(0,224,204,0.05), transparent 60%);
  }
  .story-inner{
    max-width:780px;
    position:relative;
  }
  .story-container{
    position:relative;
    display:flex;
    align-items:center;
    gap:20px;
  }
  .story-doodle{
    display:none;
    flex-shrink:0;
    width:240px;
    margin-left:auto;
  }
  .napkin-card{
    position:relative;
    background:#F2EEE2;
    border-radius:3px;
    padding:26px 20px 18px;
    transform:rotate(-3deg);
    box-shadow:0 22px 45px rgba(0,0,0,0.45), 0 2px 0 rgba(0,0,0,0.05);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .napkin-card:hover{
    transform:rotate(-1deg) translateY(-4px);
    box-shadow:0 28px 55px rgba(0,0,0,0.5);
  }
  .napkin-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:3px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
    opacity:0.5;
    pointer-events:none;
  }
  .napkin-tape{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%) rotate(-4deg);
    width:70px;
    height:24px;
    background:rgba(0,224,204,0.22);
    border:1px solid rgba(0,224,204,0.25);
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
  }
  .napkin-card svg{
    width:100%;
    height:auto;
    position:relative;
    z-index:1;
  }
  .napkin-caption{
    display:block;
    margin-top:8px;
    font-size:12px;
    line-height:1.5;
    color:#5a564a;
    font-style:italic;
    text-align:center;
    position:relative;
    z-index:1;
  }
  @media (min-width:1100px){
    .story-doodle{display:block;}
  }
  .story-quote-mark{
    position:absolute;
    top:-30px;
    left:-12px;
    font-family:'Poppins',sans-serif;
    font-size:140px;
    font-weight:800;
    color:rgba(0,224,204,0.06);
    line-height:1;
    pointer-events:none;
  }
  .story-heading{
    font-size:32px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-0.5px;
    margin-bottom:18px;
    max-width:620px;
  }
  .story-body{
    font-size:15px;
    color:var(--muted);
    line-height:1.75;
    max-width:620px;
    margin-bottom:40px;
  }
  .story-timeline{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    position:relative;
  }
  .story-timeline::before{
    content:'';
    position:absolute;
    top:5px;
    left:5%;
    right:5%;
    border-top:1px dashed var(--card-border);
    z-index:0;
  }
  .story-point{
    display:flex;
    flex-direction:column;
    gap:14px;
    position:relative;
    z-index:1;
    opacity:0;
    transform:translateY(14px);
  }
  .story-point.in-view{animation:cardRise .55s ease forwards;}
  .story-point:nth-child(1).in-view{animation-delay:0s;}
  .story-point:nth-child(2).in-view{animation-delay:.15s;}
  .story-point:nth-child(3).in-view{animation-delay:.3s;}
  .story-dot{
    width:11px;height:11px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 0 4px rgba(0,224,204,0.12);
  }
  .story-point h6{font-size:14px;font-weight:700;margin-bottom:4px;}
  .story-point p{font-size:12.5px;color:var(--muted);line-height:1.5;}

  /* ===== Header ===== */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(8,10,8,0.97);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--card-border);
  }
  .scroll-progress{
    position:sticky;
    top:76px;
    z-index:99;
    height:2px;
    width:0%;
    background:linear-gradient(90deg, var(--lime), #00B3A3);
    transition:width .08s linear;
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
    min-height:76px;
  }
  .brand{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .brand-logo{
    height:38px;
    width:auto;
    display:block;
  }

  .nav-links{
    display:flex;
    align-items:center;
    gap:40px;
  }
  .nav-links a{
    font-size:14.5px;
    font-weight:500;
    color:var(--muted);
    transition:color .2s;
    position:relative;
    padding-bottom:4px;
  }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:100%;
    height:1px;
    background:var(--lime);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .3s ease;
  }
  .nav-links a:hover::after, .nav-links a.active::after{
    transform:scaleX(1);
    transform-origin:left;
  }
  .nav-links a:hover, .nav-links a.active{color:var(--text);}
  .nav-links a.active{color:var(--lime);}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 22px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:600;
    transition:transform .15s ease, box-shadow .15s ease, background .2s;
  }
  .btn-primary{
    background:var(--lime);
    color:#0a0c0a;
    position:relative;
    overflow:hidden;
  }
  .btn-primary::before{
    content:'';
    position:absolute;
    top:0;left:-120%;
    width:60%;height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:skewX(-20deg);
    transition:left .55s ease;
  }
  .btn-primary:hover::before{left:140%;}
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,224,204,0.25);
  }
  .btn-outline{
    background:rgba(255,255,255,0.04);
    border:1.5px solid rgba(255,255,255,0.22);
    color:var(--text);
    transition:border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
  }
  .btn-outline:hover{
    border-color:var(--lime);
    background:rgba(0,224,204,0.07);
    color:var(--lime);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,224,204,0.12);
  }
  .btn svg{width:16px;height:16px;position:relative;z-index:1;}

  .hamburger{
    display:none;
    width:40px;height:40px;
    align-items:center;justify-content:center;
    background:transparent;
    color:var(--text);
  }
  .hamburger svg{width:24px;height:24px;}

  .mobile-menu{
    display:none;
    position:fixed;
    inset:76px 0 0 0;
    background:var(--bg);
    z-index:99;
    padding:32px 24px;
    flex-direction:column;
    gap:4px;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    padding:16px 4px;
    font-size:18px;
    font-weight:600;
    border-bottom:1px solid var(--card-border);
    color:var(--text);
  }
  .mobile-menu a.active{color:var(--lime);}
  .mobile-menu .btn{justify-content:center;margin-top:24px;}

  /* ===== Hero ===== */
  .hero{
    position:relative;
    padding:90px 0 60px;
    z-index:1;
    overflow:hidden;
  }
  .hero::before{
    content:'';
    position:absolute;
    top:var(--glow-y, 30%);
    left:var(--glow-x, 70%);
    width:560px;
    height:560px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(0,224,204,0.07), transparent 65%);
    pointer-events:none;
    z-index:0;
    transition:left .4s ease, top .4s ease;
  }
  .hero .container{position:relative;z-index:1;}
  .hero-grid{
    display:grid;
    grid-template-columns:1fr 560px;
    gap:40px;
    align-items:center;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 16px;
    border:1px solid var(--card-border);
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    color:var(--lime);
    text-transform:uppercase;
    margin-bottom:24px;
    background:rgba(0,224,204,0.04);
  }
  .pulse-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:var(--lime);
    position:relative;
    flex-shrink:0;
  }
  .pulse-dot::after{
    content:'';
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:1px solid var(--lime);
    animation:pulseRing 1.8s ease-out infinite;
  }
  @keyframes pulseRing{
    0%{transform:scale(0.6);opacity:0.8;}
    100%{transform:scale(2.2);opacity:0;}
  }
  .founding-label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--lime);
    margin-bottom:2px;
  }
  .hero h1{
    font-size:62px;
    line-height:1.03;
    font-weight:800;
    letter-spacing:-1.5px;
    margin-bottom:22px;
    text-shadow:0 2px 24px rgba(0,0,0,0.3);
  }
  .hero h1 .lime{color:var(--lime);text-shadow:0 2px 30px rgba(0,224,204,0.25);}

  /* ===== FAQ ACCORDION ===== */
  document.querySelectorAll('.faq-q').forEach(btn => {
    btn.addEventListener('click', () => {
      const expanded = btn.getAttribute('aria-expanded') === 'true';
      const answer = btn.nextElementSibling;
      // Close all
      document.querySelectorAll('.faq-q').forEach(b => {
        b.setAttribute('aria-expanded', 'false');
        b.nextElementSibling.classList.remove('open');
      });
      // Open this one if it was closed
      if (!expanded) {
        btn.setAttribute('aria-expanded', 'true');
        answer.classList.add('open');
      }
    });
  });

  /* ===== AUDIENCE TOGGLE ===== */
  .audience-toggle{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:28px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:5px;
    width:fit-content;
  }
  .aud-tab{
    padding:9px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    color:var(--muted);
    background:transparent;
    border:none;
    transition:color .2s ease, background .2s ease, box-shadow .2s ease;
    white-space:nowrap;
  }
  .aud-tab:hover{color:var(--text);}
  .aud-tab.active{
    background:var(--lime);
    color:#0a0c0a;
    box-shadow:0 4px 14px rgba(0,224,204,0.3);
  }
  .aud-panel{
    display:none;
    opacity:0;
    transform:translateY(8px);
  }
  .aud-panel.active{
    display:block;
    animation:panelIn .35s ease forwards;
  }
  @keyframes panelIn{
    to{opacity:1;transform:translateY(0);}
  }

  .hero p.lead{
    font-size:17px;
    color:var(--muted);
    line-height:1.6;
    max-width:480px;
    margin-bottom:28px;
  }
  .hero-actions{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:36px;
    flex-wrap:wrap;
  }
  .btn-lg{padding:15px 26px;font-size:15px;border-radius:12px;}
  .btn-play{
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .play-icon-circle{
    width:32px;height:32px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.3);
    background:rgba(255,255,255,0.06);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:border-color .2s ease, background .2s ease;
  }
  .btn-outline:hover .play-icon-circle{
    border-color:var(--lime);
    background:rgba(0,224,204,0.12);
  }

  .social-proof{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .avatars{display:flex;}
  .avatars .av{
    width:38px;height:38px;
    border-radius:50%;
    border:2px solid var(--bg);
    margin-left:-10px;
    background:linear-gradient(135deg,#3a4a2a,#1d2417);
  }
  .avatars .av:first-child{margin-left:0;}
  .stars{color:var(--lime);font-size:14px;letter-spacing:2px;}
  .social-proof .label{font-size:13px;color:var(--muted);display:block;margin-top:2px;}

  /* Phone mockups */
  .phones{
    position:relative;
    height:600px;
    perspective:1400px;
  }
  .phone{
    position:absolute;
    width:300px;
    background:#0d0f0c;
    border:6px solid #1c1f18;
    border-radius:38px;
    box-shadow:0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
    overflow:hidden;
    transform-style:preserve-3d;
    animation:phoneSwap 9s ease-in-out infinite;
  }
  .phone-2{
    animation-delay:-4.5s;
  }
  @keyframes phoneSwap{
    0%, 38%{
      transform:translateZ(0) rotateY(0deg) scale(1);
      filter:brightness(1) saturate(1);
      z-index:3;
    }
    50%, 88%{
      transform:translateZ(-220px) rotateY(-16deg) scale(0.86);
      filter:brightness(0.7) saturate(0.85);
      z-index:1;
    }
    100%{
      transform:translateZ(0) rotateY(0deg) scale(1);
      filter:brightness(1) saturate(1);
      z-index:3;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .phone{animation:none;}
  }
  .phone::before{
    content:'';
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:22px;
    background:#070806;
    border-radius:14px;
    z-index:5;
  }
  .phone::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 18%, transparent 82%, rgba(255,255,255,0.03) 100%);
    z-index:6;
  }
  .phone-1{
    top:0;
    left:20px;
    z-index:2;
    height:580px;
  }
  .phone-2{
    top:60px;
    right:-30px;
    z-index:1;
    height:500px;
    opacity:0.92;
  }
  .phone-status{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px 6px;
    font-size:12px;
    font-weight:600;
    color:var(--text);
  }
  .phone-status .icons{display:flex;gap:5px;align-items:center;color:var(--muted);}
  .phone-screen{padding:10px 16px 16px;}
  .phone-title{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:12px;
  }
  .phone-title h4{font-size:19px;font-weight:700;}
  .bell{width:30px;height:30px;border-radius:50%;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;}
  .tabs{display:flex;gap:18px;border-bottom:1px solid var(--card-border);margin-bottom:12px;font-size:12.5px;font-weight:600;color:var(--muted-2);}
  .tabs span{padding-bottom:8px;}
  .tabs .tab-active{color:var(--lime);border-bottom:2px solid var(--lime);}
  .search-row{
    display:flex;gap:8px;margin-bottom:8px;
  }
  .search-box{
    flex:1;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:8px;
    padding:9px 12px;
    font-size:11px;
    color:var(--muted-2);
    display:flex;align-items:center;gap:6px;
  }
  .filter-box{
    width:36px;
    background:var(--lime);
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
  }
  .filter-box svg{width:16px;height:16px;color:#0a0c0a;}
  .select-row{display:flex;gap:8px;margin-bottom:10px;}
  .select-box{
    flex:1;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:8px;
    padding:8px 10px;
    font-size:10.5px;
    color:var(--muted);
    display:flex;justify-content:space-between;align-items:center;
  }
  .day-row{display:flex;gap:5px;margin-bottom:14px;}
  .day{
    flex:1;
    text-align:center;
    padding:7px 0;
    border-radius:8px;
    border:1px solid var(--card-border);
    font-size:9.5px;
    color:var(--muted-2);
    line-height:1.4;
  }
  .day b{display:block;font-size:11px;color:var(--text);font-weight:700;}
  .day.active{border-color:var(--lime);}
  .day.active b{color:var(--lime);}
  .section-label{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:8px;}
  .game-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:10px;
  }
  .game-thumb{
    height:78px;
    background:
      radial-gradient(circle at 30% 50%, rgba(0,224,204,0.25), transparent 60%),
      linear-gradient(120deg,#1a2e0f,#0d130a);
    position:relative;
  }
  .game-thumb .spots{
    position:absolute;top:8px;left:8px;
    background:rgba(0,0,0,0.55);
    font-size:9px;font-weight:600;
    padding:3px 8px;border-radius:20px;
  }
  .game-thumb .time{
    position:absolute;top:8px;right:8px;
    background:rgba(0,0,0,0.55);
    font-size:9px;font-weight:600;
    padding:3px 8px;border-radius:20px;
  }
  .game-info{padding:10px 12px;}
  .game-info h5{font-size:13px;font-weight:700;margin-bottom:4px;}
  .game-info .loc{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-bottom:8px;}
  .game-meta{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
  .pill{
    background:#1a1d16;
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:3px 8px;
    font-size:9px;
    color:var(--muted);
  }
  .game-foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--muted);margin-bottom:8px;}
  .game-foot b{color:var(--text);}
  .join-btn{
    background:var(--lime);
    color:#0a0c0a;
    text-align:center;
    padding:9px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
    display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .upcoming-row{
    display:flex;
    gap:10px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:12px;
    padding:8px;
    margin-bottom:10px;
    align-items:center;
  }
  .upcoming-thumb{
    width:56px;height:56px;
    border-radius:8px;
    background:linear-gradient(135deg,#1a2e0f,#0d130a);
    flex-shrink:0;
  }
  .upcoming-info{flex:1;min-width:0;}
  .upcoming-info h6{font-size:12px;font-weight:700;margin-bottom:2px;}
  .upcoming-info .loc{font-size:9.5px;color:var(--muted);margin-bottom:4px;}
  .upcoming-info .price{font-size:9.5px;color:var(--muted);}
  .upcoming-tag{
    font-size:8.5px;font-weight:700;color:var(--lime);
    align-self:flex-start;
  }

  /* ===== Stats bar ===== */
  .stats-bar{
    position:relative;
    z-index:1;
    margin-top:30px;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    padding:30px 40px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    perspective:700px;
  }
  .stat{
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px;
    border-radius:10px;
    transform:rotateX(0deg) translateZ(0);
    transition:transform .3s ease, background .3s ease;
  }
  .stat:hover{
    transform:rotateX(8deg) translateZ(10px);
    background:rgba(0,224,204,0.04);
  }
  .stat-icon{
    width:46px;height:46px;
    border-radius:12px;
    background:rgba(0,224,204,0.08);
    display:flex;align-items:center;justify-content:center;
    color:var(--lime);
    flex-shrink:0;
    box-shadow:0 0 0 1px rgba(0,224,204,0.08);
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .stat:hover .stat-icon{
    box-shadow:0 8px 18px rgba(0,224,204,0.18);
    transform:translateZ(6px);
  }
  .stat-icon svg{width:22px;height:22px;}
  .stat h3{font-size:24px;font-weight:800;}
  .stat span{font-size:12.5px;color:var(--muted);}

  /* ===== Features ===== */
  .feature-cols{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:60px;
  }
  .features{
    position:relative;
    z-index:1;
    padding:100px 0 60px;
    overflow:hidden;
  }
  .features::before, .how-it-works::before{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:900px;height:900px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(0,224,204,0.05);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
  }
  .features::after, .how-it-works::after{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:600px;height:600px;
    transform:translate(-50%,-50%);
    border:1px solid rgba(0,224,204,0.04);
    border-radius:50%;
    pointer-events:none;
    z-index:0;
  }
  .feature-cols, .how-it-works .feature-cols{position:relative;z-index:1;}
  .section-eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    color:var(--lime);
    text-transform:uppercase;
    margin-bottom:14px;
    position:relative;
    display:inline-block;
    padding-bottom:10px;
  }
  .section-eyebrow::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    width:36px;
    height:2px;
    background:var(--lime);
  }
  .features h2, .how-it-works h2{
    font-size:32px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-0.5px;
  }
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    gap:18px;
    align-content:start;
    perspective:800px;
  }
  .feature-card{
    position:relative;
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:22px;
    overflow:hidden;
    transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    opacity:0;
    transform:rotateX(-22deg) translateY(22px);
    transform-origin:center bottom;
  }
  .feature-card.in-view{
    animation:cardFlipIn .65s cubic-bezier(0.2,0.8,0.3,1) forwards;
  }
  @keyframes cardFlipIn{
    to{opacity:1;transform:rotateX(0deg) translateY(0);}
  }
  @keyframes cardRise{
    to{opacity:1;transform:translateY(0);}
  }
  .feature-card .jersey-num{
    position:absolute;
    top:-6px;
    right:10px;
    font-family:'Poppins',sans-serif;
    font-size:64px;
    font-weight:800;
    color:rgba(255,255,255,0.035);
    line-height:1;
    user-select:none;
    transition:color .25s ease;
    pointer-events:none;
  }
  .feature-card:hover{
    border-color:rgba(0,224,204,0.45);
    transform:translateY(-5px);
    box-shadow:0 14px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,224,204,0.06) inset;
  }
  .feature-card:hover .jersey-num{
    color:rgba(0,224,204,0.10);
  }
  .feature-icon{
    width:38px;height:38px;
    border-radius:10px;
    background:rgba(0,224,204,0.08);
    display:flex;align-items:center;justify-content:center;
    color:var(--lime);
    margin-bottom:16px;
    position:relative;
    z-index:1;
    transition:background .25s ease, color .25s ease, transform .25s ease;
  }
  .feature-icon svg{width:19px;height:19px;}
  .feature-card:hover .feature-icon{
    background:var(--lime);
    color:#0a0c0a;
    transform:scale(1.08) rotate(-4deg);
  }
  .esewa-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    padding:5px 10px;
    border-radius:20px;
    font-size:10.5px;
    font-weight:700;
    color:#7ED957;
    background:rgba(126,217,87,0.1);
    border:1px solid rgba(126,217,87,0.3);
    position:relative;
    z-index:1;
  }
  .feature-card-esewa{
    border-color:rgba(126,217,87,0.18);
  }
  .feature-card-esewa:hover{
    border-color:rgba(126,217,87,0.5);
    box-shadow:0 14px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(126,217,87,0.1) inset;
  }
  .feature-card-esewa:hover .feature-icon{
    background:#7ED957;
  }
  .feature-card h4{font-size:15px;font-weight:700;margin-bottom:6px;position:relative;z-index:1;}
  .feature-card p{font-size:13px;color:var(--muted);line-height:1.5;position:relative;z-index:1;}
  .explore-link{
    grid-column:1/-1;
    color:var(--lime);
    font-size:14px;
    font-weight:600;
    display:flex;align-items:center;gap:6px;
    margin-top:4px;
  }

  /* ===== How it works ===== */
  .how-it-works{
    position:relative;
    z-index:1;
    padding:60px 0 100px;
    overflow:hidden;
  }
  .steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
    perspective:600px;
  }
  .step{
    text-align:left;
    position:relative;
    padding-right:20px;
    opacity:0;
    transform:translateY(16px);
  }
  .step.in-view{
    animation:cardRise .55s ease forwards;
  }
  .step:nth-child(1).in-view{animation-delay:0s;}
  .step:nth-child(2).in-view{animation-delay:.14s;}
  .step:nth-child(3).in-view{animation-delay:.28s;}
  .steps-3{grid-template-columns:repeat(3,1fr);}
  .esewa-step-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:5px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    color:#7ED957;
    background:rgba(126,217,87,0.1);
    border:1px solid rgba(126,217,87,0.3);
    position:relative;
    z-index:2;
  }
  .step-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:var(--card);
    border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    color:var(--lime);
    margin-bottom:18px;
    position:relative;
    z-index:2;
    transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .step:hover .step-icon{
    border-color:var(--lime);
    box-shadow:0 0 0 6px rgba(0,224,204,0.06);
    transform:scale(1.05) rotateY(18deg);
  }
  .step-icon svg{width:26px;height:26px;}
  .step::after{
    content:'';
    position:absolute;
    top:32px;
    left:80px;
    right:0;
    border-top:2px dashed var(--card-border);
    z-index:1;
  }
  .step:last-child::after{display:none;}
  .ball-trail{
    position:absolute;
    top:25px;
    left:80px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 10px rgba(0,224,204,0.7);
    z-index:2;
    opacity:0;
  }
  .step.in-view .ball-trail{
    animation:ballMove 1.1s ease forwards;
    animation-delay:.5s;
  }
  .step:last-child .ball-trail{display:none;}
  @keyframes ballMove{
    0%{opacity:0;left:80px;}
    15%{opacity:1;}
    85%{opacity:1;}
    100%{opacity:0;left:calc(100% - 6px);}
  }
  .step-num{
    font-size:13px;
    font-weight:700;
    color:var(--lime);
    margin-bottom:6px;
    position:relative;
    z-index:2;
  }
  .step h5{font-size:15px;font-weight:700;margin-bottom:6px;position:relative;z-index:2;}
  .step p{font-size:13px;color:var(--muted);line-height:1.5;position:relative;z-index:2;}
  .learn-link{
    grid-column:1/-1;
    color:var(--lime);
    font-size:14px;
    font-weight:600;
    display:flex;align-items:center;gap:6px;
    margin-top:36px;
  }


  /* ===== FAQ ===== */
  .faq-section {
    position: relative;
    z-index: 1;
    padding: 80px 0 90px;
  }
  .faq-header {
    margin-bottom: 48px;
  }
  .faq-header h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.4px;
  }
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
  }
  .faq-item {
    border-bottom: 1px solid var(--card-border);
  }
  .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    background: transparent;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.2s;
  }
  .faq-q:hover { color: var(--lime); }
  .faq-q[aria-expanded="true"] { color: var(--lime); }
  .faq-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--lime);
  }
  .faq-q[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
  }
  .faq-a {
    display: none;
    padding-bottom: 22px;
  }
  .faq-a.open { display: block; animation: panelIn 0.3s ease both; }
  .faq-a p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
  }

  /* Pricing line */
  .pricing-line {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 16px;
  }
  .pricing-line strong { color: var(--text); }

  @media (max-width: 760px) {
    .faq-grid { grid-template-columns: 1fr; gap: 0; }
    .faq-header h2 { font-size: 24px; }
    .faq-section { padding: 60px 0; }
    .pricing-line { flex-wrap: wrap; }
  }

  /* ===== CTA Footer Banner ===== */
  .cta-banner{
    position:relative;
    z-index:1;
    margin:0 0 80px;
  }
  .cta-inner{
    position:relative;
    background:linear-gradient(120deg,#10160a,#0a0c0a 60%);
    border:1px solid var(--card-border);
    border-radius:24px;
    padding:56px;
    overflow:hidden;
  }
  .cta-inner::before{
    content:'';
    position:absolute;
    right:-60px;bottom:-60px;
    width:280px;height:280px;
    background:radial-gradient(circle, rgba(0,224,204,0.18), transparent 70%);
  }
  .cta-copy{position:relative;z-index:1;max-width:620px;}
  .kickoff-eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--lime);
    margin-bottom:14px;
  }
  .cta-inner h3{font-size:30px;font-weight:700;line-height:1.25;margin-bottom:12px;}
  .cta-inner p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:30px;max-width:520px;}

  .cta-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
  .share-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:1px solid var(--card-border);
    color:var(--text);
    padding:14px 20px;
    border-radius:12px;
    font-size:13.5px;
    font-weight:600;
    transition:border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .share-btn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px);}
  .waitlist-note{
    font-size:12px;
    color:var(--muted-2);
    margin:0;
    transition:color .2s ease;
  }
  .waitlist-note.success{color:var(--lime);font-weight:600;}

  /* ===== Footer ===== */
  footer{
    position:relative;
    z-index:1;
    border-top:1px solid var(--card-border);
    padding:50px 0 30px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(2,1fr);
    gap:40px;
    margin-bottom:40px;
  }
  .footer-brand p{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:14px;max-width:280px;}
  .footer-logo{height:34px;width:auto;display:block;}
  .footer-col h6{font-size:13px;font-weight:700;margin-bottom:16px;letter-spacing:0.5px;text-transform:uppercase;color:var(--muted);}
  .footer-col a{
    display:block;
    font-size:13.5px;
    color:var(--muted);
    margin-bottom:10px;
    transition:color .2s ease, transform .2s ease;
  }
  .footer-col a:hover{color:var(--lime);transform:translateX(3px);}
  .footer-socials{
    display:flex;
    align-items:center;
    gap:8px;
    padding-bottom:20px;
  }
  .social-icon{
    width:38px;height:38px;
    border-radius:10px;
    background:var(--card);
    border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);
    transition:color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .social-icon:hover{
    color:var(--lime);
    border-color:rgba(0,224,204,0.4);
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,224,204,0.1);
  }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:24px;
    border-top:1px solid var(--card-border);
    font-size:12.5px;
    color:var(--muted-2);
    flex-wrap:wrap;
    gap:12px;
  }


  /* ===== Store Download Buttons ===== */
  .store-row{
    display:flex;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
  }
  .store-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    border-radius:14px;
    text-decoration:none;
    color:var(--text);
    min-width:160px;
    transition:transform .15s ease, box-shadow .15s ease;
    position:relative;
    overflow:hidden;
  }
  .store-btn::before{
    content:'';
    position:absolute;top:0;left:-120%;
    width:55%;height:100%;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,0.3),transparent);
    transform:skewX(-20deg);
    transition:left .5s ease;
  }
  .store-btn:hover::before{left:140%;}
  .store-btn:hover{transform:translateY(-3px);}
  .store-btn-play{
    background:rgba(255,255,255,0.96);
    color:#060806;
    box-shadow:0 4px 20px rgba(255,255,255,0.12);
  }
  .store-btn-play:hover{box-shadow:0 10px 32px rgba(255,255,255,0.22);}
  .store-btn-apple{
    background:var(--lime);
    color:#060806;
    box-shadow:0 4px 20px rgba(0,224,204,0.2);
  }
  .store-btn-apple:hover{box-shadow:0 10px 32px rgba(0,224,204,0.35);}
  .store-btn-text{
    display:flex;flex-direction:column;line-height:1.2;text-align:left;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    letter-spacing: -0.2px;
  }
  .store-btn-text .store-sub {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: 0;
    display: block;
  }
  .store-btn-text .store-main {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    display: block;
  }

  /* ===== CTA store row (bottom banner) ===== */
  .cta-store-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
  }
  @media (max-width: 480px) {
    .cta-store-row { flex-direction: column; }
  }



  /* Tab short/long text toggle */
  .tab-short { display: none; }
  .tab-long  { display: inline; }

  /* Proof pills */
  .proof-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
  }
  .proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    white-space: nowrap;
  }

  /* Mobile: show short tab labels, compact store row */
  @media (max-width: 600px) {
    .tab-short { display: inline; }
    .tab-long  { display: none; }

    .audience-toggle { padding: 4px; }
    .aud-tab { font-size: 12px; padding: 8px 4px; }

    /* Store buttons — equal width, compact */
    .store-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 16px;
    }
    .store-btn {
      padding: 10px 12px;
      border-radius: 12px;
      gap: 8px;
      min-width: 0;
      justify-content: flex-start;
    }
    .store-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .store-btn-text .store-sub { font-size: 9px; }
    .store-btn-text .store-main { font-size: 13.5px; }

    /* Hero spacing — breathe */
    .hero { padding: 28px 0 24px; }
    .eyebrow { margin-bottom: 14px; font-size: 10.5px; }
    .hero h1 { font-size: 34px; margin-bottom: 12px; }
    .hero p.lead { font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
    .hero-actions { gap: 8px; margin-bottom: 0; }
    .btn-lg { padding: 13px; font-size: 14.5px; justify-content: center; }

    /* Proof pills — wrap nicely */
    .proof-pills { gap: 6px; margin-top: 16px; }
    .proof-pill { font-size: 11.5px; padding: 5px 10px; }
  }

  @media (max-width: 400px) {
    .hero h1 { font-size: 28px; }
    .store-btn { padding: 9px 10px; }
    .store-btn-text .store-main { font-size: 12.5px; }
    .proof-pill { font-size: 11px; padding: 4px 9px; }
  }


  /* ══════════════════════════════════════
     MOBILE HERO — stripped to essentials
  ══════════════════════════════════════ */

  /* Short mobile tagline (hidden on desktop) */
  .mobile-tagline {
    display: none;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 22px;
  }

  @media (max-width: 600px) {
    /* ── Nav ── */
    .nav { height: 60px; min-height: 60px; }
    .brand-logo { height: 30px; }
    .nav .btn-primary { padding: 9px 16px; font-size: 13px; border-radius: 10px; }
    .hamburger { width: 36px; height: 36px; }
    .scroll-progress { top: 60px; }
    .mobile-menu { inset: 60px 0 0 0; }

    /* ── Hero wrapper ── */
    .hero { padding: 24px 0 16px; min-height: auto; }
    .container { padding: 0 18px; }

    /* ── Eyebrow ── */
    .eyebrow { font-size: 10px; padding: 5px 11px; margin-bottom: 14px; letter-spacing: 0.8px; }

    /* ── Headline ── */
    .hero h1 { font-size: 36px; line-height: 1.05; letter-spacing: -1px; margin-bottom: 14px; }

    /* ── Hide audience toggle on mobile ── */
    /* Show a clean single tagline instead */
    .audience-toggle { display: none; }
    .aud-panel { display: none !important; }

    /* ── Show mobile tagline ── */
    .mobile-tagline { display: block; }

    /* ── Store buttons — THE primary CTA on mobile ── */
    .store-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 0 0 16px 0;
    }
    .store-btn {
      padding: 12px 12px;
      border-radius: 12px;
      gap: 8px;
      min-width: 0;
      justify-content: flex-start;
      flex-direction: row;
    }
    .store-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
    .store-btn-text .store-sub { font-size: 9.5px; }
    .store-btn-text .store-main { font-size: 14px; font-weight: 800; }

    /* ── Proof pills — one clean row ── */
    .proof-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 0;
    }
    .proof-pill {
      font-size: 11.5px;
      padding: 5px 10px;
    }

    /* ── Hide social proof avatars wrapper ── */
    .social-proof { margin: 0; }

    /* ── Hide anything that was after store row ── */
    .hero-actions { display: none; }
  }

  @media (max-width: 400px) {
    .hero h1 { font-size: 30px; }
    .mobile-tagline { font-size: 14px; }
    .store-btn { padding: 10px 10px; }
    .store-btn-text .store-main { font-size: 13px; }
    .proof-pill { font-size: 11px; }
  }

  /* ===== Sticky mobile CTA ===== */
  .sticky-cta{
    display:none;
  }

  /* =====================================================
   RESPONSIVE — full device coverage
   1600px+  : ultrawide
   1280–1600: large desktop
   1024–1280: small desktop / large laptop
    900–1024: landscape tablet / small laptop
    600–900 : portrait tablet
    400–600 : large phone
       <400 : small phone
===================================================== */

  /* ── Ultrawide ── */
  @media (min-width:1600px){
    .container{max-width:1440px;}
    .hero h1{font-size:72px;}
  }

  /* ── Small desktop / large laptop (1024–1280) ── */
  @media (max-width:1280px) and (min-width:1025px){
    .hero-grid{grid-template-columns:1fr 460px;gap:36px;}
    .hero h1{font-size:52px;}
    .phones{height:500px;}
    .phone{width:240px;}
    .phone-1{height:480px;}
    .phone-2{height:420px;}
    .feature-cols{grid-template-columns:280px 1fr;gap:40px;}
  }

  /* ── Landscape tablet / small laptop (900–1024) ── */
  @media (max-width:1024px) and (min-width:901px){
    .container{padding:0 28px;}
    .hero-grid{grid-template-columns:1fr 400px;gap:28px;}
    .hero h1{font-size:46px;letter-spacing:-1px;}
    .phones{height:440px;}
    .phone{width:210px;}
    .phone-1{height:425px;}
    .phone-2{height:365px;}
    .feature-cols{grid-template-columns:240px 1fr;gap:32px;}
    .stats-bar{padding:22px 28px;}
    .stat h3{font-size:20px;}
    .nav-links{gap:26px;}
    .nav-links a{font-size:13.5px;}
    .faq-grid{grid-template-columns:1fr 1fr;gap:0 36px;}
  }

  /* ── Portrait tablet (600–900) ── */
  @media (max-width:900px){
    .container{padding:0 24px;}

    /* Nav */
    .nav-links{gap:20px;}
    .nav-links a{font-size:13px;}

    /* Hero */
    .hero{padding:60px 0 48px;}
    .hero-grid{grid-template-columns:1fr;gap:0;}
    .hero h1{font-size:44px;letter-spacing:-1px;margin-bottom:20px;}
    .hero p.lead{font-size:15.5px;}
    .audience-toggle{flex-wrap:wrap;}

    /* Hide phones on tablet portrait — too cramped */
    .phones{display:none;}

    /* Stats */
    .stats-bar{
      grid-template-columns:repeat(2,1fr);
      padding:24px;
      gap:20px;
    }
    .stat h3{font-size:22px;}

    /* Features */
    .features{padding:64px 0 20px;}
    .feature-cols{grid-template-columns:1fr;gap:24px;}
    .features h2,.how-it-works h2{font-size:28px;}
    .feature-grid{grid-template-columns:repeat(3,1fr);gap:14px;}

    /* How it works */
    .how-it-works{padding:48px 0 72px;}
    .steps{grid-template-columns:repeat(2,1fr);row-gap:40px;column-gap:20px;}
    .steps-3{grid-template-columns:repeat(2,1fr);row-gap:36px;column-gap:20px;}
    .step::after,.ball-trail{display:none;}
    .step-icon{width:56px;height:56px;}

    /* Story */
    .story{padding:56px 0;}
    .story-container{flex-direction:column;gap:36px;}
    .story-doodle{display:none;}
    .story-heading{font-size:26px;}
    .story-body{font-size:14.5px;margin-bottom:32px;}
    .story-timeline{grid-template-columns:1fr;gap:20px;}
    .story-timeline::before{display:none;}

    /* FAQ */
    .faq-section{padding:64px 0;}
    .faq-grid{grid-template-columns:1fr;gap:0;}
    .faq-header h2{font-size:28px;}

    /* CTA */
    .cta-banner{margin-bottom:56px;}
    .cta-inner{padding:40px 36px;}
    .cta-inner h3{font-size:24px;}
    .cta-ball-scene{display:none;}

    /* Footer */
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
    .footer-brand{grid-column:1/-1;}
    .footer-bottom{justify-content:center;text-align:center;}
    .footer-socials{justify-content:center;}
  }

  /* ── Large phone (480–600) ── */
  @media (max-width:600px){
    .container{padding:0 18px;}

    /* Nav */
    .nav-links{display:none;}
    .hamburger{display:flex;}
    .nav{height:64px;min-height:64px;}
    .brand-logo{height:32px;}
    .scroll-progress{top:64px;}
    .mobile-menu{inset:64px 0 0 0;}

    /* ── Hero mobile ── */
    .hero{padding:32px 0 28px;min-height:auto;}
    .hero h1{font-size:36px;letter-spacing:-0.8px;margin-bottom:14px;}
    .hero p.lead{font-size:14.5px;margin-bottom:18px;line-height:1.65;}

    /* Eyebrow badge — tighter */
    .eyebrow{font-size:10.5px;padding:6px 12px;margin-bottom:16px;gap:7px;}

    /* Audience toggle — full width, equal tabs */
    .audience-toggle{width:100%;border-radius:12px;padding:4px;}
    .aud-tab{flex:1;text-align:center;font-size:12px;padding:8px 6px;}

    /* CTA buttons — stack but not huge */
    .hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:16px;}
    .btn-lg{justify-content:center;padding:13px 20px;font-size:14.5px;}

    /* Store buttons — compact side by side */
    .store-row{
      display:flex;
      flex-direction:row;
      gap:8px;
      margin-top:14px;
      flex-wrap:nowrap;
    }
    .store-btn{
      flex:1;
      padding:9px 12px;
      border-radius:12px;
      gap:8px;
      min-width:0;
    }
    .store-btn svg{width:18px;height:18px;flex-shrink:0;}
    .store-btn-text .store-sub{font-size:9px;}
    .store-btn-text .store-main{font-size:13px;}

    /* Social proof — compact */
    .social-proof{margin-bottom:20px;gap:10px;}
    .av{width:30px;height:30px;}
    .founding-label{font-size:11.5px;}
    .label{font-size:11.5px;}
    .pricing-line{font-size:12px;margin-top:10px;}

    /* Stats */
    .stats-bar{
      grid-template-columns:repeat(2,1fr);
      padding:18px;
      gap:16px 12px;
      margin-top:24px;
      border-radius:12px;
    }
    .stat{gap:10px;flex-direction:column;align-items:flex-start;}
    .stat-icon{width:36px;height:36px;}
    .stat-icon svg{width:17px;height:17px;}
    .stat h3{font-size:18px;}
    .stat span{font-size:11px;}

    /* Features */
    .features{padding:48px 0 10px;}
    .feature-cols{grid-template-columns:1fr;gap:20px;}
    .features h2,.how-it-works h2{font-size:22px;margin-bottom:20px;}
    .feature-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .feature-card{padding:16px;}
    .feature-card h4{font-size:13px;}
    .feature-card p{font-size:12px;}
    .feature-icon{width:32px;height:32px;margin-bottom:12px;}
    .feature-icon svg{width:16px;height:16px;}
    .explore-link{margin-top:12px;}

    /* How it works */
    .how-it-works{padding:36px 0 56px;}
    .steps,.steps-3{grid-template-columns:1fr;gap:28px;}
    .step{padding-right:0;}
    .step-icon{width:52px;height:52px;}
    .step-icon svg{width:21px;height:21px;}
    .pitch-canvas{display:none;}

    /* Story */
    .story{padding:40px 0;}
    .story-quote-mark{font-size:80px;top:-16px;}
    .story-heading{font-size:21px;}
    .story-body{font-size:13.5px;margin-bottom:26px;}
    .story-timeline{grid-template-columns:1fr;gap:20px;}
    .section-eyebrow{font-size:11px;}

    /* FAQ */
    .faq-section{padding:48px 0;}
    .faq-header{margin-bottom:32px;}
    .faq-header h2{font-size:22px;}
    .faq-grid{grid-template-columns:1fr;gap:0;}
    .faq-q{font-size:14px;padding:18px 0;}
    .faq-a p{font-size:13.5px;}

    /* CTA */
    .cta-banner{margin-bottom:40px;}
    .cta-inner{padding:28px 20px;border-radius:16px;}
    .cta-inner h3{font-size:20px;line-height:1.3;}
    .cta-inner p{font-size:13.5px;margin-bottom:22px;}
    .cta-actions{flex-direction:column;align-items:stretch;width:100%;}
    .cta-actions .btn,.cta-actions .share-btn{width:100%;justify-content:center;}
    .cta-copy{max-width:100%;}

    /* Footer */
    .footer-grid{grid-template-columns:1fr;gap:28px;}
    .footer-brand{grid-column:auto;}
    .footer-bottom{flex-direction:column;gap:6px;text-align:center;font-size:11.5px;}
    .footer-socials{justify-content:flex-start;padding-bottom:16px;}
    footer{padding:40px 0 24px;}
  }

  /* ── Small phone (<400) ── */
  @media (max-width:400px){
    .container{padding:0 14px;}
    .hero{padding:32px 0 28px;}
    .hero h1{font-size:28px;letter-spacing:-0.5px;}
    .store-row{gap:6px;}
    .store-btn{padding:8px 10px;}
    .store-btn-text .store-main{font-size:12px;}
    .store-btn-text .store-sub{font-size:8.5px;}
    .hero p.lead{font-size:14px;}
    .aud-tab{font-size:11.5px;padding:8px 6px;}
    .audience-toggle{gap:4px;}
    .store-badge .store-badge-text .big{font-size:13px;}
    .stats-bar{grid-template-columns:1fr 1fr;padding:14px;gap:14px 10px;}
    .stat h3{font-size:16px;}
    .stat span{font-size:10px;}
    .stat-icon{width:32px;height:32px;}
    .stat-icon svg{width:15px;height:15px;}
    .feature-grid{grid-template-columns:1fr;}
    .faq-q{font-size:13.5px;}
    .brand-logo{height:28px;}
    .nav{height:60px;min-height:60px;}
    .scroll-progress{top:60px;}
    .mobile-menu{inset:60px 0 0 0;}
    .cta-inner h3{font-size:18px;}
    .footer-socials{flex-wrap:wrap;}
  }

  /* ── Ensure buttons never overflow ── */
  @media (max-width:900px){
    .btn{max-width:100%;}
    .store-badges{flex-wrap:wrap;}
  }

  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    .phone{animation:none;}
    .float-ball{animation:none;}
    body{animation:none;}
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--lime);
    outline-offset:2px;
  }


  /* ===== HERO AURORA CANVAS ===== */
  .hero-aurora{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
  }

  /* ===== FLOATING BALLS ===== */
  .hero-balls{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  .float-ball{
    position:absolute;
    border-radius:50%;
    overflow:visible;
    filter:drop-shadow(0 16px 24px rgba(0,0,0,0.55));
  }
  .float-ball svg{width:100%;height:100%;overflow:visible;}
  .ball-a{width:130px;height:130px;top:6%;left:3%;opacity:0.82;animation:driftA 24s ease-in-out infinite;}
  .ball-b{width:75px;height:75px;top:60%;left:36%;opacity:0.55;animation:driftB 19s ease-in-out infinite;}
  .ball-c{width:175px;height:175px;top:8%;right:4%;opacity:0.42;animation:driftC 28s ease-in-out infinite;}
  .ball-d{width:95px;height:95px;bottom:5%;left:16%;opacity:0.58;animation:driftD 21s ease-in-out infinite;}
  @keyframes driftA{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    50%{transform:translate(28px,34px) rotate(40deg);}
  }
  @keyframes driftB{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    50%{transform:translate(-22px,-26px) rotate(-35deg);}
  }
  @keyframes driftC{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    50%{transform:translate(-34px,28px) rotate(45deg);}
  }
  @keyframes driftD{
    0%,100%{transform:translate(0,0) rotate(0deg);}
    50%{transform:translate(20px,-20px) rotate(-28deg);}
  }
  @media (prefers-reduced-motion:reduce){.float-ball{animation:none;}}
  @media (max-width:760px){
    .ball-c{width:95px;height:95px;opacity:0.28;}
    .ball-a{width:75px;height:75px;opacity:0.5;}
    .ball-b,.ball-d{display:none;}
  }

  /* ===== SELF-DRAWING PITCH — How It Works BG ===== */
  .pitch-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    opacity:0.13;
  }
  .how-it-works{
    position:relative;
    z-index:1;
    padding:60px 0 100px;
    overflow:hidden;
  }

  /* ===== HEADLINE SPLIT TEXT ===== */
  .hero h1 .char{
    display:inline-block;
    opacity:0;
    transform:translateY(20px) rotateX(-30deg);
    transform-origin:bottom center;
    animation:charReveal .4s cubic-bezier(0.2,0.8,0.3,1) forwards;
  }
  @keyframes charReveal{
    to{opacity:1;transform:translateY(0) rotateX(0deg);}
  }

  /* ===== PARALLAX LAYERS ===== */
  .parallax-wrap{transform-style:preserve-3d;}

  /* ===== 3D FEATURE CARD TILT (JS-driven, CSS for transition) ===== */
  .feature-card{
    will-change:transform;
    transition:border-color .25s ease, transform .08s ease, box-shadow .25s ease;
  }
  .feature-card .card-shine{
    position:absolute;
    inset:0;
    border-radius:14px;
    pointer-events:none;
    background:radial-gradient(circle at 50% 50%, rgba(0,224,204,0.15), transparent 60%);
    opacity:0;
    transition:opacity .3s ease;
    z-index:0;
  }
  .feature-card:hover .card-shine{opacity:1;}

  /* ===== STAT COUNTER ===== */
  .stat h3{
    font-variant-numeric:tabular-nums;
    transition:color .3s ease;
  }
  .stat-icon{
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .stat:hover .stat-icon{
    box-shadow:0 0 0 8px rgba(0,224,204,0.1), 0 0 20px rgba(0,224,204,0.15);
    transform:rotate(-8deg) scale(1.06);
  }

  /* ===== 3D SPINNING BALL IN CTA ===== */
  .cta-inner{
    position:relative;
    background:linear-gradient(120deg,#10160a,#0a0c0a 60%);
    border:1px solid var(--card-border);
    border-radius:24px;
    padding:56px;
    overflow:hidden;
  }
  .cta-ball-scene{
    position:absolute;
    right:-40px;
    top:50%;
    transform:translateY(-50%);
    width:260px;
    height:260px;
    pointer-events:none;
  }
  .cta-ball{
    width:100%;
    height:100%;
    animation:spinBall 12s linear infinite;
    filter:drop-shadow(0 0 30px rgba(0,224,204,0.2));
    opacity:0.22;
  }
  @keyframes spinBall{
    0%{transform:rotate3d(0.5,1,0.2,0deg);}
    100%{transform:rotate3d(0.5,1,0.2,360deg);}
  }

  /* ===== SECTION ENTRANCE WORDS ===== */
  .reveal-word{
    display:inline-block;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .reveal-word.in-view{opacity:1;transform:translateY(0);}

  /* ===== GLOWING SECTION DIVIDERS ===== */
  .glow-divider{
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--lime), transparent);
    opacity:0.25;
    margin:0;
    position:relative;
    z-index:1;
  }

  /* ===== STORY NAPKIN — subtle tilt + lift ===== */
  .napkin-card{
    animation:napkinFloat 6s ease-in-out infinite;
  }
  @keyframes napkinFloat{
    0%,100%{transform:rotate(-3deg) translateY(0px);}
    50%{transform:rotate(-2deg) translateY(-6px);}
  }
  .napkin-card:hover{animation:none;transform:rotate(-1deg) translateY(-8px);}

  /* ===== MOBILE: hide heavy 3D ===== */
  @media (max-width:760px){
    .cta-ball-scene{display:none;}
  }