:root, [data-theme="dark"]{
    --bg:#212121;
    --bg-2:#2a2a2a;
    --bg-3:#333333;
    --bg-outer:#1a1a1a;
    --ink:#ffffff;
    --ink-2:#f5f5f5;
    --ink-dim:#d0d0d0;
    --ink-faint:#8a8a8a;
    --accent:#ff0033;
    --accent-hover:#ff1f4d;
    --accent-warm:#e8c98a;
    --line:rgba(255,255,255,0.16);
    --line-2:rgba(255,255,255,0.30);
    --shadow-card:0 30px 80px -20px rgba(0,0,0,0.7);
    --grain-opacity:0.04;
    --grain-blend:overlay;
    --atmosphere-1:rgba(255,0,51,0.06);
    --atmosphere-2:rgba(232,201,138,0.03);
    --maxw:1380px;
    --gutter:clamp(20px,3vw,48px);
    --font-system:'Inter',ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  }

  [data-theme="light"]{
    --bg:#ffffff;
    --bg-2:#f7f7f7;
    --bg-3:#ededed;
    --bg-outer:#ffffff;
    --ink:#212121;
    --ink-2:#2c2c2c;
    --ink-dim:#5a5a5a;
    --ink-faint:#9a9a9a;
    --accent:#ff0033;
    --accent-hover:#e6002e;
    --accent-warm:#a8884a;
    --line:rgba(33,33,33,0.16);
    --line-2:rgba(33,33,33,0.30);
    --shadow-card:0 30px 80px -20px rgba(33,33,33,0.18);
    --grain-opacity:0.03;
    --grain-blend:multiply;
    --atmosphere-1:rgba(255,0,51,0.04);
    --atmosphere-2:rgba(168,136,74,0.04);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--ink);font-family:var(--font-system);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:hidden}
  html{scroll-padding-top:32px}
  /* Lenis smooth-scroll support */
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto !important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
  .lenis.lenis-stopped{overflow:hidden}
  body{font-size:16px;line-height:1.6;letter-spacing:0;font-weight:400}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
  ::selection{background:var(--accent);color:#fff}

  /* Theme transition - smooth swap */
  html,body{
    transition:background-color 1.2s cubic-bezier(0.4,0,0.2,1), color 1.2s cubic-bezier(0.4,0,0.2,1);
  }
  .frame,.section,nav,.nav-wrap,footer,.cta,.hero,
  .receipt,.testi,.thumb,.feat-card,.step-visual,
  .client-avatar,.client-name,.section-title,.section-aside,
  .stat-num,.stat-lbl,.eyebrow,.btn,.nav-link,.theme-toggle,
  .faq-item,.faq-a,.sort-tab,.thumb-views,.hero-sub,.hero-title,
  .roster-toggle,.roster-label,.toast,.gallery-meta,.testi-body,
  .testi-name,.testi-subs,.step-num,.step-title,.step-body,
  .feat-caption,.thumb-channel,.thumb-title,.thumb-meta,
  .cta-eyebrow,.cta-title,.cta-sub,.section-num,.visitor-counter,
  .receipt-label,.receipt-headline,.receipt-body,.r-stat-num,.r-stat-lbl,
  .status-strip,.client-meta,.client-arrow,
  .hero-stats-col,.hero-stat-row-card,.big-pfp-section,.big-pfp-label,
  .big-pfp-img,.big-pfp-name,.big-pfp-subs{
    transition-property:background-color,color,border-color,box-shadow;
    transition-duration:1.2s;
    transition-timing-function:cubic-bezier(0.4,0,0.2,1);
  }
  /* Interactive elements need fast transitions for hover - override per-element below */
  .btn,.nav-link,.theme-toggle,.client-row,.faq-item,.faq-icon,
  .thumb,.feat-card,.pfp,.pfp::after,.receipt,.testi,
  .sort-tab,.client-arrow,.client-name,.client-avatar,
  .big-pfp,.big-pfp-img,.big-pfp-name{
    transition-property:all;
  }
  /* But on theme change specifically, slow them - via root attr */
  html.theme-switching *{
    transition-duration:1.2s !important;
    transition-property:background-color,color,border-color,box-shadow !important;
    transition-timing-function:cubic-bezier(0.4,0,0.2,1) !important;
  }

  /* Outer frame - now full-width, lines extend edge to edge */
  .frame{
    background:var(--bg);
    width:100%;
    min-height:100vh;
    position:relative;
  }
  /* Inner container - keeps content readable on wide screens */
  .container{
    max-width:var(--maxw);
    margin:0 auto;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
    position:relative;
  }

  /* Atmosphere */
  .frame::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(900px 600px at 12% 8%, var(--atmosphere-1), transparent 60%),
      radial-gradient(800px 700px at 88% 92%, var(--atmosphere-2), transparent 60%);
  }
  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:2;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.6'/></svg>");
  }

  /* Top status strip - alert */
  .status-strip{
    background:var(--accent);
    color:#fff;
    padding:12px var(--gutter);
    display:flex;align-items:center;justify-content:center;gap:14px;
    font-family:var(--font-system);font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;
    position:relative;z-index:5;
    overflow:hidden;
    width:100%;
  }
  .status-strip .dot{
    width:7px;height:7px;border-radius:50%;background:#fff;
    box-shadow:0 0 0 0 rgba(255,255,255,0.7);
    animation:pulse-white 2.2s infinite;
    flex-shrink:0;
  }
  @keyframes pulse-white{
    0%{box-shadow:0 0 0 0 rgba(255,255,255,0.6)}
    70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
    100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  }
  .status-strip .strong{font-weight:500}
  .status-divider{opacity:0.4;margin:0 4px}

  /* Nav */
  .nav-wrap{
    border-bottom:1px solid var(--line);
    position:relative;z-index:5;
    background:var(--bg);
  }
  nav{
    padding:18px 0;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{
    font-family:var(--font-system);font-size:24px;letter-spacing:0.08em;font-weight:800;
    text-transform:uppercase;
    display:flex;align-items:baseline;gap:10px;
    color:var(--ink);text-decoration:none;
    letter-spacing:-0.01em;
  }
  .logo-mark{
    color:var(--accent);font-family:var(--font-system);font-style:italic;font-size:22px;letter-spacing:-0.01em;
    text-transform:lowercase;font-weight:500;
  }
  .nav-right{display:flex;gap:6px;align-items:center}

  /* Plain text nav links */
  .nav-text{
    font-family:var(--font-system);font-size:14px;font-weight:500;letter-spacing:-0.005em;
    color:var(--ink);padding:9px 14px;
    transition:opacity 0.2s ease;
    text-decoration:none;
  }
  .nav-text:hover{opacity:0.65}

  /* Outlined pill (Contact) */
  .nav-pill{
    font-family:var(--font-system);font-size:14px;font-weight:500;
    color:var(--ink);padding:10px 22px;
    border:1px solid var(--line-2);border-radius:999px;
    transition:all 0.25s ease;display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;
    margin-left:8px;
  }
  .nav-pill:hover{background:var(--ink);color:var(--bg)}

  /* Dark filled pill (Let's Talk) */
  .nav-cta{
    font-family:var(--font-system);font-size:14px;font-weight:500;
    background:var(--ink);color:var(--bg);
    padding:10px 22px;border-radius:999px;
    transition:all 0.25s ease;display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;border:1px solid var(--ink);
  }
  .nav-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .nav-cta svg{transition:transform 0.25s ease}
  .nav-cta:hover svg{transform:translate(2px,-2px)}

  /* Theme mini toggle (just icon, small) */
  .theme-mini{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--line-2);
    color:var(--ink);cursor:pointer;
    transition:all 0.25s ease;
    margin-left:6px;
  }
  .theme-mini:hover{background:var(--ink);color:var(--bg)}
  .theme-mini .sun{display:none}
  [data-theme="light"] .theme-mini .sun{display:block}
  [data-theme="light"] .theme-mini .moon{display:none}

  /* (legacy nav-link rules kept harmless but unused) */
  .nav-link{display:none}

  /* HERO */
  .hero{
    padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px);
    position:relative;z-index:3;
    border-bottom:1px solid var(--line);
  }
  .hero-grid-v2{
    display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(32px,5vw,72px);
    align-items:stretch;
    margin-bottom:clamp(64px,8vw,110px);
  }
  .hero-col-left{min-width:0;display:flex;flex-direction:column}
  .hero-col-right{
    display:flex;flex-direction:column;justify-content:space-between;
    gap:clamp(20px,2.5vw,32px);
    min-height:100%;
  }

  .eyebrow{display:none}
  h1.hero-title{
    font-family:var(--font-system);font-weight:700;
    font-size:clamp(40px,5vw,72px);
    line-height:1.0;
    letter-spacing:-0.035em;
    color:var(--ink);
    margin-bottom:28px;
  }
  h1.hero-title .ital{
    font-family:var(--font-system);font-style:italic;font-weight:700;
    color:var(--accent);
    letter-spacing:-0.035em;
  }
  .hero-sub-v2{
    font-family:var(--font-system);font-weight:400;
    font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--ink-dim);
    margin-bottom:40px;max-width:540px;
  }

  /* Hero CTA row - View Our Work + social proof */
  .hero-cta-row{
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  }
  .btn-primary-v2{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--accent);color:#fff;
    padding:16px 28px;border-radius:999px;
    font-family:var(--font-system);font-size:15px;font-weight:600;
    text-decoration:none;
    transition:all 0.25s ease;
    border:1px solid var(--accent);
  }
  .btn-primary-v2:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(255,0,51,0.4)}
  .btn-primary-v2 svg{transition:transform 0.25s ease}
  .btn-primary-v2:hover svg{transform:translate(2px,-2px)}

  .proof-stack{
    display:flex;align-items:center;
  }
  .proof-stack .proof-pfp{
    width:38px;height:38px;border-radius:50%;
    border:2px solid var(--bg);
    object-fit:cover;display:block;
    background-size:cover;background-position:center;background-color:var(--bg-3);
    margin-left:-10px;
    box-shadow:0 4px 12px -4px rgba(0,0,0,0.15);
  }
  .proof-stack .proof-pfp:first-child{margin-left:0}
  .proof-label{
    display:flex;flex-direction:column;line-height:1.2;gap:3px;
  }
  .proof-stars{
    display:inline-flex;gap:2px;color:#f5a623;
    margin-bottom:2px;
  }
  .proof-line-1{
    font-family:var(--font-system);font-size:14px;font-weight:600;color:var(--ink);
  }
  .proof-line-2{
    font-family:var(--font-system);font-size:14px;font-weight:400;color:var(--ink-dim);
  }

  /* KPI rows (right column) */
  .kpi-row{
    display:flex;align-items:center;gap:clamp(16px,1.6vw,22px);
  }
  .kpi-icon{
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .kpi-icon svg{width:clamp(38px,3.6vw,52px);height:clamp(38px,3.6vw,52px)}
  .kpi-text{display:flex;flex-direction:column;gap:4px;line-height:1.2;min-width:0}
  .kpi-val{
    font-family:var(--font-system);font-weight:700;
    font-size:clamp(26px,2.4vw,36px);
    letter-spacing:-0.028em;
    color:var(--ink);line-height:1;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .kpi-plus{color:var(--accent)}
  .kpi-lbl{
    font-family:var(--font-system);font-size:clamp(15px,1.2vw,17px);font-weight:500;color:var(--ink);
    margin-top:6px;
  }
  .kpi-lbl-sub{
    font-family:var(--font-system);font-size:clamp(13px,1vw,15px);font-weight:400;color:var(--ink-dim);
    margin-top:2px;
  }

  /* Trusted by top creators */
  .trusted-section{
    padding-top:clamp(24px,3vw,36px);
    border-top:1px solid var(--line);
  }
  .trusted-label{
    text-align:center;
    font-family:var(--font-system);font-size:13px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ink-faint);font-weight:500;
    margin-bottom:clamp(28px,3.5vw,44px);
  }
  /* big-pfp-row keeps its existing styles below */

  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;border-radius:999px;
    font-family:var(--font-system);font-size:12px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    border:1px solid var(--line-2);
    transition:all 0.35s cubic-bezier(0.2,0.8,0.2,1);
    background:transparent;
  }
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(255,0,51,0.4)}
  .btn-ghost:hover{background:var(--bg-2);border-color:var(--ink-dim);transform:translateY(-2px)}
  .btn svg{width:14px;height:14px}

  /* BIG PFP ROW - below hero */
  .big-pfp-section{
    margin-top:clamp(28px,3.5vw,44px);
  }
  .big-pfp-label{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:clamp(20px,2.5vw,28px);
    font-family:var(--font-system);font-size:12px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    color:var(--ink-dim);
  }
  .big-pfp-label .count{color:var(--accent)}
  .big-pfp-row{
    display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px);
  }
  /* Extras: wrapper that collapses smoothly */
  .big-pfp-extras{
    display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,28px);
    max-height:0;opacity:0;
    overflow:hidden;
    margin-top:0;
    transition:max-height 0.55s cubic-bezier(0.2,0.8,0.2,1), opacity 0.45s ease, margin-top 0.5s ease;
    pointer-events:none;
  }
  .big-pfp-extras.is-expanded{
    max-height:1200px;
    opacity:1;
    margin-top:clamp(16px,2vw,28px);
    pointer-events:auto;
  }
  /* Subtle stagger for the extras as they come in */
  .big-pfp-extras .big-pfp{
    opacity:0;
    transform:translateY(-6px);
    transition:opacity 0.4s ease, transform 0.4s ease;
  }
  .big-pfp-extras.is-expanded .big-pfp{
    opacity:1;transform:translateY(0);
  }
  .big-pfp-extras.is-expanded .big-pfp:nth-child(1){transition-delay:0.05s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(2){transition-delay:0.10s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(3){transition-delay:0.15s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(4){transition-delay:0.20s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(5){transition-delay:0.25s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(6){transition-delay:0.30s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(7){transition-delay:0.35s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(8){transition-delay:0.40s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(9){transition-delay:0.45s}
  .big-pfp-extras.is-expanded .big-pfp:nth-child(10){transition-delay:0.50s}

  .big-pfp{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    text-decoration:none;color:inherit;
    transition:transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
  }
  .big-pfp:hover{transform:translateY(-6px)}
  .big-pfp:hover .big-pfp-img{border-color:var(--accent);box-shadow:0 16px 40px -10px rgba(255,0,51,0.35)}
  .big-pfp:hover .big-pfp-name{color:var(--accent)}
  .big-pfp-img{
    width:100%;aspect-ratio:1/1;border-radius:50%;
    object-fit:cover;display:block;
    background-size:cover;background-position:center;background-color:var(--bg-3);
    border:1px solid var(--line-2);
    transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1);
    box-shadow:0 8px 24px -10px rgba(0,0,0,0.25);
  }
  .big-pfp-name{
    font-family:var(--font-system);font-size:clamp(14px,1.2vw,16px);
    letter-spacing:0.04em;color:var(--ink);text-align:center;line-height:1.1;
    font-weight:600;
    transition:color 0.3s ease;
  }
  .big-pfp-subs{
    font-family:var(--font-system);font-size:11px;letter-spacing:0.10em;font-weight:500;
    color:var(--ink-dim);text-align:center;
  }
  .big-pfp-more{
    margin-top:clamp(28px,3.5vw,40px);
    display:flex;justify-content:center;
  }
  .btn-outline{
    display:inline-flex;align-items:center;gap:14px;
    background:transparent;color:var(--ink);
    padding:13px 26px;border-radius:999px;
    font-family:var(--font-system);font-size:14px;font-weight:500;
    text-decoration:none;cursor:pointer;
    transition:all 0.25s ease;
    border:1px solid var(--line-2);
  }
  .btn-outline:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .btn-outline svg{transition:transform 0.25s ease}
  .btn-outline:hover svg{transform:translate(2px,-2px)}

  /* Section header pattern - minimal */
  .section{padding:clamp(56px,6vw,80px) 0;border-bottom:1px solid var(--line);position:relative;z-index:3}
  .section-head{
    display:flex;justify-content:space-between;align-items:baseline;gap:20px;
    margin-bottom:clamp(32px,3.5vw,48px);flex-wrap:wrap;
    padding-bottom:22px;border-bottom:1px solid var(--line);
  }
  .section-label{
    font-family:var(--font-system);
    font-size:clamp(22px,2.4vw,30px);
    letter-spacing:0.08em;text-transform:uppercase;
    color:var(--ink);font-weight:700;
    line-height:1;
  }
  .section-label .num{color:var(--accent);margin-right:8px}
  .section-meta{
    font-family:var(--font-system);font-size:12px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    color:var(--ink-dim);
  }
  /* Hidden legacy classes */
  .section-num{display:none}
  .section-title{display:none}
  .section-aside{display:none}

  /* Featured 3-stack */
  .featured-callout{
    font-family:var(--font-system);font-weight:700;
    font-size:clamp(40px,5vw,68px);
    line-height:1.08;letter-spacing:-0.032em;
    color:var(--ink);
    margin:0 auto clamp(40px,5vw,60px);
    max-width:1080px;
    text-align:center;
  }
  .featured-callout .ital{
    font-family:var(--font-system);font-style:italic;color:var(--accent);font-weight:700;
    letter-spacing:-0.035em;
  }
  .featured-stack{
    position:relative;height:clamp(280px,32vw,440px);
    display:flex;align-items:center;justify-content:center;
    perspective:1400px;
  }
  .feat-card{
    position:absolute;width:clamp(280px,38vw,540px);aspect-ratio:16/9;
    border-radius:9px;overflow:hidden;
    box-shadow:var(--shadow-card), 0 0 0 1px var(--line);
    transition:filter 0.5s ease, box-shadow 0.5s ease;
    background:var(--bg-3);
    display:block;text-decoration:none;color:inherit;
    cursor:pointer;
    will-change:transform;
    transform-style:preserve-3d;
    backface-visibility:hidden;
  }
  .feat-card:hover{box-shadow:0 40px 100px -20px rgba(0,0,0,0.8), 0 0 0 1px var(--accent)}
  .feat-card img{width:100%;height:100%;object-fit:cover}
  .feat-card.left{transform:translateX(-40%) translateY(20px) rotate(-7deg) scale(0.86)}
  .feat-card.center{z-index:2}
  .feat-card.right{transform:translateX(40%) translateY(20px) rotate(7deg) scale(0.86)}
  .feat-caption{
    position:absolute;bottom:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:end;
    color:#fff;font-family:var(--font-system);font-size:11.5px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    pointer-events:none;
  }
  .feat-caption .ch{display:flex;align-items:center;gap:8px}
  .feat-caption .ch::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .feat-caption .views{background:rgba(0,0,0,0.6);padding:6px 10px;border-radius:5px;backdrop-filter:blur(8px)}
  /* Shift the center card's caption up to clear the fake YouTube controls bar */
  .feat-card.center .feat-caption{bottom:62px}

  /* Fake YouTube player controls - center card only */
  .yt-controls{
    position:absolute;left:0;right:0;bottom:0;
    padding:0 14px 10px;
    pointer-events:none;
    color:#fff;
    background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    padding-top:30px;
  }
  .yt-progress{
    position:relative;height:4px;
    background:rgba(255,255,255,0.28);
    border-radius:3px;
    margin-bottom:10px;
  }
  .yt-progress-fill{
    position:absolute;top:0;left:0;height:100%;
    width:67%;
    background:#ff0000;
    border-radius:3px;
  }
  .yt-progress-dot{
    position:absolute;top:50%;left:67%;
    width:13px;height:13px;
    background:#ff0000;border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 0 rgba(255,0,0,0.4);
  }
  .yt-controls-row{
    display:flex;justify-content:space-between;align-items:center;
    color:#fff;
  }
  .yt-controls-left, .yt-controls-right{
    display:flex;align-items:center;gap:14px;
  }
  .yt-icon{
    width:22px;height:22px;color:#fff;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  }
  .yt-icon-sm{width:18px;height:18px;opacity:0.95}
  .yt-time{
    font-family:var(--font-system);font-size:12px;font-weight:400;
    color:#fff;letter-spacing:0;text-transform:none;
    margin-left:4px;
    text-shadow:0 1px 2px rgba(0,0,0,0.5);
  }

  /* RECEIPTS */
  .receipts-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
  .receipt{
    background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
    padding:clamp(28px,3vw,40px);position:relative;overflow:hidden;
    transition:border-color 0.3s ease, transform 0.4s ease;
  }
  .receipt:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .receipt::before{
    content:'';position:absolute;top:0;left:0;width:60px;height:1px;background:var(--accent);
  }
  .receipt-label{font-family:var(--font-system);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:20px}
  .receipt-headline{font-family:var(--font-system);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-0.015em;margin-bottom:18px;max-width:90%}
  .receipt-headline .ital{font-family:var(--font-system);font-style:italic;color:var(--accent);font-weight:400}
  .receipt-body{font-size:14px;line-height:1.6;color:var(--ink-dim);margin-bottom:28px;max-width:92%}
  .chart{width:100%;height:160px;margin-bottom:24px}
  .receipt-stats{display:flex;gap:32px;border-top:1px solid var(--line);padding-top:20px}
  .r-stat{display:flex;flex-direction:column;gap:4px}
  .r-stat-num{font-family:var(--font-system);font-weight:300;font-size:26px;letter-spacing:-0.01em}
  .r-stat-num.accent{color:var(--accent)}
  .r-stat-lbl{font-family:var(--font-system);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-dim)}

  /* GALLERY */
  .gallery-controls{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:16px;
  }
  .sort-tabs{display:flex;gap:4px;font-family:var(--font-system);font-size:12px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;}
  .sort-tab{padding:9px 16px;border-radius:999px;color:var(--ink-dim);cursor:pointer;transition:all 0.25s ease;border:1px solid transparent}
  .sort-tab.active{color:var(--ink);background:var(--bg-2);border-color:var(--line-2)}
  .sort-tab:hover:not(.active){color:var(--ink)}
  .gallery-meta{font-family:var(--font-system);font-size:11.5px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;color:var(--ink-dim)}

  .gallery-wrap{position:relative}
  .gallery-wrap.is-collapsed::after{
    content:'';position:absolute;left:0;right:0;bottom:0;
    height:clamp(140px,18vw,220px);
    background:linear-gradient(to bottom, transparent 0%, var(--bg) 85%);
    pointer-events:none;
    transition:opacity 0.4s ease;
  }
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px)}
  .thumb{
    position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;cursor:pointer;
    background:var(--bg-3);
    transition:transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
  }
  .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s cubic-bezier(0.2,0.8,0.2,1), filter 0.4s ease}
  .thumb:hover{transform:translateY(-5px)}
  .thumb:hover img{transform:scale(1.04)}
  .thumb-views{
    position:absolute;bottom:12px;right:12px;
    font-family:var(--font-system);font-size:16px;letter-spacing:-0.005em;font-weight:600;
    background:rgba(30,30,30,0.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    color:#fff;padding:9px 16px;border-radius:999px;
    z-index:2;
  }
  .thumb-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 30%, transparent 70%);
    opacity:0;transition:opacity 0.4s ease;
    display:flex;flex-direction:column;justify-content:end;padding:20px 150px 22px 20px;
  }
  .thumb:hover .thumb-overlay{opacity:1}
  .thumb-channel{font-family:var(--font-system);color:#fff;font-size:13px;letter-spacing:0.08em;font-weight:700;text-transform:uppercase;margin-bottom:4px;opacity:0.9}
  .thumb-title{font-family:var(--font-system);font-weight:600;font-size:17px;line-height:1.3;color:#fff;letter-spacing:-0.01em;margin-bottom:0}
  .thumb-meta{display:none}

  .show-more{
    display:flex;justify-content:center;margin-top:48px;
  }

  /* PROCESS */
  .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .step{padding:clamp(20px,2.4vw,32px);position:relative}
  .step:not(:last-child){border-right:1px solid var(--line)}
  .step:first-child{padding-left:0}
  .step:last-child{padding-right:0}
  .step-visual{
    aspect-ratio:4/3;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;
    margin-bottom:20px;overflow:hidden;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .step-num{
    font-family:var(--font-system);
    font-size:12px;color:var(--accent);margin-bottom:10px;letter-spacing:0.14em;
    font-weight:600;text-transform:uppercase;
  }
  .step-title{font-family:var(--font-system);font-weight:600;font-size:18px;letter-spacing:-0.01em;margin-bottom:12px}
  .step-body{font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
  .step-svg{width:80%;height:80%;color:var(--ink-faint);opacity:0.5}
  .step-img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
  }
  .step:hover .step-img{transform:scale(1.04)}

  /* TESTIMONIALS - INFINITE DRAG CAROUSEL */
  .testi-marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    /* Edge fade masks */
    -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .testi-marquee-track{
    display:flex;
    gap:clamp(16px,2vw,28px);
    width:max-content;
    will-change:transform;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y; /* allow vertical page scroll on touch, but capture horizontal */
  }
  .testi-marquee-track.is-grabbing{cursor:grabbing}
  .testi-slide{
    flex:0 0 clamp(320px, 28vw, 440px);
    padding:clamp(24px,2.6vw,34px);
    border:1px solid var(--line);border-radius:14px;
    background:var(--bg-2);
    box-sizing:border-box;
    min-height:260px;
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .testi-body{
    font-family:var(--font-system);font-weight:400;
    font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink);
    margin-bottom:24px;
    letter-spacing:-0.005em;
  }
  .testi-author{display:flex;align-items:center;gap:12px;padding-top:0}
  .testi-avatar{width:44px;height:44px;border-radius:50%;background-size:cover;background-position:center;border:1px solid var(--line-2);flex-shrink:0}
  .testi-name{font-family:var(--font-system);font-size:15px;letter-spacing:-0.005em;color:var(--ink);margin-bottom:2px;font-weight:600;}
  .testi-subs{font-family:var(--font-system);font-size:13px;letter-spacing:0;color:var(--ink-dim);font-weight:400;text-transform:none;}

  /* Legacy hidden */
  .testi-grid{display:none}
  .testi-quote-mark{display:none}
  .testi-carousel{display:none}
  .testi-dots{display:none}

  /* FAQ */
  .faq-wrap{max-width:880px}
  .faq-item{border-top:1px solid var(--line);padding:18px 0;cursor:pointer}
  .faq-item:last-child{border-bottom:1px solid var(--line)}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;gap:24px;
    font-family:var(--font-system);font-weight:500;font-size:clamp(16px,1.4vw,19px);letter-spacing:-0.01em;
  }
  .faq-icon{
    width:22px;height:22px;flex-shrink:0;position:relative;transition:transform 0.4s ease;color:var(--accent);
  }
  .faq-icon::before,.faq-icon::after{content:'';position:absolute;background:currentColor;border-radius:1px}
  .faq-icon::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
  .faq-icon::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);transition:transform 0.4s ease}
  .faq-item.open .faq-icon{transform:rotate(45deg)}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.2,0.8,0.2,1), padding-top 0.4s ease;
    font-size:16px;line-height:1.65;color:var(--ink-dim);max-width:680px;
  }
  .faq-item.open .faq-a{max-height:280px;padding-top:16px}

  /* Final CTA */
  .cta{
    padding:clamp(60px,8vw,100px) 0;
    text-align:center;border-bottom:1px solid var(--line);position:relative;z-index:3;
    background:radial-gradient(800px 500px at 50% 50%, var(--atmosphere-1), transparent 70%);
  }
  .cta-eyebrow{
    font-family:var(--font-system);font-size:12.5px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    color:var(--ink-dim);margin-bottom:22px;
  }
  .cta-title{
    font-family:var(--font-system);font-weight:600;
    font-size:clamp(40px,4.5vw,64px);line-height:1.05;letter-spacing:-0.028em;
    margin-bottom:20px;
  }
  .cta-title .ital{font-family:var(--font-system);font-style:italic;color:var(--accent);font-weight:600}
  .cta-sub{font-family:var(--font-system);font-size:16px;color:var(--ink-dim);margin-bottom:36px}
  .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .cta .btn{padding:16px 26px;font-size:12px}

  /* Footer */
  footer{
    padding:36px 0;
    border-top:1px solid var(--line);
    font-family:var(--font-system);font-size:11.5px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    color:var(--ink-dim);position:relative;z-index:3;
  }
  footer .container{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  }
  footer a:hover{color:var(--accent)}
  .footer-right{display:flex;gap:24px;align-items:center}
  .visitor-counter{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--ink-dim);
  }
  .visitor-counter::before{
    content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 0 var(--accent);
    animation:pulse-accent 2.4s infinite;
  }
  @keyframes pulse-accent{
    0%{box-shadow:0 0 0 0 rgba(255,0,51,0.55)}
    70%{box-shadow:0 0 0 8px rgba(255,0,51,0)}
    100%{box-shadow:0 0 0 0 rgba(255,0,51,0)}
  }
  .visitor-count{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

  /* Toast */
  .toast{
    position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--bg-3);border:1px solid var(--accent);border-radius:9px;
    padding:14px 20px;font-family:var(--font-system);font-size:11px;letter-spacing:0.10em;text-transform:uppercase;font-weight:500;
    color:var(--ink);
    opacity:0;pointer-events:none;transition:all 0.4s cubic-bezier(0.2,0.8,0.2,1);
    z-index:1000;display:flex;align-items:center;gap:10px;
    box-shadow:0 20px 50px -10px rgba(0,0,0,0.3);
  }
  [data-theme="light"] .toast{box-shadow:0 20px 50px -10px rgba(80,40,20,0.2)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}

  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease, transform 1s cubic-bezier(0.2,0.8,0.2,1)}
  .reveal.in{opacity:1;transform:translateY(0)}

  /* ============ LIGHTBOX ============ */
  .lightbox{
    position:fixed;inset:0;z-index:100;
    display:flex;align-items:center;justify-content:center;
    padding:clamp(20px,4vw,48px);
    opacity:0;pointer-events:none;
    transition:opacity 0.3s ease;
  }
  .lightbox.is-open{opacity:1;pointer-events:auto}
  .lightbox-backdrop{
    position:absolute;inset:0;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    cursor:pointer;
  }
  .lightbox-content{
    position:relative;z-index:2;
    max-width:1200px;width:100%;
    max-height:calc(100vh - 80px);
    display:flex;flex-direction:column;gap:18px;
    transform:scale(0.96);
    transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
  }
  .lightbox.is-open .lightbox-content{transform:scale(1)}
  .lightbox-close{
    position:absolute;top:-44px;right:0;
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.12);color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease;
    z-index:3;
  }
  .lightbox-close:hover{background:rgba(255,255,255,0.22);transform:rotate(90deg)}
  .lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border-radius:50%;
    background:rgba(255,255,255,0.10);color:#fff;border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.25s cubic-bezier(0.2,0.8,0.2,1);
    z-index:3;
  }
  .lightbox-nav:hover{background:rgba(255,255,255,0.22)}
  .lightbox-prev{left:clamp(16px,3vw,40px)}
  .lightbox-next{right:clamp(16px,3vw,40px)}
  .lightbox-prev:hover{transform:translateY(-50%) translateX(-3px)}
  .lightbox-next:hover{transform:translateY(-50%) translateX(3px)}
  .lightbox-nav.is-hidden{display:none}
  .lightbox-image-wrap{
    width:100%;aspect-ratio:16/9;
    background:#000;border-radius:14px;overflow:hidden;
    box-shadow:0 30px 80px -10px rgba(0,0,0,0.6);
  }
  .lightbox-image{width:100%;height:100%;object-fit:cover;display:block}
  .lightbox-meta{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;flex-wrap:wrap;
    color:#fff;
  }
  .lightbox-text{flex:1;min-width:0}
  .lightbox-channel{
    font-family:var(--font-system);font-size:12px;font-weight:700;
    color:rgba(255,255,255,0.85);letter-spacing:0.08em;text-transform:uppercase;
    margin-bottom:6px;
  }
  .lightbox-title{
    font-family:var(--font-system);font-size:clamp(20px,2.2vw,28px);font-weight:600;
    color:#fff;letter-spacing:-0.015em;line-height:1.2;margin-bottom:6px;
  }
  .lightbox-views{
    font-family:var(--font-system);font-size:14px;font-weight:400;
    color:rgba(255,255,255,0.65);
  }
  .lightbox-cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--accent);color:#fff;text-decoration:none;
    padding:14px 24px;border-radius:999px;
    font-family:var(--font-system);font-size:15px;font-weight:600;
    transition:transform 0.2s ease, background 0.2s ease;
    flex-shrink:0;
  }
  .lightbox-cta:hover{background:#e63616;transform:translateY(-2px)}
  /* Prevent body scroll when lightbox is open */
  body.lightbox-open{overflow:hidden}

  /* ============ CONTACT FORM ============ */
  .contact-form-section{
    padding:clamp(48px,8vw,96px) 0 clamp(80px,10vw,120px);
    border-top:1px solid var(--line);
  }
  .contact-form-card{
    max-width:680px;margin:0 auto;
    padding:0 clamp(20px,3vw,32px);
  }
  .contact-form-header{
    text-align:center;
    margin-bottom:clamp(32px,5vw,48px);
  }
  .contact-form-title{
    font-family:var(--font-system);font-weight:700;
    font-size:clamp(32px,4vw,52px);
    line-height:1.05;letter-spacing:-0.025em;
    color:var(--ink);
    margin-bottom:14px;
  }
  .contact-form-title .ital{
    color:var(--accent);font-style:italic;font-weight:700;
  }
  .contact-form-sub{
    font-family:var(--font-system);font-size:clamp(15px,1.2vw,17px);
    color:var(--ink-dim);line-height:1.5;
    max-width:480px;margin:0 auto;
  }
  .contact-form{
    display:flex;flex-direction:column;gap:18px;
  }
  .contact-field-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;
  }
  .contact-field{
    display:flex;flex-direction:column;gap:6px;
  }
  .contact-field-label{
    font-family:var(--font-system);font-size:13.5px;font-weight:500;
    color:var(--ink-dim);letter-spacing:-0.005em;
  }
  .contact-field-label .req{color:var(--accent)}
  .contact-field input,
  .contact-field textarea{
    width:100%;box-sizing:border-box;
    padding:14px 16px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:9px;
    font-family:var(--font-system);font-size:15px;
    color:var(--ink);
    transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    resize:none;
  }
  .contact-field input::placeholder,
  .contact-field textarea::placeholder{
    color:var(--ink-faint);
  }
  .contact-field input:focus,
  .contact-field textarea:focus{
    outline:none;
    border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(0,0,0,0.04);
  }
  .contact-field textarea{
    min-height:120px;line-height:1.5;
  }
  .contact-field input:invalid:not(:placeholder-shown),
  .contact-field textarea:invalid:not(:placeholder-shown){
    border-color:rgba(196,34,10,0.4);
  }
  .contact-form-actions{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    margin-top:6px;
  }
  .contact-submit{
    flex-shrink:0;
  }
  .contact-submit[disabled]{
    opacity:0.55;cursor:wait;
  }
  .contact-form-status{
    font-family:var(--font-system);font-size:13.5px;color:var(--ink-dim);
    line-height:1.4;
  }
  .contact-form-status.is-error{color:var(--accent)}

  /* Success state (replaces the form on submit) */
  .contact-form-success{
    text-align:center;padding:48px 24px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
    animation:contactSuccessIn 0.5s cubic-bezier(0.2,0.8,0.2,1);
  }
  @keyframes contactSuccessIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
  .contact-success-icon{
    width:60px;height:60px;border-radius:50%;
    background:var(--accent);color:#fff;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 18px;
  }
  .contact-success-title{
    font-family:var(--font-system);font-size:24px;font-weight:700;
    color:var(--ink);letter-spacing:-0.02em;margin-bottom:6px;
  }
  .contact-success-sub{
    font-family:var(--font-system);font-size:15px;color:var(--ink-dim);
  }

  /* RESPONSIVE */
  @media (max-width:980px){
    .hero-grid-v2{grid-template-columns:1fr;gap:48px;margin-bottom:64px}
    .hero-col-right{flex-direction:row;flex-wrap:wrap;gap:24px}
    .kpi-row{flex:1 1 220px}
    .gallery{grid-template-columns:repeat(2,1fr)}
    .process-grid{grid-template-columns:repeat(2,1fr)}
    .step{padding-left:0;padding-right:0}
    .step:nth-child(1){border-right:1px solid var(--line);padding-right:clamp(20px,3vw,30px)}
    .step:nth-child(2){padding-left:clamp(20px,3vw,30px)}
    .step:nth-child(3){border-right:1px solid var(--line);padding-right:clamp(20px,3vw,30px);padding-top:clamp(28px,3vw,44px)}
    .step:nth-child(4){padding-left:clamp(20px,3vw,30px);padding-top:clamp(28px,3vw,44px)}
    .step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line);padding-bottom:clamp(28px,3vw,44px)}
    .testi-grid{grid-template-columns:1fr}
    .section-aside{display:none}
    .big-pfp-name{font-size:13px}
    .nav-text:nth-child(2),.nav-text:nth-child(3){display:none}
  }
  @media (max-width:680px){
    .nav-text{display:none}
    .nav-pill{margin-left:0}
    .hero-col-right{flex-direction:column}
    .kpi-row{flex:1 1 100%}
  }
  @media (max-width:600px){
    .status-strip{font-size:11px;padding:10px var(--gutter);letter-spacing:0.08em}
    .gallery{grid-template-columns:1fr}
    .featured-stack{height:300px}
    nav{padding:14px 0}
    .logo{font-size:16px}
    .feat-card.left{transform:translateX(-30%) translateY(15px) rotate(-6deg) scale(0.82)}
    .feat-card.right{transform:translateX(30%) translateY(15px) rotate(6deg) scale(0.82)}
    .big-pfp-row{gap:8px}
    .big-pfp-name{font-size:11px;letter-spacing:0.06em}
    .big-pfp-subs{display:none}
    .hero-cta-row{gap:18px}
    .thumb-overlay{padding:14px 110px 16px 14px}
    .thumb-views{font-size:13px;padding:6px 12px;bottom:8px;right:8px}
    .lightbox-close{top:8px;right:8px;background:rgba(0,0,0,0.5)}
    .lightbox-nav{width:38px;height:38px;background:rgba(0,0,0,0.5)}
    .lightbox-prev{left:8px}
    .lightbox-next{right:8px}
    .lightbox-meta{flex-direction:column;align-items:flex-start;gap:14px}
    .lightbox-cta{width:100%;justify-content:center}
    .contact-field-grid{grid-template-columns:1fr}
    .contact-submit{width:100%;justify-content:center}
    .proof-stack .proof-pfp{width:32px;height:32px}
    .yt-icon-sm{display:none}
    .yt-time{font-size:11px}
    .yt-controls{padding:24px 10px 8px}
  }