/* ============================================================
   ShortsCraft — LANDING PAGE (premium redesign)
   Self-contained, lp- prefixed so the legacy styles.css cannot
   interfere. Loads AFTER premium.css. Uses the unified purple/cyan
   "Midnight Studio" palette + Fraunces / Space Grotesk / Inter.
   ============================================================ */

:root{
  --lp-bg:#07070c;
  --lp-ink:#f6f7fb;
  --lp-dim:#a7a9bd;
  --lp-muted:#71738c;
  --lp-line:rgba(255,255,255,.09);
  --lp-line-2:rgba(255,255,255,.16);
  --lp-surface:rgba(255,255,255,.045);
  --lp-surface-2:rgba(255,255,255,.07);
  --lp-iris:#7c6cff;
  --lp-violet:#b18cff;
  --lp-cyan:#5ed0ff;
  --lp-grad:linear-gradient(135deg,#7c6cff 0%,#b18cff 52%,#5ed0ff 120%);
  --lp-grad-text:linear-gradient(120deg,#c9c2ff 0%,#8b7bff 45%,#5ed0ff 100%);
  --lp-r:18px; --lp-r-lg:24px; --lp-r-xl:32px; --lp-pill:999px;
  --lp-maxw:1200px;
  --lp-shadow:0 24px 70px rgba(2,2,10,.6);
  --lp-glow:0 0 60px rgba(124,108,255,.35);
  --lp-fs-display:"Fraunces","Space Grotesk",Georgia,serif;
  --lp-fs-ui:"Space Grotesk","Inter",system-ui,sans-serif;
  --lp-fs-body:"Inter",system-ui,sans-serif;
}

/* ---- Base scoping (only affects .lp-* content) ------------- */
.lp-main{font-family:var(--lp-fs-body);color:var(--lp-ink);position:relative;z-index:1}
.lp-main *{box-sizing:border-box}
.lp-main p{color:var(--lp-dim);line-height:1.65;margin:0}
.lp-main h1,.lp-main h2,.lp-main h3,.lp-main h4{font-family:var(--lp-fs-display);color:var(--lp-ink);margin:0;line-height:1.06;letter-spacing:-.02em;font-weight:600}
.lp-grad{background:var(--lp-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-section{max-width:var(--lp-maxw);margin:0 auto;padding:104px 24px}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--lp-fs-ui);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--lp-violet);padding:7px 14px;border:1px solid var(--lp-line-2);border-radius:var(--lp-pill);background:rgba(139,123,255,.08);backdrop-filter:blur(8px)}
.lp-head{max-width:720px;margin:0 auto 56px;text-align:center}
.lp-head.left{margin-left:0;text-align:left}
.lp-head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:20px 0 14px}
.lp-head p{font-size:clamp(1rem,1.3vw,1.15rem)}

/* ---- Buttons ----------------------------------------------- */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--lp-fs-ui);font-weight:600;font-size:.98rem;padding:0 26px;height:54px;border-radius:var(--lp-pill);cursor:pointer;border:1px solid transparent;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,border-color .2s;text-decoration:none;white-space:nowrap}
.lp-btn.sm{height:44px;padding:0 18px;font-size:.9rem}
.lp-btn-primary{background:var(--lp-grad);color:#fff;box-shadow:0 12px 34px rgba(124,108,255,.42),inset 0 1px 0 rgba(255,255,255,.35)}
.lp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(124,108,255,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.lp-btn-ghost{background:rgba(255,255,255,.05);border-color:var(--lp-line-2);color:var(--lp-ink);backdrop-filter:blur(8px)}
.lp-btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(139,123,255,.5);transform:translateY(-2px)}

/* ============================================================
   HERO
   ============================================================ */
.lp-hero{position:relative;max-width:var(--lp-maxw);margin:0 auto;padding:72px 24px 60px;overflow:visible}
.lp-hero-glow{position:absolute;inset:-10% -10% auto -10%;height:620px;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 380px at 22% 30%,rgba(124,108,255,.28),transparent 62%),
    radial-gradient(520px 360px at 82% 12%,rgba(94,208,255,.20),transparent 60%);
  filter:blur(6px)}
.lp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.lp-hero-copy{max-width:600px}
.lp-hero h1{font-size:clamp(2.7rem,5.2vw,4.4rem);letter-spacing:-.035em;margin:22px 0 20px}
.lp-hero .lp-lead{font-size:clamp(1.05rem,1.35vw,1.2rem);max-width:540px}
.lp-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 22px}
.lp-trust{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:0;color:var(--lp-muted);font-size:.9rem}
.lp-trust li{display:flex;align-items:center;gap:7px}
.lp-trust b{color:var(--lp-cyan);font-weight:700}
.lp-badge-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:var(--lp-pill);border:1px solid var(--lp-line-2);background:rgba(255,255,255,.045);font-family:var(--lp-fs-ui);font-size:.83rem;color:var(--lp-dim);box-shadow:0 0 0 1px rgba(139,123,255,.16),0 8px 30px rgba(124,108,255,.14)}
.lp-badge-pill i{width:7px;height:7px;border-radius:50%;background:var(--lp-cyan);box-shadow:0 0 10px var(--lp-cyan);font-style:normal}
.lp-badge-pill b{color:var(--lp-ink);font-weight:700}

