/* ==========================================================================
   LARIANS Seller Store — product-launch page.
   Signature: centered CLOSED laptop in hero that OPENS on scroll (pinned,
   GSAP ScrollTrigger) revealing the seller's own storefront inside.
   Art direction: studio light, deep-plum cinematic contrast, General Sans
   display, violet as dosed accent, high-craft surfaces + motion.
   Scoped .sl-*  ·  mobile-first  ·  reduced-motion inside  ·  no h-scroll.
   ========================================================================== */

.sl {
  --bg: #f4f1fb;
  --bg2: #eae4f6;
  --paper: #ffffff;
  --ink: #16101f;
  --ink2: #5b556a;
  --ink3: #938da3;
  --line: #e8e1f5;
  --line2: #f1ecfa;
  --violet: #6d28d9;
  --violet2: #8b5cf6;
  --violet3: #a855f7;
  --dark: #0d0918;
  --dark2: #150e26;
  --dark3: #1e1436;
  --dline: rgba(168,133,247,.18);
  --dink: #f3eefe;
  --dink2: rgba(243,238,254,.64);
  --ok: #34d399;
  --c-ozon: #3b7bff;
  --c-wb: #a03bf0;
  --c-ya: #ff5a2c;
  --c-avito: #16c172;
  --shell: 1200px;
  --pad: clamp(20px, 5vw, 46px);
  --e: cubic-bezier(.16,1,.3,1);
  --eio: cubic-bezier(.4,0,.2,1);
  color: var(--ink);
  background: var(--bg);
  font-family: "Manrope", system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
.sl *{ min-width: 0; }

.sl-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); position: relative; }
.sl-grain::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }

/* ── type ─────────────────────────────────────────────────────────────── */
.sl-eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px;
  background:rgba(109,40,217,.08); border:1px solid rgba(109,40,217,.16); color:var(--violet);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sl-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 4px rgba(109,40,217,.14); }
.sl-h2{ margin:20px 0 0; font-family:"General Sans","Unbounded",sans-serif; font-weight:600;
  font-size:clamp(28px,4.6vw,52px); line-height:1.04; letter-spacing:-.03em; text-wrap:balance; }
.sl-h2 b{ color:var(--violet); font-weight:600; }
.sl-lead{ margin:18px 0 0; max-width:58ch; color:var(--ink2); font-size:clamp(15.5px,1.8vw,18.5px); line-height:1.6; }
.sl-head{ max-width:840px; }
.sl-head--c{ margin-inline:auto; text-align:center; }
.sl-head--c .sl-lead{ margin-inline:auto; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.sl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:54px; padding:0 26px;
  border-radius:999px; font-family:inherit; font-size:15.5px; font-weight:800; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .22s var(--eio), box-shadow .22s var(--eio), background .22s var(--eio), border-color .22s var(--eio); -webkit-tap-highlight-color:transparent; }
.sl-btn svg{ transition:transform .22s var(--eio); }
.sl-btn--primary{ color:#fff; background:linear-gradient(180deg,#8b5cf6,var(--violet)); box-shadow:0 12px 28px -10px rgba(109,40,217,.7), inset 0 1px 0 rgba(255,255,255,.22); }
.sl-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(109,40,217,.8); }
.sl-btn--primary:hover svg{ transform:translateX(4px); }
.sl-btn--ghost{ color:var(--ink); background:rgba(255,255,255,.7); border-color:var(--line); }
.sl-btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(109,40,217,.4); background:#fff; }
.sl-sec--dark .sl-btn--ghost{ color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }
.sl-btn:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }
.sl-demo{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--ink3); }
.sl-demo::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; }

