/* =========================================================
   Columna Esthetic · Black Friday 2026 · Lista de așteptare
   ========================================================= */

:root{
  /* colour: one ink, one paper, one accent (the logo blue) */
  --ink:#0C0D0F;
  --paper:#F1EFEA;
  --accent:#5499CD;
  --p-70:var(--paper);
  --p-50:var(--paper);
  --rule:rgba(241,239,234,.16);
  --i-60:var(--ink);
  --i-rule:rgba(12,13,15,.18);
  --err:#B3261E;

  /* type: one family, three sizes */
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(44px,6.8vw,104px);
  --fs-lead:clamp(18px,1.55vw,22px);
  --fs-body:clamp(14px,1vw,15px);

  --pad:clamp(64px,8vw,112px);
  --gutter:clamp(16px,3.4vw,40px);
  --max:1240px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-punch:cubic-bezier(.18,1.35,.4,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.intro-lock,.intro-lock body{overflow:hidden;overscroll-behavior:none}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* shared type */
.hero__title,.head__title,.finale__title,.done__title{
  font-size:var(--fs-display);font-weight:700;font-stretch:68%;line-height:.94;letter-spacing:-.01em;margin:0;text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--p-70);text-wrap:pretty}
.rule{display:block;height:1px;flex:1;background:var(--rule)}

/* split titles: words in masks, letters react to the cursor */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.w{display:inline-block}
.wm--acc{color:var(--accent)}
.ch{display:inline-block;transform-origin:50% 100%;
  transform:translateY(calc(var(--k,0) * -.14em)) scaleY(calc(1 + var(--k,0) * .28));
  color:color-mix(in oklab,var(--accent) calc(var(--k,0) * 100%),currentColor);
  text-shadow:calc(var(--k,0) * var(--gx,2px)) 0 rgb(255 64 160 / calc(var(--k,0) * .85)),calc(var(--k,0) * var(--gx,2px) * -1) 0 rgb(64 224 255 / calc(var(--k,0) * .85));
  transition:transform .45s var(--ease-out),color .45s var(--ease-out),text-shadow .3s var(--ease-out)}

/* section reveals */
.rv{opacity:0;translate:0 22px;transition:opacity .8s var(--ease-out) calc(var(--d,0) * 90ms),translate .8s var(--ease-out) calc(var(--d,0) * 90ms)}
.rv.in{opacity:1;translate:none}
.rv .fx-title .w,.fx-title.rv .w{transform:translateY(108%);transition:transform 1s var(--ease-out) calc(var(--wi,0) * 55ms + 80ms)}
.rv.in .fx-title .w,.fx-title.rv.in .w{transform:none}
.rv:has(.fx-title),.fx-title.rv{translate:none}

/* intro choreography: hidden until the particles land */
.js .ii{opacity:0;translate:0 18px}
.intro-done .ii{opacity:1;translate:none;transition:opacity 1s var(--ease-out) calc(var(--ii,0) * 120ms),translate 1s var(--ease-out) calc(var(--ii,0) * 120ms)}
.js .hero__title .w{opacity:0}
/* the raw title text must never paint before app.js splits it; only the split words can show.
   Safety net: if the script never arrives, the plain title appears after 12s */
.js .hero__title{visibility:hidden;animation:title-safety 0s 12s forwards}
.js .hero__title .wm{visibility:visible}
@keyframes title-safety{to{visibility:visible}}
/* the marquee under the hero waits for the intro too, otherwise its blue edge shows before the animation */
.js .ticker{opacity:0;animation:ticker-safety 0s 12s forwards}
.intro-done .ticker{opacity:1;transition:opacity 1s var(--ease-out) .36s}
@keyframes ticker-safety{to{opacity:1}}
.hero__title.go .w{animation:punch .85s var(--ease-punch) calc(var(--wi,0) * 65ms) both}
@keyframes punch{
  0%{opacity:0;transform:translateY(30%) scale(2.4)}
  45%{opacity:1}
  100%{opacity:1;transform:none}}
@media (hover:none){
  .hero__title.go .w{animation-name:punch-t}
  @keyframes punch-t{0%{opacity:0;transform:translateY(30%) scale(2.2)}45%{opacity:1}100%{opacity:1;transform:none}}
}

/* ---------- cursor + spotlight (desktop only) ---------- */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out)}
.cursor-on .cursor{opacity:1}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label,.has-cursor [data-cursor]{cursor:none}
.has-cursor input,.has-cursor textarea{cursor:text}
.cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--paper);transition:opacity .3s}
.cursor__ring{position:absolute;left:0;top:0;width:var(--rs,38px);height:var(--rs,38px);margin:calc(var(--rs,38px) / -2) 0 0 calc(var(--rs,38px) / -2);border-radius:999px;
  border:1px solid rgba(241,239,234,.55);display:grid;place-items:center;
  transition:width .45s var(--ease-out),height .45s var(--ease-out),margin .45s var(--ease-out),background-color .35s,border-color .35s,opacity .3s}
.cursor__label{font-size:var(--fs-body);font-weight:600;color:var(--ink);white-space:nowrap;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease-out)}
.cursor.is-link .cursor__ring{--rs:64px;background:rgba(241,239,234,.08);border-color:var(--paper)}
.cursor.is-label .cursor__ring{--rs:96px;background:var(--accent);border-color:var(--accent)}
.cursor.is-label .cursor__label{opacity:1;transform:none}
.cursor.is-label .cursor__dot,.cursor.is-link .cursor__dot{opacity:0}
.cursor__dot,.cursor__ring{transition-property:width,height,margin,background-color,border-color,opacity}
.cursor.on-light .cursor__dot{background:var(--ink)}
.cursor.on-light .cursor__ring{border-color:rgba(12,13,15,.7)}
.cursor.on-light.is-link .cursor__ring{background:rgba(12,13,15,.08);border-color:var(--ink)}
.cursor.is-field .cursor__ring,.cursor.is-field .cursor__dot,.cursor.is-out .cursor__ring,.cursor.is-out .cursor__dot{opacity:0}
.glow{display:none}
.has-cursor .glow{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1s var(--ease-out)}
.cursor-on .glow{opacity:1}
.glow span{position:absolute;left:0;top:0;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;will-change:transform,opacity}
.glow__b{background:radial-gradient(closest-side,rgba(84,153,205,.30),rgba(84,153,205,.08) 50%,rgba(84,153,205,0))}
.glow__c{background:radial-gradient(closest-side,rgba(40,220,255,.34),rgba(40,220,255,.08) 42%,rgba(40,220,255,0))}
.glow__m{background:radial-gradient(closest-side,rgba(255,40,150,.32),rgba(255,40,150,.08) 42%,rgba(255,40,150,0))}

/* reading progress */
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:90;pointer-events:none}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7FD8F5);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule);position:relative;z-index:2}
.mast__row{display:flex;align-items:center;justify-content:center;height:72px}
.mast__logo img{width:clamp(112px,10vw,132px)}
.mast__meta{display:flex;gap:28px;color:var(--p-50)}
.mast__meta a{color:var(--paper);font-weight:600}
.ulink{text-decoration:none;background:linear-gradient(currentColor,currentColor) 100% 100% / 0 1px no-repeat;transition:background-size .5s var(--ease-io)}
.ulink:hover{background-size:100% 1px;background-position:0 100%}

/* ---------- buttons ---------- */
.btn{--h:66px;position:relative;translate:0 0;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;height:var(--h);padding:0 9px 0 30px;border-radius:999px;
  color:var(--ink);font-size:var(--fs-lead);font-weight:700;text-decoration:none;isolation:isolate;cursor:pointer;border:0;
  transition:translate .3s var(--ease-out),transform .6s var(--ease-out),box-shadow .35s var(--ease-out);will-change:transform;box-shadow:0 10px 40px -14px rgba(84,153,205,.8)}
