:root{
    --bg:#0a0a0d;
    --bg-2:#0d0d11;
    --surface:#16161c;
    --surface-2:#1e1e26;
    --border:#2a2a33;
    --text:#f3f1ea;
    --text-dim:#9a98a3;
    --text-faint:#605e6a;
    --red:#ff2e2e;
    --red-dim:#ff2e2e22;
    --yellow:#ffd23f;
    --green:#3ddc84;
    --font-display:'Anton', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --radius:20px;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

  ::selection{background:var(--red);color:#fff;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* subtle grain / vignette on body */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(ellipse 900px 500px at 15% -5%, #ff2e2e14, transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, #ffd23f0f, transparent 55%);
  }

  /* fixed grid-line texture overlay */
  .bg-grid{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(243,241,234,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(243,241,234,.05) 1px, transparent 1px);
    background-size:46px 46px;
    -webkit-mask-image:radial-gradient(ellipse 85% 55% at 50% 0%, #000 35%, transparent 88%);
    mask-image:radial-gradient(ellipse 85% 55% at 50% 0%, #000 35%, transparent 88%);
  }

  /* fixed film-grain noise overlay */
  .bg-noise{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
    background-size:180px 180px;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky;
    top:16px;
    z-index:100;
    padding:0 20px;
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:64px;
    max-width:1180px;
    margin:0 auto;
    padding:0 14px 0 22px;
    background:rgba(17,17,21,0.78);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:100px;
    box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
    transition:border-color .3s ease;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-display);
    font-size:19px;
    letter-spacing:0.5px;
  }
  .rec-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--red);
    box-shadow:0 0 0 0 rgba(255,46,46,.6);
    animation:pulse 2.2s infinite;
    flex-shrink:0;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(255,46,46,.55);}
    70%{box-shadow:0 0 0 8px rgba(255,46,46,0);}
    100%{box-shadow:0 0 0 0 rgba(255,46,46,0);}
  }
  .brand span.sub{
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--text-faint);
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:500;
  }
  nav.links{
    display:flex;
    align-items:center;
    gap:36px;
  }
  nav.links a{
    font-size:14px;
    font-weight:600;
    color:var(--text-dim);
    transition:color .2s ease;
    position:relative;
  }
  nav.links a:hover{color:var(--text);}
  .cta-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--red);
    color:#fff;
    font-weight:700;
    font-size:13.5px;
    padding:10px 18px;
    border-radius:100px;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .cta-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 22px -6px rgba(255,46,46,.55);
  }
  .cta-btn.ghost{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
  }
  .cta-btn.ghost:hover{border-color:var(--text-dim);box-shadow:none;}

  .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
  }
  .burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.25s;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    z-index:1;
    padding:100px 0 70px;
    text-align:center;
    overflow:hidden;
  }
  .hero .wrap{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* single soft glow behind hero copy */
  .hero-aurora{
    position:absolute;
    inset:-15% -10% auto -10%;
    height:560px;
    z-index:0;
    pointer-events:none;
    filter:blur(90px);
    opacity:.35;
  }
  .hero-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;}
  .hero-aurora span:nth-child(1){
    width:480px;height:480px;top:-130px;left:50%;
    transform:translateX(-50%);
    background:radial-gradient(circle, var(--red), transparent 70%);
    animation:aurora-drift-1 20s ease-in-out infinite;
  }
  @keyframes aurora-drift-1{
    0%,100%{transform:translateX(-50%) translateY(0) scale(1);}
    50%{transform:translateX(-50%) translateY(18px) scale(1.08);}
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--green);
    background:#3ddc8414;
    border:1px solid #3ddc8433;
    padding:7px 14px;
    border-radius:100px;
    margin-bottom:28px;
    opacity:0;
    animation:fadeUp .7s ease forwards;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

  h1.headline{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(42px, 7.2vw, 92px);
    line-height:0.96;
    letter-spacing:0.5px;
    max-width:920px;
    margin:0 auto;
    opacity:0;
    animation:fadeUp .7s ease .08s forwards;
  }
  h1.headline .accent{color:var(--red);}
  h1.headline .stroke{
    -webkit-text-stroke:1.5px var(--text);
    color:transparent;
  }

  h1.headline .glow{
    position:relative;
    display:inline-block;
    color:var(--red);
    text-shadow:
      0 0 8px rgba(255,46,46,.4),
      0 0 20px rgba(255,46,46,.22);
    animation:glow-pulse 3s ease-in-out infinite;
  }
  @keyframes glow-pulse{
    0%, 100%{
      text-shadow:
        0 0 8px rgba(255,46,46,.4),
        0 0 20px rgba(255,46,46,.22);
    }
    50%{
      text-shadow:
        0 0 12px rgba(255,46,46,.55),
        0 0 28px rgba(255,46,46,.3);
    }
  }

  .hero-actions{
    display:flex;
    gap:14px;
    margin-top:36px;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation:fadeUp .7s ease .24s forwards;
  }
  .hero-actions .cta-btn{padding:14px 26px;font-size:15px;}

  @keyframes fadeUp{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* social-proof strip: avatar stack + rating */
  .trust-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:30px;
    opacity:0;
    animation:fadeUp .7s ease .34s forwards;
  }
  .trust-avatars{display:flex;}
  .trust-avatars img{
    width:32px;height:32px;
    border-radius:50%;
    border:2px solid var(--bg);
    margin-left:-10px;
    display:block;
    object-fit:cover;
    box-shadow:0 2px 8px rgba(0,0,0,.4);
  }
  .trust-avatars img:first-child{margin-left:0;}
  .trust-rating{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }
  .trust-stars{color:var(--yellow);font-size:13px;letter-spacing:1px;}
  .trust-text{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--text-dim);
    letter-spacing:.3px;
  }

  /* scarcity badge */
  .scarcity-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:600;
    letter-spacing:.4px;
    color:#e8b33d;
    background:#e8b33d16;
    border:1px solid #e8b33d3d;
    padding:8px 16px;
    border-radius:100px;
    margin-top:20px;
    opacity:0;
    animation:fadeUp .7s ease .42s forwards;
  }
  .scarcity-badge .pulse-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:#e8b33d;
    flex-shrink:0;
    box-shadow:0 0 0 0 rgba(232,179,61,.6);
    animation:pulse-red-badge 2s infinite;
  }
  @keyframes pulse-red-badge{
    0%{box-shadow:0 0 0 0 rgba(232,179,61,.55);}
    70%{box-shadow:0 0 0 8px rgba(232,179,61,0);}
    100%{box-shadow:0 0 0 0 rgba(232,179,61,0);}
  }

  /* channel-style stat row */
  .stat-row{
    display:flex;
    width:100%;
    gap:32px;
    margin-top:52px;
    border-top:1px solid var(--border);
    padding-top:28px;
    flex-wrap:wrap;
    justify-content:center;
    opacity:0;
    animation:fadeUp .7s ease .5s forwards;
  }
  .stat{
    flex:1 1 140px;
    max-width:180px;
    text-align:center;
  }
  .stat .num{
    font-family:var(--font-display);
    font-size:clamp(26px,3.4vw,38px);
    color:var(--text);
    text-transform:uppercase;
  }
  .stat .num .u{color:var(--red);}
  .stat .lbl{
    font-family:var(--font-mono);
    font-size:11.5px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--text-faint);
    margin-top:6px;
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{
    position:relative;
    z-index:1;
    padding:96px 0;
    border-top:1px solid var(--border);
  }
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:52px;
    flex-wrap:wrap;
  }
  .tab-label{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .tab-label::before{
    content:"";
    width:16px;height:2px;
    background:var(--red);
    display:inline-block;
  }
  h2.section-title{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-weight:400;
    font-size:clamp(30px,4vw,48px);
    line-height:1;
  }
  .section-desc{
    color:var(--text-dim);
    font-size:15.5px;
    max-width:360px;
  }

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

  /* ---------- PORTFOLIO GRID ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:32px 28px;
  }

  .see-more{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:36px;
    padding:22px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    transition:border-color .25s ease, background .25s ease, transform .2s ease;
  }
  .see-more:hover{
    border-color:var(--red);
    background:var(--surface-2);
    transform:translateY(-2px);
  }
  .see-more-text{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-size:17px;
    letter-spacing:0.6px;
  }
  .see-more-arrow{
    font-size:18px;
    color:var(--red);
    transition:transform .25s ease;
  }
  .see-more:hover .see-more-arrow{transform:translateX(6px);}

  .card{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .thumb{
    position:relative;
    aspect-ratio:16/9;
    border-radius:10px;
    overflow:visible;
    cursor:pointer;
    border:1px solid var(--border);
    isolation:isolate;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  }
  .thumb:hover{
    transform:scale(1.045);
    box-shadow:
      0 0 8px 1px rgba(57,255,140,.75),
      0 0 18px 2px rgba(57,255,140,.4);
    z-index:5;
  }
  .thumb-art{
    position:absolute;inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    text-transform:uppercase;
    text-align:center;
    padding:14px;
    border-radius:10px;
    overflow:hidden;
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .thumb-art .big{
    font-size:clamp(26px,3.4vw,40px);
    line-height:0.92;
    text-shadow:0 6px 22px rgba(0,0,0,.35);
  }
  .thumb-art img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    padding:0;
  }
  .thumb-art.has-img{padding:0;}

  .thumb-art .tiny{
    position:absolute;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:11px;
    letter-spacing:1px;
    padding:4px 9px;
    border-radius:5px;
    top:10px;left:10px;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px);
  }
  .duration{
    position:absolute;
    bottom:8px;right:8px;
    background:rgba(0,0,0,.78);
    color:#fff;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    padding:2px 6px;
    border-radius:4px;
    z-index:3;
  }

  .card-meta{
    display:flex;
    gap:11px;
    padding:0 2px;
  }
  .avatar{
    width:34px;height:34px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg,var(--red),var(--yellow));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);
    font-size:14px;
    color:#0a0a0d;
  }
  .card-title{
    font-size:14.5px;
    font-weight:600;
    color:var(--text);
    line-height:1.35;
  }
  .card-sub{
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--text-faint);
    margin-top:4px;
  }
  .card-sub .lift{color:var(--red);font-weight:600;}

  /* ---------- PROCESS ---------- */
  .proc-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .proc-card{
    position:relative;
    background:
      radial-gradient(ellipse 260px 160px at 100% 0%, #ff2e2e1c, transparent 65%),
      var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:54px 26px 28px;
    overflow:hidden;
    transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .proc-card:hover{
    border-color:#ff2e2e55;
    transform:translateY(-3px);
    box-shadow:0 18px 40px -20px rgba(255,46,46,.35);
  }
  .proc-num{
    position:absolute;
    top:20px;
    right:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:11.5px;
    letter-spacing:.5px;
    color:var(--text-dim);
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:100px;
    padding:5px 12px;
    user-select:none;
  }
  .proc-illustration{
    position:relative;
    width:100%;
    height:90px;
    margin-bottom:22px;
    border-radius:10px;
    background:
      radial-gradient(ellipse 140px 70px at 50% 118%, #ff2e2e40, transparent 70%),
      radial-gradient(ellipse 90px 50px at 78% -10%, #ffd23f22, transparent 70%),
      var(--bg-2);
    border:1px solid var(--border);
    overflow:hidden;
  }
  .proc-illustration svg{width:100%;height:100%;display:block;}

  /* --- illustration 1: researching what's working on YouTube --- */
  .yr-card{fill:var(--surface-2);stroke:var(--border);stroke-width:1.5;}
  .yr-card-target{
    transform-box:fill-box;
    transform-origin:50% 50%;
    animation:yr-card-pop 3.6s ease-in-out infinite, yr-card-glow 3.6s ease-in-out infinite;
  }
  .yr-play{fill:var(--red);opacity:.55;}
  .yr-card-target + .yr-play{
    opacity:1;
    animation:yr-play-glow 3.6s ease-in-out infinite;
  }
  @keyframes yr-play-glow{
    0%,40%{filter:drop-shadow(0 0 0 rgba(255,46,46,0));}
    50%{filter:drop-shadow(0 0 6px rgba(255,46,46,.9));}
    60%,100%{filter:drop-shadow(0 0 0 rgba(255,46,46,0));}
  }
  .yr-ring{
    fill:none;stroke:var(--red);stroke-width:1.5;opacity:0;
    transform-box:view-box;transform-origin:0 0;
    filter:drop-shadow(0 0 6px rgba(255,46,46,.65));
    animation:yr-ring 3.6s ease-out infinite;
  }
  .yr-spark path{stroke:var(--yellow);stroke-width:2;stroke-linecap:round;}
  .yr-spark{
    transform-box:view-box;transform-origin:137px 15px;opacity:0;
    filter:drop-shadow(0 0 5px rgba(255,210,63,.7));
    animation:yr-spark 3.6s ease-out infinite;
  }
  @keyframes yr-card-glow{
    0%,40%{filter:drop-shadow(0 0 0 rgba(255,46,46,0));}
    50%{filter:drop-shadow(0 0 10px rgba(255,46,46,.75)) drop-shadow(0 0 22px rgba(255,46,46,.4));}
    60%,100%{filter:drop-shadow(0 0 0 rgba(255,46,46,0));}
  }
  .yr-cursor{
    fill:var(--text);
    transform-box:fill-box;transform-origin:0% 0%;
    animation:yr-hop 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
  }
  @keyframes yr-hop{
    0%,4%{transform:translate(30px,34px) scale(1);opacity:1;}
    10%{transform:translate(48px,20px) scale(1.05,0.95);opacity:1;}
    18%{transform:translate(80px,34px) scale(0.92,1.08);opacity:1;}
    22%{transform:translate(80px,34px) scale(1);opacity:1;}
    30%{transform:translate(98px,18px) scale(1.05,0.95);opacity:1;}
    40%{transform:translate(130px,34px) scale(0.9,1.1);opacity:1;}
    44%{transform:translate(130px,34px) scale(1.15);opacity:1;}
    48%,82%{transform:translate(130px,34px) scale(1);opacity:1;}
    90%{transform:translate(130px,34px) scale(0.85);opacity:1;}
    94%{transform:translate(130px,34px) scale(0.85);opacity:0;}
    96%{transform:translate(30px,34px) scale(0.85);opacity:0;}
    100%{transform:translate(30px,34px) scale(1);opacity:1;}
  }
  @keyframes yr-card-pop{
    0%,40%{transform:scale(1);}
    46%{transform:scale(1.06,0.94);}
    52%{transform:scale(0.97,1.04);}
    58%,100%{transform:scale(1);}
  }
  @keyframes yr-ring{
    0%,40%{opacity:0;transform:translate(137px,45px) scale(0.4);}
    44%{opacity:.8;transform:translate(137px,45px) scale(1);}
    56%,100%{opacity:0;transform:translate(137px,45px) scale(1.3);}
  }
  @keyframes yr-spark{
    0%,44%{opacity:0;transform:scale(0.3) rotate(0deg);}
    50%{opacity:1;transform:scale(1.2) rotate(8deg);}
    58%{opacity:1;transform:scale(1) rotate(0deg);}
    68%{opacity:0;transform:scale(1) rotate(0deg);}
    100%{opacity:0;transform:scale(1) rotate(0deg);}
  }

  /* --- illustration 2: the app dock (glowing icon-panel style) --- */
  .dock-panel{
    fill:var(--surface-2);stroke:var(--border);stroke-width:1.5;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
  }
  .dock-icon-a{fill:#001e36;stroke:#1f6fa8;stroke-width:1;}
  .dock-icon-a-label{
    fill:#31c5f0;font-family:var(--font-display);font-weight:400;font-size:13px;
    text-anchor:middle;dominant-baseline:middle;
  }
  .dock-icon-b{fill:#f2f0ea;stroke:var(--border);stroke-width:1;}
  .dock-icon-b-ring{fill:none;stroke:#e8830d;stroke-width:2.2;}
  .dock-icon-b-dot{fill:#2b4c6b;}
  .dock-icon-b-swoosh{fill:none;stroke:#e8830d;stroke-width:2.3;stroke-linecap:round;}
  .dock-icon-target{
    fill:#fa0f00;stroke:#4d7fd9;stroke-width:1;
    animation:dock-glow 3.6s ease-in-out infinite;
  }
  .dock-icon-target-mark{fill:#fff;}
  .dock-ring{
    fill:none;stroke:var(--red);stroke-width:1.5;opacity:0;
    transform-box:view-box;transform-origin:0 0;
    filter:drop-shadow(0 0 6px rgba(255,46,46,.65));
    animation:dock-ring 3.6s ease-out infinite;
  }
  .dock-spark path{stroke:var(--yellow);stroke-width:2;stroke-linecap:round;}
  .dock-spark{
    transform-box:view-box;transform-origin:145px 24px;opacity:0;
    filter:drop-shadow(0 0 5px rgba(255,210,63,.7));
    animation:dock-spark 3.6s ease-out infinite;
  }
  .dock-cursor{
    fill:var(--text);
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
    transform-box:fill-box;transform-origin:0% 0%;
    animation:dock-hop 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
  }
  @keyframes dock-glow{
    0%,38%{filter:drop-shadow(0 0 0 rgba(255,46,46,0));}
    46%{filter:drop-shadow(0 0 10px rgba(255,46,46,.85)) drop-shadow(0 0 22px rgba(255,46,46,.45));}
    58%,100%{filter:drop-shadow(0 0 0 rgba(255,46,46,0));}
  }
  @keyframes dock-ring{
    0%,38%{opacity:0;transform:translate(145px,45px) scale(0.4);}
    44%{opacity:.8;transform:translate(145px,45px) scale(1);}
    58%,100%{opacity:0;transform:translate(145px,45px) scale(1.4);}
  }
  @keyframes dock-spark{
    0%,40%{opacity:0;transform:scale(0.3) rotate(0deg);}
    46%{opacity:1;transform:scale(1.2) rotate(10deg);}
    54%{opacity:1;transform:scale(1) rotate(0deg);}
    64%{opacity:0;transform:scale(1) rotate(0deg);}
    100%{opacity:0;transform:scale(1) rotate(0deg);}
  }
  @keyframes dock-hop{
    0%,8%{transform:translate(54px,72px) scale(1);opacity:1;}
    16%{transform:translate(88px,54px) scale(1.05,0.95);opacity:1;}
    26%{transform:translate(122px,70px) scale(0.92,1.08);opacity:1;}
    34%{transform:translate(150px,58px) scale(1);opacity:1;}
    40%{transform:translate(150px,58px) scale(0.8);opacity:1;}
    46%{transform:translate(150px,58px) scale(1.15);opacity:1;}
    52%,84%{transform:translate(150px,58px) scale(1);opacity:1;}
    90%{transform:translate(150px,58px) scale(0.85);opacity:0;}
    94%{transform:translate(54px,72px) scale(0.85);opacity:0;}
    100%{transform:translate(54px,72px) scale(1);opacity:1;}
  }

  /* --- illustration 3: delivered via DMs, then the CTR climbs --- */
  .dm-bubble-out{
    opacity:0;transform-box:fill-box;transform-origin:50% 100%;
    animation:dm-bubble-out 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
  }
  .dm-bubble-out rect{fill:var(--surface-2);stroke:var(--text-dim);stroke-width:1.5;}
  .dm-thumb{fill:var(--surface);stroke:var(--border);stroke-width:1;}
  .dm-thumb-play{fill:var(--red);opacity:.7;}
  .dm-check{
    opacity:0;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;
    transform-box:view-box;transform-origin:0 0;
    filter:drop-shadow(0 0 5px rgba(61,220,132,.7));
    animation:dm-check 3.6s ease-out infinite;
  }
  .dm-bubble-in{
    opacity:0;transform-box:fill-box;transform-origin:50% 0%;
    filter:drop-shadow(0 0 8px rgba(255,46,46,.4));
    animation:dm-bubble-in 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
  }
  .dm-bubble-in rect{fill:var(--red-dim);stroke:var(--red);stroke-width:1.5;}
  .dm-thumbsup{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .dl-screen{
    fill:var(--surface-2);stroke:var(--border);stroke-width:1.5;
    opacity:0;transform-box:fill-box;transform-origin:0% 50%;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
    animation:dl-screen-in 3.6s ease-out infinite;
  }
  .dl-graph-line{
    stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;
    stroke-dasharray:80;stroke-dashoffset:80;opacity:0;
    filter:drop-shadow(0 0 5px rgba(61,220,132,.65));
    animation:dl-draw 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
  }
  .dl-ping{
    fill:var(--green);opacity:0;
    transform-box:fill-box;transform-origin:50% 50%;
    filter:drop-shadow(0 0 8px rgba(61,220,132,.8));
    animation:dl-ping 3.6s ease-in-out infinite;
  }
  .dl-ctr-label{
    font-family:var(--font-mono);font-size:11px;font-weight:600;fill:var(--green);opacity:0;
    transform-box:fill-box;transform-origin:50% 50%;
    animation:dl-label 3.6s cubic-bezier(.34,1.56,.64,1) infinite;
  }
  @keyframes dm-bubble-out{
    0%,6%{opacity:0;transform:translateY(14px) scale(0.8);}
    16%{opacity:1;transform:translateY(0) scale(1.08);}
    20%,90%{opacity:1;transform:translateY(0) scale(1);}
    94%{opacity:0;transform:translateY(14px) scale(0.8);}
    100%{opacity:0;transform:translateY(14px) scale(0.8);}
  }
  @keyframes dm-check{
    0%,20%{opacity:0;transform:scale(0.5);}
    26%{opacity:1;transform:scale(1.15);}
    30%,90%{opacity:1;transform:scale(1);}
    94%{opacity:0;transform:scale(0.5);}
    100%{opacity:0;transform:scale(0.5);}
  }
  @keyframes dm-bubble-in{
    0%,32%{opacity:0;transform:translateY(10px) scale(0.8);}
    42%{opacity:1;transform:translateY(0) scale(1.1);}
    46%,90%{opacity:1;transform:translateY(0) scale(1);}
    94%{opacity:0;transform:translateY(10px) scale(0.8);}
    100%{opacity:0;transform:translateY(10px) scale(0.8);}
  }
  @keyframes dl-screen-in{
    0%,48%{opacity:0;transform:translateX(6px);}
    54%{opacity:1;transform:translateX(0);}
    90%{opacity:1;transform:translateX(0);}
    94%{opacity:0;transform:translateX(6px);}
    100%{opacity:0;transform:translateX(6px);}
  }
  @keyframes dl-draw{
    0%,56%{stroke-dashoffset:80;opacity:0;}
    60%{opacity:1;}
    78%,90%{stroke-dashoffset:0;opacity:1;}
    94%{stroke-dashoffset:0;opacity:0;}
    100%{stroke-dashoffset:80;opacity:0;}
  }
  @keyframes dl-ping{
    0%,60%{opacity:0;transform:scale(1);}
    66%,74%{opacity:1;transform:scale(1.3);}
    84%,100%{opacity:0;transform:scale(1);}
  }
  @keyframes dl-label{
    0%,64%{opacity:0;transform:translateY(4px) scale(0.6);}
    72%{opacity:1;transform:translateY(0) scale(1.15);}
    78%,90%{opacity:1;transform:translateY(0) scale(1);}
    94%,100%{opacity:0;transform:translateY(4px) scale(0.6);}
  }

  .proc-card h3{
    font-family:var(--font-body);
    font-size:19px;
    font-weight:700;
    margin-bottom:8px;
    position:relative;
  }
  .proc-card p{
    color:var(--text-dim);
    font-size:14.5px;
    margin-bottom:18px;
    position:relative;
  }
  .proc-tag{
    display:inline-flex;
    align-items:center;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.6px;
    color:var(--red);
    background:var(--red-dim);
    border:1px solid #ff2e2e33;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:100px;
    position:relative;
  }

  /* ---------- TESTIMONIALS (comment style) ---------- */
  .comments{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .comment{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .comment-head{
    display:flex;
    gap:11px;
    align-items:center;
  }
  .comment-head .avatar{width:32px;height:32px;font-size:13px;}
  .c-name{font-size:13.5px;font-weight:700;}
  .c-handle{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
  .comment-body{font-size:14px;color:var(--text-dim);line-height:1.55;}
  .comment-foot{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:var(--font-mono);
    font-size:11.5px;
    color:var(--text-faint);
  }
  .comment-foot .likes{display:flex;align-items:center;gap:5px;}

  /* ---------- PRICING ---------- */
  .pricing-grid{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:28px;
    align-items:stretch;
    max-width:900px;
    margin:0 auto;
  }
  .price-card{
    background:
      radial-gradient(ellipse 220px 140px at 100% 0%, #ff2e2e14, transparent 65%),
      var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:32px 26px;
    display:flex;
    flex-direction:column;
    position:relative;
    transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .price-card:hover{
    transform:translateY(-4px);
    border-color:#ff2e2e55;
    box-shadow:0 18px 40px -20px rgba(255,46,46,.3);
  }
  .price-card.featured{
    border-color:var(--red);
    padding:42px 34px 36px;
    margin-top:-16px;
    margin-bottom:-16px;
    box-shadow:0 20px 50px -20px rgba(255,46,46,.35);
    background:
      radial-gradient(ellipse 260px 160px at 100% 0%, #ff2e2e26, transparent 65%),
      linear-gradient(180deg, #1a1214, var(--surface) 40%);
  }
  .price-per-unit{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--text-faint);
    margin-bottom:16px;
  }
  .price-per-unit-good{
    display:inline-block;
    color:var(--green);
    font-weight:600;
    background:#3ddc8416;
    border:1px solid #3ddc843d;
    padding:6px 12px;
    border-radius:8px;
  }
  .price-reassure{
    margin-top:12px;
    text-align:center;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.3px;
    color:var(--text-faint);
  }
  .pricing-footnote{
    margin-top:30px;
    text-align:center;
    font-size:13.5px;
    color:var(--text-dim);
  }
  .pricing-footnote a{color:var(--red);font-weight:600;}
  .pricing-footnote a:hover{text-decoration:underline;}
  .price-tag{
    position:absolute;
    top:-12px;right:24px;
    background:var(--red);
    color:#fff;
    font-family:var(--font-mono);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.6px;
    padding:5px 11px;
    border-radius:100px;
    text-transform:uppercase;
  }
  .price-name{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-faint);
    margin-bottom:10px;
  }
  .price-amount{
    font-family:var(--font-display);
    font-size:44px;
    text-transform:uppercase;
    margin-bottom:4px;
  }
  .price-amount span{font-size:15px;color:var(--text-faint);font-family:var(--font-mono);text-transform:none;}
  .price-desc{color:var(--text-dim);font-size:13.5px;margin-bottom:22px;}
  .price-features{
    display:flex;
    flex-direction:column;
    gap:11px;
    margin-bottom:26px;
    flex:1;
  }
  .price-features li{
    display:flex;
    gap:9px;
    font-size:13.5px;
    color:var(--text);
    align-items:flex-start;
  }
  .price-features li::before{
    content:"";
    width:14px;height:14px;
    margin-top:2px;
    flex-shrink:0;
    background:var(--yellow);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" stroke="black" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" stroke="black" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  }
  .price-features li.bonus{color:var(--yellow);font-weight:600;}
  .price-features li.bonus::before{background:var(--yellow);}
  .price-features-missing{margin-top:-6px;}
  .price-features-missing li{color:var(--text-faint);}
  .price-features-missing li::before{
    background:var(--text-faint);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="black" stroke-width="3" fill="none" stroke-linecap="round"/></svg>') center/contain no-repeat;
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12" stroke="black" stroke-width="3" fill="none" stroke-linecap="round"/></svg>') center/contain no-repeat;
  }
  .price-card .cta-btn{justify-content:center;width:100%;}

  /* ---------- CONTACT / FOOTER ---------- */
  .contact{
    text-align:center;
    padding:100px 0 60px;
  }
  .contact h2{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-size:clamp(34px,6vw,68px);
    line-height:0.98;
    max-width:820px;
    margin:0 auto 26px;
  }
  .contact h2 .accent{color:var(--red);}
  .contact p{
    color:var(--text-dim);
    font-size:16px;
    max-width:460px;
    margin:0 auto 36px;
  }
  .contact-actions{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .contact-actions .cta-btn{padding:15px 30px;font-size:15px;}

  /* ---------- CONTACT PANELS ---------- */
  .contact-panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-top:52px;
    text-align:left;
  }
  .contact-panel{
    background:
      radial-gradient(ellipse 240px 150px at 100% 0%, #ff2e2e14, transparent 65%),
      var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:34px 32px;
  }
  .contact-panel h3{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-size:22px;
    letter-spacing:.3px;
    margin-bottom:6px;
  }
  .contact-panel .panel-sub{
    color:var(--text-dim);
    font-size:14px;
    margin-bottom:26px;
  }
  .form-field{margin-bottom:16px;}
  .form-field label{
    display:block;
    font-family:var(--font-mono);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--text-faint);
    margin-bottom:7px;
  }
  .form-field input,
  .form-field select{
    width:100%;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 14px;
    color:var(--text);
    font-family:var(--font-body);
    font-size:14.5px;
    outline:none;
    transition:border-color .2s ease;
  }
  .form-field input:focus,
  .form-field select:focus{border-color:var(--red);}
  .form-field select{
    appearance:none;-webkit-appearance:none;
    cursor:pointer;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="%237a7a85" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:38px;
  }
  #contactForm .cta-btn{
    width:100%;
    justify-content:center;
    margin-top:6px;
    border:none;
    cursor:pointer;
  }
  .form-note{
    margin-top:12px;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--text-faint);
    text-align:center;
  }
  .social-list{display:flex;flex-direction:column;gap:12px;}
  .social-link{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:var(--bg-2);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
    transition:border-color .2s ease, transform .2s ease;
  }
  .social-link:hover{border-color:#ff2e2e55;transform:translateX(4px);}
  .social-link .s-icon{
    width:20px;height:20px;flex-shrink:0;
    color:var(--red);
  }
  .social-link .s-icon svg{width:100%;height:100%;}
  .social-link .s-label{font-weight:600;font-size:14.5px;}
  .social-link .s-handle{
    margin-left:auto;
    color:var(--text-faint);
    font-family:var(--font-mono);
    font-size:12.5px;
  }

  footer{
    border-top:1px solid var(--border);
    padding:34px 0;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-inner .brand{font-size:15px;}
  .foot-links{
    display:flex;
    gap:26px;
  }
  .foot-links a{
    font-size:13px;
    color:var(--text-faint);
    transition:color .2s;
  }
  .foot-links a:hover{color:var(--text);}
  .foot-note{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--text-faint);
  }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    position:fixed;inset:0;
    z-index:1000;
    background:rgba(6,6,8,.9);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .lightbox.open{opacity:1;pointer-events:auto;}
  .lightbox-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    max-width:640px;
    width:100%;
    overflow:hidden;
    transform:scale(.94);
    transition:transform .3s ease;
    max-height:88vh;
    overflow-y:auto;
  }
  .lightbox.open .lightbox-panel{transform:scale(1);}
  .lightbox-close{
    position:absolute;
    top:26px;right:26px;
    width:40px;height:40px;
    border-radius:50%;
    background:var(--surface);
    border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    z-index:5;
  }
  .lb-thumb{aspect-ratio:16/9;position:relative;}
  .lb-body{padding:26px 28px 30px;}
  .lb-body h3{font-size:19px;font-weight:700;margin-bottom:10px;}
  .lb-body p{color:var(--text-dim);font-size:14.5px;margin-bottom:16px;}
  .lb-ctr{
    display:inline-flex;
    align-items:baseline;
    gap:9px;
    background:#3ddc8416;
    border:1px solid #3ddc843d;
    padding:10px 18px;
    border-radius:100px;
  }
  .lb-ctr-num{font-family:var(--font-display);font-size:24px;color:var(--green);}
  .lb-ctr-label{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    .grid{grid-template-columns:repeat(2,1fr);}
    .proc-grid{grid-template-columns:1fr 1fr;}
    .comments{grid-template-columns:1fr 1fr;}
    .pricing-grid{grid-template-columns:1fr 1fr;}
  }

  @media (max-width:780px){
    .wrap{padding:0 20px;}
    nav.links{
      position:fixed;
      top:88px;left:20px;right:20px;
      background:var(--bg-2);
      border:1px solid var(--border);
      border-radius:20px;
      flex-direction:column;
      align-items:flex-start;
      gap:0;
      padding:8px 20px 20px;
      transform:translateY(-140%);
      transition:transform .3s ease;
      z-index:99;
    }
    nav.links.open{transform:translateY(0);}
    nav.links a{padding:14px 0;width:100%;border-bottom:1px solid var(--border);}
    nav.links .cta-btn{margin-top:14px;width:100%;justify-content:center;}
    .burger{display:flex;}
    .hero{padding:56px 0 46px;}
    .stat-row{margin-top:44px;gap:14px;}
    .stat{flex:1 1 0;min-width:0;max-width:none;margin-bottom:0;}
    .section{padding:64px 0;}
    .grid{grid-template-columns:1fr 1fr;gap:20px;}
    .comments{grid-template-columns:1fr;}
    .pricing-grid{grid-template-columns:1fr;}
    .price-card.featured{margin-top:0;margin-bottom:0;padding:32px 26px;}
    .contact-panels{grid-template-columns:1fr;}
    .proc-grid{grid-template-columns:1fr;}
    .proc-num{font-size:48px;}
    .section-head{flex-direction:column;align-items:flex-start;}
  }

  @media (max-width:520px){
    .grid{grid-template-columns:1fr;}
    h1.headline{font-size:clamp(36px,11vw,56px);}
    .footer-inner{flex-direction:column;align-items:flex-start;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

  /* ---------- CTR CURSOR TRAIL ---------- */
  .cursor-ctr{
    position:fixed;
    top:0;left:0;
    pointer-events:none;
    z-index:9999;
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-family:var(--font-mono);
    font-weight:700;
    white-space:nowrap;
    padding:3px 8px;
    border-radius:100px;
    background:rgba(10,10,13,.82);
    backdrop-filter:blur(2px);
    will-change:transform, opacity;
    animation:ctr-float 1.15s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .cursor-ctr.up{
    color:var(--green);
    border:1px solid rgba(61,220,132,.5);
    box-shadow:0 0 10px rgba(61,220,132,.25);
  }
  .cursor-ctr.down{
    color:var(--red);
    border:1px solid rgba(255,46,46,.5);
    box-shadow:0 0 10px rgba(255,46,46,.22);
  }
  @keyframes ctr-float{
    0%{transform:translate(-50%,-50%) translate(0,0) scale(.5); opacity:.95;}
    55%{opacity:.85;}
    100%{transform:translate(-50%,-50%) translate(var(--dx), -60px) scale(1); opacity:0;}
  }

/* Static declarations extracted from the original HTML templates. */
.lb-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}