*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { background: var(--kt-ink); }
    body {
      font-family: var(--kt-ff-sans);
      color: #fff;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

    /* ─────────────────────────────────────────────────────────────
       FIXED BACKDROP for the light section (justfixme-style)
       Sits behind everything; only visible where light sections are
       transparent. Dark sections cover it.
       ───────────────────────────────────────────────────────────── */
    .fixed-bg {
      position: fixed; inset: 0; z-index: 0;
      pointer-events: none;
      background:
        /* soft pastel diagonals */
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(180,200,255,.45), transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(255,210,200,.35), transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(200,220,255,.35), transparent 60%),
        #FAFAF8;
    }
    .fixed-bg::before {
      /* fine grid lines */
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(13,13,13,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,13,13,.045) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 40%, transparent 95%);
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 40%, transparent 95%);
    }
    .fixed-bg::after {
      /* extra warm glow */
      content: ''; position: absolute;
      width: 800px; height: 800px; border-radius: 50%;
      top: -300px; left: -200px;
      background: radial-gradient(circle, rgba(201,21,42,.06), transparent 60%);
    }

    .page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

    /* ────────────── HERO (dark — covers fixed bg) ────────────── */
    .hero {
      position: relative;
      padding: 56px var(--kt-pad) 140px;
      background: var(--kt-ink);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .hero::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
    }
    .hero::after {
      content: ''; position: absolute; pointer-events: none;
      width: 1100px; height: 1100px; border-radius: 50%;
      top: -480px; left: 50%; transform: translateX(-50%);
      background: radial-gradient(circle, rgba(201,21,42,.22), transparent 60%);
      z-index: -1;
    }
    .hero-top {
      max-width: var(--kt-max); margin: 0 auto 72px;
      display: flex; align-items: center; justify-content: space-between;
      position: relative; z-index: 1;
    }
    .logo { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #fff; }
    .logo svg { width: 22px; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
    .logo-word { letter-spacing: -0.3px; font-weight: 400; }
    .logo-word strong { font-weight: 700; }
    .file-chip {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      padding: 8px 14px 8px 10px;
      border-radius: 100px;
      font-size: 12.5px; color: rgba(255,255,255,.85);
    }
    .file-chip[hidden] { display: none; }
    .file-chip .well { width: 22px; height: 22px; border-radius: 7px; background: rgba(5,150,105,.18); color: #34D399; display: flex; align-items: center; justify-content: center; }
    .file-chip .well svg { width: 13px; height: 13px; }
    .file-chip .lab { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
    .file-chip code { font-family: var(--kt-ff-sans); font-size: 12px; font-weight: 500; color: #fff; background: none; border: none; padding: 0; box-shadow: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .hero-inner { max-width: var(--kt-max); margin: 0 auto; position: relative; z-index: 1; text-align: center; }
    .hero-eyebrow { 
      display: inline-flex; align-items: center; gap: 8px; 
      font-size: 11px; font-weight: 700; letter-spacing: .2em; 
      text-transform: uppercase; color: rgba(255,255,255,.4); 
      margin-bottom: 32px;
      animation: fade-in-up 0.8s var(--kt-ease) forwards;
    }
    .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kt-red); box-shadow: 0 0 0 4px rgba(201,21,42,.18); animation: pulse 2.4s ease infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.7); } }
    
    .hero h1 { 
      font-family: var(--kt-ff-serif); 
      font-size: clamp(54px, 10vw, 142px); 
      font-weight: 400; line-height: 0.92; 
      letter-spacing: -0.04em; color: #fff; 
      max-width: 16ch; margin: 0 auto 32px;
      animation: fade-in-up 0.8s var(--kt-ease) 0.1s forwards;
      opacity: 0;
    }
    .hero h1 em { font-style: italic; color: var(--kt-red); display: inline-block; position: relative; }
    .hero h1 em::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: .04em; height: 0.04em; background: linear-gradient(90deg, transparent, var(--kt-red) 20%, var(--kt-red) 80%, transparent); opacity: .55; transform: scaleX(0); transform-origin: left; animation: flourish 1.2s var(--kt-ease) .8s forwards; }
    @keyframes flourish { to { transform: scaleX(1); } }
    
    .hero-sub { 
      max-width: 580px; margin: 0 auto 24px; 
      font-size: clamp(16px, 1.5vw, 18px); 
      color: rgba(255,255,255,.55); line-height: 1.6;
      animation: fade-in-up 0.8s var(--kt-ease) 0.2s forwards;
      opacity: 0;
    }
    .hero-sub b { color: #fff; font-weight: 600; }
    
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-meta { margin-top: 20px; font-size: 11.5px; color: rgba(255,255,255,.4); display: inline-flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
    .hero-meta .sep { color: rgba(255,255,255,.18); }

    /* hero CTA — the big "Save to Desktop" trick button */
    .hero-cta-wrap { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .hero-cta {
      position: relative;
      display: inline-flex; align-items: center; gap: 14px;
      padding: 20px 36px;
      min-width: 380px; max-width: 92vw;
      background: linear-gradient(180deg, #E8253E 0%, #C9152A 100%);
      color: #fff;
      border-radius: 16px;
      font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
      box-shadow: 0 24px 48px rgba(201,21,42,0.4), 0 8px 16px rgba(201,21,42,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
      cursor: pointer; overflow: hidden;
      transition: transform .2s var(--kt-ease), box-shadow .2s var(--kt-ease);
      animation: fade-in-up 0.8s var(--kt-ease) 0.3s forwards;
      opacity: 0;
    }
    .hero-cta:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 32px 64px rgba(201,21,42,0.5), 0 12px 24px rgba(201,21,42,0.3), inset 0 1px 0 rgba(255,255,255,0.4); }
    .hero-cta:active { transform: translateY(-1px) scale(0.98); }
    @keyframes hero-cta-bob {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(201,21,42,.55), 0 6px 14px rgba(201,21,42,.3), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.18); }
    .hero-cta:active { transform: translateY(0); }
    .hero-cta::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
      transform: translateX(-100%); animation: hero-cta-sheen 3.4s ease-in-out infinite 1s;
    }
    @keyframes hero-cta-sheen { 0%,55% { transform: translateX(-100%); } 75%,100% { transform: translateX(100%); } }
    .hero-cta .icon-box {
      flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
      background: rgba(255,255,255,.18);
      display: flex; align-items: center; justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    }
    .hero-cta .icon-box svg { width: 18px; height: 18px; }
    .hero-cta .arrow { display: inline-flex; transition: transform .25s var(--kt-ease); }
    .hero-cta:hover .arrow { transform: translateY(2px); }
    .hero-cta .arrow svg { width: 16px; height: 16px; }
    .hero-cta .lbl-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
    .hero-cta .lbl-main { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
    .hero-cta .lbl-sub { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.78); letter-spacing: .02em; }
    .hero-cta-meta { font-size: 11.5px; color: rgba(255,255,255,.42); display: inline-flex; gap: 12px; align-items: center; }
    .hero-cta-meta .sep { color: rgba(255,255,255,.18); }
    .hero-cta-meta .ok { color: rgba(255,255,255,.7); display: inline-flex; align-items: center; gap: 5px; }
    .hero-cta-meta .ok svg { width: 11px; height: 11px; color: #34c759; }

    /* desktop drop animation overlay */
    .desktop-drop {
      position: fixed; inset: 0; z-index: 9999; pointer-events: none;
      display: none;
    }
    .desktop-drop.go { display: block; }
    .desktop-drop .icon-fly {
      position: absolute;
      width: 64px; height: 76px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      animation: drop-to-desktop 1.6s cubic-bezier(.5,.05,.3,1) forwards;
      will-change: transform, opacity;
    }
    .desktop-drop .icon-fly .glyph {
      width: 56px; height: 56px; border-radius: 14px;
      background: linear-gradient(180deg, #fff 0%, #f4f4f6 100%);
      box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08);
      display: flex; align-items: center; justify-content: center;
    }
    .desktop-drop .icon-fly .glyph svg { width: 30px; height: 30px; }
    .desktop-drop .icon-fly .name {
      font-size: 11px; font-weight: 600; color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
      background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 4px;
      backdrop-filter: blur(4px);
    }
    @keyframes drop-to-desktop {
      0% { transform: translate(0,0) scale(1) rotate(0); opacity: 0; }
      8% { opacity: 1; }
      40% { transform: translate(0, -120px) scale(1.05) rotate(-6deg); opacity: 1; }
      80% { transform: translate(var(--tx,200px), var(--ty,400px)) scale(.55) rotate(8deg); opacity: 1; }
      100% { transform: translate(var(--tx,200px), var(--ty,420px)) scale(.45) rotate(8deg); opacity: 0; }
    }
    .desktop-drop .ripple {
      position: absolute; bottom: 24px; right: 24px;
      width: 80px; height: 80px; border-radius: 50%;
      background: rgba(201,21,42,.3);
      transform: scale(0); opacity: 0;
      animation: drop-ripple 1.2s ease-out .9s forwards;
    }
    @keyframes drop-ripple {
      0% { transform: scale(0); opacity: .6; }
      100% { transform: scale(4); opacity: 0; }
    }

    /* ── PRIMARY ACTION — share strip + share-grid ── */
    .primary-action { max-width: 920px; margin: 64px auto 0; position: relative; z-index: 1; padding: 0 var(--kt-pad); }
    .pa-eyebrow { 
      font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; 
      color: rgba(255,255,255,.4); text-align: center; margin-bottom: 24px; 
      display: flex; align-items: center; gap: 16px; justify-content: center; 
    }
    .pa-eyebrow .ping { 
      display: inline-flex; align-items: center; gap: 8px; color: var(--kt-red); 
      background: rgba(201,21,42,0.1); padding: 4px 12px; border-radius: 100px;
      border: 1px solid rgba(201,21,42,0.2);
    }
    .pa-eyebrow .ping::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--kt-red); box-shadow: 0 0 10px var(--kt-red); animation: pulse 1.6s ease infinite; }
    .pa-eyebrow::before, .pa-eyebrow::after { content: ''; flex: 1; max-width: 64px; height: 1px; background: rgba(255,255,255,.14); }

    .pa-card {
      position: relative;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 32px; padding: 12px;
      display: flex; align-items: center; gap: 12px;
      box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      animation: fade-in-up 0.8s var(--kt-ease) 0.5s forwards;
      opacity: 0;
      transition: transform 0.4s var(--kt-ease), box-shadow 0.4s var(--kt-ease), background 0.4s var(--kt-ease), border-color 0.4s var(--kt-ease);
      will-change: transform, opacity;
    }
    .pa-card:hover { 
      border-color: rgba(255, 255, 255, 0.2); 
      background: rgba(255, 255, 255, 0.07);
      transform: translateY(-4px) scale(1.01);
      box-shadow: 
        0 50px 100px rgba(0, 0, 0, 0.5),
        0 20px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .pa-card::before {
      content: ''; position: absolute; inset: -1px; border-radius: 32px; pointer-events: none;
      padding: 1px; background: linear-gradient(135deg, rgba(201,21,42,.4), transparent 40%, rgba(201,21,42,.4) 80%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0.1; transition: opacity .4s ease;
    }
    .pa-card:hover::before { opacity: 0.6; }

    .pa-url { flex: 1; display: flex; align-items: center; gap: 16px; padding: 0 24px; height: 68px; font-size: 24px; color: #fff; font-weight: 500; min-width: 0; }
    .pa-url .pa-globe { 
      flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; 
      background: linear-gradient(135deg, #FF3D59, #C9152A); 
      color: #fff; display: flex; align-items: center; justify-content: center; 
      box-shadow: 0 8px 24px rgba(201, 21, 42, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3); 
      transition: transform 0.3s ease;
    }
    .pa-card:hover .pa-url .pa-globe { transform: rotate(10deg) scale(1.1); }
    .pa-url .pa-globe svg { width: 20px; height: 20px; }
    .pa-url .pa-link { 
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.03em;
      background: rgba(255,255,255,0.03); padding: 4px 12px; border-radius: 8px;
    }
    .pa-url .pa-link b { font-weight: 700; color: #fff; text-shadow: 0 0 15px rgba(255,255,255,0.3); }
    .pa-copy {
      display: flex; align-items: center; gap: 12px; padding: 0 36px; height: 68px;
      background: linear-gradient(180deg, #FF3D59 0%, #C9152A 100%); 
      color: #fff; border-radius: 20px;
      font-size: 16px; font-weight: 800; white-space: nowrap;
      box-shadow: 0 16px 36px rgba(201, 21, 42, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
      transition: transform .4s var(--kt-ease), box-shadow .4s var(--kt-ease), filter .4s var(--kt-ease);
      position: relative; overflow: hidden;
      cursor: pointer;
      will-change: transform;
    }
    .pa-copy svg { width: 18px; height: 18px; }
    .pa-copy::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
      transform: translateX(-100%);
    }
    .pa-copy:hover { 
      transform: scale(1.04);
      box-shadow: 0 24px 48px rgba(201, 21, 42, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
      filter: brightness(1.05);
    }
    .pa-copy:hover::before { animation: sheen 1.5s ease-in-out infinite; }
    .pa-copy:active { transform: scale(0.96); }

    /* share — strings tying social bubbles to the headline */
    .share-strings {
      position: relative;
      margin-top: 48px;
      padding: 0 20px 40px;
      min-height: 400px;
      background: radial-gradient(circle at 50% 50%, rgba(201,21,42,0.08), transparent 70%);
    }
    .ss-anchor-wrap { position: absolute; top: 38px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; }
    .share-strings .ss-anchor {
      position: relative; z-index: 3;
      display: inline-flex; align-items: center; gap: 12px;
      padding: 12px 24px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 100px;
      color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
      box-shadow: 
        0 20px 40px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(255,255,255,0.01);
      margin: 0 auto;
      transition: transform .4s var(--kt-ease), border-color .4s var(--kt-ease), background .4s var(--kt-ease), box-shadow .4s var(--kt-ease);
      will-change: transform;
    }
    .share-strings .ss-anchor:hover { 
      transform: translateY(-2px) scale(1.02); 
      border-color: rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.12);
      box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .share-strings .ss-anchor .pin {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--kt-red);
      box-shadow: 0 0 12px var(--kt-red), 0 0 0 4px rgba(201,21,42,0.15);
      animation: pulse 2s ease infinite;
    }
    .share-strings .ss-anchor b { font-weight: 700; color: var(--kt-red); text-shadow: 0 0 8px rgba(201,21,42,0.2); }
    .ss-anchor-wrap-old { display: none; }
    .ss-stage {
      position: absolute; inset: 0;
      pointer-events: none;
    }
    .ss-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .ss-svg .ss-string {
      stroke: rgba(255,255,255,0.12);
      stroke-width: 1.2;
      fill: none;
      stroke-dasharray: 5 8;
      stroke-linecap: round;
      animation: ss-dance 6s linear infinite;
      filter: drop-shadow(0 0 1px rgba(255,255,255,0.1));
      transition: stroke .3s ease;
    }
    .share-strings:hover .ss-string { stroke: rgba(255,255,255,0.22); }
    @keyframes ss-dance {
      0% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -52; }
    }
    .ss-bubble {
      position: absolute;
      pointer-events: auto;
      width: 92px; height: 92px;
      border-radius: 50%;
      background: var(--c, #fff);
      color: #fff;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 5px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
      text-decoration: none;
      transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s var(--kt-ease);
      animation: ss-float var(--dur, 5s) ease-in-out infinite;
      animation-delay: var(--del, 0s);
      transform-origin: center;
      overflow: hidden;
      will-change: transform;
    }
    .ss-bubble::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
      pointer-events: none;
    }
    .ss-bubble:hover { transform: scale(1.15) translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3); z-index: 10; }
    @keyframes ss-float {
      0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
      50%      { transform: translateY(-15px) rotate(calc(var(--rot, 0deg) + 6deg)); }
    }
    .ss-bubble svg { width: 34px; height: 34px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
    .ss-bubble .lbl { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: 0.95; }
    .ss-bubble.b-shortcut { background: linear-gradient(135deg, #E8253E, #9B0F1E); }
    .ss-bubble.b-shortcut .badge {
      position: absolute; top: -8px; right: -8px;
      font-size: 9px; font-weight: 800; color: #fff;
      background: #FFD600; color: #1a1a1a;
      padding: 3px 7px; border-radius: 100px; letter-spacing: .08em;
      box-shadow: 0 4px 10px rgba(0,0,0,.3);
    }
    /* platform-specific bubbles */
    .ss-bubble.b-wa  { --c: linear-gradient(135deg, #25D366, #128C7E); --rot:-3deg; --dur:5s; --del:0s; }
    .ss-bubble.b-x   { --c: linear-gradient(135deg, #2a2a2a, #000000); --rot: 4deg; --dur:6s; --del:.4s; }
    .ss-bubble.b-li  { --c: linear-gradient(135deg, #0A66C2, #004182); --rot:-5deg; --dur:5.4s; --del:.8s; }
    .ss-bubble.b-em  { --c: linear-gradient(135deg, #EA4335, #B31412); --rot: 3deg; --dur:5.8s; --del:1.2s; }
    .ss-bubble.b-tg  { --c: linear-gradient(135deg, #229ED9, #1581B5); --rot:-2deg; --dur:6.2s; --del:1.6s; }
    .ss-bubble.b-shortcut { --rot:0deg; --dur:4.6s; --del:0s; }

    /* sparkles */
    .ss-sparkle {
      position: absolute; width: 4px; height: 4px; border-radius: 50%;
      background: #fff; box-shadow: 0 0 10px #fff;
      pointer-events: none; opacity: 0;
      animation: ss-sparkle-fly var(--dur) linear infinite;
      animation-delay: var(--del);
      will-change: transform, opacity;
    }
    @keyframes ss-sparkle-fly {
      0% { transform: translate(0, 0) scale(0); opacity: 0; }
      20% { opacity: 0.8; }
      80% { opacity: 0.8; }
      100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
    }

    /* ────────────── LIGHT BAND (transparent over fixed bg) ────────────── */
    .band-light {
      position: relative;
      background: transparent;
      color: var(--kt-ink);
      padding: 180px var(--kt-pad) 160px;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .band-light .inner { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

    /* center stage — main headline like justfixme */
    .stage-head {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 120px;
      position: relative;
    }
    .stage-head .lab {
      display: inline-block;
      font-size: 11px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--kt-ink-3);
      margin-bottom: 22px;
      padding: 6px 14px;
      background: rgba(255,255,255,.7);
      border: 1px solid var(--kt-line);
      border-radius: 100px;
      backdrop-filter: blur(8px);
    }
    .stage-head h2 {
      font-family: var(--kt-ff-serif);
      font-size: clamp(52px, 9vw, 104px);
      font-weight: 400; line-height: 0.92;
      letter-spacing: -0.04em; color: var(--kt-ink);
    }
    .stage-head h2 em { font-style: italic; color: var(--kt-red); }
    .stage-head h2 .word-2 { color: #2563EB; font-style: italic; display: inline-block; margin: 0 0.1em; }
    .stage-head h2 .word-3 { color: #D97706; font-style: italic; display: inline-block; }
    .stage-head p {
      margin-top: 32px;
      font-size: 18px; color: var(--kt-ink-3); line-height: 1.6;
      max-width: 560px; margin-left: auto; margin-right: auto;
      letter-spacing: -0.01em;
    }

    /* handwritten annotations */
    .scribble {
      position: absolute;
      font-family: 'Caveat', cursive;
      font-size: 26px;
      color: var(--kt-ink);
      line-height: 1;
      pointer-events: none;
      z-index: 20;
      transform: rotate(var(--rot, -4deg));
      text-shadow: 0 0 10px #fff, 0 0 20px #fff;
    }
    .scribble svg { display: block; margin-top: 6px; color: var(--kt-red); opacity: 0.8; }

    /* floating cards layout — desktop: pinned to corners around stage-head */
    .floats {
      position: relative;
      width: 100%;
    }
    .float {
      position: absolute;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(13,13,13,0.08);
      border-radius: 20px;
      box-shadow: 0 40px 80px rgba(13,13,13,0.12), 0 8px 24px rgba(13,13,13,0.04), inset 0 1px 0 #fff;
      padding: 20px;
      transform: rotate(var(--rot, -3deg));
      transition: transform .4s var(--kt-ease), box-shadow .4s var(--kt-ease), background .35s var(--kt-ease);
      will-change: transform;
    }
    .float:hover {
      transform: rotate(0) translateY(-8px) scale(1.04);
      box-shadow: 0 60px 100px rgba(13,13,13,0.18), 0 12px 32px rgba(13,13,13,0.06);
      background: #fff;
      z-index: 10;
    }

    /* ── social as polaroid-card mini ── */
    .float.social {
      width: 260px;
      text-decoration: none;
      display: block;
      cursor: pointer;
    }
    .float.social .row1 {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 12px;
    }
    .float.social .mark {
      width: 28px; height: 28px; border-radius: 8px;
      background: var(--c, var(--kt-red)); color: #fff;
      display: flex; align-items: center; justify-content: center;
      flex: 0 0 auto;
    }
    .float.social .mark svg { width: 16px; height: 16px; }
    .float.social .platform {
      font-size: 11px; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; color: var(--kt-ink-3);
      flex: 1; min-width: 0;
    }
    .float.social .badge {
      font-size: 9px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--c, var(--kt-red));
      border: 1px solid currentColor;
      padding: 2px 6px; border-radius: 100px;
    }
    .float.social .handle {
      font-family: var(--kt-ff-serif);
      font-size: 26px; font-weight: 400; letter-spacing: -0.02em;
      line-height: 1.05; color: var(--kt-ink);
      margin-bottom: 4px;
      /* highlighter-like underline behind the new bit */
    }
    .float.social .handle b { font-weight: 400; background: linear-gradient(180deg, transparent 60%, var(--c-pale, rgba(201,21,42,.14)) 60%); padding: 0 2px; }
    .float.social .sub { font-size: 12px; color: var(--kt-ink-3); }
    .float.social .sub b { color: var(--c, var(--kt-red)); font-weight: 600; }

    /* desktop placement — orbits the giant headline */
    @media (min-width: 1024px) {
      .float.social.s-reddit  { top:   30px; left:  -20px; --rot: -5deg; }
      .float.social.s-youtube { top:  140px; right: -30px; --rot:  4deg; }
      .float.social.s-tiktok  { bottom: 40px; left:   30px; --rot:  3deg; }
      .float.social.s-x       { bottom:120px; right: -10px; --rot: -3deg; }
    }
    /* tablet/mobile — stack as natural cards */
    @media (max-width: 1023px) {
      .floats { min-height: auto; padding: 160px 0; }
      .float.social { position: relative; width: 100%; max-width: 360px; margin: 12px auto; transform: rotate(0); }
      .scribble.scrib-stage { display: none; }
      .stage-head { margin-bottom: 48px; }
    }

    /* scribble positions on desktop */
    @media (min-width: 1024px) {
      .scrib-thanks { top: -40px; left: 15%; --rot: -8deg; }
      .scrib-arrow  { top: 40px; left: 180px; --rot: 0deg; }
      .scrib-new    { top: 0px; right: 10%; --rot: 8deg; font-size: 28px; color: var(--kt-red); }
      .scrib-follow { bottom: 100px; right: 5%; --rot: -6deg; }

      .scrib-private { top: 120px; left: 12%; --rot: -12deg; font-size: 24px; color: var(--kt-red); }
      .scrib-fast    { top: -20px; right: 20%; --rot: 6deg; color: #fff; }
      .scrib-wait    { top: -60px; left: 10%; --rot: -10deg; font-size: 28px; color: var(--kt-red); }
      .scrib-free    { top: 10px; right: 5%; --rot: 12deg; color: var(--kt-red); }
      .scrib-loved   { top: -20px; left: 5%; --rot: -8deg; z-index: 30; }
      .scrib-vibe    { top: 40px; right: 15%; --rot: 15deg; z-index: 30; color: #fff; }
    }

    /* spacing for mobile fallback */
    @media (max-width: 1023px) {
      .floats { display: flex; flex-direction: column; align-items: center; gap: 0; padding-bottom: 60px; }
      .stage-head { margin-bottom: 32px; }
      .scribble.scrib-stage { display: block; position: relative; top: auto; left: auto; right: auto; bottom: auto; text-align: center; margin: 10px 0; transform: none; }
    }

    /* ── TICKER DIVIDER ─────────────────────────────────────────────── */
    .ticker-divider {
      position: relative;
      margin: 100px calc(-1 * var(--kt-pad)) 0;
      overflow: hidden;
      padding: 18px 0;
      border-top: 1px solid var(--kt-line);
      border-bottom: 1px solid var(--kt-line);
      background: var(--kt-white);
    }
    .ticker-divider::before,
    .ticker-divider::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 120px;
      z-index: 2;
      pointer-events: none;
    }
    .ticker-divider::before { left: 0; background: linear-gradient(90deg, var(--kt-white), transparent); }
    .ticker-divider::after  { right: 0; background: linear-gradient(-90deg, var(--kt-white), transparent); }
    .ticker-track {
      display: flex;
      gap: 0;
      white-space: nowrap;
      animation: ticker-scroll 28s linear infinite;
      width: max-content;
      will-change: transform;
    }
    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      padding: 0 32px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--kt-ink-3);
    }
    .ticker-item .t-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--kt-red);
      flex-shrink: 0;
    }
    .ticker-item.accent { color: var(--kt-ink); }
    .ticker-item.accent .t-dot { background: var(--kt-cat-compress); }

    /* ── TESTIMONIALS ─────────────────────────────────────────────── */
    .testimonials {
      margin-top: 100px;
      position: relative;
      text-align: center;
    }
    .testimonials .t-eyebrow {
      display: inline-block;
      font-size: 11px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--kt-red);
      margin-bottom: 18px;
      padding: 6px 14px;
      background: rgba(201,21,42,.08); border: 1px solid rgba(201,21,42,.2);
      border-radius: 100px;
    }
    .t-header {
      position: relative;
      text-align: center;
      margin-bottom: 80px;
      padding: 100px 20px 0;
      background: radial-gradient(circle at center, rgba(201, 21, 42, 0.03) 0%, transparent 70%);
    }
    .t-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #000;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 8px 18px;
      border-radius: 100px;
      margin-bottom: 32px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      animation: fade-in-up 0.8s var(--kt-ease) forwards;
      position: relative;
      overflow: hidden;
    }
    .t-badge::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
      transform: translateX(-100%);
      animation: sheen 3s infinite;
    }
    .t-stars-mini {
      color: #FBBF24;
      font-size: 14px;
      letter-spacing: 2px;
    }
    .testimonials h2 {
      font-family: var(--kt-ff-serif);
      font-size: clamp(48px, 7vw, 84px);
      font-weight: 400; line-height: 1; letter-spacing: -0.04em;
      color: var(--kt-ink); max-width: 1000px; margin: 0 auto 32px;
      animation: fade-in-up 0.8s var(--kt-ease) 0.1s forwards;
      opacity: 0;
    }
    .testimonials h2 em { font-style: italic; color: var(--kt-red); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
    .testimonials h2 .free { font-style: italic; color: #059669; background: rgba(5, 150, 105, 0.05); padding: 0 12px; border-radius: 8px; }
    .testimonials .t-sub {
      max-width: 650px; margin: 0 auto;
      font-size: 20px; color: var(--kt-ink-2); line-height: 1.5;
      animation: fade-in-up 0.8s var(--kt-ease) 0.2s forwards;
      opacity: 0;
      font-weight: 450;
    }
    .testimonials .t-sub b { color: var(--kt-ink); font-weight: 700; }
    .t-grid {
      position: relative;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      max-width: 1080px; margin: 0 auto;
      height: 560px; overflow: hidden;
      contain: paint;
      mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        black 18%, 
        black 82%, 
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        black 18%, 
        black 82%, 
        transparent 100%
      );
    }
    @media (max-width: 880px) {
      .t-grid { grid-template-columns: repeat(2, 1fr); height: 500px; }
      .t-col-3 { display: none; }
    }
    @media (max-width: 560px) {
      .t-grid { grid-template-columns: 1fr; height: 460px; }
      .t-col-2 { display: none; }
    }
    .t-col {
      display: flex; flex-direction: column; gap: 18px;
      padding-bottom: 0; /* managed by clones now */
      will-change: transform;
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    .t-col-1 { animation: t-up 120s linear infinite; }
    .t-col-2 { animation: t-down 110s linear infinite; }
    .t-col-3 { animation: t-up 130s linear infinite; }
    @keyframes t-up {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(0, -50%, 0); }
    }
    @keyframes t-down {
      0% { transform: translate3d(0, -50%, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }
    .t-card {
      flex: 0 0 auto;
      background: #fff;
      border: 1px solid var(--kt-line);
      border-radius: 18px;
      padding: 22px 22px 20px;
      box-shadow: 0 2px 8px rgba(13,13,13,.04);
      text-align: left;
      transition: all .25s var(--kt-ease);
    }
    .t-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(13,13,13,.08); border-color: rgba(201,21,42,.2); }
    .t-card .t-stars { 
      width: 65px; height: 13px; 
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB400'%3E%3Cpolygon points='12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9'/%3E%3C/svg%3E");
      background-size: 13px 13px;
      background-repeat: repeat-x;
      margin-bottom: 12px; 
    }
    .t-card .t-quote { font-size: 14.5px; line-height: 1.55; color: var(--kt-ink); margin-bottom: 16px; letter-spacing: -0.005em; }
    .t-card .t-quote b { font-weight: 600; color: var(--kt-ink); }
    .t-card .t-foot { display: flex; align-items: center; gap: 10px; }
    .t-card .t-emoji {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--c, #f4f4f6);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex: 0 0 auto;
    }
    .t-card .t-who { display: flex; flex-direction: column; }
    .t-card .t-name { font-size: 13px; font-weight: 600; color: var(--kt-ink); letter-spacing: -0.005em; }
    .t-card .t-role { font-size: 11.5px; color: var(--kt-ink-4); letter-spacing: .005em; }

    /* ── VIDEO CTA — animated hype card ── */
    .vc-wrap { margin-top: 160px; position: relative; }
    .vc-card {
      position: relative;
      background: #09090b;
      color: #fff;
      border-radius: 32px;
      padding: 64px 56px;
      max-width: 1040px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 56px;
      align-items: center;
      box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 80px rgba(201, 21, 42, 0.05);
      overflow: hidden;
      transform: rotate(-1deg);
    }
    @media (max-width: 880px) { .vc-card { grid-template-columns: 1fr; padding: 44px 28px; gap: 32px; transform: rotate(0); } }
    .vc-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0); background-size: 24px 24px; }
    .vc-card::after {
      content: ''; position: absolute; pointer-events: none;
      width: 800px; height: 800px; border-radius: 50%;
      bottom: -400px; right: -300px;
      background: radial-gradient(circle, rgba(201,21,42,.22), transparent 60%);
      animation: vc-glow 6s ease-in-out infinite alternate;
    }
    @keyframes vc-glow {
      0% { transform: translate(0,0) scale(1); opacity: .8; }
      100% { transform: translate(-30px,-40px) scale(1.1); opacity: 1; }
    }

    .vc-text { position: relative; z-index: 1; }
    .vc-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--kt-red);
      margin-bottom: 16px;
      display: inline-flex; align-items: center; gap: 10px;
      padding: 6px 12px;
      background: rgba(201,21,42,.10);
      border: 1px solid rgba(201,21,42,.25);
      border-radius: 100px;
    }
    .vc-eyebrow .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kt-red); box-shadow: 0 0 0 0 rgba(201,21,42,.6); animation: live-pulse 1.6s ease-out infinite; }
    @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,21,42,.6); } 70% { box-shadow: 0 0 0 8px rgba(201,21,42,0); } 100% { box-shadow: 0 0 0 0 rgba(201,21,42,0); } }
    .vc-card h3 { font-family: var(--kt-ff-serif); font-size: clamp(32px, 3.8vw, 50px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 18px; }
    .vc-card h3 em { font-style: italic; color: var(--kt-red); position: relative; }
    .vc-card h3 em::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: .04em; height: .04em;
      background: var(--kt-red); transform: scaleX(0); transform-origin: left;
      animation: vc-underline 1.4s var(--kt-ease) .8s forwards;
    }
    @keyframes vc-underline { to { transform: scaleX(1); } }
    .vc-card p { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.65; max-width: 460px; margin-bottom: 24px; }
    .vc-card p b { color: #fff; font-weight: 600; }

    /* trust strip — small social proof */
    .vc-trust {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 28px;
      font-size: 12px; color: rgba(255,255,255,.55);
    }
    .vc-trust .avs { display: flex; }
    .vc-trust .av {
      width: 26px; height: 26px; border-radius: 50%;
      background: linear-gradient(135deg, var(--c1, #FF0050), var(--c2, #C9152A));
      border: 2px solid #0D0D0D;
      margin-left: -8px; flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: #fff;
    }
    .vc-trust .av:first-child { margin-left: 0; }
    .vc-trust b { color: #fff; font-weight: 600; }

    .vc-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .vc-btn { 
      position: relative; 
      display: inline-flex; 
      align-items: center; 
      gap: 12px; 
      padding: 0 28px; 
      height: 54px; 
      border-radius: 100px; 
      font-size: 14.5px; 
      font-weight: 700; 
      transition: all .4s cubic-bezier(0.16, 1, 0.3, 1); 
      overflow: hidden; 
      cursor: pointer;
    }
    .vc-btn.primary { 
      background: linear-gradient(180deg, #FF3D59 0%, #C9152A 100%); 
      color: #fff; 
      box-shadow: 0 15px 35px rgba(201, 21, 42, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3); 
    }
    .vc-btn.primary:hover { 
      transform: translateY(-3px) scale(1.03); 
      box-shadow: 0 20px 45px rgba(201, 21, 42, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
      filter: brightness(1.1);
    }
    .vc-btn.primary::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
      transform: translateX(-100%); animation: vc-sheen 4s ease-in-out infinite;
    }
    @keyframes vc-sheen { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
    .vc-btn.ghost { background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(10px); }
    .vc-btn.ghost:hover { 
      border-color: rgba(255,255,255,0.4); 
      background: rgba(255,255,255,0.1); 
      transform: translateY(-3px) scale(1.03); 
    }
    .vc-btn svg { width: 18px; height: 18px; }

    /* ── VC VISUAL — tilting phone, scrolling feed ── */
    .vc-visual {
      position: relative; z-index: 1;
      height: 380px;
      display: flex; align-items: center; justify-content: center;
      perspective: 1200px;
    }
    .vc-phone {
      position: relative;
      width: 230px; height: 400px;
      border-radius: 36px;
      background: #000;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 40px 80px rgba(0,0,0,.8),
        0 0 0 2px rgba(255,255,255,.03),
        inset 0 1px 0 rgba(255,255,255,.05);
      padding: 10px;
      display: flex; flex-direction: column;
      transform: rotateY(-14deg) rotateX(8deg) rotateZ(-4deg);
      animation: phone-float 6s ease-in-out infinite alternate;
      z-index: 2;
    }
    .vc-phone::after {
      content: ''; position: absolute; inset: 0; border-radius: 36px;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(255,255,255,0.03) 100%);
      pointer-events: none; z-index: 10;
    }
    @keyframes phone-float {
      0% { transform: rotateY(-14deg) rotateX(8deg) rotateZ(-4deg) translateY(0); }
      100% { transform: rotateY(-10deg) rotateX(4deg) rotateZ(-2deg) translateY(-16px); }
    }
    .vc-phone .notch {
      position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
      width: 76px; height: 26px; border-radius: 100px;
      background: #000;
      z-index: 5;
      box-shadow: inset 0 -1px 1px rgba(255,255,255,0.05);
    }
    .vc-screen {
      flex: 1; border-radius: 28px; overflow: hidden;
      background: #08080c;
      position: relative;
      display: flex; flex-direction: column;
      border: 1px solid rgba(255,255,255,0.05);
    }
    .vc-screen::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, rgba(255,255,255,0.05) 0%, transparent 40%, rgba(255,255,255,0.02) 100%);
      pointer-events: none; z-index: 10;
    }
    .vc-screen::before {
      content: 'LIVE'; position: absolute; top: 40px; right: 14px; z-index: 8;
      background: #FF0050; color: #fff; font-size: 8px; font-weight: 800;
      padding: 2px 6px; border-radius: 2px; letter-spacing: 0.05em;
      animation: flash 1s infinite alternate;
    }
    @keyframes flash { from { opacity: 1; } to { opacity: 0.5; } }
    /* status bar */
    .vc-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 8px; font-size: 9px; color: #fff; font-weight: 600; }
    .vc-status .battery { width: 18px; height: 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 2px; position: relative; }
    .vc-status .battery::after { content: ''; position: absolute; inset: 1px 6px 1px 1px; background: #fff; border-radius: 1px; }
    /* scrolling feed */
    .vc-feed { flex: 1; position: relative; overflow: hidden; }
    .vc-feed-track {
      display: flex; flex-direction: column;
      animation: feed-scroll 14s linear infinite;
    }
    @keyframes feed-scroll {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }
    .vc-post {
      flex: 0 0 auto;
      padding: 12px 14px 14px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      position: relative;
    }
    .vc-post .pp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .vc-post .pp-av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--c1, #FF0050), var(--c2, #C9152A)); flex: 0 0 auto; }
    .vc-post .pp-name { font-size: 10px; font-weight: 600; color: #fff; }
    .vc-post .pp-name .dot { color: rgba(255,255,255,.3); margin: 0 4px; }
    .vc-post .pp-name .ago { font-weight: 400; color: rgba(255,255,255,.4); }
    .vc-post .pp-thumb {
      width: 100%; height: 110px; border-radius: 12px;
      background: linear-gradient(135deg, var(--c1, #25F4EE), var(--c2, #FE2C55));
      position: relative; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    }
    .vc-post .pp-thumb::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
      background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    }
    .vc-post .pp-thumb::before {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.15) 1px, transparent 0);
      background-size: 8px 8px;
    }
    .vc-post .pp-play {
      position: relative; z-index: 1;
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
    }
    .vc-post .pp-play svg { width: 12px; height: 12px; margin-left: 2px; }
    .vc-post .pp-cap {
      margin-top: 8px; font-size: 9px; color: rgba(255,255,255,.7);
      line-height: 1.4;
    }
    .vc-post .pp-cap b { color: #fff; }
    .vc-post .pp-tag { color: var(--kt-red); font-weight: 600; }
    .vc-post .pp-stats {
      display: flex; gap: 12px; margin-top: 8px;
      font-size: 9px; color: rgba(255,255,255,.5);
    }
    .vc-post .pp-stats span { display: inline-flex; align-items: center; gap: 4px; }
    .vc-post .pp-stats svg { width: 10px; height: 10px; }

    /* floating reaction emojis */
    .vc-reactions { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
    .vc-react {
      position: absolute; bottom: 30%;
      font-size: 18px; opacity: 0;
      animation: react-up 4s ease-in infinite;
    }
    .vc-react.r1 { left: 20%; animation-delay: 0s; }
    .vc-react.r2 { left: 50%; animation-delay: 1.3s; }
    .vc-react.r3 { left: 75%; animation-delay: 2.6s; }
    @keyframes react-up {
      0% { transform: translateY(0) scale(.4); opacity: 0; }
      15% { opacity: 1; transform: translateY(-20px) scale(1); }
      80% { opacity: 1; transform: translateY(-160px) scale(1.1) rotate(8deg); }
      100% { transform: translateY(-200px) scale(.9); opacity: 0; }
    }

    /* like burst that fires on the phone */
    .vc-burst {
      position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%);
      z-index: 5; pointer-events: none;
    }
    .vc-burst .heart {
      width: 44px; height: 44px; color: #FE2C55;
      animation: heart-burst 3s ease-out infinite;
      filter: drop-shadow(0 4px 16px rgba(254,44,85,.6));
      opacity: 0;
    }
    @keyframes heart-burst {
      0%, 60% { opacity: 0; transform: scale(.4); }
      65% { opacity: 1; transform: scale(1.4); }
      80% { opacity: .9; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.2) translateY(-10px); }
    }

    /* ribbon: "reposted to 2.3k followers" */
    .vc-ribbon {
      position: absolute; top: 28px; right: -28px;
      transform: rotate(8deg);
      background: linear-gradient(135deg, #FF3D59, #C9152A); color: #fff;
      padding: 10px 18px; border-radius: 12px;
      font-size: 11px; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase;
      box-shadow: 0 12px 30px rgba(201,21,42,.4);
      z-index: 15;
      animation: ribbon-bounce 3s ease-in-out infinite;
      border: 1px solid rgba(255,255,255,0.15);
    }
    @keyframes ribbon-bounce {
      0%, 100% { transform: rotate(8deg) translateY(0); }
      50% { transform: rotate(6deg) translateY(-6px); }
    }
    .vc-ribbon::before {
      content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
      width: 0; height: 0; border-style: solid;
      border-width: 6px 6px 6px 0; border-color: transparent var(--kt-red) transparent transparent;
    }

    /* ── EXPLORE — chips floating ── */
    .explore {
      margin-top: 240px;
      text-align: center;
      max-width: 1000px;
      margin-left: auto; margin-right: auto;
      position: relative;
      z-index: 1;
    }
    .explore h3 { font-family: var(--kt-ff-serif); font-size: clamp(42px, 6vw, 72px); font-weight: 400; letter-spacing: -0.03em; line-height: 0.95; color: var(--kt-ink); margin-bottom: 20px; }
    .explore h3 em { font-style: italic; color: var(--kt-red); }
    .explore .sub { margin: 0 auto 56px; font-size: 17px; color: var(--kt-ink-3); max-width: 540px; line-height: 1.5; }
    .explore-chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
    .chip {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 14px 28px; border-radius: 100px;
      background: #fff; color: var(--kt-ink);
      border: 1px solid var(--kt-line);
      font-size: 15px; font-weight: 700;
      box-shadow: 0 4px 12px rgba(13,13,13,0.06), 0 1px 2px rgba(13,13,13,0.02);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .chip:hover { 
      transform: translateY(-5px) scale(1.02); 
      box-shadow: 0 25px 50px rgba(13,13,13,0.12); 
      border-color: var(--c, var(--kt-red)); 
      color: var(--c, var(--kt-red)); 
    }
    .chip .dot { 
      width: 8px; height: 8px; border-radius: 50%; 
      background: var(--c, var(--kt-red)); 
      box-shadow: 0 0 12px var(--c, var(--kt-red));
    }

    /* ────────────── FOOTER (dark — covers fixed bg) ────────────── */
    .footer { 
      background: var(--kt-ink); 
      color: rgba(255,255,255,.4); 
      padding: 80px var(--kt-pad); 
      font-size: 13px; 
      border-top: 1px solid rgba(255,255,255,.05); 
      position: relative; z-index: 10; 
    }
    .footer-inner { 
      max-width: var(--kt-max); margin: 0 auto; 
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 40px;
    }
    @media (max-width: 880px) {
      .footer-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 48px; }
    }
    .footer-left { display: flex; align-items: center; gap: 16px; line-height: 1.4; }
    .footer-left .privacy-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; box-shadow: 0 0 15px rgba(16,185,129,.5); }
    
    .footer-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
    .footer-brand svg { width: 18px; height: auto; }
    .footer-credit { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.2); font-weight: 600; }

    .footer-right { display: flex; align-items: center; justify-content: flex-end; }
    @media (max-width: 880px) { .footer-right { justify-content: center; } }

    .footer-back { 
      display: inline-flex; align-items: center; gap: 10px; 
      color: #fff; font-weight: 600; transition: transform .3s var(--kt-ease), background .3s var(--kt-ease), box-shadow .3s var(--kt-ease); 
      padding: 12px 24px; border-radius: 100px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      will-change: transform;
    }
    .footer-back:hover { 
      color: #fff; 
      background: var(--kt-red); 
      border-color: var(--kt-red);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(201, 21, 42, 0.2);
    }
    .footer-back svg { width: 14px; height: 14px; }

    /* toast */
    .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: #fff; color: var(--kt-ink); padding: 12px 20px; border-radius: 100px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.25); transition: transform .35s var(--kt-ease); z-index: 200; }
    .toast.show { transform: translateX(-50%) translateY(0); }
    .toast .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--kt-red); color: #fff; display: flex; align-items: center; justify-content: center; }
    .toast .dot svg { width: 9px; height: 9px; }

    /* tweaks panel */
    .tw-panel { position: fixed; right: 24px; bottom: 24px; z-index: 500; width: 280px; background: #fff; border: 1px solid var(--kt-line); border-radius: 18px; box-shadow: 0 32px 80px rgba(0,0,0,.18); padding: 18px; color: var(--kt-ink); display: none; }
    body[data-tweaks="on"] .tw-panel { display: block; }
    .tw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .tw-head .t { font-family: var(--kt-ff-serif); font-size: 19px; font-weight: 400; letter-spacing: -0.02em; }
    .tw-head .x { width: 24px; height: 24px; border-radius: 6px; color: var(--kt-ink-3); display: flex; align-items: center; justify-content: center; }
    .tw-head .x:hover { background: var(--kt-off); color: var(--kt-ink); }
    .tw-head .x svg { width: 14px; height: 14px; }
    .tw-row { margin-bottom: 14px; }
    .tw-row:last-child { margin-bottom: 0; }
    .tw-label { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kt-ink-4); margin-bottom: 8px; display: block; }
    .tw-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; background: var(--kt-off); border: 1px solid var(--kt-line); border-radius: 10px; }
    .tw-seg button { padding: 7px 6px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--kt-ink-3); transition: all .15s; }
    .tw-seg button.on { background: #fff; color: var(--kt-ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); font-weight: 600; }

    /* hide fixed bg when "bright" tweak is off — we keep it always on by default */
    body[data-bg="off"] .fixed-bg { display: none; }
    body[data-bg="off"] .band-light { background: var(--kt-bg); }