.btn__bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;background:var(--accent)}
/* hover: the text never moves; a soft light follows the pointer, the halo blooms and one quick shine crosses */
.btn__bg::before{content:"";position:absolute;inset:0;background:radial-gradient(140px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);opacity:0;transition:opacity .3s var(--ease-out)}
.btn:hover .btn__bg::before,.btn:focus-visible .btn__bg::before{opacity:1}
.btn:hover,.btn:focus-visible{box-shadow:0 0 0 4px rgba(84,153,205,.28),0 0 44px rgba(84,153,205,.6),0 20px 50px -10px rgba(84,153,205,1)}
.btn__ping{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);pointer-events:none;animation:ping 2.6s var(--ease-out) infinite}
.btn__ping + .btn__ping{display:none}
.btn:hover .btn__ping{animation:none;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.85}75%,100%{transform:scale(1.12,1.5);opacity:0}}
.btn__txt{position:relative;display:inline-flex;white-space:nowrap}
/* shine: a band of light sweeps across every few seconds, inviting the click */
.btn__bg::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-35%;width:26%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg) translateX(0);animation:shine 3.4s var(--ease-io) infinite}
@keyframes shine{0%,58%{transform:skewX(-20deg) translateX(0)}100%{transform:skewX(-20deg) translateX(620%)}}
.btn:hover .btn__bg::after{animation:shine-hover .7s var(--ease-out) 1 both}
@keyframes shine-hover{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(620%)}}
.btn:hover{translate:0 -3px}
.btn__arr{position:relative;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);overflow:hidden;flex:none;transition:transform .35s var(--ease-out)}
.btn__arr svg{position:absolute;left:14px;top:14px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-out)}
.btn__arr svg:first-child{animation:nudge-x 2.6s var(--ease-io) infinite}
.btn__arr svg + svg{transform:translateX(-200%)}
.btn:hover .btn__arr{transform:scale(1.08)}
.btn:hover .btn__arr svg:first-child{animation:none;transform:translateX(200%)}
.btn:hover .btn__arr svg + svg{transform:none}
@keyframes nudge-x{0%,60%,100%{transform:none}75%{transform:translateX(5px)}}
.btn--xl{--h:84px;padding-left:40px;gap:36px}
.btn--xl .btn__arr{width:64px;height:64px}
.btn--xl .btn__arr svg{left:20px;top:20px;width:24px;height:24px}
.btn--block{width:100%}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn__arr svg{animation:none}
.btn.is-busy .btn__arr::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(241,239,234,.3);border-top-color:var(--paper);animation:spin .8s linear infinite}
.btn.is-busy .btn__arr svg{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding-bottom:clamp(40px,6vw,72px)}
.pfx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero > .wrap,.hero__mega{position:relative;z-index:1}
/* opening: the logo, centred on screen, before it turns into particles */
.intro-logo{position:fixed;left:50%;top:50%;z-index:60;width:clamp(220px,30vw,420px);pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
.intro-logo img{width:100%;filter:drop-shadow(0 0 40px rgba(84,153,205,.45))}
.js .intro-logo{animation:logo-in .9s var(--ease-out) 2.55s forwards}
/* the very first beat: a question, before the logo */
.intro-q{position:fixed;left:50%;top:50%;z-index:61;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;opacity:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  font-size:min(calc(var(--fs-display) * .95),11vw);font-weight:200;line-height:1;letter-spacing:-.02em;color:var(--paper);-webkit-font-smoothing:antialiased}
.js .intro-q{animation:q-in-out 1.45s cubic-bezier(.45,0,.2,1) .05s forwards}
/* second beat: the tease */
.js .intro-q--2{animation-delay:1.35s}
.intro-q--2 span{color:var(--accent)}
@keyframes q-in-out{
  0%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) scale(1.12)}
  38%{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
  70%{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
  100%{opacity:0;filter:blur(10px);transform:translate(-50%,-50%) scale(1.08)}}
.intro-logo.gone{animation:logo-out .2s linear forwards}
@keyframes logo-in{from{opacity:0;transform:translate(-50%,-46%) scale(.94);filter:blur(10px)}to{opacity:1;transform:translate(-50%,-50%);filter:blur(0)}}
@keyframes logo-out{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}
@media (max-width:760px){.intro-logo{width:62vw}}
.hero__float{will-change:transform,opacity}
.hero__line{display:flex;justify-content:center;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule);text-align:center}
.hero__tag::after{content:"";display:inline-block;width:1px;height:1.1em;margin-left:14px;background:var(--line-2,rgba(241,239,234,.35));vertical-align:-.2em}
.hero__phone{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-lead);font-weight:600;color:var(--paper);text-decoration:none;font-variant-numeric:tabular-nums;transition:color .3s}
.hero__phone svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linejoin:round;transition:transform .5s var(--ease-punch)}
.hero__phone:hover{color:var(--accent)}
.hero__phone:hover svg{transform:rotate(-14deg) scale(1.1)}
.hero__when{color:var(--p-70)}
.hero__mega{height:clamp(150px,min(24vw,25vh),380px);margin:clamp(10px,1.8vh,22px) 0 clamp(6px,1.2vh,14px);pointer-events:none}
.hero__title{max-width:14.5em;margin:0 auto;text-align:center}
.hero__lead{max-width:36em;margin:clamp(16px,2vw,24px) auto 0;text-align:center}
.hero__count{display:flex;flex-direction:column;align-items:center;margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--rule)}
.hero__count .clock{justify-content:center}
@media (min-width:1100px){
  .hero__count{display:grid;grid-template-columns:auto auto;column-gap:clamp(36px,4vw,64px);justify-content:center;align-items:center}
  .hero__count .clock__label{grid-column:1 / -1;text-align:center}
  .hero__count .clock{margin-bottom:0}
}
.hero__count .clock__u{flex:none;width:clamp(96px,9.5vw,148px);align-items:center;text-align:center}

.split{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule)}
.split__rule{background:var(--rule)}
.split .lead{max-width:30em}

.clock__label{color:var(--paper);margin-bottom:6px}
.clock{display:flex;margin-bottom:26px}
.clock__u{display:flex;flex-direction:column;gap:8px;padding:0 clamp(14px,2vw,26px);border-left:1px solid var(--rule);flex:1;min-width:0}
.clock__u:first-child{padding-left:0;border-left:0}
.clock__n{display:flex;font-size:var(--fs-display);font-weight:600;font-stretch:68%;line-height:1.08}
.clock__l{color:var(--paper)}
.clock__n.beat{animation:beat .95s var(--ease-out)}
@keyframes beat{0%{transform:scale(1.07);text-shadow:0 0 28px rgba(84,153,205,.9)}100%{transform:none;text-shadow:0 0 0 rgba(84,153,205,0)}}
.slot{display:inline-grid;overflow:hidden;width:.58em;height:1.08em;text-align:center}
.slot i{grid-area:1/1;font-style:normal;display:block;will-change:transform,filter}
.clock__u:last-child .clock__n{color:var(--accent)}

/* =========================================================
   VELOCITY MARQUEE
   ========================================================= */
.ticker{background:var(--accent);color:var(--ink);overflow:hidden;white-space:nowrap;position:relative}
.ticker__track{display:inline-flex;will-change:transform}
.ticker__set{display:inline-flex;align-items:center;padding:.12em 0 .16em;font-size:var(--fs-display);font-weight:700;font-stretch:68%;line-height:1}
.ticker__set span{padding:0 .28em;transition:color .3s}
.ticker__set i{font-style:normal;font-weight:400;color:var(--paper)}
.ticker__set span:nth-of-type(2n){color:var(--paper)}

/* =========================================================
   SECTION HEADS
   ========================================================= */
.head{margin-bottom:clamp(32px,4vw,52px)}
.head__label{color:var(--accent);font-weight:600;margin-bottom:14px}
.head__title{max-width:14em}
.head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}