/* ---- Hero product mockup (always visible, CSS-only) -------- */
.lp-mock{position:relative}
.lp-window{position:relative;z-index:2;border-radius:var(--lp-r-xl);border:1px solid var(--lp-line-2);
  background:linear-gradient(160deg,rgba(26,23,48,.94),rgba(12,11,24,.94));
  box-shadow:var(--lp-shadow),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden}
.lp-winbar{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--lp-line)}
.lp-winbar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);font-style:normal}
.lp-winbar i:nth-child(1){background:#ff5f57}
.lp-winbar i:nth-child(2){background:#febc2e}
.lp-winbar i:nth-child(3){background:#28c840}
.lp-winbar span{margin-left:8px;font-family:var(--lp-fs-ui);font-size:.76rem;color:var(--lp-muted)}
.lp-winbody{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;padding:16px}
.lp-editor{background:rgba(0,0,0,.28);border:1px solid var(--lp-line);border-radius:14px;padding:14px;font-family:"Space Grotesk",monospace}
.lp-editor .lp-tag{display:inline-block;font-size:.62rem;letter-spacing:.12em;font-weight:700;color:var(--lp-violet);background:rgba(139,123,255,.14);border:1px solid rgba(139,123,255,.28);border-radius:6px;padding:2px 7px;margin-bottom:8px}
.lp-editor .lp-ln{height:9px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.05));margin:8px 0}
.lp-editor .lp-ln.w90{width:90%}.lp-editor .lp-ln.w70{width:70%}.lp-editor .lp-ln.w80{width:80%}.lp-editor .lp-ln.w50{width:50%}
.lp-editor .lp-meter{height:7px;border-radius:6px;background:rgba(255,255,255,.08);margin-top:14px;overflow:hidden}
.lp-editor .lp-meter b{display:block;height:100%;width:78%;background:var(--lp-grad);border-radius:6px;animation:lpMeter 3.4s ease-in-out infinite alternate}
/* phone preview */
.lp-phone{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--lp-line-2);
  background:radial-gradient(120% 90% at 50% 0%,rgba(124,108,255,.35),transparent 55%),#0a0814;
  aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center}
.lp-phone-cap{font-family:var(--lp-fs-display);font-weight:700;font-size:1.15rem;line-height:1.2;color:#fff}
.lp-phone-cap .hl{background:var(--lp-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-phone-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.lp-phone-dots i{width:14px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);font-style:normal}
.lp-phone-dots i.on{background:var(--lp-cyan);box-shadow:0 0 8px var(--lp-cyan)}
/* floating chips */
.lp-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--lp-pill);
  font-family:var(--lp-fs-ui);font-size:.8rem;font-weight:600;color:var(--lp-ink);
  background:rgba(20,18,38,.86);border:1px solid var(--lp-line-2);backdrop-filter:blur(8px);box-shadow:var(--lp-shadow)}
.lp-chip.c1{top:-16px;right:26px;animation:lpFloat 6s ease-in-out infinite}
.lp-chip.c2{bottom:64px;left:-24px;animation:lpFloat 7s ease-in-out infinite .6s}
.lp-chip.c3{bottom:-14px;right:40px;animation:lpFloat 8s ease-in-out infinite 1.2s}

@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes lpMeter{0%{width:32%}100%{width:88%}}

/* ============================================================
   LOGO / STAT STRIP
   ============================================================ */
