/* YourWeblancer — shared styles */

/* Theme: the original YourWeblancer look — lavender page, violet→cyan accents,
   Playfair Display headings, Plus Jakarta Sans text, deep ink-violet dark sections. */
:root{
  --v:#6C3FFF;--v2:#5228E0;--c:#0EA5E9;--c2:#0284C7;--g:#F59E0B;--em:#10B981;
  --grad:linear-gradient(135deg,#6C3FFF,#0284C7);
  --navy-900:#0C0820;
  --navy-800:#150B36;
  --navy-700:#22125A;
  --navy-600:#5228E0;
  --gold:#6C3FFF;
  --gold-hi:#B4A0FF;
  --gold-lo:#5228E0;
  --porcelain:#F9F7FF;
  --white:#FFFFFF;
  --ink:#0C0820;
  --slate:#6B6890;
  --line:#E6E0F7;
  --paid:#0E9F6E;
  --wa:#1FAF5A;
  --on-dark:#F0EDF8;
  --on-dark-muted:#ABA5C6;
  --line-dark:rgba(255,255,255,.12);
  --s1:0 4px 24px rgba(108,63,255,.08);
  --s2:0 16px 52px rgba(108,63,255,.14);
  --s3:0 28px 80px rgba(108,63,255,.2);

  --serif:"Playfair Display",Georgia,"Bitstream Charter",serif;
  --sans:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-lg:22px;--r-md:14px;--r-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1180px;
  --gutter:clamp(16px,4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:700}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--navy-900);padding:8px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:8px}

.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,112px);overflow-x:clip}
.section--tight{padding-block:clamp(48px,6vw,72px)}
.section--dark{background:var(--navy-800);color:var(--on-dark)}
.section--white{background:var(--white)}
.section--dark .muted{color:var(--on-dark-muted)}
.muted{color:var(--slate)}

/* Type */
.display,h1{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.35rem,5.4vw,4.5rem);line-height:1.03}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.85rem,3.4vw,2.85rem);letter-spacing:-.01em;line-height:1.08;font-variation-settings:"opsz" 72}
h3{font-size:1.2rem;line-height:1.3}
.lede{font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.6;max-width:36em}
.section-head{max-width:46rem;margin-bottom:clamp(28px,4vw,48px)}
.section-head p{margin-top:14px;color:var(--slate);max-width:38em}
.section--dark .section-head p{color:var(--on-dark-muted)}
.prose{max-width:42rem}
.prose h2{margin:2.2em 0 .6em}
.prose h3{margin:1.6em 0 .5em}
.prose ul{padding-left:1.2em;margin:0 0 1em}
.prose li{margin:.3em 0}
.prose a{color:var(--navy-600);text-underline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;font-size:.98rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background-color .2s,border-color .2s,box-shadow .25s var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:var(--navy-900);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -10px rgba(201,162,78,.7)}
.btn--gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 32px -12px rgba(201,162,78,.85);transform:translateY(-1px)}
.btn--ghost{border-color:currentColor;background:transparent}
.section--dark .btn--ghost,.hero .btn--ghost,.cta-band .btn--ghost{color:var(--on-dark);border-color:rgba(233,237,248,.35)}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover,.cta-band .btn--ghost:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.btn--navy{background:var(--navy-800);color:var(--on-dark)}
.btn--navy:hover{background:var(--navy-700)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:#19994e}
.btn svg{width:20px;height:20px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.text-link{font-weight:700;color:var(--navy-600);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.section--dark .text-link{color:var(--gold-hi)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,26,58,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-dark);color:var(--on-dark)}
.site-header .container{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:44px;height:32px;object-fit:contain}
.brand span{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.005em;color:var(--on-dark)}
.brand span b{font-weight:600;color:var(--gold-hi)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;color:var(--on-dark-muted);transition:color .2s,background-color .2s}
.nav a:hover{color:var(--on-dark);background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:var(--on-dark);background:rgba(255,255,255,.08)}
.header-cta{min-height:42px;padding:0 18px;font-size:.92rem}
.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-dark);background:transparent;color:var(--on-dark);cursor:pointer}
.menu-btn svg{margin:auto}
@media (max-width:900px){
  .nav,.header-cta{display:none}
  .menu-btn{display:grid;place-items:center}
  .site-header.is-open .nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;padding:10px var(--gutter) 18px;background:var(--navy-800);border-bottom:1px solid var(--line-dark)}
  .site-header.is-open .nav a{padding:13px 12px;font-size:1.05rem}
}

/* Hero */
.hero{position:relative;background:radial-gradient(1200px 600px at 85% 10%,rgba(34,52,106,.9),transparent 60%),linear-gradient(180deg,var(--navy-800),var(--navy-900));color:var(--on-dark);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(235,210,147,.45),transparent)}
.hero .container{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,104px)}
.hero h1{max-width:12.5em;font-size:clamp(2.3rem,4.3vw,3.75rem)}
.hero .lede{color:var(--on-dark-muted);margin:22px 0 30px}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:.95rem;color:var(--on-dark)}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts svg{width:18px;height:18px;color:var(--gold-hi);flex:none}
.hero--page .container{grid-template-columns:minmax(0,1fr);padding-block:clamp(44px,6vw,80px)}
.hero--page h1{max-width:16em;font-size:clamp(2.2rem,4.6vw,3.8rem)}
.hero--split .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.88rem;color:var(--on-dark-muted);margin-bottom:18px;list-style:none}
.breadcrumb a{color:var(--on-dark-muted);text-underline-offset:3px}
.breadcrumb li+li::before{content:"/";margin-right:6px;opacity:.5}
@media (max-width:900px){
  .hero .container,.hero--split .container{grid-template-columns:minmax(0,1fr)}
}