/* =========================================================
   PRICE SHEET
   ========================================================= */
.sheet{padding:var(--pad) 0 calc(var(--pad) * .7)}
.table{border-top:1px solid var(--paper)}
.table__head,.row{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,.55fr);gap:24px;align-items:center}
.table__head{padding:12px 0;color:var(--p-50);border-bottom:1px solid var(--rule)}
.t-r{text-align:right}
.row{position:relative;padding:24px 0;border-bottom:1px solid var(--rule);isolation:isolate}
.row.rv{opacity:1;translate:none}
.row__wipe{position:absolute;left:0;right:0;top:-1px;bottom:-1px;z-index:3;pointer-events:none;background:var(--ink);transform-origin:100% 50%;
  transition:transform 1.1s var(--ease-io) calc(var(--i,0) * 90ms)}
.row__wipe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 18px 2px rgba(84,153,205,.8)}
.row.in .row__wipe{transform:scaleX(0)}
.row.rv .redact__bar{transform:scaleX(0);transform-origin:0 50%}
.row.rv.in .redact__bar{transform:none;transition:transform .7s var(--ease-io) calc(var(--i,0) * 90ms + .7s)}
.row.rv .row__pct{opacity:0;scale:.4}
.row.rv.in .row__pct{opacity:1;scale:1;transition:opacity .4s calc(var(--i,0) * 90ms + .8s),scale .7s var(--ease-punch) calc(var(--i,0) * 90ms + .8s),transform .5s var(--ease-punch)}
.row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-io)}
.row::after{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);z-index:-1;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(420px 160px at var(--mx,50%) 50%,rgba(84,153,205,.16),rgba(84,153,205,0))}
.row:hover::before{transform:scaleX(1)}
.row:hover::after{opacity:1}
.row__info{transition:transform .6s var(--ease-out)}
.row:hover .row__info{transform:translateX(14px)}
.row__name{font-size:var(--fs-lead);font-weight:600;line-height:1.25}
.row__desc{color:var(--p-50);margin-top:4px}
.row__list{font-size:var(--fs-lead);color:var(--p-50)}
.row__list s{text-decoration-thickness:1px}
.row__bf{font-size:var(--fs-lead);font-weight:600}
.row__save{display:none;font-size:var(--fs-body);font-weight:400;color:var(--accent)}
.row__pct{font-size:var(--fs-lead);font-weight:600;color:var(--accent);text-align:right;transition:transform .5s var(--ease-punch)}
.row:hover .row__pct{transform:scale(1.25);transform-origin:100% 50%}

.redact{position:relative;display:inline-block;min-width:5.6em;white-space:nowrap}
.redact__val{font-variant-numeric:tabular-nums}
.redact__bar{position:absolute;left:-6px;right:-6px;top:-3px;bottom:-3px;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-body);font-weight:600;transform-origin:100% 50%;transition:transform .7s var(--ease-io)}
.row.rv.in:hover .redact__bar,.row.rv.in.peek .redact__bar{transform:translateX(44%);transition-delay:0s}
.redact__bar.nudge{animation:nudge .5s var(--ease-io)}
@keyframes nudge{25%{translate:-6px 0}50%{translate:5px 0}75%{translate:-3px 0}}
.is-on .row.rv .redact__bar,.is-on .row.rv.in:hover .redact__bar{transform:scaleX(0);transform-origin:100% 50%;transition-delay:calc(var(--i,0) * 80ms)}
.is-on .row__save{display:block;animation:rise .6s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms + .4s)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

/* ---------- service photo cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
/* the two groups from the clinic's list: single treatments, then packages */
.svc__group{display:flex;align-items:center;justify-content:center;gap:18px;margin:clamp(40px,5vw,72px) 0 clamp(18px,2vw,28px);font-size:var(--fs-lead);font-weight:700;line-height:1.2;color:var(--paper);text-align:center}
.svc__group:first-child{margin-top:0}
.svc__group .rule{max-width:220px}
.svc__card{position:relative;display:flex}
/* the card (hover target) stays put; only the inner layer lifts, so the hover can't flicker on and off at the edge */
.svc__lift{position:relative;display:flex;flex-direction:column;width:100%;border-radius:24px;overflow:hidden;background:#14171C;isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--rule);transform:translateZ(0);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.svc__card.in:hover .svc__lift{transform:translate3d(0,-10px,0);box-shadow:inset 0 0 0 1px rgba(84,153,205,.7),0 40px 80px -30px rgba(84,153,205,.45)}
.svc__card.rv{opacity:0;translate:0 50px;transition:opacity .9s var(--ease-out) calc(var(--i,0) * 110ms),translate 1s var(--ease-out) calc(var(--i,0) * 110ms)}
.svc__card.rv.in{opacity:1;translate:0 0}
.svc__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#1B1F26}
.svc__media img,.svc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0) scale(1);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform 1.2s var(--ease-out)}
.svc__card:hover .svc__media img,.svc__card:hover .svc__media video{transform:translateZ(0) scale(1.07)}
/* slideshow: slides cross-fade; a clip fades in over its poster once it is actually playing */
.svc__media .sl{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease-out)}
.svc__media .sl.is-on{opacity:1}
.svc__media video{opacity:0;transition:opacity .45s var(--ease-out),transform 1.2s var(--ease-out)}
.svc__media video.is-playing{opacity:1}
.sl-bars{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;display:flex;gap:5px;pointer-events:none}
.sl-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.sl-bars b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.sl-bars i.done b{transform:none}
.sl-bars i.run b{animation:sl-run var(--d,4s) linear forwards}
.sl-bars.paused i.run b{animation-play-state:paused}
@keyframes sl-run{to{transform:none}}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,15,0) 55%,rgba(12,13,15,.55));pointer-events:none}
/* -40% bookmark: a silk ribbon tucked under the top edge of the photo */
.svc__badge{position:absolute;top:-8px;right:20px;z-index:2;filter:drop-shadow(0 8px 10px rgba(12,13,15,.42));
  transform:translate3d(0,-110%,0);transition:transform .9s var(--ease-punch) calc(var(--i,0) * 110ms + .8s)}