/* ── sections & rhythm ────────────────────────────────────────────────── */
.sl-sec{ position:relative; padding-block:clamp(64px,9vw,132px); overflow:hidden; }
.sl-sec--light{ background:var(--bg); }
.sl-sec--paper{ background:#fff; }
.sl-sec--soft{ background:linear-gradient(180deg,#fff, var(--bg)); }
.sl-sec--dark{ background:radial-gradient(120% 90% at 82% -8%, rgba(124,58,237,.26), transparent 52%), linear-gradient(168deg,var(--dark2),var(--dark) 88%); color:var(--dink); }
.sl-sec--dark .sl-h2{ color:#fff; }
.sl-sec--dark .sl-h2 b{ color:var(--violet3); }
.sl-sec--dark .sl-lead{ color:var(--dink2); }
.sl-sec--dark .sl-eyebrow{ background:rgba(168,133,247,.12); border-color:var(--dline); color:#d7c6ff; }
.sl-sec--dark .sl-eyebrow::before{ background:var(--violet3); box-shadow:0 0 0 4px rgba(168,85,247,.26); }

/* ══════════════════════════════════════════════════════════════════════════
   01 · HERO — pinned laptop stage
   ══════════════════════════════════════════════════════════════════════════ */
.sl-hero{ position:relative; }
.sl-hero__pin{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:clamp(80px,9vw,104px); overflow:hidden;
  background:radial-gradient(60% 42% at 50% 8%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
             radial-gradient(50% 46% at 50% 82%, rgba(139,92,246,.28), rgba(139,92,246,0) 72%),
             linear-gradient(180deg,#f8f6fe 0%, #ece6f8 70%, #e6def5 100%); }
.sl-hero__grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(109,40,217,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(109,40,217,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(94% 70% at 50% 40%,#000 0%,transparent 74%); mask-image:radial-gradient(94% 70% at 50% 40%,#000 0%,transparent 74%); }
.sl-hero__copy{ position:relative; z-index:6; text-align:center; max-width:820px; margin-inline:auto; }
.sl-hero__h1{ margin:16px auto 0; max-width:19ch; font-family:"General Sans","Unbounded",sans-serif; font-weight:600;
  font-size:clamp(26px,3.9vw,46px); line-height:1.04; letter-spacing:-.035em; text-wrap:balance; }
.sl-hero__h1 b{ color:var(--violet); font-weight:600; }
.sl-hero__sub{ margin:14px auto 0; max-width:52ch; color:var(--ink2); font-size:clamp(14.5px,1.7vw,17px); line-height:1.5; }
.sl-hero__sub em{ font-style:normal; color:var(--ink); font-weight:700; }
.sl-hero__cta{ margin:20px auto 0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* stage that holds the laptop + floating labels */
.sl-stage{ position:relative; z-index:4; width:100%; max-width:760px; margin:clamp(10px,1.6vw,22px) auto 0; aspect-ratio:16/9; perspective:2200px; }
.sl-stage__scene{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(16deg); will-change:transform; }

/* laptop — clean clamshell: deck + lid share the hinge at the mid line */
.sl-lap{ position:absolute; left:50%; top:44%; width:min(540px,76%); aspect-ratio:16/10; transform:translate(-50%,-50%); transform-style:preserve-3d; }
.sl-lap__deck{ position:absolute; left:0; right:0; top:50%; height:100%; transform-origin:top center; transform:rotateX(89deg);
  border-radius:0 0 20px 20px; background:linear-gradient(180deg,#eae6f2 0%,#cfc8dd 62%,#bbb3d1 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.85) inset, 0 26px 40px -18px rgba(60,30,110,.45); }
.sl-lap__deck::before{ /* keyboard */ content:""; position:absolute; inset:11% 8% 32%; border-radius:6px;
  background:linear-gradient(180deg,#d5cee1,#c6bed7); box-shadow:inset 0 2px 8px rgba(60,30,110,.28); }
.sl-lap__deck::after{ /* trackpad */ content:""; position:absolute; left:50%; bottom:9%; width:30%; height:15%; transform:translateX(-50%);
  border-radius:8px; background:linear-gradient(180deg,#cec7db,#bdb5d1); box-shadow:inset 0 1px 5px rgba(60,30,110,.26); }
.sl-lap__lid{ position:absolute; left:0; right:0; bottom:50%; height:100%; transform-origin:bottom center; transform-style:preserve-3d;
  transform:rotateX(-90deg); will-change:transform; }
.sl-lap__face{ position:absolute; inset:0; border-radius:16px 16px 8px 8px; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.sl-lap__face--out{ transform:rotateY(180deg); background:linear-gradient(160deg,#dcd6e8,#c3bcd6); border:1px solid #cfc8de;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.08); }
.sl-lap__face--out span{ position:absolute; left:50%; top:50%; width:52px; height:52px; transform:translate(-50%,-50%); border-radius:14px; background:radial-gradient(circle at 40% 35%, #fff, #cfc7dd); opacity:.55; }
.sl-lap__face--in{ background:#0b0713; border:1px solid #2a2440; box-shadow:inset 0 0 0 6px #0b0713, inset 0 0 26px rgba(0,0,0,.7); }
.sl-lap__glow{ position:absolute; inset:0; border-radius:12px; opacity:0; background:radial-gradient(60% 60% at 50% 30%, rgba(139,92,246,.6), transparent 70%); }
/* storefront inside lid */
.sl-screen{ position:absolute; inset:6px; border-radius:9px; overflow:hidden; background:#fff; opacity:0; }
.sl-screen__bar{ display:flex; align-items:center; gap:6px; padding:8px 10px; background:linear-gradient(180deg,#faf8ff,#f2edfb); border-bottom:1px solid #efe7fb; }
.sl-screen__bar i{ width:7px; height:7px; border-radius:50%; background:#dcd3ef; }
.sl-screen__url{ margin-left:8px; font-size:9.5px; font-weight:700; color:var(--ink2); }
.sl-screen__top{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid #f2ecfb; }
.sl-screen__logo{ font-family:"General Sans",sans-serif; font-weight:600; font-size:11px; letter-spacing:-.02em; }
.sl-screen__logo b{ color:var(--violet); }
.sl-screen__menu{ display:flex; gap:9px; font-size:9px; font-weight:700; color:var(--ink2); }
.sl-screen__cart{ margin-left:auto; width:20px; height:20px; border-radius:6px; background:var(--violet); }
.sl-screen__body{ padding:11px 12px; }
.sl-screen__banner{ height:52px; border-radius:8px; background:radial-gradient(120% 150% at 85% 0%,rgba(255,255,255,.3),transparent 55%),linear-gradient(120deg,#7c3aed,#a855f7); display:flex; align-items:center; padding:0 14px; color:#fff; font-family:"General Sans",sans-serif; font-weight:600; font-size:12px; }
.sl-screen__grid{ margin-top:9px; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.sl-screen__pc{ border:1px solid #f0e9fb; border-radius:7px; overflow:hidden; }
.sl-screen__pc i{ display:block; aspect-ratio:1.3; background:linear-gradient(150deg,#f2ecfb,#e5d9f6); }
.sl-screen__pc i::after{ content:""; display:block; width:46%; height:46%; margin:26% auto; border-radius:5px; background:linear-gradient(150deg,var(--violet3),var(--violet)); opacity:.55; }
.sl-screen__pc b{ display:flex; justify-content:space-between; padding:5px 6px; font-size:8px; }
.sl-screen__pc b span{ color:var(--violet); font-weight:800; }

.sl-lap__shadow{ position:absolute; left:50%; bottom:2%; width:64%; height:5%; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(50,20,90,.42), transparent 78%); filter:blur(9px); }

/* floating labels */
.sl-label{ position:absolute; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:11px;
  background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:0 16px 30px -16px rgba(60,30,110,.5);
  font-size:12.5px; font-weight:800; color:var(--ink); white-space:nowrap; will-change:transform,opacity; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.sl-label i{ width:8px; height:8px; border-radius:3px; }
.sl-label--mp i{ background:var(--c-wb); }
.sl-label--ozon i{ background:var(--c-ozon); }
.sl-label--ya i{ background:var(--c-ya); }
.sl-label--avito i{ background:var(--c-avito); }
.sl-label--pain{ color:#8a2f10; background:rgba(255,246,242,.94); border-color:rgba(255,122,69,.34); }
.sl-label--pain i{ background:#ff7a45; border-radius:50%; }
.sl-label--own{ color:#fff; background:linear-gradient(160deg,#8b5cf6,var(--violet)); border-color:rgba(255,255,255,.3); box-shadow:0 18px 34px -12px rgba(109,40,217,.7); opacity:0; }
.sl-label--own i{ background:#fff; border-radius:50%; }
/* positions (desktop) */
.sl-label--l1{ left:1%; top:14%; }     /* Ozon */
.sl-label--l2{ left:-2%; top:44%; }    /* Wildberries */
.sl-label--l3{ right:0%; top:12%; }    /* Яндекс Маркет */
.sl-label--l4{ right:-1%; top:42%; }   /* Avito */
.sl-label--p1{ left:8%; top:74%; }     /* комиссия */
.sl-label--p2{ right:7%; top:72%; }    /* логистика */
.sl-label--p3{ left:24%; top:-2%; }    /* реклама */
.sl-label--p4{ right:24%; top:-3%; }   /* хранение */
.sl-label--own{ left:50%; top:98%; transform:translateX(-50%); }

.sl-hero__scrollcue{ position:absolute; left:50%; bottom:22px; z-index:6; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--ink2); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sl-hero__scrollcue svg{ animation:slBob 1.8s var(--eio) infinite; }
@keyframes slBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* ══════════════════════════════════════════════════════════════════════════
   02 · PAIN
   ══════════════════════════════════════════════════════════════════════════ */
.sl-pain__grid{ margin-top:clamp(30px,4vw,50px); display:grid; grid-template-columns:1fr; gap:12px; }
.sl-pain__cell{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); font-weight:700; font-size:15px; }
.sl-pain__cell i{ width:9px; height:9px; border-radius:50%; background:#ff7a45; box-shadow:0 0 10px rgba(255,122,69,.7); flex:0 0 auto; }
.sl-pain__note{ margin-top:clamp(26px,3vw,40px); max-width:620px; font-family:"General Sans",sans-serif; font-weight:400; font-size:clamp(17px,2.4vw,26px); line-height:1.34; letter-spacing:-.02em; color:var(--dink); }
.sl-pain__note b{ color:#fff; font-weight:600; }

/* ══════════════════════════════════════════════════════════════════════════
   03 · SOLUTION
   ══════════════════════════════════════════════════════════════════════════ */
.sl-solve{ margin-top:clamp(32px,4vw,52px); display:grid; gap:16px; grid-template-columns:1fr; align-items:center; }
.sl-solve__mp{ display:grid; gap:10px; }
.sl-chanrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(60,30,110,.05); }
.sl-chanrow b{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15.5px; }
.sl-chanrow b i{ width:10px; height:10px; border-radius:3px; }
.sl-chanrow span{ display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-size:13px; font-weight:800; }
.sl-chanrow--own{ color:#fff; background:linear-gradient(120deg,#7c3aed,#8b5cf6); border-color:transparent; box-shadow:0 20px 40px -18px rgba(109,40,217,.6); }
.sl-chanrow--own span{ color:#fff; opacity:.9; }
.sl-chanrow--own b i{ background:#fff; border-radius:50%; }
.sl-solve__arrow{ display:grid; place-items:center; color:var(--violet); }

/* ══════════════════════════════════════════════════════════════════════════
   04 · HOW (assets you already have + steps)
   ══════════════════════════════════════════════════════════════════════════ */
.sl-how{ margin-top:clamp(32px,4vw,52px); display:grid; gap:clamp(20px,3vw,34px); grid-template-columns:1fr; }
.sl-assets{ display:flex; flex-wrap:wrap; gap:9px; }
.sl-assets span{ display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:12px; background:#fff; border:1px solid var(--line); font-size:14px; font-weight:700; box-shadow:0 1px 2px rgba(60,30,110,.05); }
.sl-assets span svg{ color:var(--ok); }
.sl-steps{ counter-reset:s; display:grid; gap:10px; grid-template-columns:1fr; }
.sl-step{ display:flex; gap:14px; align-items:flex-start; padding:15px 18px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(60,30,110,.05); }
.sl-step__n{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-family:"General Sans",sans-serif; font-weight:600; font-size:13px; color:#fff; background:linear-gradient(160deg,#8b5cf6,var(--violet)); }
.sl-step__t{ font-weight:700; font-size:14.5px; padding-top:6px; }

/* ══════════════════════════════════════════════════════════════════════════
   05 · WHAT'S INSIDE (bento, varied)
   ══════════════════════════════════════════════════════════════════════════ */
.sl-inside{ margin-top:clamp(32px,4vw,52px); display:grid; gap:14px; grid-template-columns:1fr; }
.sl-mod{ position:relative; border-radius:18px; padding:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); overflow:hidden;
  transition:transform .4s var(--e), background .4s var(--e); }
.sl-mod:hover{ transform:translateY(-4px); background:rgba(255,255,255,.08); }
.sl-mod__k{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#cdb6ff; }
.sl-mod__t{ margin:10px 0 0; font-family:"General Sans",sans-serif; font-weight:600; font-size:17px; color:#fff; }
.sl-mod__d{ margin:7px 0 0; font-size:13px; color:var(--dink2); font-weight:600; line-height:1.5; }
.sl-mod__list{ margin:12px 0 0; display:flex; flex-wrap:wrap; gap:7px; }
.sl-mod__list span{ padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); font-size:12px; font-weight:700; color:#efe9fb; }
.sl-mod--wide .sl-mod__t{ font-size:clamp(18px,2.4vw,24px); }
.sl-inside__extra{ margin-top:14px; display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.2); }
.sl-inside__extra svg{ color:#c4a5ff; flex:0 0 auto; margin-top:1px; }
.sl-inside__extra p{ margin:0; font-size:13.5px; color:var(--dink2); font-weight:600; line-height:1.55; }
.sl-inside__extra b{ color:#fff; }

/* ══════════════════════════════════════════════════════════════════════════
   06 · EXAMPLES
   ══════════════════════════════════════════════════════════════════════════ */
.sl-ex{ margin-top:clamp(32px,4vw,52px); display:grid; gap:16px; grid-template-columns:1fr; }
.sl-ex__card{ position:relative; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(60,30,110,.06); text-decoration:none; color:var(--ink);
  transition:transform .4s var(--e), box-shadow .4s var(--e); }
.sl-ex__card:hover{ transform:translateY(-5px); box-shadow:0 28px 50px -24px rgba(60,30,110,.4); }
.sl-ex__media{ aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg,#efe9fb,#e0d4f4); }
.sl-ex__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e); }
.sl-ex__card:hover .sl-ex__media img{ transform:scale(1.05); }
.sl-ex__b{ padding:16px 18px; }
.sl-ex__k{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--violet); }
.sl-ex__t{ margin:7px 0 0; font-family:"General Sans",sans-serif; font-weight:600; font-size:17px; }
.sl-ex__note{ margin-top:18px; font-size:13.5px; color:var(--ink2); font-weight:600; }
.sl-ex__note a{ color:var(--violet); font-weight:800; }

/* ══════════════════════════════════════════════════════════════════════════
   07 · PRICE
   ══════════════════════════════════════════════════════════════════════════ */
.sl-price{ margin-top:clamp(32px,4vw,52px); display:grid; gap:20px; grid-template-columns:1fr; }
.sl-price__scale{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,26px); flex-wrap:wrap; padding:clamp(22px,4vw,38px);
  border-radius:22px; background:linear-gradient(120deg,rgba(109,40,217,.06),rgba(168,85,247,.06)); border:1px solid rgba(109,40,217,.16); }
.sl-price__sku{ font-family:"General Sans",sans-serif; font-weight:600; font-size:clamp(22px,5vw,44px); letter-spacing:-.03em; text-align:center; }
.sl-price__sku span{ display:block; font-family:"Manrope",sans-serif; font-size:12px; font-weight:700; color:var(--ink2); letter-spacing:0; margin-top:4px; }
.sl-price__ne{ font-family:"General Sans",sans-serif; font-weight:600; font-size:clamp(20px,4vw,34px); color:var(--violet); }
.sl-price__panel{ display:grid; gap:18px; grid-template-columns:1fr; align-items:center; padding:clamp(24px,3vw,34px); border-radius:22px;
  background:linear-gradient(165deg,var(--dark3),var(--dark)); color:#fff; box-shadow:0 30px 60px -34px rgba(45,16,90,.6); }
.sl-price__from span{ font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dink2); }
.sl-price__from b{ display:block; margin-top:6px; font-family:"General Sans",sans-serif; font-weight:600; font-size:clamp(30px,5vw,50px); letter-spacing:-.03em; }
.sl-price__from small{ display:block; margin-top:8px; font-size:13px; color:var(--dink2); font-weight:600; max-width:44ch; line-height:1.5; }
.sl-price__factors{ display:flex; flex-wrap:wrap; gap:8px; }
.sl-price__factors span{ padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:12.5px; font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════════
   08 · TRUST
   ══════════════════════════════════════════════════════════════════════════ */
.sl-trust{ margin-top:clamp(32px,4vw,52px); display:grid; gap:14px; grid-template-columns:1fr; }
.sl-trust__cell{ padding:20px 22px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(60,30,110,.05); }
.sl-trust__cell svg{ color:var(--violet); }
.sl-trust__cell b{ display:block; margin:12px 0 0; font-family:"General Sans",sans-serif; font-weight:600; font-size:16px; }
.sl-trust__cell p{ margin:6px 0 0; font-size:13.5px; color:var(--ink2); font-weight:600; line-height:1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   09 · FINAL CTA
   ══════════════════════════════════════════════════════════════════════════ */
.sl-final{ position:relative; }
.sl-final__card{ position:relative; overflow:hidden; border-radius:26px; padding:clamp(30px,5vw,66px) clamp(22px,5vw,60px);
  background:radial-gradient(100% 130% at 84% 0%, rgba(168,85,247,.4), transparent 56%), linear-gradient(160deg,var(--dark2),var(--dark) 88%);
  border:1px solid var(--dline); box-shadow:0 40px 90px -46px rgba(0,0,0,.7); color:#fff; }
.sl-final__h{ margin:16px 0 0; font-family:"General Sans",sans-serif; font-weight:600; font-size:clamp(24px,4.2vw,46px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance; max-width:20ch; }
.sl-final__p{ margin:18px 0 0; color:var(--dink2); font-size:clamp(15px,2vw,18px); line-height:1.6; max-width:52ch; }

/* lead form */
.sl-lead-form{ margin-top:26px; max-width:560px; }
.sl-lead-form__row{ display:flex; gap:10px; flex-wrap:wrap; }
.sl-input{ flex:1 1 260px; min-height:56px; padding:0 18px; border-radius:14px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:16px; font-weight:600; }
.sl-input::placeholder{ color:rgba(255,255,255,.5); }
.sl-input:focus{ outline:none; border-color:var(--violet3); background:rgba(255,255,255,.1); }
.sl-lead-form__hint{ margin-top:12px; font-size:12.5px; color:var(--dink2); font-weight:600; }
.sl-lead-form__msg{ margin-top:12px; font-size:14px; font-weight:700; color:var(--ok); display:none; }
.sl-lead-form__msg.show{ display:block; }

/* ══════════════════════════════════════════════════════════════════════════
   motion helpers
   ══════════════════════════════════════════════════════════════════════════ */
.sl-js .sl-rev{ opacity:0; transform:translateY(26px); }
.sl-js .sl-rev.in{ opacity:1; transform:none; transition:opacity .8s var(--e), transform .8s var(--e); }

/* ══════════════════════════════════════════════════════════════════════════
   responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:640px){
  .sl-pain__grid{ grid-template-columns:1fr 1fr; }
  .sl-steps{ grid-template-columns:1fr 1fr; }
  .sl-inside{ grid-template-columns:1fr 1fr; }
  .sl-ex{ grid-template-columns:1fr 1fr; }
  .sl-trust{ grid-template-columns:1fr 1fr; }
  .sl-lead-form__row .sl-btn{ flex:0 0 auto; }
}
@media (min-width:920px){
  .sl-pain__grid{ grid-template-columns:repeat(4,1fr); }
  .sl-solve{ grid-template-columns:1fr 64px 1fr; }
  .sl-how{ grid-template-columns:1fr 1fr; align-items:start; }
  .sl-inside{ grid-template-columns:repeat(3,1fr); }
  .sl-mod--wide{ grid-column:span 2; }
  .sl-mod--tall{ grid-row:span 2; }
  .sl-ex{ grid-template-columns:repeat(3,1fr); }
  .sl-trust{ grid-template-columns:repeat(3,1fr); }
  .sl-price__panel{ grid-template-columns:1.1fr 1fr; }
}

/* ── mobile laptop stage: smaller, fewer labels, still opens ───────────── */
@media (max-width:719px){
  .sl-stage{ aspect-ratio:1/1; max-width:420px; }
  .sl-stage__scene{ transform:rotateX(12deg); }
  .sl-lap{ width:80%; bottom:20%; }
  .sl-label{ font-size:11px; padding:7px 10px; }
  .sl-label--p3, .sl-label--p4{ display:none; }         /* fewer labels on mobile */
  .sl-label--l1{ left:2%; top:6%; } .sl-label--l3{ right:2%; top:6%; }
  .sl-label--l2{ left:0%; top:38%; } .sl-label--l4{ right:0%; top:38%; }
  .sl-label--p1{ left:3%; top:84%; } .sl-label--p2{ right:3%; top:84%; }
}

@media (hover:none){
  .sl-mod:hover, .sl-ex__card:hover, .sl-btn:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .sl *{ animation:none !important; }
  .sl-js .sl-rev{ opacity:1 !important; transform:none !important; transition:none !important; }
  .sl-hero__scrollcue svg{ animation:none !important; }
}

@supports (padding:max(0px)){
  .sl-shell{ padding-left:max(var(--pad),env(safe-area-inset-left)); padding-right:max(var(--pad),env(safe-area-inset-right)); }
}