/** Shopify CDN: Minification failed

Line 3449:35 Expected identifier but found "&"
Line 3452:88 Expected ":"
Line 3452:98 Expected identifier but found ","
Line 3452:106 Expected ":"
Line 3452:116 Expected identifier but found ","

**/
/* ═══════════════════════════════════════════════════════════════
   SHELL — shared by both sections
   ═══════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Page-specific accent palette — extra colors not in the global design system.
   Used only for card-variant accents in outcomes/features/who-it's-for sections.
   All other tokens (--bg, --p, --pl, --pd, --pp, --t1/2/3, --b, --radius-*, --sp-*, --fs-*, --card-bg)
   come from assets/uxpeak-design-system.css. */
:root{
  --deep:var(--deep);--deepL:var(--pd);
  --indigo:var(--indigo);--indigoL:var(--indigoL);
  --fuchsia:var(--fuchsia);--fuchsiaL:var(--fuchsiaL);
  --lilac:var(--lilac);--lilacL:var(--lilacL);
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:clip;overflow-y:scroll}
body{background:var(--bg);color:var(--t1);font-family:'Inter Variable','Inter',system-ui,sans-serif;line-height:1.6;min-height:100vh;position:relative;overflow-x:hidden}

/* No hero override needed — global .rv (in template) uses 28px translate which is good for the hero. */

.up-sec{position:relative;max-width:1240px;margin:0 auto;padding:var(--sp-10) var(--sp-5)}
.up-sec-head{text-align:center;max-width:820px;margin:0 auto var(--sp-9)}
.up-eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  color:var(--pp);letter-spacing:1.6px;text-transform:uppercase;
  padding:8px 18px;border-radius:100px;
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(109,40,217,.1));
  border:1px solid rgba(196,181,253,.24);
  box-shadow:0 0 30px rgba(139,92,246,.18),inset 0 1px 0 rgba(255,255,255,.06);
  margin-bottom:var(--sp-4);
  backdrop-filter:blur(8px);
}
.up-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--pl));box-shadow:0 0 10px var(--pl),0 0 18px rgba(167,139,250,.5)}
.up-h2{
  font-size:var(--fs-h2);font-weight:700;line-height:1.04;letter-spacing:-.02em;
  color:#fff;margin:0 0 var(--sp-4);
}
.up-h2 em{
  font-style:normal;font-weight:700;
  color:#fff;
}
.up-sub{font-size:var(--fs-lg);color:var(--t2);line-height:1.65;margin:0 auto;max-width:620px}