.svc__card.in .svc__badge{transform:none;transition-delay:calc(var(--i,0) * 110ms + .8s)}
.svc__card.in:hover .svc__badge{transform:translate3d(0,6px,0);transition:transform .6s var(--ease-punch)}
/* slim black ribbon: a fine blue keyline follows the notched tail */
.bm{position:relative;display:flex;justify-content:center;width:60px;height:80px;padding-top:26px;color:var(--paper);
  background:linear-gradient(172deg,#222B38 0%,#12161C 45%,#0C0D0F 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%)}
.bm::before{content:"";position:absolute;inset:0;pointer-events:none;background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80' preserveAspectRatio='none'%3E%3Cpath d='M4 0V74.3L30 65.3L56 74.3V0' fill='none' stroke='%235499CD' stroke-opacity='.85' stroke-width='1'/%3E%3C/svg%3E")}
.bm::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.bm b{position:relative;font-size:var(--fs-lead);font-weight:800;font-stretch:68%;line-height:1;letter-spacing:-.01em}
.bm i{font-style:normal;color:var(--accent)}
.svc__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;container-type:inline-size}
#oferte .head{text-align:center}
#oferte .head__title{margin-inline:auto}
.svc__name,.svc__desc{text-align:center}
.svc__name{margin:0 0 6px;font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.svc__desc{color:var(--paper);margin-bottom:18px}
.svc__price{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);font-size:min(var(--fs-lead),7.2cqi)}
.svc__list,.svc__bf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.svc__list s{font-weight:600;text-decoration-thickness:1.5px;text-decoration-color:var(--accent)}
.svc__bf{position:relative;min-height:56px;margin-top:12px;font-weight:600}
.svc__bf .redact{position:static;flex:none;min-width:0;font-weight:700}
.svc__bfl{white-space:nowrap}
.svc .redact__bar{left:0;right:0;top:0;bottom:0;gap:10px;border:0;border-radius:14px;font-size:inherit;font-weight:700;background:var(--paper);color:var(--ink);font-family:var(--f);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums;
  transition:background-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .8s var(--ease-io)}
.svc .redact__bar svg{flex:none;width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lk__shackle{transform-box:fill-box;transform-origin:100% 100%;transition:transform .55s var(--ease-punch)}
/* hover a card: the lock turns blue, the shackle lifts, the date rolls into a live countdown */
.svc__card:hover .redact__bar{background:var(--accent);box-shadow:0 8px 24px -6px rgba(84,153,205,.9)}
.svc__card:hover .lk__shackle{transform:translateY(-3px) rotate(-18deg)}
.svc .redact__bar:focus-visible{background:var(--accent)}
.svc .redact__bar:active{transform:scale(.97)}
/* "Află prețul" wiggles every couple of seconds; it runs on the wrapper with a plain transform (iOS Safari drops the individual rotate/scale props), so the bar's own transform stays free for :active and the unlock */
.svc__card.in .svc__bf .redact__bar{transform-origin:50% 50%;animation:bar-wiggle 2.6s var(--ease-io) calc(var(--i,0) * .35s + 1.2s) infinite;will-change:transform}
.svc__card.in .redact__bar svg{animation:lk-hop 2.6s var(--ease-io) calc(var(--i,0) * .35s + 1.2s) infinite}
.is-on .svc__card .svc__bf .redact__bar,.is-on .svc__card .redact__bar svg{animation:none}
@keyframes bar-wiggle{0%,62%,100%{transform:none}66%{transform:rotate(-2.6deg) scale(1.045)}71%{transform:rotate(2.2deg) scale(1.045)}76%{transform:rotate(-1.6deg) scale(1.03)}81%{transform:rotate(1deg) scale(1.02)}86%{transform:rotate(-.5deg) scale(1.01)}90%{transform:none}}
@keyframes lk-hop{0%,62%,90%,100%{transform:none}67%{transform:translateY(-3px) rotate(-8deg)}74%{transform:none}79%{transform:translateY(-2px)}84%{transform:none}}
.svc__card .row__save{margin-top:8px}
.is-on .svc .redact__bar{transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s var(--ease-io) calc(var(--i,0) * 80ms)}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* two columns: an odd last card sits centred under the pair, at the same width */
@media (min-width:561px) and (max-width:900px){.svc > :last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - clamp(14px,1.6vw,22px) / 2)}}
@media (max-width:560px){.svc{grid-template-columns:minmax(0,1fr)}}

.sheet__note{display:flex;align-items:center;gap:18px;margin-top:28px;color:var(--p-70);justify-content:center;text-align:center;text-wrap:balance}
@media (max-width:760px){.sheet__note .rule{display:none}}

/* =========================================================
   WAITLIST: a paper sheet that expands to full bleed as you scroll in
   ========================================================= */
.list{position:relative;padding:clamp(44px,4.6vw,72px) 0 clamp(56px,6vw,96px);color:var(--ink);isolation:isolate;--f:1}
.list__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s var(--ease-out);mix-blend-mode:multiply;
  clip-path:inset(calc((1 - var(--f)) * 9%) calc((1 - var(--f)) * 6%) round calc((1 - var(--f)) * 56px));
  background:radial-gradient(320px circle at var(--b-x,-600px) var(--b-y,-600px),rgba(84,153,205,.42),rgba(84,153,205,0) 70%),
             radial-gradient(260px circle at var(--c-x,-600px) var(--c-y,-600px),rgba(30,200,240,.26),rgba(30,200,240,0) 70%),
             radial-gradient(260px circle at var(--m-x,-600px) var(--m-y,-600px),rgba(255,40,150,.2),rgba(255,40,150,0) 70%)}
.list.glow-on .list__glow{opacity:1}
.list__sheet{position:absolute;inset:0;z-index:-1;background:var(--paper);
  clip-path:inset(calc((1 - var(--f)) * 9%) calc((1 - var(--f)) * 6%) round calc((1 - var(--f)) * 56px))}
.list .head__label{color:var(--accent)}
.list__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
/* glassy wake behind the sliding title (drawn by app.js) */
.list__lava{position:absolute;left:0;top:0;width:100%;height:0;z-index:0;pointer-events:none}
.list__mega{margin:0;font-size:calc(var(--fs-display) * 1.7);font-weight:700;font-stretch:66%;line-height:.86;letter-spacing:-.02em}
.list__line{display:block;white-space:nowrap;text-align:center;transform:translate3d(calc((1 - var(--t,1)) * var(--dir) * 30vw),0,0);will-change:transform}
.list__lead{max-width:32em;margin:22px auto 0;color:var(--ink)}
@media (min-width:1000px){.list__lead{max-width:none}.list__lead .one-line{display:block;white-space:nowrap}}
.points{list-style:none;margin:44px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.points li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 20px;isolation:isolate;color:var(--ink);transition:color .45s var(--ease-out)}
.points li + li{border-left:1px solid var(--ink)}
.points li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease-io)}
.points b{font-size:var(--fs-lead);font-weight:700;color:var(--accent)}
.points li:hover{color:var(--paper)}
.points li:hover::before{transform:scaleY(1)}
.list__cta{margin-top:clamp(40px,5vw,64px)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);width:100%;margin-top:clamp(30px,3.4vw,48px);perspective:1400px;text-align:left}
.list__pin{width:100%}
.list__stage{width:100%;display:flex;flex-direction:column;align-items:center}
.cards-run{display:none}
@media (min-width:761px){
  .list__stage{position:sticky;top:var(--stick,24px)}
  .cards-run{display:block;height:var(--run,0px)}
}
.card{--p:1;position:relative;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);border-radius:28px;padding:12px 12px 30px;overflow:hidden;
  transform-origin:50% 100%;translate:0 0;
  transform:translate3d(0,calc((1 - var(--p)) * 170px),0) rotateX(calc((1 - var(--p)) * 26deg)) scale(calc(.84 + var(--p) * .16));
  opacity:clamp(0,calc(var(--p) * 1.6 - .3),1);
  box-shadow:0 50px 90px -50px rgba(12,13,15,.7);will-change:transform,opacity;transition:translate .6s var(--ease-out),box-shadow .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover{translate:0 -10px;box-shadow:0 70px 110px -50px rgba(12,13,15,.8),0 0 0 1px rgba(84,153,205,.5)}}
.card__vis{position:relative;height:clamp(200px,17vw,250px);border-radius:20px;margin-bottom:26px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 100% at 50% 110%,rgba(84,153,205,.55),rgba(84,153,205,0) 70%),radial-gradient(60% 60% at 0% 0%,rgba(84,153,205,.14),rgba(84,153,205,0) 70%),#171A20;
  transition:background-color .6s}
@media (hover:hover) and (pointer:fine){.card:hover .card__vis{background-color:#1D222B}}
.list .card,.list .card *{-webkit-tap-highlight-color:transparent}
.card__kicker,.card__title,.card__text{padding:0 18px}
.card__kicker{color:var(--accent);font-weight:700;margin-bottom:8px}
.card__title{margin:0 0 10px;font-size:var(--fs-lead);font-weight:700;line-height:1.2}
.card__text{color:var(--paper)}

/* Direct: an SMS lands */
.typing{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;gap:6px;padding:13px 18px;border-radius:99px;background:rgba(241,239,234,.12);transition:opacity .3s .5s,scale .3s .5s}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--paper);animation:typing 1s var(--ease-io) infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none}30%{transform:translateY(-6px)}}
.card.lit .typing{opacity:0;scale:.5}
.sms{display:flex;gap:12px;width:88%;padding:14px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 24px 50px -14px rgba(0,0,0,.7);
  transform:translateY(40px) scale(.86);opacity:0;transition:transform .9s var(--ease-punch) .6s,opacity .5s .6s}
