:root{
    --void: #0b0a0d;
    --void-2: #131116;
    --crimson: #e0293b;
    --crimson-bright: #ff3b4e;
    --wine: #4a0e17;
    --wine-deep: #2b070d;
    --bone: #f2ece1;
    --ash: #8b8790;
    --ash-dim: #59565c;
    --line: rgba(242,236,225,0.1);
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--bone);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{background:var(--crimson);color:var(--bone);}

  a{color:inherit;}

  /* film grain overlay */
  .grain{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:200;
    opacity:0.05;
    mix-blend-mode:overlay;
    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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .vignette{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:199;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;
    z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 6vw;
    background:linear-gradient(to bottom, rgba(11,10,13,0.9), transparent);
    transition:background .3s ease;
  }
  .logo{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.6rem;
    letter-spacing:0.12em;
    color:var(--crimson);
    text-decoration:none;
  }
  .logo span{color:var(--crimson-bright);}
  nav.links{display:flex;gap:2.2rem;align-items:center;}
  nav.links a{
    font-size:0.82rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--ash);
    text-decoration:none;
    font-weight:500;
    transition:color .2s;
  }
  nav.links a:hover{color:var(--bone);}
  .nav-cta{
    background:var(--crimson);
    color:var(--bone) !important;
    padding:10px 20px;
    border-radius:100px;
    font-size:0.8rem !important;
  }
  @media(max-width:720px){
    nav.links a:not(.nav-cta){display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 6vw 80px;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(224,41,59,0.18), transparent 60%),
      linear-gradient(180deg, var(--void) 0%, var(--void-2) 60%, var(--void) 100%);
    overflow:hidden;
  }
  .hero-inner{
    max-width:1280px;
    width:100%;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:3rem;
    align-items:center;
    position:relative;
    z-index:2;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--crimson-bright);
    display:flex;align-items:center;gap:10px;
    margin-bottom:1.4rem;
  }
  .eyebrow::before{
    content:'';
    width:22px;height:1px;
    background:var(--crimson-bright);
  }
  h1.hero-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3.4rem, 8vw, 6.4rem);
    line-height:0.92;
    letter-spacing:0.01em;
    color:var(--bone);
    margin-bottom:1.6rem;
  }
  h1.hero-title em{
    font-style:normal;
    color:var(--crimson);
  }
  .hero-sub{
    font-size:1.15rem;
    line-height:1.6;
    color:var(--ash);
    max-width:460px;
    margin-bottom:2.4rem;
    font-weight:400;
  }
  .hero-sub b{color:var(--bone);font-weight:600;}
  .cta-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}
  .btn-primary{
    background:var(--crimson);
    color:var(--bone);
    border:none;
    padding:16px 30px;
    border-radius:100px;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.02em;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;align-items:center;gap:10px;
    box-shadow:0 8px 30px -6px rgba(224,41,59,0.6);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px -6px rgba(224,41,59,0.75);}
  .btn-store{
    background:var(--void-2);
    color:var(--bone);
    border:1px solid var(--line);
    padding:14px 26px 14px 20px;
    border-radius:14px;
    font-size:0.95rem;
    font-weight:600;
    cursor:not-allowed;
    text-decoration:none;
    display:inline-flex;align-items:center;gap:12px;
    transition:border-color .25s ease;
  }
  .btn-store:hover{border-color:rgba(224,41,59,0.5);}
  .btn-store .store-icon{
    width:26px;height:26px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:7px;
    background:var(--crimson);
  }
  .btn-store .store-icon svg{width:13px;height:13px;}
  .btn-store .store-icon-image{
    width:32px;height:32px;
    background:transparent;
    border-radius:0;
  }
  .btn-store .store-icon-image img{
    width:100%;height:100%;
    object-fit:contain;
    display:block;
  }
  .btn-store .store-copy{
    display:flex;flex-direction:column;
    align-items:flex-start;
    line-height:1.25;
  }
  .btn-store .store-copy .small{
    font-size:0.66rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ash);
  }
  .btn-store .store-copy .big{
    font-size:0.95rem;
    font-weight:700;
    color:var(--bone);
  }

  .btn-ghost{
    color:var(--bone);
    text-decoration:none;
    font-size:0.9rem;
    font-weight:600;
    display:inline-flex;align-items:center;gap:8px;
    border-bottom:1px solid var(--line);
    padding-bottom:2px;
  }

  /* phone mockups */
  .phone-stage{
    position:relative;
    height:640px;
    perspective:1600px;
  }
  .phone{
    position:absolute;
    width:250px;
    aspect-ratio:480/1050;
    border-radius:34px;
    background:#000;
    padding:8px;
    box-shadow:
      0 40px 80px -20px rgba(0,0,0,0.7),
      0 0 0 1px rgba(255,255,255,0.06);
    transform-style:preserve-3d;
    will-change:transform;
  }
  .phone .screen{
    width:100%;height:100%;
    border-radius:26px;
    background-size:cover;
    background-position:top center;
    overflow:hidden;
    position:relative;
  }
  .phone .notch{
    position:absolute;
    top:8px;left:50%;
    transform:translateX(-50%);
    width:70px;height:18px;
    background:#000;
    border-radius:100px;
    z-index:3;
  }
  .phone-a{
    right:6%;
    top:6%;
    z-index:3;
    transform:rotateY(-18deg) rotateX(6deg) rotateZ(2deg);
  }
  .phone-a .screen{
    background-image:url('hero-mockup.png.jpeg') !important;
  }
  .phone-b{
    left:2%;
    top:22%;
    z-index:2;
    transform:rotateY(-18deg) rotateX(6deg) rotateZ(2deg) translateZ(-60px);
    filter:brightness(0.55) saturate(0.8);
    opacity:0.85;
  }
  .thread{
    position:absolute;
    left:-40px; top:0;
    width:60px; height:100%;
    pointer-events:none;
    z-index:1;
  }
  @media(max-width:980px){
    .hero-inner{grid-template-columns:1fr;text-align:center;}
    .hero-sub{margin-left:auto;margin-right:auto;}
    .cta-row{justify-content:center;}
    .eyebrow{justify-content:center;}
    .phone-stage{height:420px;margin-top:2rem;}
    .phone{width:170px;}
  }

  /* ---------- STATEMENT ---------- */
  .statement{
    padding:9rem 6vw;
    text-align:center;
    position:relative;
  }
  .statement p{
    max-width:900px;
    margin:0 auto;
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(1.8rem, 4vw, 3.1rem);
    line-height:1.25;
    color:var(--ash);
    letter-spacing:0.01em;
  }
  .statement p b{color:var(--bone);font-weight:400;}
  .statement p .accent{color:var(--crimson);}

  /* ---------- FEATURES ---------- */
  .feature{
    position:relative;
    padding:7rem 6vw;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
    max-width:1320px;
    margin:0 auto;
  }
  .feature.reverse{grid-template-columns:1fr 1fr;}
  .feature.reverse .feature-text{order:2;}
  .feature.reverse .feature-visual{order:1;}

  .feature-text .eyebrow{margin-bottom:1.2rem;}
  .feature-text h2{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.2rem,4vw,3.2rem);
    line-height:1.05;
    color:var(--bone);
    margin-bottom:1.3rem;
    max-width:520px;
  }
  .feature-text p{
    color:var(--ash);
    font-size:1.05rem;
    line-height:1.7;
    max-width:460px;
    margin-bottom:1.6rem;
  }
  .tag-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
  .tag{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    padding:6px 12px;
    border-radius:100px;
    border:1px solid var(--line);
    color:var(--ash);
    letter-spacing:0.03em;
  }
  .tag.on{background:var(--crimson);border-color:var(--crimson);color:var(--bone);}

  .feature-visual{
    position:relative;
    height:560px;
    perspective:1600px;
    display:flex;align-items:center;justify-content:center;
  }
  .feature-visual .phone{
    width:270px;
    position:relative;
    opacity:0;
    transform:rotateY(24deg) rotateX(4deg) translateY(40px) scale(0.94);
    transition:opacity 1s cubic-bezier(.16,.9,.2,1), transform 1.1s cubic-bezier(.16,.9,.2,1);
  }
  .feature.reverse .feature-visual .phone{transform:rotateY(-24deg) rotateX(4deg) translateY(40px) scale(0.94);}
  .feature-visual.in-view .phone{
    opacity:1;
    transform:rotateY(14deg) rotateX(3deg) translateY(0) scale(1);
  }
  .feature.reverse .feature-visual.in-view .phone{transform:rotateY(-14deg) rotateX(3deg) translateY(0) scale(1);}

  .glow{
    position:absolute;
    width:340px;height:340px;
    background:radial-gradient(circle, rgba(224,41,59,0.25), transparent 70%);
    filter:blur(10px);
    z-index:0;
  }

  @media(max-width:900px){
    .feature, .feature.reverse{
      grid-template-columns:1fr;
      text-align:center;
      gap:2.5rem;
      padding:4.5rem 6vw;
    }
    .feature.reverse .feature-text{order:1;}
    .feature.reverse .feature-visual{order:2;}
    .feature-text p, .feature-text h2{margin-left:auto;margin-right:auto;}
    .tag-row{justify-content:center;}
    .feature-visual{height:420px;}
    .feature-visual .phone{width:200px;}
  }

  /* connecting thread down the page (desktop only) */
  .spine{
    position:absolute;
    left:50%;
    top:0;
    width:2px;
    height:100%;
    z-index:0;
    pointer-events:none;
  }

  /* ---------- CLOSING CTA ---------- */
  .closing{
    position:relative;
    padding:10rem 6vw 8rem;
    text-align:center;
    background:
      radial-gradient(ellipse 70% 50% at 50% 100%, rgba(224,41,59,0.2), transparent 60%),
      var(--void-2);
  }
  .closing h2{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(2.6rem,7vw,5rem);
    color:var(--bone);
    line-height:0.95;
    margin-bottom:1.2rem;
  }
  .closing h2 em{font-style:normal;color:var(--crimson);}
  .closing p{
    color:var(--ash);
    font-size:1.05rem;
    max-width:440px;
    margin:0 auto 2.4rem;
  }

  /* ---------- LEGAL PAGES ---------- */
  body.legal-page header{
    background:rgba(11,10,13,0.92);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px);
  }
  body.legal-page main{
    min-height:100vh;
    padding:150px 6vw 6rem;
    background:
      radial-gradient(ellipse 80% 45% at 50% 0%, rgba(224,41,59,0.14), transparent 62%),
      var(--void);
  }
  .legal-wrap{
    max-width:860px;
    margin:0 auto;
  }
  .legal-kicker{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    color:var(--crimson-bright);
    text-transform:uppercase;
    letter-spacing:0.16em;
    margin-bottom:1rem;
  }
  .legal-wrap h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3rem,7vw,5.4rem);
    line-height:0.95;
    color:var(--bone);
    margin-bottom:1rem;
  }
  .legal-updated{
    color:var(--ash-dim);
    font-size:0.9rem;
    margin-bottom:3rem;
  }
  .legal-content{
    display:grid;
    gap:2rem;
  }
  .legal-content section{
    padding-top:2rem;
    border-top:1px solid var(--line);
  }
  .legal-content h2{
    font-family:'Bebas Neue',sans-serif;
    font-size:2rem;
    color:var(--bone);
    letter-spacing:0.02em;
    margin-bottom:0.8rem;
  }
  .legal-content p,
  .legal-content li{
    color:var(--ash);
    font-size:1rem;
    line-height:1.75;
  }
  .legal-content ul{
    padding-left:1.2rem;
    display:grid;
    gap:0.55rem;
  }
  .legal-content a{
    color:var(--bone);
    text-decoration-color:rgba(224,41,59,0.7);
  }

  footer{
    padding:3rem 6vw;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--line);
    gap:1.5rem;
  }
  footer .logo{font-size:1.1rem;}
  footer .fine{color:var(--ash-dim);font-size:0.8rem;text-align:right;}
  footer .flinks{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;}
  footer .flinks a{font-size:0.8rem;color:var(--ash);text-decoration:none;}
  footer .flinks a:hover{color:var(--bone);}

  @media(max-width:720px){
    body.legal-page main{padding-top:125px;}
    .legal-content h2{font-size:1.65rem;}
    footer{
      grid-template-columns:1fr;
      justify-items:center;
      padding:2.5rem 6vw;
      text-align:center;
    }
    footer .fine{text-align:center;}
  }

  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .9s ease, transform .9s ease;
  }
  .reveal.in-view{opacity:1;transform:translateY(0);}