/* HOTAM (חותם) showcase. Own design system: plum + coral, serif display, arch icons, envelope motifs.
   Brand colours live in :root; change --plum / --coral to re-skin. */
:root{
  --bg:#F7F3EE; --bg2:#fff; --ink:#1B1220; --ink2:#43394A; --ink3:#6E6474; --line:#E4DCD3;
  --ink-rgb:27,18,32; --cardbd:rgba(27,18,32,.09); --hover:rgba(27,18,32,.06);
  --plum:#6B2A7A; --plum-h:#57206A; --plum-rgb:107,42,122;
  --coral:#FF6F8E; --coral-h:#FF8AA3; --coral-rgb:255,111,142;
  --gold:#E9A84A;
  --grad:linear-gradient(100deg,var(--plum) 0%,#B23C8C 55%,var(--coral) 100%);
  --phone:#17121B; --phone-rim:#3D3343;
  --phone-sh:0 70px 110px -50px rgba(27,18,32,.5),0 30px 50px -30px rgba(27,18,32,.35);
  --display:"Noto Sans Hebrew","Arial Narrow",sans-serif; --display-stretch:62.5%; --display-weight:800; --sans:Rubik,system-ui,sans-serif;
  --ez:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(20px,4.400vw,64px); --hh:80px;
  --glass-card:linear-gradient(160deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.58) 100%);
  --glass-sh:inset 0 1px 0 #fff,0 1px 2px rgba(27,18,32,.04),0 24px 50px -30px rgba(27,18,32,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--hh)}
html.menu-open{overflow:hidden}
body{background:var(--bg);color:var(--ink2);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:opacity .35s ease}
html.lang-pending body{opacity:0}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:8px}