.card.lit .sms{transform:none;opacity:1}
.sms__ico{width:40px;height:40px;border-radius:11px;flex:none}
.sms__top{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px}
.sms__top span{font-weight:600;color:var(--accent)}
.sms__msg{line-height:1.38}

/* Primul: the bell rings */
.card__vis--bell{display:flex;flex-direction:column;justify-content:center;gap:18px}
.bell{position:relative;width:96px;height:96px;display:grid;place-items:center}
.bell__svg{position:relative;z-index:1;width:76px;height:76px;transform-origin:50% 12%}
.bell__body{fill:var(--paper)}
.bell__clap{fill:var(--accent)}
.bell__badge{position:absolute;z-index:2;right:2px;top:2px;min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:var(--accent);color:var(--ink);
  font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 4px #171A20,0 0 20px rgba(84,153,205,.9);transform:scale(0);transition:transform .6s var(--ease-punch) 1s}
.bell__ring{position:absolute;inset:6px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.card.lit .bell__svg{animation:ring 2.8s var(--ease-io) .6s infinite}
.card.lit .bell__badge{transform:none}
.card.lit .bell__ring{animation:ripple 2.8s var(--ease-out) .6s infinite}
.card.lit .bell__ring:nth-child(2){animation-delay:.9s}
.card.lit .bell__ring:nth-child(3){animation-delay:1.2s}
@keyframes ring{0%{transform:rotate(0)}6%{transform:rotate(18deg)}12%{transform:rotate(-16deg)}18%{transform:rotate(12deg)}24%{transform:rotate(-8deg)}30%{transform:rotate(4deg)}36%,100%{transform:rotate(0)}}
@keyframes ripple{0%{transform:scale(.7);opacity:.9}40%,100%{transform:scale(1.9);opacity:0}}
.bell__note{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .5s 1.1s,transform .7s var(--ease-out) 1.1s}
.bell__note b{font-weight:700}
.bell__note span{color:var(--accent);font-weight:600}
.card.lit .bell__note{opacity:1;transform:none}

/* (legacy) Primul clock */
.cclock{display:flex;align-items:center;font-size:clamp(58px,6.4vw,100px);font-weight:700;font-stretch:68%;line-height:1.08;color:var(--paper);transition:color .4s 1.3s,text-shadow .6s 1.3s}
.cclock__n{display:flex}
.cclock__sep{margin:0 .03em;animation:sep 1s steps(2,jump-none) infinite}
@keyframes sep{50%{color:var(--accent)}}
.card.lit .cclock{color:var(--accent);text-shadow:0 0 40px rgba(84,153,205,.9)}
.cclock__date{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-weight:600}

/* Liber: the switch flips on */
.card__vis--toggle{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 20px}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:16px 18px;border-radius:16px;background:rgba(241,239,234,.08)}
.tgl__label{font-weight:600}
.tgl__sw{position:relative;flex:none;width:58px;height:34px;border-radius:99px;background:rgba(241,239,234,.25);transition:background-color .4s .7s,box-shadow .4s .7s}
.tgl__sw i{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.45);transition:transform .6s var(--ease-punch) .7s}
.card.lit .tgl__sw{background:var(--accent);box-shadow:0 0 22px rgba(84,153,205,.8)}
.card.lit .tgl__sw i{transform:translateX(24px)}
.tgl__link{color:var(--accent);font-weight:600}
.points li:hover svg{transform:none;opacity:1;color:var(--accent)}

/* the form: an ink card on the paper sheet */
.paper{background:var(--ink);color:var(--paper);padding:clamp(28px,3.4vw,48px);position:relative;overflow:hidden}
/* popup glows: a soft light on each half trails the system cursor (moved by app.js, transform + opacity only) */
.glowl{position:absolute;left:0;top:0;z-index:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity}
.glowl--paper{background:radial-gradient(closest-side,rgba(84,153,205,.36),rgba(84,153,205,.12) 55%,rgba(84,153,205,0))}
.glowl--side{background:radial-gradient(closest-side,rgba(255,255,255,.36),rgba(255,255,255,.1) 55%,rgba(255,255,255,0))}
.form,.done{position:relative}
.field{position:relative;margin-bottom:14px}
.field input{width:100%;height:66px;padding:26px 52px 8px 20px;border:1px solid rgba(241,239,234,.22);border-radius:14px;outline:none;color:var(--paper);
  background:rgba(241,239,234,.045);font-family:var(--f);font-size:max(16px,var(--fs-lead));font-weight:500;
  transition:border-color .3s,background-color .3s,box-shadow .4s var(--ease-out);-webkit-appearance:none;appearance:none}
.field label{position:absolute;left:21px;top:22px;font-weight:600;color:var(--paper);pointer-events:none;transform-origin:0 0;
  transition:transform .4s var(--ease-out),color .3s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-12px) scale(.86);color:var(--accent)}
.field input:hover{border-color:rgba(241,239,234,.4)}
.field input:focus{border-color:var(--accent);background:rgba(84,153,205,.1);box-shadow:0 0 0 4px rgba(84,153,205,.22),0 10px 30px -10px rgba(84,153,205,.6)}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #1A2230 inset;-webkit-text-fill-color:var(--paper)}
.field__ok{position:absolute;right:16px;top:20px;width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center;
  transform:scale(0) rotate(-90deg);transition:transform .5s var(--ease-punch)}
