/* BeautyScale approved desktop + mobile styles. Consolidated 2026-09-12. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0c0d0b;--bg2:#121311;--card:#181a17;--card2:#1f211e;--line:#2c2f2a;
  --pink:#c4f000;--pink2:#c7ed31;--gold:#E0B84A;--green:#3AC98F;--blue:#6C9BFF;--purple:#A97DF5;
  --t1:#FFFFFF;--t2:#bbbeba;--t3:#7a7f77;
  --serif:'Playfair Display',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);background-image:radial-gradient(1200px 620px at 78% -8%,rgba(196,240,0,.10),transparent 60%),radial-gradient(900px 520px at 8% 22%,rgba(169,125,245,.07),transparent 62%);background-attachment:fixed;color:var(--t1);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);background-size:34px 34px;pointer-events:none;z-index:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.w{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:1}
section{padding:110px 0;position:relative}
#reviews{padding-bottom:76px}#faq{padding-top:84px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:2.6px;color:var(--pink);text-transform:uppercase;margin-bottom:22px}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--pink);display:block}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-1.5px}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.8vw,48px);line-height:1.08;letter-spacing:-1px}
h3{font-family:var(--sans);font-weight:700;font-size:17px}
.lead{color:var(--t2);font-size:17px;max-width:640px;line-height:1.65}
em{font-style:normal;color:var(--pink2)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}

nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;background:rgba(9,10,8,.72);backdrop-filter:blur(22px);border-bottom:1px solid transparent;transition:.35s}
nav.s{border-bottom-color:var(--line);padding:11px 0}
nav .w{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:21px;width:auto}
.brand span{font-family:var(--serif);font-style:italic;font-weight:700;font-size:13px;color:var(--pink);letter-spacing:.4px}
.nv{display:flex;align-items:center;gap:30px}
.nv a{font-size:13.5px;color:var(--t2);font-weight:500;transition:.25s}
.nv a:hover{color:#fff}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:100px;
  font-weight:600;font-size:13.5px;letter-spacing:.1px;cursor:pointer;border:none;font-family:var(--sans);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),background .35s;
  overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.btn::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.btn:hover::after{transform:translateX(130%)}
.btn-p{padding:12px 24px;color:#fff;
  background:linear-gradient(135deg,#c4f000 0%,#c4f000 55%,#c4f000 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 18px -6px rgba(196,240,0,.55)}
.btn-p:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 26px -8px rgba(196,240,0,.7)}
.btn-p:active{transform:translateY(0)}
.btn-g{padding:12px 24px;color:#fff;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 6px 20px -10px rgba(0,0,0,.7)}
.btn-g:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.btn-lg{padding:14px 30px;font-size:14.5px;letter-spacing:.2px}

.hero{padding:190px 0 90px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:100px;background:rgba(196,240,0,.10);border:1px solid rgba(196,240,0,.32);font-size:12.5px;font-weight:600;color:var(--pink2);margin-bottom:30px;letter-spacing:.2px}
.hero h1{margin-bottom:26px}
.hero .lead{margin:0 auto 38px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.hero-note{font-size:13px;color:var(--t3)}
.hero{overflow:hidden;isolation:isolate}
.hero .w{z-index:3}
.hero-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-ambient::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 50% 35%,#000 0%,transparent 68%);mask-image:radial-gradient(circle at 50% 35%,#000 0%,transparent 68%);opacity:.48}
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px);will-change:transform}
.orb-a{width:440px;height:440px;left:calc(50% - 220px);top:85px;background:radial-gradient(circle,rgba(196,240,0,.20) 0%,rgba(196,240,0,.065) 38%,transparent 72%)}
.orb-b{width:300px;height:300px;left:14%;top:210px;background:radial-gradient(circle,rgba(108,155,255,.10),transparent 68%)}
.hero-ring{position:absolute;width:660px;height:660px;left:50%;top:40px;transform:translateX(-50%);border:1px solid rgba(196,240,0,.12);border-radius:50%;box-shadow:0 0 100px rgba(196,240,0,.07) inset;opacity:.7}
.hero-beam{position:absolute;width:1px;height:420px;left:50%;top:0;background:linear-gradient(transparent,rgba(196,240,0,.65),transparent);box-shadow:0 0 30px rgba(196,240,0,.8);opacity:.32}
.hero-line{display:block;overflow:hidden;padding:.03em .08em .08em;margin:-.03em -.08em -.08em}
.hero-line>span{display:block;will-change:transform}
.hero .lead{position:relative}
.hero .lead::before{content:'';position:absolute;width:42px;height:1px;left:50%;top:-19px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--pink),transparent);opacity:.7}
.hero-cta .btn{min-width:166px;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 34px -12px rgba(196,240,0,.85),0 0 0 1px rgba(196,240,0,.15);will-change:transform}
.hero-cta .btn::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.35),transparent 46%);transform:translateX(-130%);animation:heroShine 4.8s ease-in-out 2.2s infinite;z-index:-1}
@keyframes heroShine{0%,72%,100%{transform:translateX(-130%)}88%{transform:translateX(130%)}}
.hero .tprow{position:relative}
.hero .tprow::before{content:'';position:absolute;inset:-10px -16px;border:1px solid rgba(255,255,255,.055);border-radius:100px;background:rgba(255,255,255,.018);z-index:-1;backdrop-filter:blur(8px)}
.hero .avs span{box-shadow:0 5px 16px rgba(0,0,0,.38)}
.trust{display:flex;gap:52px;justify-content:center;flex-wrap:wrap;margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.trust-i .n{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--pink2);line-height:1}
.trust-i .l{font-size:12px;color:var(--t3);letter-spacing:1.4px;text-transform:uppercase;margin-top:9px;font-weight:600}

.frame{border-radius:15px;overflow:hidden;border:1px solid #323630;background:#171916;box-shadow:0 50px 110px rgba(0,0,0,.72);position:relative}
.frame-bar{display:flex;align-items:center;gap:9px;padding:10px 15px;background:#1d201c;border-bottom:1px solid #292d27}
.frame-bar i{width:9px;height:9px;border-radius:50%;display:block}
.frame-bar i:nth-child(1){background:#c0f000}.frame-bar i:nth-child(2){background:#FEBC2E}.frame-bar i:nth-child(3){background:#28C840}
.frame-url{flex:1;text-align:center;font-size:11px;color:var(--t3);background:#111210;border-radius:100px;padding:5px 14px;margin:0 10px}
.frame video,.frame img{width:100%;display:block;background:#0c0d0c}
.hero-frame{max-width:1000px;margin:70px auto 0;position:relative}
.hero-frame .glow{width:70%;height:60%;left:15%;top:20%;background:rgba(196,240,0,.17)}

.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-t{display:flex;gap:58px;width:max-content;animation:mv 46s linear infinite;align-items:center}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mq-i{font-size:15px;font-weight:600;color:#929690;white-space:nowrap;letter-spacing:2.2px;transition:.3s;opacity:.72}
.mq-i:hover{color:#fff;opacity:1}
.mq-lbl{text-align:center;font-size:11.5px;letter-spacing:2.6px;color:var(--t3);text-transform:uppercase;margin-bottom:34px;font-weight:600}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:30px;transition:.35s}
.card:hover{border-color:#383d36;transform:translateY(-3px)}
.card .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:18px}
.card h3{margin-bottom:9px}
.card p{color:var(--t2);font-size:14.2px;line-height:1.62}

.tour-sticky{position:sticky;top:96px}
.tour-steps{display:flex;flex-direction:column;gap:15px}
.tstep{padding:22px 24px;border-radius:13px;border:1px solid transparent;cursor:pointer;transition:.4s;opacity:.42}
.tstep.on{background:var(--card);border-color:var(--line);opacity:1}
.tstep .k{font-size:11px;letter-spacing:2px;color:var(--pink);font-weight:700;text-transform:uppercase;margin-bottom:7px}
.tstep h3{margin-bottom:6px;font-size:18px}
.tstep p{color:var(--t2);font-size:14px;max-height:0;overflow:hidden;transition:.45s;opacity:0}
.tstep.on p{max-height:100px;opacity:1;margin-top:4px}

.stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:28px}
.stat .n{font-family:var(--serif);font-weight:700;font-size:42px;color:var(--pink2);line-height:1}
.stat .l{font-size:13.5px;color:var(--t2);margin-top:8px}

.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.wall .lg{background:var(--card);border:1px solid var(--line);border-radius:12px;height:82px;display:flex;align-items:center;justify-content:center;transition:.35s;padding:14px}
.wall .lg:hover{border-color:#3e433c;background:var(--card2);transform:translateY(-2px)}
.wall .lg img{width:34px;height:34px;object-fit:contain;filter:grayscale(1) brightness(1.7);opacity:.62;transition:.35s}
.wall .lg:hover img{filter:none;opacity:1}

.excl{background:linear-gradient(150deg,#191c18,#0c0d0b);border:1px solid rgba(196,240,0,.28);border-radius:22px;padding:60px;text-align:center;position:relative;overflow:hidden}
.excl .glow{width:420px;height:420px;background:rgba(196,240,0,.14);top:-160px;left:50%;transform:translateX(-50%)}
.excl-crit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:38px 0 34px;text-align:left}
.ec{display:block;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:16px;padding:20px 20px 22px;font-size:13.5px;line-height:1.55;color:var(--t2);
  opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
.ec .n{display:block;margin-bottom:13px;font:750 11.5px var(--sans);letter-spacing:.14em;color:var(--pink)}
.ec .x b{display:block;margin-bottom:7px;font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:#fff}
.excl.in .ec{opacity:1;transform:none}
.excl.in .ec:nth-child(2){transition-delay:.13s}
.excl.in .ec:nth-child(3){transition-delay:.26s}
.ec:hover{border-color:rgba(196,240,0,.5);background:rgba(196,240,0,.08);transform:translateY(-3px)}
.ec .n{width:26px;height:26px;border-radius:50%;background:rgba(196,240,0,.16);border:1px solid rgba(196,240,0,.4);
  display:grid;place-items:center;font-family:var(--sans);font-weight:750;font-size:11px;letter-spacing:.01em;color:var(--pink);flex-shrink:0}
@media(max-width:700px){.ec{font-size:12.5px;padding:10px 16px 10px 11px}}

.pr{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:32px;display:flex;flex-direction:column;position:relative;transition:.35s}
.pr:hover{transform:translateY(-4px);border-color:#383d36}
.pr.best{border-color:var(--pink);background:linear-gradient(165deg,#21241f,#171816)}
.pr-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:1.4px;padding:5px 15px;border-radius:100px}
.pr .nm{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:5px}
.pr .amt{font-family:var(--serif);font-size:42px;font-weight:700;color:var(--pink2);line-height:1;margin:14px 0 3px}
.pr .amt span{font-family:var(--sans);font-size:14px;color:var(--t3);font-weight:500}
.pr .yr{font-size:12.5px;color:var(--gold);margin-bottom:20px}
.pr ul{list-style:none;margin-bottom:26px;flex:1}
.pr li{font-size:13.8px;color:var(--t2);padding:7px 0;display:flex;gap:10px;align-items:flex-start}
.pr li b{color:var(--pink2);flex-shrink:0}
.pr .btn{width:100%;justify-content:center}



/* ---- brand marquee (white logos on black) ---- */
.bmq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:6px 0}
.bmq-t{display:flex;align-items:center;gap:64px;width:max-content;animation:bmv 62s linear infinite}
.bmq:hover .bmq-t{animation-play-state:paused}
@keyframes bmv{to{transform:translateX(-50%)}}
.bmq-i{flex-shrink:0;opacity:.72;transition:opacity .35s,transform .35s;display:flex;align-items:center;justify-content:center;min-width:110px}
.bmq-i:hover{opacity:1;transform:translateY(-3px)}
.bmq-i .im{height:44px;display:flex;align-items:center;justify-content:center}
.bmq-i.txt .im{height:44px}
.bmq-i:hover{opacity:1;transform:scale(1.06)}
.bmq-i .im img{height:44px;max-height:44px;width:auto;max-width:190px;object-fit:contain;display:block}
.bmq-i .im img.inv{filter:brightness(0) invert(1)}
.bmq-i .wm{font-family:var(--serif);font-weight:700;font-size:25px;color:#fff;letter-spacing:.8px;white-space:nowrap;line-height:1}
.bmq-i .bn{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--t3);white-space:nowrap;font-weight:600}
/* ---- buyer cards v2 ---- */
/* --- buyer carousel --- */
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:300px}
.bc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;align-items:center;gap:20px;
  opacity:0;transform:translateY(14px) scale(.985);position:relative;overflow:hidden;
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),border-color .25s,box-shadow .25s,background .25s}
.bc::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px 120px at 12% 0%,rgba(196,240,0,.16),transparent 70%)}
.bc:hover::after{opacity:1}
.bc.show{opacity:1;transform:none}
.bc.out{opacity:0;transform:translateY(-12px) scale(.985)}
.bc:hover{border-color:rgba(196,240,0,.55);background:var(--card2);box-shadow:0 14px 40px -18px rgba(196,240,0,.6);transform:translateY(-3px)}
.bc .lgw{width:104px;height:70px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bc .lgw img{max-width:104px;max-height:70px;width:auto;height:auto;object-fit:contain;opacity:1;transition:transform .3s}
.bc .lgw img[src$='_official.svg']{filter:brightness(0) invert(1)}
.bc .lgw img[alt="Harrods"]{max-width:94px;max-height:58px}
.bc .lgw img[alt="El Corte Ingles"]{max-width:82px;max-height:64px}
.bc .lgw img[alt="KaDeWe"]{max-width:106px;max-height:48px}
.bc .lgw img[alt="Watsons"]{max-width:122px;max-height:52px;filter:none}
.bc .lgw img[alt="Sephora"]{max-width:110px;max-height:36px}
.bc .lgw img[alt="Breuninger"]{max-width:96px;max-height:58px}
.bc:hover .lgw img{transform:scale(1.04)}
.bc .lgw .mono{font-family:var(--serif);font-weight:700;font-size:22px;color:#fff}
.bc .info{min-width:0;flex:1}
.bc .nm{font-weight:700;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.bc .meta{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.bc .ty{font-size:12px;color:var(--t3)}
.bc .sep{font-size:12px;color:var(--t3);opacity:.6}
.bc .cy{font-size:12px;color:#c4f000;font-weight:600}
.bc .ct{font-size:12.5px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:5px}
.bc .meta .ct b{font-family:var(--sans);font-size:13px;font-weight:750;color:#fff;line-height:1;margin-right:1px;font-variant-numeric:tabular-nums}
.bc .vf{width:15px;height:15px;border-radius:50%;background:#3AC98F;display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;color:#0c0d0b;font-weight:700;flex-shrink:0}
@media(max-width:1000px){.bcards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.bcards{grid-template-columns:1fr}}


/* brand wall (legacy) */
.bwall{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.bw{background:#fff;border-radius:12px;height:86px;display:flex;align-items:center;justify-content:center;padding:14px;transition:.3s;position:relative;overflow:hidden}
.bw:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(196,240,0,.22)}
.bw img{max-width:100%;max-height:46px;object-fit:contain}
.bw .mono{font-family:var(--serif);font-weight:700;font-size:20px;color:#161715;letter-spacing:.5px;text-align:center;line-height:1.1}
.bw .nm{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:8.5px;letter-spacing:.6px;color:#8d918b;text-transform:uppercase;font-weight:600}
/* buyer cards */
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:15px;transition:.3s}
.bc:hover{border-color:#3e433c;transform:translateY(-2px);background:var(--card2)}



.bc .info{min-width:0;flex:1}
.bc .nmrow{display:flex;align-items:center;gap:6px}
.bc .nm{font-weight:700;font-size:14.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc .vf{width:15px;height:15px;border-radius:50%;background:#3AA97B;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#fff;flex-shrink:0;font-weight:700}
.bc .meta{font-size:12.5px;color:var(--t3);margin-top:3px}
.bc .meta b{color:var(--pink2);font-weight:600}
/* use cases */
/* big feature rows */
.fbig{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:110px}
.fbig:nth-child(even) .fb-txt{order:2}
.fbig .kpi{display:flex;gap:38px;margin:26px 0 22px;flex-wrap:wrap}
.fbig .kpi div .v{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--pink2);line-height:1}
.fbig .kpi div .k{font-size:12px;color:var(--t3);margin-top:6px;letter-spacing:.6px}
.fbig ul{list-style:none;margin-top:6px}
.fbig ul li{font-size:14px;color:var(--t2);padding:5px 0;display:flex;gap:9px}
.fbig ul li b{color:var(--pink)}
@media(max-width:900px){.bwall{grid-template-columns:repeat(3,1fr)}.bcards{grid-template-columns:1fr}.fbig{grid-template-columns:1fr;gap:30px;margin-bottom:60px}.fbig:nth-child(even) .fb-txt{order:0}}

/* Trustpilot row (hero) */
.tprow{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12.5px;font-weight:600;color:#fff;flex-wrap:wrap}
.tp-stars{display:flex;gap:2px}
.tp-stars span{display:grid;place-items:center;width:21px;height:21px;border-radius:3px;background:#00B67A;color:#fff;font-size:12px}
.tprow .sc{color:var(--t2);font-weight:500}
.tprow .tpname{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.tprow .tpname i{color:#00B67A;font-style:normal;font-size:14px}
.avrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.avs{display:flex}
.avs span{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);margin-left:-10px;overflow:hidden;display:block}
.avs span img{width:100%;height:100%;object-fit:cover;display:block}
.avs span:first-child{margin-left:0}
.avrow .lbl{font-size:12.5px;color:var(--t3)}

/* --- platform rows: number+text left, video right --- */
.prow{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-bottom:96px;
  opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.prow.in{opacity:1;transform:none}
.prow:last-child{margin-bottom:0}
.prow.rev .ptxt{order:2}
.prow .pno{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--pink);letter-spacing:2px;display:block;margin-bottom:14px}
.prow h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.12;color:#fff;letter-spacing:-.5px;margin-bottom:14px}
.prow p{font-size:15px;color:var(--t2);line-height:1.6;max-width:440px}
.prow .frame{transform:perspective(1300px) rotateY(-3deg);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.prow.rev .frame{transform:perspective(1300px) rotateY(3deg)}
.prow:hover .frame{transform:perspective(1300px) rotateY(0deg) translateY(-4px)}
@media(max-width:900px){.prow{grid-template-columns:1fr;gap:26px;margin-bottom:56px}.prow.rev .ptxt{order:0}.prow .frame,.prow.rev .frame{transform:none}}

@media(max-width:1000px){#compare h2,#results h2{white-space:normal !important}}
@media(max-width:860px){#compare h2,#results h2{font-size:clamp(24px,6vw,34px) !important}}



/* --- v3 typography, aligned on .hero h1 / .platform-title --- */
/* famille + graisse + tracking : a toutes les largeurs */
#database h2,#campaigns h2,#compare h2,#results h2,#invite h2,#reviews h2,#faq h2{font-family:var(--sans);font-weight:720;letter-spacing:-.042em;color:#fff}
/* taille + interligne : desktop seulement, le mobile garde son echelle deja calee */
@media(min-width:901px){
  #database h2,#campaigns h2,#compare h2,#results h2,#invite h2,#reviews h2,#faq h2{font-size:clamp(34px,3.5vw,52px);line-height:1.02}
  #compare h2,#results h2{font-size:clamp(30px,3.1vw,46px)}
}
#database h2 em,#campaigns h2 em,#compare h2 em,#results h2 em,#invite h2 em,#reviews h2 em,#faq h2 em{font-style:normal}
#campaigns .lead{font-size:15px;line-height:1.55;color:#a8aba6;max-width:720px}
#compare .lead,#results .lead,#invite .lead{font-size:15px;line-height:1.55;color:#a8aba6}

/* results : stat cards */
#results .card h3.rstat{font-family:var(--sans);font-weight:750;font-size:38px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
#results .card p{font-size:14px;line-height:1.6}


/* vsl play button */

/* --- multichannel : stats strip + icon tiles --- */

/* ================= Buyer database : segmented data charts =================
   Rampe monochrome derivee du rose BeautyScale (#c4f000) : vif -> rose poudre. */
#database{--sdc1:#c4f000;--sdc2:#92ab2b;--sdc3:#91a446;--sdc4:#b2b5b0;--sdc5:#b9bcb8}
#database::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(680px 460px at 100% 46%,rgba(196,240,0,.085),transparent 66%)}

.sdc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sdc{position:relative;display:flex;flex-direction:column;margin:0;padding:20px 22px 16px;
  border:1px solid rgba(196,240,0,.15);border-radius:16px;background:#141613;overflow:hidden}
.sdc::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.028) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(to right,rgba(196,240,0,.05) 0 1px,transparent 1px 152px)}
.sdc>*{position:relative;z-index:1}
.sdc-head{margin:0 0 30px}
.sdc-title{font-family:var(--sans);font-size:11px;font-weight:750;letter-spacing:2.6px;
  text-transform:uppercase;color:#edeeed}

.sdc-plot{position:relative;margin-top:auto}
.sdc-labs{display:flex;align-items:flex-end;gap:8px}
.sdc-lab{min-width:0;display:flex;flex-direction:column;gap:4px;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.sdc-lt{font-size:11px;line-height:1.3;color:#b5b8b4;white-space:nowrap}
.sdc-lt i{font-style:normal;color:#6c706a}
.sdc-lv{font-family:var(--sans);font-size:12.5px;font-weight:750;line-height:1;color:#fff;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}

.sdc-lead{display:block;width:100%;height:26px}
.sdc-lead path{fill:none;stroke:rgba(255,255,255,.19);stroke-width:1;shape-rendering:crispEdges}
.sdc-lead circle{fill:rgba(255,255,255,.42)}

.sdc-bar{display:flex;height:42px;border-radius:5px;overflow:hidden}
.sdc-bar.reveal{clip-path:inset(0 100% 0 0 round 5px)}
.sdc-bar.reveal.go{clip-path:inset(0 0 0 0 round 5px);transition:clip-path 1s cubic-bezier(.33,1,.68,1)}
/* chaque libelle, trait et graduation apparait quand le balayage l'atteint */
.sdc-plot.reveal .sdc-lab{opacity:0;transform:translateY(7px)}
.sdc-plot.reveal.go .sdc-lab{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.sdc-plot.reveal .sdc-lead path{stroke-dashoffset:var(--len,0)}
.sdc-plot.reveal.go .sdc-lead path{stroke-dashoffset:0;
  transition:stroke-dashoffset .55s cubic-bezier(.33,1,.68,1) calc(var(--d,0ms) + 110ms)}
.sdc-plot.reveal .sdc-lead circle{opacity:0;transform:scale(.2)}
.sdc-plot.reveal.go .sdc-lead circle{opacity:1;transform:none;
  transition:opacity .3s calc(var(--d,0ms) + 480ms),transform .4s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0ms) + 480ms)}
.sdc-plot.reveal .sdc-ticks i{opacity:0}
.sdc-plot.reveal.go .sdc-ticks i{opacity:1;transition:opacity .35s var(--d,0ms)}
.sdc-seg{background:var(--sdc);min-width:2px;
  transition:background .5s cubic-bezier(.33,1,.68,1) var(--sd,0ms)}
.sdc-seg+.sdc-seg{box-shadow:-1px 0 0 rgba(10,11,9,.6);
  transition:background .5s cubic-bezier(.33,1,.68,1) var(--sd,0ms),
             box-shadow .38s ease var(--sd,0ms)}
/* .solid : la bande arrive d'un seul tenant, tous les segments au meme rose et
   sans separateur. En retirant la classe, chacun rejoint sa nuance a son tour :
   c'est la bande qui se separe. */
.sdc-bar.solid .sdc-seg{background:var(--sdc1)}
.sdc-bar.solid .sdc-seg+.sdc-seg{box-shadow:-1px 0 0 rgba(10,11,9,0)}

.sdc-ticks{position:relative;height:6px;margin-top:5px}
.sdc-ticks i{position:absolute;top:0;width:1px;height:6px;background:rgba(255,255,255,.15)}


@media(min-width:901px){#database h2{font-size:clamp(34px,3.4vw,50px);white-space:nowrap}}
/* Deux colonnes uniquement tant que les libelles tiennent sur une ligne.
   Mesure : le jeu le plus large (5 libelles + tirets, 11px, gap 8) reclame
   476px. A 1200px de viewport chaque panneau en offre 503, soit 27px de
   marge ; a 1140px il n'en offrait que 476, soit zero. En dessous on empile
   plutot que de rogner la typo ou de casser les libelles sur deux lignes. */
@media(max-width:1199px){.sdc-grid{grid-template-columns:1fr;gap:14px}}
@media(max-width:900px){
  .sdc-head{margin-bottom:26px}
  .sdc-bar{height:40px}
}
/* Le jeu "point of sale" reclame 468px de libelles sur une ligne. Sous 640px
   de viewport le panneau n'en offre plus assez : on passe alors en legende
   sous la barre, avec pastille de couleur, plutot que de casser les lignes. */
@media(max-width:640px){
  .sdc-plot{display:flex;flex-direction:column}
  .sdc-lead{display:none}
  .sdc-bar{order:1;height:34px}
  .sdc-ticks{order:2}
  /* 165px = largeur d'une entree "Department stores" complete (pastille +
     libelle + valeur). auto-fit repasse tout seul a une colonne en dessous,
     pour qu'aucune entree ne se casse sur deux lignes. */
  .sdc-labs{order:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
    gap:10px 16px;margin-top:16px}
  .sdc-lab{min-width:0;flex-direction:row;align-items:center;gap:8px}
  .sdc-lab::before{content:'';flex:none;width:8px;height:8px;border-radius:2px;background:var(--sdc)}
  .sdc-lt{flex:1;min-width:0;font-size:11.5px;line-height:1.3;white-space:normal}
  .sdc-lt i{display:none}
  .sdc-lv{font-size:13px}
  .sdc-head{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .sdc .sdc-bar{clip-path:none!important}
  .sdc .sdc-lead{opacity:1!important}
}

.tot{display:flex;gap:26px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tot div .v{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--pink2);line-height:1}
.tot div .k{font-size:11px;color:var(--t3);margin-top:5px}

/* --- VSL --- */

/* --- footer --- */
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px}
.fgrid h5{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px}
.fgrid a{display:block;font-size:13.5px;color:var(--t3);margin-bottom:11px;transition:.25s}
.fgrid a:hover{color:#fff}
.fgrid .blurb{font-size:13.5px;color:var(--t3);line-height:1.6;margin:14px 0 18px;max-width:290px}
.fsoc{display:flex;gap:9px}
.fsoc a{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--t2);margin:0}
.fsoc a:hover{border-color:var(--pink);color:#fff}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);font-size:12.5px;color:var(--t3)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.pil{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:26px 22px;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s}
.pil.in{opacity:1;transform:none}
.pil{cursor:pointer}
.pil:hover{border-color:#41463e;background:var(--card2);transform:translateY(-4px)}
.pil.on{border-color:var(--pink);background:var(--card2)}
.pil .no{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--pink);display:block;margin-bottom:14px;letter-spacing:1px}
.pil h3{font-size:17px;font-family:var(--sans);font-weight:700;color:#fff;line-height:1.25;margin-bottom:10px}
.pil .sub{font-size:13.2px;color:var(--t2);line-height:1.55}
@media(max-width:1000px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pillars{grid-template-columns:1fr}}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.way{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;gap:14px;transition:.3s}
.way:hover{border-color:#3a3f38;transform:translateY(-3px)}
.way .num{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--pink);line-height:1;flex-shrink:0}
.way b{display:block;font-size:15px;color:#fff;margin-bottom:7px}
.way p{font-size:13px;color:var(--t2);line-height:1.5}
.way .hl{color:var(--pink2);font-weight:600}
@media(max-width:900px){.ways{grid-template-columns:1fr}}
.faq{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 0;font-weight:650;font-size:16px;letter-spacing:-.012em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--pink);font-size:22px;font-weight:400;transition:.3s;flex-shrink:0}
.faq[open] summary::after{transform:rotate(45deg)}
/* les reponses comptent plusieurs paragraphes : seul le dernier porte la
   respiration basse, les autres sont separes de 13px. */
.faq p{margin:0;color:var(--t2);font-size:14.5px;line-height:1.62;max-width:800px}
.faq p+p{margin-top:13px}
.faq p:last-of-type{padding-bottom:22px}
.faq strong{font-weight:650;color:#eeefee}
.faq a{color:var(--pink);text-decoration:none;border-bottom:1px solid rgba(196,240,0,.4)}
.faq a:hover{border-bottom-color:var(--pink)}


footer{padding:52px 0;border-top:1px solid var(--line);color:var(--t3);font-size:13px}
footer .w{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}

.rv{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}

@media(max-width:900px){
  .g3,.g2{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(3,1fr)}
  .nv{display:none}
  section{padding:74px 0}
  .hero{padding:140px 0 60px}
  .trust{gap:34px}
  .excl{padding:40px 24px}
  .tour-sticky{position:static}
}

/* Responsive adaptation only. Desktop content, order and copy stay unchanged. */
@media(max-width:900px){
  html{scroll-padding-top:72px}
  body{background-attachment:scroll}
  .w{width:100%;max-width:100%;padding-inline:24px}
  nav{padding:11px 0;background:rgba(9,10,8,.9);border-bottom-color:var(--line)}
  nav .w{gap:14px}
  .brand{min-width:0}.brand img{height:18px}.brand span{font-size:11px;white-space:nowrap}
  nav>.w>.btn{padding:10px 16px!important;font-size:12px!important;white-space:nowrap;min-height:42px}
  section{padding:72px 0}#results .res-stage{padding-top:72px}
  h1{font-size:clamp(40px,9.5vw,58px);line-height:1.03;letter-spacing:-1.1px}
  h2{font-size:clamp(30px,7.5vw,42px);line-height:1.08}
  .lead{font-size:16px;line-height:1.58}
  .hero{padding:124px 0 62px}
  .hero .glow{width:100%!important;left:0!important;transform:none!important}
  .hero .lead{max-width:620px;margin-bottom:28px}
  .hero-cta{margin-bottom:12px}.hero-cta .btn{width:min(100%,350px);min-height:52px}
  .tprow{gap:7px;margin-top:18px}.avrow{margin-top:14px}
  .bmq{margin-inline:-24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .bmq-t{gap:42px}.bmq-i{min-width:96px}.bmq-i .im,.bmq-i .im img{height:36px;max-height:36px}
  #platform>.w>.rv:first-child{margin-bottom:52px!important}
  .prow{grid-template-columns:1fr;gap:22px;margin-bottom:68px}
  .prow.rev .ptxt{order:0}.prow .ptxt{max-width:620px}.prow p{max-width:none;font-size:14.5px}
  .prow .frame,.prow.rev .frame{transform:none}
  .frame{width:100%;border-radius:12px;box-shadow:0 28px 65px rgba(0,0,0,.58)}
  .frame-bar{padding:8px 10px}.frame-bar i{width:7px;height:7px}.frame-url{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .frame video,.frame img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top}
  #database>.w>.rv:first-child{margin-bottom:34px!important}
  .card{padding:22px 18px}
  .bcards{grid-template-columns:1fr;min-height:0}.bc{padding:16px;gap:14px}.bc .lgw{width:82px;height:54px}.bc .lgw img{max-width:82px;max-height:52px}.bc .nm{font-size:14px}
  
  #compare h2,#results h2{white-space:normal!important}
  #results .grid.g3{gap:14px}.grid.g3{grid-template-columns:1fr}
  .excl{padding:36px 22px;border-radius:18px}.excl h2 br{display:none}.excl-crit{grid-template-columns:1fr}.ec{width:100%;border-radius:12px;text-align:left}.excl .btn{width:100%;min-height:52px}
  .pr{padding:28px 22px}.pr.best{order:-1}.pr .amt{font-size:40px}.pr .btn{min-height:48px}
  
  .faq summary{min-height:64px;padding:17px 0;font-size:15px;line-height:1.35}.faq p{padding-right:24px;font-size:14px;line-height:1.65}
  footer{padding:44px 0 34px}.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}.fbot{align-items:flex-start;flex-direction:column}
  .fsoc a{width:40px;height:40px}
}
@media(max-width:520px){
  .w{padding-inline:18px}section{padding:62px 0}#results .res-stage{padding-top:62px}
  nav .brand span{display:none}
  nav .brand{min-height:44px}
  .hero{padding-top:112px}.hero h1{font-size:clamp(36px,10.8vw,48px)}.hero .lead{font-size:15px}.hero-cta .btn{width:100%}
  h2{font-size:30px}.eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:16px}.mq-lbl{font-size:10px;margin-bottom:24px}
  .bmq{margin-inline:-18px}
  .tprow{font-size:11px}.tp-stars span{width:18px;height:18px;font-size:10px}.avrow .lbl{font-size:11.5px}
  .frame video,.frame img{aspect-ratio:4/3}
  .fgrid{grid-template-columns:1fr}.fgrid>div:first-child{grid-column:auto}
}
@media(max-width:360px){nav>.w>.btn{padding:9px 12px!important}.hero h1{font-size:34px}.tprow .sc{display:none}}

@media(max-width:900px){
  #database .bcards{
    display:flex;gap:12px;min-height:0;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-24px;padding:0 24px 12px;scrollbar-width:none
  }
  #database .bcards::-webkit-scrollbar{display:none}
  #database .bc{
    flex:0 0 calc((100vw - 60px)/2);min-height:144px;scroll-snap-align:start;
    padding:13px;gap:8px;flex-direction:column;align-items:flex-start
  }
  #database .bc .lgw{width:68px;height:42px;justify-content:flex-start}
  #database .bc .lgw img{max-width:68px;max-height:40px}
  #database .bc .info{width:100%}
  #database .bc .nm{font-size:12.5px;white-space:normal;line-height:1.2;min-height:30px}
  #database .bc .meta{font-size:10px;gap:4px;line-height:1.25}
  #database .bc .ct{font-size:10px;line-height:1.2}
  #database .bc .vf{width:13px;height:13px;font-size:8px}
  #database .rv.d2{margin-top:30px!important}
}
@media(max-width:520px){
  #database .bcards{margin-inline:-18px;padding-inline:18px}
  #database .bc{flex-basis:calc((100vw - 54px)/2)}
}

@media(max-width:900px){
  #database .bcards{margin:0;padding:0;gap:10px;overflow:hidden}
  #database .bc{flex-basis:calc((100% - 10px)/2);min-width:calc((100% - 10px)/2)}
}

/* Multichannel mobile: four compact channels and four visible use cases. */
.platform-title>span,.platform-title>em{display:block}
@media(max-width:900px){
  /* le titre tient sur deux lignes longues : nowrap le poussait hors de
     l'ecran, et 5,6vw le ramenait a 22px. Meme famille et meme echelle que
     les autres titres de section. */
  /* « generate millions in additional revenue » ne peut pas tenir seule sur
     une ligne au-dessus de 19px. On laisse donc le texte couler d'un bloc :
     la coupure tombe naturellement et le titre tient en deux lignes. */
  .platform-title{font-family:var(--sans)!important;font-weight:720;
    font-size:clamp(21px,6.2vw,24px)!important;line-height:1.14;
    letter-spacing:-.025em!important;text-wrap:balance}
  .platform-title>span,.platform-title>em{display:inline;white-space:normal}
}

/* Mobile comparison: compact full matrix, no oversized emoji cells. */
@media(max-width:900px){
  #compare>.w>.rv:first-child{margin-bottom:0!important}
  #compare .eyebrow{margin-bottom:14px}
  #compare h2{font-size:clamp(27px,7.2vw,34px)!important;line-height:1.04!important;letter-spacing:-.7px!important}
}
@media(max-width:380px){
  #compare h2{font-size:25px!important}
}

/* Mobile results: one compact KPI strip and a shorter product preview. */
@media(max-width:900px){
  #results>.w>.rv:first-child{margin-bottom:26px!important}
  #results h2{font-size:clamp(28px,7.2vw,34px)!important;line-height:1.05!important}
  #results .grid.g3{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
    overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--card)
  }
  #results .grid.g3>.card{
    min-width:0;min-height:104px;padding:16px 10px;border:0;border-radius:0;background:transparent;
    display:flex;flex-direction:column;justify-content:center;box-shadow:none
  }
  #results .grid.g3>.card+.card{border-left:1px solid var(--line)}
  #results .grid.g3>.card h3{font-size:clamp(23px,7vw,31px)!important;line-height:1!important;white-space:nowrap}
  #results .grid.g3>.card p{margin-top:9px!important;font-size:0;line-height:1.2}
  #results .grid.g3>.card p b{display:block;font-family:var(--sans);font-size:9px;line-height:1.25;color:#fff!important}
  #results .grid.g3>.card p br{display:none}
  #results>.w>.rv.d1{margin-top:14px!important}
  #results>.w>.rv.d1 .frame video{aspect-ratio:16/9;object-fit:cover;object-position:left top}
}

@media(max-width:900px){
}
@media(max-width:380px){
  #results .grid.g3>.card{padding-inline:7px;min-height:98px}
  #results .grid.g3>.card p b{font-size:8px}
}

/* Mobile footer: compact 2 x 2 grid. */
@media(max-width:900px){
  /* Le reglage precedent descendait a 9px pour les libelles et 10,5px pour le
     texte, avec des liens de 18px de haut : illisible et intouchable au doigt.
     Ici tout repasse au-dessus du seuil de lecture, et chaque lien atteint la
     cible tactile de 44px. */
  footer{padding:40px 0 28px}
  footer .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px;padding-bottom:26px}
  footer .fgrid>div:first-child{grid-column:1/-1}
  footer .fgrid h5{font-size:10.5px;letter-spacing:1.5px;margin-bottom:6px}
  footer .fgrid a{display:flex;align-items:center;min-height:44px;
    font-size:13.5px;margin-bottom:0}
  footer .fgrid .blurb{font-size:13px;line-height:1.6;margin:12px 0 16px;max-width:none}
  footer .fsoc{gap:10px}
  /* The footer touch-target rule above (footer .fgrid a) also catches these
     circles and swaps their centred grid for a flex row that only centres
     vertically, so the in/ig/X letters sat against the left edge. Centre
     them across as well. */
  footer .fsoc a{width:44px;height:44px;font-size:11px;justify-content:center}
  footer .fbot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    padding-top:20px;font-size:11.5px;line-height:1.5}
  footer .fbot>div:last-child{text-align:left}
}
@media(max-width:360px){
  footer .fgrid{gap:22px 16px}
  footer .fbot{font-size:11px}
}

/* Premium product-led hero. Static by design: the product is the visual effect. */
.hero{padding:144px 0 72px;text-align:left;overflow:hidden;background:radial-gradient(65% 52% at 76% 32%,rgba(196,240,0,.08),transparent 72%)}
.hero .w{position:relative;z-index:1}
.hero-grid{display:block}
.hero-copy{max-width:none}
.hero h1{max-width:1120px;margin:0 0 42px;font-size:clamp(66px,6.8vw,96px);line-height:.92;letter-spacing:-3.6px}
.hero h1 span{display:block}
.hero-lower{display:grid;grid-template-columns:minmax(420px,1fr) minmax(390px,.72fr);align-items:end;gap:90px;margin-bottom:54px}
.hero .lead{max-width:650px;margin:0;text-align:left;font-size:18px;line-height:1.62;color:#acafaa}
.hero .lead::before{display:none}
.hero-actions{justify-self:end;min-width:430px}
.hero-cta{justify-content:flex-start;margin:0 0 24px}
.hero-cta .btn{min-width:170px;box-shadow:0 12px 28px -14px rgba(196,240,0,.65)}
.hero-cta .btn::before{display:none}
.hero-proof{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-proof .avrow,.hero-proof .tprow{margin:0;justify-content:flex-start}
.hero-proof .avrow{gap:10px;padding-right:18px;border-right:1px solid rgba(255,255,255,.11)}
.hero-proof .avs span{box-shadow:none}
.hero-proof .tprow{gap:6px;font-size:11px}
.hero-proof .tprow::before{display:none}
.hero-product{position:relative;padding:1px;border-radius:19px;background:linear-gradient(140deg,rgba(255,255,255,.24),rgba(255,255,255,.055) 40%,rgba(196,240,0,.26));box-shadow:0 42px 100px -40px rgba(0,0,0,.9)}
.hero-product::before{content:'';position:absolute;inset:14% 10% -10%;z-index:-1;background:rgba(196,240,0,.17);filter:blur(70px);border-radius:50%}
.hero-product .frame{border:0;border-radius:18px;box-shadow:none}
.hero-product .frame-bar{padding:9px 13px}
.hero-product .frame img,.hero-product .frame video{aspect-ratio:16/9;object-fit:cover;object-position:left top}
@media(max-width:1050px){.hero h1{font-size:70px}.hero-lower{gap:45px}.hero-actions{min-width:390px}}
@media(max-width:900px){
  .hero{padding:104px 0 42px;background:radial-gradient(100% 60% at 50% 30%,rgba(196,240,0,.075),transparent 70%)}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  /* meme parti que le desktop : tout centre. Le mobile etait cale a gauche. */
  .hero-copy{max-width:680px;margin-inline:auto;text-align:center}
  .hero-cta{display:flex;justify-content:center}
  .hero-proof{justify-content:center}
  /* le bandeau etait masque en base et reaffiche seulement au-dessus de 901px.
     Il porte le positionnement : il a sa place en mobile aussi. */
  .hero .hero-badge{display:inline-flex;align-items:center;margin:0 0 20px;padding:7px 12px;
    border:1px solid rgba(196,240,0,.4);border-radius:5px;background:rgba(196,240,0,.1);
    color:#d0ff12;font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.3;
    text-transform:uppercase}
  /* la bascule Playfair -> Inter vivait dans le bloc min-width:901px et
     n'atteignait jamais le mobile : le hero restait en serif. */
  .hero h1{font-family:var(--sans);font-weight:750;
    font-size:clamp(42px,9vw,62px);letter-spacing:-.032em}
  .hero-lower{display:block;margin-bottom:26px}
  .hero .lead{font-size:15.5px;margin-bottom:23px}
  /* sans largeur explicite il se calait sur son plus large enfant (284px)
     et poussait le bouton et la rangee de preuve 35px vers la droite. */
  .hero-actions{min-width:0;width:100%}
  .hero-cta .btn{width:auto;min-height:46px;padding:0 26px;font-size:14px}
  .hero-proof{gap:13px}.hero-proof .avrow{padding-right:13px}.hero-proof .avrow .lbl{display:none}
  .hero-product{width:100%}
}
@media(max-width:520px){
  .hero{padding:90px 0 34px}
  .hero-grid{gap:26px}
  /* « Never miss a reorder. » reclamait 414px pour 354 disponibles a 42px :
     le titre partait sur trois lignes. A 34px il en tient deux. */
  .hero h1{font-size:clamp(29px,8.7vw,34px);line-height:1.06;margin-bottom:16px}
  .hero .lead{font-size:14px;line-height:1.52;margin-bottom:20px}
  .hero-cta{margin-bottom:18px;justify-content:center}
  .hero-cta .btn{width:auto;min-height:46px;padding:0 24px;font-size:13.5px}
  /* centre et resserre : la rangee de preuve prenait autant de place que le CTA */
  .hero-proof{justify-content:center;gap:12px}.hero-proof .avrow{padding-right:9px}.hero-proof .avs span{width:26px;height:26px}.hero-proof .tprow>span:first-child,.hero-proof .tprow .sc{display:none}
  .hero-product{border-radius:13px}.hero-product .frame{border-radius:12px}.hero-product .frame-bar{padding:6px 8px}.hero-product .frame-bar i{width:6px;height:6px}.hero-product .frame-url{font-size:8px;padding:3px 8px}
  .hero-product .frame img,.hero-product .frame video{aspect-ratio:1.55/1;object-position:8% top}
}
.hero-badge,.platform-tabs{display:none}
/* Desktop direction: immersive color hero, centered message, product in a light stage. */
@media(min-width:901px){
  nav{background:#090a08;border-bottom:1px solid rgba(255,255,255,.1)}
  nav .nv a{color:rgba(255,255,255,.86)}
  nav .brand span{color:#c4f000}

  .hero{padding:126px 0 96px;background:#0c0d0c;color:#fff}
  .hero::before{content:'';position:absolute;inset:0;background:linear-gradient(122deg,transparent 0 66%,rgba(196,240,0,.045) 66% 100%);pointer-events:none}
  .hero-grid{width:min(100%,1440px);max-width:1440px;padding-inline:0}
  .hero-copy{position:relative;z-index:2;width:min(100% - 80px,1120px);margin:0 auto;text-align:center}
  .hero-badge{display:inline-flex;align-items:center;margin:0 auto 28px;padding:8px 14px;border:1px solid rgba(196,240,0,.4);border-radius:5px;background:rgba(196,240,0,.1);color:#d0ff12;font-size:11.5px;font-weight:750;letter-spacing:.02em;text-transform:uppercase}
  .hero h1{max-width:1120px;margin:0 auto 24px;text-align:center;font-family:var(--sans);font-size:clamp(62px,5.15vw,80px);font-weight:700;line-height:.96;letter-spacing:-3.8px;color:#fff}
  .hero h1 span{display:block;white-space:nowrap}
  .hero h1 em{color:#c4f000!important;font-style:normal}
  .hero-lower{display:flex;flex-direction:column;align-items:center;gap:0;margin:0}
  .hero .lead{max-width:680px;margin:0 auto 34px;text-align:center;color:rgba(255,255,255,.88);font-size:15px;line-height:1.5}
  .hero-actions{min-width:0;justify-self:auto;display:flex;flex-direction:column;align-items:center}
  .hero-cta{justify-content:center;margin:0 0 18px}
  .hero-cta .btn{min-width:224px;padding:16px 30px;font-size:14.5px}
  .hero-proof{justify-content:center;gap:14px;color:#fff}
  .hero-proof .avrow{display:none}
  .hero-proof .avrow .lbl,.hero-proof .tprow .sc{color:rgba(255,255,255,.88)}
  .hero-proof .tprow{color:#fff}
  .hero-product{z-index:2;width:min(100% - 48px,840px);margin:58px auto 0;padding:0;border:0;border-radius:28px;background:transparent;box-shadow:none}
  .hero-product::before{display:none}
  .hero-product .frame{border-radius:22px;border:1px solid rgba(196,240,0,.32);
    box-shadow:0 0 0 7px rgba(196,240,0,.05),0 30px 80px -20px rgba(38,42,36,.55)}
  .hero-product .frame-bar{padding:11px 16px;background:#1b1d1a}
  .hero-product .frame img,.hero-product .frame video{aspect-ratio:16/7.6;object-position:left top}
  .brand-proof{margin-top:-1px;padding:36px 0!important;background:#0c0d0c;color:#fff;border:0}
  .brand-proof .w{width:min(100% - 120px,1320px)}
  .brand-proof .w{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;gap:34px}
  .brand-proof .mq-lbl{margin:0;color:rgba(255,255,255,.96);text-align:left;font-size:12px;font-weight:760;letter-spacing:.02em;white-space:nowrap}
  .brand-proof .bmq{overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%)}
  .brand-proof .bmq-t{display:flex;align-items:center;gap:62px;width:max-content;animation:bmv 24s linear infinite}
  .brand-proof .bmq-i{min-width:0;opacity:.82;filter:brightness(1.12);transition:opacity .25s,filter .25s}
  .brand-proof .bmq-i:hover{opacity:.96;filter:brightness(1.35)}
  .brand-proof .bmq-i:nth-child(n+6){display:flex}
  .brand-proof .bmq-i:hover{opacity:1;transform:none}
  .brand-proof .bmq-i .im,.brand-proof .bmq-i .im img{height:38px;max-height:38px;max-width:145px}
  .brand-proof .bmq-i .im img,.brand-proof .bmq-i .im img.inv{filter:brightness(0) invert(1)}
  #platform{position:relative;padding:110px 0;background:#0c0d0c;color:#fff}
  #platform>.w{width:min(100% - 80px,1400px);max-width:none}
  /* la ligne de comparaison reclame 506px utiles : 1180 n'en donne que 478 */
  #compare>.w{width:min(100% - 64px,1300px);max-width:none}
  #platform>.w>.rv:first-child{margin-bottom:72px!important;text-align:center}
  #platform .eyebrow{justify-content:center;margin-bottom:18px;color:#c4f000}
  #platform .platform-title{max-width:920px!important;margin:0 auto;font-family:var(--sans);font-size:clamp(46px,4vw,60px)!important;font-weight:720;line-height:1.01;letter-spacing:-2.5px;color:#fff}
  #platform .platform-title span{display:block;font-style:normal;color:#fff!important;white-space:nowrap}
  #platform .platform-title em{display:block;font-style:normal;color:#c4f000!important;white-space:nowrap}
  #platform .platform-subtitle{max-width:760px;margin:16px auto 0;color:#a8aba6;font-size:14px;line-height:1.5;text-align:center;white-space:normal}
  .platform-tabs{display:none!important}
  .platform-tab{padding:10px 15px;border:1px solid rgba(255,255,255,.15);border-radius:100px;background:transparent;color:#979b95;font:650 12px var(--sans);cursor:pointer;transition:.2s}
  .platform-tab:hover{border-color:rgba(255,255,255,.35);color:#fff}
  .platform-tab.active{border-color:#c4f000;background:#c4f000;color:#fff}
  .platform-bento{display:grid;grid-template-columns:1.65fr 1fr;gap:20px}
  #platform .prow{position:relative;display:grid;grid-template-columns:46% 54%;gap:0;min-height:370px;margin:0;border:0;border-radius:44px;overflow:hidden;background:linear-gradient(125deg,#566812 0%,#708618 62%,#9fc115 100%);box-shadow:none}
  #platform .prow[data-platform-panel="0"],#platform .prow[data-platform-panel="3"]{grid-column:1/-1}
  #platform .prow.rev .ptxt{order:0}
  #platform .prow .ptxt{display:flex;flex-direction:column;justify-content:center;max-width:none;padding:48px 48px;color:#fff}
  /* Typographie commune aux quatre panneaux. Les 02/03 ne redefinissent
     qu'une taille, rien d'autre : une seule implementation. */
  #platform .prow .pno,#platform .bd .bd-eb{margin-bottom:20px;
    font:750 12.5px var(--sans);letter-spacing:.13em;text-transform:uppercase;
    color:rgba(255,255,255,.72)}
  #platform .prow .pno b,#platform .bd .bd-eb b{margin-right:7px;font-weight:750;color:#fff}
  #platform .prow h3{margin-bottom:16px;color:#fff;font-family:var(--sans);
    font-size:40px;line-height:1.05;letter-spacing:-.035em}
  #platform .prow p{max-width:none;color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.55}
  #platform .platform-more{display:inline-flex;align-items:center;gap:14px;width:max-content;margin-top:20px;color:#fff;font-size:13px;font-weight:700;text-decoration:none}
  #platform .platform-more span{font-size:19px;font-weight:400;transition:transform .2s}
  #platform .platform-more:hover span{transform:translateX(4px)}
  #platform .prow>div:last-child{display:flex;align-items:flex-end;padding:48px 0 0;background:#171816;overflow:hidden}
  #platform .prow .frame{width:calc(100% + 42px);height:100%;margin:0 -42px -1px 12px;border:0;border-radius:28px 0 0 0;box-shadow:0 26px 55px rgba(25,28,24,.16);transform:none;overflow:hidden}
  #platform .prow .frame{border-radius:24px!important}
  #platform .prow .frame img,#platform .prow .frame video{border-radius:inherit}
  #platform .prow .frame-bar{display:none}
  #platform .prow .frame video,#platform .prow .frame img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:right center}
  /* --- 01 Buyer database ---------------------------------------------
     Conteneur 1116x480. Panneau rose pleine hauteur sur 38% (424px de
     texte utile), fenetre produit ancree a droite a partir de 40% : elle
     recouvre le rose sur 246px et respecte le ratio natif 1600/1000 du
     visuel, donc aucun recadrage. */
  #platform .prow.bd{display:block;position:relative;grid-column:1/-1;height:548px;min-height:0;
    margin:0;border:0;border-radius:0;background:transparent;overflow:visible;
    clip-path:none;transition:none}
  #platform .prow.bd .ptxt{position:absolute;inset:0 38% 0 0;z-index:1;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:52px 48px;border-radius:44px;
    background:radial-gradient(120% 95% at 12% 6%,#c4f000 0%,rgba(196,240,0,0) 56%),
      linear-gradient(140deg,#9ebf17 0%,#596b13 46%,#35400b 80%,#242b08 100%);
    box-shadow:0 26px 90px -70px rgba(196,240,0,.55)}
  #platform .prow.bd .ptxt>*{max-width:350px}
  #platform .prow.bd p{max-width:334px}
  #platform .prow.bd .bd-vals{margin-top:20px}
  #platform .prow.bd .bd-cta{margin-top:auto}
  #platform .prow.bd .bd-win{position:absolute;inset:32px 28px 32px 40%;z-index:2;
    display:block;padding:0;background:transparent;overflow:visible}
  #platform .prow.bd .bd-win::before{content:'';position:absolute;inset:10% -26px 2% -56px;z-index:-1;
    pointer-events:none;background:radial-gradient(58% 62% at 36% 55%,rgba(11,13,4,.6),transparent 72%);
    filter:blur(22px)}
  #platform .prow.bd .frame{position:absolute;inset:0;width:auto;height:auto;margin:0;
    aspect-ratio:auto;border:1px solid rgba(255,255,255,.17)!important;border-radius:20px!important;
    background:#0f100f;
    box-shadow:0 0 0 1.5px rgba(5,6,5,.6),
               inset 0 1px 0 rgba(255,255,255,.11),
               0 46px 120px rgba(0,0,0,.72),
               0 0 64px rgba(162,199,16,.12);
    overflow:hidden;transform:none}

  /* ---- Survol : le meme leger soulevement de 2px sur les QUATRE captures.
     Une seule implementation, reprise du panneau 01. Le declencheur est la
     zone du visuel : .bd-win pour le 01 (le cadre y est en absolu), le cadre
     lui-meme pour les 02/03/04. ---- */
  #platform .prow .frame{transition:transform .24s ease}
  #platform .prow.bd .bd-win:hover .frame,
  #platform .prow[data-platform-panel="1"] .frame:hover,
  #platform .prow[data-platform-panel="2"] .frame:hover,
  #platform .prow[data-platform-panel="3"] .frame:hover{transform:translateY(-2px)}
  #platform .prow.bd .frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;
    transform:none;border-radius:0!important}
  #platform .prow.bd:not(.in) .ptxt{transform:translateY(12px)}
  #platform .prow.bd:not(.in) .bd-win{transform:translateY(18px)}
  #platform .prow.bd.in .ptxt{transform:none;transition:transform .68s cubic-bezier(.33,1,.68,1) .05s}
  #platform .prow.bd.in .bd-win{transform:none;transition:transform .68s cubic-bezier(.33,1,.68,1) .17s}
  /* --- 04 : meme famille que la carte 03 (prune, une touche rose en haut a
     gauche), meme rayon 44px, aucune bordure. Le collage est ancre sur LA CARTE
     et ne peut donc pas la faire grandir. --- */
  #platform .prow[data-platform-panel="3"]{grid-template-columns:38% 62%;
    min-height:0;height:548px;align-items:stretch;overflow:hidden;border:0;border-radius:44px;
    background:radial-gradient(70% 92% at 4% -2%,rgba(196,240,0,.26),rgba(196,240,0,.07) 48%,transparent 76%),
      radial-gradient(58% 76% at 92% 104%,rgba(196,240,0,.14),transparent 72%),
      linear-gradient(150deg,#272b25 0%,#1f221e 46%,#1a1d19 100%);
    box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
  #platform .prow[data-platform-panel="3"] .ptxt{justify-content:flex-start;padding:52px 24px 46px 48px}
  #platform .prow[data-platform-panel="3"] p{max-width:360px}
  #platform .prow[data-platform-panel="3"] .bd-vals{margin-top:22px}
  #platform .prow[data-platform-panel="3"] .bd-cta{margin-top:auto}
  #platform .prow[data-platform-panel="3"]>div:last-child{
    position:static;display:block;padding:0;background:transparent}
  #platform .prow[data-platform-panel="3"] .frame{
    position:absolute;top:3%;bottom:3%;right:28px;left:auto;width:auto;height:auto;margin:0;
    border:0;border-radius:0!important;background:transparent;box-shadow:none;overflow:visible;transform:none}
  #platform .prow[data-platform-panel="3"] .frame img{
    display:block;width:auto;height:100%;max-width:none;object-fit:contain;
    background:transparent;filter:drop-shadow(0 26px 54px rgba(0,0,0,.6))}
  /* ================= Panneaux 02 / 03 =================================
     Implementation unique. Bento 1.65fr / 1fr -> 02 = 785px, 03 = 476px.
     Cartes de 400px : en les raccourcissant, la capture occupe 75% de la
     hauteur SANS etre rognee, au lieu de deborder hors de la carte.
       02 : texte 36% | capture 64%, fenetre entiere, marges symetriques
       03 : texte 50% | telephone 50%, PNG detoure, 80% de la hauteur
     Palette : #c4f000 / #c4f000 / #c4f000 assombris a teinte constante. */
  #platform .prow[data-platform-panel="1"],#platform .prow[data-platform-panel="2"]{
    position:relative;min-height:0;height:400px;align-items:stretch;overflow:hidden;
    border:0;border-radius:44px;
    box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}

  /* -- colonne de texte : eyebrow, titre sur 2 lignes, paragraphe. Rien d'autre. -- */
  #platform .prow[data-platform-panel="1"] .ptxt,#platform .prow[data-platform-panel="2"] .ptxt{
    justify-content:flex-start;padding:48px 18px 30px 36px}
  /* seul ecart des cartes etroites : le titre et le corps descendent d'un cran */
  #platform .prow[data-platform-panel="1"] h3,#platform .prow[data-platform-panel="2"] h3{
    font-size:clamp(26px,2.3vw,33px);line-height:1.06}
  #platform .prow[data-platform-panel="1"] p,#platform .prow[data-platform-panel="2"] p{
    font-size:15px}

  /* -- 02 : lueur rose en haut a gauche, degrade a teinte constante vers le noir -- */
  #platform .prow[data-platform-panel="1"]{grid-template-columns:36% 64%;
    background:radial-gradient(102% 116% at 3% -2%,#c4f000 0%,#c4f000 24%,rgba(196,240,0,0) 63%),
      linear-gradient(115deg,#617515 0%,#3e4a0d 28%,#212707 58%,#101403 84%,#0b0d03 100%)}
  #platform .prow[data-platform-panel="1"]>div:last-child{
    position:relative;display:block;padding:0;background:transparent;overflow:visible}
  /* la fenetre reste entiere : aucune commande de l'interface n'est coupee */
  #platform .prow[data-platform-panel="1"] .frame{
    position:absolute;left:0;right:20px;top:48px;width:auto;height:auto;
    aspect-ratio:1586/992;margin:0;
    border:0;border-radius:16px!important;background:#01091C;
    box-shadow:0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.13),
      0 44px 84px -30px rgba(0,0,0,.9),0 0 72px -12px rgba(196,240,0,.2);overflow:hidden}
  #platform .prow[data-platform-panel="1"] .frame img{
    display:block;width:100%;height:100%;object-fit:cover;object-position:left center}

  /* -- 03 : presque noir, prune, une seule touche rose ; le texte respire -- */
  #platform .prow[data-platform-panel="2"]{grid-template-columns:55% 45%;
    background:radial-gradient(42% 50% at 76% 52%,rgba(196,240,0,.18),transparent 72%),
      radial-gradient(88% 78% at 5% -4%,rgba(196,240,0,.26),rgba(196,240,0,.07) 46%,transparent 74%),
      linear-gradient(150deg,#272b25 0%,#1f221e 46%,#1a1d19 100%)}
  #platform .prow[data-platform-panel="2"] .ptxt{padding:48px 12px 30px 32px}
  /* position:static -> le cadre absolu se referme sur LA CARTE (400px) et non sur
     la colonne, dont la hauteur suivait le texte : c'est ce qui faisait deborder
     le telephone. Le PNG est detoure, il n'y a plus de rectangle noir. */
  #platform .prow[data-platform-panel="2"]>div:last-child{
    position:static;display:block;padding:0;background:transparent}
  #platform .prow[data-platform-panel="2"] .frame{
    position:absolute;top:6%;bottom:6%;right:18px;left:auto;width:auto;height:auto;margin:0;
    border:0;border-radius:0!important;box-shadow:none;background:transparent;overflow:visible}
  /* PNG detoure : on annule le background:#0c0d0c de la regle globale .frame img,
     sinon un rectangle noir est peint derriere l'alpha. */
  #platform .prow[data-platform-panel="2"] .frame img{
    display:block;width:auto;height:100%;max-width:none;object-fit:contain;
    background:transparent;filter:drop-shadow(0 26px 50px rgba(0,0,0,.6))}
  #platform .prow .platform-more span{display:inline-block;transition:transform .25s cubic-bezier(.22,1,.36,1)}
  @media(hover:hover) and (pointer:fine){
    #platform .prow:hover .platform-more span,#platform .prow:focus-within .platform-more span{transform:translateX(8px)}
  }
}
@media(max-width:900px){
  #platform .prow[data-platform-panel="0"]{display:grid;grid-template-columns:1fr;min-height:0}
  #platform .prow[data-platform-panel="0"] .ptxt{padding:32px 26px 26px}
  #platform .prow[data-platform-panel="0"]>div:last-child{padding:0 14px 14px;background:transparent;overflow:hidden}
  #platform .prow[data-platform-panel="0"] .frame{width:100%;height:auto;aspect-ratio:1586/992;margin:0;border-radius:18px!important;overflow:hidden;clip-path:inset(0 round 18px)}
  #platform .prow[data-platform-panel="0"] .frame img{display:block;width:100%;height:100%;aspect-ratio:1586/992;transform:none;object-fit:cover;object-position:right 48%;border-radius:18px!important}
  /* --- 02 mobile : pile verticale, capture au ratio natif (aucun recadrage) --- */
  #platform .prow[data-platform-panel="1"]{display:grid;grid-template-columns:1fr;gap:0;height:auto;overflow:hidden}
  #platform .prow[data-platform-panel="1"] .ptxt{padding:26px 22px 14px}
  #platform .prow[data-platform-panel="1"]>div:last-child{padding:0 14px 14px;background:transparent;overflow:hidden}
  #platform .prow[data-platform-panel="1"] .frame{width:100%;height:auto;aspect-ratio:1586/992;margin:0;border:0;border-radius:16px!important;box-shadow:none;overflow:hidden;clip-path:none}
  #platform .prow[data-platform-panel="1"] .frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;border-radius:0!important}
  #platform .prow[data-platform-panel="2"]{display:grid;grid-template-columns:1fr;gap:0;height:auto;overflow:hidden}
  #platform .prow[data-platform-panel="2"] .ptxt{padding:26px 22px 8px}
  #platform .prow[data-platform-panel="2"]>div:last-child{position:static;display:flex;justify-content:center;padding:6px 18px 0;overflow:hidden}
  /* le telephone entier, centre, a son ratio natif : plus de recadrage absolu */
  #platform .prow[data-platform-panel="2"] .frame{position:relative;inset:auto;width:min(66vw,242px);height:auto;aspect-ratio:812/1617;margin:0;border:0;border-radius:0!important;background:transparent;box-shadow:none;overflow:hidden;clip-path:none}
  #platform .prow[data-platform-panel="2"] .frame img{position:relative;left:auto;top:auto;display:block;width:100%;height:auto;max-width:none;aspect-ratio:auto;transform:none;border-radius:0!important;object-fit:contain;background:transparent}
  #platform .prow[data-platform-panel="3"]{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden}
  #platform .prow[data-platform-panel="3"]>div:last-child{display:flex;justify-content:center;padding:0 12px 22px;background:transparent;overflow:visible}
  #platform .prow[data-platform-panel="3"] .frame{width:100%;height:auto;margin:0;border:0;border-radius:0!important;background:transparent;box-shadow:none;overflow:visible}
  #platform .prow[data-platform-panel="3"] .frame img{display:block;width:100%;height:auto;aspect-ratio:auto;border-radius:0!important;background:transparent!important;object-fit:contain;object-position:center;transform:none;filter:drop-shadow(0 20px 24px rgba(0,0,0,.3))}
}

/* ================= Platform en mobile ====================================
   Les fonds, les rayons et l'echelle typographique vivaient dans le bloc
   min-width:901px et ne descendaient donc jamais ici : les quatre panneaux
   etaient transparents, a angles vifs, avec trois reglages d'eyebrow
   differents et un panneau 04 dont le texte touchait les bords.
   Ce bloc reprend les memes decisions, adaptees a une colonne. Rien ici ne
   peut atteindre le desktop. */
@media(max-width:900px){
  /* le 01 est exclu : sa carte visible est .ptxt, pas .prow (voir plus bas) */
  #platform .prow[data-platform-panel="1"],#platform .prow[data-platform-panel="2"],
  #platform .prow[data-platform-panel="3"]{
    border:0;border-radius:26px;overflow:hidden;
    box-shadow:0 18px 44px -30px rgba(0,0,0,.8)}

  /* --- les fonds, repris a l'identique du desktop --- */
  #platform .prow[data-platform-panel="1"]{
    background:radial-gradient(112% 62% at 4% -2%,#c4f000 0%,#c4f000 26%,rgba(196,240,0,0) 68%),
      linear-gradient(158deg,#617515 0%,#3e4a0d 26%,#212707 56%,#101403 84%,#0b0d03 100%)}
  #platform .prow[data-platform-panel="2"],#platform .prow[data-platform-panel="3"]{
    background:radial-gradient(96% 54% at 6% -2%,rgba(196,240,0,.24),rgba(196,240,0,.06) 46%,transparent 74%),
      linear-gradient(160deg,#272b25 0%,#1f221e 46%,#1a1d19 100%)}
  /* --- typographie commune aux quatre, comme en desktop --- */
  #platform .prow .pno,#platform .bd .bd-eb{
    display:flex;align-items:center;gap:7px;margin-bottom:16px;
    font:750 12px var(--sans);letter-spacing:.13em;text-transform:uppercase;
    color:rgba(255,255,255,.72)}
  #platform .prow .pno b,#platform .bd .bd-eb b{margin-right:0;font-weight:750;color:#fff}
  #platform .prow h3{margin-bottom:13px;font-family:var(--sans);font-size:28px;
    line-height:1.08;letter-spacing:-.03em;color:#fff}
  #platform .prow p{max-width:none;font-size:15px;line-height:1.58;color:rgba(255,255,255,.86)}

  /* --- respiration : le panneau 04 n'avait aucun padding de texte --- */
  #platform .prow[data-platform-panel="3"] .ptxt{padding:30px 24px 4px}
  #platform .prow[data-platform-panel="0"] .ptxt{padding:30px 24px 28px}
  #platform .prow[data-platform-panel="1"] .ptxt{padding:30px 24px 16px}
  #platform .prow[data-platform-panel="2"] .ptxt{padding:30px 24px 10px}

}
@media(hover:none){.card:hover,.pr:hover,.bc:hover,.way:hover,.bw:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv,.prow,.ec,.bc,.bd .ptxt,.bd .bd-win{opacity:1!important;transform:none!important}}

/* ================= Results : composition de croissance =================
   Une seule scene : titre + 4 KPI a gauche, courbe exponentielle en fond.
   Etat par defaut = anime termine ; les classes .anim/.go ne font que
   rejouer le trace, et sont retirees ensuite. */
#results{padding:0;overflow:hidden}
.res-stage{position:relative;padding:74px 0 8px}
.res-inner{position:relative;z-index:2}
.res-kpis{display:grid;grid-template-columns:1fr;gap:34px 46px;margin-top:44px;max-width:620px}

.res-kpi{position:relative;padding-left:22px}
.res-kpi::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,#c4f000 0%,rgba(196,240,0,.10) 100%)}
.res-v{position:relative;display:block;font-family:var(--sans);font-weight:750;
  font-size:clamp(34px,3.4vw,50px);line-height:1;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.res-v.pink{color:#c4f000}
.res-ghost{visibility:hidden}                       /* reserve la largeur finale */
.res-num{position:absolute;left:0;top:0;white-space:nowrap}
.res-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.res-t{margin-top:14px;font-size:15px;font-weight:720;letter-spacing:-.012em;color:#fff}
.res-n{margin-top:5px;font-size:13.5px;line-height:1.5;color:#a8aba6}

.res-graph{position:relative;height:170px;margin-top:38px;z-index:1;pointer-events:none}
.res-graph svg{display:block;width:100%;height:100%}
.res-line{fill:none;stroke:url(#resLineG);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.res-bars line{stroke:url(#resBarG);stroke-width:1}
/* etat de depart, pose seulement le temps du trace */
.res-graph.anim .res-line{stroke-dashoffset:var(--clen,0)}
.res-graph.anim.go .res-line{stroke-dashoffset:0;transition:stroke-dashoffset 2.1s cubic-bezier(.33,1,.68,1)}
.res-graph.anim .res-bars line{stroke-dashoffset:var(--len,0)}
.res-graph.anim.go .res-bars line{stroke-dashoffset:0;
  transition:stroke-dashoffset .7s cubic-bezier(.33,1,.68,1) var(--d,0ms)}


@media(min-width:901px){
  .res-stage{padding:110px 0}
  .res-kpis{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:52px}
  /* la courbe passe en fond : bas + moitie droite de la scene */
  .res-graph{position:absolute;left:0;right:0;bottom:0;height:66%;margin:0;z-index:1}
}
@media(min-width:1200px){
  .res-kpis{max-width:660px;gap:40px 56px}
}
@media(max-width:900px){
}
@media(max-width:560px){
  .res-kpis{gap:30px;margin-top:36px}
  .res-graph{height:132px;margin-top:44px}
  .res-t{font-size:14.5px}
  .res-n{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .res-graph .res-line,.res-graph .res-bars line{stroke-dashoffset:0!important}
}

/* ================= Why switch : deux cartes en vis-a-vis ==================
   Gauche = la fragmentation d'aujourd'hui, sobre et mate. Droite = le modele
   BeautyScale, prune avec un unique filet rose de 1px sur l'arete haute.
   Aucune bordure animee, aucun halo, aucun degrade decoratif : c'est la
   comparaison qui porte le message.
   Chaque ligne est une grille 26px / 145px / 1fr, si bien que la categorie
   de gauche fait toujours face a la meme categorie a droite. */
.sw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:44px;align-items:stretch}
.sw-card{position:relative;display:flex;flex-direction:column;padding:32px 34px 28px;border-radius:22px;
  transition:border-color .35s,box-shadow .35s}
.sw-old{background:#141513;border:1px solid rgba(255,255,255,.07)}
.sw-old:hover{border-color:rgba(255,255,255,.12)}
.sw-new{border:1px solid rgba(196,240,0,.26);
  background:radial-gradient(circle at 80% 0%,rgba(196,240,0,.12),transparent 45%),
    linear-gradient(155deg,#181a17 0%,#111210 55%,#0e0f0e 100%);
  box-shadow:0 22px 56px -46px rgba(196,240,0,.4)}
.sw-new:hover{border-color:rgba(196,240,0,.4)}
.sw-new::before{content:'';position:absolute;left:16%;right:16%;top:-1px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(196,240,0,.75),transparent)}

.sw-lbl{font-family:var(--sans);font-size:11px;font-weight:750;letter-spacing:2.6px;text-transform:uppercase}
.sw-old .sw-lbl{color:#7c8179}
.sw-new .sw-lbl{color:#c4f000}
.sw-h{font-family:var(--sans);font-weight:720;font-size:clamp(21px,1.8vw,26px);line-height:1.1;
  letter-spacing:-.03em;margin:12px 0 20px}
.sw-old .sw-h{color:#cfd1ce}
.sw-new .sw-h{color:#fff}

.sw-list{flex:1;list-style:none;margin:0;padding:0}
.sw-row{display:grid;grid-template-columns:26px 172px 1fr;align-items:center;padding:12px 0}
.sw-row+.sw-row{border-top:1px solid rgba(255,255,255,.055)}
.sw-new .sw-row+.sw-row{border-top-color:rgba(255,255,255,.07)}
/* le glyphe seul, sans pastille : l'icone ne doit pas dominer la ligne */
.sw-ic{display:grid;place-items:center}
.sw-ic svg{width:14px;height:14px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sw-old .sw-ic svg{stroke:#7e837b}
.sw-new .sw-ic svg{stroke:#3AC98F}
.sw-k{padding-right:14px;font-size:14px;font-weight:650;letter-spacing:-.012em;color:#fff}
.sw-old .sw-k{color:#e7e8e7}
.sw-v{min-width:0;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.62)}
.sw-new .sw-v{color:rgba(255,255,255,.76)}

/* --- revele au scroll : etat au repos = section complete --- */
.sw.reveal .sw-lbl,.sw.reveal .sw-h{opacity:0;transform:translateY(9px)}
.sw.reveal.go .sw-lbl,.sw.reveal.go .sw-h{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.33,1,.68,1) var(--dh,0ms),
             transform .55s cubic-bezier(.33,1,.68,1) var(--dh,0ms)}
.sw.reveal.go .sw-h{transition-delay:calc(var(--dh,0ms) + 60ms)}
.sw.reveal .sw-row{opacity:0;transform:translateY(11px)}
.sw.reveal.go .sw-row{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.33,1,.68,1) var(--d,0ms),
             transform .5s cubic-bezier(.33,1,.68,1) var(--d,0ms)}
.sw.reveal .sw-new::before{opacity:0}
.sw.reveal.go .sw-new::before{opacity:1;transition:opacity .9s ease 620ms}

/* Deux colonnes tant que la description la plus longue tient sur une ligne.
   En dessous de 1040px on empile : aujourd'hui, puis demain. */
@media(max-width:1039px){
  .sw{grid-template-columns:1fr;gap:18px;margin-top:38px}
  .sw-card{padding:30px 28px 26px}
}
@media(max-width:560px){
  .sw-card{padding:26px 22px 24px;border-radius:18px}
  .sw-h{margin:10px 0 18px}
  /* la description passe sous la categorie : deux lignes lisibles plutot
     qu'une colonne comprimee. */
  .sw-row{grid-template-columns:24px 1fr;align-items:start;gap:3px 12px;padding:12px 0}
  .sw-ic{margin-top:2px}
  .sw-k{padding-right:0;font-size:14px}
  .sw-v{grid-column:2;font-size:13px}
}

/* ================= Multichannel : composition centree en diagramme =========
   Canaux -> noeud BeautyScale -> cas d'usage -> bandeau de preuve.
   Les connecteurs sont traces en SVG a partir des positions mesurees, donc
   ils suivent exactement la mise en page a toutes les largeurs. */
#campaigns .mc-head{max-width:760px;margin:0 auto;text-align:center}
#campaigns .mc-head .eyebrow{justify-content:center}
#campaigns .mc-head h2{margin:0 auto}
#campaigns .mc-head .lead{margin:18px auto 0;max-width:620px;text-align:center}

.mc-flow{position:relative;margin-top:64px}
.mc-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mc-links path{fill:none;stroke-linecap:round}
.mc-links .mc-wire{stroke:url(#mcWireG);stroke-width:1}
.mc-links .mc-pulse{fill:none;stroke:#d0ff16;stroke-width:1.8;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(196,240,0,.9))}
.mc-links circle{fill:#c4f000}

.mc-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3.4vw,54px)}
/* deux flancs de largeur egale : le noeud reste au centre exact quelles que
   soient les longueurs de libelles */
.mc-side{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:clamp(18px,3.4vw,54px)}
.mc-side-l{justify-content:flex-end}
.mc-side-r{justify-content:flex-start}
.mc-ch{display:flex;align-items:center;gap:10px}
.mc-ch img{width:26px;height:26px;object-fit:contain;flex:none}
.mc-ch span{font-size:15px;font-weight:650;letter-spacing:-.005em;color:#d6d7d5;white-space:nowrap}
.mc-hub{position:relative;width:auto;min-width:104px;height:58px;padding:0 20px;flex:none;display:grid;place-items:center;border-radius:17px;
  background:linear-gradient(160deg,#1b1e1a,#121311);border:1px solid rgba(196,240,0,.42);
  box-shadow:0 0 0 6px rgba(196,240,0,.045),0 18px 44px -22px rgba(196,240,0,.55)}
.mc-hub b{font-family:var(--serif);font-style:italic;font-weight:700;font-size:19px;line-height:1;letter-spacing:.01em;white-space:nowrap;color:#c4f000}

.mc-uses{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(74px,8vw,104px)}
.mc-use{padding:0 22px;text-align:center}
.mc-use+.mc-use{border-left:1px solid rgba(255,255,255,.07)}
.mc-use .mc-ic{display:flex;align-items:center;justify-content:center;gap:10px}
.mc-use .mc-ic svg{width:17px;height:17px;flex:none;fill:none;stroke:#c4f000;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mc-t{font-size:15px;font-weight:720;letter-spacing:-.012em;color:#fff}
.mc-d{margin-top:7px;font-size:13px;line-height:1.5;color:#8f938d}

/* trace au scroll : au repos tout est deja visible */
.mc-flow.reveal .mc-wire{stroke-dashoffset:var(--len,0)}
.mc-flow.reveal.go .mc-wire{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s cubic-bezier(.33,1,.68,1) var(--d,0ms)}
.mc-flow.reveal .mc-links circle{opacity:0}
.mc-flow.reveal.go .mc-links circle{opacity:1;transition:opacity .45s ease calc(var(--d,0ms) + 700ms)}
.mc-flow.reveal .mc-hub{opacity:0;transform:scale(.82)}
.mc-flow.reveal.go .mc-hub{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.33,1,.68,1),transform .6s cubic-bezier(.22,1,.36,1)}
.mc-flow.reveal .mc-ch{opacity:0;transform:translateY(9px)}
.mc-flow.reveal.go .mc-ch{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.33,1,.68,1) var(--d,0ms),
             transform .5s cubic-bezier(.33,1,.68,1) var(--d,0ms)}
.mc-flow.reveal .mc-use{opacity:0;transform:translateY(11px)}
.mc-flow.reveal.go .mc-use{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.33,1,.68,1) var(--d,0ms),
             transform .5s cubic-bezier(.33,1,.68,1) var(--d,0ms)}

@media(max-width:1080px){
  .mc-row{gap:clamp(12px,2.4vw,30px)}
  .mc-ch span{font-size:14px}
  .mc-ch img{width:23px;height:23px}
  .mc-use{padding:0 16px}
}

/* ===== ThreeUI-inspired refinement pass ===== */
.hero-threeui-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.48;
  -webkit-mask-image:radial-gradient(ellipse 72% 64% at 50% 38%,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 64% at 50% 38%,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%)}
.hero::after{content:'';position:absolute;left:50%;top:18%;width:min(760px,72vw);height:420px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(196,240,0,.14),rgba(169,125,245,.055) 38%,transparent 72%);
  filter:blur(24px);pointer-events:none;z-index:0}
.hero-copy,.hero-product{position:relative;z-index:2}
.hero-copy h1>span{display:block;animation:threeuiTitleIn .72s cubic-bezier(.22,1,.36,1) both}
.hero-copy h1>span:nth-child(2){animation-delay:.12s}
@keyframes threeuiTitleIn{from{opacity:0;transform:translateY(22px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
.hero-product .frame{transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s ease,border-color .4s ease;
  box-shadow:0 44px 110px rgba(0,0,0,.68),0 0 0 1px rgba(196,240,0,.08),0 0 70px rgba(196,240,0,.08)}
.hero-product:hover .frame{transform:translateY(-3px);border-color:rgba(196,240,0,.5);
  box-shadow:0 54px 130px rgba(0,0,0,.72),0 0 0 1px rgba(196,240,0,.15),0 0 90px rgba(196,240,0,.12)}
.btn-p{background-size:180% 180%;animation:threeuiGradientDrift 8s ease-in-out infinite}
@keyframes threeuiGradientDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}


#campaigns .mc-hub{position:relative;box-shadow:0 0 0 1px rgba(196,240,0,.22),0 18px 50px rgba(196,240,0,.18)}
#campaigns .mc-hub::after{content:'';position:absolute;inset:-10px;border-radius:inherit;border:1px solid rgba(196,240,0,.18);
  animation:threeuiHubPulse 3.8s ease-in-out infinite}
@keyframes threeuiHubPulse{0%,100%{transform:scale(.96);opacity:0}45%{opacity:.62}75%{transform:scale(1.08);opacity:0}}

#invite .excl{box-shadow:0 36px 100px rgba(0,0,0,.34),0 0 0 1px rgba(196,240,0,.05) inset}
#invite .excl::after{content:'';position:absolute;inset:-35%;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,transparent 0 32%,rgba(196,240,0,.10) 40%,transparent 48% 82%,rgba(169,125,245,.08) 90%,transparent 100%);
  animation:threeuiLumen 18s linear infinite}
@keyframes threeuiLumen{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .hero-threeui-canvas{display:none}.hero::after{width:92vw;height:340px;top:12%;opacity:.72}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy h1>span,.btn-p,#campaigns .mc-hub::after,#invite .excl::after{animation:none!important}
}
@media(max-width:860px){
  /* le diagramme horizontal ne tient plus : canaux en grille, cas d'usage en 2x2 */
  .mc-flow{margin-top:46px}
  .mc-links{display:none}
  .mc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mc-side{display:contents}
  .mc-ch{justify-content:center;padding:13px 8px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .mc-hub{order:-1;grid-column:1/-1;justify-self:center;margin-bottom:6px}
  .mc-uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin-top:38px}
  .mc-use{padding:0}
  /* le filet vertical n'a plus de sens sur deux rangees */
  .mc-use+.mc-use{border-left:0}
  .mc-use:nth-child(odd){border-left:0;padding-left:0}
  .mc-use:nth-child(-n+2){padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.07)}
}
@media(max-width:520px){
  .mc-row{gap:9px}
  .mc-ch{gap:8px;padding:11px 6px}
  .mc-ch img{width:20px;height:20px}
  .mc-ch span{font-size:12.5px}
  .mc-hub{min-width:92px;width:auto;height:52px;padding:0 16px;border-radius:15px}
  .mc-hub b{font-size:17px}
  .mc-uses{gap:22px 14px}
  .mc-use{padding:0}
  .mc-t{font-size:14px}
  .mc-d{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .mc-flow .mc-wire{stroke-dashoffset:0!important}.mc-pulse{display:none}
  .mc-flow .mc-links circle{opacity:1!important}
  .mc-flow .mc-hub,.mc-flow .mc-ch,.mc-flow .mc-use{opacity:1!important;transform:none!important}
}

/* ================= Testimonials : rail 3 cartes ==========================
   Piste unique translatee en X. Les `visible` premieres cartes sont clonees
   en fin de piste : quand on atteint la copie, on revient a l'origine sans
   transition, la boucle est invisible. */
#reviews .rvw-head{max-width:760px}
.rvw-tp{display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  font-size:13px;color:#8f938d}
.rvw-tp .rvw-stars{display:flex;gap:2px}
.rvw-tp .rvw-stars i{width:15px;height:15px;border-radius:2.5px;background:#00B67A;
  display:grid;place-items:center;font-size:9px;color:#fff;font-style:normal}
.rvw-tp b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.rvw-tp span{opacity:.5}

.rvw{--gap:20px;position:relative;margin-top:40px}
.rvw-view{overflow:hidden;margin-inline:-4px;padding:4px;touch-action:pan-y}
.rvw-track{display:flex;gap:var(--gap);will-change:transform;
  transition:transform .82s cubic-bezier(.33,1,.68,1)}
.rvw-track.rvw-nojump{transition:none}
.rvw-track.rvw-drag{transition:none;cursor:grabbing}

.rvw-card{flex:0 0 calc((100% - var(--gap) * 2) / 3);min-width:0;
  display:flex;flex-direction:column;padding:28px 28px 24px;border-radius:18px;
  background:#1c1e1b;border:1px solid rgba(255,255,255,.11);
  opacity:.92;transform:scale(.985);
  transition:opacity .6s cubic-bezier(.33,1,.68,1),transform .6s cubic-bezier(.33,1,.68,1),
             border-color .35s,box-shadow .45s}
.rvw-card.is-mid{opacity:1;transform:none;border-color:rgba(196,240,0,.24);
  box-shadow:0 16px 40px -28px rgba(196,240,0,.5)}
/* survol : exactement la lueur des tuiles de marques (.bw) */
.rvw-card:hover{border-color:rgba(196,240,0,.45);opacity:1;transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(196,240,0,.22)}

.rvw-stars{display:flex;gap:3px;margin-bottom:18px}
.rvw-card .rvw-stars i{width:15px;height:15px;border-radius:2.5px;background:#00B67A;
  display:grid;place-items:center;font-size:9px;color:#fff;font-style:normal;flex:none}
.rvw-q{flex:1;margin:0;font-size:15.5px;line-height:1.66;letter-spacing:-.005em;color:#e1e2e0}
.rvw-who{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07)}
.rvw-av{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;
  border:1px solid rgba(255,255,255,.1)}
.rvw-av img{width:100%;height:100%;object-fit:cover;display:block}
.rvw-n{display:block;font-size:14px;font-weight:700;letter-spacing:-.012em;color:#fff}
.rvw-r{display:block;margin-top:2px;font-size:12.5px;color:#8f938d}

/* le carrousel defile seul et se met en pause au survol : plus de barre ni de
   fleches, juste l'appel a l'action. */
.rvw-cta{display:flex;justify-content:center;margin-top:42px}

/* entree : etat au repos = cartes visibles */
.rvw.reveal .rvw-card{opacity:0;transform:translateY(13px)}
.rvw.reveal.go .rvw-card{opacity:.92;transform:scale(.985);
  transition:opacity .6s cubic-bezier(.33,1,.68,1) var(--d,0ms),
             transform .6s cubic-bezier(.33,1,.68,1) var(--d,0ms)}
.rvw.reveal.go .rvw-card.is-mid{opacity:1;transform:none}

@media(max-width:1000px){
  .rvw-card{flex-basis:calc((100% - var(--gap)) / 2);padding:24px 24px 22px}
  .rvw-q{font-size:15px}
}
@media(max-width:640px){
  .rvw{--gap:14px;margin-top:30px}
  .rvw-card{flex-basis:100%;padding:22px 22px 20px;opacity:1;transform:none}
  .rvw-q{font-size:14.5px;line-height:1.62}
  .rvw-who{margin-top:22px;padding-top:17px}
  .rvw-cta{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){
  .rvw-track{transition:none!important}
  .rvw-card{opacity:1!important;transform:none!important}
}

/* ================= Hero : lanceur video =================
   La couverture est une surface OPAQUE dessinee (surface prune + grille
   technique + liseret lumineux) : la video est invisible jusqu'au clic.
   Un clic fond la couverture et lance la lecture ; un second met en pause. */
.hv{position:relative}
.hv video{display:block;width:100%;aspect-ratio:1656/836;object-fit:cover}
.hv-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:linear-gradient(165deg,#191b18 0%,#121311 52%,#0d0e0c 100%);
  opacity:1;transition:opacity .5s cubic-bezier(.33,1,.68,1)}
/* grille technique, comme les panneaux de la base acheteurs */
.hv-cover::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.03) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 40px),
    radial-gradient(46% 70% at 50% 38%,rgba(196,240,0,.13),transparent 68%)}
/* liseret lumineux sur l'arete haute */
.hv-cover::after{content:'';position:absolute;left:16%;right:16%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(208,255,22,.85),transparent)}
.hv.on .hv-cover{opacity:0;pointer-events:none}
.hv-play{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#c4f000,#c4f000);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 44px -14px rgba(196,240,0,.75);
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.hv-play svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.hv-play::after{content:'';position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(196,240,0,.45);animation:hvPulse 2.8s ease-out infinite}
@keyframes hvPulse{0%{transform:scale(.86);opacity:0}35%{opacity:.9}100%{transform:scale(1.22);opacity:0}}
.hv-cover:hover .hv-play,.hv-cover:focus-visible .hv-play{transform:scale(1.07)}
.hv-cover:focus-visible{outline:2px solid #c4f000;outline-offset:-2px}
.hv-play{position:relative}
@media(max-width:640px){
  .hv-play{width:58px;height:58px}
  .hv-play svg{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){.hv-play::after{animation:none;opacity:0}}

/* ================= Filets lumineux sur les separateurs =================
   Un eclat rose parcourt lentement les bordures horizontales des bandes.
   Chaque instance a sa duree/son retard (--gd/--gt) pour desynchroniser. */
.line-glint{position:absolute;left:0;top:0;width:100%;height:1px;overflow:hidden;
  pointer-events:none;z-index:3}
.line-glint.bot{top:auto;bottom:0}
.line-glint::before{content:'';position:absolute;top:0;left:0;width:260px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(196,240,0,.55) 30%,rgba(208,255,22,.95) 50%,rgba(196,240,0,.55) 70%,transparent);
  animation:lineGlint var(--gt,9s) linear var(--gd,0s) infinite}
@keyframes lineGlint{from{transform:translateX(-280px)}to{transform:translateX(calc(100vw + 20px))}}
@media(prefers-reduced-motion:reduce){.line-glint::before{animation:none;opacity:0}}

/* ================= Filets lumineux sur les separateurs =================
   Un eclat rose parcourt lentement les bordures horizontales des bandes.
   Chaque instance a sa duree/son retard (--gd/--gt) pour desynchroniser. */
footer{position:relative}

/* ================= Panneau 01 : Buyer database ================= */
#platform .bd .bd-eb{display:flex;align-items:center;gap:7px}
#platform .bd .bd-eb i{font-style:normal;color:rgba(255,255,255,.45)}
#platform .bd h3 em{font-style:normal;color:#fff}
#platform .prow .bd-vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 20px;margin-top:22px;
  font-size:13px;color:rgba(255,255,255,.8)}
#platform .prow .bd-vals span{display:flex;align-items:center;gap:9px;min-width:0}
#platform .prow .bd-vals i{width:4px;height:4px;border-radius:50%;background:#d9ff42;flex:none}
#platform .prow .bd-cta{display:inline-flex;align-items:center;gap:12px;width:max-content;margin-top:30px;
  min-height:44px;color:#fff;font-size:14px;font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .22s,color .22s}
#platform .prow .bd-cta span{display:inline-block;transition:transform .22s}
#platform .prow .bd-cta:hover{border-color:#fff}
#platform .prow .bd-cta:hover span{transform:translateX(5px)}
#platform .prow .bd-cta:focus-visible{outline:2px solid #fff;outline-offset:4px;border-bottom-color:transparent}
#platform .bd .ptxt{background:radial-gradient(120% 95% at 12% 6%,#c4f000 0%,rgba(196,240,0,0) 56%),
  linear-gradient(140deg,#9ebf17 0%,#596b13 46%,#35400b 80%,#242b08 100%)}
@media(max-width:900px){
  /* meme rayon, meme taille de titre et de corps que les panneaux 02-04 :
     en une colonne ils font tous la meme largeur, la hierarchie du desktop
     n'a plus de raison d'etre. */
  #platform .bd .ptxt{border-radius:26px;box-shadow:0 18px 44px -30px rgba(0,0,0,.8)}
  #platform .bd h3 br{display:none}
  #platform .bd h3{font-size:28px;line-height:1.08;letter-spacing:-.03em}
  #platform .bd p{font-size:15px;line-height:1.58}
  /* deux colonnes ne tiennent pas dans 354px : « Auto-generated contracts »
     reclame plus que les 143px disponibles. Une seule colonne. */
  #platform .prow .bd-vals{grid-template-columns:1fr;gap:9px;margin-top:18px;font-size:13.5px}
  #platform .prow .bd-cta{margin-top:22px;font-size:13.5px}

  /* La capture flottait 22px SOUS le panneau rose : deux blocs sans rapport.
     On la fait remonter par-dessus, comme en desktop ou elle recouvre le rose.
     Le panneau gagne du padding bas pour laisser la place au chevauchement. */
  #platform .prow.bd{overflow:visible}
  #platform .prow.bd .ptxt{padding-bottom:74px}
  #platform .prow.bd .bd-win{position:relative;z-index:2;margin-top:-58px;padding:0 16px}
  #platform .prow.bd .frame{border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 0 0 1px rgba(7,8,7,.7),0 26px 56px -16px rgba(0,0,0,.8)}
}

/* ================= Book a demo : modal =================================
   Two panels, mirroring the reference: pitch on the left over a brand
   gradient, form on the right on white. Below 860px the left panel is
   dropped rather than stacked — on a phone it pushes the form under two
   scrolls of copy, and the form is the point of the dialog. */
.bd-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.bd-modal.open{display:flex}
.bd-modal-back{position:absolute;inset:0;background:rgba(6,6,6,.72);backdrop-filter:blur(6px)}
.bd-modal-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;width:min(1040px,100%);
  max-height:min(92vh,760px);border-radius:26px;overflow:hidden;
  background:linear-gradient(140deg,#9ebf17 0%,#596b13 46%,#35400b 82%,#242b08 100%);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.85);animation:bdIn .34s cubic-bezier(.22,1,.36,1)}
@keyframes bdIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.bd-x{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;line-height:1;display:grid;place-items:center;transition:background .2s}
.bd-x:hover{background:rgba(255,255,255,.26)}
.bd-pitch{padding:52px 44px;color:#fff;overflow-y:auto}
.bd-pitch h2{font-family:var(--sans);font-weight:720;font-size:clamp(30px,3vw,42px);line-height:1.03;letter-spacing:-.035em;margin-bottom:18px}
.bd-pitch p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.86);max-width:380px}
.bd-ticks{list-style:none;margin:26px 0 0;padding:0}
.bd-ticks li{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:14px;font-weight:650;color:#fff}
.bd-ticks i{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-style:normal;font-size:11px}
.bd-form{background:#fff;padding:40px 40px 34px;overflow-y:auto}
.bd-form.bd-embed{padding:0;overflow:hidden;min-height:min(86vh,700px)}
.bd-frame{display:block;width:100%;height:100%;border:0;background:#fff}
@media(max-width:860px){
  .bd-modal{padding:0}
  .bd-modal-card{grid-template-columns:1fr;max-height:100vh;height:100%;border-radius:0}
  .bd-pitch{display:none}
  .bd-form{padding:64px 22px 32px}
}
@media(prefers-reduced-motion:reduce){.bd-modal-card{animation:none}}

/* Review-only layer. Production HTML and original screenshot assets are untouched. */
.design-preview .hero{position:relative;display:grid;place-items:center;min-height:760px;min-height:min(900px,100svh);padding:0;background:#0c0d0c;isolation:isolate}
.design-preview .hero::before,.design-preview .hero::after{display:none}
.cinema-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;background:#0c0d0c}
.cinema-backdrop video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cinema-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,10,9,.28),rgba(9,10,9,.28) 45%,#0c0d0c 100%),radial-gradient(ellipse at 50% 40%,rgba(9,10,9,.62),rgba(9,10,9,.14) 80%)}
.design-preview .hero .hero-grid{width:100%;max-width:1280px;padding:144px 32px 116px}
.design-preview .hero-copy{width:100%;max-width:1080px;margin:auto;text-align:center}
.design-preview .hero .hero-badge{display:inline-flex;border-color:rgba(255,255,255,.22);background:rgba(13,14,13,.5);color:#d4e883;backdrop-filter:blur(12px);border-radius:100px;padding:8px 16px;font-size:10px;letter-spacing:.1em;margin-bottom:30px}
.design-preview .hero h1{font-family:var(--sans);font-size:clamp(46px,5.8vw,88px);line-height:1.04;letter-spacing:-.055em;font-weight:650;margin:0 auto 26px;text-shadow:0 3px 32px rgba(0,0,0,.24)}
.design-preview .hero h1 span{white-space:nowrap}
.design-preview .hero h1 em{color:#c4f000!important}
.design-preview .hero .lead{max-width:620px;color:#dedfde;line-height:1.65;font-size:16px;text-align:center;margin:0 auto 30px}
.design-preview .hero-lower{display:block;margin:0}
.design-preview .hero-actions{width:100%;min-width:0;display:flex;flex-direction:column;align-items:center}
.design-preview .hero-cta{gap:12px;justify-content:center;margin-bottom:25px}
.design-preview .hero-cta .btn{min-width:190px;padding:15px 25px;min-height:52px;font-size:14px;animation:none}
.design-preview .hero-cta .btn-g{background:rgba(16,17,15,.46);border:1px solid rgba(255,255,255,.28);box-shadow:none}
.design-preview .hero-cta .btn-g:hover{background:rgba(30,32,29,.75)}
.design-preview .hero-proof{justify-content:center}
.design-preview .hero-proof .avrow{display:none}
.design-preview .hero-proof .tprow{color:#e3e4e2}
.cinema-control{position:absolute;right:max(28px,calc((100vw - 1400px)/2));bottom:30px;z-index:4;display:flex;align-items:center;gap:9px;color:#d9dad8;background:rgba(11,12,11,.45);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:10px 15px;min-height:42px;font:500 11px var(--sans);cursor:pointer;backdrop-filter:blur(8px)}
.cinema-control[hidden]{display:none}
.cinema-symbol{font-size:14px;width:12px}
.design-preview #platform>.w{max-width:1440px;padding-inline:40px}
.design-preview #platform .platform-bento{display:grid;grid-template-columns:1.55fr 1fr;gap:24px}
.design-preview #platform .prow{position:relative;display:grid;min-height:0;height:auto;margin:0;gap:0;border-radius:32px;border:1px solid rgba(255,255,255,.06);overflow:hidden;box-shadow:none;clip-path:none;transform:none}
.design-preview #platform .prow .ptxt{position:static;inset:auto;width:auto;max-width:none;padding:36px 0 36px 32px;background:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center;transform:none}
.design-preview #platform .prow .ptxt>*{max-width:100%}
.design-preview #platform .prow h3{font-size:clamp(26px,2.8vw,38px);line-height:1.08;letter-spacing:-.045em;margin-bottom:18px}
.design-preview #platform .prow p{font-size:15px;line-height:1.55;max-width:320px}
.design-preview #platform .prow .pno,.design-preview #platform .prow .bd-eb{font-size:10px;letter-spacing:.1em;line-height:1.6;margin-bottom:19px}
.design-preview #platform .prow .pno b,.design-preview #platform .prow .bd-eb b{font-size:12px}
.design-preview #platform .prow .bd-vals{font-size:12px;line-height:1.5;gap:11px;margin-top:20px}
.design-preview #platform .prow .bd-cta{margin-top:32px;font-size:12px;align-self:flex-start}
.design-preview #platform .prow[data-platform-panel]>.product-stage{position:relative;inset:auto;display:flex;align-items:center;justify-content:center;padding:28px 24px 28px 26px;background:none;overflow:visible;transform:none}
.design-preview #platform .prow.bd{grid-column:1/-1;grid-template-columns:32% 68%;min-height:566px;background:radial-gradient(110% 160% at 0 0,#829244 0,#464f22 29%,#29310b 58%,#141613 100%)}
.design-preview #platform .prow.bd .ptxt{padding:48px 10px 48px 40px}
.design-preview #platform .prow.bd .product-stage{padding-left:22px}
.design-preview #platform .prow[data-platform-panel="1"]{grid-template-columns:32% 68%;min-height:450px;background:radial-gradient(130% 140% at 0 0,#606b32 0,#444b41 28%,#29300b 57%,#151714 100%)}
.design-preview #platform .prow[data-platform-panel="1"] .ptxt{padding:32px 0 32px 26px}
.design-preview #platform .prow[data-platform-panel="1"] .product-stage{padding:28px 20px 28px 20px}
.design-preview #platform .prow[data-platform-panel="1"] h3{font-size:30px}
.design-preview #platform .prow[data-platform-panel="1"] p{font-size:14px}
.design-preview #platform .prow[data-platform-panel="2"]{grid-template-columns:47% 53%;min-height:450px;background:radial-gradient(100% 140% at 0 0,#333830,#222521 65%,#1c1e1b)}
.design-preview #platform .prow[data-platform-panel="2"] .ptxt{padding:32px 0 32px 28px}
.design-preview #platform .prow[data-platform-panel="2"] h3{font-size:30px}
.design-preview #platform .prow[data-platform-panel="2"] p{font-size:14px}
.design-preview #platform .prow[data-platform-panel="2"] .product-stage{padding:24px 20px 24px 16px}
.design-preview #platform .prow[data-platform-panel="3"]{grid-column:1/-1;grid-template-columns:38% 62%;min-height:510px;background:radial-gradient(110% 160% at 0 0,#2a2e28,#20231f 58%,#191c18)}
.design-preview #platform .prow[data-platform-panel="3"] .ptxt{padding:40px 12px 40px 40px}
.design-preview #platform .prow[data-platform-panel="3"]>.product-stage{padding:26px 28px 26px 18px}
.product-preview{position:relative;display:block;width:100%;max-width:100%;border-radius:18px;overflow:hidden;isolation:isolate;cursor:zoom-in;transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 16px 36px -20px rgba(0,0,0,.55)}
.design-preview #platform .product-preview img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;max-width:100%;border:0;border-radius:0;background:transparent;transform:none;filter:none}
.design-preview #platform .prow[data-platform-panel="2"] .product-preview{max-width:225px;border-radius:0;box-shadow:none;overflow:visible;filter:drop-shadow(0 18px 16px rgba(0,0,0,.24))}
.design-preview #platform .prow[data-platform-panel="3"] .product-preview{max-width:640px;border-radius:0;box-shadow:none;overflow:visible}
.preview-zoom{position:absolute;bottom:12px;right:12px;display:flex;align-items:center;gap:7px;padding:7px 10px;color:#ebecea;background:rgba(23,24,22,.86);border:1px solid rgba(255,255,255,.17);border-radius:100px;font-size:10px;font-weight:500;backdrop-filter:blur(10px);opacity:0;transition:opacity .2s ease}
.preview-zoom svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
.product-preview:hover .preview-zoom,.product-preview:focus-visible .preview-zoom{opacity:1}
.product-preview:focus-visible,.cinema-control:focus-visible,.preview-close:focus-visible{outline:2px solid #d2ff1d;outline-offset:5px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.product-preview:hover{transform:translateY(-3px)}}
.product-dialog,.tour-dialog{position:fixed;inset:0;width:min(1480px,94vw);max-width:none;max-height:92svh;margin:auto;padding:0;border:1px solid #373b35;border-radius:20px;color:#fff;background:#0f100e;box-shadow:0 32px 100px rgba(0,0,0,.6);overflow:hidden}
.product-dialog::backdrop,.tour-dialog::backdrop{background:rgba(6,6,6,.85);backdrop-filter:blur(10px)}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.1);background:#141613}
.preview-toolbar h2{margin:0;font:600 14px var(--sans);letter-spacing:0}
.preview-close{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#d5d7d4;font:500 12px var(--sans);padding:8px;min-height:40px;cursor:pointer}
.preview-close span{font-size:22px;line-height:1}
.product-dialog-scroll{overflow:auto;max-height:calc(92svh - 115px);overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.product-dialog-scroll img{display:block;width:100%;max-width:none;height:auto;background:transparent}
.product-dialog.is-portrait .product-dialog-scroll img{width:auto;max-width:100%;height:calc(92svh - 120px);margin:auto;object-fit:contain}
.preview-help{margin:0;padding:9px 20px;font-size:11px;color:#9ea19c}
.tour-dialog{max-width:1120px}
.design-preview .tour-dialog .tour-content{width:100%;margin:0;border:0;border-radius:0;box-shadow:none;transform:none;padding:0}
.design-preview .tour-dialog .frame{border:0;border-radius:0;box-shadow:none;transform:none}
.design-preview .tour-dialog .frame-bar{display:none}
.design-preview .tour-dialog .hv{aspect-ratio:16/9;max-height:calc(92svh - 76px);background:#0f100e}
.design-preview .tour-dialog .hv video{width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}
.design-preview .tour-dialog .hv-cover{display:none}
@media(max-width:1100px){
  .design-preview #platform>.w{padding-inline:24px}
  .design-preview #platform .prow.bd{grid-template-columns:33% 67%;min-height:450px}
  .design-preview #platform .prow.bd .ptxt{padding:32px 0 32px 28px}
  .design-preview #platform .prow[data-platform-panel="1"],.design-preview #platform .prow[data-platform-panel="2"]{grid-template-columns:1fr;align-content:start}
  .design-preview #platform .prow[data-platform-panel="1"] .ptxt,.design-preview #platform .prow[data-platform-panel="2"] .ptxt{padding:28px 28px 0}
  .design-preview #platform .prow[data-platform-panel="1"] h3 br,.design-preview #platform .prow[data-platform-panel="2"] h3 br{display:none}
  .design-preview #platform .prow[data-platform-panel="1"] p,.design-preview #platform .prow[data-platform-panel="2"] p{max-width:100%}
  .design-preview #platform .prow[data-platform-panel="2"] .product-preview{max-width:186px}
  .design-preview #platform .prow[data-platform-panel="3"] .ptxt{padding-left:28px}
}
@media(max-width:700px){
  .design-preview .hero{min-height:680px;min-height:90svh}
  .design-preview .hero .hero-grid{padding:128px 20px 112px}
  .design-preview .hero .hero-badge{font-size:8px;padding:7px 12px;margin-bottom:24px;letter-spacing:.07em}
  .design-preview .hero h1{font-size:clamp(28px,7.9vw,50px);line-height:1.1;letter-spacing:-.05em;margin-bottom:24px}
  .design-preview .hero .lead{max-width:460px;font-size:14px;line-height:1.6}
  .design-preview .hero-cta{gap:10px;width:100%;flex-direction:column;align-items:center;margin-bottom:22px}
  .design-preview .hero-cta .btn{width:240px;max-width:100%;min-height:48px;padding:12px 16px;font-size:13px}
  .cinema-control{bottom:24px;right:20px;padding:8px 12px;font-size:10px}
  .design-preview #platform{padding-top:64px;padding-bottom:64px}
  .design-preview #platform>.w{padding-inline:16px}
  .design-preview #platform>.w>.rv{margin-bottom:32px!important}
  .design-preview #platform .platform-bento{grid-template-columns:1fr;gap:18px}
  .design-preview #platform .prow.bd,.design-preview #platform .prow[data-platform-panel]{display:grid;grid-template-columns:1fr;min-height:0;height:auto;border-radius:26px}
  .design-preview #platform .prow .ptxt,.design-preview #platform .prow.bd .ptxt,.design-preview #platform .prow[data-platform-panel] .ptxt{padding:28px 26px 8px}
  .design-preview #platform .prow h3{font-size:30px;max-width:100%}
  .design-preview #platform .prow h3 br{display:none}
  .design-preview #platform .prow p{font-size:14px;max-width:100%}
  .design-preview #platform .prow .bd-cta{margin-top:24px}
  .design-preview #platform .prow .bd-vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;font-size:11px;margin-top:16px}
  .design-preview #platform .prow .bd-vals span{display:flex;align-items:center;gap:7px}
  .design-preview #platform .prow.bd .product-stage,.design-preview #platform .prow[data-platform-panel] .product-stage{padding:20px 12px 12px}
  .design-preview #platform .prow[data-platform-panel="2"] .product-stage{padding:20px 28px 28px}
  .design-preview #platform .prow[data-platform-panel="2"] .product-preview{max-width:248px;width:80%}
  .preview-zoom{opacity:1;font-size:9px;bottom:8px;right:8px;padding:5px 8px}
  .product-preview{border-radius:12px}
  .product-dialog,.tour-dialog{width:calc(100vw - 16px);border-radius:14px}
  .product-dialog:not(.is-portrait) .product-dialog-scroll img{width:1000px}
  .preview-toolbar{padding:10px 12px}
  .preview-toolbar h2{font-size:12px}
}
@media(max-width:360px){.design-preview .hero h1{font-size:7.7vw}.design-preview #platform .prow h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){
  .design-preview .hero h1>span,.design-preview .hero .btn,.design-preview #platform .prow,.product-preview{animation:none!important;transition:none!important}
  .design-preview .hero h1>span{opacity:1;transform:none;filter:none}
}

/* Requested: remove the floating background-video control. */
.design-preview #cinemaControl{display:none!important}

/* User preference: white button labels with the soft rose fill. */
.design-preview .btn-p{background:#c4f000;color:#fff;box-shadow:0 4px 16px -8px rgba(196,240,0,.22)}
.design-preview .btn-p:hover{background:#d4f73a;box-shadow:0 6px 20px -10px rgba(196,240,0,.3)}
.design-preview .btn-p::before{display:none}
.design-preview .brand-proof .bmq-t{animation-duration:26.666667s}