/* Shared color variants — works on both .up-card and .out-card */
/* Purple family (used by features) */
.up-card.c-violet,.out-card.c-violet{--accent:var(--pl);--accent-2:var(--p);--accent-glow:rgba(139,92,246,.22);--accent-border:rgba(167,139,250,.34);--accent-shadow:rgba(139,92,246,.48)}
.up-card.c-deep,.out-card.c-deep{--accent:var(--pd);--accent-2:var(--deep);--accent-glow:rgba(109,40,217,.24);--accent-border:rgba(124,58,237,.36);--accent-shadow:rgba(109,40,217,.48)}
.up-card.c-lilac,.out-card.c-lilac{--accent:var(--lilac);--accent-2:var(--pp);--accent-glow:rgba(196,181,253,.18);--accent-border:rgba(221,214,254,.32);--accent-shadow:rgba(167,139,250,.4)}
.up-card.c-indigo,.out-card.c-indigo{--accent:var(--indigoL);--accent-2:var(--indigo);--accent-glow:rgba(99,102,241,.2);--accent-border:rgba(129,140,248,.32);--accent-shadow:rgba(99,102,241,.42)}
.up-card.c-fuchsia,.out-card.c-fuchsia{--accent:var(--fuchsiaL);--accent-2:var(--fuchsia);--accent-glow:rgba(192,132,252,.2);--accent-border:rgba(216,180,254,.34);--accent-shadow:rgba(192,132,252,.42)}
/* Multi-color variants (used by outcomes) — also define gradient edge colors */
.out-card.c-violet{--edge-1:rgba(167,139,250,.4);--edge-2:rgba(167,139,250,.18)}
.out-card.c-amber{--accent:#FDE047;--accent-2:#FACC15;--accent-glow:rgba(252,204,21,.22);--accent-border:rgba(253,224,71,.36);--accent-shadow:rgba(234,179,8,.45);--edge-1:rgba(253,224,71,.45);--edge-2:rgba(234,179,8,.18)}
.out-card.c-cyan{--accent:#67E8F9;--accent-2:#22D3EE;--accent-glow:rgba(34,211,238,.22);--accent-border:rgba(103,232,249,.36);--accent-shadow:rgba(34,211,238,.45);--edge-1:rgba(103,232,249,.4);--edge-2:rgba(103,232,249,.18)}
.out-card.c-emerald{--accent:#6EE7B7;--accent-2:#34D399;--accent-glow:rgba(52,211,153,.22);--accent-border:rgba(110,231,183,.4);--accent-shadow:rgba(16,185,129,.45);--edge-1:rgba(110,231,183,.45);--edge-2:rgba(52,211,153,.2)}
.out-card.c-rose{--accent:#F9A8D4;--accent-2:#EC4899;--accent-glow:rgba(236,72,153,.22);--accent-border:rgba(249,168,212,.4);--accent-shadow:rgba(236,72,153,.45);--edge-1:rgba(249,168,212,.45);--edge-2:rgba(236,72,153,.18)}

/* Gradient edge — subtle accent border that brightens on hover */
.out-edge{
  position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,var(--edge-1,rgba(167,139,250,.4)) 0%,transparent 30%,transparent 70%,var(--edge-2,rgba(167,139,250,.18)) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.7;transition:opacity .55s;z-index:1;
}
.out-card:hover .out-edge{opacity:1}

/* ═══════════════════════════════════════════════════════════════
   A vs B — Two product page mockups, same width + same height
   ═══════════════════════════════════════════════════════════════ */
.ab-sec{position:relative;overflow:hidden;padding:100px var(--sp-5) 100px;max-width:none;margin:0;background:radial-gradient(ellipse 100% 70% at 50% 0%,#0c0820 0%,#070510 50%,#050508 100%)}
.ab-h2{font-size:clamp(40px,5vw,68px) !important;max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.ab-h2{font-size:clamp(32px,7vw,48px) !important}}

/* Refined senior-level UX annotations — premium dock-style labels */
.ab-col{position:relative}
.ab-note{position:absolute;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--radius-sm);font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:13.5px;font-weight:500;letter-spacing:-.15px;color:rgba(255,255,255,.92);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);white-space:nowrap;z-index:5;opacity:0;animation:abNoteIn 1s cubic-bezier(.22,1,.36,1) forwards;background:linear-gradient(180deg,rgba(28,22,42,.78),rgba(16,12,24,.72));border:1px solid rgba(255,255,255,.06);box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}

/* Subtle accent dot before label */
.ab-note::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;animation:abNoteDot 2.4s ease-in-out infinite}
@keyframes abNoteIn{0%{opacity:0;transform:translateX(var(--in,0)) translateY(4px)}100%{opacity:1;transform:translateX(0) translateY(0)}}
@keyframes abNoteDot{0%,100%{opacity:1;box-shadow:0 0 6px currentColor}50%{opacity:.55;box-shadow:0 0 12px currentColor}}

/* Subtle line connector toward phone */
.ab-note::after{content:'';position:absolute;top:50%;width:24px;height:1px;background:linear-gradient(to var(--lineDir,right),rgba(255,255,255,.16),transparent);transform:translateY(-50%)}

/* BAD notes — pink accent, anchored to the left of phone A */
.ab-note-bad{--in:6px;--lineDir:right;right:calc(100% - 64px);color:#F472B6;border-color:rgba(244,114,182,.18);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 32px rgba(236,72,153,.1),inset 0 1px 0 rgba(255,255,255,.04)}
.ab-note-bad::before{background:#F472B6}
.ab-note-bad::after{right:-24px;background:linear-gradient(to right,rgba(244,114,182,.4),transparent)}
.ab-note-bad.ab-note-1{top:170px;animation-delay:.4s}
.ab-note-bad.ab-note-2{top:440px;animation-delay:.7s}
.ab-note-bad.ab-note-3{top:760px;animation-delay:1s}

/* GREAT notes — emerald accent, anchored to the right of phone B */
.ab-note-good{--in:-6px;--lineDir:left;left:calc(100% - 64px);color:#34D399;border-color:rgba(52,211,153,.18);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 32px rgba(16,185,129,.1),inset 0 1px 0 rgba(255,255,255,.04)}
.ab-note-good::before{order:2;background:#34D399}
.ab-note-good::after{left:-24px;background:linear-gradient(to left,rgba(52,211,153,.4),transparent)}
.ab-note-good.ab-note-1{top:170px;animation-delay:.4s}
.ab-note-good.ab-note-2{top:440px;animation-delay:.7s}
.ab-note-good.ab-note-3{top:760px;animation-delay:1s}

@media(max-width:1320px){
  .ab-note{display:none}
}
.ab-sec::before{content:'';position:absolute;top:-10%;left:-10%;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);filter:blur(120px);pointer-events:none;z-index:0}
.ab-sec::after{content:'';position:absolute;bottom:-20%;right:-12%;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.08),transparent 70%);filter:blur(120px);pointer-events:none;z-index:0}
.ab-sec > *{position:relative;z-index:1;max-width:1240px;margin-left:auto;margin-right:auto}
.ab-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;max-width:1180px;margin:0 auto;z-index:1;justify-items:center;padding:40px 0}
.ab-grid .ab-col{position:relative;z-index:2}
/* Combined rotate + reveal-on-scroll. Use longer/cleaner transition than .rv default */
.ab-grid .ab-col.rv{opacity:0;transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.ab-grid .ab-col:nth-child(1).rv{transform:rotate(-2deg) translate3d(-24px,40px,0)}
.ab-grid .ab-col:nth-child(2).rv{transform:rotate(2deg) translate3d(24px,40px,0)}
.ab-grid .ab-col:nth-child(1).rv.vis{transform:rotate(-2deg) translate3d(0,0,0);opacity:1}
.ab-grid .ab-col:nth-child(2).rv.vis{transform:rotate(2deg) translate3d(0,0,0);opacity:1}
.ab-grid .ab-col:nth-child(1).rv.vis:hover{transform:rotate(0deg) translate3d(0,0,0)}
.ab-grid .ab-col:nth-child(2).rv.vis:hover{transform:rotate(0deg) translate3d(0,0,0)}
.ab-grid > *{position:relative;z-index:1}
.ab-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.ab-tag{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:9px 18px;border-radius:100px;display:inline-flex;align-items:center;gap:8px;color:#fff}
.ab-tag.bad{background:#EC4899;box-shadow:0 6px 20px rgba(236,72,153,.35)}
.ab-tag.good{background:#10B981;box-shadow:0 6px 20px rgba(16,185,129,.35)}
.ab-tag .dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7);animation:abDot 1.8s ease-in-out infinite}
.ab-tag-icon{width:13px;height:13px;color:#fff;flex-shrink:0}
@keyframes abDot{0%,100%{opacity:1}50%{opacity:.4}}

/* Screen cards — tablet-style proportions */
.ab-phone{position:relative;width:400px;height:880px;border-radius:58px;background:#1a1a22;padding:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 0 0 4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05),0 50px 100px -25px rgba(0,0,0,.55),0 20px 40px -15px rgba(0,0,0,.4);overflow:visible}
.ab-phone::before{content:'';position:absolute;top:30px;left:50%;transform:translateX(-50%);width:100px;height:28px;background:#000;border-radius:100px;z-index:10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ab-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;display:flex;flex-direction:column;font-family:'Lato',-apple-system,sans-serif;color:#0a0a10;border-radius:42px}
.ab-status{display:none}

/* ─── Phone A (Default — looks like a tired template) ─── */
.pa-screen{display:flex;flex-direction:column;height:100%}
/* JBL screenshot fills the whole screen */
.pa-screen{padding:0;background:#fff;display:block;position:relative}
.pa-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:42px;background:#fff}
.pa-header{display:flex;align-items:center;justify-content:space-between;padding:54px 22px 14px;border-bottom:1px solid #eee;flex-shrink:0}
.pa-brand{font-family:'Arial',sans-serif;font-size:17px;font-weight:900;letter-spacing:-.3px}
.pa-icons{display:flex;gap:14px;color:#666}
.pa-icons svg{width:18px;height:18px}
.pa-hero{position:relative;background:#f1f1f1;height:240px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pa-shoe{position:absolute;inset:0;background-image:url('assets/shoe-bad.png?v=3');background-position:center;background-repeat:no-repeat;background-size:cover}
.pa-badge-l{position:absolute;top:18px;left:18px;font-size:11px;font-weight:800;letter-spacing:.5px;color:#fff;background:#e11d48;padding:6px 11px;border-radius:3px}
.pa-badge-r{position:absolute;top:18px;right:18px;font-size:11px;font-weight:800;color:#0a0a10;background:#fbbf24;padding:6px 11px;border-radius:3px}
.pa-body{flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.pa-title{font-size:var(--fs-md);font-weight:700;line-height:1.32;color:#0a0a10}
.pa-meta{font-size:11.5px;color:#9aa0a8}
.pa-price-row{display:flex;align-items:baseline;gap:8px;padding-top:2px}
.pa-price{font-size:24px;font-weight:800;color:#0a0a10}
.pa-price-old{font-size:var(--fs-sm);color:#9aa0a8;text-decoration:line-through}
.pa-price-off{font-size:13px;color:#e11d48;font-weight:700}
.pa-select{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid #d4d4d4;border-radius:6px;font-size:13px;color:#0a0a10;background:#fff}
.pa-select-r{color:#888;font-size:13px}
.pa-stars{display:flex;gap:2px;font-size:var(--fs-sm);line-height:1}
.pa-stars span{color:#fbbf24}
.pa-stars span.off{color:#e5e7eb}
.pa-desc{font-size:var(--fs-caption);color:#666;line-height:1.55}
.pa-actions{display:flex;gap:10px;margin-top:auto;padding-top:14px}
.pa-btn-2{flex:1;padding:14px;border-radius:4px;background:#fff;border:1.5px solid #0a0a10;font-size:var(--fs-caption);font-weight:800;letter-spacing:1.2px;color:#0a0a10;text-align:center}
.pa-btn-1{flex:1;padding:14px;border-radius:4px;background:#0a0a10;color:#fff;font-size:var(--fs-caption);font-weight:800;letter-spacing:1.2px;text-align:center}

/* ═══════════════════════════════════════════════════════════════
   Phone B — "Great" — premium headphones product page
   ═══════════════════════════════════════════════════════════════ */
.pb-screen{display:flex;flex-direction:column;height:100%;background:#fbfaf8}

/* HEADER — minimal, confident */
.pb-header{display:flex;align-items:center;justify-content:space-between;padding:56px 20px 14px;flex-shrink:0;background:#fbfaf8;position:relative;z-index:3}
.pb-iconbtn{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(10,10,16,.04);display:flex;align-items:center;justify-content:center;color:#0a0a10}
.pb-iconbtn svg{width:16px;height:16px}
.pb-brand{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-sm);font-weight:800;letter-spacing:3px;color:#0a0a10}
.pb-cartbtn{position:relative}
.pb-cartbtn::after{content:'';position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #fbfaf8}

/* HERO — dark, atmospheric "studio shot" */
.pb-hero{position:relative;height:250px;flex-shrink:0;background:#1a1622;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pb-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 60%, rgba(167,139,250,.22), transparent 55%),
    radial-gradient(circle at 30% 30%, rgba(251,191,36,.06), transparent 45%);
  pointer-events:none;
}
.pb-hero::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
  background-size:24px 24px;
  pointer-events:none;
  opacity:.5;
}
.pb-pill-eye{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:1.2px;color:#fff;text-transform:uppercase;z-index:3}
.pb-pill-eye::before{content:'';width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
.pb-heart{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:3}
.pb-heart svg{width:16px;height:16px;color:#fff;stroke-width:1.8}
.pb-product{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;z-index:2}
.pb-product::before{content:'';position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 60%);filter:blur(20px)}
.pb-product svg{position:relative;width:100%;height:100%}
.pb-thumbs{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.pb-thumb{width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center}
.pb-thumb::after{content:'';width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18)}
.pb-thumb.active{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.pb-thumb.active::after{background:#fff}

/* BODY */
.pb-body{padding:14px 22px 0;flex:1;display:flex;flex-direction:column;gap:0;overflow:hidden;background:#fbfaf8;min-height:0}
.pb-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#7a7585;text-transform:uppercase;margin-bottom:0}
.pb-eyebrow span{margin:0 6px;opacity:.5}
.pb-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pb-title{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.7px;line-height:1;color:#0a0a10;margin:6px 0 0}
.pb-edition{font-size:var(--fs-caption);color:#7a7585;font-weight:500;margin-top:4px;letter-spacing:.1px;line-height:1.35}
.pb-edition em{font-style:normal;color:#0a0a10;font-weight:700}

/* RATING row */
.pb-rating-row{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.pb-rating-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:100px;background:#fef9e7;color:#92400e;font-size:11px;font-weight:700}
.pb-rating-chip .pb-stars{font-size:10px;color:#f59e0b;letter-spacing:.5px}
.pb-rating-meta{font-size:11.5px;color:#7a7585;font-weight:500}
.pb-rating-meta b{color:#0a0a10;font-weight:700}

/* SPEC pills — the wow row */
.pb-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.pb-spec{position:relative;padding:9px 10px 9px;border-radius:var(--radius-sm);background:#fff;border:1px solid rgba(10,10,16,.06);box-shadow:0 1px 0 rgba(10,10,16,.03),0 6px 14px -8px rgba(10,10,16,.08);display:flex;flex-direction:column;gap:5px}
.pb-spec-icon{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#1c1828,#0a0a10);display:flex;align-items:center;justify-content:center;color:#fff}
.pb-spec-icon svg{width:13px;height:13px;stroke-width:2.2}
.pb-spec b{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-caption);font-weight:700;letter-spacing:-.2px;color:#0a0a10;line-height:1;margin-top:2px}
.pb-spec span{font-size:10px;font-weight:500;color:#7a7585;letter-spacing:.1px}

/* PRICE */
.pb-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(10,10,16,.06)}
.pb-price{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.7px;color:#0a0a10;line-height:1}
.pb-finance{font-size:11px;color:#7a7585;text-align:right;line-height:1.35;font-weight:500}
.pb-finance b{color:#0a0a10;font-weight:700;display:block;font-size:11.5px}

/* COLOUR block */
.pb-color-block{margin-top:16px}
.pb-color-label{display:flex;align-items:baseline;gap:7px;font-size:10.5px;color:#7a7585;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.pb-color-label em{font-style:normal;font-size:13px;font-weight:600;color:#0a0a10;letter-spacing:-.1px;text-transform:none}
.pb-swatches{display:flex;gap:9px;margin-top:9px}
.pb-sw{width:30px;height:30px;border-radius:50%;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(10,10,16,.06);transition:transform .2s}
.pb-sw.active{box-shadow:inset 0 0 0 2px #fff,0 0 0 1.5px #0a0a10;transform:scale(1.08)}

/* CTA */
.pb-cta-wrap{margin-top:auto;padding:10px 18px 12px;display:flex;flex-direction:column;gap:7px;background:#fbfaf8;flex-shrink:0;border-top:1px solid rgba(10,10,16,.04)}
.pb-cta{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;border-radius:50px;background:linear-gradient(180deg,#1a1622 0%,#0a0a10 100%);color:#fff;font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-sm);font-weight:600;letter-spacing:-.1px;box-shadow:0 10px 28px -10px rgba(10,10,16,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.pb-cta-left{display:inline-flex;align-items:center;gap:9px}
.pb-cta-left svg{width:15px;height:15px;stroke-width:2.1}
.pb-cta-price{font-size:13.5px;font-weight:700;opacity:.9}
.pb-cta-price .sep{margin:0 8px;opacity:.4}
.pb-trust{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:2px;font-size:10.5px;color:#7a7585;font-weight:500}
.pb-trust-item{display:inline-flex;align-items:center;gap:5px}
.pb-trust-item svg{width:12px;height:12px;color:#7a7585;stroke-width:2}
.pb-trust-sep{color:#cbd5e1}


/* ─── Full-bleed JBL screenshot (Bad phone) ─── */
.pa-screen{padding:0;background:#fff;display:block;position:relative}
.pa-shot{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;border-radius:42px;background:#fff}

/* ─── Full-bleed product image (Great phone hero) ─── */
.pb-product-img{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
  z-index:1;
}
.pb-pill-eye,.pb-heart,.pb-thumbs{z-index:3}
.pb-hero::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,.18) 100%);
}
.pb-hero::after{display:none}


/* ─── Dark Luxury body — "After" phone ────────────────────────────── */

/* Color tokens (warm copper drawn from the headphones in the hero) */
.pb-screen--dark{
  --bg-1:#F4F1EA;        /* warm cream page bg */
  --bg-2:#FAF7F0;        /* lighter card surface */
  --bg-3:#EDE8DD;        /* card surface alt */
  --line:rgba(10,10,16,.08);
  --line-strong:rgba(10,10,16,.14);
  --ink-1:#0A0A10;       /* primary text — near black */
  --ink-2:rgba(10,10,16,.72);
  --ink-3:rgba(10,10,16,.5);
  --ink-4:rgba(10,10,16,.35);
  --copper-1:#CB142C;    /* primary — refined red */
  --copper-2:#9E0F22;    /* deeper red */
  --copper-glow:rgba(203,20,44,.2);
  --gold:#CB142C;        /* match accent */
  background:var(--bg-1);
}

/* Header — glass over photo */
.pb-header--glass{
  position:absolute;top:0;left:0;right:0;z-index:5;
  background:transparent;border-bottom:0;
  padding:16px 18px 12px;
}
.pb-iconbtn--glass{
  background:rgba(255,253,247,.55);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  color:#0A0A10;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(10,10,16,.08),0 4px 12px rgba(10,10,16,.06);
  transition:transform .25s ease, background .25s ease;
}
.pb-iconbtn--glass:hover{transform:translateY(-1px);background:rgba(30,26,42,.65)}
.pb-iconbtn--glass.pb-cartbtn::after{
  content:'';position:absolute;top:7px;right:7px;
  width:6px;height:6px;border-radius:50%;
  background:var(--copper-1);
  box-shadow:0 0 0 1.5px rgba(255,253,247,.95);
}
.pb-brand--light{color:var(--ink-1);text-shadow:0 1px 12px rgba(0,0,0,.4)}

/* Hero — bleeds into the dark body */
.pb-hero--bleed{
  position:relative;height:340px;flex-shrink:0;
  background:#E8E1D2;overflow:hidden;
}
.pb-hero--bleed::before{display:none}
.pb-hero--bleed::after{
  /* bottom fade INTO the cream body */
  content:'';position:absolute;top:auto;bottom:-1px;left:0;right:0;height:130px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(244,241,234,0) 0%, rgba(244,241,234,.55) 55%, var(--bg-1) 100%);
  background-image:linear-gradient(180deg, rgba(244,241,234,0) 0%, rgba(244,241,234,.55) 55%, var(--bg-1) 100%);
  display:block;
}

.pb-pill-eye--glass{
  position:absolute;top:78px;left:16px;z-index:4;
  background:rgba(14,11,22,.42);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  padding:7px 12px 7px 22px;border-radius:100px;
  display:inline-flex;align-items:center;
}
.pb-pill-eye--glass::before{
  content:'';position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#3DD68C;
  box-shadow:0 0 8px rgba(61,214,140,.7);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{transform:translateY(-50%) scale(1);opacity:1}
  50%{transform:translateY(-50%) scale(1.18);opacity:.7}
}

.pb-heart--glass{
  position:absolute;top:78px;right:16px;z-index:4;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,253,247,.55);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(10,10,16,.08),0 4px 12px rgba(10,10,16,.06);
  color:#0A0A10;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .25s ease, color .25s ease;
}
.pb-heart--glass svg{width:16px;height:16px;stroke-width:1.8}
.pb-heart--glass:hover{color:var(--copper-1);transform:scale(1.08)}

.pb-thumbs--dark{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:8px;
}
.pb-thumbs--dark .pb-thumb{
  width:32px;height:6px;border-radius:100px;
  background:rgba(255,255,255,.22);
  border:0;
  cursor:pointer;
  transition:background .25s ease, width .25s ease;
}
.pb-thumbs--dark .pb-thumb.active{
  background:var(--ink-1);width:48px;
}
.pb-thumbs--dark .pb-thumb:hover:not(.active){background:rgba(255,255,255,.4)}


/* Side nav arrows on the hero — glass buttons, vertically centered */
.pb-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;
  width:36px;height:36px;border-radius:50%;padding:0;
  background:rgba(255,253,247,.55);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(10,10,16,.08),0 4px 12px rgba(10,10,16,.06);
  color:#0A0A10;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.pb-nav svg{width:16px;height:16px}
.pb-nav--prev{left:14px}
.pb-nav--next{right:14px}
.pb-nav:hover{
  background:rgba(255,253,247,.75);
  transform:translateY(-50%) scale(1.06);
}

/* Slim progress indicator at the bottom of the hero (replaces the dots) */
.pb-progress{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:4;
  width:64px;height:3px;border-radius:100px;
  background:rgba(255,253,247,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
}
.pb-progress-fill{
  display:block;height:100%;width:25%;border-radius:100px;
  background:#0A0A10;
}



/* Colour selector section under the specs */
.pb-colour-section{
  margin-top:16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.pb-colour-head{display:flex;flex-direction:column;gap:3px}
.pb-colour-eyebrow{
  font-size:9.5px;font-weight:700;letter-spacing:1.4px;
  color:var(--ink-3);text-transform:uppercase;
}
.pb-colour-name{
  font-size:13px;font-weight:600;color:var(--ink-1);
  letter-spacing:-.2px;
}
.pb-swatches--row{
  display:flex;gap:10px;
}
.pb-swatches--row .pb-swatch{
  width:28px;height:28px;
}

/* Body */
.pb-body--dark{
  padding:18px 22px 0;
  background:var(--bg-1);
  flex:1;display:flex;flex-direction:column;gap:0;
  overflow:hidden;min-height:0;
  position:relative;
}


.pb-eyebrow-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:0;
}
.pb-stock--inline{
  font-size:11.5px;letter-spacing:.1px;
  color:var(--ink-2);
  margin-top:0;
  font-weight:500;
  line-height:1;
  display:flex;align-items:center;
}
.pb-stock--inline span{display:inline-flex;align-items:center;gap:6px;line-height:1}
.pb-stock--inline .pb-stock-dot-svg{margin-right:0;vertical-align:0;width:9px;height:9px}
.pb-stock--inline .pb-stock-dot-svg{
  width:0.7em;height:0.7em;
  margin-right:0.45em;
  vertical-align:-0.04em;
}
.pb-stock--inline .pb-stock-dot-svg circle.outer{fill:#0B8C5F;opacity:.18}
.pb-stock--inline .pb-stock-dot-svg circle.inner{fill:#0B8C5F;transform-origin:center;animation:pulse-dot-svg 2.4s ease-in-out infinite}
@keyframes pulse-dot-svg{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.18);opacity:.75}
}
.pb-eyebrow--dark{
  font-size:11px;font-weight:700;letter-spacing:1.8px;
  color:var(--ink-2);text-transform:uppercase;margin-bottom:0;
  display:flex;align-items:center;gap:8px;line-height:1;
}
.pb-eyebrow--dark span{color:var(--copper-1);opacity:.65}

.pb-title--dark{
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1;
  color:var(--ink-1);margin:10px 0 0;
}

.pb-edition--dark{
  font-size:var(--fs-caption);color:var(--ink-2);font-weight:400;margin-top:5px;
  letter-spacing:.1px;line-height:1.4;
}
.pb-edition--dark em{font-style:normal;color:var(--ink-1);font-weight:600}

.pb-rating-row--dark{
  display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap;
}
.pb-rating-row--dark::after{content:'';display:none}
.pb-rating-reviews{font-size:12.5px;color:var(--ink-2);font-weight:400;margin-left:-2px}
.pb-rating-reviews b{color:var(--ink-2);font-weight:400}
.pb-rating-spacer{flex:1;min-width:14px}
.pb-rating-buy{font-size:12.5px;color:var(--ink-2);font-weight:400;text-align:right}
.pb-rating-buy b{color:var(--ink-1);font-weight:600}
.pb-rating-chip--dark{
  display:inline-flex;align-items:center;gap:6px;
  padding:0;border-radius:0;
  background:transparent;border:0;
  color:var(--ink-1);
  font-size:13px;font-weight:700;letter-spacing:-.2px;
}
.pb-rating-chip--dark .pb-stars{color:#D67D00;font-size:16px;letter-spacing:.8px}
/* Partial-fill star — reflects the actual rating (4.2 = 20% of 5th star filled) */
.pb-star-partial{
  background:linear-gradient(90deg,#D67D00 0%,#D67D00 20%,#d4cfc2 20%,#d4cfc2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.pb-rating-meta--dark{font-size:12.5px;color:var(--ink-2);font-weight:400}
.pb-rating-divider{color:var(--ink-4);font-size:var(--fs-caption)}
.pb-rating-meta--dark b{color:var(--ink-1);font-weight:600}

/* Specs — dark glass cards */
/* Stat cards */
.pb-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  margin-top:14px;gap:8px;
}
.pb-stat{
  position:relative;padding:11px 11px 11px;border-radius:var(--radius-sm);
  background:rgba(10,10,16,.025);
  border:1px solid rgba(10,10,16,.07);
  display:flex;flex-direction:column;align-items:flex-start;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
}
.pb-stat:hover{
  transform:translateY(-2px);
  border-color:rgba(203,20,44,.25);
}
.pb-stat-viz{
  height:32px;width:40px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.pb-stat-value{
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:17px;font-weight:600;letter-spacing:-.4px;line-height:1.05;
  color:var(--ink-1);
  display:inline-flex;align-items:baseline;gap:1px;
  white-space:nowrap;
}
.pb-stat-unit{
  font-size:11px;font-weight:500;color:var(--ink-3);
  letter-spacing:-.2px;margin-left:2px;
}
.pb-stat-label{
  font-size:10.5px;font-weight:500;color:var(--ink-3);
  margin-top:3px;letter-spacing:.1px;line-height:1.25;
}

/* Stat-card entrance animation — staggered fade + slide */
.pb-stat{
  opacity:0;transform:translateY(8px);
  animation:pb-stat-in .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.pb-stat:nth-child(1){animation-delay:.15s}
.pb-stat:nth-child(2){animation-delay:.3s}
.pb-stat:nth-child(3){animation-delay:.45s}
@keyframes pb-stat-in{
  to{opacity:1;transform:translateY(0)}
}
/* Carousel dots — floating glass pill at the bottom of the hero */
.pb-dotpill{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px;border-radius:100px;
  background:rgba(255,253,247,.78);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(10,10,16,.08),0 6px 18px rgba(10,10,16,.06);
}
.pb-dotpill-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(10,10,16,.22);
  transition:background .25s ease,transform .25s ease;
}
.pb-dotpill-dot.active{
  background:#0A0A10;
  transform:scale(1.05);
}

/* In-stock indicator lives below the swatches so it reads as the status of the selected color */
.pb-colour-stock{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;
  font-size:12.5px;font-weight:400;letter-spacing:0;
  color:var(--ink-2);line-height:1;
}
.pb-colour-stock .pb-stock-dot-svg{width:9px;height:9px}
.pb-colour-stock .pb-stock-dot-svg circle.outer{fill:#0B8C5F;opacity:.18}
.pb-colour-stock .pb-stock-dot-svg circle.inner{fill:#0B8C5F;transform-origin:center;animation:pulse-dot-svg 2.4s ease-in-out infinite}

/* Viz 1: Battery life — full all the time; subtle dark "boost" sweeps L→R, bolt pulses softly */
.pb-bat{width:30px;height:22px;overflow:visible}
.pb-bat-body{fill:none;stroke:rgba(158,15,34,.45);stroke-width:1.4}
.pb-bat-cap{fill:rgba(158,15,34,.45)}
.pb-bat-fill{fill:var(--copper-1)}
.pb-bat-boost{animation:bat-boost 3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes bat-boost{
  0%{transform:translateX(0);opacity:0}
  20%{opacity:1}
  80%{opacity:1}
  100%{transform:translateX(42px);opacity:0}
}
.pb-bat-bolt{
  fill:#fff;opacity:.92;
  transform-origin:center;transform-box:fill-box;
  animation:bat-bolt-pulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes bat-bolt-pulse{
  0%,100%{opacity:.82;transform:scale(1)}
  50%{opacity:1;transform:scale(1.16)}
}

/* Viz 2: Adaptive ANC — basic signal, both sides fade in/out together */
.pb-anc{width:42px;height:24px;overflow:visible}
.pb-anc-core{fill:var(--copper-1)}
.pb-anc-arc{
  fill:none;stroke:var(--copper-1);stroke-width:1.6;stroke-linecap:round;
  animation:anc-signal 2s cubic-bezier(.4,0,.4,1) infinite;
}
/* Inner pair (closer to core) animates first */
.pb-anc-arc.l1,.pb-anc-arc.r1{animation-delay:0s}
/* Outer pair (further from core) follows */
.pb-anc-arc.l2,.pb-anc-arc.r2{animation-delay:.4s}
@keyframes anc-signal{
  0%,100%{opacity:0}
  30%,70%{opacity:1}
}

/* Viz 3: EQ — three calm bars */
.pb-eq3{
  display:flex;align-items:flex-end;gap:4px;height:24px;
}
.pb-eq3-bar{
  display:block;width:6px;border-radius:2px;
  background:var(--copper-1);
  transform-origin:bottom;
  animation:eq3 1.8s ease-in-out infinite;
}
.pb-eq3-bar:nth-child(1){height:100%;width:7px;animation-delay:0s;animation-duration:1.6s}
.pb-eq3-bar:nth-child(2){height:70%;animation-delay:.15s}
.pb-eq3-bar:nth-child(3){height:48%;animation-delay:.3s}
@keyframes eq3{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.55)}
}

/* Price row */
.pb-price-row--dark{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(10,10,16,.06);
}
.pb-price--dark{
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-weight:700;letter-spacing:-.9px;line-height:1;
  display:inline-flex;align-items:center;gap:3px;
}
.pb-price-currency{font-size:18px;font-weight:600;color:var(--ink-1);line-height:1}
.pb-price-amount{font-size:34px;font-weight:700;color:var(--ink-1);letter-spacing:-1px;line-height:1}


.pb-price-stack{display:flex;flex-direction:column;gap:6px;width:100%}
.pb-finance-inline{
  font-size:11.5px;color:var(--ink-3);
  letter-spacing:.1px;line-height:1.4;
}

.pb-price-group{
  display:inline-flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.pb-price-orig{
  font-size:var(--fs-md);font-weight:500;
  color:var(--ink-3);
  text-decoration:line-through;
  text-decoration-color:rgba(10,10,16,.4);
  letter-spacing:-.3px;
  align-self:center;
}
.pb-save-badge{
  display:inline-flex;align-items:center;
  padding:4px 8px;border-radius:6px;
  background:rgba(196,46,46,.08);
  border:1px solid rgba(196,46,46,.22);
  color:#C42E2E;
  font-size:11px;font-weight:700;letter-spacing:-.1px;
  align-self:center;
  line-height:1;
  text-transform:none;
}

.pb-finance--dark{
  text-align:right;
  font-size:var(--fs-caption);color:var(--ink-2);line-height:1.45;
}
.pb-finance--dark b{display:block;color:var(--ink-1);font-size:13px;font-weight:600;letter-spacing:-.1px}

/* CTA — copper with subtle glow */
.pb-cta-wrap--dark{
  margin-top:auto;padding:14px 18px 16px;
  display:flex;flex-direction:column;gap:0;
  background:var(--bg-1);flex-shrink:0;
  border-top:0;
}
.pb-cta--copper{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 24px;border-radius:100px;
  background:#CB142C;
  color:#fff;
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:var(--fs-body);font-weight:600;letter-spacing:-.2px;
  cursor:pointer;
  position:relative;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease;
  box-shadow:0 4px 12px rgba(203,20,44,.28);
}
.pb-cta--copper:hover{transform:translateY(-1px);background:#9E0F22;box-shadow:0 6px 16px rgba(203,20,44,.36)}
.pb-cta--copper .pb-cta-left{display:inline-flex;align-items:center;gap:6px;color:#fff}
.pb-cta--copper .pb-cta-left svg{width:17px;height:17px;stroke-width:2}
.pb-cta--copper .pb-cta-sep{opacity:.5;font-weight:400;margin:0 2px}
.pb-cta--copper .pb-cta-price{font-size:var(--fs-body);font-weight:600;color:#fff;letter-spacing:-.2px}

/* Trust row */
.pb-trust--dark{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;
  padding:0 4px;
}
.pb-trust--dark .pb-trust-item{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-caption);font-weight:500;color:var(--ink-3);letter-spacing:.1px;
}
.pb-trust--dark .pb-trust-item svg{width:13px;height:13px;color:var(--ink-3)}
.pb-trust--dark .pb-trust-sep{color:var(--ink-4);font-size:11px}
.pb-colours{
  margin-top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.pb-colours-label{display:flex;flex-direction:column;gap:2px}
.pb-colours-eyebrow{
  font-size:9.5px;font-weight:700;letter-spacing:1.6px;
  color:var(--ink-3);text-transform:uppercase;
}
.pb-colours-name{font-size:12.5px;font-weight:600;color:var(--ink-1);letter-spacing:-.2px}
.pb-swatches{display:flex;gap:8px}
.pb-swatch{
  width:24px;height:24px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(10,10,16,.12);
  position:relative;outline:none;
  transition:transform .25s ease, border-color .25s ease;
}
.pb-swatch:hover{transform:scale(1.1)}
.pb-swatch.active{
  border-color:transparent;
  box-shadow:0 0 0 2px var(--bg-1), 0 0 0 3px var(--copper-1);
}
.pb-swatch--midnight{background:linear-gradient(135deg,#1F2E4A 0%,#0E1422 45%,#5B8BBE 100%)}
.pb-swatch--obsidian{background:linear-gradient(135deg,#2A2730 0%,#0A0A10 100%)}
.pb-swatch--bone{background:linear-gradient(135deg,#F4F1EA 0%,#D6CFC2 100%)}
.pb-swatch--sage{background:linear-gradient(135deg,#7A8F7A 0%,#3F5042 100%)}

.pb-stock{
  margin-top:10px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--ink-1);font-weight:500;letter-spacing:-.1px;
}
.pb-lower{margin-top:0}

.pb-meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0;margin-top:14px;
}
.pb-meta-row .pb-stock{margin-top:0}


/* Floating annotations around Phone B */
.ab-note{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;background:rgba(15,13,22,.9);backdrop-filter:blur(12px);border:1px solid;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.4px;white-space:nowrap;z-index:5;color:#fff}
.ab-note .arr{font-size:13px;line-height:1}
.ab-note.n1{top:120px;right:-210px;color:#34d399;border-color:rgba(52,211,153,.45);box-shadow:0 0 24px rgba(52,211,153,.2)}
.ab-note.n2{top:330px;left:-220px;color:var(--pl);border-color:rgba(167,139,250,.45);box-shadow:0 0 24px rgba(167,139,250,.2)}
.ab-note.n3{top:520px;right:-220px;color:#67e8f9;border-color:rgba(103,232,249,.45);box-shadow:0 0 24px rgba(34,211,238,.2)}
.ab-note.n4{bottom:80px;left:-220px;color:#fbbf24;border-color:rgba(251,191,36,.45);box-shadow:0 0 24px rgba(251,191,36,.2)}

@media(max-width:1280px){
  .ab-note{display:none}
}
@media(max-width:1200px){
  .ab-grid{grid-template-columns:1fr;gap:50px}
  /* No tilt when stacked vertically — phones sit straight, but keep the reveal */
  .ab-grid .ab-col:nth-child(1).rv,
  .ab-grid .ab-col:nth-child(2).rv{transform:translate3d(0,40px,0)}
  .ab-grid .ab-col:nth-child(1).rv.vis,
  .ab-grid .ab-col:nth-child(2).rv.vis,
  .ab-grid .ab-col:nth-child(1).rv.vis:hover,
  .ab-grid .ab-col:nth-child(2).rv.vis:hover{transform:translate3d(0,0,0)}
}
@media(max-width:640px){
  .pa-header,.pb-header{padding:42px 18px 12px}
  .ab-tag{font-size:10px;padding:7px 14px}
}
/* ── A vs B phone mockups: scale down on small screens (they're 400×880, too big for mobile) ── */
@media(max-width:520px){
  .ab-sec{overflow-x:hidden}
  .ab-grid{gap:24px;padding:24px 0}
  .ab-phone{transform:scale(.9);transform-origin:top center;margin-bottom:calc(-880px * .1)}
}
@media(max-width:420px){
  .ab-phone{transform:scale(.8);margin-bottom:calc(-880px * .2)}
}
@media(max-width:380px){
  .ab-phone{transform:scale(.68);margin-bottom:calc(-880px * .32)}
}

/* ═══════════════════════════════════════════════════════════════
   WHO IT'S FOR — 5 audience cards in a row
   ═══════════════════════════════════════════════════════════════ */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.who-grid::before{content:'';position:absolute;inset:-40px;background-image:linear-gradient(rgba(167,139,250,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 70% 80% at center,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at center,#000,transparent 80%);pointer-events:none;z-index:-1}

.who-card{
  position:relative;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse 110% 70% at 35% -10%, var(--wc-soft-glow, rgba(196,181,253,.13)), transparent 60%),
    linear-gradient(180deg,rgba(22,19,32,.6),rgba(12,10,20,.4));
  border:1px solid rgba(180,165,210,.1);
  padding:32px;
  box-shadow:0 24px 60px -25px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s;
  isolation:isolate;
  overflow:hidden;
  backdrop-filter:blur(12px);
  cursor:default;
  display:flex;
  flex-direction:column;
}
/* (removed angled gradient outline — using plain 1px border to match topics cards) */
.who-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 22% 28%,rgba(255,255,255,.4) 0,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.25) 0,transparent 1px),
    radial-gradient(circle at 65% 80%,rgba(255,255,255,.3) 0,transparent 1px);
  opacity:.5;
}
.who-card:hover,
.who-card.rv:hover,
.who-card.rv.vis:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(196,181,253,.22) !important;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.who-icon{
  position:relative;z-index:2;
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--wc-glow,rgba(167,139,250,.2)),var(--wc-glow-2,rgba(124,58,237,.08)));
  border:1px solid var(--wc-border,rgba(167,139,250,.24));
  display:flex;align-items:center;justify-content:center;
  color:var(--wc-color,var(--pl));
  margin-bottom:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px var(--wc-shadow,rgba(124,58,237,.18));
  transition:all .4s cubic-bezier(.22,1,.36,1);
}
.who-icon svg{width:20px;height:20px;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* Color variants for Who it's for cards */
.wc-violet{--wc-color:var(--pl);--wc-glow:rgba(167,139,250,.22);--wc-glow-2:rgba(124,58,237,.08);--wc-border:rgba(167,139,250,.28);--wc-shadow:rgba(124,58,237,.22);--wc-top-glow:rgba(139,92,246,.16);--wc-soft-glow:rgba(167,139,250,.13);--wc-hover-border:rgba(167,139,250,.36);--wc-hover-shadow:rgba(139,92,246,.4)}
.wc-pink{--wc-color:#F472B6;--wc-glow:rgba(244,114,182,.22);--wc-glow-2:rgba(190,24,93,.08);--wc-border:rgba(244,114,182,.32);--wc-shadow:rgba(190,24,93,.22);--wc-top-glow:rgba(236,72,153,.16);--wc-soft-glow:rgba(244,114,182,.10);--wc-hover-border:rgba(244,114,182,.4);--wc-hover-shadow:rgba(236,72,153,.4)}
.wc-cyan{--wc-color:#67E8F9;--wc-glow:rgba(103,232,249,.22);--wc-glow-2:rgba(8,145,178,.08);--wc-border:rgba(103,232,249,.32);--wc-shadow:rgba(8,145,178,.22);--wc-top-glow:rgba(34,211,238,.16);--wc-soft-glow:rgba(103,232,249,.11);--wc-hover-border:rgba(103,232,249,.4);--wc-hover-shadow:rgba(34,211,238,.4)}
.wc-amber{--wc-color:#FBBF24;--wc-glow:rgba(251,191,36,.22);--wc-glow-2:rgba(180,83,9,.08);--wc-border:rgba(251,191,36,.32);--wc-shadow:rgba(180,83,9,.22);--wc-top-glow:rgba(245,158,11,.16);--wc-soft-glow:rgba(251,191,36,.10);--wc-hover-border:rgba(251,191,36,.4);--wc-hover-shadow:rgba(245,158,11,.4)}
.wc-green{--wc-color:#34D399;--wc-glow:rgba(52,211,153,.22);--wc-glow-2:rgba(5,150,105,.08);--wc-border:rgba(52,211,153,.32);--wc-shadow:rgba(5,150,105,.22);--wc-top-glow:rgba(16,185,129,.16);--wc-soft-glow:rgba(52,211,153,.10);--wc-hover-border:rgba(52,211,153,.4);--wc-hover-shadow:rgba(16,185,129,.4)}
.wc-rose{--wc-color:#FB7185;--wc-glow:rgba(251,113,133,.22);--wc-glow-2:rgba(190,18,60,.08);--wc-border:rgba(251,113,133,.32);--wc-shadow:rgba(190,18,60,.22);--wc-top-glow:rgba(244,63,94,.16);--wc-soft-glow:rgba(251,113,133,.10);--wc-hover-border:rgba(251,113,133,.4);--wc-hover-shadow:rgba(244,63,94,.4)}
/* (icon svg sizing now defined above with .who-icon) */

/* Creative, modern idle animations per persona */
/* Icon animations removed for cleaner feel */

/* Designers — pen sketching motion (multi-direction wrist movement) */
@keyframes whoSketch{
  0%,100%{transform:translate(0,0) rotate(0)}
  12%{transform:translate(1.5px,-1px) rotate(8deg)}
  24%{transform:translate(-1.5px,0) rotate(-5deg)}
  36%{transform:translate(2px,1px) rotate(6deg)}
  48%{transform:translate(-1px,-1.5px) rotate(-4deg)}
  60%{transform:translate(1px,1px) rotate(3deg)}
  72%{transform:translate(-1.5px,0) rotate(-2deg)}
  84%{transform:translate(.5px,.5px) rotate(1deg)}
}

/* Founders — layout pieces snapping into place with overshoot */
@keyframes whoBuild{
  0%,100%{transform:scale(1) rotate(0)}
  20%{transform:scale(.78) rotate(-4deg);filter:blur(.3px)}
  35%{transform:scale(1.18) rotate(6deg);filter:blur(0)}
  50%{transform:scale(.96) rotate(-2deg)}
  65%{transform:scale(1.06) rotate(2deg)}
  82%{transform:scale(1) rotate(0)}
}

/* Engineers — code typing/cursor blink (alternating sides with subtle slide) */
@keyframes whoTyping{
  0%,100%{transform:translateX(0) scaleX(1);filter:drop-shadow(0 0 0 transparent)}
  20%{transform:translateX(-1.5px) scaleX(.88);filter:drop-shadow(0 0 6px currentColor)}
  35%{transform:translateX(0) scaleX(1)}
  55%{transform:translateX(1.5px) scaleX(1.18);filter:drop-shadow(0 0 6px currentColor)}
  75%{transform:translateX(0) scaleX(1);filter:drop-shadow(0 0 0 transparent)}
}

/* PMs — looking around (3D head turn with subtle tilt) */
@keyframes whoLookAround{
  0%,100%{transform:perspective(140px) rotateY(0) rotateZ(0)}
  20%{transform:perspective(140px) rotateY(-22deg) rotateZ(-3deg)}
  40%{transform:perspective(140px) rotateY(0) rotateZ(0)}
  60%{transform:perspective(140px) rotateY(22deg) rotateZ(3deg)}
  80%{transform:perspective(140px) rotateY(0) rotateZ(0)}
}

/* Anyone curious — book pages flipping (alternating Y rotation) */
@keyframes whoPageFlip{
  0%,100%{transform:perspective(180px) rotateY(0) scale(1)}
  20%{transform:perspective(180px) rotateY(-32deg) scale(1.05)}
  40%{transform:perspective(180px) rotateY(0) scale(1)}
  60%{transform:perspective(180px) rotateY(32deg) scale(1.05)}
  80%{transform:perspective(180px) rotateY(0) scale(1)}
}

/* Hover — speed up animation for interactivity */
.who-card:hover .who-icon svg{animation-duration:1.6s}
.who-card:hover .who-icon{
  background:linear-gradient(135deg,var(--wc-glow,rgba(167,139,250,.3)),var(--wc-glow-2,rgba(124,58,237,.14)));
  border-color:var(--wc-hover-border,rgba(167,139,250,.4));
  transform:scale(1.05);
}
.who-h{
  position:relative;z-index:2;
  font-size:20px;font-weight:600;color:#fff;letter-spacing:-.4px;
  margin:0 0 12px;line-height:1.25;
}
.who-p{
  position:relative;z-index:2;
  font-size:14.5px;color:var(--t2);line-height:1.6;margin:0;letter-spacing:-.005em;
}

@media(max-width:1024px){
  .who-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:640px){
  .who-grid{grid-template-columns:1fr;gap:14px}
  .who-card{padding:26px 24px 24px}
}

/* ═══════════════════════════════════════════════════════════════
   REVIEWS — animated 3-column marquee
═══════════════════════════════════════════════════════════════ */
.rv-sec{position:relative;overflow:hidden}
.rv-marquee{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;height:680px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);max-width:1180px;margin:0 auto}
.rv-col{position:relative;overflow:hidden}
.rv-track{display:flex;flex-direction:column;gap:20px;animation:rvScroll 50s linear infinite;will-change:transform}
.rv-track-reverse{animation:rvScrollRev 60s linear infinite}
.rv-col-2 .rv-track{animation-duration:55s}
.rv-col-3 .rv-track{animation-duration:45s}
.rv-card{
  position:relative;flex-shrink:0;
  padding:28px 26px 22px;border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.5) 0,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.3) 0,transparent 1px),
    radial-gradient(circle at 65% 75%,rgba(255,255,255,.4) 0,transparent 1px),
    radial-gradient(circle at 28% 80%,rgba(255,255,255,.25) 0,transparent 1px),
    radial-gradient(circle at 90% 55%,rgba(255,255,255,.28) 0,transparent 1px),
    linear-gradient(180deg,rgba(22,19,32,.7),rgba(12,10,20,.4));
  border:1px solid rgba(180,165,210,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px -12px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  transition:border-color .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s;
  isolation:isolate;overflow:hidden;
}
.rv-card::before{
  content:'\201C';position:absolute;top:24px;right:20px;
  font-family:Georgia,'Playfair Display',serif;
  font-size:84px;line-height:.7;
  color:rgba(167,139,250,.13);font-weight:700;
  pointer-events:none;
  transition:transform .6s cubic-bezier(.22,1,.36,1),color .6s ease;
  user-select:none;z-index:1;
}
.rv-card > *{position:relative;z-index:1}
.rv-card:hover{
  border-color:rgba(255,255,255,.18);
  transform:translateY(-4px);
}
.rv-card:hover::before{transform:scale(1.12) rotate(-2deg);color:rgba(167,139,250,.28)}
.rv-stars{color:#FBBF24;font-size:13px;letter-spacing:2.5px;margin-bottom:14px;filter:drop-shadow(0 0 6px rgba(251,191,36,.35))}
.rv-q{font-size:14.5px;line-height:1.6;color:var(--t1);margin:0 0 20px;font-weight:400;letter-spacing:-.1px}
.rv-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(196,181,253,.1)}
.rv-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;flex-shrink:0;letter-spacing:.4px;
  background:color-mix(in srgb, var(--av-c, var(--pl)) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--av-c, var(--pl)) 32%, transparent);
  color:var(--av-c, var(--pl));
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.rv-card:hover .rv-avatar{
  transform:scale(1.06);
  background:color-mix(in srgb, var(--av-c, var(--pl)) 18%, transparent);
  border-color:color-mix(in srgb, var(--av-c, var(--pl)) 42%, transparent);
}
.rv-name{font-size:13.5px;font-weight:700;color:var(--t1);line-height:1.2;letter-spacing:-.2px}
.rv-product{font-size:12px;font-weight:500;color:var(--t3);line-height:1.2;margin-top:3px}
.rv-role{font-size:10px;color:var(--t-muted);margin-top:3px;text-transform:uppercase;letter-spacing:.9px;font-weight:600}
@keyframes rvScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes rvScrollRev{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@media(max-width:900px){.rv-marquee{grid-template-columns:1fr 1fr;height:600px}.rv-col-3{display:none}}
@media(max-width:600px){.rv-marquee{grid-template-columns:1fr;height:520px}.rv-col-2{display:none}}

/* ═══════════════════════════════════════════════════════════════
   TOPICS NOBODY TEACHES — bento with rich animated graphics
═══════════════════════════════════════════════════════════════ */
.tp-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px;margin:0 auto}
.tb-1,.tb-2,.tb-3,.tb-4,.tb-5,.tb-6{min-height:340px}

/* TG1 — Ecommerce conversion */
.tg1{position:relative;width:240px;height:170px;display:flex;align-items:center;justify-content:flex-start;padding-left:6px}
.tg1-card{position:relative;width:118px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:8px;backdrop-filter:blur(10px);box-shadow:0 12px 32px -8px rgba(0,0,0,.35);animation:tg1Float 5s ease-in-out infinite;z-index:2}
.tg1-hero{height:60px;border-radius:8px;background:linear-gradient(135deg,var(--pl),var(--pd) 60%,#4C1D95);margin-bottom:8px;position:relative;overflow:hidden}
.tg1-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:250% 100%;animation:tg1Shine 3.6s linear infinite}
.tg1-rows{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.tg1-row{display:flex;align-items:center;gap:6px}
.tg1-stars{display:flex;gap:1.5px}
.tg1-stars span{width:6px;height:6px;background:#FBBF24;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);box-shadow:0 0 4px rgba(251,191,36,.6)}
.tg1-price-row{justify-content:space-between}
.tg1-price{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:13px;font-weight:800;color:#fff;letter-spacing:-.3px}
.tg1-pill{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:8.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--pl),var(--pd));padding:2px 6px;border-radius:4px;letter-spacing:.5px;box-shadow:0 0 8px rgba(167,139,250,.5)}
.tg1-cta{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:9.5px;font-weight:700;color:#fff;background:#0a0a10;padding:7px;border-radius:6px;text-align:center;letter-spacing:.6px;border:1px solid rgba(255,255,255,.06)}
.tg1-stat{position:absolute;right:0;top:50%;transform:translateY(-50%);text-align:left;z-index:3}
.tg1-stat-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1;background:linear-gradient(135deg,#fff,var(--lilac) 50%,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 12px rgba(167,139,250,.5));animation:tg1StatPop 4s ease-in-out infinite}
.tg1-stat-pct{font-size:24px}
.tg1-stat-lbl{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:8px;font-weight:800;color:var(--pl);letter-spacing:1.5px;margin-top:2px}
.tg1-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px var(--pp),0 0 16px var(--pl);opacity:0}
.tg1-spark.s1{top:20%;right:35%;animation:tg1Spk 4s ease-out infinite}
.tg1-spark.s2{top:55%;right:20%;animation:tg1Spk 4s ease-out 1.3s infinite}
.tg1-spark.s3{top:80%;right:42%;animation:tg1Spk 4s ease-out 2.6s infinite}
@keyframes tg1Float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(0)}}
@keyframes tg1Shine{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes tg1StatPop{0%,15%{transform:translateY(-50%) scale(.92);opacity:.5}30%,85%{transform:translateY(-50%) scale(1);opacity:1}100%{transform:translateY(-50%) scale(.92);opacity:.5}}
@keyframes tg1Spk{0%,30%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(.4) translate(0,-8px)}}

/* TG2 — Pricing decoy */
.tg2{position:relative;width:240px;height:170px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-bottom:18px}
.tg2-baseline{position:absolute;left:8px;right:8px;bottom:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.3),transparent)}
.tg2-tier{position:relative;width:54px;display:flex;flex-direction:column;align-items:center}
.tg2-stem{width:54px;border-radius:8px 8px 0 0}
.tg2-price{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:13px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px;line-height:1}
.tg2-strike{text-decoration:line-through;color:rgba(255,255,255,.35)}
.tg2-t1 .tg2-stem{height:50px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1)}
.tg2-t1 .tg2-price{color:rgba(255,255,255,.55)}
.tg2-t2 .tg2-stem{height:114px;background:linear-gradient(180deg,var(--lilac),var(--pl) 45%,var(--pd));box-shadow:0 0 30px rgba(167,139,250,.55),0 0 70px rgba(124,58,237,.3),inset 0 1px 0 rgba(255,255,255,.4);animation:tg2Grow 4.4s cubic-bezier(.22,1,.36,1) infinite;position:relative;overflow:hidden}
.tg2-t2 .tg2-stem::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:250% 100%;animation:tg2Shine 2.6s linear infinite;mix-blend-mode:overlay}
.tg2-t2 .tg2-price{background:linear-gradient(135deg,#fff,var(--lilac) 50%,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 8px rgba(167,139,250,.6))}
.tg2-t3 .tg2-stem{height:60px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.tg2-t3 .tg2-price{color:rgba(255,255,255,.45)}
.tg2-badge{position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:8px;font-weight:800;letter-spacing:1px;color:#fff;background:linear-gradient(135deg,var(--pl),var(--pd));padding:4px 8px;border-radius:100px;white-space:nowrap;box-shadow:0 0 16px rgba(167,139,250,.6);animation:tg2Badge 2.6s ease-in-out infinite}
.tg2-glow{position:absolute;left:-10px;right:-10px;top:-10px;bottom:0;background:radial-gradient(ellipse at 50% 60%,rgba(167,139,250,.25),transparent 65%);pointer-events:none;z-index:-1;animation:tg2Pulse 2.6s ease-in-out infinite}
@keyframes tg2Grow{0%{height:50px}45%,100%{height:114px}}
@keyframes tg2Shine{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes tg2Badge{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@keyframes tg2Pulse{0%,100%{opacity:.7}50%{opacity:1}}

/* TG3 — AI prompt to result */
.tg3{position:relative;width:240px;height:170px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;gap:8px}
.tg3-prompt{position:relative;width:90px;height:62px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:10px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(8px)}
.tg3-cursor{width:1.5px;height:14px;background:var(--pl);animation:tg3Blink 1s steps(2) infinite;flex-shrink:0}
.tg3-text{height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(167,139,250,.6) 100%);width:0;animation:tg3Type 4s ease-in-out infinite}
.tg3-arrow{width:24px;height:10px;color:var(--pl);filter:drop-shadow(0 0 8px rgba(167,139,250,.6));flex-shrink:0;animation:tg3ArrowPulse 2s ease-in-out infinite}
.tg3-result{position:relative;width:90px;height:62px;background:linear-gradient(180deg,rgba(167,139,250,.15),rgba(124,58,237,.08));border:1px solid rgba(167,139,250,.4);border-radius:var(--radius-sm);padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 0 28px rgba(139,92,246,.3);overflow:hidden}
.tg3-shimmer{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);background-size:250% 100%;animation:tg3Shimmer 3s linear infinite;pointer-events:none}
.tg3-line{height:5px;border-radius:3px;background:linear-gradient(90deg,#fff,var(--pp),var(--pl));background-size:200% 100%;animation:tg3LineFill 4s ease-in-out infinite}
.tg3-line.s{width:60%}
.tg3-line:nth-child(2){animation-delay:.1s}
.tg3-line:nth-child(3){animation-delay:.2s}
.tg3-line:nth-child(4){animation-delay:.3s}
.tg3-spark{position:absolute;color:var(--pp);filter:drop-shadow(0 0 6px rgba(167,139,250,.8));pointer-events:none}
.tg3-spark.sp1{width:14px;height:14px;top:8px;left:88px;animation:tg3Twinkle 2.4s ease-in-out infinite}
.tg3-spark.sp2{width:10px;height:10px;top:60%;left:108px;animation:tg3Twinkle 2.4s ease-in-out .8s infinite;color:#fff}
.tg3-spark.sp3{width:8px;height:8px;top:20%;right:30%;animation:tg3Twinkle 2.4s ease-in-out 1.6s infinite;color:var(--lilac)}
.tg3-spark path{fill:currentColor}
@keyframes tg3Blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes tg3Type{0%{width:0}40%{width:60%}50%,100%{width:60%}}
@keyframes tg3ArrowPulse{0%,100%{opacity:.6;transform:translateX(0)}50%{opacity:1;transform:translateX(2px)}}
@keyframes tg3Shimmer{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes tg3LineFill{0%,40%{background-position:200% 0}55%,90%{background-position:0% 0}100%{background-position:200% 0}}
@keyframes tg3Twinkle{0%,100%{opacity:.4;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(180deg)}}

/* TG4 — Visual hierarchy with eye scan */
.tg4{position:relative;width:200px;height:130px}
.tg4 svg{width:100%;height:100%;overflow:visible}
.tg4-block{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.14);stroke-width:.8;transition:fill .4s}
.tg4-b1{animation:tg4FocusOn 5s ease-in-out infinite}
.tg4-b4{animation:tg4FocusOn 5s ease-in-out 1.5s infinite}
.tg4-b5{filter:drop-shadow(0 0 8px rgba(167,139,250,.5))}
@keyframes tg4FocusOn{0%,15%,85%,100%{fill:rgba(255,255,255,.08)}30%,70%{fill:rgba(167,139,250,.25)}}
.tg4-path{stroke-dasharray:240;stroke-dashoffset:240;animation:tg4Path 5s ease-in-out infinite;opacity:.7}
@keyframes tg4Path{0%,5%{stroke-dashoffset:240}65%,100%{stroke-dashoffset:0}}
.tg4-eye{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px rgba(167,139,250,.7));animation:tg4Eye 5s ease-in-out infinite;offset-path:path('M40,21 Q70,21 90,42 T148,64 T80,85');offset-distance:0}
@keyframes tg4Eye{0%,5%{offset-distance:0}65%,75%{offset-distance:100%}80%,100%{offset-distance:100%;opacity:0}}

/* TG5 — Subscription infinity loop */
.tg5{position:relative;width:200px;height:130px;display:flex;align-items:center;justify-content:center}
.tg5-loop{position:absolute;width:200px;height:100px;left:0;top:50%;transform:translateY(-50%)}
.tg5-trail{stroke-dasharray:120 380;stroke-dashoffset:0;animation:tg5Trail 4s linear infinite;filter:drop-shadow(0 0 6px rgba(167,139,250,.7))}
@keyframes tg5Trail{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-500}}
.tg5-pill{position:absolute;font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--pl),var(--pd));width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(167,139,250,.7),inset 0 1px 0 rgba(255,255,255,.3);opacity:0}
.tg5-p1{top:50%;left:32px;transform:translateY(-50%);animation:tg5Pop 4s ease-in-out infinite}
.tg5-p2{top:14px;left:50%;transform:translate(-50%,0);animation:tg5Pop 4s ease-in-out 1.3s infinite}
.tg5-p3{top:50%;right:32px;transform:translateY(-50%);animation:tg5Pop 4s ease-in-out 2.6s infinite}
@keyframes tg5Pop{0%,20%{opacity:0;transform:translateY(-50%) scale(.4)}30%,55%{opacity:1;transform:translateY(-50%) scale(1)}70%,100%{opacity:0;transform:translateY(-50%) scale(.4)}}
.tg5-p2{animation-name:tg5PopMid}
@keyframes tg5PopMid{0%,20%{opacity:0;transform:translate(-50%,0) scale(.4)}30%,55%{opacity:1;transform:translate(-50%,0) scale(1)}70%,100%{opacity:0;transform:translate(-50%,0) scale(.4)}}
.tg5-center{position:relative;width:60px;height:60px;border-radius:50%;background:linear-gradient(180deg,rgba(22,16,38,.95),rgba(14,12,22,.9));border:1px solid rgba(167,139,250,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(10px);box-shadow:0 0 24px rgba(139,92,246,.35),inset 0 1px 0 rgba(255,255,255,.06);z-index:2}
.tg5-mrr{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:13px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1;background:linear-gradient(135deg,#fff,var(--pp));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tg5-mrr-lbl{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:7px;font-weight:800;color:var(--pl);letter-spacing:1.4px;margin-top:2px}

/* TG6 — Onboarding step flow */
.tg6{position:relative;width:240px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.tg6-screens{position:relative;width:100%;height:104px;display:flex;justify-content:center;align-items:center;gap:12px}
.tg6-screen{position:relative;width:54px;height:90px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);padding:8px;display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(8px)}
.tg6-row{height:5px;border-radius:3px;background:rgba(255,255,255,.25)}
.tg6-row-lg{height:8px;background:linear-gradient(90deg,#fff,var(--pp))}
.tg6-row.s{width:60%}
.tg6-circle{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--pl),var(--pd));margin:0 auto 4px;box-shadow:0 0 8px rgba(167,139,250,.5)}
.tg6-btn{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--pl),var(--pd));margin-top:auto;box-shadow:0 0 12px rgba(167,139,250,.5)}
.tg6-s2{animation:tg6Hl 5s ease-in-out 1.5s infinite}
.tg6-s1{animation:tg6Hl 5s ease-in-out 0s infinite}
.tg6-s3{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(124,58,237,.15));border-color:rgba(167,139,250,.5);color:#fff;animation:tg6Hl 5s ease-in-out 3s infinite,tg6Confetti 5s ease-in-out 3s infinite}
.tg6-s3 svg{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(167,139,250,.7))}
@keyframes tg6Hl{0%,15%,85%,100%{transform:scale(1);box-shadow:none;border-color:rgba(255,255,255,.12)}30%,70%{transform:scale(1.06);border-color:rgba(167,139,250,.55);box-shadow:0 0 24px rgba(139,92,246,.45)}}
.tg6-confetti{position:absolute;width:5px;height:5px;border-radius:50%;opacity:0;pointer-events:none}
.tg6-confetti.c1{top:8px;left:8px;background:var(--pl);animation:tg6Conf 5s ease-out 3s infinite}
.tg6-confetti.c2{top:12px;right:6px;background:#FBBF24;animation:tg6Conf 5s ease-out 3.1s infinite}
.tg6-confetti.c3{bottom:8px;left:12px;background:#34D399;animation:tg6Conf 5s ease-out 3.2s infinite}
.tg6-confetti.c4{bottom:12px;right:10px;background:#fff;animation:tg6Conf 5s ease-out 3.3s infinite}
@keyframes tg6Conf{0%,55%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.4)}80%,100%{opacity:0;transform:scale(.4)}}
.tg6-progress{position:relative;width:80%;height:14px;display:flex;align-items:center;justify-content:space-between}
.tg6-track{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.1);border-radius:2px;transform:translateY(-50%)}
.tg6-fill{position:absolute;left:0;top:50%;height:2px;background:linear-gradient(90deg,var(--pl),var(--pd));border-radius:2px;transform:translateY(-50%);box-shadow:0 0 8px rgba(167,139,250,.6);animation:tg6Fill 5s ease-in-out infinite}
.tg6-dot{width:8px;height:8px;border-radius:50%;background:rgba(20,15,32,.95);border:1.5px solid rgba(255,255,255,.2);position:relative;z-index:2;transition:all .4s ease}
.tg6-dot.d1{animation:tg6Dot 5s ease-in-out 0s infinite}
.tg6-dot.d2{animation:tg6Dot 5s ease-in-out 1.5s infinite}
.tg6-dot.d3{animation:tg6Dot 5s ease-in-out 3s infinite}
@keyframes tg6Fill{0%,5%{width:0}30%{width:50%}55%{width:50%}80%,100%{width:100%}}
@keyframes tg6Dot{0%,15%{background:rgba(20,15,32,.95);border-color:rgba(255,255,255,.2)}30%,100%{background:var(--pl);border-color:var(--pl);box-shadow:0 0 8px rgba(167,139,250,.7)}}

@media(max-width:980px){.tp-bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tp-bento{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════
   PRICING — homepage style (3 cards: Free, Pro Monthly, Pro Annual)
═══════════════════════════════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pricing-grid-3{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.pricing-grid-3 > *{display:flex;flex-direction:column}
.pricing-grid-3 .pricing-card{height:100%;display:flex;flex-direction:column;text-align:center;padding:44px 36px}
.pricing-grid-3 .pz-h3{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-h3)!important;font-weight:700;letter-spacing:-.5px;color:var(--t1);margin:0 0 14px;text-align:center}
.pricing-grid-3 .pz-guarantee{margin:0 auto 28px}
.pricing-grid-3 .pz-price-row{justify-content:center;flex-wrap:nowrap;align-items:baseline;gap:12px;margin-bottom:8px}
.pricing-grid-3 .price-num{font-family:'Inter Variable','Inter',system-ui,sans-serif!important;font-size:52px!important;font-weight:500!important;letter-spacing:-.04em!important;line-height:1!important;color:var(--t1)!important}
.pricing-grid-3 .pz-period,.pricing-grid-3 .pz-price-old{font-size:var(--fs-lg);color:var(--t3);font-weight:400}
.pricing-grid-3 .pz-price-old{text-decoration:line-through}
.pricing-grid-3 .pz-discount{padding:4px 10px;border-radius:100px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);font-size:var(--fs-caption);font-weight:600;color:var(--pl);letter-spacing:.5px;white-space:nowrap}
.pricing-grid-3 .pz-desc{font-size:var(--fs-sm);color:var(--t2);margin:0 auto 32px}
.pricing-grid-3 .features-list{flex:1;text-align:left;margin-bottom:32px}
.pricing-grid-3 .cta{width:100%;font-size:var(--fs-body);padding:16px 32px}
.pz-period{font-size:var(--fs-sm);color:var(--t2);font-weight:500}
.cta-ghost{background:rgba(255,255,255,.04);color:var(--t1);border:1px solid rgba(196,181,253,.18);box-shadow:none}
.cta-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(196,181,253,.35);box-shadow:none;transform:translateY(-1px)}
@media(max-width:980px){.pricing-grid-3{grid-template-columns:1fr;max-width:480px;margin:0 auto}}
.pricing-grid > div{transition:transform .5s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.pricing-grid > div:hover{transform:translateY(-6px)}}
.pricing-card{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-highlight);padding:44px 36px;text-align:center;transition:border-color .4s}
.pricing-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(167,139,250,.12),rgba(96,165,250,.05) 20%,transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
.pricing-card > *{position:relative;z-index:1}
.pz-featured{position:relative;border-radius:var(--radius-xl);overflow:visible;isolation:isolate;box-shadow:0 25px 60px -25px rgba(139,92,246,.45),0 10px 30px -15px rgba(139,92,246,.25)}
/* Animated conic-gradient outline (from homepage) */
.pz-featured .pz-border-wrap{position:absolute;inset:-2px;border-radius:26px;overflow:hidden;pointer-events:none;z-index:0}
.pz-border-wrap::before{content:'';position:absolute;top:50%;left:50%;width:220%;padding-bottom:220%;margin-left:-110%;margin-top:-110%;background:conic-gradient(from 0deg,var(--deep) 0deg,var(--p) 30deg,#E9D5FF 60deg,var(--p) 90deg,var(--deep) 140deg,var(--pd) 180deg,var(--pp) 220deg,var(--p) 260deg,var(--deep) 310deg,var(--pl) 340deg,var(--deep) 360deg);animation:pzBorderSpin 5s linear infinite}
.pz-border-wrap::after{content:'';position:absolute;inset:2px;border-radius:var(--radius-xl);background:var(--bg);pointer-events:none}
@keyframes pzBorderSpin{to{transform:rotate(360deg)}}
.pz-featured > .pricing-card{position:relative;z-index:2;border:none}
/* "Most popular" pill badge — matches homepage size */
.pz-badge-popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:100px;background:var(--p);font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#fff;white-space:nowrap;z-index:4;box-shadow:0 0 20px rgba(139,92,246,.4);animation:badgePulse 2.5s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 20px rgba(139,92,246,.4),0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 28px rgba(139,92,246,.65),0 0 50px rgba(139,92,246,.25)}}
.pz-h3{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-h3);font-weight:700;letter-spacing:-.5px;color:var(--t1);margin:0 0 14px}
.pz-guarantee{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);margin:0 auto 28px}
.pz-guarantee span{font-size:var(--fs-caption);font-weight:500;color:#34d399}
.pz-price-row{margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap}
.price-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:52px;font-weight:500;letter-spacing:-0.04em;line-height:1;color:var(--t1)}
.pz-price-old{font-size:var(--fs-lg);color:var(--t3);text-decoration:line-through;font-weight:400}
.pz-discount{padding:3px 9px;border-radius:100px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);font-size:11px;font-weight:600;color:var(--pl);letter-spacing:.5px;white-space:nowrap;line-height:1.2}
.pz-price-row{margin-bottom:8px;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:nowrap}
.pricing-grid-3 .pz-price-row{justify-content:flex-start}
.price-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:52px;font-weight:500;letter-spacing:-0.04em;line-height:1;color:var(--t1)}
.pz-period,.pz-price-old{font-size:var(--fs-md);color:var(--t3);font-weight:400}
.pz-price-old{text-decoration:line-through}
.pz-desc{font-size:var(--fs-sm);color:var(--t2);margin-bottom:32px}
.features-list{text-align:left;margin-bottom:32px}
.features-list > div{opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),color .3s}
.features-list.revealed > div{opacity:1}
.features-list.revealed > div:nth-child(1){transition-delay:.05s,0s,0s}
.features-list.revealed > div:nth-child(2){transition-delay:.1s,0s,0s}
.features-list.revealed > div:nth-child(3){transition-delay:.15s,0s,0s}
.features-list.revealed > div:nth-child(4){transition-delay:.2s,0s,0s}
.features-list.revealed > div:nth-child(5){transition-delay:.25s,0s,0s}
.features-list.revealed > div:nth-child(6){transition-delay:.3s,0s,0s}
.features-list.revealed > div:nth-child(7){transition-delay:.35s,0s,0s}
.features-list.revealed > div:nth-child(8){transition-delay:.4s,0s,0s}
.features-list.revealed > div:nth-child(9){transition-delay:.45s,0s,0s}
.feat-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;font-size:var(--fs-sm);color:var(--t-bright);border-radius:var(--radius-sm);position:relative;cursor:default;transition:background .4s ease,color .4s ease;margin:0 -12px}
.feat-row:hover{background:rgba(255,255,255,.025);color:var(--t1)}
.feat-icon{flex-shrink:0;margin-top:1px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.feat-icon svg{transition:filter .35s ease}
.feat-row:hover .feat-icon svg{filter:drop-shadow(0 0 8px rgba(52,211,153,.5))}
.feat-text{transition:letter-spacing .4s ease}
.feat-row:hover .feat-text{letter-spacing:.1px}
.feat-row.feat-off{color:var(--t3)}
.feat-row.feat-off:hover{background:rgba(255,255,255,.015);color:var(--t2)}
.feat-row.feat-off:hover .feat-icon{transform:scale(1.1) rotate(6deg)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:100px;background:var(--p);color:#fff;font-size:var(--fs-body);font-weight:600;text-decoration:none;transition:all .4s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 24px rgba(139,92,246,.25)}
.cta:hover{background:var(--pl);box-shadow:0 12px 36px rgba(139,92,246,.4);transform:translateY(-1px)}
.pz-cta{width:100%;font-size:var(--fs-body);padding:16px 32px}
.pz-foot{text-align:center;font-size:var(--fs-sm);color:var(--t3);margin-top:32px}
@keyframes badge-pulse{0%,100%{box-shadow:0 0 20px rgba(139,92,246,.4),0 0 0 rgba(139,92,246,0)}50%{box-shadow:0 0 28px rgba(139,92,246,.6),0 0 50px rgba(139,92,246,.25)}}
.pz-featured > div:first-child{animation:badge-pulse 2.5s ease-in-out infinite}
@media(hover:hover){
  .pricing-card:hover{border-color:rgba(139,92,246,.2)}
  .pricing-card:hover::after{opacity:1}
  .pricing-card .cta{position:relative;overflow:hidden}
  .pricing-card .cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:left .7s cubic-bezier(.22,1,.36,1);z-index:1}
  .pricing-card .cta:hover::before{left:100%}
  .pricing-card .cta > *{position:relative;z-index:2}
}
@media(max-width:780px){
  .pricing-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .pricing-card{padding:36px 28px}
}


/* ═══════════════════════════════════════════════════════════════
   PLATFORM MOCKUP — from page.platform.liquid
═══════════════════════════════════════════════════════════════ */
/* ── Scroll reveal (mirrors global .rv/.vis) ── */
/* duplicate .rv removed — using smooth easing version above */

/* ── Hero ── */
.plat-hero{padding:160px var(--sp-5) var(--sp-9);position:relative;overflow:hidden;text-align:center}
.plat-hero-aurora{position:absolute;top:18%;left:50%;transform:translateX(-50%);width:900px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(139,92,246,.18),transparent 60%);pointer-events:none;filter:blur(40px);z-index:0}

/* ── Hero starfield ── */
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.plat-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}

/* Unified heading system */
.plat-hero-h{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:clamp(44px,6vw,76px);font-weight:700;line-height:.98;letter-spacing:-0.04em;color:var(--t1);margin:0 0 var(--sp-5)}
.plat-hero-sub{font-size:var(--fs-lg);color:var(--t2);line-height:1.7;max-width:560px;margin:0 auto var(--sp-6)}

/* Kicker pill */
.plat-kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-caption);font-weight:500;letter-spacing:.3px;color:var(--pl);padding:var(--sp-1) var(--sp-3);border:1px solid rgba(139,92,246,.25);border-radius:100px;background:rgba(139,92,246,.06);margin-bottom:var(--sp-6)}
.plat-kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--p);box-shadow:0 0 8px var(--p);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 4px var(--p)}50%{opacity:.4;box-shadow:0 0 12px var(--p)}}

/* CTA */
.plat-cta{display:inline-flex;align-items:center;gap:10px;padding:var(--sp-3) 36px;background:var(--p);color:#fff;font-family:inherit;font-weight:600;font-size:var(--fs-body);border:none;border-radius:100px;text-decoration:none;box-shadow:0 0 32px var(--glow);position:relative;overflow:hidden;z-index:1;transition:all .3s}
.plat-cta::before{content:'';position:absolute;top:50%;left:50%;width:200%;padding-bottom:200%;margin-left:-100%;margin-top:-100%;background:conic-gradient(transparent 50%,var(--pl) 75%,transparent 100%);animation:borderSpin 3s linear infinite;z-index:-2}
.plat-cta::after{content:'';position:absolute;inset:1.5px;border-radius:inherit;background:var(--p);z-index:-1;transition:background .3s}
@keyframes borderSpin{to{transform:rotate(360deg)}}
.plat-cta:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(139,92,246,.4),0 0 80px rgba(139,92,246,.2)}
.plat-cta:hover::after{background:var(--pd)}

/* ── Floating modern label above platform — tilted with arrow ── */
.pf-anno{display:inline-flex;align-items:center;gap:10px;position:absolute;top:36px;left:8%;z-index:10;padding:8px 16px 8px 8px;border-radius:100px;background:linear-gradient(180deg,rgba(28,22,42,.92),rgba(16,12,24,.85));border:1px solid rgba(196,181,253,.22);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 32px rgba(139,92,246,.2),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:13px;font-weight:500;color:#fff;letter-spacing:-.01em;white-space:nowrap;transform:rotate(-7deg);transform-origin:left center;animation:pfAnnoFloat 5s ease-in-out infinite}
.pf-anno-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:100px;background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(124,58,237,.16));border:1px solid rgba(196,181,253,.32);font-size:10.5px;font-weight:700;color:var(--pp);letter-spacing:.12em;text-transform:uppercase}
.pf-anno-pill::before{content:'';width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--pl));box-shadow:0 0 8px var(--pl);animation:pfAnnoPulse 2s ease-in-out infinite}
.pf-anno-text{color:rgba(255,255,255,.92)}
.pf-anno-arrow{display:block;position:absolute;bottom:-58px;right:-44px;width:80px;height:70px;pointer-events:none;transform:rotate(7deg);filter:drop-shadow(0 0 8px rgba(167,139,250,.35))}
@keyframes pfAnnoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
@keyframes pfAnnoFloat{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-5px)}}

/* ── PLATFORM MOCKUP ── */
.platform{position:relative;max-width:1440px;margin:0 auto;padding:80px var(--sp-3) 60px}
/* Soft purple mesh — pure purple + light purple, soft and atmospheric */
.platform::before{
  content:'';position:absolute;inset:-80px -16% -40px -16%;
  background:radial-gradient(ellipse 60% 55% at 30% 28%,rgba(168,85,247,.30),transparent 75%),radial-gradient(ellipse 55% 50% at 75% 32%,rgba(192,132,252,.26),transparent 75%),radial-gradient(ellipse 65% 50% at 50% 80%,rgba(217,70,239,.18),transparent 75%);
  filter:blur(40px);pointer-events:none;z-index:0;
  opacity:.9;
  animation:platMeshDrift 16s ease-in-out infinite;
}
@keyframes platMeshDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-35px) scale(1.08)}66%{transform:translate(-50px,30px) scale(.94)}}
@keyframes platGridDrift{from{background-position:0 0,0 0}to{background-position:48px 48px,48px 48px}}
/* Stars — only AROUND the platform mockup, not behind it */
.platform::after{content:'';position:absolute;inset:-60px -20% -40px -20%;pointer-events:none;z-index:2;background-image:radial-gradient(1.5px 1.5px at 4% 8%,#fff,transparent),radial-gradient(1px 1px at 8% 18%,rgba(196,181,253,.8),transparent),radial-gradient(2px 2px at 12% 6%,#fff,transparent),radial-gradient(1px 1px at 16% 22%,rgba(167,139,250,.75),transparent),radial-gradient(1.5px 1.5px at 20% 10%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 24% 26%,rgba(196,181,253,.7),transparent),radial-gradient(2px 2px at 28% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 32% 4%,rgba(196,181,253,.85),transparent),radial-gradient(1px 1px at 36% 20%,rgba(167,139,250,.7),transparent),radial-gradient(2px 2px at 40% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 24%,rgba(196,181,253,.85),transparent),radial-gradient(1px 1px at 48% 8%,rgba(255,255,255,.85),transparent),radial-gradient(2px 2px at 52% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 56% 6%,rgba(196,181,253,.8),transparent),radial-gradient(1px 1px at 60% 22%,rgba(167,139,250,.75),transparent),radial-gradient(2px 2px at 64% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 68% 26%,rgba(196,181,253,.85),transparent),radial-gradient(1px 1px at 72% 4%,#fff,transparent),radial-gradient(2px 2px at 76% 18%,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 80% 8%,rgba(167,139,250,.75),transparent),radial-gradient(1px 1px at 84% 22%,rgba(196,181,253,.7),transparent),radial-gradient(2px 2px at 88% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 92% 24%,rgba(196,181,253,.85),transparent),radial-gradient(1px 1px at 96% 10%,#fff,transparent),radial-gradient(1.5px 1.5px at 2% 36%,rgba(196,181,253,.75),transparent),radial-gradient(1px 1px at 6% 50%,#fff,transparent),radial-gradient(2px 2px at 4% 68%,rgba(167,139,250,.8),transparent),radial-gradient(1.5px 1.5px at 8% 82%,#fff,transparent),radial-gradient(1px 1px at 12% 92%,rgba(196,181,253,.75),transparent),radial-gradient(1.5px 1.5px at 96% 38%,rgba(196,181,253,.8),transparent),radial-gradient(1px 1px at 94% 56%,rgba(167,139,250,.75),transparent),radial-gradient(2px 2px at 92% 72%,#fff,transparent),radial-gradient(1.5px 1.5px at 96% 86%,rgba(196,181,253,.8),transparent),radial-gradient(1px 1px at 30% 90%,rgba(167,139,250,.7),transparent),radial-gradient(1.5px 1.5px at 50% 94%,#fff,transparent),radial-gradient(1px 1px at 70% 88%,rgba(196,181,253,.75),transparent);mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,transparent 0%,transparent 50%,#000 85%,#000 100%);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,transparent 0%,transparent 50%,#000 85%,#000 100%);opacity:.95}
@keyframes platStars{0%,100%{opacity:.6}50%{opacity:1}}
/* Shining 4-point sparkle stars — matches live platform.liquid style */
/* Sparkles without drop-shadow filter — cheaper to paint. */
.pf-sparkle{position:absolute;color:rgba(221,214,254,.85);z-index:3;pointer-events:none;animation:pfSpark 4s ease-in-out infinite}

/* While the user is actively scrolling, pause the heavy continuous animations
   in the hero so the browser can spend its frame budget on the scroll.
   Animations resume the instant scrolling stops. Nothing is removed. */
body.is-scrolling .pf-sparkle,
body.is-scrolling .platform-frame-wrap,
body.is-scrolling .platform::before{
  animation-play-state:paused !important;
}
.pf-sparkle svg{width:14px;height:14px;display:block}
.pf-sparkle-1{top:8%;left:6%;animation-delay:0s}
.pf-sparkle-1 svg{width:18px;height:18px}
.pf-sparkle-2{top:14%;right:8%;animation-delay:-1s}
.pf-sparkle-2 svg{width:14px;height:14px}
.pf-sparkle-3{top:4%;left:30%;animation-delay:-2s}
.pf-sparkle-3 svg{width:10px;height:10px}
.pf-sparkle-4{top:6%;right:32%;animation-delay:-2.8s}
.pf-sparkle-4 svg{width:12px;height:12px}
.pf-sparkle-5{top:20%;left:18%;animation-delay:-1.5s}
.pf-sparkle-5 svg{width:8px;height:8px}
.pf-sparkle-6{top:18%;right:18%;animation-delay:-3s}
.pf-sparkle-6 svg{width:10px;height:10px}
.pf-sparkle-7{top:60%;left:3%;animation-delay:-2s}
.pf-sparkle-7 svg{width:14px;height:14px}
.pf-sparkle-8{top:55%;right:3%;animation-delay:-1s}
.pf-sparkle-8 svg{width:12px;height:12px}
@keyframes pfSpark{0%,100%{opacity:.25;transform:scale(.8) rotate(0deg)}50%{opacity:.95;transform:scale(1.2) rotate(45deg)}}

/* Star constellations behind the platform — boosted for "sexy space" feel */
.pf-constellations{position:absolute;inset:-40px -25%;width:auto;height:calc(100% + 80px);pointer-events:none;z-index:1;opacity:.75}
.pf-constellations .const-lines line{stroke:rgba(167,139,250,.32);stroke-width:.9;stroke-dasharray:2 5;stroke-linecap:round}
/* Removed drop-shadow filters from constellation stars — they were expensive
   GPU operations (especially the chained drop-shadows). Stars are still
   visible via fill color and a slightly increased radius. */
.pf-constellations .const-stars circle{fill:var(--pp);fill-opacity:.85;r:1.8}
.pf-constellations .const-stars circle.const-bright{fill:rgba(255,255,255,.95);r:2.6}

/* ────────────────────────────────────────────────────────────────────────────
   PLATFORM GLOW — wide flat overlapping purple ellipses forming a horizontal
   band of atmospheric light. Static (no animation). Pure on-brand purples.
   ──────────────────────────────────────────────────────────────────────────── */
.platform-glow{
  position:absolute;top:-60px;left:50%;margin-left:-800px;
  width:1600px;height:760px;
  pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 55% 35% at 22% 48%,
      rgba(167,139,250,.45), rgba(139,92,246,.3) 55%, transparent 100%),
    radial-gradient(ellipse 60% 35% at 50% 52%,
      rgba(196,181,253,.4), rgba(124,58,237,.28) 55%, transparent 100%),
    radial-gradient(ellipse 55% 35% at 78% 48%,
      rgba(99,102,241,.4), rgba(76,29,149,.28) 60%, transparent 100%);
  filter:blur(40px);
}
.platform > .platform-frame-wrap{position:relative;z-index:2}
.platform > .pf-anno{position:absolute;z-index:10}
/* Dark clay bezel — wraps a thick spinning conic-gradient outline.
   Gently floats up and down to bring the mockup to life. */
.platform-frame-wrap{
  position:relative;
  padding:10px;
  background:#18171c;
  border-radius:calc(var(--radius-lg) + 10px);
  box-shadow:
    inset 0 0 0 1px rgba(196,181,253,.08),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 40px 80px -30px rgba(0,0,0,.55),
    0 20px 40px -20px rgba(0,0,0,.4);
  animation:platformFloat 7s ease-in-out infinite;
}
@keyframes platformFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-14px)}
}
@media(prefers-reduced-motion:reduce){
  .platform-frame-wrap{animation:none}
}
/* Hide other glow layers behind platform */
.pf-border-glow{display:none}
.platform-frame{position:relative;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,rgba(14,14,22,.92),rgba(8,8,14,.96));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);text-align:left;z-index:2}
/* Bottom edge shadow — content cuts off at the edge of view */
.platform-frame::after{content:'';position:absolute;bottom:0;left:0;right:0;height:150px;background:linear-gradient(180deg,transparent 0%,rgba(8,8,14,.5) 30%,rgba(8,8,14,.9) 65%,rgba(8,8,14,1) 90%);pointer-events:none;z-index:5;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}
/* Outer frame — subtle dark border that blends with the page background */
.pf-border-wrap{display:none}
.platform-frame{box-shadow:0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.04),0 30px 80px -30px rgba(0,0,0,.6) !important}
.platform-frame::before{content:'';position:absolute;inset:-1px;border-radius:19px;padding:1px;background:linear-gradient(180deg,rgba(139,92,246,.35),transparent 40%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}

/* Chrome bar */
.pf-chrome{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.01);position:relative;z-index:2}
.pf-dots{display:flex;gap:6px}
.pf-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.08)}
.pf-url{flex:1;padding:6px 12px;border-radius:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-size:11px;color:#555;letter-spacing:.2px;font-family:'Inter Variable','Inter',system-ui,sans-serif;display:flex;align-items:center;gap:8px;max-width:420px;margin:0 auto}
.pf-url svg{flex-shrink:0}
.pf-url span{color:#888}

/* Body layout */
.pf-body{display:grid;grid-template-columns:220px 1fr;min-height:720px;position:relative;z-index:1}

/* ── Sidebar ── */
.pf-sidebar{border-right:1px solid rgba(255,255,255,.04);padding:20px 14px;background:rgba(14,14,22,.6);display:flex;flex-direction:column;gap:4px}
.pf-brand{display:flex;align-items:center;gap:var(--sp-1);padding:0 10px 20px;margin-bottom:8px}
.pf-brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--p),var(--pl));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(139,92,246,.25);flex-shrink:0}
.pf-brand-name{font-size:var(--fs-body);font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#fff,rgba(255,255,255,.6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.pf-nav{display:flex;flex-direction:column;gap:2px}
.pf-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .3s;position:relative;border:1px solid transparent}
.pf-nav-item svg{width:15px;height:15px;stroke:currentColor;flex-shrink:0;opacity:.5}
.pf-nav-item:hover{color:var(--t1);background:rgba(255,255,255,.03)}
.pf-nav-item.active{color:#fff;background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.15)}
.pf-nav-item.active svg{opacity:1}
.pf-nav-item.active::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--p);border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(139,92,246,.15)}

/* Sidebar streak footer */
.pf-streak-box{margin-top:auto;padding:14px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(139,92,246,.02));border:1px solid rgba(139,92,246,.12);position:relative;overflow:hidden}
.pf-streak-box::before{content:'';position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%);pointer-events:none}
.pf-streak-label{font-size:10px;color:var(--t3);margin-bottom:8px;letter-spacing:.5px}
.pf-streak-dots{display:flex;gap:3px;margin-bottom:8px}
.pf-streak-d{flex:1;height:5px;border-radius:2px;background:rgba(255,255,255,.06)}
.pf-streak-d.on{background:linear-gradient(90deg,var(--p),var(--pl));box-shadow:0 0 6px rgba(139,92,246,.15)}
.pf-streak-txt{font-size:11px;color:var(--t2)}
.pf-streak-txt b{color:var(--pl)}

/* ── Main content ── */
.pf-main{flex:1;padding:24px 28px 28px;overflow:hidden;position:relative}

/* Topbar: welcome + search */
.pf-topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px}
.pf-topbar-left h2{font-size:24px;font-weight:700;letter-spacing:-.8px;margin-bottom:4px;color:var(--t1)}
.pf-topbar-left p{font-size:var(--fs-caption);color:var(--t2)}
.pf-topbar-right{display:flex;align-items:center;gap:10px}
.pf-search{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);width:190px;font-size:var(--fs-caption);color:var(--t3)}
.pf-search svg{width:13px;height:13px;stroke:var(--t3);flex-shrink:0}
.pf-bell{width:30px;height:30px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;position:relative}
.pf-bell svg{width:13px;height:13px;stroke:#888}
.pf-bell::after{content:'';position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:#f43f5e;border:2px solid rgba(8,8,14,.96);animation:bellPulse 2s ease-in-out infinite}
@keyframes bellPulse{0%,100%{opacity:1}50%{opacity:.4}}
.pf-avatar{width:30px;height:30px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--p),var(--pd));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}

/* ── Hero "In Progress" card ── */
.pf-hero-card{position:relative;border-radius:var(--radius-xl);overflow:hidden;margin-bottom:24px;isolation:isolate;border:1px solid rgba(139,92,246,.15);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .5s}
.pf-hero-card:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 48px rgba(139,92,246,.12);border-color:rgba(139,92,246,.3)}
.pf-hero-inner{background:radial-gradient(ellipse 65% 130% at 0% 50%,rgba(139,92,246,.34) 0%,rgba(124,58,237,.18) 40%,transparent 75%),radial-gradient(ellipse 55% 70% at 100% 0%,rgba(236,72,153,.3) 0%,rgba(192,38,211,.14) 40%,transparent 70%),radial-gradient(ellipse 70% 60% at 85% 100%,rgba(168,85,247,.25) 0%,transparent 70%),linear-gradient(135deg,#2e0d52 0%,#240944 50%,#1a0735 100%);padding:36px 40px;display:block;position:relative;overflow:hidden;border-radius:23px;min-height:240px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(196,181,253,.08)}
.pf-hero-glow1,.pf-hero-glow2{display:none}
@keyframes pfHGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.1)}}

/* Orbit rings */
.pf-orbits{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:23px}
.pf-orbits::after{display:none}
.pf-orbits::before{display:none}
.pf-orbit{position:absolute;right:-100px;top:50%;border-radius:50%;border:1px solid;transform:translate(50%,-50%)}
.pf-orbit-1{width:260px;height:260px;border-color:rgba(167,139,250,.28)}
.pf-orbit-2{width:420px;height:420px;border-color:rgba(167,139,250,.18)}
.pf-orbit-3{width:580px;height:580px;border-color:rgba(167,139,250,.1)}
.pf-orbit-4{width:740px;height:740px;border-color:rgba(167,139,250,.05);border-style:dashed}
.pf-orbit-spin{position:absolute;right:-100px;top:50%;border-radius:50%;transform:translate(50%,-50%)}
.pf-orbit-spin-1{width:260px;height:260px;animation:pfOrbitSpin 22s linear infinite}
.pf-orbit-spin-1b{width:260px;height:260px;animation:pfOrbitSpin 22s linear infinite;animation-delay:-11s}
.pf-orbit-spin-2{width:420px;height:420px;animation:pfOrbitSpin 36s linear infinite reverse}
.pf-orbit-spin-2b{width:420px;height:420px;animation:pfOrbitSpin 36s linear infinite reverse;animation-delay:-18s}
.pf-orbit-spin-3{width:580px;height:580px;animation:pfOrbitSpin 52s linear infinite}
@keyframes pfOrbitSpin{from{transform:translate(50%,-50%) rotate(0deg)}to{transform:translate(50%,-50%) rotate(360deg)}}
.pf-odot{position:absolute;top:0;left:50%;border-radius:50%;background:var(--pl)}
.pf-orbit-spin-1 .pf-odot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.pf-orbit-spin-1b .pf-odot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;opacity:.75}
.pf-orbit-spin-2 .pf-odot{width:6px;height:6px;margin:-3px 0 0 -3px;background:rgba(167,139,250,.9)}
.pf-orbit-spin-2b .pf-odot{width:4px;height:4px;margin:-2px 0 0 -2px;opacity:.65}
.pf-orbit-spin-3 .pf-odot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:rgba(167,139,250,.75)}
.pf-hero-card:hover .pf-odot{box-shadow:none}
.pf-hero-card:hover .pf-orbit-1{border-color:rgba(167,139,250,.4)}
.pf-hero-card:hover .pf-orbit-2{border-color:rgba(167,139,250,.26)}

/* Hero card content */
.pf-hero-content{position:relative;z-index:3;max-width:58%}
.pf-hero-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:100px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--pl);margin-bottom:18px}
.pf-hero-tag .pf-live{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:bellPulse 2s ease-in-out infinite}
.pf-hero-title{font-size:32px;font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:8px;background:linear-gradient(135deg,#fff,rgba(255,255,255,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pf-hero-chap{font-size:var(--fs-sm);color:var(--t2);margin-bottom:20px;line-height:1.5}
.pf-hero-prog{display:flex;align-items:center;gap:10px;margin-bottom:14px;max-width:280px}
.pf-hero-prog-track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.pf-hero-prog-fill{height:100%;width:50%;background:linear-gradient(90deg,var(--p),var(--pl));border-radius:4px;box-shadow:0 0 8px rgba(139,92,246,.4);animation:pfProgFill 1.2s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes pfProgFill{from{width:0}to{width:50%}}
.pf-hero-pct{font-size:13px;font-weight:700;color:var(--pl);flex-shrink:0}
.pf-hero-missions{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);color:var(--t3);margin-bottom:18px}
.pf-hero-missions svg{width:14px;height:14px;stroke:var(--t3)}
.pf-hero-missions b{color:var(--t2)}
.pf-hero-btn{padding:12px 28px;border-radius:var(--radius-sm);background:var(--p);color:#fff;font-family:inherit;font-size:var(--fs-sm);font-weight:600;border:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 24px rgba(139,92,246,.25),inset 0 1px 0 rgba(255,255,255,.15);cursor:pointer;transition:transform .25s,box-shadow .25s}
.pf-hero-btn:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(139,92,246,.35),inset 0 1px 0 rgba(255,255,255,.15)}

/* Floating graphic */
.pf-hero-graphic{position:absolute;right:32px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.pf-hero-minicard{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 50%,rgba(124,58,237,.08) 100%);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:14px 16px;width:160px;box-shadow:0 10px 32px -8px rgba(0,0,0,.45),0 4px 12px -4px rgba(124,58,237,.18),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.04)}
.pf-hero-minicard::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(196,181,253,.18) 0%,transparent 40%);pointer-events:none;opacity:.7}
.pf-hero-minicard > *{position:relative}
.pf-mini-top{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.pf-mini-dot{width:6px;height:6px;border-radius:50%;background:var(--pl);box-shadow:0 0 6px var(--pl)}
.pf-mini-label{font-size:10px;font-weight:600;color:var(--t2);letter-spacing:.5px}
.pf-mini-bars{display:flex;align-items:flex-end;gap:4px;height:36px;margin-bottom:10px}
.pf-mini-bar{width:14px;border-radius:4px;background:linear-gradient(to top,var(--pd),var(--pl));opacity:.7}
.pf-mini-bar:nth-child(1){height:40%}.pf-mini-bar:nth-child(2){height:65%}.pf-mini-bar:nth-child(3){height:50%}.pf-mini-bar:nth-child(4){height:85%;opacity:1;box-shadow:0 0 8px rgba(139,92,246,.3)}.pf-mini-bar:nth-child(5){height:70%}.pf-mini-bar:nth-child(6){height:55%}
.pf-mini-row{display:flex;align-items:center;justify-content:space-between}
.pf-mini-stat{font-size:13px;font-weight:700;color:#fff}
.pf-mini-trend{font-size:10px;font-weight:600;color:#34d399;display:flex;align-items:center;gap:2px}
.pf-mini-trend svg{width:12px;height:12px}
.pf-hero-minicard2{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 50%,rgba(52,211,153,.06) 100%);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:10px 14px;width:140px;box-shadow:0 8px 24px -8px rgba(0,0,0,.4),0 2px 8px -4px rgba(52,211,153,.18),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.04)}
.pf-hero-minicard2::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(167,243,208,.14) 0%,transparent 40%);pointer-events:none;opacity:.7}
.pf-hero-minicard2 > *{position:relative}
.pf-mini2-row{display:flex;align-items:center;gap:8px}
.pf-mini2-icon{width:22px;height:22px;border-radius:8px;background:rgba(52,211,153,.12);display:flex;align-items:center;justify-content:center}
.pf-mini2-text{font-size:11px;color:var(--t2)}.pf-mini2-text b{color:#fff}
@media(max-width:700px){.pf-hero-graphic{display:none}}

/* ── Section header ── */
.pf-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pf-sec-head h3{font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--t1)}
.pf-view-all{font-size:var(--fs-caption);color:var(--t3);display:flex;align-items:center;gap:4px;cursor:pointer}
.pf-view-all svg{width:12px;height:12px;stroke:currentColor}

/* Filters */
.pf-filters{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.pf-filter{padding:7px 16px;border-radius:100px;font-size:var(--fs-caption);font-weight:500;color:var(--t2);border:1px solid rgba(255,255,255,.06);background:transparent;letter-spacing:.2px}
.pf-filter.active{border-color:rgba(139,92,246,.4);color:#fff;background:rgba(139,92,246,.12);box-shadow:0 0 12px rgba(139,92,246,.1)}

/* ── Course cards ── */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pf-course{position:relative;border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));overflow:hidden;cursor:pointer;transition:transform .5s cubic-bezier(.22,1,.36,1);isolation:isolate;display:flex;flex-direction:column}
.pf-course::before{content:'';position:absolute;inset:0;border-radius:var(--radius-sm);padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:4}
.pf-course:hover{transform:translateY(-3px)}
.pf-course:hover::before{background:linear-gradient(180deg,rgba(139,77,254,.3),rgba(139,77,254,.05))}

/* Cover area */
.pf-cover{position:relative;height:140px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05);z-index:1}

/* Tier badges */
.pf-tier{position:absolute;top:10px;right:10px;z-index:10;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.4px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.pf-tier-free{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:#34d399}
.pf-tier-pro{background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(251,146,60,.12));border:1px solid rgba(251,191,36,.35);color:#fbbf24}

/* ── Cover 1: Ecommerce — mini product card ── */
.cover-ecom{position:absolute;inset:0;background:linear-gradient(135deg,#1a0b2e 0%,#0f0a20 50%,#0a1428 100%);overflow:hidden}
.cover-ecom::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(139,92,246,.15),transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(236,72,153,.08),transparent 60%)}
.cover-ecom::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:24px 24px;opacity:.6}
.ecom-product{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-4deg);width:130px;padding:10px;border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,.4);animation:ecomFloat 6s ease-in-out infinite;z-index:2}
@keyframes ecomFloat{0%,100%{transform:translate(-50%,-50%) rotate(-4deg)}50%{transform:translate(-50%,-54%) rotate(-4deg)}}
.ecom-img{height:48px;border-radius:6px;background:linear-gradient(135deg,var(--pd) 0%,#ec4899 100%);margin-bottom:6px;position:relative;overflow:hidden}
.ecom-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2.5s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.ecom-img svg{position:absolute;top:5px;right:5px;opacity:.9}
.ecom-stars{display:flex;gap:1px;margin-bottom:4px}
.ecom-star{width:8px;height:8px}
.ecom-price-row{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.ecom-price{font-size:13px;font-weight:800;color:#fff;letter-spacing:-.3px}
.ecom-price-old{font-size:10px;color:var(--t3);text-decoration:line-through}
.ecom-btn{height:22px;border-radius:5px;background:linear-gradient(135deg,var(--p),var(--pd));display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:600;color:#fff;position:relative;overflow:hidden}
.ecom-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:btnShine 3s ease-in-out infinite}
@keyframes btnShine{0%,100%{left:-100%}50%{left:100%}}
.ecom-tag-float{position:absolute;padding:5px 10px;border-radius:6px;background:rgba(10,10,20,.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:700;z-index:2;display:flex;align-items:center;gap:3px}
.ecom-tag-cvr{top:14%;right:8%;color:#34d399;animation:tagFloat 5s ease-in-out infinite}
@keyframes tagFloat{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-6px) rotate(5deg)}}
/* Floating platform cursors */
.pf-cursor{position:absolute;z-index:10;pointer-events:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.pf-cursor-1{animation:pfCur1 12s ease-in-out infinite}
@keyframes pfCur1{0%,100%{top:28%;left:52%;opacity:1}15%{top:32%;left:55%}30%{top:45%;left:48%;opacity:1}45%{top:50%;left:42%}55%{top:48%;left:58%;opacity:.8}70%{top:35%;left:62%}85%{top:30%;left:50%;opacity:1}}

/* ── Cover 2: Pricing tiers ── */
.cover-pricing{position:absolute;inset:0;background:linear-gradient(135deg,#0f1a2e 0%,#0a0f20 50%,#18102a 100%);overflow:hidden}
.cover-pricing::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(34,211,238,.12),transparent 60%),radial-gradient(ellipse at 50% 90%,rgba(139,92,246,.1),transparent 60%)}
.cover-pricing::after{content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:40px;height:140%;background:linear-gradient(180deg,rgba(139,92,246,.25) 0%,rgba(139,92,246,.08) 50%,transparent 100%);filter:blur(18px);pointer-events:none;z-index:1;animation:priceBeam 5s ease-in-out infinite}
@keyframes priceBeam{0%,100%{opacity:.6;transform:translateX(-50%) scaleY(1)}50%{opacity:1;transform:translateX(-50%) scaleY(1.08)}}
.price-tiers{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:7px;z-index:2}
.price-tier{width:52px;padding:8px 6px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);text-align:center;position:relative}
.price-tier-1{height:60px;animation:tierBob1 4s ease-in-out infinite}
.price-tier-2{height:85px;background:linear-gradient(180deg,rgba(139,92,246,.3),rgba(139,92,246,.08));border:1px solid rgba(139,92,246,.45);box-shadow:0 0 24px rgba(139,92,246,.25),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(-6px);animation:tierBob2 3s ease-in-out infinite}
.price-tier-3{height:66px;animation:tierBob3 4.5s ease-in-out infinite .5s}
@keyframes tierBob1{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tierBob2{0%,100%{transform:translateY(-6px)}50%{transform:translateY(-10px)}}
@keyframes tierBob3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cover-pricing .price-label{font-size:10px;color:var(--t3);letter-spacing:.5px;text-transform:uppercase;margin-bottom:1px}
.cover-pricing .price-badge{font-size:10px;font-weight:700;color:#22d3ee;letter-spacing:.5px;text-transform:uppercase;margin-bottom:1px}
.cover-pricing .price-num{font-size:var(--fs-lg);font-weight:800;color:#fff;letter-spacing:-.5px}
.cover-pricing .price-cur{font-size:10px;color:var(--t3);font-weight:500}
.price-particle{position:absolute;bottom:20px;width:2px;height:2px;border-radius:50%;background:var(--pl);box-shadow:0 0 4px var(--p);z-index:1;pointer-events:none;animation:priceRise 4s ease-out infinite}
.price-particle-1{left:48%}.price-particle-2{left:52%;animation-delay:.8s}.price-particle-3{left:50%;animation-delay:1.6s}
@keyframes priceRise{0%{opacity:0;transform:translateY(0) scale(.5)}10%{opacity:1;transform:translateY(-8px) scale(1)}80%{opacity:.6;transform:translateY(-60px) scale(.8)}100%{opacity:0;transform:translateY(-80px) scale(.3)}}
.price-annotation{position:absolute;top:12px;right:10%;padding:4px 8px;border-radius:5px;background:rgba(10,10,20,.6);border:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:600;color:var(--pl);display:flex;align-items:center;gap:4px;z-index:2}
.price-annotation svg{width:10px;height:10px;stroke:currentColor}
@keyframes pointerChoice{0%,12%{left:30%;opacity:.9}24%{left:44%;opacity:.6}30%,60%{left:44%;opacity:1}72%{left:60%;opacity:.6}78%,84%{left:60%;opacity:.9}96%{left:44%;opacity:.6}100%{left:30%;opacity:.9}}

/* ── Cover 3: AI neural ── */
.cover-ai{position:absolute;inset:0;background:linear-gradient(135deg,rgba(196,181,253,.06),rgba(236,72,153,.03));overflow:hidden}
.cover-ai::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 60% 50%,rgba(196,181,253,.08),transparent 65%)}
/* connection lines */
.ai-lines{position:absolute;inset:0;z-index:0}
.ai-line{fill:none;stroke-width:1;stroke-linecap:round;stroke:url(#aiLineGrad);animation:aiLineDash 20s linear infinite}
@keyframes aiLineDash{to{stroke-dashoffset:-200}}
.ai-node{position:absolute;width:7px;height:7px;border-radius:50%;z-index:1}
.ai-node-1{top:22%;left:18%;background:rgba(139,92,246,.6);box-shadow:0 0 8px rgba(139,92,246,.4);animation:aiNodePulse 3s ease-in-out infinite}
.ai-node-2{top:55%;left:48%;background:rgba(34,211,238,.5);box-shadow:0 0 8px rgba(34,211,238,.3);animation:aiNodePulse 3s ease-in-out 1s infinite}
.ai-node-3{top:28%;right:22%;background:rgba(236,72,153,.5);box-shadow:0 0 8px rgba(236,72,153,.3);animation:aiNodePulse 3s ease-in-out 2s infinite}
@keyframes aiNodePulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.4);opacity:1}}
.ai-sparkle{position:absolute;color:rgba(196,181,253,.5);animation:aiSpark 4s ease-in-out infinite}
.ai-sparkle-1{top:12%;right:12%;animation-delay:0s}
.ai-sparkle-2{bottom:18%;left:28%;animation-delay:-1.5s}
.ai-sparkle-3{top:42%;left:10%;animation-delay:-3s}
@keyframes aiSpark{0%,100%{opacity:.2;transform:scale(.8) rotate(0deg)}50%{opacity:.8;transform:scale(1.2) rotate(45deg)}}
.ai-prompt{position:absolute;bottom:10px;left:10px;right:10px;padding:6px 10px;border-radius:6px;background:rgba(0,0,0,.4);border:1px solid rgba(196,181,253,.2);z-index:2;display:flex;align-items:center;gap:5px}
.ai-prompt-dot{width:5px;height:5px;border-radius:50%;background:var(--pl);box-shadow:0 0 5px var(--pl);flex-shrink:0}
.ai-prompt-label{font-size:10px;font-weight:600;color:var(--pl);letter-spacing:1px;text-transform:uppercase;margin-right:4px}
.ai-prompt-text{font-size:10px;color:var(--t2);font-family:'Inter Variable','Inter',system-ui,sans-serif;white-space:nowrap;overflow:hidden}
.ai-cursor{display:inline-block;width:1px;height:10px;background:var(--pl);margin-left:1px;animation:aiBlink 1s step-end infinite}
@keyframes aiBlink{50%{opacity:0}}
.ai-output{position:absolute;bottom:36px;right:14px;display:flex;flex-direction:column;gap:3px;z-index:2}
.ai-output-block{height:5px;border-radius:2px;background:rgba(167,139,250,.15);animation:aiBlock 2s ease-in-out infinite}
.ai-output-block:nth-child(1){width:50px;animation-delay:0s}
.ai-output-block:nth-child(2){width:40px;animation-delay:.3s}
.ai-output-block:nth-child(3){width:30px;animation-delay:.6s}
@keyframes aiBlock{0%,100%{opacity:.3;width:var(--w,50px)}50%{opacity:.7;width:calc(var(--w,50px) + 10px)}}

/* ── Card body ── */
.pf-card-body{position:relative;padding:14px 16px 16px;z-index:2;display:flex;flex-direction:column;flex:1}
.pf-card-body .pf-card-foot{margin-top:auto}
.pf-card-cat{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.pf-card-cat::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 5px currentColor}
.pf-card-title{font-size:var(--fs-md);font-weight:700;letter-spacing:-.3px;line-height:1.3;color:#fff;margin-bottom:6px}
.pf-card-desc{font-size:var(--fs-caption);color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:12px}
.pf-card-progress{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.pf-card-progress-track{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.pf-card-progress-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--pl));border-radius:3px;box-shadow:0 0 6px rgba(139,92,246,.4)}
.pf-card-progress-pct{font-size:11px;font-weight:700;color:var(--pl);flex-shrink:0}
.pf-card-foot{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.pf-card-progress ~ .pf-card-foot{border-top:none;padding-top:0}
.pf-card-foot-meta{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:rgba(255,255,255,.55)}
.pf-card-foot-meta svg{width:11px;height:11px;opacity:.5;flex-shrink:0;display:none}
.pf-card-foot-meta b{color:#fff;font-weight:700}
.pf-card-foot-div{width:1px;height:10px;background:rgba(255,255,255,.08)}
.pf-card-foot-arrow{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;margin-left:auto;flex-shrink:0;transition:all .4s}
.pf-course:hover .pf-card-foot-arrow{background:var(--p);border-color:var(--p);box-shadow:0 4px 12px rgba(139,77,254,.4)}
.pf-card-foot-arrow svg{width:12px;height:12px;stroke:rgba(255,255,255,.5)}
.pf-course:hover .pf-card-foot-arrow svg{stroke:#fff}

/* Locked overlay */
.pf-locked-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,5,20,.4) 0%,rgba(10,5,20,.75) 60%,rgba(10,5,20,.92) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;opacity:0;pointer-events:none;transition:opacity .4s}
.pf-course.is-locked:hover .pf-locked-overlay{opacity:1}
.pf-locked-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,146,60,.12));border:1px solid rgba(251,191,36,.4);display:flex;align-items:center;justify-content:center;color:#fbbf24;box-shadow:0 6px 20px rgba(251,191,36,.25)}
.pf-locked-title{font-size:13px;font-weight:700;color:#fff}
.pf-locked-sub{font-size:11px;color:rgba(255,255,255,.65);text-align:center}
.pf-locked-cta{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:100px;background:linear-gradient(135deg,var(--p),var(--pd));border:1px solid rgba(139,77,254,.5);color:#fff;font-size:11px;font-weight:700;box-shadow:0 4px 12px rgba(139,77,254,.35)}

/* ── TRACKS SECTION ── */
.tracks-sec{padding:var(--sp-9) var(--sp-6);max-width:1200px;margin:0 auto;position:relative}
.tracks-sec-h{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-h2);font-weight:700;letter-spacing:-2px;line-height:1.05;color:var(--t1);text-align:center;max-width:720px;margin:0 auto}
.tracks-sec-sub{font-size:var(--fs-lg);color:var(--t2);line-height:1.7;max-width:540px;margin:var(--sp-3) auto 0;text-align:center}
.tracks-sec-label{display:inline-block;font-size:11px;font-weight:600;letter-spacing:2.8px;text-transform:uppercase;color:var(--p);padding:6px 14px;border:1px solid rgba(139,92,246,.2);border-radius:100px;background:rgba(139,92,246,.05);margin-bottom:var(--sp-4)}
.tracks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-8)}
.track{position:relative;padding:28px;border-radius:var(--radius-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-highlight);transition:border-color .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);overflow:hidden;cursor:pointer}
.track::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.07),transparent 50%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}
.track::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--tcol,rgba(139,92,246,.5)),transparent);opacity:0;transition:opacity .4s;z-index:2}
.track:hover{border-color:rgba(139,92,246,.25);transform:translateY(-4px)}
.track:hover::before{opacity:1}
.track:hover::after{opacity:1}
.track-icon-wrap{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);transition:all .4s}
.track:hover .track-icon-wrap{border-color:var(--tcol,var(--p));box-shadow:0 0 24px rgba(139,92,246,.15);transform:scale(1.05)}
.track-icon-wrap svg{width:20px;height:20px;stroke:var(--tcol,var(--pl));transition:stroke .3s}
.track-name{font-size:var(--fs-lg);font-weight:600;color:var(--t1);margin-bottom:6px;letter-spacing:-.3px;position:relative;z-index:1}
.track-meta{font-size:var(--fs-sm);color:var(--t2);font-weight:500;letter-spacing:.2px;display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.track-meta::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--tcol,var(--t3))}
.track-count{position:absolute;top:24px;right:24px;font-size:var(--fs-caption);font-weight:600;color:var(--t3);letter-spacing:1px;z-index:1}

/* ── Mobile: simplify mockup content ── */
@media(max-width:900px){
  .pf-topbar-left p{display:none}
  .pf-hero-missions{display:none}
  .pf-anno{display:none}
}
/* ── Mobile outline/bezel: rebuilt from scratch using CSS `zoom` ──
   The root cause of all the bezel-padding issues was that `transform: scale()`
   only shrinks the visual rendering — the element's layout box stays at full
   unscaled size. So sizing the bezel around it required guessing pixel heights.
   `zoom` actually shrinks the element's layout box, so the bezel naturally
   shrink-fits the scaled content with height:auto. No pixel math, no
   negative-margin tricks, no fade overlay hiding sparse content. */
@media(max-width:900px){
  .plat-hero{overflow-x:clip}
  .platform{margin-top:var(--sp-7);padding:0;perspective:none;overflow:visible;position:relative;z-index:1}
  .platform-glow{
    top:-100px;width:1100px;height:500px;margin-left:-550px;filter:blur(60px);
  }
  .pf-border-wrap{display:none}

  /* The outline/bezel:
     - 10px dark padding all the way around
     - height:auto → shrink-fits the zoomed frame exactly
     - width:1120px → wider than viewport, so right side extends off-screen
       (gives the "platform continues to infinity" feel)
     - margin-left:0 → wrap starts at section's left edge
     - overflow:hidden → clips any sub-pixel rendering overflow */
  .platform-frame-wrap{
    transform:none;
    animation:none;
    padding:10px;
    background:#18171c;
    border-radius:26px;
    width:1120px;
    height:auto;
    overflow:hidden;
    margin-left:0;
  }

  /* The frame itself — zoom shrinks the entire layout box (not just visual). */
  .platform-frame{
    width:1100px;
    zoom:0.8;
    margin:0;
    transform:none;
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
  }

  /* Sensible iframe content area — shows hero + first row of cards naturally. */
  .cp-preview-wrap{height:1100px}

  /* Kill the bottom fade overlay — it was creating fake dark "padding" at the
     bottom that made the bezel look uneven. */
  .platform-frame::after{display:none}
}

@media(max-width:600px){
  .platform-frame-wrap{border-radius:22px}
  .platform-frame{zoom:0.62}
}

@media(max-width:400px){
  .platform-frame-wrap{border-radius:20px}
  .platform-frame{zoom:0.5}
}
@media(max-width:1000px){.tracks-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .tracks-grid{grid-template-columns:repeat(2,1fr)}
  .track{padding:22px}
  .track-name{font-size:var(--fs-md)}
  .track-meta{font-size:var(--fs-sm)}
}
@media(max-width:600px){
  .plat-hero{padding:130px var(--sp-4) var(--sp-8)}
  .plat-hero-h{font-size:clamp(36px,10vw,48px)}
  .plat-hero-sub{font-size:var(--fs-md);line-height:1.65}
  .tracks-sec{padding:var(--sp-8) var(--sp-4)}
  .tracks-sec-sub{font-size:var(--fs-body)}
}
@media(max-width:500px){
  .tracks-grid{grid-template-columns:1fr}
  .track{padding:24px}
  .track-name{font-size:var(--fs-lg)}
}

/* ── Pre-sign up modal ── */
.psm-overlay{position:fixed;inset:0;z-index:9999;background:rgba(3,3,6,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s}
.psm-overlay.psm-open{opacity:1;pointer-events:auto}
.psm-modal{position:relative;max-width:680px;width:92%;max-height:90vh;overflow-y:auto;border-radius:var(--radius-xl);padding:48px 52px;background:linear-gradient(170deg,rgba(20,16,36,.97) 0%,rgba(8,6,16,.99) 100%);border:1px solid rgba(139,92,246,.12);box-shadow:0 60px 160px rgba(0,0,0,.7),0 0 120px rgba(139,92,246,.06),inset 0 1px 0 rgba(255,255,255,.04);transform:translateY(24px) scale(.96);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.psm-modal::before{content:'';position:absolute;top:-1px;left:60px;right:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),transparent);pointer-events:none}
.psm-modal::after{content:'';position:absolute;top:0;right:0;width:300px;height:300px;background:radial-gradient(circle,rgba(139,92,246,.06),transparent 70%);pointer-events:none;border-radius:var(--radius-xl)}
.psm-open .psm-modal{transform:translateY(0) scale(1)}
.psm-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;z-index:2}
.psm-close:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18)}
.psm-close svg{width:15px;height:15px;stroke:var(--t2);stroke-width:2}
.psm-eyebrow{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--p);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.psm-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--p);box-shadow:0 0 10px var(--p)}
.psm-title{font-size:28px;font-weight:700;letter-spacing:-.8px;color:#fff;margin-bottom:10px;line-height:1.2}
.psm-sub{font-size:var(--fs-body);color:var(--t2);line-height:1.7;margin-bottom:32px}
.psm-field{margin-bottom:22px}
.psm-label{font-size:13px;font-weight:500;color:var(--t-bright);margin-bottom:8px;display:block}
.psm-input{width:100%;padding:14px 18px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:var(--fs-body);outline:none;transition:all .25s}
.psm-input:focus{border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.04);box-shadow:0 0 0 4px rgba(139,92,246,.1)}
.psm-input::placeholder{color:var(--t3)}
.psm-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
.psm-row .psm-field{margin-bottom:22px}
.psm-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);margin:6px 0 24px}
.psm-topics-label{font-size:13px;font-weight:500;color:var(--t-bright);margin-bottom:14px;display:block}
.psm-topics-label span{font-weight:400;color:var(--t3)}
.psm-topics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.psm-chip{padding:9px 18px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .25s;user-select:none}
.psm-chip:hover{border-color:rgba(139,92,246,.25);color:var(--t1);background:rgba(139,92,246,.06)}
.psm-chip.psm-chip-on{background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(139,92,246,.1));border-color:var(--p);color:#fff;box-shadow:0 0 20px rgba(139,92,246,.15),inset 0 1px 0 rgba(255,255,255,.06)}
.psm-chip.psm-chip-on::before{content:'✓ ';font-size:11px;opacity:.7}
.psm-other{margin-top:6px}
.psm-consent{display:flex;align-items:flex-start;gap:12px;margin-top:28px;padding:16px 18px;border-radius:var(--radius-sm);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.psm-consent-check{position:relative;flex-shrink:0;width:20px;height:20px;margin-top:1px}
.psm-consent-check input{position:absolute;opacity:0;width:20px;height:20px;cursor:pointer;z-index:1;margin:0}
.psm-consent-box{width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;transition:all .2s;pointer-events:none}
.psm-consent-check input:checked ~ .psm-consent-box{background:var(--p);border-color:var(--p);box-shadow:0 0 12px rgba(139,92,246,.3)}
.psm-consent-check input:checked ~ .psm-consent-box svg{opacity:1}
.psm-consent-box svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5;fill:none;opacity:0;transition:opacity .2s}
.psm-consent-text{font-size:13px;color:var(--t2);line-height:1.55}
.psm-consent-text a{color:var(--pl);text-decoration:none;border-bottom:1px solid rgba(167,139,250,.3);transition:border-color .2s}
.psm-consent-text a:hover{border-color:var(--pl)}
.psm-submit{width:100%;padding:16px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;font-family:inherit;font-size:var(--fs-body);font-weight:600;border:none;cursor:pointer;margin-top:24px;transition:all .3s;box-shadow:0 8px 32px rgba(139,92,246,.2),inset 0 1px 0 rgba(255,255,255,.1);letter-spacing:.2px}
.psm-submit:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,92,246,.35),inset 0 1px 0 rgba(255,255,255,.1)}
.psm-submit:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
/* Step dots */
.psm-steps{display:flex;gap:8px;justify-content:center;margin-bottom:28px}
.psm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .3s}
.psm-dot-active{background:var(--p);box-shadow:0 0 10px rgba(139,92,246,.3)}
/* Step transitions */
.psm-step{animation:psm-stepIn .35s ease both}
@keyframes psm-stepIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
/* Back button */
.psm-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--t2);font-family:inherit;font-size:var(--fs-sm);cursor:pointer;padding:0;transition:color .2s}
.psm-back:hover{color:var(--t1)}
/* Textarea */
.psm-textarea{resize:vertical;min-height:80px;max-height:200px;line-height:1.5}
/* Skip link */
.psm-skip{text-align:center;margin-top:14px;font-size:13px;color:var(--t3);cursor:pointer;transition:color .2s}
.psm-skip:hover{color:var(--t2)}
.psm-success{text-align:center;padding:32px 0;position:relative;overflow:hidden}
.psm-success-icon{width:72px;height:72px;border-radius:50%;background:rgba(52,211,153,.06);border:1.5px solid rgba(52,211,153,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;animation:psm-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;box-shadow:0 0 40px rgba(52,211,153,.1)}
.psm-success-h{font-size:24px;font-weight:700;color:var(--t1);margin-bottom:10px;letter-spacing:-.3px;animation:psm-fadeUp .6s .15s both}
.psm-success-p{font-size:var(--fs-sm);color:var(--t2);line-height:1.6;animation:psm-fadeUp .6s .25s both}
.psm-code-card{margin:28px auto;padding:28px 32px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);text-align:center;position:relative;animation:psm-fadeUp .6s .35s both;max-width:340px}
.psm-code-label{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--t2);margin-bottom:12px}
.psm-code-value{font-size:34px;font-weight:800;letter-spacing:4px;color:var(--pl);font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace}
.psm-code-sub{font-size:13px;color:var(--t2);margin-top:10px}
/* Confetti canvas */
.psm-confetti{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.psm-success>*:not(.psm-confetti){position:relative;z-index:1}
/* Success animations */
@keyframes psm-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes psm-fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes psm-glow{0%,100%{box-shadow:0 0 40px rgba(52,211,153,.15),0 0 80px rgba(139,92,246,.08)}50%{box-shadow:0 0 60px rgba(52,211,153,.25),0 0 100px rgba(139,92,246,.15)}}
/* Modal accessibility */
.psm-input:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.psm-consent-check input:focus-visible ~ .psm-consent-box{outline:2px solid var(--p);outline-offset:2px}
.psm-chip:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.psm-submit:focus-visible{outline:2px solid var(--pl);outline-offset:3px}
.psm-close:focus-visible{outline:2px solid var(--p);outline-offset:2px}
@media(max-width:700px){
  .psm-modal{padding:32px 24px;border-radius:var(--radius-lg);max-width:95%}
  .psm-title{font-size:var(--fs-h3)}
  .psm-sub{font-size:var(--fs-sm)}
  .psm-label{font-size:var(--fs-sm)}
  .psm-input{padding:12px 16px;font-size:var(--fs-body)}
  .psm-topics-label{font-size:var(--fs-sm)}
  .psm-chip{padding:9px 16px;font-size:var(--fs-sm)}
  .psm-topics{gap:8px}
  .psm-consent{padding:14px}
  .psm-consent-text{font-size:13px}
  .psm-submit{font-size:var(--fs-body);padding:15px}
}

/* ═══════════════════════════════════════════════════════════════
   HERO SECTION + PLATFORM MOCKUP
═══════════════════════════════════════════════════════════════ */
.hero-sec{position:relative;padding:160px 0 40px;overflow:hidden;isolation:isolate;max-width:none !important;width:100vw;margin-left:calc(-50vw + 50%);background:
  /* deep cosmic bloom around the platform area */
  radial-gradient(ellipse 70% 55% at 50% 65%, rgba(91,33,182,.22), transparent 75%),
  /* violet halo at the top of the hero */
  radial-gradient(ellipse 90% 40% at 50% 0%, rgba(76,29,149,.18), transparent 65%)
  /* (was a cyan whisper at the bottom — removed because it tinted the area
     above the social proof section green/teal when mixed with the violet) */
}
/* Soft fade at the bottom edge so the platform glow / cosmic bloom doesn't
   end in a sharp horizontal line where the hero meets the next section. */
.hero-sec::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:260px;
  background:linear-gradient(to bottom, transparent 0%, rgba(5,5,8,.6) 55%, var(--bg) 100%);
  pointer-events:none;
  z-index:6;
}
@media(max-width:768px){
  .hero-sec{padding-top:96px;padding-bottom:30px}
  .hero-sec::after{height:140px}
}
/* Tight top padding on the trusted-by section so the mockup and the cards
   feel related, not separated by a big empty band. */
.sp-sec{padding-top:32px}
@media(max-width:768px){
  .sp-sec{padding-top:24px}
}
/* ═════ SPACE / REVEAL GRADIENTS — cinematic, anchored, futuristic ═════ */

/* Top-down spotlight above the heading — a violet spot that sways side-to-side
   with a subtle rotation. Adds atmosphere to the hero area above the platform. */
.hero-glow-bg{display:none}
@keyframes heroSpotDrift{
  0%,100%{background-position:30% 0%;transform:rotate(-3deg);opacity:.85}
  50%{background-position:70% 0%;transform:rotate(3deg);opacity:1}
}

/* Distant stars — dense starfield with subtle twinkle */
.hero-stars{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(1px 1px at 2% 6%,#fff,transparent),radial-gradient(1.5px 1.5px at 7% 36%,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 11% 22%,#fff,transparent),radial-gradient(1px 1px at 15% 4%,rgba(196,181,253,.75),transparent),radial-gradient(1.5px 1.5px at 20% 18%,#fff,transparent),radial-gradient(1px 1px at 24% 6%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 28% 26%,#fff,transparent),radial-gradient(1px 1px at 32% 4%,#fff,transparent),radial-gradient(1px 1px at 38% 18%,rgba(167,139,250,.7),transparent),radial-gradient(1px 1px at 44% 6%,#fff,transparent),radial-gradient(1px 1px at 48% 24%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 52% 18%,#fff,transparent),radial-gradient(1px 1px at 58% 12%,rgba(196,181,253,.75),transparent),radial-gradient(1px 1px at 62% 18%,rgba(196,181,253,.7),transparent),radial-gradient(1.5px 1.5px at 67% 26%,#fff,transparent),radial-gradient(1px 1px at 72% 18%,rgba(167,139,250,.75),transparent),radial-gradient(1.5px 1.5px at 78% 28%,#fff,transparent),radial-gradient(1px 1px at 82% 14%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 88% 16%,rgba(167,139,250,.8),transparent),radial-gradient(1.5px 1.5px at 92% 12%,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 98% 8%,rgba(196,181,253,.75),transparent),radial-gradient(1px 1px at 5% 56%,#fff,transparent),radial-gradient(1px 1px at 10% 68%,rgba(167,139,250,.7),transparent),radial-gradient(1px 1px at 14% 60%,#fff,transparent),radial-gradient(1px 1px at 18% 72%,rgba(196,181,253,.7),transparent),radial-gradient(2px 2px at 24% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 28% 76%,#fff,transparent),radial-gradient(1px 1px at 32% 52%,rgba(167,139,250,.75),transparent),radial-gradient(2px 2px at 38% 60%,#fff,transparent),radial-gradient(1px 1px at 42% 56%,rgba(167,139,250,.7),transparent),radial-gradient(1px 1px at 48% 54%,rgba(167,139,250,.75),transparent),radial-gradient(1.5px 1.5px at 52% 92%,#fff,transparent),radial-gradient(1.5px 1.5px at 56% 84%,#fff,transparent),radial-gradient(1px 1px at 60% 50%,rgba(196,181,253,.75),transparent),radial-gradient(1.5px 1.5px at 64% 56%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 70% 86%,rgba(196,181,253,.7),transparent),radial-gradient(1.5px 1.5px at 74% 70%,#fff,transparent),radial-gradient(1px 1px at 80% 62%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 86% 56%,rgba(196,181,253,.85),transparent),radial-gradient(1px 1px at 92% 80%,rgba(196,181,253,.85),transparent),radial-gradient(1.5px 1.5px at 96% 70%,#fff,transparent);mask-image:radial-gradient(ellipse 100% 90% at 50% 50%,#000 0%,#000 50%,transparent 95%);-webkit-mask-image:radial-gradient(ellipse 100% 90% at 50% 50%,#000 0%,#000 50%,transparent 95%);opacity:.9;animation:heroStarTwinkle 6s ease-in-out infinite}@keyframes heroStarTwinkle{0%,100%{opacity:.85}50%{opacity:.65}}

.hero-content{position:relative;z-index:10;isolation:isolate;max-width:1000px;margin:0 auto;text-align:center;padding:0 24px}
.hero-eyebrow{margin-bottom:18px}
.hero-eyebrow-live{color:#34D399;background:linear-gradient(135deg,rgba(52,211,153,.14),rgba(16,185,129,.08));border:1px solid rgba(52,211,153,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.hero-live-dot-green{background:#34D399!important;box-shadow:0 0 10px #34D399!important;animation:heroLiveGreen 1.6s ease-in-out infinite}
@keyframes heroLiveGreen{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
.hero-plus,.hero-cta-plus{display:inline-block;background:linear-gradient(135deg,#fff 0%,var(--pp) 50%,var(--pl) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;animation:heroPlusGlow 3.5s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(167,139,250,.45))}
.hero-cta-plus{background:none;-webkit-text-fill-color:#fff;color:#fff;filter:none;animation:none;margin-left:1px}
@keyframes heroPlusGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(167,139,250,.45))}50%{filter:drop-shadow(0 0 22px rgba(167,139,250,.85))}}
.hero-live-dot{width:6px;height:6px;border-radius:50%;background:var(--p);box-shadow:0 0 10px var(--p);animation:heroLive 1.6s ease-in-out infinite}
@keyframes heroLive{0%,100%{opacity:1}50%{opacity:.5}}
/* Hero heading — matches the unified playbook hero pattern (slightly looser
   letter-spacing because this hero is centered, which reads more cramped than
   left-aligned at the same kerning) */
.hero-h1{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:clamp(44px,6vw,76px);font-weight:700;line-height:.98;letter-spacing:-0.02em;color:#fff;margin:0 auto 28px;max-width:960px}
.hero-h1 em{font-style:normal;font-weight:700;color:#fff}
.hero-h1 .nobr{white-space:nowrap}
/* Hero heading: longer wording on desktop, shorter on mobile */
.hero-h1 .h-mob{display:none}
@media(max-width:768px){
  .hero-h1 .h-desk{display:none}
  .hero-h1 .h-mob{display:inline}
}
@media(max-width:560px){.hero-h1{font-size:clamp(36px,10vw,48px)}}
.hero-p{font-size:var(--fs-lg);color:var(--t2);line-height:1.7;max-width:560px;margin:0 auto 36px}
@media(max-width:600px){.hero-p{font-size:var(--fs-md);line-height:1.65}}
/* Mobile: stack hero buttons vertically, full-width */
@media(max-width:600px){
  .hero-ctas{flex-direction:column;width:100%;gap:12px}
  .hero-ctas .cta,.hero-ctas .cta-g{width:100%;justify-content:center}
  .hero-ctas-wrap{width:100%}
}
.hero-trust{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:36px;flex-wrap:wrap}
.hero-trust-item{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;color:var(--t-bright);background:transparent;border:none;padding:0;transition:color .3s ease,transform .3s ease}
.hero-trust-item:hover{color:#fff;transform:translateY(-1px)}
.hero-trust-item svg{flex-shrink:0}
.hero-trust-divider{display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(196,181,253,.28)}
/* Social proof below platform mockup — clean premium dark glass */
.hero-social{position:relative;z-index:3;max-width:860px;margin:48px auto 0;padding:0 var(--sp-3)}
.hero-social-card{position:relative;display:flex;align-items:center;justify-content:center;gap:0;padding:22px 28px;border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(20,20,26,.55) 0%,rgba(12,12,18,.5) 100%);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 32px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.02);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4)}
/* Each stat block */
.hero-social-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 24px;text-align:center;min-height:78px}
.hero-social-bignum{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;background:linear-gradient(120deg,#fff 0%,var(--lilacL) 40%,var(--pp) 80%,var(--pl) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}
.hero-social-bignum-sm{font-size:var(--fs-lg)}
.hero-social-plus{background:linear-gradient(120deg,var(--pl) 0%,var(--p) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-social-suffix{font-size:var(--fs-md);color:rgba(196,181,253,.7);-webkit-text-fill-color:rgba(196,181,253,.7);font-weight:600;margin-left:1px}
.hero-social-meta{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.3}
/* Avatar pile */
.hero-social-avatars{display:inline-flex;align-items:center;margin-bottom:2px}
.hero-social-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;letter-spacing:-.01em;border:2px solid rgba(20,15,30,.85);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hero-social-av+.hero-social-av{margin-left:-9px}
.hav-1{background:linear-gradient(135deg,var(--p),var(--pd))}
.hav-2{background:linear-gradient(135deg,#EC4899,var(--pl))}
.hav-3{background:linear-gradient(135deg,#22D3EE,var(--p))}
.hav-4{background:linear-gradient(135deg,#FBBF24,#EC4899)}
.hav-5{background:linear-gradient(135deg,var(--pl),var(--lilacL));color:#4C1D95}
/* Stars */
.hero-social-stars{display:inline-flex;align-items:center;gap:2px;margin-bottom:2px}
.hero-social-stars svg{width:18px;height:18px;filter:drop-shadow(0 1px 4px rgba(251,191,36,.4))}
/* Social icons in stat 3 */
.hero-social-stat .hero-social-icons{display:inline-flex;align-items:center;gap:8px;margin-bottom:2px}
.hero-social-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:color .25s ease,transform .25s ease,background .25s ease}
.hero-social-icon:hover{transform:translateY(-1px);background:rgba(255,255,255,.12)}
.hsi-yt:hover{color:#FF4458}
.hsi-ig:hover{color:#EC4899}
.hsi-tt:hover{color:#fff}
.hsi-x:hover{color:#fff}
/* Vertical divider between stats */
.hero-social-vline{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent 0%,rgba(196,181,253,.32) 50%,transparent 100%);flex-shrink:0}
@media(max-width:780px){
  .hero-social{margin-top:36px}
  .hero-social-card{flex-direction:column;border-radius:var(--radius-lg);padding:24px 20px;gap:18px}
  .hero-social-stat{padding:0;min-height:auto}
  .hero-social-vline{width:60%;height:1px;align-self:center;background:linear-gradient(90deg,transparent 0%,rgba(196,181,253,.3) 50%,transparent 100%)}
}
/* Avatar pile */
.hero-social-avatars{display:inline-flex;align-items:center}
.hero-social-av{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;letter-spacing:-.01em;border:2px solid #18171c;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.hero-social-av+.hero-social-av{margin-left:-10px}
.hav-1{background:linear-gradient(135deg,var(--p),var(--pd))}
.hav-2{background:linear-gradient(135deg,#EC4899,var(--pl))}
.hav-3{background:linear-gradient(135deg,#22D3EE,var(--p))}
.hav-4{background:linear-gradient(135deg,#FBBF24,#EC4899)}
.hav-5{background:linear-gradient(135deg,var(--pl),var(--lilacL));color:#4C1D95}
/* Text block */
.hero-social-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.hero-social-headline{font-size:var(--fs-body);color:var(--t-bright);line-height:1.3;font-weight:500}
.hero-social-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;background:linear-gradient(120deg,#fff 0%,var(--pp) 60%,var(--pl) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-social-platforms{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-caption);color:var(--t3)}
.hero-social-platforms-label{white-space:nowrap}
.hero-social-icons{display:inline-flex;align-items:center;gap:6px}
.hero-social-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;color:var(--t2);transition:color .25s ease,transform .25s ease}
.hero-social-icon:hover{transform:translateY(-1px)}
.hsi-yt:hover{color:#FF0033}
.hsi-ig:hover{color:#E1306C}
.hsi-tt:hover{color:#fff}
.hsi-x:hover{color:#fff}
/* Vertical divider */
.hero-social-vline{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent 0%,rgba(196,181,253,.18) 50%,transparent 100%);margin:0 4px}
/* Rating block on the right */
.hero-social-rating{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.hero-social-stars{display:inline-flex;align-items:center;gap:3px}
.hero-social-stars svg{width:16px;height:16px;filter:drop-shadow(0 1px 4px rgba(251,191,36,.3))}
.hero-social-rating-text{font-size:var(--fs-caption);color:var(--t3);line-height:1.3}
.hero-social-rating-text strong{color:#fff;font-weight:700;font-size:13px}
@media(max-width:760px){
  .hero-social{margin-top:36px}
  .hero-social-row{flex-direction:column;border-radius:var(--radius-md);padding:18px 22px;gap:14px}
  .hero-social-text{align-items:center;text-align:center}
  .hero-social-platforms{flex-direction:column;gap:6px}
  .hero-social-vline{width:80%;height:1px;align-self:center;background:linear-gradient(90deg,transparent 0%,rgba(196,181,253,.2) 50%,transparent 100%);margin:4px 0}
  .hero-social-rating{align-items:center;text-align:center}
}
.hero-ctas-wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
/* Hero CTAs use the global .cta + .cta.cta-g pattern — same primary/secondary
   styling as the playbook hero. There's a local .cta override further down in
   this file (line ~1221) that redefines background to violet, so we restore the
   secondary's transparent background here for the hero scope only. */
.hero-ctas{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hero-ctas .cta-g{background:transparent;box-shadow:none}
.hero-ctas .cta-g:hover{background:transparent;border-color:rgba(196,181,253,.45);color:#fff;box-shadow:none}
/* Hero trust chips — matches the playbook hero trust-line styling */
.hero-cta-sub{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin:0}
.hero-trust-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--t-bright);letter-spacing:.1px;line-height:1;padding:0;background:transparent;border:none;transition:color .3s ease}
.hero-trust-chip:hover{color:#fff}
.hero-trust-chip svg{color:#34d399;flex-shrink:0}

/* Platform mockup */
.hero-mockup{position:relative;z-index:2;max-width:1180px;margin:80px auto 0;padding:0 24px}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.hm-card{position:relative;border-radius:var(--radius-lg);background:linear-gradient(170deg,rgba(22,17,36,.78),rgba(10,8,18,.88));border:1px solid rgba(255,255,255,.07);box-shadow:0 20px 60px rgba(0,0,0,.55),0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(32px) saturate(140%);overflow:hidden;transition:transform .6s cubic-bezier(.25,.8,.25,1),border-color .6s,box-shadow .6s;padding:22px}
.hm-card:hover{transform:translateY(-6px) scale(1.015);border-color:rgba(255,255,255,.14);box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.hm-c1{rotate:-1.5deg}
.hm-c2{rotate:1.8deg}
.hm-c3{rotate:-1deg}
.hm-head{font-size:11px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:14px}

/* Card 1 — Learning Progress */
.hm-c1-stat{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.hm-c1-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:46px;font-weight:600;letter-spacing:-2px;line-height:1;color:#fff}
.hm-c1-pct{font-size:24px;font-weight:600;color:rgba(255,255,255,.4)}
.hm-c1-sub{font-size:var(--fs-caption);color:rgba(255,255,255,.5);margin-bottom:14px}
.hm-c1-chart{width:100%;height:48px;display:block;margin-bottom:16px}
.hm-c1-skills{display:flex;flex-direction:column;gap:8px}
.hm-sk{display:flex;align-items:center;gap:10px;font-size:11px}
.hm-sk-name{flex:0 0 36px;color:rgba(255,255,255,.55);font-weight:500}
.hm-sk-track{flex:1;height:5px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.hm-sk-fill{height:100%;background:linear-gradient(90deg,var(--pd),var(--pl));border-radius:3px;box-shadow:0 0 8px rgba(167,139,250,.4)}
.hm-sk-v{flex:0 0 24px;text-align:right;color:rgba(255,255,255,.65);font-weight:600;font-variant-numeric:tabular-nums}

/* Card 2 — Activity Rings */
.hm-c2-rings{position:relative;width:140px;height:140px;margin:0 auto 16px}
.hm-c2-rings svg{width:100%;height:100%;filter:drop-shadow(0 0 12px rgba(167,139,250,.25))}
.hm-c2-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hm-c2-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:30px;font-weight:600;color:#fff;line-height:1;letter-spacing:-1px}
.hm-c2-lbl{font-size:10px;color:rgba(255,255,255,.45);font-weight:500;letter-spacing:.5px;margin-top:2px}
.hm-c2-stats{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}
.hm-c2-stats > div{display:flex;flex-direction:column;align-items:center;gap:3px}
.hm-c2-v{font-size:var(--fs-sm);font-weight:700;letter-spacing:-.3px}
.hm-c2-l{font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.5px;text-transform:uppercase;font-weight:600}

/* Card 3 — Music */
.hm-c3-art{position:relative;width:140px;height:140px;margin:0 auto 16px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--pl),var(--pd) 60%,#4C1D95);overflow:hidden;box-shadow:0 0 32px rgba(139,92,246,.4),inset 0 0 40px rgba(0,0,0,.2)}
.hm-c3-blob{position:absolute;top:50%;left:50%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,.05) 60%,transparent);transform:translate(-50%,-50%);animation:hmBlob 6s ease-in-out infinite}
@keyframes hmBlob{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}
.hm-c3-ring{position:absolute;top:50%;left:50%;width:100px;height:100px;border-radius:50%;border:1px solid rgba(255,255,255,.12);transform:translate(-50%,-50%);animation:hmSpin 8s linear infinite}
.hm-c3-orbit{position:absolute;top:50%;left:50%;width:120px;height:120px;border-radius:50%;border:1px dashed rgba(255,255,255,.08);transform:translate(-50%,-50%);animation:hmSpin 14s linear infinite reverse}
@keyframes hmSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.hm-c3-info{text-align:center;margin-bottom:12px}
.hm-c3-title{font-size:var(--fs-sm);font-weight:600;color:#fff;letter-spacing:-.2px}
.hm-c3-artist{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.hm-c3-progress{margin-bottom:14px}
.hm-c3-track{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-bottom:6px}
.hm-c3-fill{height:100%;width:38%;background:linear-gradient(90deg,var(--pl),var(--pd));border-radius:2px;box-shadow:0 0 6px rgba(167,139,250,.5);animation:hmFill 10s ease-in-out infinite}
@keyframes hmFill{0%{width:38%}50%{width:62%}100%{width:38%}}
.hm-c3-times{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.hm-c3-ctrl{display:flex;align-items:center;justify-content:center;gap:18px}
.hm-c3-play{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pl),var(--pd));display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(139,92,246,.45)}

@media(max-width:980px){.hm-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto;gap:18px}.hm-c1,.hm-c2,.hm-c3{rotate:0}}
@media(max-width:640px){.hero-sec{padding-top:190px;padding-bottom:60px}.hero-trust{gap:10px}.hero-trust-item{font-size:13px}}

/* ═══════════════════════════════════════════════════════════════
   RISK-FREE GUARANTEE WIDGET (from homepage)
═══════════════════════════════════════════════════════════════ */
/* Risk-free card — standard dark card (same border/background/shadow as every
   other card on the page) with a subtle green glow at the top behind the
   shield icon. Matches the playbook page treatment. */
.riskfree-card{max-width:720px;margin:0 auto;padding:56px 48px;border-radius:var(--radius-lg);border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--card-highlight);text-align:center;position:relative;overflow:hidden}
.riskfree-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(52,211,153,.1),transparent 65%)}
.riskfree-shield{width:64px;height:64px;margin:0 auto 28px;border-radius:var(--radius-sm);border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.06);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.riskfree-h{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:26px;font-weight:700;letter-spacing:-1px;margin:0 0 20px;color:var(--t1);position:relative;z-index:1}
.riskfree-p{font-size:var(--fs-body);color:var(--t2);line-height:1.75;max-width:540px;margin:0 auto;position:relative;z-index:1}
@media(max-width:640px){.riskfree-card{padding:42px 28px}.riskfree-h{font-size:var(--fs-h3)}}

/* ═══════════════════════════════════════════════════════════════
   FAQ — homepage accordion style (.acc + .faq-item)
═══════════════════════════════════════════════════════════════ */
.faq-item{position:relative;padding:0 24px;margin:0 -24px;border-radius:var(--radius-md);border:1px solid transparent;transition:background .4s cubic-bezier(.22,1,.36,1),border-color .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),opacity .95s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.faq-item:not(:last-child)::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:rgba(255,255,255,.12);pointer-events:none;transition:opacity .35s}
.faq-item.is-open::after,.faq-item:hover::after{opacity:0}
.faq-item::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,var(--pl),rgba(168,85,247,.1));border-radius:2px;transform:scaleY(0);transform-origin:center;opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.faq-item:hover{background:rgba(139,92,246,.035)}
.faq-item.is-open{background:linear-gradient(180deg,rgba(22,19,32,.55),rgba(14,12,22,.3));border-color:rgba(180,165,210,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.faq-item:hover::before,.faq-item.is-open::before{transform:scaleY(1);opacity:1}
.faq-item .acc-h{display:flex;justify-content:space-between;align-items:center;padding:26px 0;cursor:pointer;font-size:var(--fs-md);font-weight:500;gap:20px;color:var(--t1);transition:color .35s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.faq-item:hover .acc-h{transform:translateX(8px)}
.faq-item.is-open .acc-h{color:#fff;transform:translateX(8px)}
.faq-icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(22,19,32,.55),rgba(14,12,22,.3));border:1px solid rgba(180,165,210,.09);transition:all .4s cubic-bezier(.22,1,.36,1);position:relative}
.faq-item:hover .faq-icon{background:linear-gradient(180deg,rgba(28,24,40,.7),rgba(18,14,26,.4));border-color:rgba(180,165,210,.18);transform:scale(1.08)}
.faq-item.is-open .faq-icon{background:var(--p);border-color:var(--p);transform:rotate(135deg)}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:#9b99a1;border-radius:2px;transition:background .3s ease}
.faq-icon::before{width:12px;height:1.5px}
.faq-icon::after{width:1.5px;height:12px}
.faq-item.is-open .faq-icon::before,.faq-item.is-open .faq-icon::after{background:#fff}
.faq-item .acc-b{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease .05s}
.faq-item .acc-b.open{max-height:400px;opacity:1}
.faq-item .acc-b p{padding:0 0 28px;font-size:var(--fs-body);color:var(--t2);line-height:1.75;margin:0;max-width:94%}

/* ═══════════════════════════════════════════════════════════════
   OUTCOMES SECTION: 5-card bento with hero
   ═══════════════════════════════════════════════════════════════ */
/* Color variants */
.out-card.c-violet{--accent:var(--pl);--accent-2:var(--p);--accent-glow:rgba(139,92,246,.22);--accent-border:rgba(167,139,250,.34);--accent-shadow:rgba(139,92,246,.48);--edge-1:rgba(167,139,250,.4);--edge-2:rgba(167,139,250,.18)}
.out-card.c-amber{--accent:#FDE047;--accent-2:#FACC15;--accent-glow:rgba(252,204,21,.22);--accent-border:rgba(253,224,71,.36);--accent-shadow:rgba(234,179,8,.45);--edge-1:rgba(253,224,71,.45);--edge-2:rgba(234,179,8,.18)}
.out-card.c-cyan{--accent:#67E8F9;--accent-2:#22D3EE;--accent-glow:rgba(34,211,238,.22);--accent-border:rgba(103,232,249,.36);--accent-shadow:rgba(34,211,238,.45);--edge-1:rgba(103,232,249,.4);--edge-2:rgba(103,232,249,.18)}
.out-card.c-emerald{--accent:#6EE7B7;--accent-2:#34D399;--accent-glow:rgba(52,211,153,.22);--accent-border:rgba(110,231,183,.4);--accent-shadow:rgba(16,185,129,.45);--edge-1:rgba(110,231,183,.45);--edge-2:rgba(52,211,153,.2)}
.out-card.c-rose{--accent:#F9A8D4;--accent-2:#EC4899;--accent-glow:rgba(236,72,153,.22);--accent-border:rgba(249,168,212,.4);--accent-shadow:rgba(236,72,153,.45);--edge-1:rgba(249,168,212,.45);--edge-2:rgba(236,72,153,.18)}

/* Edge highlight */
.out-edge{
  position:absolute;inset:0;border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,var(--edge-1,rgba(167,139,250,.4)) 0%,transparent 30%,transparent 70%,var(--edge-2,rgba(167,139,250,.18)) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.7;transition:opacity .55s;z-index:1;
}
.out-card:hover .out-edge{opacity:1}

.out-bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(300px,auto);
  gap:18px;
}
.out-card{
  position:relative;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg,rgba(22,19,32,.7),rgba(12,10,20,.4));
  border:1px solid rgba(180,165,210,.1);
  overflow:hidden;
  isolation:isolate;
  display:flex;flex-direction:column;
  backdrop-filter:blur(12px);
  transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .6s,box-shadow .6s;
}
.out-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%,var(--accent-glow,rgba(139,92,246,.18)),transparent 65%);
}
.out-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.5) 0,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.3) 0,transparent 1px),
    radial-gradient(circle at 65% 75%,rgba(255,255,255,.4) 0,transparent 1px),
    radial-gradient(circle at 28% 80%,rgba(255,255,255,.25) 0,transparent 1px);
  opacity:.5;
}
.out-card:hover{
  transform:translateY(-6px);
  border-color:rgba(196,181,253,.22);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
}

.out-card.hero{flex-direction:row;grid-column:span 4;min-height:380px}
.out-card.hero .out-graphic{flex:0 0 52%;height:auto;min-height:100%;border-bottom:none;border-right:none}
.out-card.hero .out-body{flex:1;padding:36px 36px 38px;justify-content:center}
.out-card.hero .out-h{font-size:30px;line-height:1.15;letter-spacing:-.6px}
.out-card.hero .out-p{font-size:15.5px}

.out-card-m{grid-column:span 2}
.out-graphic{position:relative;flex:0 0 220px;height:220px;overflow:hidden;z-index:1}
.out-body{position:relative;z-index:2;padding:28px 26px 28px;display:flex;flex-direction:column;flex:1;justify-content:center}
.out-h{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.4px;line-height:1.25;color:#fff;margin:0 0 12px}
.out-p{font-size:14.5px;color:var(--t2);line-height:1.6;margin:0}

/* OG1: Design mastery (layered cards) */
.og1{position:relative;height:100%;min-height:340px;display:flex;align-items:center;justify-content:center;padding:30px;overflow:hidden}
.og1::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(167,139,250,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.07) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.og1::after{content:'';position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:340px;height:200px;border-radius:50%;background:radial-gradient(ellipse,rgba(139,92,246,.32),rgba(124,58,237,.10) 40%,transparent 75%);filter:blur(40px);pointer-events:none;animation:og1Glow 6s ease-in-out infinite}
@keyframes og1Glow{0%,100%{opacity:.85}50%{opacity:1}}
.og1-spark{position:absolute;color:var(--pp);text-shadow:0 0 12px rgba(196,181,253,.85);font-weight:700;animation:og1Spark 4s ease-in-out infinite;z-index:5}
.og1-s1{top:14%;left:8%;font-size:var(--fs-sm);animation-delay:0s}
.og1-s2{top:24%;right:10%;font-size:11px;animation-delay:1s}
.og1-s3{bottom:18%;left:12%;font-size:var(--fs-caption);animation-delay:2s}
.og1-s4{bottom:30%;right:14%;font-size:13px;color:var(--lilac);animation-delay:3s}
@keyframes og1Spark{0%,100%{transform:scale(.5) rotate(0deg);opacity:.3}50%{transform:scale(1.2) rotate(180deg);opacity:1}}
.og1-stage{position:relative;width:300px;height:260px;animation:og1Float 7s ease-in-out infinite}
@keyframes og1Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.og1-layer{position:absolute;border-radius:var(--radius-sm);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.og1-layer::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);pointer-events:none}
.og1-l1{width:200px;height:120px;left:0;top:0;transform:rotate(-4deg);background:linear-gradient(160deg,rgba(196,181,253,.16),rgba(124,58,237,.04));border-color:rgba(196,181,253,.28);padding:20px;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:flex-start;box-shadow:0 14px 30px rgba(0,0,0,.35);z-index:1;animation:og1L1 7s ease-in-out infinite}
@keyframes og1L1{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-2px)}}
.og1-aa{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:var(--fs-stat);font-weight:700;line-height:1;letter-spacing:-2px;background:linear-gradient(135deg,#fff,var(--pp) 60%,var(--pl));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.og1-l1-line{height:5px;border-radius:3px;background:rgba(196,181,253,.45)}
.og1-l1-line-1{width:60%}
.og1-l1-line-2{width:40%;background:rgba(196,181,253,.25)}
.og1-l2{width:210px;height:80px;left:55px;top:95px;transform:rotate(0deg);background:linear-gradient(160deg,rgba(167,139,250,.20),rgba(124,58,237,.04));border-color:rgba(167,139,250,.36);padding:14px 16px;display:flex;flex-direction:column;gap:8px;justify-content:center;box-shadow:0 18px 36px rgba(0,0,0,.42),0 0 24px rgba(139,92,246,.18);z-index:2;animation:og1L2 7s ease-in-out infinite}
@keyframes og1L2{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.og1-l2-row{display:flex;gap:8px;align-items:center}
.og1-l2-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.3)}
.og1-l2-d1{background:linear-gradient(135deg,var(--lilacL),var(--pp))}
.og1-l2-d2{background:linear-gradient(135deg,var(--pp),var(--pl))}
.og1-l2-d3{background:linear-gradient(135deg,var(--pl),var(--pd))}
.og1-l2-d4{background:linear-gradient(135deg,var(--pd),var(--deep))}
.og1-l2-d5{background:linear-gradient(135deg,var(--deep),#4C1D95)}
.og1-l2-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.06);margin-left:6px}
.og1-l3{width:220px;height:140px;left:80px;top:130px;transform:rotate(4deg);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:rgba(255,255,255,.22);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(167,139,250,.22),0 0 28px rgba(139,92,246,.22);z-index:3;animation:og1L3 7s ease-in-out infinite}
@keyframes og1L3{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-4px)}}
.og1-l3-head{display:flex;align-items:center;gap:8px}
.og1-l3-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--pl),var(--pd));flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.06),0 4px 8px rgba(167,139,250,.4)}
.og1-l3-h{display:flex;flex-direction:column;gap:4px;flex:1}
.og1-l3-h-1{height:6px;width:70%;border-radius:3px;background:rgba(255,255,255,.5)}
.og1-l3-h-2{height:4px;width:45%;border-radius:2px;background:rgba(255,255,255,.18)}
.og1-l3-text{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.og1-l3-tline{height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.og1-l3-tline-1{width:90%}
.og1-l3-tline-2{width:70%}
.og1-l3-btn{margin-top:auto;height:24px;width:88px;border-radius:7px;background:linear-gradient(135deg,var(--pl),var(--pd));box-shadow:0 4px 14px rgba(167,139,250,.55),inset 0 1px 0 rgba(255,255,255,.3);position:relative;overflow:hidden}
.og1-l3-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-100%);animation:og1BtnShine 2.8s ease-in-out infinite}
@keyframes og1BtnShine{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}

/* OG2: User satisfaction (5-star wave) */
.og2{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;overflow:hidden}
.og2::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(252,204,21,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(252,204,21,.06) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);pointer-events:none}
.og2::after{content:'';position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:280px;height:120px;border-radius:50%;background:radial-gradient(ellipse,rgba(252,204,21,.30),rgba(234,179,8,.10) 40%,transparent 75%);filter:blur(28px);pointer-events:none;animation:og2Glow 5s ease-in-out infinite}
@keyframes og2Glow{0%,100%{opacity:.85}50%{opacity:1}}
.og2-counter{position:relative;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:100px;background:linear-gradient(180deg,rgba(252,204,21,.18),rgba(234,179,8,.06));border:1px solid rgba(253,224,71,.4);backdrop-filter:blur(8px);font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:11.5px;font-weight:600;color:#FDE047;box-shadow:0 4px 14px rgba(234,179,8,.2);animation:og2CounterFloat 3.2s ease-in-out infinite}
.og2-counter::before{content:'';width:5px;height:5px;border-radius:50%;background:#FDE047;box-shadow:0 0 6px #FDE047;animation:og2DotPulse 1.8s ease-in-out infinite}
@keyframes og2CounterFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes og2DotPulse{0%,100%{opacity:1}50%{opacity:.4}}
.og2-stars{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;z-index:2;filter:drop-shadow(0 6px 18px rgba(234,179,8,.32))}
.og2-star{color:#FDE047;filter:drop-shadow(0 0 6px rgba(252,204,21,.55));animation:og2Wave 2.8s ease-in-out infinite;transform-origin:center}
.og2-star svg{width:34px;height:34px;display:block}
.og2-star:nth-child(1){animation-delay:0s}
.og2-star:nth-child(2){animation-delay:.18s}
.og2-star:nth-child(3){animation-delay:.36s}
.og2-star:nth-child(4){animation-delay:.54s}
.og2-star:nth-child(5){animation-delay:.72s}
@keyframes og2Wave{0%,60%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(252,204,21,.5))}30%{transform:scale(1.18);filter:drop-shadow(0 0 10px rgba(252,204,21,.85)) drop-shadow(0 0 18px rgba(234,179,8,.45))}}
.og2-spark{position:absolute;color:#FACC15;font-size:var(--fs-caption);text-shadow:0 0 8px rgba(252,204,21,.85);font-weight:700;animation:og2Spark 3.6s ease-in-out infinite;z-index:5}
.og2-sp1{top:18%;left:14%;animation-delay:0s}
.og2-sp2{top:24%;right:12%;font-size:10px;color:#FDE047;animation-delay:1.2s}
.og2-sp3{bottom:22%;right:20%;font-size:11px;animation-delay:2.4s}
@keyframes og2Spark{0%,100%{opacity:.3;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(180deg)}}

/* OG3: Retention (green bar chart) */
.og3{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:50px 14px 14px;position:relative;height:100%;overflow:visible}
.og3-grid-line{position:absolute;left:20px;right:20px;border-top:1px dashed rgba(110,231,183,.1);z-index:0;pointer-events:none}
.og3-gl-1{top:28%}
.og3-gl-2{top:50%}
.og3-gl-3{top:72%}
.og3-star{position:absolute;color:#6EE7B7;font-size:11px;animation:og3Twinkle 3.6s ease-in-out infinite;pointer-events:none;z-index:1;text-shadow:0 0 6px rgba(110,231,183,.6),0 0 12px rgba(52,211,153,.35)}
.og3-star-1{top:14%;left:9%;animation-delay:0s}
.og3-star-2{top:32%;right:11%;animation-delay:1.5s;font-size:8.5px}
.og3-star-3{top:55%;left:26%;animation-delay:2.7s;font-size:9.5px}
@keyframes og3Twinkle{0%,100%{opacity:.2;transform:scale(.8) rotate(0deg)}50%{opacity:.85;transform:scale(1.1) rotate(180deg)}}
.og3-cols{display:flex;align-items:flex-end;gap:10px;height:120px;position:relative;z-index:2}
.og3-col{position:relative;width:38px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(52,211,153,.5),rgba(52,211,153,.18)),#0e1a14;border:1px solid rgba(52,211,153,.34);border-bottom:none;padding-top:10px;display:flex;flex-direction:column;align-items:center;transform-origin:bottom}
.og3-col:nth-child(1){height:30%;opacity:.78;animation:og3Breathe 4.2s ease-in-out infinite}
.og3-col:nth-child(2){height:48%;opacity:.82;animation:og3Breathe 4.6s ease-in-out infinite .4s}
.og3-col:nth-child(3){height:65%;opacity:.86;animation:og3Breathe 3.9s ease-in-out infinite .8s}
.og3-col:nth-child(4){height:82%;opacity:.9;animation:og3Breathe 4.8s ease-in-out infinite 1.2s}
.og3-col:nth-child(5){height:100%;border-color:rgba(110,231,183,.65);background:linear-gradient(180deg,rgba(110,231,183,.5),rgba(4,120,87,.42)),#0e1a14;box-shadow:0 0 22px rgba(52,211,153,.6),0 0 0 1px rgba(110,231,183,.34);z-index:5;animation:og3Breathe 4.1s ease-in-out infinite 1.6s,og3WinnerGlow 4.1s ease-in-out infinite 1.6s}
@keyframes og3Breathe{0%,100%{transform:scaleY(1);filter:brightness(1)}50%{transform:scaleY(1.025);filter:brightness(1.1)}}
@keyframes og3WinnerGlow{0%,100%{box-shadow:0 0 22px rgba(52,211,153,.6),0 0 0 1px rgba(110,231,183,.34)}50%{box-shadow:0 0 36px rgba(52,211,153,.9),0 0 0 1px rgba(110,231,183,.58)}}
.og3-col-num{font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:9px;font-weight:700;color:#6EE7B7;opacity:.65}
.og3-col:nth-child(5) .og3-col-num{color:#fff;opacity:1;font-size:10.5px}
.og3-diamond{position:absolute;top:-30px;left:50%;width:24px;height:30px;animation:og3DiaFloat 2.4s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(52,211,153,.65))}
.og3-diamond svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes og3DiaFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
.og3-axis{display:flex;gap:10px;justify-content:center;z-index:2}
.og3-axis span{width:38px;text-align:center;font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:10.5px;color:rgba(255,255,255,.55);font-weight:500}
.og3-axis span:last-child{color:rgba(255,255,255,.85)}

/* OG4: Conversion funnel (cyan) */
.og4{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px;overflow:hidden}
.og4-stage{position:relative;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:13px;font-weight:600;color:#fff;border:1px solid rgba(34,211,238,.4);background:linear-gradient(90deg,rgba(34,211,238,.22),rgba(8,145,178,.08));box-shadow:0 0 14px rgba(34,211,238,.24),inset 0 1px 0 rgba(255,255,255,.12);overflow:hidden}
.og4-s1{width:240px;animation:og4StageBreathe 5s ease-in-out infinite}
.og4-s2{width:180px;animation:og4StageBreathe 5s ease-in-out infinite -1.6s}
.og4-s3{width:120px;border-color:rgba(103,232,249,.78);background:linear-gradient(90deg,rgba(34,211,238,.45),rgba(167,139,250,.22));box-shadow:0 0 24px rgba(34,211,238,.6),inset 0 1px 0 rgba(255,255,255,.22);animation:og4WinBreathe 4s ease-in-out infinite}
@keyframes og4StageBreathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes og4WinBreathe{0%,100%{box-shadow:0 0 24px rgba(34,211,238,.6),inset 0 1px 0 rgba(255,255,255,.22)}50%{box-shadow:0 0 36px rgba(34,211,238,.85),inset 0 1px 0 rgba(255,255,255,.28)}}
.og4-label{font-size:13px;font-weight:600;font-family:'Inter Variable','Inter',system-ui,sans-serif;color:rgba(255,255,255,.92);position:relative;z-index:1}
.og4-pct{font-size:var(--fs-caption);color:#67E8F9;font-weight:800;position:relative;z-index:1}
.og4-s3 .og4-pct{color:#fff}
.og4-particle{position:absolute;width:3.5px;height:3.5px;border-radius:50%;background:#67E8F9;box-shadow:0 0 8px #22D3EE;left:50%;top:0;animation:og4Flow 2.4s linear infinite;z-index:2}
.og4-p1{animation-delay:0s}.og4-p2{animation-delay:.6s}.og4-p3{animation-delay:1.2s}.og4-p4{animation-delay:1.8s}
@keyframes og4Flow{0%{transform:translate(-50%,0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(-50%,110px);opacity:0}}

/* OG5: AI edge grid + magnifier (pink) */
.og5{position:relative;height:100%;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden}
.og5-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:200px}
.og5-tile{position:relative;height:48px;border-radius:8px;border:1px solid rgba(236,72,153,.24);background:linear-gradient(160deg,rgba(236,72,153,.08),rgba(236,72,153,.02));overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:6px 8px;gap:3px;animation:og5Tile 5s ease-in-out infinite}
.og5-tile:nth-child(1){animation-delay:0s}
.og5-tile:nth-child(2){animation-delay:.6s}
.og5-tile:nth-child(3){animation-delay:1.2s}
.og5-tile:nth-child(4){animation-delay:1.8s}
@keyframes og5Tile{0%,100%{opacity:.6}50%{opacity:.85}}
.og5-tile-h{height:5px;width:60%;border-radius:2px;background:rgba(249,168,212,.6)}
.og5-tile-l{height:3px;border-radius:1.5px;background:rgba(236,72,153,.24);width:80%}
.og5-tile.win{border-color:rgba(249,168,212,.75);background:linear-gradient(160deg,rgba(236,72,153,.22),rgba(157,23,77,.08));box-shadow:0 0 24px rgba(236,72,153,.6),inset 0 0 14px rgba(236,72,153,.18);animation:og5Win 2.2s ease-in-out infinite;z-index:3}
.og5-tile.win .og5-tile-h{background:linear-gradient(90deg,#EC4899,#F9A8D4)}
@keyframes og5Win{0%,100%{box-shadow:0 0 24px rgba(236,72,153,.6),inset 0 0 14px rgba(236,72,153,.18)}50%{box-shadow:0 0 38px rgba(236,72,153,.9),inset 0 0 20px rgba(249,168,212,.28)}}
.og5-tile-tick{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#F9A8D4,#EC4899);display:flex;align-items:center;justify-content:center;color:#0c0a14;box-shadow:0 0 12px rgba(236,72,153,.75),0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.4);animation:og5Tick 1.8s ease-in-out infinite;z-index:4}
@keyframes og5Tick{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.og5-mag{position:absolute;width:44px;height:44px;border-radius:50%;border:2.5px solid #fff;background:rgba(255,255,255,.04);backdrop-filter:blur(2px);box-shadow:0 0 0 3px rgba(236,72,153,.42),0 0 28px rgba(236,72,153,.7),0 8px 22px rgba(0,0,0,.5);top:55%;left:62%;transform:translate(-50%,-50%);z-index:6;animation:og5Mag 12s ease-in-out infinite}
.og5-mag::after{content:'';position:absolute;width:14px;height:3px;background:#fff;border-radius:2px;bottom:-3px;right:-7px;transform:rotate(45deg);box-shadow:0 0 8px rgba(236,72,153,.78)}
@keyframes og5Mag{0%,100%{top:55%;left:62%}25%{top:36%;left:36%}50%{top:36%;left:62%}75%{top:55%;left:36%}}

/* ═══════════════════════════════════════════════════════════════
   INSPIRATION SECTION: Logo strip + horizontal phone/browser marquees
   ═══════════════════════════════════════════════════════════════ */
.up-mq-sec{padding-top:var(--sp-9);padding-bottom:var(--sp-9);max-width:none;margin:0;overflow:hidden;position:relative}
.up-mq-sec .up-sec-head{padding:0 var(--sp-5)}

/* Glow backdrop behind marquees */
.up-mq-glow{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:1100px;height:520px;border-radius:50%;background:radial-gradient(ellipse,rgba(139,92,246,.14),transparent 60%);filter:blur(70px);pointer-events:none;z-index:0}

/* Marquee row base */
.up-mq-row{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);z-index:1}

/* Phone marquee */
.up-mq-phones{padding:32px 0 40px}
.up-mq-track{display:flex;gap:28px;width:max-content;will-change:transform;align-items:flex-end}
.up-mq-phones .up-mq-track{animation:upMqScrollL 42s linear infinite}

@keyframes upMqScrollL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.up-mq-phone{position:relative;flex:0 0 auto;width:240px;aspect-ratio:9/19.5;border-radius:38px;background:#0a0a10;padding:7px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.up-mq-phone::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:var(--radius-sm);background:#000;z-index:3;pointer-events:none}
.up-mq-phone:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 40px 80px -20px rgba(139,92,246,.45),0 0 0 1px rgba(167,139,250,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.up-mq-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:31px;background:#fff}
/* CSS placeholder mockups for phones — abstract UI shapes, no real screenshots */
.up-mq-mock{display:block;width:100%;height:100%;border-radius:31px;overflow:hidden;position:relative;background:#fff}
.up-mq-mock::before{content:'';position:absolute;top:0;left:0;right:0;height:54px;z-index:1}
.up-mq-mock .mk-card{position:absolute;left:14px;right:14px;border-radius:var(--radius-sm);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.up-mq-mock .mk-row{position:absolute;left:14px;right:14px;display:flex;gap:6px;align-items:center}
.up-mq-mock .mk-line{height:4px;border-radius:2px}
.up-mq-mock .mk-circle{border-radius:50%;flex-shrink:0}
.up-mq-mock .mk-pill{position:absolute;border-radius:100px;display:flex;align-items:center;justify-content:center;font-family:'Inter Variable','Inter',system-ui,sans-serif;font-size:9px;font-weight:700;color:#fff;letter-spacing:.4px}
.up-mq-mock .mk-tab{position:absolute;left:14px;right:14px;bottom:14px;height:42px;border-radius:var(--radius-sm);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);display:flex;justify-content:space-around;align-items:center;padding:0 10px;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
.up-mq-mock .mk-tab span{width:14px;height:14px;border-radius:4px;background:rgba(0,0,0,.18)}
.up-mq-mock .mk-tab span.act{background:currentColor}

/* Sunset / wellness — warm orange gradient (Headspace-like) */
.mock-headspace{background:linear-gradient(180deg,#FFB58A 0%,#FF8C7A 35%,#E76A8C 100%);color:#FF8C7A}
.mock-headspace::after{content:'';position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#FFE4C9,#FFB089 60%,transparent 80%);opacity:.85}
.mock-headspace .mk-pill{left:50%;top:25%;transform:translateX(-50%);background:rgba(255,255,255,.25);backdrop-filter:blur(8px);padding:5px 12px;border:1px solid rgba(255,255,255,.4)}

/* Medical / wellness — soft cream + brand pill (Hims-like) */
.mock-hims{background:#F4ECE2;color:#2C5547}
.mock-hims .mk-card.c1{top:80px;height:60px;background:#fff;padding:14px}
.mock-hims .mk-card.c2{top:154px;height:60px;background:linear-gradient(135deg,#2C5547,#1F3D33);padding:14px}
.mock-hims .mk-line.l1{height:5px;width:65%;background:#2C5547;margin-bottom:8px}
.mock-hims .mk-line.l2{height:3px;width:80%;background:rgba(44,85,71,.3);margin-bottom:5px}
.mock-hims .mk-line.l3{height:3px;width:50%;background:rgba(44,85,71,.3)}
.mock-hims .mk-pill{left:50%;top:280px;transform:translateX(-50%);background:#2C5547;padding:9px 24px;font-size:10px}

/* Music dark — black + green (Spotify-like) */
.mock-spotify{background:#000;color:#1ED760}
.mock-spotify::after{content:'';position:absolute;left:50%;top:90px;transform:translateX(-50%);width:140px;height:140px;border-radius:8px;background:linear-gradient(135deg,#1ED760,#0A6E2C 65%,#022614);box-shadow:0 16px 32px rgba(30,215,96,.25)}
.mock-spotify .mk-pill{left:50%;top:250px;transform:translateX(-50%);background:#1ED760;color:#000;padding:9px 28px}

/* Music alt — purple/pink for second Spotify variant — unused, kept for reference */

/* Language app — bright green (Duolingo-like) */
.mock-duolingo{background:linear-gradient(180deg,#58CC02 0%,#46A302 100%);color:#fff}
.mock-duolingo::after{content:'';position:absolute;left:50%;top:90px;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:#FFC800;box-shadow:0 12px 24px rgba(0,0,0,.15)}
.mock-duolingo .mk-card.c1{top:235px;height:42px;background:#fff;border-radius:var(--radius-sm);padding:12px;display:flex;align-items:center;gap:8px}
.mock-duolingo .mk-line.l1{height:5px;width:60%;background:#58CC02;border-radius:3px}

/* Fitness/food app — peach (Lifesum-like) */
.mock-lifesum{background:#FFF4ED;color:#FF6B6B}
.mock-lifesum::after{content:'';position:absolute;left:50%;top:80px;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;background:conic-gradient(from 0deg,#FF6B6B 0deg 240deg,rgba(255,107,107,.15) 240deg 360deg);box-shadow:inset 0 0 0 12px #FFF4ED}
.mock-lifesum .mk-card.c1{top:215px;height:60px;background:#fff;padding:12px}
.mock-lifesum .mk-line.l1{height:4px;width:55%;background:#FF6B6B}
.mock-lifesum .mk-line.l2{height:3px;width:75%;background:rgba(0,0,0,.15);margin-top:8px}

/* Fintech — dark navy + accent (Revolut-like) */
.mock-revolut{background:#0F1F3D;color:#0094FF}
.mock-revolut .mk-card.c1{top:80px;height:140px;background:linear-gradient(135deg,#1A3A6E,#0F1F3D);padding:18px;border:1px solid rgba(255,255,255,.08)}
.mock-revolut .mk-line.l1{height:6px;width:50%;background:#fff;margin-bottom:10px}
.mock-revolut .mk-line.l2{height:14px;width:70%;background:#0094FF;border-radius:4px}
.mock-revolut .mk-card.c2{top:236px;height:54px;background:rgba(255,255,255,.06);padding:14px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.06)}

/* Browser mockups */
.up-mq-mock-web{display:block;flex:1;width:100%;background:#fff;position:relative;overflow:hidden}
.up-mq-mock-web .web-hero{position:absolute;left:0;right:0;top:0;height:62%}
.up-mq-mock-web .web-grid{position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.up-mq-mock-web .web-card{aspect-ratio:1;border-radius:var(--radius-sm);background:rgba(0,0,0,.06)}

/* Origin (warm gradient hero + grid) */
.mock-origin .web-hero{background:linear-gradient(135deg,#F8E5C5 0%,#E8B594 40%,#D88660 100%)}
.mock-origin .web-hero::after{content:'';position:absolute;left:48px;top:58%;transform:translateY(-50%);height:14px;width:240px;border-radius:7px;background:rgba(255,255,255,.95)}
.mock-origin .web-hero::before{content:'';position:absolute;left:48px;top:42%;height:6px;width:120px;border-radius:3px;background:rgba(255,255,255,.7)}
.mock-origin .web-card{background:linear-gradient(135deg,#F4D5B5,#E8B594)}

/* Airbnb (search bar + image grid) */
.mock-airbnb .web-hero{height:14%;background:#fff;border-bottom:1px solid #ebebeb;display:flex;align-items:center;justify-content:center}
.mock-airbnb .web-hero::after{content:'';width:60%;height:48px;border-radius:32px;background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.mock-airbnb .web-grid{top:90px;bottom:18px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:14px}
.mock-airbnb .web-card{aspect-ratio:auto;border-radius:var(--radius-sm);background:linear-gradient(135deg,#FF5A5F,#E8505B)}
.mock-airbnb .web-card:nth-child(2){background:linear-gradient(135deg,#7B61FF,#5A3FD1)}
.mock-airbnb .web-card:nth-child(3){background:linear-gradient(135deg,#48BB78,#2F855A)}
.mock-airbnb .web-card:nth-child(4){background:linear-gradient(135deg,#F6AD55,#DD6B20)}
.mock-airbnb .web-card:nth-child(5){background:linear-gradient(135deg,#4299E1,#2B6CB0)}
.mock-airbnb .web-card:nth-child(6){background:linear-gradient(135deg,#FC8181,#C53030)}
.mock-airbnb .web-card:nth-child(7){background:linear-gradient(135deg,#9F7AEA,#553C9A)}
.mock-airbnb .web-card:nth-child(8){background:linear-gradient(135deg,#38B2AC,#234E52)}
/* Brand label sits ABOVE each screenshot — moves with the screenshot in the marquee */
.up-mq-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:20px}
.up-mq-brand{display:inline-flex;align-items:center;justify-content:center;height:28px;opacity:.95}
.up-mq-brand img{display:block;height:100%;width:auto;max-width:160px;object-fit:contain}
/* Per-logo visual-size normalization so symbol logos and wordmarks read at the same scale */
.up-mq-brand img[alt="Apple"]{height:30px}
.up-mq-brand img[alt="Headspace"]{height:30px}
.up-mq-brand img[alt="Airbnb"]{height:28px}
.up-mq-brand img[alt="Spotify"]{height:30px}
.up-mq-brand img[alt="Duolingo"]{height:22px}
.up-mq-brand img[alt="Monzo"]{height:20px}
.up-mq-brand img[alt="Vercel"]{height:20px}
/* Vercel only ships as monochrome from the brand — keep it in the page's light tone */
.up-mq-brand img[alt="Vercel"]{filter:brightness(0) invert(1);opacity:.85}

/* Browser / desktop frame */
.up-mq-browser{position:relative;flex:0 0 auto;height:520px;width:auto;border-radius:var(--radius-xl);background:#0a0a10;padding:6px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.up-mq-browser:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 40px 80px -20px rgba(34,211,238,.35),0 0 0 1px rgba(34,211,238,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.up-mq-browser img{display:block;height:100%;width:auto;object-fit:contain;border-radius:var(--radius-md);background:#fff}

@media(max-width:600px){
  .up-mq-phone{width:200px;border-radius:32px;padding:6px}
  .up-mq-phone img{border-radius:26px}
  .up-mq-phone::before{width:80px;height:22px;top:11px}
  .up-mq-browser{width:440px}
  .up-mq-track{gap:18px}
  .up-mq-phones .up-mq-track{animation-duration:32s}
  .up-mq-brand{height:24px}
  .up-mq-brand img{max-width:120px}
  .up-mq-item{gap:14px}
}
@media (prefers-reduced-motion: reduce){
  .up-mq-track{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   FEATURES SECTION: 8-card bento with 2 hero cards
   ═══════════════════════════════════════════════════════════════ */
.up-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(240px,auto);gap:18px}
.b-1{grid-column:span 3;grid-row:span 1;min-height:300px}
.b-2{grid-column:span 3;grid-row:span 1;min-height:300px}
.b-3,.b-4,.b-5,.b-6,.b-7,.b-8{grid-column:span 2}

.up-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:26px 26px 28px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  overflow:hidden;
  isolation:isolate;
  display:flex;flex-direction:column;
  backdrop-filter:blur(12px);
  transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .6s,box-shadow .6s;
}
.up-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%,var(--accent-glow,rgba(139,92,246,.18)),transparent 65%);
}
.up-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.5) 0,transparent 1px),
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.3) 0,transparent 1px),
    radial-gradient(circle at 65% 75%,rgba(255,255,255,.4) 0,transparent 1px),
    radial-gradient(circle at 28% 80%,rgba(255,255,255,.25) 0,transparent 1px),
    radial-gradient(circle at 90% 55%,rgba(255,255,255,.28) 0,transparent 1px);
  opacity:.55;
}
.up-card:hover{
  transform:translateY(-6px);
  border-color:rgba(196,181,253,.22);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
}

.c-graphic{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;margin-bottom:22px;min-height:130px}
.c-h{position:relative;z-index:2;font-size:var(--fs-lg);font-weight:700;color:#fff;letter-spacing:-.3px;margin:0 0 6px;line-height:1.25}
.c-p{position:relative;z-index:2;font-size:14.5px;color:var(--t2);line-height:1.55;margin:0}
.b-1 .c-graphic, .b-2 .c-graphic{min-height:170px}
.b-1 .c-h, .b-2 .c-h{font-size:20px}

/* ═══════════════════════════════════════════════════════════════
   CARD GRAPHICS G1-G8 — clean & polished
   ═══════════════════════════════════════════════════════════════ */
.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8{position:relative;display:flex;align-items:center;justify-content:center;z-index:1}
.g1::before,.g2::before,.g3::before,.g4::before,.g5::before,.g6::before,.g7::before,.g8::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:120px;border-radius:50%;background:radial-gradient(ellipse,rgba(167,139,250,.22),transparent 65%);filter:blur(14px);pointer-events:none;z-index:0}

/* ─── G1: Real app breakdowns — UI mockup with alternating numbered pins ─── */
.g1{position:relative;width:230px;height:160px;display:flex;align-items:center;justify-content:center}
.g1-card{position:relative;z-index:2;width:130px;border-radius:var(--radius-sm);background:linear-gradient(160deg,rgba(167,139,250,.1),rgba(124,58,237,.04));border:1px solid rgba(167,139,250,.28);box-shadow:0 14px 26px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);padding:10px;display:flex;flex-direction:column;gap:7px}
.g1-thumb{height:34px;border-radius:7px;background:linear-gradient(135deg,rgba(196,181,253,.4),rgba(124,58,237,.18));position:relative;overflow:hidden}
.g1-thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 35%,rgba(255,255,255,.22),transparent 55%)}
.g1-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.g1-bar{flex:1;height:5px;border-radius:3px;background:rgba(196,181,253,.3)}
.g1-price{font-size:11px;font-weight:800;color:#fff;letter-spacing:-.5px}
.g1-cta{height:18px;border-radius:6px;background:linear-gradient(135deg,var(--pl),var(--pd));box-shadow:0 0 14px rgba(167,139,250,.4);position:relative;margin-top:2px}
.g1-cta::after{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.55)}
.g1-pin{position:absolute;z-index:3;display:flex;align-items:center;gap:6px;animation:g1Pin 4s ease-in-out infinite}
.g1-pin-num{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--pl),var(--pd));border:1.5px solid rgba(255,255,255,.4);box-shadow:0 0 12px rgba(167,139,250,.65),inset 0 1px 0 rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;line-height:1;flex-shrink:0}
.g1-pin-line{height:1.5px;background:linear-gradient(90deg,rgba(167,139,250,.7),rgba(167,139,250,.2));border-radius:1px;width:30px}
.g1-pin.p1{top:14px;left:8px}
.g1-pin.p2{top:50%;right:8px;transform:translateY(-50%);flex-direction:row-reverse;animation-delay:-1.3s}
.g1-pin.p2 .g1-pin-line{background:linear-gradient(-90deg,rgba(167,139,250,.7),rgba(167,139,250,.2))}
.g1-pin.p3{bottom:14px;left:8px;animation-delay:-2.6s}
@keyframes g1Pin{0%,100%{opacity:.55}50%{opacity:1}}
.g1-pin .g1-pin-num{animation:g1PinPulse 4s ease-in-out infinite;animation-delay:inherit}
@keyframes g1PinPulse{0%,100%{box-shadow:0 0 10px rgba(167,139,250,.45),inset 0 1px 0 rgba(255,255,255,.2)}50%{box-shadow:0 0 20px rgba(167,139,250,.85),inset 0 1px 0 rgba(255,255,255,.25)}}
/* ─── G2: Before & After — split-screen with animated slider ─── */
.g2{width:230px;height:155px}
.g2-screen{position:relative;z-index:1;width:200px;height:130px;border-radius:var(--radius-sm);overflow:hidden;background:#0e0b18;border:1px solid rgba(196,181,253,.18);box-shadow:0 18px 32px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
.g2-tag{position:absolute;top:8px;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:8px;font-weight:700;letter-spacing:1.4px;padding:3px 7px;border-radius:4px;text-transform:uppercase;z-index:3;backdrop-filter:blur(4px)}
.g2-tag.before{left:8px;color:#9b97a8;background:rgba(22,19,32,.7);border:1px solid rgba(180,165,210,.18)}
.g2-tag.after{right:8px;color:#fff;background:linear-gradient(135deg,rgba(139,92,246,.5),rgba(124,58,237,.4));border:1px solid rgba(196,181,253,.4);box-shadow:0 0 12px rgba(167,139,250,.3)}
.g2-side{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:30px 14px 14px;justify-content:flex-start}
.g2-wire{background:linear-gradient(180deg,#15111e,#0c0a14)}
.g2-real{background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(76,29,149,.06)),linear-gradient(180deg,#1a1424,#0c0a14)}
.g2-wire .ln,.g2-wire .box{background:rgba(180,165,210,.18);border-radius:3px}
.g2-real .ln,.g2-real .box{background:linear-gradient(90deg,rgba(196,181,253,.6),rgba(124,58,237,.3));border-radius:3px}
.g2-real .box{background:linear-gradient(135deg,var(--pl),var(--pd));box-shadow:0 0 10px rgba(167,139,250,.5)}
.g2-side .ln{height:5px;width:75%}
.g2-side .ln.s{width:50%}
.g2-side .ln.t{width:88%}
.g2-side .box{height:18px;width:60px;margin-top:4px;border-radius:5px}
.g2-slider{position:absolute;top:0;bottom:0;left:50%;width:1.5px;background:linear-gradient(180deg,transparent,rgba(196,181,253,.9),transparent);box-shadow:0 0 8px rgba(167,139,250,.7);z-index:4;animation:g2Slide 5s cubic-bezier(.45,.05,.55,.95) infinite}
.g2-slider::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:rgba(22,19,32,.9);border:1.5px solid rgba(196,181,253,.7);box-shadow:0 0 14px rgba(167,139,250,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.g2-slider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
@keyframes g2Slide{0%,100%{left:78%}50%{left:22%}}
.g2-real{animation:g2Reveal 5s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes g2Reveal{0%,100%{clip-path:inset(0 0 0 78%)}50%{clip-path:inset(0 0 0 22%)}}

/* ─── G3: Bite-sized, visual lessons — polaroid snapshot stack ─── */
.g3{width:210px;height:160px}
.g3-stack{position:relative;z-index:1;width:130px;height:142px}
.g3-snap{position:absolute;width:108px;height:132px;border-radius:6px;padding:9px 9px 16px;background:linear-gradient(165deg,#1f1a2e,#15101f);border:1px solid rgba(196,181,253,.32);box-shadow:0 14px 24px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);display:flex;flex-direction:column;gap:7px}
.g3-snap.back{top:6px;left:50%;transform:translateX(-50%) rotate(-15deg) translate(-16px,2px);background:linear-gradient(165deg,#1a1424,#10081a);opacity:.75;z-index:1}
.g3-snap.mid{top:0;left:50%;transform:translateX(-50%) rotate(8deg) translate(14px,-4px);background:linear-gradient(165deg,#1d152b,#13091c);opacity:.88;z-index:2}
.g3-snap.front{top:4px;left:50%;transform:translateX(-50%) rotate(-2deg);z-index:3;animation:g3SnapFloat 4s ease-in-out infinite;box-shadow:0 18px 30px -10px rgba(0,0,0,.65),0 0 24px rgba(167,139,250,.22),inset 0 1px 0 rgba(255,255,255,.08)}
@keyframes g3SnapFloat{0%,100%{transform:translateX(-50%) rotate(-2deg) translateY(0)}50%{transform:translateX(-50%) rotate(-2deg) translateY(-3px)}}
.g3-img{height:54px;border-radius:4px;position:relative;overflow:hidden;flex-shrink:0}
.g3-snap.back .g3-img{background:linear-gradient(135deg,#312E81 0%,#5b21b6 55%,var(--pd) 100%)}
.g3-snap.mid .g3-img{background:linear-gradient(135deg,#4C1D95 0%,var(--pd) 55%,var(--fuchsia) 100%)}
.g3-snap.front .g3-img{background:linear-gradient(135deg,#5b21b6 0%,var(--pl) 60%,var(--lilac) 100%)}
.g3-img::before{content:'';position:absolute;left:0;top:0;width:100%;height:55%;background:radial-gradient(ellipse 70% 95% at 32% 0%,rgba(255,255,255,.36),transparent 65%)}
.g3-img::after{content:'';position:absolute;right:-10px;bottom:-10px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);filter:blur(5px)}
.g3-text{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.g3-line{height:3px;border-radius:1.5px;background:rgba(196,181,253,.32)}
.g3-line.title{height:4px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(221,214,254,.4));width:78%;box-shadow:0 0 4px rgba(196,181,253,.2)}
.g3-line.w{width:96%}
.g3-line.m{width:78%}
.g3-line.s{width:56%}
.g3-snap.back .g3-line,.g3-snap.mid .g3-line{background:rgba(196,181,253,.22)}
.g3-snap.back .g3-line.title,.g3-snap.mid .g3-line.title{background:rgba(196,181,253,.4);box-shadow:none}
.g3-clip{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:17px;height:15px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,var(--pl),var(--pd));box-shadow:0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2);z-index:4}
.g3-clip::after{content:'';position:absolute;left:50%;top:4px;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.4)}
/* ─── G4: Tips & tricks — medal & rays (achievement) ─── */
.g4{width:210px;height:160px}
.g4-wrap{position:relative;z-index:1;width:170px;height:130px;display:flex;align-items:center;justify-content:center}
.g4-medal-wrap{position:relative;z-index:2}
.g4-medal{position:relative;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--pl) 0%,var(--pd) 60%,#5b21b6 100%);box-shadow:0 0 30px rgba(167,139,250,.6),0 12px 24px -6px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(76,29,149,.4);display:flex;align-items:center;justify-content:center;animation:g4MedalPulse 3.4s ease-in-out infinite}
@keyframes g4MedalPulse{0%,100%{box-shadow:0 0 30px rgba(167,139,250,.55),0 12px 24px -6px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(76,29,149,.4)}50%{box-shadow:0 0 44px rgba(167,139,250,.85),0 12px 24px -6px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(76,29,149,.4)}}
.g4-medal-star{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.8))}
.g4-medal-star svg{width:30px;height:30px;display:block}
.g4-ribbon{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:38px;height:24px;background:linear-gradient(180deg,var(--pd),#4C1D95);clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%);box-shadow:0 4px 8px rgba(0,0,0,.4);z-index:1}
.g4-rays{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:138px;height:138px;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.08) 8deg,transparent 16deg,transparent 38deg,rgba(255,255,255,.08) 46deg,transparent 54deg,transparent 76deg,rgba(255,255,255,.08) 84deg,transparent 92deg,transparent 114deg,rgba(255,255,255,.08) 122deg,transparent 130deg,transparent 152deg,rgba(255,255,255,.08) 160deg,transparent 168deg,transparent 190deg,rgba(255,255,255,.08) 198deg,transparent 206deg,transparent 228deg,rgba(255,255,255,.08) 236deg,transparent 244deg,transparent 266deg,rgba(255,255,255,.08) 274deg,transparent 282deg,transparent 304deg,rgba(255,255,255,.08) 312deg,transparent 320deg,transparent 342deg,rgba(255,255,255,.08) 350deg,transparent 358deg);animation:g4RaySpin 18s linear infinite;z-index:1;border-radius:50%}
@keyframes g4RaySpin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
.g4-orbit{position:absolute;color:var(--lilac);filter:drop-shadow(0 0 6px rgba(196,181,253,.85));z-index:3}
.g4-orbit svg{width:100%;height:100%;display:block}
.g4-orbit.s1{top:0;left:32%;width:10px;height:10px;animation:g4OrbitTw 2.5s ease-in-out infinite}
.g4-orbit.s2{bottom:8%;right:22%;width:8px;height:8px;animation:g4OrbitTw 2.5s ease-in-out infinite -.8s}
.g4-orbit.s3{top:35%;right:10%;width:7px;height:7px;animation:g4OrbitTw 2.5s ease-in-out infinite -1.6s}
.g4-orbit.s4{bottom:35%;left:12%;width:9px;height:9px;animation:g4OrbitTw 2.5s ease-in-out infinite -2.2s}
@keyframes g4OrbitTw{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}}
/* ─── G5: Common mistakes — side-by-side compare in neutrals + violets ─── */
.g5{width:210px;height:160px}
.g5-row{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.g5-row::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:90px;border-radius:50%;background:radial-gradient(ellipse,rgba(167,139,250,.22),transparent 65%);filter:blur(14px);pointer-events:none;z-index:-1;animation:g5Aura 3.4s ease-in-out infinite}
@keyframes g5Aura{0%,100%{opacity:.55}50%{opacity:.9}}
.g5-mini{position:relative;width:78px;height:100px;border-radius:var(--radius-sm);padding:9px;display:flex;flex-direction:column;gap:5px}
.g5-mini.wrong{background:rgba(180,165,210,.04);border:1.5px dashed rgba(180,165,210,.32);box-shadow:0 4px 12px -6px rgba(0,0,0,.35);opacity:.85}
.g5-mini.right{background:linear-gradient(160deg,rgba(167,139,250,.14),rgba(124,58,237,.04));border:1.5px solid rgba(196,181,253,.5);box-shadow:0 14px 24px -10px rgba(0,0,0,.5),0 0 26px rgba(167,139,250,.35),inset 0 1px 0 rgba(255,255,255,.06);animation:g5RightPulse 3.4s ease-in-out infinite}
@keyframes g5RightPulse{0%,100%{box-shadow:0 14px 24px -10px rgba(0,0,0,.5),0 0 22px rgba(167,139,250,.3),inset 0 1px 0 rgba(255,255,255,.06)}50%{box-shadow:0 14px 24px -10px rgba(0,0,0,.5),0 0 38px rgba(167,139,250,.55),inset 0 1px 0 rgba(255,255,255,.06)}}
.g5-thumb{height:32px;border-radius:7px}
.g5-mini.wrong .g5-thumb{background:rgba(180,165,210,.12);border:1px dashed rgba(180,165,210,.28)}
.g5-mini.right .g5-thumb{background:linear-gradient(135deg,var(--pl),var(--pd));box-shadow:0 0 12px rgba(167,139,250,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.g5-bar{height:3px;border-radius:1.5px}
.g5-mini.wrong .g5-bar{background:rgba(180,165,210,.22);width:88%}
.g5-mini.wrong .g5-bar.s{width:60%}
.g5-mini.right .g5-bar{background:linear-gradient(90deg,rgba(196,181,253,.65),rgba(167,139,250,.18));width:90%}
.g5-mini.right .g5-bar.s{width:62%}
.g5-mark{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;border:1.5px solid;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.g5-mini.wrong .g5-mark{background:rgba(40,32,52,.95);color:rgba(180,165,210,.7);border-color:rgba(180,165,210,.4)}
.g5-mini.right .g5-mark{background:linear-gradient(135deg,var(--pl),var(--pd));color:#fff;border-color:rgba(255,255,255,.5);box-shadow:0 4px 10px rgba(0,0,0,.4),0 0 18px rgba(167,139,250,.7);animation:g5CheckPop 3.4s ease-in-out infinite}
@keyframes g5CheckPop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.g5-divider{width:1px;height:64px;background:linear-gradient(180deg,transparent,rgba(196,181,253,.4),transparent)}
/* ─── G6: Decision frameworks — minimal flowchart with animated trace ─── */
.g6{width:200px;height:155px}
.g6-tree{position:relative;z-index:1;width:170px;height:120px}
.g6-node{position:absolute;border-radius:8px;background:linear-gradient(160deg,rgba(167,139,250,.18),rgba(124,58,237,.08));border:1px solid rgba(196,181,253,.4);box-shadow:0 6px 14px -6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.g6-node.top{top:0;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pl),var(--pd));border:1px solid rgba(196,181,253,.6);box-shadow:0 0 18px rgba(167,139,250,.5),inset 0 1px 0 rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:var(--fs-sm);font-weight:800}
.g6-node.top::after{content:'?'}
.g6-node.left,.g6-node.right{bottom:0;width:54px;height:24px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:9px;font-weight:700;letter-spacing:1px;color:var(--lilac);text-transform:uppercase}
.g6-node.left{left:0}
.g6-node.right{right:0}
.g6-svg{position:absolute;inset:0;pointer-events:none;z-index:0}
.g6-path{fill:none;stroke:rgba(196,181,253,.35);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:4 4}
.g6-flow{fill:none;stroke:rgba(196,181,253,.9);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:8 100;animation:g6Flow 4s linear infinite;filter:drop-shadow(0 0 4px rgba(167,139,250,.7))}
@keyframes g6Flow{0%{stroke-dashoffset:108}100%{stroke-dashoffset:0}}

/* ─── G7: Interactive lessons — two design options, cursor selects right one ─── */
.g7{width:230px;height:160px}
.g7-pair{position:relative;z-index:1;display:flex;gap:14px}
.g7-opt{position:relative;width:74px;height:96px;border-radius:var(--radius-sm);background:linear-gradient(160deg,rgba(167,139,250,.08),rgba(124,58,237,.03));border:1.5px solid rgba(180,165,210,.18);padding:9px;display:flex;flex-direction:column;gap:5px;transition:all .4s ease}
.g7-opt-thumb{height:36px;border-radius:6px;background:linear-gradient(135deg,rgba(196,181,253,.3),rgba(124,58,237,.12));position:relative;overflow:hidden}
.g7-opt-thumb::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%)}
.g7-opt-bar{height:4px;border-radius:2px;background:rgba(196,181,253,.25)}
.g7-opt-bar.s{width:60%}
.g7-opt-btn{margin-top:auto;height:12px;border-radius:4px;background:rgba(196,181,253,.18);border:1px solid rgba(196,181,253,.25)}
.g7-opt.right{animation:g7Win 4s ease-in-out infinite}
.g7-opt.right .g7-opt-btn{animation:g7WinBtn 4s ease-in-out infinite}
@keyframes g7Win{0%,40%{background:linear-gradient(160deg,rgba(167,139,250,.08),rgba(124,58,237,.03));border-color:rgba(180,165,210,.18);box-shadow:none;transform:translateY(0)}55%,95%{background:linear-gradient(160deg,rgba(139,92,246,.22),rgba(124,58,237,.08));border-color:var(--pl);box-shadow:0 0 24px rgba(167,139,250,.4),0 8px 20px -8px rgba(167,139,250,.4);transform:translateY(-3px)}100%{background:linear-gradient(160deg,rgba(167,139,250,.08),rgba(124,58,237,.03));border-color:rgba(180,165,210,.18);box-shadow:none;transform:translateY(0)}}
@keyframes g7WinBtn{0%,40%{background:rgba(196,181,253,.18);border-color:rgba(196,181,253,.25)}55%,95%{background:linear-gradient(135deg,var(--pl),var(--pd));border-color:rgba(255,255,255,.4);box-shadow:0 0 10px rgba(167,139,250,.5)}100%{background:rgba(196,181,253,.18);border-color:rgba(196,181,253,.25)}}
.g7-check{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:#34D399;color:#0e0b18;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;box-shadow:0 0 16px rgba(52,211,153,.7),0 4px 10px rgba(0,0,0,.4);border:1.5px solid rgba(255,255,255,.6);opacity:0;z-index:3;animation:g7Check 4s ease-in-out infinite}
@keyframes g7Check{0%,50%{opacity:0;transform:scale(.3) rotate(-20deg)}60%,95%{opacity:1;transform:scale(1) rotate(0deg)}100%{opacity:0;transform:scale(.3) rotate(-20deg)}}
.g7-cursor{position:absolute;z-index:4;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));animation:g7Cursor 4s cubic-bezier(.5,0,.5,1) infinite;pointer-events:none}
.g7-cursor svg{width:14px;height:14px;display:block}
@keyframes g7Cursor{0%{right:-8px;bottom:-8px;opacity:0;transform:scale(.8)}15%{opacity:1}40%{right:20px;bottom:18px;opacity:1;transform:scale(1)}55%{transform:scale(.85)}70%{right:20px;bottom:18px;opacity:1;transform:scale(1)}95%,100%{right:60px;bottom:60px;opacity:0;transform:scale(.8)}}
/* ─── G8: Hands-on exercises — editor sandbox (tools + canvas) ─── */
.g8{width:210px;height:160px}
.g8-editor{position:relative;z-index:1;width:175px;border-radius:var(--radius-sm);background:rgba(167,139,250,.04);border:1px solid rgba(180,165,210,.22);overflow:hidden;display:flex;box-shadow:0 14px 26px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)}
.g8-tools{flex-shrink:0;width:32px;background:rgba(22,19,32,.6);border-right:1px solid rgba(180,165,210,.18);padding:10px 0;display:flex;flex-direction:column;gap:8px;align-items:center}
.g8-tool{width:18px;height:18px;border-radius:5px;background:rgba(196,181,253,.18);border:1px solid rgba(196,181,253,.22);transition:all .4s ease}
.g8-tool.active{background:linear-gradient(135deg,var(--pl),var(--pd));border-color:rgba(255,255,255,.3);box-shadow:0 0 10px rgba(167,139,250,.6),inset 0 1px 0 rgba(255,255,255,.15)}
.g8-canvas{flex:1;height:110px;background:linear-gradient(165deg,#0f0c18,#0a0810);position:relative;padding:10px}
.g8-canvas::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(196,181,253,.22) 1px,transparent 1.3px);background-size:11px 11px;opacity:.6}
.g8-shape{position:absolute;border-radius:5px}
.g8-shape.s1{left:14px;top:14px;width:38px;height:14px;background:linear-gradient(135deg,rgba(196,181,253,.45),rgba(124,58,237,.2));border:1px solid rgba(196,181,253,.45);animation:g8ShapeFade 5s ease-in-out infinite}
.g8-shape.s2{right:14px;top:14px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,rgba(216,180,254,.45),rgba(168,85,247,.22));border:1px solid rgba(216,180,254,.5);animation:g8ShapeFade 5s ease-in-out infinite -1.5s}
.g8-shape.s3{left:14px;bottom:14px;width:34px;height:14px;background:linear-gradient(135deg,var(--pl),var(--pd));border:1px solid rgba(255,255,255,.3);box-shadow:0 0 12px rgba(167,139,250,.55);animation:g8ShapeFade 5s ease-in-out infinite -3s}
.g8-shape.s4{right:14px;bottom:14px;width:18px;height:18px;border-radius:50%;border:1.5px dashed rgba(196,181,253,.5);animation:g8ShapeFade 5s ease-in-out infinite -4s}
@keyframes g8ShapeFade{0%,10%{opacity:0;transform:scale(.85)}25%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
.g8-cursor{position:absolute;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));z-index:3;pointer-events:none;animation:g8Cursor 5s linear infinite}
.g8-cursor svg{width:14px;height:14px;display:block}
@keyframes g8Cursor{0%{left:20px;top:8px;opacity:0}10%,25%{left:20px;top:14px;opacity:1}40%,55%{left:64px;top:14px;opacity:1}70%,85%{left:20px;top:62px;opacity:1}90%,100%{left:20px;top:62px;opacity:0}}
/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: both sections
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .up-bento{grid-template-columns:repeat(4,1fr)}
  .b-1,.b-2{grid-column:span 4}
  .b-3,.b-4,.b-5,.b-6,.b-7,.b-8{grid-column:span 2}
  .out-bento{grid-template-columns:repeat(4,1fr)}
  .out-card.hero{grid-column:span 4;flex-direction:column;min-height:auto}
  .out-card.hero .out-graphic{flex:0 0 280px;height:280px;width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.05)}
  .out-card.hero .out-body{padding:24px 26px 26px}
  .out-card-m{grid-column:span 2}
}
@media(max-width:640px){
  .up-sec{padding:var(--sp-9) 18px}
  .up-bento{grid-template-columns:1fr;gap:14px}
  .b-1,.b-2,.b-3,.b-4,.b-5,.b-6,.b-7,.b-8{grid-column:span 1;min-height:auto}
  .up-card{padding:22px 22px 24px}
  .g1{width:200px;height:150px;gap:32px}
  .g2{width:200px;height:140px}
  .out-bento{grid-template-columns:1fr;gap:14px;grid-auto-rows:auto}
  .out-card,.out-card.hero,.out-card-m{grid-column:span 1}
  .out-graphic,.out-card.hero .out-graphic{flex:0 0 220px;height:220px}
  /* Override min-height on the graphic inner container so it fits the parent's
     220px height — otherwise it stayed at 340px and pushed the body text below
     the viewport on small screens. */
  .og1,.og2,.og3,.og4,.og5,.og6{min-height:0 !important}
  .out-card.hero .out-h{font-size:var(--fs-h3)}
  .og1-stage{transform:rotateX(22deg) rotateY(-18deg) scale(.7)}
  .og2-stack{transform:scale(.85)}
  .og4-s1{width:200px}.og4-s2{width:150px}.og4-s3{width:100px}
}
/* Mobile/tablet outcome cards: grid auto rows so cards aren't locked to 300px */
@media(max-width:1024px){
  .out-bento{grid-auto-rows:auto !important}
}
/* Give og1's stacked-card visual a bit more vertical room on mobile so the
   bottom card with the violet button isn't clipped by overflow:hidden. */
@media(max-width:640px){
  .out-graphic{height:320px !important;flex:0 0 320px !important}
  .og1-stage{transform:rotateX(22deg) rotateY(-18deg) scale(.78) !important}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ═══════════════ NEXT LESSON COUNTDOWN — uses up-card style ═══════════════ */
.nl-sec{position:relative;max-width:1228px;margin:-102px auto 0;padding:0 var(--sp-5)}
.nl-card{
  /* Inherits up-card style; same subtle top glow + stardust as the topics cards */
  padding:54px 40px 48px;
  align-items:center;
  text-align:center;
}
.nl-content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center}

.nl-eye{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  margin-bottom:30px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nl-dot{
  width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;
  background:linear-gradient(135deg,#fff,var(--pl));
  box-shadow:0 0 10px var(--pl),0 0 18px rgba(167,139,250,.5);
  animation:nlPulse 2s ease-in-out infinite;
}
@keyframes nlPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.2)}}
.nl-cd{
  display:flex;align-items:flex-start;justify-content:center;gap:22px;
  font-variant-numeric:tabular-nums slashed-zero;
}
.nl-unit{display:flex;flex-direction:column;align-items:center;gap:12px}
.nl-num{
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:var(--fs-stat);font-weight:600;line-height:.92;letter-spacing:-.04em;
  color:#fff;
}
.nl-lbl{
  font-size:10px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.nl-sep{
  align-self:flex-start;margin-top:6px;
  font-size:32px;font-weight:200;line-height:1;color:rgba(255,255,255,.22);
  user-select:none;animation:nlBlink 2s steps(2,end) infinite;
}
@keyframes nlBlink{0%,100%{opacity:.22}50%{opacity:.5}}
@media(max-width:680px){
  .nl-sec{padding:0 18px;margin-top:-30px}
  .nl-card{padding:36px 22px 32px}
  .nl-eye{font-size:10px;letter-spacing:.18em;margin-bottom:22px}
  .nl-cd{gap:8px}
  .nl-num{font-size:38px}
  .nl-sep{font-size:26px;margin-top:6px}
}
/* Hide legacy stacked variants */
.sd-sec{display:none}

/* ═══════════════ COUNTDOWN — STELLAR DRIFT, 4 BOLD VARIATIONS ═══════════════ */
.sd-sec{position:relative;max-width:1100px;margin:0 auto;padding:32px var(--sp-3) 0;display:flex;flex-direction:column;gap:36px;font-family:'Inter Variable','Inter',system-ui,sans-serif}
.sd-sec *{font-family:'Inter Variable','Inter',system-ui,sans-serif}
.sd-label{margin:0;padding:0 4px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,181,253,.4)}

/* Shared eyebrow pill */
.sd-eye{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:100px;border:1px solid rgba(167,139,250,.28);background:rgba(167,139,250,.06);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pp);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sd-pulse{width:6px;height:6px;border-radius:50%;background:var(--pl);box-shadow:0 0 8px var(--pl);animation:sdPulse 1.6s ease-in-out infinite}
@keyframes sdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* Shared starfield (small sparse stars) */
.sd-v1-stars,.sd-v2-stars,.sd-v3-stars,.sd-v4-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 8% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 18% 65%,rgba(196,181,253,.4),transparent),radial-gradient(1.5px 1.5px at 32% 22%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 48% 80%,rgba(196,181,253,.4),transparent),radial-gradient(1.5px 1.5px at 62% 38%,rgba(255,255,255,.45),transparent),radial-gradient(1px 1px at 76% 70%,rgba(196,181,253,.35),transparent),radial-gradient(1.5px 1.5px at 88% 25%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 95% 60%,rgba(196,181,253,.4),transparent);opacity:.7}

/* ───────── V1 — Stellar drift bold ───────── */
.sd-v1{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;padding:36px 24px 28px;text-align:center;overflow:hidden}
.sd-v1-glow{position:absolute;top:50%;left:50%;width:60%;height:160px;transform:translate(-50%,-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(124,58,237,.2),transparent 70%);pointer-events:none;filter:blur(30px)}
.sd-v1-time{position:relative;display:inline-flex;align-items:flex-end;gap:22px}
.sd-v1-unit{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:78px}
.sd-v1-num{font-size:clamp(48px,7vw,84px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.sd-v1-key{font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(196,181,253,.55)}
.sd-v1-sep{align-self:center;width:3px;height:3px;border-radius:50%;background:rgba(196,181,253,.4);margin-bottom:30px;box-shadow:0 0 4px rgba(196,181,253,.55)}

/* ───────── V2 — Black weight, condensed ───────── */
.sd-v2{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:32px 24px;text-align:center;overflow:hidden}
.sd-v2-time{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:720px;width:100%}
.sd-v2-unit{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 6px;border-right:1px solid rgba(167,139,250,.12)}
.sd-v2-unit:last-child{border-right:none}
.sd-v2-num{font-size:clamp(44px,6.5vw,80px);font-weight:900;letter-spacing:-.06em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.sd-v2-key{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(196,181,253,.5)}

/* ───────── V3 — Bold with hairline frame ───────── */
.sd-v3{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 24px 26px;text-align:center;overflow:hidden;border-top:1px solid rgba(167,139,250,.12);border-bottom:1px solid rgba(167,139,250,.12)}
.sd-v3-time{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:32px;flex-wrap:wrap}
.sd-v3-unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:72px;position:relative}
.sd-v3-unit::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:22px;height:2px;background:rgba(167,139,250,.35)}
.sd-v3-num{font-size:clamp(44px,6.5vw,76px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.sd-v3-key{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(196,181,253,.5);margin-top:10px}
.sd-v3-foot{font-size:12.5px;font-weight:500;color:rgba(196,181,253,.55);letter-spacing:.02em}

/* ───────── V4 — Display monolithic ───────── */
.sd-v4{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:36px 24px 28px;text-align:center;overflow:hidden}
.sd-v4-glow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(139,92,246,.14),transparent 65%);pointer-events:none;filter:blur(20px)}
.sd-v4-time{position:relative;display:inline-flex;align-items:baseline;gap:6px}
.sd-v4-num{font-size:clamp(48px,7.5vw,96px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.sd-v4-colon{font-size:clamp(36px,5.5vw,68px);font-weight:200;letter-spacing:0;line-height:.9;color:rgba(167,139,250,.35);align-self:center;padding-bottom:.05em}
.sd-v4-keys{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:520px;width:100%}
.sd-v4-keys span{font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(196,181,253,.5);text-align:center}

/* Responsive */
@media(max-width:560px){
  .sd-v1-time{gap:10px}
  .sd-v1-unit{min-width:54px;gap:8px}
  .sd-v1-num,.sd-v2-num,.sd-v3-num,.sd-v4-num{font-size:38px}
  .sd-v1-key,.sd-v2-key,.sd-v3-key,.sd-v4-keys span{font-size:9px;letter-spacing:.18em}
  .sd-v1-sep{margin-bottom:20px}
  .sd-v3-time{gap:14px}
  .sd-v3-unit{min-width:48px}
  .sd-v4-colon{font-size:28px}
}

/* Hide unused legacy variation classes */
.cdv-sec,.sx-sec,.up-cd-sec,.ed-sec{display:none}
.up-cd-label{margin:0;padding:0 4px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,181,253,.42)}

/* ───────── V1 — Notification pill ───────── */
.up-cd-v1{display:inline-flex;align-items:center;gap:14px;align-self:center;padding:10px 8px 10px 18px;border-radius:100px;background:linear-gradient(180deg,rgba(20,15,40,.7) 0%,rgba(12,8,28,.6) 100%);border:1px solid rgba(167,139,250,.2);box-shadow:0 12px 32px -16px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);font-size:13px;flex-wrap:wrap;justify-content:center}
.up-cd-v1-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.3),rgba(167,139,250,.05));color:var(--pp);flex-shrink:0;animation:upcdSparkle 3s ease-in-out infinite}
@keyframes upcdSparkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(180deg)}}
.up-cd-v1-eye{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,181,253,.6)}
.up-cd-v1-name{font-weight:600;color:#fff;font-size:13.5px;letter-spacing:-.005em}
.up-cd-v1-divider{width:1px;height:14px;background:rgba(167,139,250,.22)}
.up-cd-v1-time{font-size:13px;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
.up-cd-v1-time strong{color:#fff;font-weight:700;margin-right:1px}
.up-cd-v1-cta{display:inline-flex;align-items:center;gap:5px;padding:7px 14px 7px 16px;border-radius:100px;background:#fff;color:#0a0613;font-size:var(--fs-caption);font-weight:700;letter-spacing:.01em;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.up-cd-v1-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,255,255,.18)}

/* ───────── V2 — Glass card with progress ring ───────── */
.up-cd-v2{display:flex;align-items:center;gap:24px;padding:24px 28px;border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(20,15,40,.55) 0%,rgba(12,8,28,.5) 100%);border:1px solid rgba(167,139,250,.16);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 16px 40px -20px rgba(124,58,237,.3)}
.up-cd-v2-ring{position:relative;flex-shrink:0;width:100px;height:100px}
.up-cd-v2-ring svg{width:100%;height:100%;display:block}
.up-cd-v2-ring-fill{filter:drop-shadow(0 0 6px rgba(167,139,250,.5));transition:stroke-dashoffset 1s ease}
.up-cd-v2-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1}
.up-cd-v2-ring-num strong{font-size:30px;font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.up-cd-v2-ring-num span{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(196,181,253,.55);margin-top:3px}
.up-cd-v2-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.up-cd-v2-eye{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pl)}
.up-cd-v2-name{font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3}
.up-cd-v2-meta{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.up-cd-v2-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.4px;color:#FBBF24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.28);text-transform:uppercase}
.up-cd-v2-mins{font-size:var(--fs-caption);color:rgba(196,181,253,.55);font-weight:500}
.up-cd-v2-time{margin-top:8px;padding-top:10px;border-top:1px solid rgba(167,139,250,.14);font-size:13px;color:#fff;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:6px}
.up-cd-v2-time span:not(.up-cd-v2-time-key){font-weight:700;color:#fff}
.up-cd-v2-time-key{font-size:11px;color:rgba(196,181,253,.55);font-weight:500;margin-left:4px}

/* ───────── V3 — Bento callout ───────── */
.up-cd-v3{position:relative;display:grid;grid-template-columns:1.2fr 1px 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,rgba(20,15,40,.55) 0%,rgba(12,8,28,.5) 100%);border:1px solid rgba(167,139,250,.16);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.up-cd-v3-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 25% 50%,rgba(124,58,237,.18),transparent 65%);pointer-events:none}
.up-cd-v3-content{position:relative;padding:32px 36px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.up-cd-v3-eye{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.65)}
.up-cd-v3-pulse{width:6px;height:6px;border-radius:50%;background:var(--pl);box-shadow:0 0 8px var(--pl);animation:upcdPulse 1.6s ease-in-out infinite}
@keyframes upcdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.up-cd-v3-stat{display:inline-flex;align-items:baseline;gap:12px}
.up-cd-v3-big{font-size:96px;font-weight:700;letter-spacing:-.05em;line-height:.9;color:#fff;font-variant-numeric:tabular-nums}
.up-cd-v3-big-key{font-size:var(--fs-lg);font-weight:600;color:rgba(196,181,253,.6);letter-spacing:-.01em;align-self:flex-end;padding-bottom:10px}
.up-cd-v3-sub{font-size:13px;color:rgba(196,181,253,.55);font-weight:500;font-variant-numeric:tabular-nums}
.up-cd-v3-sub span{color:#fff;font-weight:600}
.up-cd-v3-divider{position:relative;background:linear-gradient(180deg,transparent,rgba(167,139,250,.18),transparent)}
.up-cd-v3-side{position:relative;padding:32px 28px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.up-cd-v3-side-eye{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.5)}
.up-cd-v3-side-name{font-size:17px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3}
.up-cd-v3-side-meta{font-size:var(--fs-caption);color:rgba(196,181,253,.55);font-weight:500}
.up-cd-v3-side-cta{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:8px;padding:8px 14px;border-radius:100px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.28);color:var(--pp);font-size:var(--fs-caption);font-weight:600;text-decoration:none;transition:background .25s ease,color .25s ease}
.up-cd-v3-side-cta:hover{background:rgba(167,139,250,.18);color:#fff}

/* ───────── V4 — Weekly schedule strip ───────── */
.up-cd-v4{padding:22px 24px;border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(20,15,40,.55) 0%,rgba(12,8,28,.5) 100%);border:1px solid rgba(167,139,250,.16);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.up-cd-v4-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.up-cd-v4-eye{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pl);padding:4px 10px;border-radius:100px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.24)}
.up-cd-v4-title{font-size:var(--fs-body);font-weight:600;color:#fff;letter-spacing:-.01em}
.up-cd-v4-week{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:18px}
.up-cd-v4-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;border-radius:var(--radius-sm);background:rgba(167,139,250,.04);border:1px solid rgba(167,139,250,.1)}
.up-cd-v4-d-name{font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(196,181,253,.5)}
.up-cd-v4-d-bar{width:5px;height:5px;border-radius:50%;background:rgba(167,139,250,.25)}
.up-cd-v4-day-now{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.3)}
.up-cd-v4-day-now .up-cd-v4-d-name{color:#fff}
.up-cd-v4-day-now .up-cd-v4-d-bar{background:#fff;box-shadow:0 0 6px #fff}
.up-cd-v4-day-drop{background:linear-gradient(180deg,rgba(139,92,246,.25),rgba(124,58,237,.12));border-color:rgba(167,139,250,.5);box-shadow:0 6px 20px -6px rgba(124,58,237,.4)}
.up-cd-v4-day-drop .up-cd-v4-d-name{color:#fff}
.up-cd-v4-day-drop .up-cd-v4-d-bar{background:var(--pl);box-shadow:0 0 8px var(--pl);animation:upcdPulse 1.6s ease-in-out infinite}
.up-cd-v4-d-tip{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;border-radius:100px;background:rgba(167,139,250,.18);color:var(--pp);white-space:nowrap}
.up-cd-v4-d-drop{background:var(--pl);color:#0a0613}
.up-cd-v4-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid rgba(167,139,250,.12);flex-wrap:wrap}
.up-cd-v4-course{display:flex;flex-direction:column;gap:2px}
.up-cd-v4-course-name{font-size:var(--fs-sm);font-weight:600;color:#fff;letter-spacing:-.005em}
.up-cd-v4-course-meta{font-size:11.5px;color:rgba(196,181,253,.5);font-weight:500}
.up-cd-v4-cd{display:inline-flex;align-items:baseline;gap:8px;font-size:11.5px;color:rgba(196,181,253,.55);font-variant-numeric:tabular-nums}
.up-cd-v4-cd strong{font-size:var(--fs-body);font-weight:700;color:#fff;margin-right:1px}

/* Responsive */
@media(max-width:780px){
  .up-cd-v1{flex-direction:column;border-radius:var(--radius-md);text-align:center;padding:14px 16px}
  .up-cd-v1-divider{width:60%;height:1px}
  .up-cd-v2{flex-direction:column;text-align:center}
  .up-cd-v2-info{align-items:center}
  .up-cd-v2-time{justify-content:center}
  .up-cd-v3{grid-template-columns:1fr;grid-template-rows:auto 1px auto}
  .up-cd-v3-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.18),transparent)}
  .up-cd-v3-big{font-size:64px}
  .up-cd-v4-week{grid-template-columns:repeat(4,1fr);gap:6px}
  .up-cd-v4-foot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media(max-width:520px){
  .up-cd-v3-big{font-size:52px}
  .up-cd-v3-content{padding:24px 22px}
  .up-cd-v3-side{padding:24px 22px}
}

/* Hide unused legacy variation classes */
.cdv-sec,.sx-sec{display:none}

.sx-card{position:relative;padding:28px 32px 24px;border-radius:var(--radius-md);background:linear-gradient(180deg,#08070f 0%,#040308 100%);border:1px solid rgba(167,139,250,.18);box-shadow:0 30px 80px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}

/* Stars + scanlines bg */
.sx-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 6% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 14% 64%,rgba(196,181,253,.5),transparent),radial-gradient(1px 1px at 28% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 42% 78%,rgba(196,181,253,.5),transparent),radial-gradient(1.5px 1.5px at 58% 22%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 72% 60%,rgba(196,181,253,.5),transparent),radial-gradient(1.5px 1.5px at 86% 38%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 94% 80%,rgba(196,181,253,.4),transparent);opacity:.7}
.sx-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(167,139,250,.025) 3px,rgba(167,139,250,.025) 4px);opacity:.6}

/* Top status bar */
.sx-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(167,139,250,.14);flex-wrap:wrap}
.sx-top-l{display:inline-flex;align-items:center;gap:12px}
.sx-mission-no{display:inline-block;padding:4px 9px;border-radius:5px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.22);font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--pp)}
.sx-mission-sep{width:5px;height:5px;border-radius:50%;background:rgba(167,139,250,.35)}
.sx-mission-name{font-size:13px;font-weight:600;color:#fff;letter-spacing:.02em}
.sx-top-r{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,181,253,.7)}
.sx-status-text strong{color:#34D399;font-weight:700}
.sx-led{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399,0 0 16px rgba(52,211,153,.4);animation:sxLed 1.4s ease-in-out infinite}
@keyframes sxLed{0%,100%{opacity:1}50%{opacity:.4}}

/* Display */
.sx-display{position:relative;z-index:1;display:flex;align-items:center;gap:28px;padding:32px 0 24px}
.sx-patch{flex-shrink:0;width:80px;height:80px;animation:sxPatchSpin 40s linear infinite;filter:drop-shadow(0 0 12px rgba(167,139,250,.3))}
@keyframes sxPatchSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sx-tminus-block{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.sx-tminus-eye{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.65)}
.sx-time{display:inline-flex;align-items:baseline;gap:8px}
.sx-num{font-size:72px;font-weight:700;letter-spacing:-.045em;line-height:.95;color:#fff;font-variant-numeric:tabular-nums;min-width:1.6ch;text-align:left}
.sx-colon{font-size:var(--fs-stat);font-weight:200;line-height:1;color:rgba(167,139,250,.4);padding-bottom:6px}
.sx-colon-blink{animation:sxColonBlink 1s steps(2) infinite}
@keyframes sxColonBlink{0%,100%{opacity:.4}50%{opacity:1}}
.sx-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px}
.sx-keys span{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.45);text-align:left;padding-left:2px}

/* Progress bar */
.sx-progress{position:relative;z-index:1;height:24px;margin:6px 0 16px;border-top:1px solid rgba(167,139,250,.12);padding-top:12px;display:flex;align-items:center}
.sx-progress-track{position:absolute;left:0;right:0;top:18px;height:2px;background:rgba(167,139,250,.12);border-radius:2px}
.sx-progress-fill{position:absolute;left:0;top:18px;height:2px;background:linear-gradient(90deg,var(--pl),#fff);border-radius:2px;width:35%;box-shadow:0 0 8px rgba(167,139,250,.6)}
.sx-progress-fill::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 14px rgba(196,181,253,.7)}
.sx-progress-marks{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:space-between}
.sx-progress-marks span{width:1px;height:6px;background:rgba(167,139,250,.18)}

/* Telemetry */
.sx-tele{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.14);border-radius:8px;overflow:hidden}
.sx-tele-cell{padding:14px 16px;background:linear-gradient(180deg,rgba(8,7,15,.85) 0%,rgba(4,3,8,.9) 100%);display:flex;flex-direction:column;gap:5px}
.sx-tele-key{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.45)}
.sx-tele-val{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.005em}
.sx-tele-val span{color:rgba(196,181,253,.55);font-weight:500}

/* Responsive */
@media(max-width:760px){
  .sx-card{padding:22px 22px 20px}
  .sx-display{flex-direction:column;align-items:flex-start;gap:18px;padding:24px 0 18px}
  .sx-patch{width:60px;height:60px}
  .sx-num{font-size:var(--fs-stat)}
  .sx-colon{font-size:32px}
  .sx-tele{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .sx-num{font-size:36px}
  .sx-colon{font-size:24px}
  .sx-keys{grid-template-columns:repeat(4,1fr);gap:4px}
  .sx-keys span{font-size:8.5px;letter-spacing:.16em}
  .sx-tele{grid-template-columns:1fr}
  .sx-top{flex-direction:column;align-items:flex-start;gap:10px}
}

/* Hide unused legacy variation classes */
.cdv-sec{display:none}
.cdv-label{margin:0;padding:0 4px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,181,253,.42)}

/* Shared comet/satellite glow */
@keyframes cdvCometDrift{0%,100%{cx:280;cy:35;opacity:.85}50%{cx:520;cy:35;opacity:1}}

/* ───────── V1 — Orbital arc with progress comet ───────── */
.cdv-v1{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 32px 32px;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(14,10,28,.7) 0%,rgba(8,6,20,.6) 100%);border:1px solid rgba(167,139,250,.16);overflow:hidden}
.cdv-v1::before{content:'';position:absolute;inset:0;background:radial-gradient(2px 2px at 8% 60%,rgba(196,181,253,.4),transparent),radial-gradient(1.5px 1.5px at 22% 75%,rgba(255,255,255,.5),transparent),radial-gradient(2px 2px at 90% 70%,rgba(196,181,253,.4),transparent),radial-gradient(1.5px 1.5px at 75% 50%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 50% 80%,rgba(196,181,253,.3),transparent);pointer-events:none}
.cdv-v1-arc{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:80%;max-width:680px;height:130px;pointer-events:none;z-index:0}
.cdv-v1-comet{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(196,181,253,.7));animation:cdvCometRun 8s ease-in-out infinite}
@keyframes cdvCometRun{0%,100%{opacity:.7;transform:translateX(-60px)}50%{opacity:1;transform:translateX(60px)}}
.cdv-v1-eye{position:relative;z-index:1;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.7);margin-top:24px}
.cdv-v1-time{position:relative;z-index:1;display:inline-flex;align-items:flex-end;gap:14px;margin-top:8px}
.cdv-v1-unit{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:90px}
.cdv-v1-num{font-size:60px;font-weight:700;letter-spacing:-.04em;line-height:.95;color:#fff;font-variant-numeric:tabular-nums}
.cdv-v1-key{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.5)}
.cdv-v1-sep{font-size:36px;font-weight:300;color:rgba(167,139,250,.25);align-self:center;padding-bottom:18px}

/* ───────── V2 — Mission control / T-Minus ───────── */
.cdv-v2{position:relative;padding:24px 28px;border-radius:var(--radius-md);background:rgba(8,6,16,.85);border:1px solid rgba(167,139,250,.2);overflow:hidden}
.cdv-v2::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(167,139,250,.025) 3px,rgba(167,139,250,.025) 4px);pointer-events:none}
.cdv-v2-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cdv-v2-status{padding-bottom:14px;border-bottom:1px dashed rgba(167,139,250,.18);margin-bottom:14px}
.cdv-v2-status-item{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(196,181,253,.7)}
.cdv-v2-led{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 8px #34D399;animation:cdvLed 1.8s ease-in-out infinite}
.cdv-v2-led-amber{background:#FBBF24;box-shadow:0 0 8px #FBBF24}
@keyframes cdvLed{0%,100%{opacity:1}50%{opacity:.4}}
.cdv-v2-display{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:10px;justify-content:center;padding:12px 0;width:100%}
.cdv-v2-tminus{font-size:var(--fs-md);font-weight:600;letter-spacing:.06em;color:rgba(196,181,253,.7);margin-right:6px}
.cdv-v2-num{font-size:54px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;min-width:1.6ch;text-align:center}
.cdv-v2-colon{font-size:36px;font-weight:300;color:rgba(167,139,250,.45);line-height:1}
.cdv-v2-keys{padding-top:10px;border-top:1px dashed rgba(167,139,250,.18);justify-content:center;gap:0;display:grid;grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr;max-width:560px;margin:0 auto}
.cdv-v2-keys span{text-align:center;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.45)}

/* ───────── V3 — Launch trajectory ───────── */
.cdv-v3{position:relative;display:grid;grid-template-columns:60px 1fr;gap:0;border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(14,10,28,.7) 0%,rgba(8,6,20,.6) 100%);border:1px solid rgba(167,139,250,.16);overflow:hidden}
.cdv-v3-trail{position:relative;display:flex;align-items:stretch;justify-content:center;background:linear-gradient(180deg,rgba(167,139,250,.06),transparent);border-right:1px solid rgba(167,139,250,.1)}
.cdv-v3-trail svg{width:100%;height:100%}
.cdv-v3-rocket{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(196,181,253,.6));animation:cdvRocketAscend 4s ease-in-out infinite}
@keyframes cdvRocketAscend{0%{cy:180;opacity:.6}50%{cy:50;opacity:1}100%{cy:20;opacity:.7}}
.cdv-v3-content{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.cdv-v3-eye{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.7)}
.cdv-v3-flicker{width:6px;height:6px;border-radius:50%;background:#FBBF24;box-shadow:0 0 8px #FBBF24;animation:cdvLed 1s ease-in-out infinite}
.cdv-v3-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cdv-v3-cell{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border-radius:var(--radius-sm);background:rgba(167,139,250,.05);border:1px solid rgba(167,139,250,.12)}
.cdv-v3-num{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cdv-v3-key{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(196,181,253,.5)}
.cdv-v3-foot{font-size:11.5px;color:rgba(196,181,253,.45);font-weight:500;letter-spacing:.02em}

/* ───────── V4 — Orbital ring with satellite ───────── */
.cdv-v4{position:relative;display:flex;align-items:center;justify-content:center;padding:24px;min-height:280px;border-radius:var(--radius-lg);background:linear-gradient(180deg,rgba(14,10,28,.7) 0%,rgba(8,6,20,.6) 100%);border:1px solid rgba(167,139,250,.16);overflow:hidden}
.cdv-v4-orbit{position:absolute;top:50%;left:50%;width:320px;height:320px;transform:translate(-50%,-50%);pointer-events:none}
.cdv-v4-orbit svg{width:100%;height:100%}
.cdv-v4-satellite{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 14px rgba(196,181,253,.7);transform-origin:0 0;animation:cdvOrbit 8s linear infinite}
@keyframes cdvOrbit{from{transform:translate(-4px,-4px) rotate(0deg) translateX(148px) rotate(0deg)}to{transform:translate(-4px,-4px) rotate(360deg) translateX(148px) rotate(-360deg)}}
.cdv-v4-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.cdv-v4-eye{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,181,253,.6)}
.cdv-v4-time{display:inline-flex;align-items:baseline;gap:6px}
.cdv-v4-num{font-size:46px;font-weight:700;letter-spacing:-.035em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cdv-v4-unit-key{font-size:var(--fs-sm);font-weight:600;color:rgba(196,181,253,.55);margin-right:6px;align-self:flex-end;padding-bottom:4px}
.cdv-v4-secs{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;color:rgba(196,181,253,.55);font-variant-numeric:tabular-nums}
.cdv-v4-secs span:first-child{font-size:var(--fs-lg);font-weight:600;color:#fff}
.cdv-v4-foot{margin-top:6px;font-size:11.5px;color:rgba(196,181,253,.5);font-weight:500;letter-spacing:.02em}

/* Responsive */
@media(max-width:840px){
  .cdv-v1-num{font-size:42px}
  .cdv-v1-unit{min-width:60px}
  .cdv-v1-sep{font-size:24px;padding-bottom:12px}
  .cdv-v2-num{font-size:38px}
  .cdv-v2-colon{font-size:26px}
  .cdv-v3{grid-template-columns:1fr}
  .cdv-v3-trail{height:60px;border-right:none;border-bottom:1px solid rgba(167,139,250,.1)}
  .cdv-v3-trail svg{transform:rotate(-90deg)}
  .cdv-v3-num{font-size:26px}
  .cdv-v4{min-height:240px}
  .cdv-v4-orbit{width:240px;height:240px}
  @keyframes cdvOrbit{from{transform:translate(-4px,-4px) rotate(0deg) translateX(108px) rotate(0deg)}to{transform:translate(-4px,-4px) rotate(360deg) translateX(108px) rotate(-360deg)}}
  .cdv-v4-num{font-size:34px}
}
@media(max-width:520px){
  .cdv-v1-time{gap:6px;flex-wrap:wrap;justify-content:center}
  .cdv-v1-num{font-size:30px}
  .cdv-v1-sep{display:none}
  .cdv-v2-num{font-size:28px}
  .cdv-v2-colon{font-size:20px}
  .cdv-v2-status-item{font-size:9.5px}
  .cdv-v3-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═════════════════ PRICING (M layout — Free + Pro w/ billing switcher) ═════════════════ */
.bill-switch{display:inline-flex;align-items:center;padding:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:100px;position:relative;isolation:isolate}
.bill-switch button{position:relative;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.1px;color:rgba(255,255,255,.55);background:transparent;border:0;padding:9px 18px;border-radius:100px;cursor:pointer;transition:color .25s;white-space:nowrap}
.bill-switch button:hover{color:rgba(255,255,255,.85)}
.bill-switch button.active{color:#fff}
.bill-switch-pill{position:absolute;top:5px;bottom:5px;border-radius:100px;background:var(--p);box-shadow:0 6px 16px -4px rgba(124,58,237,.5),inset 0 1px 0 rgba(255,255,255,.2);z-index:-1;transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1)}
.bill-switch button[data-badge]::after{content:attr(data-badge);display:inline-block;margin-left:7px;vertical-align:middle;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:9.5px;font-weight:700;letter-spacing:.4px;line-height:1;padding:3px 6px;border-radius:100px;background:rgba(139,92,246,.16);color:var(--pp);border:1px solid rgba(167,139,250,.28);white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.bill-switch button.active[data-badge]::after{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4)}

.pl-card{position:relative;display:flex;flex-direction:column;padding:36px 32px 32px;border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(167,139,250,.06) 0%,rgba(124,58,237,.02) 100%);border:1px solid rgba(167,139,250,.16);box-shadow:0 18px 40px -16px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .4s;isolation:isolate}
.pl-card.featured{
  background:linear-gradient(180deg,rgba(139,92,246,.14) 0%,rgba(124,58,237,.05) 100%);
  border:1.8px solid rgba(167,139,250,.55);
  box-shadow:0 24px 56px -16px rgba(0,0,0,.5),0 0 70px rgba(139,92,246,.3),inset 0 0 60px rgba(167,139,250,.1)
}
.pl-card.featured::before{display:none}
/* Animated stroke ring — sits over the static border, no effect on the fill */
.pl-card.featured::after{
  content:'';
  position:absolute;
  inset:-1.8px;
  border-radius:25px;
  padding:1.8px;
  background:conic-gradient(from var(--pl-angle,0deg),
    transparent 0deg,
    transparent 200deg,
    rgba(167,139,250,.6) 250deg,
    var(--pl) 285deg,
    var(--pp) 295deg,
    var(--pl) 305deg,
    rgba(167,139,250,.6) 340deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:3;
  animation:plBorderFlow 4s linear infinite
}
@property --pl-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes plBorderFlow{to{--pl-angle:360deg}}
@media (prefers-reduced-motion: reduce){.pl-card.featured::after{animation:none}}
.pl-popular{position:absolute;top:-12px;left:24px;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:100px;background:var(--p);color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(139,92,246,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.pl-name{font-size:19px;font-weight:700;color:rgba(255,255,255,.95);letter-spacing:-.2px;margin:0 0 16px}
.pl-card.featured .pl-name{color:var(--pp)}
.pl-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.pl-price-num{font-size:46px;font-weight:600;letter-spacing:-1.5px;color:#fff;line-height:1;transition:opacity .25s}
.pl-price-period{font-size:var(--fs-sm);color:var(--t2);font-weight:500}
.pl-billed{font-size:12.5px;color:var(--t2);margin-bottom:0;min-height:18px;transition:opacity .25s}
.pl-billed b{color:rgba(255,255,255,.85);font-weight:600}

/* Daily-cost line — supporting micro-detail, sits subtly under billing */
.pl-daily{
  font-size:13px;
  color:rgba(255,255,255,.7);
  margin:4px 0 22px;
  font-weight:500;
  letter-spacing:.1px;
  transition:opacity .25s;
}

/* Library reassurance line at the bottom of Pro card */
.pl-library{
  margin-top:18px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:rgba(139,92,246,.06);
  border:1px solid rgba(167,139,250,.16);
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;
  color:rgba(255,255,255,.78);
  line-height:1.4;
}
.pl-library svg{flex-shrink:0;color:var(--pl)}
.pl-library b{color:#fff;font-weight:600}

/* Discount badge on Pro card — appears next to price when discount applies */
.pl-discount{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:700;letter-spacing:.3px;
  color:#34D399;
  background:rgba(52,211,153,.12);
  border:1px solid rgba(52,211,153,.35);
  padding:4px 9px;border-radius:100px;
  margin-left:10px;
  vertical-align:middle;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .3s,transform .3s;
  white-space:nowrap;
}
.pl-discount.visible{opacity:1;transform:translateY(0)}
.pl-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:12px 18px;border-radius:100px;font-size:14.5px;font-weight:600;text-decoration:none;letter-spacing:.1px;margin-bottom:28px;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}
.pl-cta-ghost{background:rgba(167,139,250,.07);border:1px solid rgba(167,139,250,.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pl-cta-ghost:hover{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.3);color:#fff;transform:translateY(-1px)}
.pl-cta-primary{background:linear-gradient(180deg,var(--pl) 0%,var(--pd) 100%);border:none;color:#fff;box-shadow:0 10px 22px -4px rgba(124,58,237,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.pl-cta-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -4px rgba(124,58,237,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.pl-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin:0 0 22px}
.pl-guarantee{display:inline-flex;align-items:center;gap:7px;align-self:center;font-size:var(--fs-caption);font-weight:500;color:rgba(52,211,153,.92);letter-spacing:.1px;margin:-14px auto 22px;padding:0}
.pl-guarantee svg{flex-shrink:0;color:#34D399;filter:drop-shadow(0 0 4px rgba(52,211,153,.45))}
.pl-feat-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--t2);margin:0 0 16px}
.pl-card.featured .pl-feat-eyebrow{color:var(--pp)}
.pl-feats{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none}
.pl-feat{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-sm);color:rgba(255,255,255,.82);line-height:1.5}
.pl-feat-icon{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:rgba(52,211,153,.15);color:#34D399;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pl-feat-off{color:rgba(255,255,255,.32)}
.pl-feat-off .pl-feat-icon{background:rgba(255,255,255,.04);color:rgba(255,255,255,.25)}

.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:780px;margin:0 auto;align-items:start}
@media(max-width:780px){.m-grid{grid-template-columns:1fr}}
.m-switch-wrap{display:flex;justify-content:center;margin-bottom:36px}
.m-switch-note{text-align:center;font-size:13.5px;color:var(--t2);margin:-22px 0 36px;font-weight:500}
.m-switch-note b{color:var(--pl);font-weight:700}
/* ── Pricing toggle: tighten on small screens so 3 buttons fit comfortably ── */
@media(max-width:600px){
  .m-switch-wrap{margin-bottom:28px}
  .bill-switch{padding:4px}
  .bill-switch button{font-size:var(--fs-caption);padding:8px 14px}
  .bill-switch button[data-badge]::after{display:none}
}
@media(max-width:380px){
  .bill-switch button{font-size:11px;padding:7px 10px}
}


/* ═════════════════ PRE-FOOTER BANNER ═════════════════ */
.pfb{position:relative;max-width:1240px;margin:0 auto;padding:120px 24px}
.pfb-card{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;padding:96px 48px 88px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,rgba(139,92,246,.18) 0%,rgba(139,92,246,.06) 35%,transparent 70%),linear-gradient(180deg,#0c0a14 0%,#070610 100%);border:1px solid rgba(180,165,210,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 40px 80px -20px rgba(0,0,0,.5)}
.pfb-aurora{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:720px;height:520px;background:radial-gradient(closest-side,rgba(139,92,246,.55) 0%,rgba(139,92,246,.18) 35%,transparent 70%);filter:blur(60px);z-index:0;animation:pfbAuroraDrift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes pfbAuroraDrift{0%{transform:translate(-52%,-10px) scale(1)}100%{transform:translate(-48%,20px) scale(1.08)}}
.pfb-aurora-2{position:absolute;bottom:-200px;left:20%;width:480px;height:380px;background:radial-gradient(closest-side,rgba(236,72,153,.18) 0%,transparent 70%);filter:blur(70px);z-index:0;animation:pfbAuroraDrift2 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes pfbAuroraDrift2{0%{transform:translate(0,0) scale(1);opacity:.7}100%{transform:translate(40px,-20px) scale(1.1);opacity:1}}
.pfb-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 75%);z-index:0;pointer-events:none;opacity:.7}
.pfb-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--pl);box-shadow:0 0 8px var(--p),0 0 16px rgba(139,92,246,.5);z-index:0;pointer-events:none;opacity:0;animation:pfbParticleFloat 6s linear infinite}
.pfb-particle:nth-child(1){left:18%;bottom:0;animation-delay:0s;animation-duration:7s}
.pfb-particle:nth-child(2){left:32%;bottom:0;animation-delay:1.4s;animation-duration:8s}
.pfb-particle:nth-child(3){left:64%;bottom:0;animation-delay:2.8s;animation-duration:6.5s}
.pfb-particle:nth-child(4){left:78%;bottom:0;animation-delay:0.7s;animation-duration:9s}
.pfb-particle:nth-child(5){left:88%;bottom:0;animation-delay:3.5s;animation-duration:7.5s}
@keyframes pfbParticleFloat{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}85%{opacity:.6}100%{transform:translateY(-380px) scale(1.1);opacity:0}}
.pfb-content{position:relative;z-index:1;max-width:760px;margin:0 auto}
.pfb-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--pp);margin-bottom:32px}
.pfb-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--pl);box-shadow:0 0 10px var(--pl),0 0 18px rgba(167,139,250,.6);animation:pfbDotPulse 2s ease-in-out infinite}
@keyframes pfbDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
.pfb-h{font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-0.035em;font-weight:700;color:#fff;margin:0 0 24px}
.pfb-h em{font-style:normal;color:#fff}
.pfb-sub{font-size:var(--fs-lg);line-height:1.6;color:var(--t2);max-width:540px;margin:0 auto 44px}
.pfb-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:48px}
.pfb-cta{position:relative;display:inline-flex;align-items:center;gap:10px;padding:18px 34px;border-radius:100px;background:var(--p);color:#fff;font-size:var(--fs-md);font-weight:600;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 12px 32px rgba(139,92,246,.35),0 0 60px rgba(139,92,246,.25);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .3s;overflow:hidden;isolation:isolate}
.pfb-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 40%);z-index:-1;transition:opacity .35s}
.pfb-cta::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);transform:skewX(-18deg);z-index:-1;transition:left .8s cubic-bezier(.22,1,.36,1)}
.pfb-cta:hover{transform:translateY(-2px) scale(1.015);background:var(--pl);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 16px 40px rgba(139,92,246,.5),0 0 80px rgba(139,92,246,.4)}
.pfb-cta:hover::after{left:140%}
.pfb-cta-arrow{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pfb-cta:hover .pfb-cta-arrow{transform:translateX(4px)}
.pfb-trust{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;padding-top:36px;border-top:1px solid rgba(255,255,255,.06)}
.pfb-trust-item{display:inline-flex;align-items:center;gap:10px;color:var(--t2);font-size:var(--fs-sm);font-weight:500}
.pfb-trust-icon{width:18px;height:18px;color:var(--pl);flex-shrink:0}
@media(max-width:720px){
  .pfb{padding:80px 18px}
  .pfb-card{padding:64px 24px 56px;border-radius:var(--radius-xl)}
  .pfb-aurora{width:520px;height:380px;top:-120px}
  .pfb-h{font-size:clamp(34px,9vw,44px);letter-spacing:-0.025em}
  .pfb-sub{font-size:var(--fs-md);margin-bottom:36px}
  .pfb-actions{flex-direction:column;gap:8px;margin-bottom:36px}
  .pfb-cta{width:100%;padding:18px 28px;justify-content:center}
  .pfb-trust{gap:18px 24px;padding-top:28px;font-size:13px}
  .pfb-trust-item{font-size:13px}
}


/* ==================== BLOCK SEPARATOR ==================== */


/* ═══ Embedded courses platform preview ═══ */
.cp-preview-wrap{
  position:relative;
  width:100%;
  height:1208px;
  overflow:hidden;
  background:#0F0A1F;
  /* Isolate the iframe's layout, paint and style from the parent so scrolling
     past it doesn't trigger reflow/repaint of the surrounding page. */
  contain:layout style paint;
}
.cp-preview-iframe{
  /* Hint to the browser this is its own GPU layer; combined with `contain`
     above, this keeps scroll smooth even when the iframe is large. */
  transform:translateZ(0);
}
/* Iframe rendered at fixed desktop width (1400px) so its internal media
   queries never trigger smaller layouts (the mockup stacks .dashboard-row
   at 1050px and .stats-row to 2-col at 900px). Parent .cp-preview-wrap has
   overflow:hidden so content naturally clips off-screen on narrow viewports. */
.cp-preview-iframe{
  width:1400px;
  height:1500px;
  border:0;
  display:block;
  pointer-events:none;
  background:transparent;
}
.cp-preview-wrap::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:200px;
  background:linear-gradient(180deg, transparent 0%, rgba(8,8,14,.55) 35%, rgba(8,8,14,.92) 70%, rgba(8,8,14,1) 100%);
  pointer-events:none;
  z-index:2;
}


/* ==================== BLOCK SEPARATOR ==================== */


  /* ───── Social proof preview shared atoms ───── */
  .sp-wrap{position:relative;z-index:3;max-width:1180px;margin:64px auto 0;padding:0 var(--sp-3)}
  .sp-label{display:flex;align-items:center;gap:14px;margin:0 auto 24px;max-width:1180px}
  .sp-label-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(109,40,217,.12));border:1px solid rgba(196,181,253,.24);font-size:var(--fs-caption);font-weight:700;color:var(--pp);font-family:'Inter Variable','Inter',system-ui,sans-serif}
  .sp-label-text{font-size:var(--fs-body);font-weight:600;color:var(--t1);font-family:'Inter Variable','Inter',system-ui,sans-serif}
  .sp-label-desc{font-size:var(--fs-caption);color:var(--t2);margin-left:auto;font-weight:400;font-family:'Inter Variable','Inter',system-ui,sans-serif}

  .sp-av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-caption);font-weight:600;letter-spacing:-.01em;border:2px solid rgba(20,15,30,.85);box-shadow:0 2px 6px rgba(0,0,0,.35)}
  .sp-av.hav-1{background:linear-gradient(135deg,var(--p),var(--pd))}
  .sp-av.hav-2{background:linear-gradient(135deg,#EC4899,var(--pl))}
  .sp-av.hav-3{background:linear-gradient(135deg,#22D3EE,var(--p))}
  .sp-av.hav-4{background:linear-gradient(135deg,#FBBF24,#EC4899)}
  .sp-av.hav-5{background:linear-gradient(135deg,var(--pl),var(--lilacL));color:#4C1D95}
  .sp-av.hav-6{background:linear-gradient(135deg,#34D399,#06B6D4)}
  .sp-av.hav-7{background:linear-gradient(135deg,#F472B6,var(--pl))}

  /* ───── UNIFORM GRID ───── */
  .sp-uni{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;font-family:'Inter Variable','Inter',system-ui,sans-serif}
  /* Smooth, premium scroll-in for each card */
  .sp-uni .sp-uni-card.rv{
    opacity:0;
    transform:translate3d(0,48px,0) scale(.96);
    transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
  }
  .sp-uni .sp-uni-card.rv.vis{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  /* Preserve the hover lift after the reveal animation finishes */
  .sp-uni .sp-uni-card.rv.vis:hover{
    transform:translate3d(0,-10px,0) scale(1);
  }
  /* Reorder so Community sits in the middle */
  .sp-uni .sp-uni-card.is-yt{order:1}
  .sp-uni .sp-uni-card.is-tp{order:2}
  .sp-uni .sp-uni-card.is-community{order:3}
  .sp-uni .sp-uni-card.is-course{order:4}
  .sp-uni .sp-uni-card.is-pink{order:5}
  .sp-uni-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(180deg,rgba(22,19,32,.7),rgba(12,10,20,.5));border:1px solid rgba(180,165,210,.1);box-shadow:0 24px 60px -25px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);isolation:isolate;transition:transform .35s ease;padding:30px 24px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;min-height:300px}
  .sp-uni-card:hover{transform:translateY(-4px)}
  .sp-uni-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(221,214,254,.3) 0%,transparent 30%,transparent 70%,rgba(196,181,253,.1) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1;opacity:.9}
  .sp-uni-glow{position:absolute;top:-50%;left:-20%;width:140%;height:130%;background:radial-gradient(ellipse,rgba(196,181,253,.12),transparent 60%);pointer-events:none;z-index:0;filter:blur(20px)}

  .sp-uni-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
  .sp-uni-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:13px;flex-shrink:0;background:linear-gradient(135deg,var(--ic-bg-1,rgba(167,139,250,.22)),var(--ic-bg-2,rgba(124,58,237,.08)));border:1px solid var(--ic-border,rgba(167,139,250,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px var(--ic-shadow,rgba(124,58,237,.22));color:var(--ic-color,var(--pl));transition:all .4s cubic-bezier(.22,1,.36,1)}
  .sp-uni-card.is-community .sp-uni-icon{--ic-color:var(--pl);--ic-border:rgba(167,139,250,.28);--ic-border-hover:rgba(167,139,250,.55);--ic-shadow:rgba(124,58,237,.22);--ic-bg-1:rgba(167,139,250,.22);--ic-bg-2:rgba(124,58,237,.08)}
  .sp-uni-card.is-tp .sp-uni-icon{--ic-color:#34D399;--ic-border:rgba(52,211,153,.32);--ic-border-hover:rgba(52,211,153,.6);--ic-shadow:rgba(5,150,105,.22);--ic-bg-1:rgba(52,211,153,.22);--ic-bg-2:rgba(5,150,105,.08)}
  .sp-uni-card.is-yt .sp-uni-icon{--ic-color:#FB7185;--ic-border:rgba(251,113,133,.32);--ic-border-hover:rgba(251,113,133,.6);--ic-shadow:rgba(190,18,60,.22);--ic-bg-1:rgba(251,113,133,.22);--ic-bg-2:rgba(190,18,60,.08)}
  .sp-uni-card.is-course .sp-uni-icon{--ic-color:var(--pl);--ic-border:rgba(167,139,250,.28);--ic-border-hover:rgba(167,139,250,.55);--ic-shadow:rgba(124,58,237,.22);--ic-bg-1:rgba(167,139,250,.22);--ic-bg-2:rgba(124,58,237,.08)}
  .sp-uni-card.is-pink .sp-uni-icon{--ic-color:#F472B6;--ic-border:rgba(244,114,182,.32);--ic-border-hover:rgba(244,114,182,.6);--ic-shadow:rgba(190,24,93,.22);--ic-bg-1:rgba(244,114,182,.22);--ic-bg-2:rgba(190,24,93,.08)}
  .sp-uni-icon svg{width:22px;height:22px}
  .sp-uni-card:hover .sp-uni-icon{transform:scale(1.05);border-color:var(--ic-border-hover,rgba(167,139,250,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px var(--ic-shadow,rgba(124,58,237,.3))}
  .sp-uni-source{font-size:var(--fs-body);font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.25}
  .sp-uni-sub{font-size:var(--fs-caption);color:rgba(255,255,255,.55);font-weight:500;margin-top:4px;letter-spacing:.02em}

  .sp-uni-divider{position:relative;z-index:2;height:1px;width:60%;background:linear-gradient(90deg,transparent,rgba(196,181,253,.18),transparent)}

  .sp-uni-mid{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:auto}
  .sp-uni-num{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:.9;color:#fff}
  .sp-uni-num span{color:rgba(196,181,253,.65);font-size:.35em;font-weight:600;margin-left:2px;letter-spacing:-.02em}
  .sp-uni-stars{display:inline-flex;gap:3px}
  .sp-uni-stars svg{width:18px;height:18px;filter:drop-shadow(0 2px 6px rgba(251,191,36,.4))}
  .sp-uni-stars.is-tp svg{filter:drop-shadow(0 2px 6px rgba(0,182,122,.4))}
  .sp-uni-meta{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.3}

  /* Verify arrow — appears on hover, matches card brand color */
  .sp-uni-arrow{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--ic-border,rgba(196,181,253,.16));display:inline-flex;align-items:center;justify-content:center;color:var(--ic-color,rgba(196,181,253,.7));opacity:0;transform:translate(-4px,4px);transition:opacity .35s ease,transform .35s ease,background .25s ease,border-color .25s ease;z-index:3;pointer-events:none;backdrop-filter:blur(8px)}
  .sp-uni-card.is-community .sp-uni-arrow{--ic-color:var(--pl);--ic-border:rgba(167,139,250,.28)}
  .sp-uni-card.is-tp .sp-uni-arrow{--ic-color:#34D399;--ic-border:rgba(52,211,153,.32)}
  .sp-uni-card.is-yt .sp-uni-arrow{--ic-color:#FB7185;--ic-border:rgba(251,113,133,.32)}
  .sp-uni-card.is-course .sp-uni-arrow{--ic-color:var(--pl);--ic-border:rgba(167,139,250,.28)}
  .sp-uni-card.is-pink .sp-uni-arrow{--ic-color:#F472B6;--ic-border:rgba(244,114,182,.32)}
  .sp-uni-card:hover .sp-uni-arrow{opacity:1;transform:translate(0,0);background:rgba(255,255,255,.04);border-color:var(--ic-border-hover,rgba(196,181,253,.5))}
  .sp-uni-card.is-community:hover .sp-uni-arrow,
  .sp-uni-card.is-course:hover .sp-uni-arrow{--ic-border-hover:rgba(167,139,250,.55)}
  .sp-uni-card.is-tp:hover .sp-uni-arrow{--ic-border-hover:rgba(52,211,153,.6)}
  .sp-uni-card.is-yt:hover .sp-uni-arrow{--ic-border-hover:rgba(251,113,133,.6)}
  .sp-uni-card.is-pink:hover .sp-uni-arrow{--ic-border-hover:rgba(244,114,182,.6)}
  .sp-uni-card{cursor:pointer}

  /* Tablet: 3 columns; last 2 cards span evenly across the second row */
  @media(max-width:1100px){
    .sp-uni{grid-template-columns:repeat(6,1fr)}
    .sp-uni-card{min-height:280px;padding:28px 20px}
    .sp-uni-num{font-size:46px}
    .sp-uni-card:nth-child(1),
    .sp-uni-card:nth-child(2),
    .sp-uni-card:nth-child(3){grid-column:span 2}
    .sp-uni-card:nth-child(4),
    .sp-uni-card:nth-child(5){grid-column:span 3}
  }
  /* Small tablet / large phone: 2 columns; last card spans full width */
  @media(max-width:720px){
    .sp-uni{grid-template-columns:repeat(2,1fr)}
    .sp-uni-card{min-height:240px;padding:24px 18px 26px}
    .sp-uni-card:nth-child(1),
    .sp-uni-card:nth-child(2),
    .sp-uni-card:nth-child(3),
    .sp-uni-card:nth-child(4),
    .sp-uni-card:nth-child(5){grid-column:auto}
    .sp-uni-card:nth-child(5){grid-column:span 2}
    .sp-uni-num{font-size:42px}
  }
  /* Mobile: stacked single column */
  @media(max-width:480px){
    .sp-uni{grid-template-columns:1fr;gap:12px}
    .sp-uni-card,
    .sp-uni-card:nth-child(5){grid-column:auto;min-height:auto;padding:24px 22px}
    .sp-uni-num{font-size:38px}
  }
  

/* ==================== BLOCK SEPARATOR ==================== */


.tp-outer-sec{position:relative;padding:140px 0 60px;background:#050508;overflow:hidden;isolation:isolate}
.tp-outer-sec::before{content:&#39;&#39;;position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(139,92,246,.08),transparent 60%);pointer-events:none;z-index:0}
.tp-outer-glow{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:1200px;height:540px;border-radius:50%;background:radial-gradient(ellipse,rgba(139,92,246,.13),transparent 65%);filter:blur(80px);pointer-events:none;z-index:0}
.tp-outer-head{position:relative;z-index:2;text-align:center;max-width:820px;margin:0 auto 56px;padding:0 24px}
.tp-outer-eye{display:inline-flex;align-items:center;gap:10px;font-family:&#39;JetBrains Mono&#39;,&#39;SF Mono&#39;,ui-monospace,monospace;font-size:11.5px;font-weight:700;color:var(--pp);letter-spacing:1.6px;text-transform:uppercase;padding:8px 18px;border-radius:100px;background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(109,40,217,.1));border:1px solid rgba(196,181,253,.24);box-shadow:0 0 30px rgba(139,92,246,.15),inset 0 1px 0 rgba(255,255,255,.06);margin-bottom:22px;backdrop-filter:blur(8px)}
.tp-outer-eye-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--pl));box-shadow:0 0 10px var(--pl),0 0 18px rgba(167,139,250,.5)}
.tp-outer-h2{font-size:clamp(36px,5vw,64px);font-weight:700;line-height:1.04;letter-spacing:-.035em;color:#fff;margin:0 0 18px}
.tp-outer-h2 em{font-style:normal;color:#fff}
.tp-outer-sub{font-size:var(--fs-lg);color:#8a8797;line-height:1.65;margin:0 auto;max-width:620px}
.tp-iframe{display:block;width:100%;height:400px;border:0;background:transparent;position:relative;z-index:2}
@media(max-width:760px){
  .tp-outer-sec{padding:90px 0 48px}
  .tp-outer-head{margin-bottom:40px}
  .tp-outer-h2{font-size:clamp(30px,7vw,44px)}
  .tp-outer-sub{font-size:var(--fs-md)}
  .tp-iframe{height:380px}
  .tp-foot-pill{padding:9px 16px 9px 14px}
  .tp-foot-time b{font-size:var(--fs-sm)}
}
.tp-foot{position:relative;z-index:2;display:flex;justify-content:center;margin-top:32px;padding:0 24px;font-family:'Inter Variable','Inter',system-ui,sans-serif}
@media(max-width:760px){.tp-foot{margin-top:48px}}

/* Layout D — Contained, middle-sized countdown card */
.tp-foot-card{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;gap:32px;
  padding:30px 48px 32px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(22,19,32,.78),rgba(14,12,22,.62));
  border:1px solid rgba(196,181,253,.16);
  box-shadow:
    0 22px 50px -22px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  isolation:isolate;
  overflow:hidden;
}
.tp-foot-aura{
  position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:130%;height:120%;
  background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(139,92,246,.18),transparent 60%);
  filter:blur(20px);pointer-events:none;z-index:0;
}
.tp-foot-label{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--pp);white-space:nowrap;
  padding:8px 18px;border-radius:100px;
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(109,40,217,.1));
  border:1px solid rgba(196,181,253,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}
.tp-foot-pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--pl);
  box-shadow:0 0 10px var(--pl);
  animation:tpFootPulse 2s ease-in-out infinite;
}
@keyframes tpFootPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.2)}
}
.tp-foot-time{
  position:relative;z-index:1;
  display:inline-flex;align-items:flex-start;gap:20px;
  font-variant-numeric:tabular-nums slashed-zero;
}
.tp-foot-unit{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:56px;
}
.tp-foot-num{
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:var(--fs-stat);font-weight:600;letter-spacing:-.045em;line-height:.92;
  color:#fff;
}
.tp-foot-lbl{
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.tp-foot-sep{
  align-self:flex-start;margin-top:2px;
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  font-size:36px;font-weight:200;color:rgba(167,139,250,.32);
  animation:tpFootBlink 2s steps(2,end) infinite;
}
@keyframes tpFootBlink{0%,100%{opacity:.32}50%{opacity:.6}}

@media(max-width:680px){
  .tp-foot{padding:0 18px}
  .tp-foot-card{padding:22px 26px 24px;gap:14px;border-radius:var(--radius-md)}
  .tp-foot-time{gap:12px}
  .tp-foot-unit{min-width:42px;gap:6px}
  .tp-foot-num{font-size:36px}
  .tp-foot-sep{font-size:26px}
  .tp-foot-label{font-size:10px;letter-spacing:.2em}
}
@media(max-width:480px){
  .tp-foot-card{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:18px 20px}
  .tp-foot-divider{display:none}
}

@media(prefers-reduced-motion:reduce){
  .tp-foot-dot,.tp-foot-sep{animation:none}
}
/* ═══════════════════════════════════════════════════════════════
   PAINT DEFERRAL — keep heavy decorative paint off the critical path
   ═══════════════════════════════════════════════════════════════ */
/* The hero starfield is ~100 radial-gradients composed into one paint.
   Starting at opacity:0 lets the browser skip painting them on first
   load entirely. They fade in once the page is settled (platform-ready). */
/* Stars visible from initial paint — cost is acceptable now that we cut to 49 gradients
   and removed the mask-image. */
@media(prefers-reduced-motion:reduce){.hero-stars{animation:none}}