.field__ok svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.field.is-valid .field__ok{transform:none}
.field.is-valid input{border-color:rgba(84,153,205,.7)}
.field.has-err input{border-color:#FF8A80;box-shadow:0 0 0 4px rgba(255,138,128,.16)}
.field__err{display:block;color:#FF8A80;margin-top:6px;padding-left:4px}
.field__err:empty{display:none}
.field__err--check{margin:-10px 0 16px}
.check{display:flex;gap:14px;align-items:flex-start;margin:10px 0 22px;padding:14px 16px;border-radius:14px;background:rgba(241,239,234,.045);cursor:pointer;color:var(--paper);line-height:1.5;transition:background-color .3s}
.check:hover{background:rgba(84,153,205,.1)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:none;width:24px;height:24px;margin-top:0;border-radius:7px;border:1.5px solid var(--paper);display:grid;place-items:center;transition:background .25s,border-color .25s}
.check__box svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease-out)}
.check input:checked + .check__box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .check__box svg{stroke-dashoffset:0}
.check input:focus-visible + .check__box{outline:2px solid var(--accent);outline-offset:2px}
.check a{color:var(--paper)}
.btn--block{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form__fail{margin-top:14px;color:#FF8A80}
.form__fine{margin-top:16px;color:var(--paper)}
.form__head{margin-bottom:18px;padding-right:56px}
.form__kicker{color:var(--accent);font-weight:700;margin-bottom:6px}
.form__title{margin:0;font-size:var(--fs-lead);font-weight:700;line-height:1.2}

/* form wins: every completed step is celebrated (sparks are drawn on .burst by app.js) */
/* performance: loops sleep off screen and behind the popup */
.off,.off *,.modal-open main *{animation-play-state:paused!important}
.modal-open .glow{opacity:0}
.burst{position:fixed;inset:0;width:100%;height:100%;z-index:250;pointer-events:none}
.form__kicker{overflow:hidden}
.form__kicker span{display:inline-block}
.form__kicker span.roll-out{animation:roll-out .26s var(--ease-io) forwards}
.form__kicker span.roll-in{animation:roll-in .6s var(--ease-punch) both}
@keyframes roll-out{to{transform:translateY(-110%);opacity:0}}
@keyframes roll-in{from{transform:translateY(110%);opacity:0}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px}
.steps i{position:relative;height:4px;border-radius:2px;background:rgba(241,239,234,.14);transition:box-shadow .6s var(--ease-out)}
.steps i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#7FD8F5);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.steps i.on{box-shadow:0 0 14px rgba(127,216,245,.55)}
.steps i.on::after{transform:none}
.fx{position:absolute;left:0;right:0;top:0;height:66px;border-radius:14px;pointer-events:none;overflow:hidden;opacity:0}
.check .fx{height:auto;bottom:0}
.fx::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(105deg,rgba(127,216,245,0) 30%,rgba(127,216,245,.38) 47%,rgba(255,255,255,.6) 50%,rgba(127,216,245,.38) 53%,rgba(127,216,245,0) 70%)}
.fx::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px #7FD8F5,inset 0 0 26px rgba(127,216,245,.45)}
.win > .fx{animation:fx-fade 1.2s var(--ease-out) both}
.win > .fx::before{animation:fx-sweep .85s var(--ease-out) both}
@keyframes fx-fade{0%{opacity:0}10%,55%{opacity:1}100%{opacity:0}}
@keyframes fx-sweep{to{transform:translateX(100%)}}
.field__ok svg path{stroke-dasharray:20;stroke-dashoffset:0}
.field.win .field__ok,.check.win .check__box{animation:ok-pop .7s var(--ease-punch) both}
.field.win .field__ok svg path{animation:ok-draw .45s var(--ease-out) .18s both}
@keyframes ok-pop{0%{transform:scale(0) rotate(-40deg)}55%{transform:scale(1.5) rotate(10deg)}100%{transform:none}}
@keyframes ok-draw{from{stroke-dashoffset:20}}
.check{position:relative}
.modal__big{transform-origin:0 70%}
.modal__big.punch{animation:big-punch .75s var(--ease-punch)}
@keyframes big-punch{0%{transform:none}30%{transform:scale(1.1) rotate(-2.5deg)}100%{transform:none}}
.btn.is-ready{box-shadow:0 0 0 4px rgba(84,153,205,.28),0 0 44px rgba(84,153,205,.6),0 20px 50px -10px rgba(84,153,205,1)}
.btn.charged{animation:charge .9s var(--ease-punch)}
.btn.charged .btn__bg::after{animation:shine-hover .9s var(--ease-out) 1 both}
@keyframes charge{0%{transform:none}28%{transform:scale(1.05)}100%{transform:none}}
.meter{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.meter__bar{flex:1;height:6px;border-radius:99px;background:rgba(241,239,234,.12);overflow:hidden}
.meter__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#8FD3F7);transform-origin:0 50%;transform:scaleX(var(--m,0));transition:transform .6s var(--ease-punch);box-shadow:0 0 14px rgba(84,153,205,.8)}
.meter__txt{font-weight:600;white-space:nowrap}
.meter.full .meter__txt{color:var(--accent)}

.form.out{opacity:0;translate:0 -10px;transition:opacity .35s var(--ease-out),translate .35s var(--ease-out)}
.done{outline:none}
.done.in .done__title,.done.in > p,.done.in li,.done.in .done__links{animation:rise .7s var(--ease-out) both}
.done.in > p{animation-delay:.08s}
.done.in li:nth-child(1){animation-delay:.16s}.done.in li:nth-child(2){animation-delay:.24s}.done.in li:nth-child(3){animation-delay:.32s}
.done.in .done__links{animation-delay:.4s}
.done__title{margin-bottom:18px}
.done > p{color:var(--p-50);margin-bottom:18px}
.done__steps{list-style:none;margin:0 0 26px;padding:0}
.done__steps li{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--rule)}
.done__steps li:last-child{border-bottom:1px solid var(--rule)}
.done__steps b{color:var(--accent);min-width:1ch}
.done__links{display:flex;flex-wrap:wrap;gap:12px 28px}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--paper);padding-bottom:2px}
.link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.link:hover svg{transform:translateX(3px)}
.link:hover{color:var(--accent);border-color:var(--accent)}

/* =========================================================
   POPUP: bursts open in a circle from the button you pressed
   ========================================================= */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.modal__scrim{position:absolute;inset:0;background:rgba(12,13,15,.82);opacity:0;transition:opacity .5s var(--ease-out)}