/* ---------- Hues ---------- */
[data-hue=teal]{--c1:#7FE8DD;--c2:#16A9B4;--deep:#0B6E78;--h-rgb:22,169,180}
[data-hue=blue]{--c1:#A9B6FF;--c2:#5A6CEB;--deep:#3442B8;--h-rgb:90,108,235}
[data-hue=violet]{--c1:#CDB5FF;--c2:#8E5BEF;--deep:#5B2CC4;--h-rgb:142,91,239}
[data-hue=green]{--c1:#8EEDC2;--c2:#25B97E;--deep:#0D734B;--h-rgb:37,185,126}
[data-hue=pink]{--c1:#FFB3C4;--c2:#FF5F82;--deep:#B8264B;--h-rgb:255,95,130}
[data-hue=amber]{--c1:#FFE09A;--c2:#F2A92A;--deep:#995A00;--h-rgb:242,169,42}
[data-hue=plum]{--c1:#E3A6D8;--c2:#9B3FA8;--deep:#5A1F68;--h-rgb:155,63,168}

/* ---------- Arch icon: our own mark. Arch-shaped glass tile on a coloured plate, gold sparkle. ---------- */
.ic{--k:1;position:relative;display:block;flex:none;width:calc(72px*var(--k));height:calc(86px*var(--k))}
.ic--xs{--k:.42}.ic--sm{--k:.66}.ic--lg{--k:1.3}
.ic__box{position:absolute;top:0;left:0;width:72px;height:86px;transform:scale(var(--k));transform-origin:0 0}
.ic__plate,.ic__face{position:absolute;inset:0;border-radius:36px 36px 16px 16px}
.ic__plate{background:linear-gradient(165deg,var(--c1),var(--c2) 60%,var(--deep));transform:translateY(9px) scale(.9);box-shadow:0 18px 30px -12px rgba(var(--h-rgb),.65);transition:transform .55s var(--spring)}
.ic__face{display:flex;align-items:center;justify-content:center;padding-top:10px;background:linear-gradient(175deg,rgba(255,255,255,.95),rgba(255,255,255,.6));-webkit-backdrop-filter:blur(8px) saturate(1.6);backdrop-filter:blur(8px) saturate(1.6);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 0 #fff,inset 0 -14px 22px -12px rgba(var(--h-rgb),.35)}
.ic__face::after{content:"";position:absolute;inset:6px;border-radius:30px 30px 11px 11px;border:1px solid rgba(var(--h-rgb),.28);pointer-events:none}
.ic__face svg{width:34px;height:34px;fill:none;stroke:var(--deep);stroke-width:1.900;stroke-linecap:round;stroke-linejoin:round}
.ic__spark{position:absolute;top:-7px;inset-inline-end:-9px;width:21px;height:21px;background:linear-gradient(135deg,#FFF1C2,var(--gold) 55%,#B9761C);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 3px 3px rgba(var(--ink-rgb),.25));transition:transform .6s var(--spring)}
.card:hover .ic__plate,.chip:hover .ic__plate,.showcase:hover .ic__plate{transform:translateY(13px) scale(.86)}
.card:hover .ic__spark,.chip:hover .ic__spark,.showcase:hover .ic__spark{transform:rotate(90deg) scale(1.25)}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding-inline:32px;border-radius:999px;font-weight:600;font-size:18px;line-height:1;white-space:nowrap;cursor:pointer;border:0;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .35s var(--ez),box-shadow .35s var(--ez)}
.btn:active{transform:scale(.97)}
.btn--lg{height:60px;padding-inline:36px;font-size:19px}
.btn--md{height:52px;padding-inline:24px;font-size:17px}
.btn--sm{height:42px;padding-inline:20px;font-size:15px}
.btn--block{width:100%}
.btn--primary{background:var(--plum);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 34px -16px rgba(var(--plum-rgb),.7)}
.btn--primary:hover{background:var(--plum-h);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 24px 40px -16px rgba(var(--plum-rgb),.8)}
.btn--coral{background:var(--coral);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn--coral:hover{background:var(--coral-h)}
.btn--outline{color:var(--ink);border:1.500px solid var(--line);background:transparent}
.btn--outline:hover{background:var(--hover);border-color:var(--ink3)}
.btn--light{background:#fff;color:var(--plum)}
.btn--light:hover{transform:translateY(-2px)}
.btn--ghost-light{color:#fff;border:1.500px solid rgba(255,255,255,.4);background:transparent}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:600;font-size:17px;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:5px}
.link__chev{width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--ez)}
[dir=ltr] .link__chev{transform:rotate(-135deg)}
.link:hover .link__chev{transform:translateX(-4px) rotate(45deg)}[dir=ltr] .link:hover .link__chev{transform:translateX(4px) rotate(-135deg)}
.ulink{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--ink);font-weight:600;font-size:16px}
.ulink span{background:linear-gradient(var(--coral),var(--coral)) 0 100%/100% 2px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ez)}
.ulink span::after{content:" \2190"}[dir=ltr] .ulink span::after{content:" \2192"}
.ulink:hover span{background-size:100% 100%;background-image:linear-gradient(rgba(var(--coral-rgb),.18),rgba(var(--coral-rgb),.18))}
.more{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);font-weight:600;font-size:16px}
.more__arrow,.go{display:flex;align-items:center;justify-content:center;flex:none}
.more__arrow{width:32px;height:32px;border-radius:12px;background:var(--plum);transform:rotate(-8deg);transition:transform .45s var(--spring)}
.more__arrow::before,.go::before{content:"";width:8px;height:8px;border-left:2px solid;border-bottom:2px solid;transform:rotate(45deg);margin-left:3px}
[dir=ltr] .more__arrow::before,[dir=ltr] .go::before{transform:rotate(-135deg);margin-left:-3px}
.more__arrow::before{border-color:#fff}
.more:hover .more__arrow{transform:rotate(0) scale(1.08)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--plum)}
.eyebrow::before{content:"";width:10px;height:10px;background:var(--coral);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.grad-text{display:inline-block;padding-bottom:.06em;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}

/* ---------- Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ez),transform .9s var(--ez)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;height:var(--hh)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:rgba(247,243,238,.88);border-bottom:1px solid var(--cardbd);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);transition:opacity .4s ease;pointer-events:none}
.hdr.scrolled::before{opacity:1}
.hdr.menu-on::before{opacity:0}
.hdr__bar{max-width:1440px;height:100%;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:36px;color:var(--ink);line-height:1;letter-spacing:.01em}
[lang=en] .logo{font-size:30px;letter-spacing:.06em}
.logo__seal{position:relative;width:30px;height:30px;flex:none;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;background:var(--grad);box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),inset 0 2px 3px rgba(255,255,255,.35);transition:transform .7s var(--spring)}
.logo__seal::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1.500px solid rgba(255,255,255,.7)}
.logo:hover .logo__seal{transform:rotate(-25deg) scale(1.08)}
.hdr__actions{display:flex;align-items:center;gap:10px}
.hdr__lang{height:40px;padding:0 14px;border-radius:20px;font-weight:600;font-size:15px;color:var(--ink);transition:background-color .2s}
.hdr__lang:hover{background:var(--hover)}
.burger{position:relative;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;flex:none;border-radius:14px;background:var(--ink)}
.burger__bar{width:18px;height:2px;border-radius:1px;background:#fff;transition:transform .5s var(--ez),opacity .3s,width .4s var(--ez)}
.burger__bar:nth-child(2){width:12px;margin-inline-start:6px}
.menu-on .burger__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-on .burger__bar:nth-child(2){opacity:0}
.menu-on .burger__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav__list{display:flex;align-items:center;gap:2px}
.nav__link{position:relative;display:flex;align-items:center;height:40px;padding:0 15px;color:var(--ink);font-weight:500;font-size:16px;line-height:1;white-space:nowrap}
.nav__link::after{content:"";position:absolute;inset-inline:15px;bottom:6px;height:2px;border-radius:1px;background:var(--coral);transform:scaleX(0);transition:transform .35s var(--ez)}
.nav__link:hover::after,.nav__link[aria-current=page]::after{transform:scaleX(1)}
.nav__foot,.nav__only-m{display:none}

/* ---------- Menu stage (mobile): the page tilts aside like a card, an envelope-coloured card behind it ---------- */
.win{position:relative;z-index:2;background:var(--bg)}
.stage{display:none}

@media (max-width:991.980px){
  :root{--hh:68px}
  .burger{display:flex}
  .hdr__lang{display:none}
  .nav__only-m{display:block}
  .nav{position:fixed;top:var(--hh);inset-inline-start:0;z-index:50;width:min(420px,56vw);height:calc(100dvh - var(--hh));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--ez),visibility 0s linear .7s}
  .menu-on .nav{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .nav__scroller{display:flex;flex-direction:column;justify-content:space-between;gap:28px;height:100%;padding-block:18px 28px;padding-inline:var(--gutter) 0;overflow:hidden}
  .nav__list{display:block;counter-reset:nav}
  .nav__link{gap:12px;width:100%;height:58px;padding:0;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:38px;opacity:0;transform:translateX(30px);transition:opacity .45s var(--ez),transform .7s var(--ez),color .2s}
  [dir=ltr] .nav__link{transform:translateX(-30px)}
  .nav__link::before{counter-increment:nav;content:counter(nav,decimal-leading-zero);font-family:var(--sans);font-weight:500;font-size:12px;color:var(--coral);align-self:flex-start;margin-top:14px}
  .nav__only-m .nav__link::before{content:"";width:0}
  .nav__link::after{display:none}
  .nav__link:hover,.nav__link[aria-current=page]{color:var(--plum)}
  .menu-on .nav__link{opacity:1;transform:none;transition-delay:var(--d,0s),var(--d,0s),0s}
  .nav__foot{display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ez),transform .7s var(--ez)}
  .menu-on .nav__foot{opacity:1;transform:none;transition-delay:.4s}
  .nav__note{font-size:14px;line-height:1.5;color:var(--ink3)}

  .stage{display:block}
  .stage::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .7s var(--ez),visibility 0s linear .7s;
    background:radial-gradient(70% 50% at 100% 0%,rgba(var(--coral-rgb),.22),transparent 70%),radial-gradient(60% 45% at 0% 100%,rgba(var(--plum-rgb),.2),transparent 70%),var(--bg)}
  .stage.live::before{visibility:visible;transition-delay:0s}
  .stage.open::before{opacity:1}
  .stage__card,.stage__frame{position:fixed;top:var(--hh);left:0;right:0;height:calc(100dvh - var(--hh));opacity:0;visibility:hidden;pointer-events:none}
  .stage__card{z-index:1;background:var(--grad)}
  .stage__card::after{content:"";position:absolute;inset:0 0 auto;height:42%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));clip-path:polygon(0 0,100% 0,50% 100%)}
  .stage__frame{z-index:3}
  .stage.live .stage__card,.stage.live .stage__frame{visibility:visible}
  .stage.open .stage__frame{pointer-events:auto;cursor:pointer}
}

/* ---------- Type ---------- */
.display{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(48px,6.400vw,104px);line-height:.95;letter-spacing:-.005em;text-shadow:0 18px 50px rgba(var(--plum-rgb),.16);color:var(--ink);text-wrap:balance}

/* ---------- Phone ---------- */
.phone{position:relative;width:290px;height:607px;flex:none;padding:9px;border-radius:50px;background:var(--phone);box-shadow:var(--phone-sh),inset 0 0 0 1.500px var(--phone-rim)}
.phone__screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:#fff}
.phone__screen video,.phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone__notch{position:absolute;top:18px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0B080D}

/* ---------- Hero ---------- */
.hero{overflow:hidden}
.hero__container{position:relative;max-width:1440px;margin-inline:auto;padding:clamp(4px,1.500vw,16px) var(--gutter) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:clamp(8px,2vw,32px);align-items:center;min-height:min(100vh - var(--hh),900px)}
.hero__text{position:relative;z-index:3;max-width:700px}
.hero__title{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(54px,7.400vw,118px);line-height:.94;letter-spacing:-.005em;text-shadow:0 22px 60px rgba(var(--plum-rgb),.18);color:var(--ink);text-wrap:balance}
[lang=en] .hero__title{font-size:clamp(50px,6.600vw,108px)}
.hero__line{display:block}
.hero__sub{margin-top:clamp(18px,2vw,28px);max-width:540px;font-size:clamp(17px,1.350vw,20px);line-height:1.65;color:var(--ink2);text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(24px,2.600vw,36px)}
.hero__badge{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 16px 8px 10px;border-radius:999px;background:#fff;border:1px solid var(--cardbd);font-size:15px;font-weight:600;color:var(--ink)}
[dir=rtl] .hero__badge{padding:8px 10px 8px 16px}
.hero__badge-seal{width:22px;height:22px;border-radius:50%;background:var(--grad)}

.hero__stage{position:relative;height:780px}
.hero__blob{position:absolute;border-radius:50%;opacity:.2;pointer-events:none}
.hero__blob--a{left:2%;top:10%;width:420px;height:420px;background:var(--coral);filter:blur(100px)}
.hero__blob--b{right:0;bottom:6%;width:380px;height:380px;background:var(--plum);filter:blur(110px)}
.hero__arch{position:absolute;left:50%;top:40px;width:500px;height:700px;margin-left:-250px;border-radius:250px 250px 0 0;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 75%)}
.hero__arch::before{content:"";position:absolute;inset:16px 16px 0;border-radius:234px 234px 0 0;border:1px dashed rgba(var(--plum-rgb),.18)}
.fan{position:absolute;left:50%;top:110px;width:290px;height:607px;margin-left:-145px}
.fan .phone{position:absolute;top:0;left:0}
.fan .phone--c{z-index:3}
.fan .phone--l,.fan .phone--r{z-index:1;filter:saturate(.9)}
.fan .phone--l{transform:translateX(-160px) translateY(40px) rotate(-11deg) scale(.82)}
.fan .phone--r{transform:translateX(160px) translateY(40px) rotate(11deg) scale(.82)}
.chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 14px;border-radius:20px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--cardbd);box-shadow:0 22px 40px -20px rgba(var(--ink-rgb),.4);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;pointer-events:auto;animation:bob 6s ease-in-out infinite}
.chip .ic{margin-top:-4px}
.chip--1{top:150px;inset-inline-start:calc(50% + 150px)}
.chip--2{top:420px;inset-inline-end:calc(50% + 150px);animation-delay:-2s}
.chip--3{top:610px;inset-inline-start:calc(50% + 120px);animation-delay:-4s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* hero entrance */
.js .hero__line,.js .hero__sub,.js .hero__actions,.js .hero__badge{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ez),transform 1s var(--ez)}
.js .fan .phone--c{opacity:0;transform:translateY(150px) scale(.92);transition:opacity .6s ease,transform 1.200s var(--ez)}
.js .fan .phone--l,.js .fan .phone--r{opacity:0;transform:translateY(100px) scale(.82);transition:opacity .6s ease,transform 1.300s var(--ez)}
.js .chip{opacity:0;scale:.6;transition:opacity .4s ease,scale .8s var(--spring)}
.ready .hero__line,.ready .hero__sub,.ready .hero__actions,.ready .hero__badge,.ready .fan .phone--c{opacity:1;transform:none}
.ready .fan .phone--l{opacity:1;transform:translateX(-160px) translateY(40px) rotate(-11deg) scale(.82);transition-delay:.55s}
.ready .fan .phone--r{opacity:1;transform:translateX(160px) translateY(40px) rotate(11deg) scale(.82);transition-delay:.65s}
.ready .chip{opacity:1;scale:1}
.ready .hero__line:nth-child(2){transition-delay:.08s}.ready .hero__line:nth-child(3){transition-delay:.16s}
.ready .hero__sub{transition-delay:.26s}.ready .hero__actions{transition-delay:.34s}.ready .hero__badge{transition-delay:.42s}
.ready .fan .phone--c{transition-delay:.15s}
.ready .chip--1{transition-delay:1s}.ready .chip--2{transition-delay:1.120s}.ready .chip--3{transition-delay:1.240s}

/* ---------- How ---------- */
.how{padding-top:clamp(72px,9vw,140px)}
.how__head{max-width:1440px;margin-inline:auto;padding:0 var(--gutter) clamp(24px,3vw,48px);text-align:center}
.how__head .display{max-width:1000px;margin:0 auto}
.how__grid{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.rail{display:none}
.step{position:relative;padding:32px 28px 28px;margin-top:16px;border-radius:28px;background:var(--bg2);border:1px solid var(--cardbd);display:flex;flex-direction:column;align-items:flex-start}
.step__meta{display:flex;align-items:center;gap:16px}
.step__count{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ink3)}
.step__title{margin-top:18px;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:44px;line-height:.98;color:var(--ink);text-wrap:balance}
.step__text{margin-top:12px;font-size:17px;line-height:1.65;color:var(--ink2);text-wrap:pretty;max-width:460px}
.how__visual{display:none}

.band-wrap{padding:clamp(64px,8vw,120px) var(--gutter) 0}
.band{position:relative;max-width:1180px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(22px,2.400vw,30px) clamp(22px,3vw,40px);border-radius:32px;background:var(--grad);color:#fff;overflow:hidden;box-shadow:0 40px 80px -40px rgba(var(--plum-rgb),.7)}
.band::before{content:"";position:absolute;inset:0 0 auto;height:56%;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.band__seal{position:relative;width:64px;height:64px;flex:none;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 35% 30%,#fff 0%,#FFD6E0 22%,var(--coral) 60%,#C2405F 100%);box-shadow:0 10px 22px -8px rgba(0,0,0,.35),inset 0 -4px 8px rgba(0,0,0,.15)}
.band__seal::after{content:"";position:absolute;inset:14px;border-radius:50%;border:2px solid rgba(255,255,255,.75)}
.band__copy{flex:1 1 320px;position:relative}
.band__title{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(36px,3.300vw,48px);line-height:.95}
.band__text{margin-top:6px;font-size:16px;opacity:.9}
.band__actions{position:relative;display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Sections and cards ---------- */
.sec{max-width:1440px;margin-inline:auto;padding:clamp(88px,10vw,150px) var(--gutter) 0}
.sec--tight{padding-top:clamp(36px,4vw,56px)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px}
.sec__head .display{max-width:800px}
.sec__aside{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:420px;font-size:clamp(17px,1.250vw,19px);color:var(--ink2);text-wrap:pretty}
.sec__p{margin-top:18px;max-width:460px;font-size:clamp(17px,1.300vw,20px);color:var(--ink2)}
.cards{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(14px,1.600vw,22px)}
.cards>li{display:flex;min-width:0}
.card{position:relative;flex:1;display:flex;flex-direction:column;gap:18px;padding:32px 28px 30px;border-radius:28px;background:var(--glass-card);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-sh);overflow:hidden;isolation:isolate;transition:transform .5s var(--ez),box-shadow .5s var(--ez),border-color .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(var(--h-rgb),.35);box-shadow:0 34px 60px -34px rgba(var(--ink-rgb),.4)}
.card__title{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:38px;line-height:.95;color:var(--ink)}
.card__desc{font-size:16px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.feat{min-height:280px;justify-content:flex-end}
.feat .ic{margin-bottom:auto}
.go{position:absolute;bottom:14px;inset-inline-end:14px;width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.9);z-index:2;transition:background-color .3s,transform .45s var(--spring)}
.go::before{border-color:var(--ink);transition:border-color .3s}
.card:hover .go{background:var(--plum);transform:rotate(-8deg) scale(1.08)}.card:hover .go::before{border-color:#fff}

.design{padding:14px 14px 26px;gap:6px}
.design .card__title,.design .card__desc{padding-inline:14px}
.design__shot{position:relative;display:block;height:420px;margin-bottom:14px;border-radius:20px 20px 120px 120px/20px 20px 40px 40px;overflow:hidden;background:var(--phone)}
.design__shot video{width:100%;height:100%;object-fit:cover;transition:transform 1.200s var(--ez)}
.design:hover .design__shot video{transform:scale(1.05)}
.design__shot--empty{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,rgba(var(--h-rgb),.08) 0 12px,transparent 12px 24px),#FFFBF2;box-shadow:inset 0 0 0 1.500px rgba(var(--h-rgb),.35)}

/* ---------- Page heads ---------- */
.page-head{max-width:1440px;margin-inline:auto;padding:clamp(48px,7vw,110px) var(--gutter) 0}
.page-head .display{font-size:clamp(52px,7vw,112px);max-width:1000px}
.page-head__lead{margin-top:18px;max-width:560px;font-size:clamp(17px,1.400vw,21px);color:var(--ink2)}
.page-head--center{text-align:center}
.page-head--center .display,.page-head--center .page-head__lead{margin-inline:auto}

/* ---------- Designs page ---------- */
.showcase{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;padding:clamp(40px,5vw,72px) 0;border-bottom:1px solid var(--line)}
.showcase__visual{position:relative;display:flex;justify-content:center;padding:20px 0}
.showcase__halo{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--h-rgb),.3),rgba(var(--h-rgb),.08) 55%,transparent);filter:blur(30px)}
.showcase__visual .phone{transform:rotate(-3deg);transition:transform .8s var(--ez)}
.showcase:hover .showcase__visual .phone{transform:rotate(0)}
.showcase__copy{display:flex;flex-direction:column;align-items:flex-start;max-width:560px}
.showcase__title{margin-top:20px;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(52px,5.800vw,90px);line-height:.95;color:var(--ink)}
.showcase__text{margin-top:16px;font-size:clamp(17px,1.300vw,19px);color:var(--ink2)}
.showcase__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ticks{margin-top:20px;display:grid;gap:10px}
.ticks li{position:relative;padding-inline-start:30px;font-size:16px;color:var(--ink2)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:5px;width:16px;height:16px;background:var(--coral);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.custom{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;margin-top:clamp(40px,5vw,72px);padding:clamp(28px,3vw,44px);border-radius:32px;background:#fff;border:1.500px dashed rgba(var(--plum-rgb),.3)}
.custom__copy{flex:1 1 320px}
.custom__title{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(40px,3.800vw,54px);line-height:.95;color:var(--ink);margin-bottom:6px}

/* ---------- Pricing ---------- */
.price-sec__grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.plan{position:relative;max-width:560px;padding:clamp(28px,3vw,40px);border-radius:32px;background:#fff;border:1px solid var(--cardbd);box-shadow:0 50px 90px -50px rgba(var(--plum-rgb),.55);overflow:hidden}
.plan__top{display:flex;align-items:center;gap:18px}
.plan__name{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(36px,3vw,42px);line-height:.95;color:var(--ink)}
.plan__for{margin-top:4px;font-size:15px;color:var(--ink3)}
.plan__price{display:flex;align-items:flex-start;gap:6px;margin:28px 0 22px}
[dir=ltr] .plan__price{flex-direction:row-reverse;justify-content:flex-end}
.plan__num{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(72px,6.400vw,96px);line-height:.9;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.plan__cur{margin-top:6px;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:34px;color:var(--plum)}
.plan__list{display:grid;gap:12px;margin-bottom:28px}
.plan__list li{position:relative;padding-inline-start:32px;font-size:16px;line-height:1.5;color:var(--ink2)}
.plan__list li::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:20px;height:20px;border-radius:7px}
.plan__list .yes::before{background:linear-gradient(135deg,#8EEDC2,#25B97E)}
.plan__list .yes::after{content:"";position:absolute;inset-inline-start:7px;top:6px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.plan__list .no{color:var(--ink3)}
.plan__list .no::before{background:#E9E3EA}
.plan__list .no::after{content:"\00d7";position:absolute;inset-inline-start:0;top:0;width:20px;line-height:22px;text-align:center;font-weight:700;color:var(--ink3)}
.plan--wide{max-width:1100px;margin-inline:auto;display:grid;grid-template-columns:1fr;gap:36px}
.plan__h{font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--plum);margin-bottom:14px}
.plan__note{font-size:15px;color:var(--ink3);padding:14px 16px;border-radius:16px;background:var(--bg)}
.plan--wide .plan__list{margin-bottom:24px}

/* ---------- FAQ ---------- */
.faq{max-width:calc(880px + 2*var(--gutter))}
.faq__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.faq__title{font-size:clamp(48px,5.600vw,84px)}
.faq__list{margin-top:clamp(28px,3vw,44px)}
.faq__group{margin-top:clamp(36px,4vw,56px);font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(36px,3vw,46px);color:var(--plum)}
.faq__group+.faq__list{margin-top:12px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;text-align:start;font-size:clamp(18px,1.500vw,21px);font-weight:600;color:var(--ink)}
.q i{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:1.500px solid var(--line);transition:background .35s,border-color .35s}
.q i::before,.q i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:var(--ink);transition:transform .45s var(--ez),background .3s}
.q i::after{transform:rotate(90deg)}
.q button:hover i{border-color:var(--plum)}
.q.open i{background:var(--plum);border-color:var(--plum)}
.q.open i::before,.q.open i::after{background:#fff}
.q.open i::after{transform:rotate(0)}
.q__a{overflow:hidden;max-height:0;transition:max-height .55s var(--ez)}
.q__a p{font-size:17px;line-height:1.7;color:var(--ink2);padding-bottom:24px;max-width:700px}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,80px);align-items:start;padding-top:clamp(48px,7vw,110px)}
.contact .display{font-size:clamp(48px,5.600vw,88px)}
.next{margin-top:30px;display:grid;gap:14px}
.next li{display:flex;align-items:center;gap:14px;font-size:17px;color:var(--ink)}
.next__n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;background:#fff;border:1px solid var(--cardbd);font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);color:var(--plum)}
.form{display:grid;gap:18px;padding:clamp(24px,3vw,40px);border-radius:32px;background:#fff;border:1px solid var(--cardbd);box-shadow:0 50px 90px -50px rgba(var(--plum-rgb),.45)}
.field{display:grid;gap:8px;border:0;min-width:0}
.field label,.field legend{font-size:15px;font-weight:600;color:var(--ink)}
.field legend{margin-bottom:8px}
.field input,.field textarea{width:100%;padding:14px 16px;border-radius:14px;border:1.500px solid var(--line);background:var(--bg);font-size:17px;transition:border-color .2s,background .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--plum);background:#fff;box-shadow:0 0 0 4px rgba(var(--plum-rgb),.12)}
[dir=rtl] .field input[type=tel]{text-align:right}
.field textarea{resize:vertical;min-height:96px}
.field .bad{border-color:#D23B5A;background:#FFF5F7}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;border:1.500px solid var(--line);font-size:15px;font-weight:500;color:var(--ink2);transition:all .25s var(--ez)}
.pill:hover span{border-color:var(--ink3)}
.pill input:checked+span{background:var(--plum);border-color:var(--plum);color:#fff}
.pill input:focus-visible+span{outline:3px solid var(--coral);outline-offset:3px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14.500px;color:var(--ink2);cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--plum)}
.check a{text-decoration:underline;text-underline-offset:3px}
.form__msg{min-height:1.500em;font-size:15px;font-weight:500;text-align:center}
.form__msg.ok{color:#0D734B}.form__msg.err{color:#C0304F}.form__msg.demo{color:var(--plum)}

/* ---------- Legal ---------- */
.legal{max-width:calc(820px + 2*var(--gutter))}
.legal h2{margin-top:36px;font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(34px,2.800vw,42px);color:var(--ink)}
.legal h2:first-child{margin-top:0}
.legal p{margin-top:10px;font-size:17px;line-height:1.75;color:var(--ink2)}

/* ---------- Footer ---------- */
.ftr{max-width:1440px;margin:clamp(100px,10vw,150px) auto 0;padding:0 var(--gutter) 28px}
.ftr__top{display:flex;flex-wrap:wrap;gap:36px 72px;padding-bottom:44px}
.ftr__brand{flex:1 1 280px}
.ftr__brand p{margin-top:14px;max-width:320px;font-size:16px;color:var(--ink2)}
.ftr__col h4{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:30px;line-height:1;color:var(--ink);margin-bottom:14px}
.ftr__col a{display:block;padding:5px 0;font-size:15.500px;color:var(--ink2);transition:color .2s}
.ftr__col a:hover{color:var(--plum)}
.ftr__base{display:flex;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--ink3)}

/* ---------- Viewer and petals ---------- */
.viewer{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(27,18,32,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s var(--ez),visibility 0s linear .4s}
.viewer.open{opacity:1;visibility:visible;transition-delay:0s}
.viewer__phone{width:390px;height:844px;flex:none;border-radius:50px;overflow:hidden;background:#000;box-shadow:0 0 0 10px var(--phone),0 0 0 11.500px var(--phone-rim),0 60px 110px -30px #000;transform:translateY(60px) rotate(-4deg) scale(calc(var(--s,1)*.9));transition:transform .8s var(--ez)}
.viewer.open .viewer__phone{transform:scale(var(--s,1))}
.viewer__phone iframe{width:100%;height:100%;border:0;display:block}
.viewer__close{position:absolute;top:20px;inset-inline-end:24px;width:48px;height:48px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;transition:transform .5s var(--spring)}
.viewer__close span{position:absolute;width:18px;height:2px;border-radius:1px;background:var(--ink);transform:rotate(45deg)}
.viewer__close span:last-child{transform:rotate(-45deg)}
.viewer__close:hover{transform:rotate(90deg)}
.viewer__link{position:absolute;bottom:16px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.14);font-size:14px;font-weight:500;color:#fff}
.viewer__link:hover{background:rgba(255,255,255,.26)}
.petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:130}

/* ---------- Desktop ---------- */
@media (min-width:992px){
  .cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .price-sec__grid{grid-template-columns:1fr 1fr;gap:60px}
  .price-sec .plan{margin-inline-start:auto}
  .plan--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding:48px}
  .plan__side{display:flex;flex-direction:column;justify-content:space-between;padding-inline-end:56px;border-inline-end:1px solid var(--line)}
  .showcase{grid-template-columns:1fr 1fr;gap:60px}
  .showcase--flip .showcase__visual{order:2}
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,1.050fr)}
  .contact__intro{position:sticky;top:calc(var(--hh) + 40px)}

  /* pinned how-it-works */
  .how__pin{position:relative;height:calc(4*78vh + 100vh)}
  .how__sticky{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));display:flex;align-items:center;overflow:hidden}
  .how__grid{width:100%;display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px)}
  .rail{position:relative;display:flex;flex-direction:column;gap:6px;padding-inline-start:22px}
  .rail__line{position:absolute;top:8px;bottom:8px;inset-inline-start:0;width:3px;border-radius:2px;background:var(--line)}
  .rail__fill{display:block;width:100%;height:var(--prog,0%);border-radius:2px;background:linear-gradient(180deg,var(--coral),var(--plum))}
  .rail__btn{display:flex;align-items:baseline;gap:14px;padding:10px 0;text-align:start}
  .rail__num{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:38px;line-height:1;color:var(--line);transition:color .4s,transform .6s var(--spring)}
  .rail__label{font-size:15px;font-weight:500;line-height:1.3;color:var(--ink3);transition:color .3s}
  .rail__btn.done .rail__num{color:rgba(var(--plum-rgb),.45)}
  .rail__btn.on .rail__num{color:var(--plum);transform:scale(1.25)}
  .rail__btn.on .rail__label{color:var(--ink);font-weight:600}
  .rail__btn:hover .rail__label{color:var(--ink)}
  .steps{display:grid}
  .step{grid-area:1/1;margin:0;padding:0;border:0;border-radius:0;background:none;opacity:0;visibility:hidden;transform:translateY(50px);transition:opacity .45s ease,transform .8s var(--ez),visibility 0s linear .8s}
  .step.before{transform:translateY(-50px)}
  .step.on{opacity:1;visibility:visible;transform:none;transition-delay:.1s,.1s,0s}
  .step__title{font-size:clamp(52px,5.200vw,86px);line-height:.95}
  .step__text{font-size:clamp(17px,1.350vw,20px)}
  .how__visual{position:relative;display:flex;justify-content:center}
  .how__halo{position:absolute;left:50%;top:55%;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--halo,255,95,130),.3),rgba(var(--halo,255,95,130),.08) 55%,transparent);filter:blur(36px);transition:background 1s}
  .how__phone{transform:scale(var(--how-scale,1)) rotate(3deg);transform-origin:50% 50%}
  .shot{opacity:0;transform:scale(1.08);transition:opacity .6s ease,transform 1.200s var(--ez)}
  .shot.on{opacity:1;transform:none}
}

/* ---------- Small screens ---------- */
@media (max-width:991.980px){
  .hero__stage{height:620px;margin:8px calc(-1*var(--gutter)) 0}
  .hero__arch{width:320px;height:560px;margin-left:-160px;border-radius:160px 160px 0 0}
  .hero__arch::before{border-radius:144px 144px 0 0}
  .hero__blob--a{left:-40px;top:60px;width:280px;height:280px;filter:blur(70px)}
  .hero__blob--b{right:-60px;bottom:auto;top:260px;width:300px;height:300px;filter:blur(80px)}
  .fan{top:70px;width:230px;height:481px;margin-left:-115px}
  .fan .phone{width:230px;height:481px;padding:7px;border-radius:40px}
  .fan .phone__screen{border-radius:33px}
  .fan .phone__notch{top:14px;width:64px;height:18px;margin-left:-32px}
  .fan .phone--l,.ready .fan .phone--l{transform:translateX(-96px) translateY(36px) rotate(-10deg) scale(.8)}
  .fan .phone--r,.ready .fan .phone--r{transform:translateX(96px) translateY(36px) rotate(10deg) scale(.8)}
  .js:not(.ready) .fan .phone--l,.js:not(.ready) .fan .phone--r{transform:translateY(80px) scale(.8)}
  .chip{font-size:13px;padding:8px 14px 8px 10px;gap:9px}
  .chip--1{top:90px;inset-inline-start:auto;inset-inline-end:10px}
  .chip--2{top:330px;inset-inline-end:auto;inset-inline-start:10px}
  .chip--3{top:520px;inset-inline-start:auto;inset-inline-end:16px}
  .band__actions{width:100%;flex-direction:column}
  .band__actions .btn{width:100%}
  .cards.designs{display:flex;margin-inline:calc(-1*var(--gutter));padding:10px var(--gutter) 40px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}
  .cards.designs::-webkit-scrollbar{display:none}
  .cards.designs>li{flex:0 0 min(82%,340px);scroll-snap-align:center}
  .design__shot{height:380px}
  .envelope__actions .btn{width:100%}
  .envelope{border-radius:30px}
  .showcase__visual .phone{width:250px;height:523px;padding:8px;border-radius:44px}
  .showcase__visual .phone__screen{border-radius:36px}
  .showcase__actions .btn{flex:1 1 auto}
  .plan__side{padding-bottom:4px}
}
@media (max-width:420px){.chip--2{top:300px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ======================================================================
   Glass + glow layer
   ====================================================================== */
/* coloured glow behind cards: each card carries its own hue light */
.card::before{content:"";position:absolute;top:-80px;inset-inline-end:-80px;width:240px;height:240px;border-radius:50%;background:rgba(var(--h-rgb),.22);filter:blur(34px);z-index:-1;transition:transform .8s var(--ez),opacity .5s}
.card:hover::before{transform:scale(1.35)}
.card:hover{border-color:#fff}
/* soft glow behind gradient words */
.grad-text{filter:drop-shadow(0 10px 26px rgba(var(--coral-rgb),.35))}
/* hero text glow */
.hero__text::before{content:"";position:absolute;z-index:-1;inset:-10% -12% auto auto;width:min(620px,90vw);height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--coral-rgb),.22),rgba(var(--plum-rgb),.12) 55%,transparent);filter:blur(30px);pointer-events:none}
[dir=ltr] .hero__text::before{inset:-10% auto auto -12%}
/* section glows */
.glow{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(90px);opacity:.5}
.glow--plum{width:520px;height:520px;background:rgba(var(--plum-rgb),.45);top:20%;inset-inline-start:-6%}
.glow--coral{width:460px;height:460px;background:rgba(var(--coral-rgb),.5);bottom:-4%;inset-inline-end:-4%}
.price-sec{position:relative;isolation:isolate;overflow-x:clip}
/* stronger glass icon: tilted plate peeking out */
.ic__plate{transform:rotate(-10deg) translate(-7px,7px) scale(.94)}
.card:hover .ic__plate,.chip:hover .ic__plate,.showcase:hover .ic__plate,.plan:hover .ic__plate{transform:rotate(-15deg) translate(-10px,10px) scale(.92)}
.ic__face{background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(255,255,255,.45));-webkit-backdrop-filter:blur(10px) saturate(1.8);backdrop-filter:blur(10px) saturate(1.8)}
.btn--primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 40px -14px rgba(var(--plum-rgb),.75),0 0 0 0 rgba(var(--coral-rgb),0)}
.btn--glass{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--glass:hover{background:rgba(255,255,255,.22)}
.btn--coral{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px -14px rgba(var(--coral-rgb),.8)}

/* ---------- Plans ---------- */
.plans{margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,1.800vw,26px);align-items:stretch}
.plans>li{display:flex;min-width:0}
.plan{flex:1;display:flex;flex-direction:column;max-width:none;background:var(--glass-card);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-sh);isolation:isolate;transition:transform .5s var(--ez),box-shadow .5s var(--ez)}
.plan:hover{transform:translateY(-6px)}
.plan__wash{position:absolute;top:-90px;inset-inline-end:-90px;width:260px;height:260px;border-radius:50%;background:rgba(var(--h-rgb),.24);filter:blur(36px);z-index:-1}
.plan__top{align-items:flex-start}
.plan__for{font-size:15px}
.plan__list{flex:1}
.plan .btn{margin-top:auto}
.plan__num{filter:drop-shadow(0 10px 24px rgba(var(--h-rgb),.35));background:linear-gradient(120deg,var(--deep),var(--c2));-webkit-background-clip:text;background-clip:text}
.plan__cur{color:var(--deep)}
.plan--best{background:linear-gradient(165deg,#2A1233 0%,#4A1D5A 55%,#6B2A7A 100%);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:0 50px 90px -40px rgba(var(--plum-rgb),.85),0 0 0 1px rgba(var(--coral-rgb),.25)}
.plan--best .plan__wash{background:rgba(var(--coral-rgb),.45);width:320px;height:320px}
.plan--best .plan__name{color:#fff}
.plan--best .plan__for,.plan--best .plan__list li{color:rgba(255,255,255,.82)}
.plan--best .plan__list .no{color:rgba(255,255,255,.5)}
.plan--best .plan__list .no::before{background:rgba(255,255,255,.14)}
.plan--best .plan__list .no::after{color:rgba(255,255,255,.6)}
.plan--best .plan__num{background:linear-gradient(120deg,#FFD3DD,var(--coral));-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 12px 30px rgba(var(--coral-rgb),.55))}
.plan--best .plan__cur{color:var(--coral)}
.plan--best .btn--primary{background:var(--coral);box-shadow:0 18px 40px -14px rgba(var(--coral-rgb),.9)}
.plan--best .btn--primary:hover{background:var(--coral-h)}
.plan__badge{align-self:flex-start;margin:-6px 0 18px;padding:7px 16px;border-radius:999px;background:linear-gradient(100deg,var(--coral),#FFB86B);font-size:13px;font-weight:700;color:#2A1233;box-shadow:0 10px 24px -8px rgba(var(--coral-rgb),.8)}
.plans__note{margin-top:22px;text-align:center;font-size:15px;color:var(--ink3)}
@media (min-width:992px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
  .plan--best{padding-block:48px;transform:scale(1.04)}
  .plan--best:hover{transform:scale(1.04) translateY(-6px)}
}

/* ---------- Finale (closing) ---------- */
.finale{position:relative;max-width:1240px;margin-inline:auto;border-radius:44px;background:#1E0F26;overflow:hidden;isolation:isolate;padding:clamp(18px,2vw,26px)}
.finale__blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;animation:drift 14s ease-in-out infinite alternate}
.finale__blob--a{width:520px;height:520px;background:#B23C8C;top:-160px;inset-inline-start:-120px}
.finale__blob--b{width:460px;height:460px;background:var(--coral);bottom:-180px;inset-inline-end:10%;animation-duration:17s;opacity:.85}
.finale__blob--c{width:360px;height:360px;background:#7A4BF0;top:20%;inset-inline-end:-120px;animation-duration:12s;opacity:.7}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,-40px) scale(1.15)}}
.finale__petals i{position:absolute;top:-30px;width:14px;height:9px;border-radius:50%;background:rgba(255,200,214,.85);animation:fall 9s linear infinite;z-index:0}
.finale__petals i:nth-child(1){left:8%;animation-delay:-1s}.finale__petals i:nth-child(2){left:22%;animation-delay:-5s;animation-duration:11s}
.finale__petals i:nth-child(3){left:37%;animation-delay:-3s}.finale__petals i:nth-child(4){left:51%;animation-delay:-7s;animation-duration:12s}
.finale__petals i:nth-child(5){left:63%;animation-delay:-2s;animation-duration:10s}.finale__petals i:nth-child(6){left:76%;animation-delay:-6s}
.finale__petals i:nth-child(7){left:88%;animation-delay:-4s;animation-duration:13s}.finale__petals i:nth-child(8){left:95%;animation-delay:-8s}
@keyframes fall{0%{transform:translateY(0) rotate(0) translateX(0);opacity:0}10%{opacity:1}100%{transform:translateY(760px) rotate(540deg) translateX(-60px);opacity:0}}
.finale__glass{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:20px;align-items:center;border-radius:34px;padding:clamp(34px,5vw,72px) clamp(24px,5vw,72px) 0;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.finale__copy{color:#fff}
.finale__title{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:clamp(50px,6.600vw,104px);line-height:.94;text-shadow:0 20px 60px rgba(0,0,0,.35)}
.finale__title>span{display:block}
.grad-text--light{background:linear-gradient(100deg,#FFD3DD,var(--coral) 60%,#FFB86B);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 12px 34px rgba(var(--coral-rgb),.55))}
.finale__text{margin-top:20px;max-width:460px;font-size:clamp(17px,1.400vw,20px);color:rgba(255,255,255,.8)}
.finale__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.finale__visual{position:relative;display:flex;justify-content:center;align-self:end;height:420px;overflow:hidden;margin-top:8px}
.finale__phone{width:260px;height:544px;padding:8px;border-radius:46px;transform:rotate(-6deg) translateY(20px);box-shadow:0 60px 90px -30px rgba(0,0,0,.6),inset 0 0 0 1.500px var(--phone-rim)}
.finale__phone .phone__screen{border-radius:38px}
.finale .chip--glass{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.finale__chip--1{top:60px;inset-inline-end:4%}
.finale__chip--2{top:220px;inset-inline-start:2%;animation-delay:-3s}
.js .finale .chip{opacity:1;scale:1}
@media (min-width:992px){
  .finale__glass{grid-template-columns:1.1fr .9fr;gap:40px;padding-bottom:0}
  .finale__copy{padding-bottom:clamp(40px,5vw,72px)}
  .finale__visual{height:520px;margin-top:0}
  .finale__phone{width:290px;height:607px;padding:9px;border-radius:50px;transform:rotate(-6deg) translateY(40px)}
  .finale__phone .phone__screen{border-radius:41px}
}
@media (max-width:991.980px){.finale__actions .btn{width:100%}.finale{border-radius:32px}.finale__glass{border-radius:24px}}

/* ---------- Designs catalogue ---------- */
.design__shot img,.design__shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.design__shot video{opacity:0;transition:opacity .5s ease}
.design.playing .design__shot video{opacity:1}
.design__shot img{transition:transform 1.200s var(--ez)}
.design:hover .design__shot img{transform:scale(1.05)}
.dcard{flex-direction:column}
.dcard>.card{flex:1}
.dcard__pick{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0 6px;font-size:15px;font-weight:600;color:var(--plum)}
.dcard__pick span{background:linear-gradient(var(--coral),var(--coral)) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size .35s var(--ez)}
.dcard__pick:hover span{background-size:100% 2px}
.dcard.pop{animation:pop .55s var(--ez) both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.designs--all{margin-top:28px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;background:var(--glass-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-sh);font-size:15px;font-weight:500;color:var(--ink2);transition:background .3s,color .3s,transform .3s var(--ez)}
.filter b{font-weight:600;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--hover)}
.filter:hover{transform:translateY(-2px)}
.filter.is-on{background:var(--plum);color:#fff;border-color:var(--plum);box-shadow:0 14px 28px -14px rgba(var(--plum-rgb),.8)}
.filter.is-on b{background:rgba(255,255,255,.2)}
.field select{width:100%;padding:14px 16px;border-radius:14px;border:1.500px solid var(--line);background:var(--bg);font-size:17px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);background-position:18px 50%,24px 50%;background-size:6px 6px;background-repeat:no-repeat}
[dir=ltr] .field select{background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%}
.field select:focus{outline:none;border-color:var(--plum);background-color:#fff;box-shadow:0 0 0 4px rgba(var(--plum-rgb),.12)}
@media (max-width:991.980px){
  .designs--all{display:grid;margin-inline:0;padding:0;overflow:visible;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
  .designs--all>li{flex:none}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding:6px var(--gutter) 10px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
}

/* Card and plan glows as soft gradients, not blur filters: blur inside a glass (backdrop-filter) box gets cut into a hard line in Chrome */
.card::before{filter:none;width:340px;height:340px;top:-150px;inset-inline-end:-150px;background:radial-gradient(closest-side,rgba(var(--h-rgb),.26),rgba(var(--h-rgb),.1) 55%,rgba(var(--h-rgb),0))}
.plan__wash{filter:none;width:380px;height:380px;top:-170px;inset-inline-end:-170px;background:radial-gradient(closest-side,rgba(var(--h-rgb),.3),rgba(var(--h-rgb),.12) 55%,rgba(var(--h-rgb),0))}
.plan--best .plan__wash{width:460px;height:460px;top:-200px;inset-inline-end:-200px;background:radial-gradient(closest-side,rgba(var(--coral-rgb),.5),rgba(var(--coral-rgb),.18) 55%,rgba(var(--coral-rgb),0))}
.dcard[hidden]{display:none}
@media (max-width:991.980px){
  .cards.designs.designs--all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-inline:0;padding:0;overflow:visible}
  .designs--all .design{padding:8px 8px 16px;border-radius:22px}
  .designs--all .design__shot{height:auto;aspect-ratio:9/14;border-radius:16px 16px 60px 60px/16px 16px 22px 22px;margin-bottom:10px}
  .designs--all .design .card__title,.designs--all .design .card__desc{padding-inline:6px}
  .designs--all .card__title{font-size:26px}
  .designs--all .card__desc{font-size:13.500px;line-height:1.45}
  .designs--all .go{width:32px;height:32px;bottom:10px;inset-inline-end:10px;border-radius:11px}
  .designs--all .dcard__pick{font-size:13.500px}
}

/* ---------- Currency switch ---------- */
.cur{display:flex;justify-content:center;gap:6px;width:max-content;margin:clamp(36px,4vw,56px) auto 0;padding:5px;border-radius:999px;background:var(--glass-card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:var(--glass-sh)}
.cur__btn{height:38px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink3);direction:ltr;transition:background .3s,color .3s}
.cur__btn:hover{color:var(--ink)}
.cur__btn[aria-pressed=true]{background:var(--plum);color:#fff;box-shadow:0 10px 22px -10px rgba(var(--plum-rgb),.8)}
.cur+.plans{margin-top:28px}
.plan__eta{display:inline-flex;align-items:center;gap:8px;margin:-8px 0 20px;padding:6px 12px;border-radius:999px;background:rgba(var(--h-rgb),.12);font-size:14px;font-weight:600;color:var(--deep);width:max-content}
.plan--best .plan__eta{background:rgba(255,255,255,.12);color:#FFD3DD}
.plan__clock{position:relative;width:14px;height:14px;border-radius:50%;border:1.8px solid currentColor;flex:none}
.plan__clock::before,.plan__clock::after{content:"";position:absolute;left:50%;bottom:50%;width:1.8px;margin-left:-.9px;background:currentColor;border-radius:1px;transform-origin:50% 100%}
.plan__clock::before{height:4.5px}
.plan__clock::after{height:3.5px;transform:rotate(90deg)}

/* ---------- WhatsApp button: glass, gently pulsing ---------- */
.wa{position:fixed;z-index:90;bottom:max(20px,env(safe-area-inset-bottom));left:20px;width:62px;height:62px;display:block;transition:transform .4s var(--spring),opacity .35s,visibility .35s}
.wa__glass{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:linear-gradient(155deg,rgba(255,255,255,.75),rgba(255,255,255,.35)),radial-gradient(circle at 30% 25%,rgba(37,211,102,.35),rgba(37,211,102,.08) 70%);-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 0 #fff,inset 0 -10px 18px -10px rgba(37,211,102,.45),0 18px 36px -14px rgba(18,140,74,.55);animation:wa-breathe 2.8s ease-in-out infinite}
.wa__glass svg{width:30px;height:30px;fill:#1DA851;filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
.wa__ring{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.35);animation:wa-pulse 2.8s ease-out infinite}
.wa__tip{position:absolute;left:calc(100% + 12px);top:50%;padding:7px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-6px,-50%);pointer-events:none;transition:opacity .25s,transform .35s var(--ez)}
.wa:hover{transform:scale(1.08)}
.wa:hover .wa__tip,.wa:focus-visible .wa__tip{opacity:1;transform:translate(0,-50%)}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}
@keyframes wa-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
html.menu-open .wa,body.lock .wa{opacity:0;visibility:hidden}
@media (max-width:991.98px){.wa{width:56px;height:56px;left:16px}.wa__glass svg{width:27px;height:27px}.wa__tip{display:none}}

/* ======================================================================
   Headline font: Rubik 800, tight, stretched taller.
   Rubik has no width axis, so headlines are narrowed with `scale` (not transform,
   which the reveal animations use) and given a wider box so lines wrap at the
   same visual width. --sx is the horizontal squeeze: lower = taller-looking.
   ====================================================================== */
:root{--display:Rubik,system-ui,sans-serif;--display-stretch:100%;--display-weight:800;--sx:.82;--dsize:1.14}
.display,.hero__title,.step__title,.showcase__title,.custom__title,.finale__title,.band__title,.faq__group,.plan__name,.card__title,.legal h2,.ftr__col h4{
  letter-spacing:-.04em;line-height:.9;scale:var(--sx) 1;transform-origin:100% 50%;
  width:calc(100% / var(--sx));margin-inline-end:calc(100% - 100% / var(--sx));max-width:none}
[dir=ltr] :is(.display,.hero__title,.step__title,.showcase__title,.custom__title,.finale__title,.band__title,.faq__group,.plan__name,.card__title,.legal h2,.ftr__col h4){transform-origin:0 50%;letter-spacing:-.03em}
.how__head .display,.page-head--center .display{transform-origin:50% 50%;margin-inline:calc((100% - 100% / var(--sx)) / 2)}
.hero__title{font-size:calc(clamp(54px,7.400vw,118px) * var(--dsize))}
[lang=en] .hero__title{font-size:calc(clamp(50px,6.600vw,108px) * var(--dsize))}
.display{font-size:calc(clamp(48px,6.400vw,104px) * var(--dsize))}
.page-head .display{font-size:calc(clamp(52px,7vw,112px) * var(--dsize))}
.finale__title{font-size:calc(clamp(50px,6.600vw,104px) * var(--dsize))}
.plan__num{letter-spacing:-.04em}
.rail__num,.step__count{letter-spacing:-.02em}

/* Lovely logo: Latin wordmark, so it stays left-to-right with the mark on its right in both languages */
.logo{direction:ltr;gap:.2em;font-family:Fredoka,"Arial Rounded MT Bold",Rubik,sans-serif;font-stretch:normal;font-weight:600;letter-spacing:.005em}
.logo__mark{width:1.05em;height:1.05em;flex:none;transition:transform .7s var(--spring)}
.logo:hover .logo__mark{transform:scale(1.1)}