.lp-stats{max-width:var(--lp-maxw);margin:0 auto;padding:8px 24px 40px}
.lp-stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lp-line);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);overflow:hidden}
.lp-stat{background:rgba(10,9,18,.6);padding:26px 22px;text-align:center}
.lp-stat b{display:block;font-family:var(--lp-fs-display);font-size:1.9rem;background:var(--lp-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-stat span{color:var(--lp-muted);font-size:.85rem}

/* ============================================================
   FEATURE BENTO
   ============================================================ */
.lp-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
.lp-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:26px;position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.lp-card:hover{transform:translateY(-4px);border-color:rgba(139,123,255,.4);box-shadow:0 26px 60px rgba(2,2,10,.5),var(--lp-glow)}
.lp-card h3{font-size:1.22rem;margin:16px 0 8px}
.lp-card p{font-size:.95rem}
.lp-card.feat{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,rgba(124,108,255,.16),rgba(94,208,255,.05) 60%,rgba(255,255,255,.02))}
.lp-ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;background:var(--lp-grad);box-shadow:0 10px 26px rgba(124,108,255,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.lp-demo{margin-top:20px;background:rgba(0,0,0,.3);border:1px solid var(--lp-line);border-radius:14px;padding:14px;font-family:"Space Grotesk",monospace;font-size:.86rem}
.lp-demo .row{display:flex;gap:10px;padding:6px 0}
.lp-demo .row b{color:var(--lp-violet);min-width:42px;font-size:.66rem;letter-spacing:.1em;padding-top:2px}
.lp-demo .row span{color:var(--lp-dim)}

/* ============================================================
   SHOWCASE — style gallery
   ============================================================ */
.lp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lp-tile{border-radius:var(--lp-r);border:1px solid var(--lp-line);aspect-ratio:9/12;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px;transition:transform .25s,border-color .25s}
.lp-tile:hover{transform:translateY(-4px) scale(1.01);border-color:rgba(139,123,255,.5)}
.lp-tile span{position:relative;z-index:2;font-family:var(--lp-fs-ui);font-weight:600;font-size:.92rem}
.lp-tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.lp-tile.t1{background:linear-gradient(150deg,#7c6cff,#3a2a8f)}
.lp-tile.t2{background:linear-gradient(150deg,#5ed0ff,#1d5f8f)}
.lp-tile.t3{background:linear-gradient(150deg,#b18cff,#5e3aa0)}
.lp-tile.t4{background:linear-gradient(150deg,#ff8bd0,#8f2a6a)}

/* ============================================================
   WORKFLOW
   ============================================================ */
.lp-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.lp-flow::before{content:"";position:absolute;top:34px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--lp-line-2) 12%,var(--lp-line-2) 88%,transparent);z-index:0}
.lp-step{position:relative;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:24px;transition:transform .25s,border-color .25s}
.lp-step:hover{transform:translateY(-4px);border-color:rgba(139,123,255,.4)}
.lp-step .num{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-family:var(--lp-fs-display);font-weight:700;background:rgba(139,123,255,.14);border:1px solid rgba(139,123,255,.3);color:var(--lp-violet);margin-bottom:16px}
.lp-step h3{font-size:1.1rem;margin-bottom:6px}
.lp-step p{font-size:.9rem}

/* ============================================================
   PRICING
   ============================================================ */
.lp-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:840px;margin:0 auto}
.lp-plan{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--lp-line);border-radius:var(--lp-r-xl);padding:34px;position:relative}
.lp-plan.pro{background:linear-gradient(165deg,rgba(124,108,255,.2),rgba(94,208,255,.07) 70%,rgba(255,255,255,.03));border-color:rgba(139,123,255,.5);box-shadow:0 30px 70px rgba(2,2,10,.55),var(--lp-glow)}
.lp-plan .tier{font-family:var(--lp-fs-ui);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--lp-dim)}
.lp-plan .price{font-family:var(--lp-fs-display);font-size:3rem;margin:10px 0 2px;display:flex;align-items:baseline;gap:4px}
.lp-plan .price small{font-size:1rem;color:var(--lp-muted)}
.lp-plan .sub{font-size:.92rem;margin-bottom:20px}
.lp-plan ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px}
.lp-plan li{display:flex;gap:10px;align-items:center;color:var(--lp-dim);font-size:.95rem}
.lp-plan li::before{content:"✓";color:var(--lp-cyan);font-weight:700}
.lp-plan .lp-btn{width:100%}
.lp-pop{position:absolute;top:-13px;right:26px;background:var(--lp-grad);color:#fff;font-family:var(--lp-fs-ui);font-weight:600;font-size:.72rem;letter-spacing:.06em;padding:6px 14px;border-radius:var(--lp-pill);box-shadow:0 8px 22px rgba(124,108,255,.5)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.lp-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-quote{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:26px;transition:transform .25s,border-color .25s}
.lp-quote:hover{transform:translateY(-4px);border-color:rgba(139,123,255,.4)}
.lp-quote .stars{color:#ffd36b;letter-spacing:2px;font-size:.9rem;margin-bottom:12px}
.lp-quote p{color:var(--lp-ink);font-size:.98rem;line-height:1.6}
.lp-who{display:flex;align-items:center;gap:12px;margin-top:18px}
.lp-who .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--lp-fs-ui);font-weight:700;color:#fff;background:var(--lp-grad)}
.lp-who b{display:block;font-size:.92rem}
.lp-who span{color:var(--lp-muted);font-size:.82rem}

/* ============================================================
   FAQ
   ============================================================ */
.lp-faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.lp-faq details{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--lp-line);border-radius:16px;padding:0;overflow:hidden;transition:border-color .25s}
.lp-faq details[open]{border-color:rgba(139,123,255,.4)}
.lp-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--lp-fs-ui);font-weight:600;color:var(--lp-ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-size:1.4rem;color:var(--lp-violet);transition:transform .25s}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq p{padding:0 24px 22px;font-size:.95rem}

/* ============================================================
   FINAL CTA
   ============================================================ */
.lp-final{max-width:var(--lp-maxw);margin:0 auto;padding:40px 24px 110px}
.lp-final-card{position:relative;overflow:hidden;text-align:center;border-radius:var(--lp-r-xl);padding:64px 40px;
  background:linear-gradient(150deg,rgba(124,108,255,.24),rgba(94,208,255,.1) 60%,rgba(255,255,255,.02));
  border:1px solid rgba(139,123,255,.4);box-shadow:var(--lp-shadow),0 0 90px rgba(124,108,255,.25)}
.lp-final-card h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:14px}
.lp-final-card p{max-width:520px;margin:0 auto 28px}
.lp-final-card .lp-cta-row{justify-content:center}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .lp-hero-grid{grid-template-columns:1fr;gap:44px}
  .lp-mock{max-width:520px;margin:0 auto}
  .lp-bento{grid-template-columns:repeat(2,1fr)}
  .lp-card.feat{grid-column:span 2;grid-row:span 1}
  .lp-gallery{grid-template-columns:repeat(2,1fr)}
  .lp-flow{grid-template-columns:repeat(2,1fr)}
  .lp-flow::before{display:none}
  .lp-quotes{grid-template-columns:1fr}
  .lp-stats-inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lp-section{padding:72px 18px}
  .lp-hero{padding:48px 18px 40px}
  .lp-bento{grid-template-columns:1fr}
  .lp-card.feat{grid-column:span 1}
  .lp-gallery{grid-template-columns:repeat(2,1fr)}
  .lp-flow{grid-template-columns:1fr}
  .lp-price{grid-template-columns:1fr}
  .lp-cta-row{flex-direction:column}
  .lp-cta-row .lp-btn{width:100%}
  .lp-winbody{grid-template-columns:1fr}
  .lp-phone{max-width:260px;margin:0 auto}
  .lp-chip{display:none}
  .lp-head h2{font-size:clamp(1.7rem,7vw,2.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .lp-chip,.lp-editor .lp-meter b{animation:none}
}


/* ============================================================
   POLISH — reveal animation, anchor offset, social proof, a11y
   ============================================================ */

/* Scroll-reveal (animations.js adds .reveal then .is-visible). */
.lp-main .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}
.lp-main .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.lp-main .reveal{opacity:1 !important;transform:none !important}}

/* Sticky-nav offset so anchor titles aren't hidden under the navbar. */
#features,#how,#pricing,#faq{scroll-margin-top:88px}

/* Hero social-proof rating row. */
.lp-rating{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.lp-rating .stars{color:#ffd36b;letter-spacing:2px;font-size:1rem}
.lp-rating .who{color:var(--lp-dim);font-size:.9rem}
.lp-rating .who b{color:var(--lp-ink);font-weight:700}
.lp-avatars{display:flex}
.lp-avatars i{width:30px;height:30px;border-radius:50%;border:2px solid #0b0912;margin-left:-10px;background:var(--lp-grad);display:inline-block;font-style:normal}
.lp-avatars i:first-child{margin-left:0}
.lp-avatars i:nth-child(2){background:linear-gradient(135deg,#5ed0ff,#1d5f8f)}
.lp-avatars i:nth-child(3){background:linear-gradient(135deg,#ff8bd0,#8f2a6a)}
.lp-avatars i:nth-child(4){background:linear-gradient(135deg,#b18cff,#5e3aa0)}

/* Editor generate button in hero mockup. */
.lp-editor .lp-gen{margin-top:14px;width:100%;height:36px;border:none;border-radius:10px;background:var(--lp-grad);color:#fff;font-family:var(--lp-fs-ui);font-weight:600;font-size:.82rem;box-shadow:0 8px 20px rgba(124,108,255,.4)}

/* Accessible focus rings. */
.lp-main a:focus-visible,.lp-main button:focus-visible,.lp-btn:focus-visible{outline:2px solid var(--lp-cyan);outline-offset:3px;border-radius:var(--lp-pill)}

/* Section eyebrow centering inside centered heads. */
.lp-head{display:flex;flex-direction:column;align-items:center}
.lp-head.left{align-items:flex-start}



/* ============================================================
   LANDING PRODUCT PROOF — realistic Studio preview + style cards
   ============================================================ */

/* Give the product demonstration enough room to read like software. */
@media (min-width:1081px){
  .lp-hero-grid{grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr);gap:44px}
}

.lp-product-window{position:relative;z-index:2;overflow:hidden;border:1px solid rgba(177,140,255,.28);border-radius:26px;background:#0d0e15;box-shadow:0 36px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04) inset,0 0 80px rgba(92,75,220,.16)}
.lp-product-topbar{height:52px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.lp-product-brand{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--lp-fs-ui);font-size:.74rem;color:#8f92a6;white-space:nowrap}
.lp-product-brand img{width:22px;height:22px;border-radius:6px;box-shadow:0 6px 16px rgba(124,108,255,.35)}
.lp-product-brand b{color:#f5f4fb;font-weight:700}
.lp-product-project{display:flex;align-items:center;gap:6px;font-family:var(--lp-fs-ui);font-size:.66rem;font-weight:600;color:#d7d8e2;white-space:nowrap}
.lp-product-project i{width:6px;height:6px;border-radius:50%;background:#45e0a8;box-shadow:0 0 10px rgba(69,224,168,.7)}
.lp-product-project span{color:#73778d;font-size:.59rem;font-weight:500}
.lp-product-action{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:9px;background:var(--lp-grad);box-shadow:0 8px 22px rgba(124,108,255,.34);font-family:var(--lp-fs-ui);font-size:.65rem;font-weight:700;color:#fff;white-space:nowrap}
.lp-product-action b{font-size:.7rem}

.lp-product-workspace{display:grid;grid-template-columns:42% 58%;min-height:330px}
.lp-script-pane{min-width:0;padding:15px;border-right:1px solid rgba(255,255,255,.075);background:#101118}
.lp-script-pane header{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:17px;font-family:var(--lp-fs-ui)}
.lp-script-pane header span{grid-column:1/-1;margin-bottom:3px;color:#666b80;font-size:.51rem;font-weight:700;letter-spacing:.16em}
.lp-script-pane header b{color:#f4f4f8;font-size:.9rem}
.lp-script-pane header em{padding:3px 7px;border:1px solid rgba(139,123,255,.22);border-radius:6px;background:rgba(124,108,255,.09);color:#9e94df;font-size:.55rem;font-style:normal}
.lp-script-label{margin-bottom:7px;color:#686d81;font-family:var(--lp-fs-ui);font-size:.49rem;font-weight:700;letter-spacing:.13em}
.lp-script-scene{display:grid;grid-template-columns:22px 1fr;gap:7px;align-items:start;margin-top:6px;padding:9px 8px;border:1px solid transparent;border-radius:9px;background:rgba(255,255,255,.025)}
.lp-script-scene.active{border-color:rgba(124,108,255,.3);background:linear-gradient(110deg,rgba(124,108,255,.15),rgba(94,208,255,.035))}
.lp-script-scene>span{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(124,108,255,.14);color:#aca2f2;font-family:var(--lp-fs-ui);font-size:.49rem;font-weight:700}
.lp-script-scene p{color:#9699aa;font-family:var(--lp-fs-ui);font-size:.61rem;line-height:1.4}
.lp-script-scene p b{color:#f2f2f6;font-weight:700}
.lp-style-control{display:grid;grid-template-columns:1fr auto;gap:4px 7px;margin-top:14px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0b0c12;font-family:var(--lp-fs-ui)}
.lp-style-control>span{grid-column:1/-1;color:#62667a;font-size:.48rem;font-weight:700;letter-spacing:.13em}
.lp-style-control b{display:flex;align-items:center;gap:6px;color:#eeeef5;font-size:.62rem}
.lp-style-control b i{width:7px;height:7px;border-radius:50%;background:#ff724a;box-shadow:0 0 9px rgba(255,114,74,.5)}
.lp-style-control em{color:#85899c;font-size:.55rem;font-style:normal}

.lp-canvas-pane{min-width:0;background:#08090e}
.lp-canvas-pane>header{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.065);font-family:var(--lp-fs-ui);font-size:.58rem;color:#9a9dad}
.lp-canvas-pane>header b{display:flex;align-items:center;gap:5px;color:#77ddb8;font-size:.51rem;font-weight:600}
.lp-canvas-pane>header b i{width:5px;height:5px;border-radius:50%;background:#45e0a8;box-shadow:0 0 8px #45e0a8}
.lp-canvas-stage{min-height:292px;display:grid;place-items:center;padding:12px;background:radial-gradient(circle at 50% 48%,rgba(124,108,255,.12),transparent 45%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,24px 24px,24px 24px}
.lp-video-frame{position:relative;isolation:isolate;width:150px;aspect-ratio:9/16;overflow:hidden;border:1px solid rgba(255,255,255,.17);border-radius:16px;background:linear-gradient(160deg,#17122d 0%,#0b0c18 55%,#101b27 100%);box-shadow:0 22px 45px rgba(0,0,0,.55),0 0 35px rgba(124,108,255,.15)}
.lp-video-grid{position:absolute;inset:0;z-index:-1;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:19px 19px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.lp-video-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px)}
.lp-video-orb.one{width:112px;height:112px;top:-32px;right:-44px;background:rgba(124,108,255,.34);box-shadow:0 0 45px rgba(124,108,255,.4)}
.lp-video-orb.two{width:90px;height:90px;bottom:22px;left:-48px;background:rgba(94,208,255,.21);box-shadow:0 0 40px rgba(94,208,255,.24)}
.lp-video-meta{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;font-family:var(--lp-fs-ui);font-size:.43rem;font-weight:700;letter-spacing:.11em;color:rgba(255,255,255,.6)}
.lp-video-copy{position:absolute;left:13px;right:13px;top:76px;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--lp-fs-ui);text-align:left}
.lp-video-copy small{margin-bottom:5px;color:#82dcff;font-size:.45rem;font-weight:700;letter-spacing:.12em}
.lp-video-copy strong{color:#fff;font-size:1.15rem;line-height:.88;letter-spacing:-.055em;text-shadow:0 5px 20px rgba(124,108,255,.4)}
.lp-video-copy b{margin-top:6px;padding:4px 6px;border-radius:5px;background:#f1eaff;color:#171123;font-size:.57rem;line-height:1}
.lp-video-caption{position:absolute;left:12px;right:12px;bottom:30px;display:flex;align-items:center;gap:5px;padding:6px 7px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(8,8,14,.68);backdrop-filter:blur(5px);color:#dedee8;font-family:var(--lp-fs-ui);font-size:.46rem}
.lp-video-caption i{width:5px;height:5px;border-radius:50%;background:#5ed0ff;box-shadow:0 0 7px #5ed0ff}
.lp-video-progress{position:absolute;left:12px;right:12px;bottom:15px;height:3px;overflow:hidden;border-radius:4px;background:rgba(255,255,255,.14)}
.lp-video-progress i{display:block;width:62%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8b7bff,#5ed0ff);box-shadow:0 0 8px rgba(94,208,255,.6);animation:lpPreviewProgress 3.8s ease-in-out infinite alternate}

.lp-product-timeline{min-height:76px;display:grid;grid-template-columns:28px 56px 1fr auto;align-items:center;gap:9px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.075);background:#11121a}
.lp-play{display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(139,123,255,.3);border-radius:50%;background:rgba(124,108,255,.13);color:#b9b2ff;font-size:.55rem}
.lp-time{display:flex;flex-direction:column;font-family:var(--lp-fs-ui);font-size:.51rem;color:#686c7e}
.lp-time b{color:#f0f0f5;font-size:.57rem}
.lp-scenes{display:flex;gap:6px;min-width:0}
.lp-scene-thumb{position:relative;min-width:62px;height:43px;overflow:hidden;padding:7px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:linear-gradient(145deg,#17132a,#0b1019);color:#aaaebe;font-family:var(--lp-fs-ui);font-size:.43rem;line-height:1.2}
.lp-scene-thumb.active{border-color:#8677ff;box-shadow:0 0 0 1px rgba(134,119,255,.35) inset}
.lp-scene-thumb i{position:absolute;top:4px;right:5px;color:#746aa9;font-size:.4rem;font-style:normal}
.lp-scene-thumb span{position:absolute;left:7px;bottom:6px;font-weight:700;letter-spacing:.04em}
.lp-export{padding:8px 9px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.045);color:#d8d9e2;font-family:var(--lp-fs-ui);font-size:.52rem;font-weight:600;white-space:nowrap}
.lp-export span{color:#8e83ff}

.lp-chip i{font-style:normal;color:#76d9ff}
.lp-chip.c1{top:-18px;right:24px}
.lp-chip.c2{bottom:62px;left:-22px}
.lp-chip.c3{bottom:-14px;right:32px}

/* Honest, product-led proof in place of generic avatar/star claims. */
.lp-product-proof{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:25px;color:var(--lp-dim);font-size:.86rem}
.lp-product-proof>i{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(139,123,255,.32);border-radius:9px;background:rgba(124,108,255,.12);color:#a99fff;font-style:normal}
.lp-product-proof b{color:#f4f4f8;font-weight:650}
.lp-product-proof .sep{width:1px;height:18px;background:rgba(255,255,255,.12)}
.lp-product-proof small{color:#7f8398;font-size:.8rem}

/* Fully art-directed style previews. */
.lp-gallery{gap:18px;align-items:stretch}
.lp-tile{display:block;aspect-ratio:auto;min-width:0;padding:8px;border-color:rgba(255,255,255,.105);border-radius:22px;background:linear-gradient(180deg,#15161f,#0d0e14);box-shadow:0 22px 55px rgba(0,0,0,.34);isolation:isolate}
.lp-tile::before{content:none}
.lp-tile:hover{transform:translateY(-6px);border-color:rgba(139,123,255,.48);box-shadow:0 30px 65px rgba(0,0,0,.48),0 0 40px rgba(124,108,255,.12)}
.lp-style-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:9/12;border:1px solid rgba(255,255,255,.09);border-radius:16px}
.lp-tile footer{min-height:70px;display:flex;flex-direction:column;justify-content:center;padding:12px 7px 8px;font-family:var(--lp-fs-ui)}
.lp-tile footer>div{display:flex;align-items:center;gap:8px}
.lp-tile footer span{display:grid;place-items:center;width:23px;height:23px;border:1px solid rgba(139,123,255,.25);border-radius:7px;background:rgba(124,108,255,.09);color:#9e94df;font-size:.55rem;font-weight:700}
.lp-tile footer strong{color:#f2f2f7;font-size:.88rem}
.lp-tile footer small{margin-top:6px;color:#777b8f;font-size:.67rem}
.lp-style-meta{position:absolute;z-index:4;top:13px;left:13px;right:13px;display:flex;justify-content:space-between;font-family:var(--lp-fs-ui);font-size:.48rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.66)}
.lp-style-meta span,.lp-style-meta b{position:static;width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit;font:inherit}
.lp-style-copy{position:absolute;z-index:3;left:17px;right:17px;top:35%;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--lp-fs-ui)}
.lp-style-copy small,.lp-style-copy strong,.lp-style-copy em{position:static;width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit}
.lp-style-copy small{font-weight:800;letter-spacing:.13em}
.lp-style-copy strong{font-weight:900;letter-spacing:-.065em;line-height:.86}
.lp-style-copy em{margin-top:10px;font-size:.65rem;font-style:normal}
.lp-style-progress{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;height:4px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.18)}
.lp-style-progress i{display:block;width:58%;height:100%;border-radius:inherit;background:#fff;animation:lpStyleProgress 3.2s ease-in-out infinite alternate}

.lp-tile.t1 .lp-style-stage{background:radial-gradient(circle at 78% 25%,rgba(255,210,97,.4),transparent 18%),linear-gradient(155deg,#fa4f3f 0%,#e12f48 48%,#4f1234 100%)}
.lp-tile.t1 .lp-style-stage::before{content:"";position:absolute;inset:-15%;z-index:-1;background:repeating-linear-gradient(-14deg,transparent 0 22px,rgba(255,255,255,.08) 23px 24px)}
.hook-copy small{padding:4px 6px!important;background:#151218!important;color:#fff1c2!important;font-size:.57rem!important}
.hook-copy strong{margin-top:8px;color:#fff5dc!important;font-size:3.25rem!important;text-shadow:5px 5px 0 rgba(69,14,34,.4)}
.hook-copy em{color:#ffe3d5!important}
.accent-ring{position:absolute;right:-32px;bottom:42px;width:104px;height:104px;border:16px solid rgba(255,225,122,.38);border-radius:50%;animation:lpRingPulse 3.4s ease-in-out infinite}
.lp-tile.t1 .lp-style-progress i{background:#ffe36e}

.lp-tile.t2 .lp-style-stage{background:radial-gradient(circle at 50% 45%,rgba(36,230,255,.18),transparent 31%),linear-gradient(150deg,#071927,#082e42 52%,#0a132a)}
.lp-tile.t2 .lp-style-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(69,224,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(69,224,255,.07) 1px,transparent 1px);background-size:22px 22px;transform:perspective(220px) rotateX(24deg) scale(1.25)}
.neon-copy small{color:#7cecff!important;font-size:.78rem!important;text-shadow:0 0 13px rgba(94,224,255,.8)}
.neon-copy strong{color:#f5feff!important;font-size:2.45rem!important;text-shadow:0 0 6px #5ed0ff,0 0 22px rgba(94,208,255,.65)}
.neon-copy em{color:#a8eefd!important}
.neon-orbit{position:absolute;right:-26px;top:63px;width:116px;height:116px;border:1px solid rgba(94,208,255,.42);border-radius:50%;box-shadow:0 0 30px rgba(94,208,255,.2),inset 0 0 22px rgba(94,208,255,.12);animation:lpOrbit 8s linear infinite}
.neon-orbit::after{content:"";position:absolute;top:8px;left:15px;width:8px;height:8px;border-radius:50%;background:#8bf0ff;box-shadow:0 0 13px #5ed0ff}
.lp-tile.t2 .lp-style-progress i{background:#5ed0ff;box-shadow:0 0 9px #5ed0ff}

.lp-tile.t3 .lp-style-stage{background:linear-gradient(145deg,#f0e5cf 0%,#d8c6a6 58%,#b69769 100%)}
.lp-tile.t3 .lp-style-stage::before{content:"A";position:absolute;right:-11px;top:23px;color:rgba(53,38,24,.07);font:700 13rem/.8 var(--lp-fs-display)}
.lp-tile.t3 .lp-style-meta{color:rgba(48,35,25,.62)}
.luxury-copy{top:29%}
.luxury-copy small{color:#634d35!important;font:600 .74rem var(--lp-fs-display)!important;letter-spacing:.18em!important}
.luxury-copy strong{max-width:210px;margin-top:8px;color:#251b16!important;font:700 2.25rem/.85 var(--lp-fs-display)!important;letter-spacing:-.05em!important}
.luxury-copy em{color:#624d39!important;font-family:var(--lp-fs-display)!important}
.lp-luxury-line{position:absolute;left:17px;right:17px;bottom:17px;display:flex;align-items:center;gap:8px;color:rgba(48,35,25,.62);font-family:var(--lp-fs-ui);font-size:.45rem;letter-spacing:.12em}
.lp-luxury-line i{height:1px;flex:1;background:rgba(48,35,25,.5)}
.lp-luxury-line span{position:static;width:auto;height:auto;border:0;background:none;color:inherit;font:inherit}

.lp-tile.t4 .lp-style-stage{background:radial-gradient(circle at 20% 20%,rgba(255,208,245,.3),transparent 22%),linear-gradient(150deg,#7c38e6,#ca3ab0 53%,#ef547c)}
.lp-tile.t4 .lp-style-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1.5px);background-size:16px 16px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.punch-copy small{padding:5px 8px!important;border-radius:20px!important;background:#ffe966!important;color:#2e1638!important;font-size:.69rem!important;transform:rotate(-3deg)}
.punch-copy strong{margin-top:9px;color:#fff!important;font-size:2.55rem!important;text-shadow:4px 4px 0 rgba(72,22,95,.34)}
.punch-copy em{color:#ffe3fa!important}
.lp-punch-sticker{position:absolute;right:12px;bottom:39px;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(40,15,54,.25);color:#fff;font-family:var(--lp-fs-ui);font-size:.48rem;font-weight:800;line-height:1.15;text-align:center;transform:rotate(9deg);box-shadow:0 8px 20px rgba(52,14,62,.25)}
.lp-tile.t4 .lp-style-progress i{background:#ffe966}

@keyframes lpPreviewProgress{from{width:34%}to{width:82%}}
@keyframes lpStyleProgress{from{width:28%}to{width:88%}}
@keyframes lpRingPulse{50%{transform:scale(1.09);opacity:.65}}
@keyframes lpOrbit{to{transform:rotate(360deg)}}

@media (max-width:1080px){
  .lp-hero-grid{grid-template-columns:1fr;gap:52px}
  .lp-hero-copy{max-width:720px;margin:0 auto;text-align:center}
  .lp-hero .lp-lead{margin-inline:auto}
  .lp-hero-copy .lp-cta-row,.lp-hero-copy .lp-trust,.lp-product-proof{justify-content:center}
  .lp-mock{width:min(100%,620px);max-width:620px}
}
@media (max-width:760px){
  .lp-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .lp-tile{padding:7px;border-radius:19px}
  .lp-tile footer{min-height:66px}
}
@media (max-width:640px){
  .lp-hero-grid{gap:42px}
  .lp-product-topbar{grid-template-columns:1fr auto;height:48px;padding-inline:11px}
  .lp-product-project{display:none}
  .lp-product-action{padding:7px 9px}
  .lp-product-workspace{grid-template-columns:1fr;min-height:340px}
  .lp-script-pane{display:none}
  .lp-canvas-stage{min-height:302px;padding:15px}
  .lp-video-frame{width:158px}
  .lp-product-timeline{grid-template-columns:29px 1fr;padding:9px 10px}
  .lp-time,.lp-export{display:none}
  .lp-scenes{justify-content:stretch}
  .lp-scene-thumb{flex:1;min-width:0}
  .lp-product-proof{margin-top:22px;gap:8px;text-align:left}
  .lp-product-proof .sep{display:none}
  .lp-product-proof small{width:100%;padding-left:39px}
  .lp-gallery{gap:12px}
  .lp-style-copy{left:13px;right:13px}
  .hook-copy strong{font-size:2.65rem!important}
  .neon-copy strong{font-size:1.92rem!important}
  .luxury-copy strong{font-size:1.75rem!important}
  .punch-copy strong{font-size:2rem!important}
}
@media (max-width:430px){
  .lp-gallery{grid-template-columns:1fr}
  .lp-tile{max-width:330px;width:100%;margin-inline:auto}
  .lp-style-stage{aspect-ratio:9/11}
  .lp-style-copy{left:20px;right:20px}
  .hook-copy strong{font-size:3.7rem!important}
  .neon-copy strong{font-size:2.85rem!important}
  .luxury-copy strong{font-size:2.45rem!important}
  .punch-copy strong{font-size:3rem!important}
}
@media (prefers-reduced-motion:reduce){
  .lp-video-progress i,.lp-style-progress i,.accent-ring,.neon-orbit{animation:none!important}
}