@media (hover:hover){.modal__scrim{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.modal.open .modal__scrim{opacity:1}
.modal__panel{position:relative;width:min(1060px,100%);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);border-radius:8px;
  clip-path:circle(0 at var(--ox,50%) var(--oy,50%));transition:clip-path .95s var(--ease-io)}
.modal.open .modal__panel{clip-path:circle(150% at var(--ox,50%) var(--oy,50%))}
.modal.closing .modal__panel{transition-duration:.55s}
.modal.open.settled .modal__panel{clip-path:none;box-shadow:0 0 0 1px rgba(241,239,234,.14),0 50px 140px -30px rgba(84,153,205,.55)}
.modal__main{background:radial-gradient(90% 60% at 100% 100%,rgba(84,153,205,.28),rgba(84,153,205,0) 70%),radial-gradient(60% 40% at 0% 0%,rgba(84,153,205,.12),rgba(84,153,205,0) 70%),#121418;display:flex;flex-direction:column;justify-content:center}
.modal__side{position:relative;isolation:isolate;overflow:hidden;color:var(--ink);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:20px;
  background:radial-gradient(70% 45% at 100% 0%,#9ACCF1 0%,rgba(154,204,241,0) 65%),radial-gradient(85% 60% at 0% 100%,#2D6A9C 0%,rgba(45,106,156,0) 66%),linear-gradient(165deg,#4F97CF 0%,#4485BD 55%,#3C7AB0 100%)}
/* fine grain gives the blue a printed, tactile surface */
.modal__side::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.modal__side > :not(.glowl):not(.modal__fx){position:relative;z-index:1}
.modal__fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.modal__big{margin:4px 0 -4px;font-size:clamp(84px,10vw,150px);font-weight:800;font-stretch:72%;line-height:.86;letter-spacing:-.02em;color:var(--paper)}
/* the -40%: polished white metal with an embossed edge; its highlight follows the cursor (app.js) */
.modal__big span[aria-hidden]{display:inline-block;transform-origin:0 70%;padding:0 .04em;
  background:linear-gradient(112deg,#FFFFFF 0%,#EEF2F6 16%,#B9C6D3 31%,#FFFFFF 46%,#D3DCE5 60%,#F7F9FB 74%,#A9B8C7 90%,#E9EEF3 100%);
  background-size:260% 100%;background-position:40% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.7)) drop-shadow(0 2px 0 rgba(26,66,104,.5)) drop-shadow(0 16px 22px rgba(12,13,15,.32))}
/* entrance: it drops from above the panel and lands hard */
.modal.open .modal__big span[aria-hidden]{animation:slam .82s .35s both}
@keyframes slam{
  0%{opacity:0;transform:translate3d(0,-14px,0) scale(2.3);animation-timing-function:cubic-bezier(.55,0,.9,.4)}
  50%{opacity:1;transform:scale(.92);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  72%{transform:scale(1.035)}
  100%{opacity:1;transform:none}}
.modal__side.thud{animation:thud .42s var(--ease-out)}
@keyframes thud{0%{transform:none}22%{transform:translate3d(0,5px,0)}48%{transform:translate3d(0,-2px,0)}100%{transform:none}}
/* VIP access pass: a black ticket with a perforated stub */
.modal__tag{font-weight:700;filter:drop-shadow(0 12px 16px rgba(12,13,15,.32))}
.pass{--cut:118px;display:inline-flex;align-items:stretch;height:48px;border-radius:12px;background:var(--ink);color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(241,239,234,.14);
  -webkit-mask:radial-gradient(circle 7px at var(--cut) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at var(--cut) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 7px at var(--cut) 0,#0000 96%,#000) top/100% 51% no-repeat,radial-gradient(circle 7px at var(--cut) 100%,#0000 96%,#000) bottom/100% 51% no-repeat;
  opacity:0;transform:translate3d(-34px,0,0);transition:opacity .5s var(--ease-out) .35s,transform .9s var(--ease-punch) .35s}
.modal.open .pass{opacity:1;transform:none}
.pass__stub{display:flex;align-items:center;justify-content:center;width:var(--cut);font-size:var(--fs-body);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.pass__stub em{font-style:normal;color:var(--accent);margin-left:.4em}
.pass__ev{display:flex;align-items:center;padding:0 20px;border-left:1.5px dashed rgba(241,239,234,.34);font-weight:600;white-space:nowrap}
.ml{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .14em;margin:-.04em 0 -.14em}
.ml > span{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease-out) .48s}
.ml + .ml > span{transition-delay:.58s}
.modal.open .ml > span{transform:none}
.modal__title{margin:0;font-size:var(--fs-display);font-weight:700;font-stretch:68%;line-height:.92;letter-spacing:-.01em}
.modal__clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto}
.modal__clock div{display:flex;flex-direction:column;gap:4px;padding:14px 14px 12px;border-radius:14px;background:rgba(247,245,240,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 30px -18px rgba(12,13,15,.6);
  opacity:0;transform:translate3d(0,24px,0) scale(.9);transition:opacity .6s var(--ease-out) .72s,transform .85s var(--ease-punch) .72s}
.modal__clock div:nth-child(2){transition-delay:.8s}
.modal__clock div:nth-child(3){transition-delay:.88s}
.modal__clock div:nth-child(4){transition-delay:.96s;background:var(--ink);color:var(--paper);box-shadow:0 16px 30px -14px rgba(12,13,15,.7)}
.modal.open .modal__clock div{opacity:1;transform:none}
.modal__clock b{display:flex;font-size:min(var(--fs-display),clamp(34px,4.2vw,58px));font-weight:700;font-stretch:68%;line-height:1.08}
.modal__clock span{font-weight:600}
.modal__perks{list-style:none;margin:auto 0 0;padding:0}
.modal__perks li{padding:11px 0 11px 26px;border-top:1px solid var(--ink);font-weight:600;position:relative}
.modal__perks li::before{content:"+";position:absolute;left:2px;top:9px;font-weight:700}
.modal__x{position:absolute;top:16px;right:16px;z-index:3;width:48px;height:48px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transform:scale(0) rotate(-120deg);transition:transform .7s var(--ease-punch) .55s}
.modal.open .modal__x{transform:none}
.modal.settled .modal__x{transition-delay:0s}
.modal__x svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.modal.open .modal__x:hover{transform:rotate(90deg) scale(1.08);transition-delay:0s}
.modal .st{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s var(--ease-out) calc(var(--si,0) * 70ms + .42s),transform .9s var(--ease-out) calc(var(--si,0) * 70ms + .42s)}
.modal.open .st{opacity:1;transform:none}
.modal .form > .btn.st{transform:translate3d(0,28px,0) scale(.9);transition:opacity .6s var(--ease-out) calc(var(--si,0) * 70ms + .42s),transform 1s var(--ease-punch) calc(var(--si,0) * 70ms + .42s),translate .3s var(--ease-out),box-shadow .35s var(--ease-out)}
.modal.open .form > .btn.st{transform:none}
.modal.settled .form > .btn.st{transition-delay:0s}
.modal .steps i{transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease-out) .7s,box-shadow .6s var(--ease-out)}
.modal .steps i:nth-child(2){transition-delay:.78s,0s}
.modal .steps i:nth-child(3){transition-delay:.86s,0s}
.modal .steps i:nth-child(4){transition-delay:.94s,0s}
.modal.open .steps i{transform:none}
/* the custom cursor rests inside the popup: the system cursor shows exactly what is under it */
.has-cursor.modal-open .cursor{opacity:0}
.has-cursor.modal-open .modal,.has-cursor.modal-open .modal *{cursor:default}
.has-cursor.modal-open .modal :is(a,button,label,.check,.check *){cursor:pointer}
.has-cursor.modal-open .modal :is(input,textarea){cursor:text}
html.modal-open{overflow:hidden}

/* =========================================================
   REVIEWS: notifications stacking on a phone, driven by scroll
   ========================================================= */
.voices{position:relative;height:var(--pinH,200vh)}
.voices__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.voices__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,110px);align-items:center}
.voices__lead{margin-top:20px;max-width:24em}
.voices__label{display:inline-flex;align-items:center;gap:10px}
.voices__label .gicon{width:24px;height:24px;padding:4px;border-radius:7px;background:#fff;box-sizing:content-box}
.voices__stars{position:relative;display:flex;align-items:center;gap:6px;height:1em;margin-top:clamp(24px,3vw,40px);font-size:calc(var(--fs-display) * .7);line-height:1}
.voices__stars span{display:inline-block;width:1em;height:1em}
.lstar{display:block;width:100%;height:100%;overflow:visible;transition:filter .6s}
.lstar__outline{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round}
.lstar__wave{fill:var(--accent)}
.lstar__wave--back{fill:#9FD0F2;opacity:.7}
/* empty: the liquid sits below the star; filling: it rises, its surface rolling like water */
.lstar__liquid{transform:translateY(24px);transition:transform .65s cubic-bezier(.4,0,.2,1) calc(var(--si) * 80ms)}
.lstar__wave{animation:wave .7s linear infinite}
.lstar__wave--back{animation-duration:1s;animation-direction:reverse}
@keyframes wave{to{transform:translateX(-12px)}}
.voices__stars.filling .lstar__liquid,.voices__stars.full .lstar__liquid{transform:translateY(-4px)}
.voices__stars.full .lstar__wave{animation:none}
.voices__stars.full .lstar{filter:drop-shadow(0 0 10px rgba(84,153,205,.65))}
/* one big pulse once all five are full */
.voices__stars.is-grand span{animation:star-grand 1.2s var(--ease-punch) calc(var(--si) * 70ms) both}
@keyframes star-grand{0%{transform:none}30%{transform:scale(1.42) translateY(-6px) rotate(-10deg);filter:brightness(1.5)}60%{transform:scale(.94) rotate(4deg)}100%{transform:none}}
.voices__fx{position:absolute;left:-120px;top:-140px;width:calc(100% + 240px);height:300px;pointer-events:none;display:block}
.voices__note{margin-top:14px;font-weight:600}

.phone{--ph:min(88vh,740px);position:relative;text-align:left;width:calc(var(--ph) * .5);height:var(--ph);padding:11px;border-radius:calc(var(--ph) * .078);
  background:linear-gradient(145deg,#2A2F38,#0C0D0F 40%,#1C2027);box-shadow:0 0 0 1px rgba(241,239,234,.14),0 60px 120px -40px rgba(84,153,205,.55),0 30px 60px -30px rgba(0,0,0,.9)}
.phone__screen{position:relative;height:100%;border-radius:calc(var(--ph) * .064);overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#6FAEE0 0%,#2D5A86 38%,#13243A 70%,#0C0D0F 100%)}
.phone__status{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:16px 24px 0}
.phone__status b{font-weight:700}
.phone__island{position:absolute;left:50%;top:12px;width:32%;height:28px;border-radius:99px;background:#000;transform:translateX(-50%)}
.phone__icons{display:flex;gap:4px;align-items:flex-end}
.phone__icons i{display:block;width:4px;background:var(--paper);border-radius:2px}
.phone__icons i:nth-child(1){height:6px}.phone__icons i:nth-child(2){height:9px}.phone__icons i:nth-child(3){height:12px}
.phone__lock{position:relative;z-index:1;text-align:center;margin-top:calc(var(--ph) * .05)}
.phone__date{font-weight:600}
.phone__time{font-size:calc(var(--ph) * .11);font-weight:700;font-stretch:72%;line-height:1;letter-spacing:-.01em}
.notifs{position:absolute;left:9px;right:9px;top:calc(var(--ph) * .29);bottom:12px}
.notif{position:absolute;left:0;right:0;top:0;display:block;padding:12px 14px 13px;border-radius:20px;overflow:hidden;
  background:rgba(241,239,234,.94);color:var(--ink);box-shadow:0 14px 34px -14px rgba(0,0,0,.65);
  opacity:0;transform-origin:50% 0;will-change:transform,opacity}
.notif__ico{flex:none;width:24px;height:24px;border-radius:7px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(12,13,15,.08)}
.notif__ico .gicon{width:15px;height:15px}
.notif__main{min-width:0;flex:1}
.notif__top{display:flex;align-items:center;gap:8px;white-space:nowrap;margin-bottom:5px}
.notif__top b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.notif__stars{color:var(--accent);letter-spacing:1px;margin-left:4px}
.notif__when{margin-left:auto;font-weight:600}
.notif__txt{line-height:1.38}
.notif__who{margin-top:5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .voices__grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:20px}
  .voices__lead{display:none}
  .voices__stars{justify-content:center;margin-top:8px;font-size:30px}
  .voices__note{display:none}
  .voices__copy .head__title{font-size:calc(var(--fs-display) * .8)}
  .phone{--ph:min(62svh,560px);width:min(82vw,calc(var(--ph) * .56))}
  .notif{padding:10px 12px 11px}
  .notif__txt{line-height:1.32}
  .notif__when{display:none}
}

/* =========================================================
   FINALE
   ========================================================= */
.finale{position:relative;padding:calc(var(--pad) * .6) 0 var(--pad)}
.finale > .wrap,.finale__mega{position:relative;z-index:1}
.finale__mega{height:clamp(150px,24vw,340px);pointer-events:none;margin-bottom:clamp(16px,2vw,28px)}
.finale > .wrap{text-align:center}
.finale__title{max-width:13em;margin-left:auto;margin-right:auto}
.finale__row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;margin-top:clamp(28px,3vw,40px)}
.finale__row p{color:var(--p-70)}
.finale__row p a{color:var(--paper);font-weight:600}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding:22px 0;color:var(--p-50)}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{margin-left:22px}
.foot a:first-child{margin-left:0}
.foot a:hover{color:var(--paper)}

.dock{display:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .table__head{display:none}
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"name name name" "list bf pct";row-gap:16px;align-items:end}
  .row__info{grid-area:name}
  .row__list{grid-area:list}.row__bfc{grid-area:bf}.row__pct{grid-area:pct}
  .row__list::before,.row__bfc::before{content:attr(data-label);display:block;font-size:var(--fs-body);color:var(--p-50);margin-bottom:4px}
  .row:hover .row__info{transform:none}
}
@media (max-width:760px){
  .mast__addr{display:none}
  .hero__line{flex-direction:column;gap:2px}
  .hero__mega{height:clamp(130px,38vw,220px)}
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .split__rule{display:none}
  .clock{justify-content:space-between}
  .clock__u{flex:1;padding:0 0 0 10px}
  .clock__u:first-child{padding-left:0}
  .split__b .btn{width:100%}
  .voices__btn{width:44px;height:44px}
  .finale__row .btn{width:100%}
  .list__mega{font-size:calc(var(--fs-display) * 1.2)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .hero__line{flex-direction:row;flex-wrap:wrap;gap:6px 12px}
  .hero__tag::after{display:none}
  .hero__count .clock{width:100%}
  .hero__count .clock__u{flex:1;width:auto}
  .hero__count .btn{width:100%}
  .points li + li{border-left:0;border-top:1px solid var(--ink)}
  .btn{--h:62px;padding-left:24px;gap:18px}
  .btn--xl{--h:72px;padding-left:28px}
  .btn--xl .btn__arr{width:54px;height:54px}.btn--xl .btn__arr svg{left:15px;top:15px}
  .modal{padding:0;align-items:end}
  .modal__panel{grid-template-columns:minmax(0,1fr);max-height:94svh;border-radius:14px 14px 0 0}
  .modal__big{font-size:76px}
  .modal__side{gap:16px}
  .modal__tag{align-self:flex-start;padding:0}
  .modal__title{text-wrap:balance}
  /* popup on phones: everything on one centre axis */
  .modal__side{align-items:center;text-align:center}
  .modal__big span[aria-hidden]{transform-origin:50% 70%}
  .modal__big{transform-origin:50% 70%}
  .modal__clock{align-self:stretch}
  .modal__clock div{align-items:center;padding:12px 6px 10px}
  .modal__clock b{justify-content:center}
  .form__head{padding-right:0;text-align:center}
  .field input{text-align:center;padding:26px 48px 8px}
  .field label{left:0;right:0;text-align:center;transform-origin:50% 0}
  .field__err{text-align:center;padding-left:0}
  .check{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .form__fine,.form__fail{text-align:center}
  .modal .btn--block{padding-left:75px}
  .modal .btn--block .btn__txt{flex:1;justify-content:center}
  .done{text-align:center}
  .done__steps li,.done__links{justify-content:center}
  .clock__u{padding:0 0 0 10px}
  .finale__mega{height:clamp(120px,36vw,200px)}
  .foot{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .foot__row{flex-direction:column;align-items:center;text-align:center}
  .foot a{margin:0 10px}

  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--rule);
    transform:translateY(100%);transition:transform .5s var(--ease-out)}
  .dock.show{transform:none}
  .dock__time{color:var(--p-50);line-height:1.3}
  .dock__time b{display:block;color:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}
  .dock__btn{display:inline-flex;align-items:center;height:46px;padding:0 20px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;border-radius:2px}
}

@media (prefers-reduced-motion:reduce){
  .cards-run{display:none!important}.list__stage{position:static}
  .modal.open .modal__big span[aria-hidden],.modal__side.thud{animation:none}
  .pass,.ml > span,.modal__clock div,.modal__x,.modal .st,.modal .steps i{transition:none!important}
  .win > .fx,.win > .fx::before,.field.win .field__ok,.field.win .field__ok svg path,.check.win .check__box,.modal__big.punch,.btn.charged,.form__kicker span{animation:none}
  .svc__card.in .svc__bf .redact__bar,.svc__card.in .redact__bar svg{animation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.js .ii,.js .hero__title .w,.js .ticker{opacity:1;translate:none}
  .row__wipe{display:none}.row.rv .redact__bar{transform:none}.row.rv .row__pct{opacity:1;scale:1}
  .list__line{transform:none}.list__sheet{clip-path:none}
  .card{transform:none;opacity:1}
  .svc__card.rv{opacity:1;translate:none}.svc__badge,.svc__card.in:hover .svc__badge{transform:none}
  .rv .fx-title .w,.fx-title.rv .w{transform:none}
}

/* ---------------- cookie banner ---------------- */
.foot__cookie{margin-left:22px;padding:0;border:0;color:inherit;font:inherit;cursor:pointer;background-color:transparent}
.consent{position:fixed;left:var(--gutter);bottom:var(--gutter);z-index:210;width:min(400px,calc(100vw - 32px));
  background:var(--paper);color:var(--ink);border-radius:22px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  opacity:0;transform:translateY(28px) scale(.97);transform-origin:0 100%;
  transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.consent.in{opacity:1;transform:none}
.consent.is-modal{opacity:0;transform:translateY(28px) scale(.97);pointer-events:none}
.consent__text{margin:0 0 18px;font-size:var(--fs-body);line-height:1.5}
.consent__text a{color:var(--ink);font-weight:700}
.consent__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent__btn{height:50px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  font:700 var(--fs-body)/1 var(--f);cursor:pointer;transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out)}
.consent__btn--yes{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .consent__btn:hover{background:var(--ink);color:var(--paper)}
  .consent__btn--yes:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
}
@media (max-width:560px){.consent{left:16px;right:16px;bottom:16px;width:auto;padding:20px}}
@media (prefers-reduced-motion:reduce){.consent{transition:opacity .2s}}