/* ─────────── 3D device scene (the signature moment) ─────────── */
.stage{position:relative;perspective:1500px;perspective-origin:50% 35%;touch-action:pan-y}
.scene{--rx:0deg;--ry:0deg;position:relative;width:100%;aspect-ratio:16/12;transform-style:preserve-3d;transform:rotateX(calc(9deg + var(--rx))) rotateY(calc(-17deg + var(--ry))) rotateZ(1deg)}
.scene>*{position:absolute;transform-style:preserve-3d}
.laptop{left:4%;top:4%;width:80%;transform:translateZ(0)}
.scene>.laptop{transform-style:flat}
.lid{position:relative;aspect-ratio:16/10;padding:2.1%;border-radius:16px 16px 6px 6px;background:linear-gradient(160deg,#2B3554,#141A2E);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 50px 80px -30px rgba(0,0,0,.75);transform-style:preserve-3d}
.lid::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#0A0E1A;transform:translateZ(-9px)}
.lid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 32%)}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:7px;background:#000;container-type:inline-size}
.deck{position:relative;width:114%;margin-left:-7%;height:0;padding-bottom:40%;margin-bottom:-36%;transform-origin:50% 0;transform:perspective(700px) rotateX(64deg);border-radius:0 0 22px 22px;background:linear-gradient(180deg,#C9CFDC,#8E97AD);box-shadow:0 0 0 1px rgba(255,255,255,.3) inset}
.deck::before{content:"";position:absolute;left:8%;right:8%;top:8%;height:58%;border-radius:10px;background:repeating-linear-gradient(90deg,rgba(20,26,46,.22) 0 5.5%,transparent 5.5% 6.4%),repeating-linear-gradient(180deg,rgba(20,26,46,.22) 0 15%,transparent 15% 18%)}
.deck::after{content:"";position:absolute;left:36%;right:36%;bottom:9%;height:22%;border-radius:8px;background:rgba(20,26,46,.14)}
.phone{right:1%;bottom:3%;width:23%;aspect-ratio:9/19;padding:2.4% 1.6%;border-radius:22px;background:linear-gradient(160deg,#2B3554,#0E1222);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 40px 60px -20px rgba(0,0,0,.7);transform:translateZ(90px) rotateY(-4deg)}
.phone .screen{border-radius:16px}
.phone::before{content:"";position:absolute;top:3.2%;left:50%;width:26%;height:2.2%;margin-left:-13%;border-radius:20px;background:#05070D;z-index:2}
.float-receipt{left:0;bottom:8%;width:27%;padding:9px;border-radius:16px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 30px 60px -18px rgba(0,0,0,.65);transform:translateZ(170px) rotateZ(-5deg);transition:box-shadow .3s}
.float-receipt img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:10px}
.float-receipt .fr-txt{display:block;padding:8px 4px 2px;font-size:clamp(.6rem,.85vw,.74rem);line-height:1.35;color:var(--slate)}
.float-receipt strong{display:flex;align-items:center;gap:5px;color:var(--paid);font-size:clamp(.66rem,.95vw,.8rem);white-space:nowrap}
.float-receipt strong svg{width:1.1em;height:1.1em}
.float-receipt:hover{box-shadow:0 36px 70px -16px rgba(0,0,0,.8),0 0 0 3px var(--gold-hi)}
.chip{top:-3%;right:16%;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(14,26,58,.85);border:1px solid rgba(235,210,147,.4);color:var(--on-dark);font-size:clamp(.66rem,1.1vw,.86rem);font-weight:700;white-space:nowrap;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transform:translateZ(120px)}
.chip i{width:8px;height:8px;border-radius:50%;background:#3BE38B;box-shadow:0 0 0 4px rgba(59,227,139,.18)}
.stage-shadow{position:absolute;left:8%;right:4%;bottom:-2%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(10px);transform:translateZ(-60px) rotateX(90deg)}
.stage-note{margin-top:18px;font-size:.88rem;color:var(--on-dark-muted);text-align:center}
.section:not(.section--dark) .stage-note{color:var(--slate)}

/* load assembly — only when JS is present */
.js .stage .laptop,.js .stage .phone,.js .stage .float-receipt,.js .stage .chip{transition:transform 1.1s var(--ease),opacity .8s ease}
.js .stage:not(.is-ready) .laptop{opacity:0;transform:translateZ(-260px) rotateX(16deg)}
.js .stage:not(.is-ready) .phone{opacity:0;transform:translateZ(260px) translateX(30%) rotateY(-30deg)}
.js .stage:not(.is-ready) .float-receipt{opacity:0;transform:translateZ(420px) translateY(30%) rotateZ(-18deg)}
.js .stage:not(.is-ready) .chip{opacity:0;transform:translateZ(220px) translateY(-40%)}
.js .stage.is-ready .phone{transition-delay:.18s}
.js .stage.is-ready .float-receipt{transition-delay:.42s}
.js .stage.is-ready .chip{transition-delay:.6s}

@media (max-width:900px){
  .stage{margin-top:44px;max-width:640px;margin-inline:auto}
  .scene{transform:rotateX(calc(6deg + var(--rx))) rotateY(calc(-12deg + var(--ry)))}
  .float-receipt{width:32%;left:4%;bottom:6%;transform:translateZ(90px) rotateZ(-5deg)}
  .chip{right:6%;top:-6%}
}

/* ─────────── Illustrated site mockups (scale with their screen) ─────────── */
.mock{--u:1cqw;--bg:#fff;--fg:#111;--hero:#222;--hero-fg:#fff;--acc:#C9A24E;--acc-fg:#111;--card:#fff;--mk-font:var(--serif);position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.15;overflow:hidden;text-align:left}
.mock--m{--u:2.4cqw}
.mk-nav{display:flex;align-items:center;gap:calc(3*var(--u));padding:calc(2.2*var(--u)) calc(3.4*var(--u));font-size:calc(1.9*var(--u))}
.mk-logo{font-family:var(--mk-font);font-weight:700;font-size:calc(2.5*var(--u));letter-spacing:.04em;white-space:nowrap}
.mk-links{display:flex;gap:calc(2.2*var(--u));margin-left:auto}
.mk-links i{display:block;width:calc(6*var(--u));height:calc(.8*var(--u));border-radius:9px;background:currentColor;opacity:.28}
.mk-pill{padding:calc(1*var(--u)) calc(2.2*var(--u));border-radius:99px;background:var(--acc);color:var(--acc-fg);font-weight:700;font-size:calc(1.6*var(--u))}
.mk-burger{display:none;margin-left:auto;width:calc(3.4*var(--u));height:calc(2.4*var(--u));background:linear-gradient(currentColor 0 0) top/100% 18% no-repeat,linear-gradient(currentColor 0 0) center/100% 18% no-repeat,linear-gradient(currentColor 0 0) bottom/100% 18% no-repeat;opacity:.7}
.mk-hero{flex:1 1 auto;display:flex;align-items:flex-end;margin:0 calc(2.2*var(--u));padding:calc(4.6*var(--u));border-radius:calc(1.6*var(--u));background:var(--hero);color:var(--hero-fg);min-height:0}
.mk-kicker{display:block;font-size:calc(1.6*var(--u));opacity:.85;margin-bottom:calc(1.2*var(--u))}
.mk-h{display:block;max-width:62%;font-family:var(--mk-font);font-weight:700;font-size:calc(4.6*var(--u));line-height:1.04;letter-spacing:-.01em}
.mk-ctas{display:flex;flex-wrap:wrap;gap:calc(1.4*var(--u));margin-top:calc(2.4*var(--u))}
.mk-ctas span{padding:calc(1*var(--u)) calc(2.2*var(--u));border-radius:99px;font-weight:700;font-size:calc(1.55*var(--u));white-space:nowrap}
.mk-b1{background:var(--acc);color:var(--acc-fg)}
.mk-b2{box-shadow:0 0 0 calc(.22*var(--u)) currentColor inset}
.mk-b2.wa{background:#25D366;color:#fff;box-shadow:none}
.mk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(1.6*var(--u));padding:calc(2.2*var(--u))}
.mk-cards span{padding:calc(1.6*var(--u));border-radius:calc(1.1*var(--u));background:var(--card);font-size:calc(1.55*var(--u));font-weight:700;box-shadow:0 calc(.3*var(--u)) calc(1.2*var(--u)) rgba(0,0,0,.08)}
.mk-cards i{display:block;height:calc(.7*var(--u));margin-top:calc(.9*var(--u));border-radius:9px;background:currentColor;opacity:.16}
.mk-cards i+i{width:68%}
.mock--m .mk-links,.mock--m .mk-pill{display:none}
.mock--m .mk-burger{display:block}
.mock--m .mk-nav{padding-top:calc(4.4*var(--u))}
.mock--m .mk-hero{flex:0 0 58%;align-items:flex-end;padding:calc(3.4*var(--u))}
.mock--m .mk-h{max-width:none;font-size:calc(4.2*var(--u))}
.mock--m .mk-cards{grid-template-columns:1fr 1fr}

/* brand palettes — illustrations, not exact copies */
.mk-mebrix{--bg:#F7F2EA;--fg:#1D1A16;--hero:radial-gradient(circle at 80% 26%,rgba(226,182,98,.7),transparent 34%),radial-gradient(circle,#3D3934 22%,transparent 26%) 0 0/calc(1.3*var(--u)) calc(1.3*var(--u)),linear-gradient(160deg,#1E1B18,#0C0B0A);--hero-fg:#F7F2EA;--acc:#C99B4C;--acc-fg:#15120E;--card:#FFFDF8}
.mk-moka{--bg:#F6EFE6;--fg:#2B1A12;--hero:radial-gradient(circle at 74% 42%,#D59A64 0 7%,#7A4428 8% 19%,#3A2015 20% 22%,transparent 23%),linear-gradient(135deg,#3D2317,#1C100A);--hero-fg:#F6EFE6;--acc:#D9A066;--acc-fg:#2B1A12;--card:#FFFAF3}
.mk-haveli{--bg:#FBF4E8;--fg:#3A1414;--hero:radial-gradient(circle at 50% 100%,transparent 0 36%,rgba(232,190,120,.38) 37% 40%,transparent 41%) 0 0/calc(12*var(--u)) calc(13*var(--u)),linear-gradient(180deg,#7E2230,#4A0F18);--hero-fg:#FBF4E8;--acc:#E2B66C;--acc-fg:#3A1414;--card:#FFFBF4}
.mk-cochin{--bg:#F4F6FB;--fg:#0F1F44;--hero:linear-gradient(115deg,transparent 0 58%,rgba(212,175,90,.35) 58% 58.6%,transparent 58.6% 64%,rgba(212,175,90,.2) 64% 64.4%,transparent 64.4%),linear-gradient(160deg,#18336F,#0B1A40);--hero-fg:#F4F6FB;--acc:#D4AF5A;--acc-fg:#0F1F44;--card:#fff}
.mk-apex{--bg:#101010;--fg:#F2F2F2;--hero:repeating-linear-gradient(-45deg,rgba(240,226,0,.13) 0 calc(1*var(--u)),transparent calc(1*var(--u)) calc(4*var(--u))),linear-gradient(160deg,#1D1D1D,#050505);--hero-fg:#fff;--acc:#F0E200;--acc-fg:#111;--card:#1B1B1B;--mk-font:var(--sans)}
.mk-bloom{--bg:#FBF6F2;--fg:#3B2F2A;--hero:radial-gradient(circle at 24% 72%,#E8B4A6 0 13%,transparent 14%),radial-gradient(circle at 72% 30%,#B9C9A9 0 17%,transparent 18%),radial-gradient(circle at 88% 82%,#F2D3A8 0 9%,transparent 10%),#EFDCD2;--hero-fg:#3B2F2A;--acc:#8FA67F;--acc-fg:#fff;--card:#fff}
.mk-creator{--bg:#121018;--fg:#EDE9F7;--hero:radial-gradient(circle at 72% 30%,rgba(139,92,246,.85),transparent 42%),radial-gradient(circle at 20% 90%,rgba(244,114,182,.5),transparent 40%),linear-gradient(160deg,#241A3A,#0B0912);--hero-fg:#fff;--acc:#F472B6;--acc-fg:#160c1f;--card:#1C1826;--mk-font:var(--sans)}
.mk-eyecare{--bg:#F2FAFA;--fg:#0F3B40;--hero:radial-gradient(circle at 74% 46%,#fff 0 5%,#0B5F67 6% 12%,#E6F6F6 13% 15%,transparent 16%),linear-gradient(160deg,#14858F,#0A4F56);--hero-fg:#fff;--acc:#FFB547;--acc-fg:#0F3B40;--card:#fff;--mk-font:var(--sans)}
.mk-laxmi{--bg:#FFF5F7;--fg:#4A1631;--hero:radial-gradient(circle at 76% 34%,rgba(255,214,228,.65),transparent 34%),linear-gradient(160deg,#B03A6B,#6E1A43);--hero-fg:#fff;--acc:#F7C6D9;--acc-fg:#4A1631;--card:#fff}
.mk-chat{--bg:#0F1730;--fg:#E9EDF8}
.mk-chat .mk-thread{flex:1;display:flex;flex-direction:column;gap:calc(1.6*var(--u));padding:calc(3*var(--u))}
.mk-chat .mk-thread span{max-width:62%;padding:calc(1.6*var(--u)) calc(2.2*var(--u));border-radius:calc(1.8*var(--u));font-size:calc(1.7*var(--u));line-height:1.35}
.mk-chat .bot{background:#1E2A52}
.mk-chat .you{align-self:flex-end;background:var(--gold);color:var(--navy-900)}
.mk-chat .mk-input{margin:0 calc(3*var(--u)) calc(3*var(--u));height:calc(5*var(--u));border-radius:99px;background:#1A2448}

/* ─────────── Proof ─────────── */
.proof{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:26px 0 30px;font-size:.98rem}
.facts dt{color:var(--slate);font-weight:600}
.facts dd{margin:0;font-weight:600}
.section--dark .facts dt{color:var(--on-dark-muted)}
.facts a{text-underline-offset:3px}
.fan{position:relative;height:clamp(360px,44vw,480px);perspective:1100px}
.fan__card{position:absolute;top:4%;left:50%;width:min(56%,250px);padding:0;border:0;border-radius:18px;overflow:hidden;background:#1a1a1a;cursor:zoom-in;box-shadow:0 30px 60px -20px rgba(8,17,42,.6),0 0 0 1px rgba(8,17,42,.08);transform-origin:50% 100%;transition:transform 1s var(--ease),box-shadow .3s}
.fan__card img{width:100%;aspect-ratio:3/4.6;object-fit:cover;object-position:top}
.fan__card--a{transform:translateX(-50%) rotateZ(-4deg) translateZ(0)}
.fan__card--b{transform:translateX(-50%) rotateZ(3deg) translateZ(-30px)}
.fan.is-open .fan__card--a{transform:translateX(-96%) rotateZ(-9deg) rotateY(16deg) translateZ(30px)}
.fan.is-open .fan__card--b{transform:translateX(-6%) rotateZ(7deg) rotateY(-16deg) translateZ(0)}
.fan__card:hover{box-shadow:0 34px 70px -18px rgba(8,17,42,.7),0 0 0 3px var(--gold)}
.fan__seal{position:absolute;left:50%;bottom:4%;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--white);color:var(--paid);font-weight:800;font-size:.92rem;box-shadow:0 14px 30px -12px rgba(8,17,42,.45)}
.fan__seal svg{width:18px;height:18px}
.proof-note{font-size:.9rem;color:var(--slate);margin-top:14px;max-width:34em}
@media (max-width:900px){.proof{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.fan__card{width:min(50%,220px)}.fan.is-open .fan__card--a{transform:translateX(-90%) rotateZ(-8deg) rotateY(14deg) translateZ(20px)}.fan.is-open .fan__card--b{transform:translateX(-10%) rotateZ(6deg) rotateY(-14deg)}}

/* ─────────── Work cards ─────────── */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700;line-height:1.4}
.tag--client{background:#E3F5EC;color:#11734A}
.tag--concept{background:#ECEBFA;color:#3E3A8C}
.tag--product{background:#FBF1DC;color:#7A5A12}
.tag--wip{background:#FFF1E0;color:#94530C}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}
.wcard{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transform-style:preserve-3d;transition:box-shadow .3s var(--ease),border-color .3s}
.wcard:hover{box-shadow:0 24px 50px -24px rgba(14,26,58,.35);border-color:#C9D0E2}
.wcard__frame{position:relative;margin:14px 14px 0;border-radius:12px;background:#E7EBF4;padding:22px 0 0;overflow:hidden}
.wcard__frame::before{content:"";position:absolute;top:8px;left:10px;width:34px;height:7px;background:radial-gradient(circle,#F26B5E 0 3px,transparent 3.5px) 0 0/12px 7px repeat-x}
.wcard__frame .screen{aspect-ratio:16/10;border-radius:0}
.wcard__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.wcard__body h3{font-size:1.14rem}
.wcard__body p{margin:0;color:var(--slate);font-size:.95rem}
.wcard__links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:8px;font-size:.93rem}
.wcard__links a{font-weight:700;color:var(--navy-600);text-underline-offset:4px}
.wcard__meta{display:flex;flex-wrap:wrap;gap:6px}

/* ─────────── Coverflow shelf (Work page) ─────────── */
.shelf{position:relative}
.shelf__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.shelf__filters button{padding:9px 16px;border-radius:999px;border:1px solid var(--line-dark);background:transparent;color:var(--on-dark-muted);font-weight:600;cursor:pointer}
.shelf__filters button[aria-pressed="true"]{background:var(--on-dark);color:var(--navy-900);border-color:var(--on-dark)}
.shelf__track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px max(var(--gutter),calc(50% - 170px)) 56px;perspective:1300px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shelf__track::-webkit-scrollbar{display:none}
.shelf__item{--ry:0deg;--tz:0px;--o:1;flex:0 0 340px;scroll-snap-align:center;transform:rotateY(var(--ry)) translateZ(var(--tz));opacity:var(--o);transition:opacity .3s}
.shelf__item[hidden]{display:none}
.shelf__item .wcard{height:100%;border-color:transparent;box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.shelf__ctrl{display:flex;gap:10px;justify-content:center}
.shelf__ctrl button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);color:var(--on-dark);cursor:pointer;display:grid;place-items:center}
.shelf__ctrl button:hover{border-color:var(--gold-hi);color:var(--gold-hi)}
.shelf__ctrl svg{width:20px;height:20px}
@media (max-width:620px){.shelf__item{flex-basis:82vw}.shelf__track{padding-inline:9vw}}

/* ─────────── Steps (a real sequence) ─────────── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s;border-top:1px solid var(--line)}
.steps li{position:relative;padding:28px 24px 8px 0;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:50%;border:1.5px solid var(--navy-800);font-family:var(--serif);font-weight:700;font-size:1.15rem}
.steps li:first-child::before{background:var(--navy-800);color:var(--gold-hi)}
.steps h3{margin-bottom:8px}
.steps p{color:var(--slate);font-size:.97rem;margin:0}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ─────────── Pricing ─────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;perspective:1400px}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;padding:30px 26px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);transform-style:preserve-3d;transition:box-shadow .3s}
.plan--featured{background:var(--navy-800);color:var(--on-dark);border-color:var(--navy-800);box-shadow:0 36px 70px -34px rgba(8,17,42,.8)}
.plan--featured .muted{color:var(--on-dark-muted)}
.plan__flag{position:absolute;top:-13px;left:26px;padding:4px 12px;border-radius:999px;background:var(--gold);color:var(--navy-900);font-size:.8rem;font-weight:800}
.plan h3{font-size:1.25rem}
.plan__for{margin:6px 0 20px;font-size:.95rem}
.price{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-weight:700;font-size:3rem;line-height:1;transform:translateZ(40px)}
.price small{font-family:var(--sans);font-size:.95rem;font-weight:600}
.price s{font-family:var(--sans);font-size:1rem;font-weight:600;opacity:.55}
.plan__offer{font-size:.86rem;margin:8px 0 0}
.plan ul{list-style:none;margin:22px 0 26px;display:grid;gap:10px;font-size:.96rem}
.plan li{display:flex;gap:10px}
.plan li svg{flex:none;width:18px;height:18px;margin-top:4px;color:var(--paid)}
.plan--featured li svg{color:var(--gold-hi)}
.plan .btn{margin-top:auto;width:100%}
.compare{width:100%;border-collapse:collapse;font-size:.96rem;background:var(--white);border-radius:var(--r-md);overflow:hidden}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{background:var(--navy-800);color:var(--on-dark);font-weight:700}
.compare tbody th{font-weight:600}
.table-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.offer{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;margin-top:28px;padding:22px 24px;border-radius:var(--r-lg);background:linear-gradient(120deg,#FFF8E6,#FBF1D6);border:1px solid #EBD9A6}
.offer svg{width:40px;height:40px;color:var(--gold-lo)}
.offer p{margin:0}
@media (max-width:700px){.offer{grid-template-columns:minmax(0,1fr)}}

/* ─────────── Team ─────────── */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
@media (max-width:760px){.team{grid-template-columns:minmax(0,1fr)}}
.person{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;padding:22px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)}
.person img{width:150px;height:180px;object-fit:cover;object-position:50% 20%;border-radius:16px}
.person h3{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.person .role{margin:4px 0 10px;color:var(--gold-lo);font-weight:700;font-size:.95rem}
.person p{font-size:.97rem;color:var(--slate);margin:0 0 .6em}
@media (max-width:480px){.person{grid-template-columns:1fr}.person img{width:100%;height:260px}}

/* ─────────── FAQ ─────────── */
.faq{max-width:52rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-weight:700;font-size:1.06rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:7px;border-right:2px solid var(--navy-600);border-bottom:2px solid var(--navy-600);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 20px;color:var(--slate);max-width:44em}

/* ─────────── Case study ─────────── */
.notice{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-md);background:#ECEBFA;color:#2E2A6E;font-size:.98rem}
.notice svg{flex:none;width:22px;height:22px;margin-top:2px}
.notice p{margin:0}
.hero .notice{background:rgba(236,235,250,.1);color:var(--on-dark);border:1px solid rgba(236,235,250,.25);margin-top:24px}
.features{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin:10px 0 0}
.features li{padding:16px 0;border-top:1px solid var(--line)}
.features strong{display:block;margin-bottom:4px}
.features span{color:var(--slate);font-size:.96rem}
@media (max-width:700px){.features{grid-template-columns:minmax(0,1fr)}}
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(28px,5vw,64px);align-items:start}
.cs-aside{position:sticky;top:96px;padding:24px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)}
.cs-aside h2{font-family:var(--sans);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.cs-aside .facts{grid-template-columns:minmax(0,1fr);gap:2px;margin:12px 0 18px}
.cs-aside .facts dd{margin-bottom:10px}
.cs-aside .btn{width:100%}
@media (max-width:900px){.cs-grid{grid-template-columns:minmax(0,1fr)}.cs-aside{position:static}}
.next-link{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 28px;border-radius:var(--r-lg);background:var(--navy-800);color:var(--on-dark);text-decoration:none}
.next-link span{color:var(--on-dark-muted);font-size:.92rem}
.next-link strong{font-family:var(--serif);font-size:1.5rem;font-weight:600}

/* ─────────── Contact & forms ─────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.channels{list-style:none;display:grid;gap:12px;margin:24px 0}
.channels a{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);text-decoration:none;transition:border-color .2s}
.channels a:hover{border-color:var(--navy-600)}
.channels svg{width:26px;height:26px;flex:none;color:var(--navy-600)}
.channels small{display:block;color:var(--slate);font-size:.85rem}
.channels strong{font-size:1.02rem}
.form{padding:clamp(22px,3vw,34px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(14,26,58,.4)}
.form h2{font-size:1.9rem;margin-bottom:6px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-weight:700;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--porcelain);transition:border-color .2s,background-color .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-600);background:var(--white)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.phone-group{display:flex;gap:8px}
.phone-group span{display:grid;place-items:center;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--porcelain);font-weight:700}
.form-error{display:none;margin:0 0 12px;color:#B42318;font-weight:600;font-size:.92rem}
.form-error.show{display:block}
.form-done{display:none;text-align:center;padding:20px 0}
.form-done.show{display:block}
.form-done svg{width:48px;height:48px;margin:0 auto 10px;color:var(--paid)}
.form small.note{display:block;margin-top:10px;color:var(--slate);font-size:.84rem}
.form .btn{width:100%}

/* ─────────── CTA band & footer ─────────── */
.cta-band{background:radial-gradient(800px 400px at 15% 0%,rgba(201,162,78,.22),transparent 60%),var(--navy-900);color:var(--on-dark);padding-block:clamp(56px,8vw,96px)}
.cta-band .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.cta-band h2{max-width:16em}
.cta-band p{color:var(--on-dark-muted);margin:12px 0 0;max-width:34em}
.site-footer{background:var(--navy-900);color:var(--on-dark-muted);border-top:1px solid var(--line-dark);padding-block:56px 110px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-grid a{overflow-wrap:anywhere}
@media (max-width:860px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
.site-footer h2{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--on-dark);margin-bottom:12px}
.site-footer ul{list-style:none;display:grid;gap:8px}
.site-footer a{color:var(--on-dark-muted);text-decoration:none}
.site-footer a:hover{color:var(--gold-hi)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:.88rem}
.footer-brand p{margin-top:12px;max-width:26em}

/* ─────────── Floating actions ─────────── */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff;box-shadow:0 14px 30px -10px rgba(31,175,90,.7)}
.wa-float svg{width:30px;height:30px}
.mobile-bar{display:none}
@media (max-width:760px){
  .wa-float{display:none}
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(8,17,42,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line-dark)}
  .mobile-bar .btn{min-height:46px;padding:0 12px;font-size:.92rem}
}

/* Modal + lightbox */
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,17,42,.72)}
.modal.open{display:flex}
.modal__card{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow:auto;animation:pop .35s var(--ease)}
.modal__close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--porcelain);cursor:pointer;font-size:1.2rem;line-height:1}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.lightbox{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(8,17,42,.92)}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;width:auto;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lightbox button{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.3rem;cursor:pointer}

/* Tilt for cards (pointer-driven only) */
[data-tilt]{--tx:0deg;--ty:0deg;transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty))}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .scene{--rx:0deg!important;--ry:0deg!important}
  [data-tilt]{transform:none!important}
  .shelf__item{transform:none!important;opacity:1!important}
}

/* Context tweaks */
.proof .steps,.contact-grid .steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:560px){.proof .steps,.contact-grid .steps{grid-template-columns:minmax(0,1fr)}}
.features--lg strong{font-family:var(--serif);font-size:1.45rem;font-weight:600;margin-bottom:8px}
.features--lg li{padding:24px 0}
.channels a>span{display:block}
.section--dark .stage-note{color:var(--on-dark-muted)}
.wcard{color:var(--ink)}
.prose .features{padding-left:0}
.prose .features li{margin:0}
.price{margin:0}
.fan__card--b{width:min(66%,300px);top:14%}
.fan__card--b img{aspect-ratio:720/822;object-fit:contain;background:#141414}
.shelf__track{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 170px)}
@media (max-width:620px){.shelf__track{padding-inline:9vw}}
.screen>img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}

/* ═════════════ Original-theme layer ═════════════ */
body{background-color:var(--porcelain);background-image:linear-gradient(rgba(108,63,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(108,63,255,.025) 1px,transparent 1px);background-size:60px 60px}
.display,h1{font-weight:800;letter-spacing:-.025em}
h2{font-weight:800;letter-spacing:-.02em}
.section--white{background:linear-gradient(180deg,#F1EEF9 0%,var(--porcelain) 100%)}
.section--dark{background:linear-gradient(135deg,#0C0820 0%,#1a0a40 50%,#0C0820 100%);position:relative}
.section--dark::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(108,63,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(108,63,255,.06) 1px,transparent 1px);background-size:40px 40px}
.section--dark>.container{position:relative}
:focus-visible{outline-color:var(--v)}

/* Buttons */
.btn{border-radius:14px}
.btn--gold{background:var(--grad);color:#fff;box-shadow:0 8px 28px rgba(108,63,255,.38)}
.btn--gold:hover{box-shadow:0 16px 44px rgba(108,63,255,.5);transform:translateY(-2px)}
.btn--navy{background:var(--ink);color:#fff}
.btn--navy:hover{background:var(--v2)}
.btn--ghost{border-width:2px}
.text-link{color:var(--v)}

/* Header: light, like the original nav */
.site-header{background:rgba(249,247,255,.97);color:var(--ink);border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--v),var(--c),transparent);opacity:.35}
.site-header .container{min-height:76px}
.brand--full img{width:auto;height:58px}
.nav a{color:#3A3A58;font-size:.92rem;border-radius:8px;position:relative}
.nav a:hover{color:var(--v);background:rgba(108,63,255,.06)}
.nav a[aria-current="page"]{color:var(--v);background:rgba(108,63,255,.08)}
.nbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(16,185,129,.09);border:1px solid rgba(16,185,129,.28);color:#059669;font-size:.74rem;font-weight:700;white-space:nowrap}
.nbadge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--em);box-shadow:0 0 6px var(--em)}
.menu-btn{border-color:var(--line);color:var(--ink)}
@media (max-width:1100px){.nbadge{display:none}}
@media (max-width:900px){
  .site-header .container{min-height:66px}
  .brand--full img{height:50px}
  .site-header.is-open .nav{background:rgba(249,247,255,.99);border-bottom:1px solid var(--line)}
  .site-header.is-open .nav a{border-bottom:1px solid var(--line);border-radius:0}
}

/* Inner-page heroes */
.hero{background:radial-gradient(900px 500px at 85% 0%,rgba(108,63,255,.35),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(14,165,233,.16),transparent 60%),linear-gradient(135deg,#0C0820,#1a0a40 60%,#0C0820)}
.hero::after{background:linear-gradient(90deg,transparent,var(--v),var(--c),transparent);opacity:.6}
.breadcrumb a{color:var(--on-dark-muted)}

/* Cards, plans, FAQ, people */
.wcard,.plan,.person,.cs-aside,.form,.channels a{border:1.5px solid var(--line);box-shadow:var(--s1)}
.wcard:hover{box-shadow:var(--s3);border-color:rgba(108,63,255,.22)}
.plan--featured{background:var(--white);color:var(--ink);border-color:rgba(108,63,255,.28);box-shadow:0 8px 44px rgba(108,63,255,.15);overflow:hidden}
.plan--featured::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--v),var(--c))}
.plan--featured .muted{color:var(--slate)}
.plan--featured li svg{color:var(--paid)}
.plan__flag{position:static;align-self:flex-start;margin-bottom:12px;background:var(--grad);color:#fff;letter-spacing:.04em}
.price{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.price small,.price s{-webkit-text-fill-color:var(--slate)}
.steps{border-top-color:var(--line)}
.steps li::before{border-color:rgba(108,63,255,.35);color:var(--v)}
.steps li:first-child::before{background:var(--grad);color:#fff;border-color:transparent}
.faq{border-top:0;display:grid;gap:8px}
.faq details{background:var(--white);border:1.5px solid var(--line);border-radius:14px;padding:0 20px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:rgba(108,63,255,.22);box-shadow:var(--s1)}
.faq summary{font-family:var(--serif);font-size:1.02rem}
.faq details[open] summary{color:var(--v)}
.faq summary::after{border-color:var(--v)}
.person h3{font-weight:800}
.person .role{color:var(--v)}
.offer{background:linear-gradient(120deg,#F3EEFF,#EAF6FD);border-color:#DED5FB}
.offer svg{color:var(--v)}
.compare thead th{background:var(--ink)}
.notice{background:#F0EBFF;color:#3B2A8C}
.next-link{background:linear-gradient(135deg,#0C0820,#22125A)}
.chip{background:rgba(12,8,32,.85);border-color:rgba(180,160,255,.45)}
.channels svg{color:var(--v)}

/* CTA band: the original gradient card */
.cta-band{background:transparent;padding-block:clamp(40px,6vw,72px)}
.cta-band .container{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--v) 0%,#7C3AED 40%,var(--c2) 100%);border-radius:24px;padding:clamp(36px,5vw,52px) clamp(22px,4vw,44px);max-width:calc(var(--max) - 2*var(--gutter));width:calc(100% - 2*var(--gutter))}
.cta-band .container::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}
.cta-band .container>*{position:relative}
.cta-band p{color:rgba(255,255,255,.82)}
.cta-band .btn--gold{background:#fff;color:var(--v);box-shadow:0 10px 30px rgba(12,8,32,.25)}
.cta-band .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.cta-band .btn--ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}

/* Footer brand */
.brand span b{background:linear-gradient(90deg,#A78BFA,var(--c));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Mobile bar, like the original */
@media (max-width:760px){
  .mobile-bar{background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(108,63,255,.08)}
}

/* ═════════════ Original homepage hero ═════════════ */
#hero{position:relative;height:100vh;min-height:640px;max-height:980px;overflow:hidden;background:#0C0820;color:#F0EDF8}
#hero .slides{position:absolute;inset:0}
#hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
#hero .slide.active{opacity:1}
.sl1{background-image:url('https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=1600&q=80')}
.sl2{background-image:url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=1600&q=80')}
.sl3{background-image:url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1600&q=80')}
.hero-ov{position:absolute;inset:0;background:linear-gradient(110deg,rgba(12,8,32,.93) 0%,rgba(12,8,32,.75) 50%,rgba(12,8,32,.3) 100%)}
.hero-ov::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,8,32,.82) 0%,transparent 55%)}
.hero-prog{position:absolute;bottom:0;left:0;height:3px;width:0;z-index:10;background:linear-gradient(90deg,var(--v),var(--c));transition:width .1s linear}
.hero-dots{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.6rem;z-index:10}
.hdot{width:22px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.hdot::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:transform .3s,background-color .3s}
.hdot.active::before{background:var(--c);transform:scale(1.5)}
.slide-cap{position:absolute;bottom:4rem;right:5%;z-index:6;text-align:right}
.sc-num{font-size:.62rem;letter-spacing:4px;text-transform:uppercase;color:rgba(14,165,233,.85);margin-bottom:.4rem}
.sc-lbl{font-family:var(--serif);font-style:italic;font-size:clamp(.8rem,1.5vw,.98rem);color:rgba(255,255,255,.4)}
.slide-wm{position:absolute;right:3%;bottom:3%;z-index:5;font-family:var(--serif);font-size:clamp(6rem,13vw,13rem);font-weight:800;font-style:italic;line-height:1;color:rgba(108,63,255,.07);pointer-events:none}
.hero-content{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;padding:0 5%;max-width:840px}
.heye{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-bottom:20px;padding:6px 15px;border-radius:999px;border:1.5px solid rgba(108,63,255,.38);background:rgba(108,63,255,.14);color:rgba(200,185,255,.95);font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.hdotg{width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 8px var(--em);flex-shrink:0}
h1.hero-h{font-family:var(--serif);font-size:clamp(2.6rem,6.5vw,5.8rem);line-height:1;font-weight:800;letter-spacing:-.025em;margin-bottom:1.2rem;color:#F0EDF8}
.hero-h .l1,.hero-h .l2,.hero-h .l3{display:block}
.hero-h .l2{min-height:1.1em;background:linear-gradient(90deg,var(--v),var(--c));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-h .tcursor{display:inline-block;width:3px;height:.8em;margin-left:3px;vertical-align:middle;background:var(--c);animation:tc 1s infinite}
.hero-h .l3{color:rgba(240,237,248,.16);font-style:italic}
.hero-sub{font-size:1rem;font-weight:300;color:rgba(240,237,248,.7);max-width:460px;line-height:1.85;margin-bottom:1.6rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.btn-primary,.btn-sec{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 1.9rem;border-radius:14px;font-family:var(--sans);font-weight:700;font-size:.9rem;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s,background-color .25s,border-color .25s}
.btn-primary{position:relative;overflow:hidden;border:0;background:var(--grad);color:#fff;box-shadow:0 8px 28px rgba(108,63,255,.38)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);background-size:600px 100%;animation:sh 4s infinite}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(108,63,255,.5)}
.btn-sec{background:transparent;border:2px solid rgba(255,255,255,.28);color:rgba(240,237,248,.9);font-weight:600}
.btn-sec:hover{border-color:rgba(108,63,255,.65);color:#fff;background:rgba(108,63,255,.18)}
.btn-primary svg,.btn-sec svg{width:18px;height:18px}
.hero-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.pill{padding:4px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:.72rem;font-weight:600}
.scroll-i{position:absolute;bottom:1.8rem;left:5%;z-index:10;display:flex;align-items:center;gap:.8rem;font-size:.58rem;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.3)}
.scroll-i::before{content:"";width:1px;height:34px;background:linear-gradient(to bottom,var(--v),transparent);animation:sp 2s infinite}
.hero-form-wrap{position:absolute;right:5%;bottom:14%;z-index:7;width:340px}
.hero-form{padding:22px;border-radius:18px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.28),0 0 0 1px rgba(108,63,255,.12)}
.hf-title{font-family:var(--serif);font-size:1.1rem;font-weight:800;margin-bottom:4px}
.hf-sub{font-size:.8rem;color:var(--slate);margin-bottom:14px;line-height:1.5}
.hf-sub strong{color:var(--em)}
.hf-input{width:100%;margin-bottom:9px;padding:.7rem .9rem;border-radius:9px;border:1.5px solid var(--line);background:var(--porcelain);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.hf-input:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(108,63,255,.1);background:#fff}
.hf-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;border:0;border-radius:10px;background:linear-gradient(135deg,var(--em),#059669);color:#fff;font-weight:700;font-size:.88rem;cursor:pointer;box-shadow:0 6px 20px rgba(16,185,129,.3);transition:transform .25s,box-shadow .25s}
.hf-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(16,185,129,.42)}
.hero-form .form-error{font-size:.8rem;margin:0 0 8px}
.hf-note{margin-top:8px;font-size:.7rem;color:var(--slate);text-align:center}
.hf-done{padding:12px 0;text-align:center}
.hf-done .tick{font-size:2rem;margin-bottom:6px}
.hf-done p{margin:0;color:var(--em);font-weight:700}
.hf-done span{display:block;margin-top:3px;font-size:.8rem;color:var(--slate)}
/* entrance: once, on load */
.js .heye,.js h1.hero-h,.js .hero-sub,.js .hero-btns,.js .hero-pills,.js .hero-form-wrap{opacity:0;animation:up .75s var(--ease) forwards}
.js .heye{animation-delay:.15s}.js h1.hero-h{animation-delay:.3s}.js .hero-sub{animation-delay:.45s}.js .hero-btns{animation-delay:.6s}.js .hero-pills{animation-delay:.75s}.js .hero-form-wrap{animation-delay:.9s}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes tc{0%,100%{opacity:1}50%{opacity:0}}
@keyframes sp{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sh{0%{background-position:-600px 0}100%{background-position:600px 0}}
@media (max-width:1024px){.hero-form-wrap{display:none}}
@media (max-width:700px){
  #hero{min-height:620px;height:92vh}
  h1.hero-h{font-size:clamp(2.1rem,9vw,3.1rem)}
  .hero-content{padding:0 5% 40px}
  .hero-btns{flex-direction:column;align-items:flex-start;gap:.7rem}
  .slide-cap,.scroll-i{display:none}
}
@media (max-width:380px){h1.hero-h{font-size:2rem}}
@media (prefers-reduced-motion:reduce){.js .heye,.js h1.hero-h,.js .hero-sub,.js .hero-btns,.js .hero-pills,.js .hero-form-wrap{opacity:1}}
.hero-content{max-width:920px}
h1.hero-h{font-size:clamp(2.6rem,6vw,5.4rem)}
.brand--full img{height:64px}
@media (max-width:900px){.brand--full img{height:52px}}
.price{transform:none}
.float-receipt strong{white-space:normal;line-height:1.2}

/* Background photos behind page heroes and dark sections */
.bg-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-photo::before{content:"";position:absolute;inset:-5%;background:var(--bg) center/cover no-repeat;transform-origin:60% 40%;animation:kenburns 26s ease-in-out infinite alternate}
.bg-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(12,8,32,.95) 0%,rgba(12,8,32,.84) 45%,rgba(26,10,64,.6) 100%),radial-gradient(700px 400px at 90% 0%,rgba(108,63,255,.35),transparent 60%),linear-gradient(to top,rgba(12,8,32,.7),transparent 50%)}
.section--dark .bg-photo::after{background:linear-gradient(110deg,rgba(12,8,32,.96) 0%,rgba(12,8,32,.9) 50%,rgba(26,10,64,.78) 100%)}
.hero>.container,.section--dark>.container{position:relative;z-index:2}
.section--dark::before{z-index:1}
.hero::after{z-index:2}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1%)}}
@media (max-width:700px){.bg-photo::after{background:linear-gradient(180deg,rgba(12,8,32,.9),rgba(12,8,32,.88) 60%,rgba(26,10,64,.85))}}

/* Recent payouts card */
.payouts{margin-top:26px;padding:20px;border-radius:20px;background:var(--white);border:1.5px solid var(--line);box-shadow:var(--s2);color:var(--ink)}
.payouts__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.payouts__head small{display:block;color:var(--slate);font-size:.85rem}
.payouts__total{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(2.2rem,4vw,2.8rem);line-height:1.1;background:linear-gradient(135deg,#0E9F6E,#10B981);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.payouts__badge{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 10px;border-radius:999px;background:rgba(16,185,129,.1);color:#047857;font-size:.76rem;font-weight:700}
.payouts__badge i{width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 0 4px rgba(16,185,129,.18);animation:sp 1.8s infinite}
.payouts__list{list-style:none;display:grid;gap:8px;margin:14px 0 10px}
.payouts__list button{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--porcelain);text-align:left;cursor:zoom-in;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.payouts__list button:hover{transform:translateY(-2px);border-color:rgba(16,185,129,.4);box-shadow:var(--s1)}
.po-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(16,185,129,.12);color:#059669}
.po-ico svg{width:18px;height:18px}
.po-main b{display:block;font-size:.95rem}
.po-main small{display:block;color:var(--slate);font-size:.8rem;margin-top:2px}
.po-amt{font-weight:800;color:#059669;font-size:1.05rem;white-space:nowrap}
.payouts__foot{margin:0;color:var(--slate);font-size:.82rem}
.payouts__list li{opacity:1}
.js .payouts:not(.is-in) .payouts__list li{opacity:0;transform:translateX(18px)}
.js .payouts .payouts__list li{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .payouts.is-in .payouts__list li:nth-child(2){transition-delay:.18s}
@media (max-width:480px){.payouts__head{flex-direction:column}.po-main small{font-size:.76rem}}

/* ── Chat assistant ── */
.chat-launch{position:fixed;right:22px;bottom:94px;z-index:60;display:flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 14px 34px -10px rgba(108,63,255,.7);transition:transform .25s var(--ease),box-shadow .25s}
.chat-launch:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(108,63,255,.85)}
.chat-launch svg{width:22px;height:22px}
.chat-launch::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(108,63,255,.45);animation:chatPing 2.4s ease-out infinite;pointer-events:none}
.chat-launch.is-open::after{display:none}
@keyframes chatPing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.chat-nudge{position:fixed;right:22px;bottom:156px;z-index:60;max-width:240px;padding:12px 14px;border:1px solid var(--line);border-radius:16px 16px 4px 16px;background:#fff;color:var(--ink);font-size:.88rem;font-weight:600;text-align:left;box-shadow:var(--s2);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.chat-nudge.show{opacity:1;transform:none;pointer-events:auto}
.chat-panel{position:fixed;right:22px;bottom:94px;z-index:85;display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 30px 80px -20px rgba(12,8,32,.55),0 0 0 1px rgba(108,63,255,.12);overflow:hidden;animation:pop .35s var(--ease)}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#0C0820,#22125A);color:#F0EDF8}
.chat-head strong{display:block;font-size:1rem}
.chat-head small{display:flex;align-items:center;gap:6px;color:#ABA5C6;font-size:.78rem}
.chat-head small i{width:7px;height:7px;border-radius:50%;background:#3BE38B}
.chat-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--grad);font-family:var(--serif);font-weight:800;font-size:.9rem}
.chat-close{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:1.3rem;cursor:pointer}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--porcelain)}
.chat-msg{display:flex;flex-direction:column;gap:6px;max-width:88%;animation:msgIn .35s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-msg--you{align-self:flex-end;align-items:flex-end}
.chat-bubble{padding:10px 13px;border-radius:16px 16px 16px 4px;background:#fff;border:1px solid var(--line);font-size:.92rem;line-height:1.5}
.chat-msg--you .chat-bubble{border-radius:16px 16px 4px 16px;background:var(--grad);color:#fff;border:0}
.chat-links,.chat-chips{display:flex;flex-wrap:wrap;gap:6px}
.chat-links a{padding:7px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:.82rem;font-weight:700;text-decoration:none}
.chat-links a[href*="wa.me"]{background:var(--wa)}
.chat-chips button{padding:7px 12px;border-radius:999px;border:1.5px solid rgba(108,63,255,.3);background:#fff;color:var(--v);font-size:.82rem;font-weight:700;cursor:pointer}
.chat-chips button:hover{background:rgba(108,63,255,.07)}
.chat-typing .chat-bubble{display:flex;gap:4px;padding:13px}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:#B4A0FF;animation:dot 1s infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.chat-form input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--porcelain)}
.chat-form input:focus{outline:none;border-color:var(--v);background:#fff}
.chat-form button{width:46px;height:46px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--grad);color:#fff;cursor:pointer}
.chat-form button svg{width:20px;height:20px}
.chat-note{margin:0;padding:0 14px 10px;font-size:.72rem;color:var(--slate);background:#fff;text-align:center}
@media (max-width:760px){
  .chat-launch{right:14px;bottom:calc(78px + env(safe-area-inset-bottom));height:48px;padding:0 14px 0 12px}
  .chat-nudge{right:14px;bottom:calc(136px + env(safe-area-inset-bottom))}
  .chat-panel{right:0;left:0;bottom:0;width:100%;height:min(82vh,640px);border-radius:22px 22px 0 0}
}

/* ── Motion layer ── */
.js .rv{opacity:0;translate:0 26px;transition:opacity .7s var(--ease) var(--rv-d,0ms),translate .7s var(--ease) var(--rv-d,0ms)}
.js .rv.on{opacity:1;translate:0 0}
.bg-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px)}
.blob1{width:560px;height:560px;top:-160px;right:-140px;background:radial-gradient(circle,rgba(108,63,255,.14),transparent 70%);animation:blobA 22s ease-in-out infinite}
.blob2{width:460px;height:460px;bottom:-120px;left:-120px;background:radial-gradient(circle,rgba(14,165,233,.12),transparent 70%);animation:blobB 18s ease-in-out infinite}
.blob3{width:320px;height:320px;top:45%;left:40%;background:radial-gradient(circle,rgba(167,139,250,.1),transparent 70%);animation:blobA 26s ease-in-out infinite reverse}
@keyframes blobA{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes blobB{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,36px)}}
.marq{overflow:hidden;padding:14px 0;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(108,63,255,.05),rgba(14,165,233,.04));position:relative}
.marq__track{display:flex;width:max-content;animation:marq 32s linear infinite}
.marq__track span{display:inline-flex;align-items:center;gap:10px;padding:0 22px;font-weight:700;font-size:.9rem;color:var(--slate);white-space:nowrap}
.marq__track span::before{content:"◆";font-size:.5rem;color:var(--v)}
@keyframes marq{to{transform:translateX(-50%)}}
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(108,63,255,.10),transparent 65%)}
.glow:hover::after{opacity:1}
.plan--featured.glow::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(14,165,233,.12),transparent 65%)}
.btn--gold{position:relative;overflow:hidden}
.btn--gold::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);background-size:400px 100%;background-repeat:no-repeat;animation:sh 3.6s infinite;pointer-events:none}
.wcard__frame .mock,.wcard__frame img.shot{transition:transform .8s var(--ease)}
.wcard:hover .wcard__frame .mock,.wcard:hover .wcard__frame img.shot{transform:scale(1.04)}
.steps li::before{transition:transform .4s var(--ease),box-shadow .4s}
.steps li:hover::before{transform:scale(1.12) rotate(-6deg);box-shadow:0 10px 24px -8px rgba(108,63,255,.6)}
@media (max-width:760px){.blob{display:none}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;translate:none}.marq__track{animation:none}}
.team--solo{grid-template-columns:minmax(0,1fr);max-width:640px}

/* ── Smoothness pass ── */
/* compositor-only progress bar */
.hero-prog{width:100%;transform:scaleX(0);transform-origin:left;transition:transform .1s linear;will-change:transform}
/* drop expensive live blurs while scrolling */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(249,247,255,.985)}
@media (max-width:760px){.mobile-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}}
.blob{filter:none;will-change:transform}
.blob1{background:radial-gradient(circle,rgba(108,63,255,.13),rgba(108,63,255,0) 68%)}
.blob2{background:radial-gradient(circle,rgba(14,165,233,.11),rgba(14,165,233,0) 68%)}
.blob3{background:radial-gradient(circle,rgba(167,139,250,.09),rgba(167,139,250,0) 68%)}
.bg-photo::before{will-change:transform;backface-visibility:hidden}
@media (max-width:760px){.bg-photo::before{background-image:var(--bg-sm,var(--bg));animation-duration:34s}}
@media (max-width:760px){
  .sl1{background-image:url('https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=900&q=70&auto=format')}
  .sl2{background-image:url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=900&q=70&auto=format')}
  .sl3{background-image:url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=900&q=70&auto=format')}
}
#hero .slide{will-change:opacity}
/* smooth page-to-page transitions (Chrome, Edge, Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
/* Lenis smooth scrolling (desktop only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ── Chatbot v2: Webby ── */
.bot-face{width:100%;height:100%;display:block;overflow:visible}
.bot-eyes{transform-origin:20px 20px;animation:blink 4.2s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.bot-ant{animation:antGlow 1.6s ease-in-out infinite}
@keyframes antGlow{0%,100%{opacity:1}50%{opacity:.35}}
.chat-launch{padding:0 18px 0 8px;gap:10px;height:56px}
.chat-launch__face{width:40px;height:40px;display:block;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chat-launch.is-open .chat-launch__face{animation:none}
.chat-nudge{border-radius:16px 16px 4px 16px;font-size:.9rem;box-shadow:0 18px 40px -16px rgba(108,63,255,.55);border-color:rgba(108,63,255,.25)}
.chat-nudge::after{content:"Tap to ask";display:block;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--v)}
.chat-avatar{background:none;width:42px;height:42px}
.chat-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;font-size:1.3rem;transition:background-color .2s}
.chat-icon:hover{background:rgba(255,255,255,.1)}
.chat-icon svg{width:17px;height:17px}
.chat-restart{margin-left:auto}
.chat-close{margin-left:6px}
.chat-head small{color:#C9C2E6}
.chat-head small i{animation:sp 1.8s infinite}
.chat-log{background:radial-gradient(400px 300px at 100% 0%,rgba(108,63,255,.06),transparent 60%),var(--porcelain);scroll-behavior:smooth}
.chat-msg{max-width:92%}
.chat-msg--bot{flex-direction:row;align-items:flex-end;gap:8px}
.chat-msg__av{flex:none;width:28px;height:28px}
.chat-col{display:flex;flex-direction:column;gap:7px;min-width:0}
.chat-msg--you .chat-col{align-items:flex-end}
.chat-typing{flex-direction:row;align-items:flex-end;gap:8px}
.chat-chips button{transition:transform .2s var(--ease),background-color .2s,border-color .2s}
.chat-chips button:hover{transform:translateY(-1px);border-color:var(--v)}
.chat-chips button,.chat-links a{animation:chipIn .35s var(--ease) both}
.chat-chips button:nth-child(2),.chat-links a:nth-child(2){animation-delay:.05s}
.chat-chips button:nth-child(3){animation-delay:.1s}.chat-chips button:nth-child(4){animation-delay:.15s}.chat-chips button:nth-child(n+5){animation-delay:.2s}
@keyframes chipIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.chat-card{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px -18px rgba(12,8,32,.45);padding:10px;animation:msgIn .4s var(--ease)}
.cc-plan{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:6px;border:1px solid var(--line);border-radius:12px;background:var(--porcelain);text-align:left;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.cc-plan:hover{transform:translateX(3px);border-color:var(--v)}
.cc-plan b{display:block;font-size:.9rem}
.cc-plan small{display:block;color:var(--slate);font-size:.75rem}
.cc-plan strong{font-family:var(--serif);font-size:1.15rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.cc-plan.is-pop{border-color:rgba(108,63,255,.35);background:linear-gradient(135deg,rgba(108,63,255,.07),rgba(14,165,233,.05))}
.cc-note{margin:4px 2px 0;font-size:.76rem;color:var(--slate)}
.cc-shot{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:16/10}
.cc-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cc-shot:hover img{transform:scale(1.04)}
.cc-badge{position:absolute;left:8px;bottom:8px;padding:5px 10px;border-radius:999px;background:#fff;color:#047857;font-weight:800;font-size:.78rem;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.cc-meta{padding:8px 2px}
.cc-meta b{display:block;font-size:.92rem}
.cc-meta small{display:block;color:var(--slate);font-size:.78rem;line-height:1.4}
.chat-card .chat-links{padding:0 2px 2px}
.cc-q-head{padding:6px 4px 10px;border-bottom:1px dashed var(--line)}
.cc-q-head small{display:block;color:var(--slate);font-size:.78rem}
.cc-total{display:block;font-family:var(--serif);font-weight:800;font-size:1.9rem;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cc-q-list{list-style:none;margin:8px 0 4px;padding:0 4px;display:grid;gap:6px;font-size:.84rem}
.cc-q-list li{display:flex;justify-content:space-between;gap:12px}
.cc-q-list span{color:var(--slate)}
.cc-q-list b{text-align:right}
@media (max-width:760px){.chat-launch{height:52px}.chat-launch__face{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.bot-eyes,.bot-ant,.chat-launch__face{animation:none}}
.chat-launch .bot-face,.chat-avatar .bot-face,.chat-msg__av .bot-face{width:100%;height:100%}
.chat-head small{white-space:nowrap}
.chat-launch__face{background:#fff;border-radius:50%;padding:3px;box-shadow:0 4px 12px -4px rgba(12,8,32,.4)}

/* ── Realistic devices ── */
.scene{transform:rotateX(calc(5deg + var(--rx))) rotateY(calc(-13deg + var(--ry)))}
@media (max-width:900px){.scene{transform:rotateX(calc(4deg + var(--rx))) rotateY(calc(-9deg + var(--ry)))}}
.laptop{left:6%;top:6%;width:76%}
.lid{padding:2.3% 2% 2.9%;border-radius:2.6% / 4.2%;background:#0b0c10;box-shadow:0 0 0 1.5px #b6bcc7,0 0 0 2.5px #8d939e,0 30px 50px -28px rgba(0,0,0,.65)}
.lid::before{content:none}
.lid::after{background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 38%)}
.lid .cam{position:absolute;top:.9%;left:50%;width:.9%;aspect-ratio:1;margin-left:-.45%;border-radius:50%;background:radial-gradient(circle at 40% 40%,#3a4a63,#0a0b0e 70%);z-index:1}
.lid .screen{border-radius:.6% / 1%}
.laptop .base{display:block;width:118%;height:auto;margin:-.15% 0 0 -9%;aspect-ratio:1200/262;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.deck{display:none}
.stage-shadow{left:2%;right:6%;bottom:6%;height:10%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(8px)}
.phone{width:22%;padding:1.9% 1.3%;border-radius:15% / 7%;background:#0b0c10;box-shadow:0 0 0 1.5px #c3c8d1,0 0 0 3px #7f8591,0 34px 50px -22px rgba(0,0,0,.7);transform:translateZ(70px) rotateY(-3deg)}
.phone .screen{border-radius:12% / 5.6%}
.phone::before{top:2.9%;width:30%;height:3.2%;margin-left:-15%;border-radius:999px;background:#000}
.phone .btn-side{position:absolute;right:-2.6%;top:22%;width:1.6%;height:12%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#7f8591,#c3c8d1)}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%)}
.chip{box-shadow:0 10px 24px -12px rgba(0,0,0,.6);transform:translateZ(80px)}
.chip i{box-shadow:none}
.float-receipt{box-shadow:0 22px 40px -18px rgba(0,0,0,.6);transform:translateZ(130px) rotateZ(-3deg)}
@media (max-width:900px){.float-receipt{transform:translateZ(70px) rotateZ(-3deg)}}
.js .stage:not(.is-ready) .float-receipt{transform:translateZ(260px) translateY(20%) rotateZ(-10deg)}
.stage-shadow{transform:translateZ(-40px);bottom:9%;left:4%;right:8%;height:8%}
.price small{-webkit-text-fill-color:var(--v);font-family:var(--serif);font-size:1.6rem;font-weight:800;margin-left:-6px}
/* floating WhatsApp removed: chat launcher takes the corner */
.wa-float{display:none}
@media (min-width:761px){
  .chat-launch{bottom:22px}
  .chat-nudge{bottom:90px}
  .chat-panel{bottom:90px}
}
/* review form */
.stars-field{border:0;margin:0 0 16px;padding:0}
.stars-field legend{font-weight:700;font-size:.92rem;margin-bottom:6px}
.stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label{font-size:2.2rem;line-height:1;color:#D9D3EE;cursor:pointer;transition:color .15s,transform .15s}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:#F59E0B}
.stars label:hover{transform:scale(1.12)}
.stars input:focus-visible+label{outline:3px solid var(--v);outline-offset:2px;border-radius:6px}
.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:.92rem;color:var(--slate)}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--v)}