:root{
  --paper:#F4F3EE;--paper2:#EAE9E2;--card:#FBFAF7;
  --ink:#121211;--ink2:#34342F;--mute:#68685F;--line:rgba(18,18,17,.14);
  --yellow:#FFC22E;--yellow-soft:#FFF3D3;--blue:#1D3FA6;--red:#D8392A;
  --wa:#25D366;
  --gut:clamp(16px,4vw,60px);
  --ease:cubic-bezier(.22,.9,.24,1);
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
::selection{background:var(--yellow);color:var(--ink)}
svg{display:block}

/* ---------- type ---------- */
.d{font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.005em;font-variation-settings:"wdth" 75,"wght" 800}
.ch{display:inline-block;font-variation-settings:"wdth" var(--w,75),"wght" var(--g,800);will-change:transform}
[data-split] .ln{display:block;white-space:nowrap;clip-path:inset(-.4em -100vw -.1em -100vw)}
[data-split] .ln-in{display:inline-block}
.js [data-split] .ch{transform:translateY(112%)}
.h3{font-variation-settings:"wdth" 85,"wght" 680;font-size:22px;line-height:1.15;letter-spacing:-.005em}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px;border-radius:5px;font-weight:600;font-size:15.5px;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .4s var(--ease),border-color .4s}
.btn::before{content:"";position:absolute;inset:0;transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink::before{background:var(--yellow)}
.btn-ink:hover{color:var(--ink)}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:var(--paper)}
.btn-light{border:1.5px solid rgba(244,243,238,.4);color:var(--paper)}
.btn-light::before{background:var(--paper)}
.btn-light:hover{color:var(--ink)}
.btn-sm{height:42px;padding:0 18px;font-size:14.5px}
.btn .wa-ic{width:18px;height:18px}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--paper);display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.76,0,.24,1)}
.loader.out{clip-path:inset(0 0 100% 0)}
/* Fail-safe: if JS never takes over (off, or a module or CDN failed) the loader steps aside after 6s. runLoader() cancels it. */
.loader{animation:ldBail 0s 6s forwards}
@keyframes ldBail{to{visibility:hidden;pointer-events:none}}
.ld{position:relative;display:flex;gap:clamp(8px,1.3vw,16px);padding-top:22px}
.ld::before{content:"";position:absolute;top:0;left:-34px;right:-34px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:ldLine .7s var(--ease) .1s forwards}
.ld-f{width:clamp(40px,5.2vw,66px);opacity:0;transform:translateY(-46px) rotate(-6deg);animation:ldDrop .8s var(--ease) forwards;animation-delay:calc(.45s + var(--i)*.085s)}
.ld-f::before{content:"";position:absolute;margin:-22px 0 0 0;width:1.5px;height:22px;background:var(--ink)}
.ld-f svg{width:100%;aspect-ratio:4/3;transform-origin:0 50%;animation:flutter 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.31s)}
.ld-f span{display:block;text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;margin-top:10px}
.ld-note{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-size:13px;color:var(--mute);opacity:0;animation:fadeIn .6s ease 1.1s forwards}
@keyframes ldLine{to{transform:scaleX(1)}}
@keyframes ldDrop{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes flutter{0%,100%{transform:skewY(0) scaleX(1)}35%{transform:skewY(-2.4deg) scaleX(.975)}70%{transform:skewY(1.6deg) scaleX(.99)}}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:400;display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),opacity .3s}
.cur span{font-size:12.5px;font-weight:700;color:#000;opacity:0;transition:opacity .25s;letter-spacing:.02em}
.cur.big{width:78px;height:78px;margin:-39px 0 0 -39px}
.cur.big span{opacity:1}
.cur.link{width:46px;height:46px;margin:-23px 0 0 -23px}
.cur.hide{opacity:0}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--gut);transition:background .45s,transform .6s var(--ease),box-shadow .45s}
.nav.scrolled{background:rgba(244,243,238,.84);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-105%)}
.logo{display:flex;align-items:center;gap:11px;font-variation-settings:"wdth" 120,"wght" 750;letter-spacing:.07em;font-size:17px;text-transform:uppercase}
.logo .lf{width:27px;height:20px;position:relative}
.logo .lf svg{width:100%;height:100%}
.nav-links{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{display:flex;align-items:center;gap:20px}
.live{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2)}
.live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--wa);flex:none}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);animation:ping 2.2s ease-out infinite}
.live.off i{background:#B9B9B1}.live.off i::after{display:none}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;padding:clamp(96px,13vh,136px) var(--gut) 26px;display:flex;flex-direction:column}
.hero-h{font-size:clamp(56px,12vw,230px);margin-left:-.035em}
.hero-low{flex:1;display:grid;grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr);gap:var(--gut);margin-top:clamp(18px,2.6vh,34px);padding-top:clamp(22px,3vh,34px);position:relative;min-height:330px}
.hero-rule{position:absolute;top:0;left:0;right:0;height:1.5px;background:var(--ink);transform-origin:left}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero-sub{font-size:clamp(18px,1.42vw,23px);line-height:1.42;max-width:27em;color:var(--ink2)}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-meta{margin-top:auto;padding-top:30px;display:flex;gap:28px;font-size:13.5px;color:var(--mute)}
.hero-meta b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.hero-flag{position:relative;min-height:300px;margin-top:calc(-1 * clamp(22px,3vh,34px))}
.hero-flag canvas{position:absolute;inset:0;width:100%;height:100%}
.halyard{position:absolute;top:0;bottom:-26px;left:var(--hx,12%);width:2px;margin-left:-1px;background:var(--ink);transform-origin:top;opacity:0;transition:opacity .6s}
.halyard.on{opacity:1}
.halyard i{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.halyard i:first-child{top:calc(var(--ht,30%) - 5px)}
.halyard i:last-child{top:calc(var(--hb,70%) - 5px)}
.flag-cap{position:absolute;right:0;bottom:0;max-width:290px;font-size:13.5px;line-height:1.45;color:var(--mute);text-align:right}
.flag-cap b{color:var(--ink);font-weight:600}
.flag-cap a{display:inline-block;margin-top:6px;color:var(--ink);font-weight:600;border-bottom:1.5px solid var(--yellow)}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--paper);padding:clamp(64px,8vw,116px) 0 clamp(56px,7vw,96px);overflow:hidden;position:relative}
.ticker-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:0 var(--gut);margin-bottom:clamp(30px,4vw,52px)}
.ticker-head h2{font-size:clamp(30px,3.5vw,56px);font-variation-settings:"wdth" 78,"wght" 720;line-height:1;max-width:15em;letter-spacing:-.01em}
.ticker-key{display:flex;flex-direction:column;gap:8px;font-size:14px;color:rgba(244,243,238,.6);flex:none}
.ticker-key span{display:flex;align-items:center;gap:10px}
.ticker-key i{width:22px;height:14px;border-radius:7px 7px 7px 2px;background:#2B2B29}
.ticker-key i.y{background:var(--yellow)}
.row{display:flex;gap:14px;width:max-content;padding:7px 0;will-change:transform}
.bub{flex:none;display:flex;align-items:center;gap:14px;font-size:clamp(17px,1.55vw,24px);line-height:1.2;padding:14px 20px 15px;border-radius:20px 20px 20px 5px;background:#262624;color:#EDECE6;white-space:nowrap}
.bub small{font-size:12px;color:rgba(237,236,230,.58);font-weight:500;display:flex;align-items:center;gap:5px}
.bub small svg{width:15px;height:15px;color:#53BDEB}
.bub.ask{background:var(--yellow);color:var(--ink)}
.bub.ask small{color:rgba(18,18,17,.7)}
.ticker-foot{padding:clamp(28px,3vw,44px) var(--gut) 0;display:flex;justify-content:space-between;gap:30px;align-items:flex-end;color:rgba(244,243,238,.6);font-size:15px}
.ticker-foot p{max-width:34em}
.ticker-foot b{color:var(--paper);font-weight:600}

/* ---------- section heads ---------- */
.sec{padding:clamp(96px,12vw,176px) var(--gut)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:end;margin-bottom:clamp(36px,5vw,70px)}
.sec-h{font-size:clamp(52px,8.6vw,158px);min-width:0;max-width:100%}
.sec-intro{font-size:clamp(17px,1.32vw,20.5px);line-height:1.5;color:var(--ink2);max-width:25em;padding-bottom:.5em}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--dl,0s)}
.js .rv.in{opacity:1;transform:none}

/* ---------- demo ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.tab{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:8px;border:1.5px solid var(--line);background:transparent;transition:background .35s,border-color .35s,color .35s}
.tab:hover{border-color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tab-av{width:40px;height:40px;border-radius:6px;background:#999 center/cover;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;flex:none}
.tab b{display:block;font-size:15px;font-weight:600;line-height:1.2}
.tab small{display:block;font-size:12.5px;opacity:.6}
.stage{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(18px,3vw,56px);background:var(--paper2);border-radius:12px;padding:clamp(28px,3.6vw,56px) clamp(16px,3vw,48px) clamp(24px,3vw,44px);overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(18,18,17,.09) 1px,transparent 1.2px);background-size:22px 22px;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.ph-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.ph-cap{font-size:13.5px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:8px}
.ph-cap em{font-style:normal;font-weight:500;color:var(--mute)}
.phone{position:relative;width:clamp(272px,23vw,322px);height:clamp(540px,72vh,640px);border-radius:48px;background:#111;padding:10px;box-shadow:0 50px 90px -40px rgba(0,0,0,.55),0 0 0 1.5px #3a3a3a inset,0 0 0 4px #1c1c1c inset}
.phone.buzz{animation:buzz .55s linear}
@keyframes buzz{0%,100%{transform:none}10%,30%,50%,70%{transform:translateX(-3px) rotate(-.6deg)}20%,40%,60%,80%{transform:translateX(3px) rotate(.6deg)}}
.screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;display:flex;flex-direction:column;font-family:-apple-system,"SF Pro Text","Segoe UI",var(--sans);font-size:14px}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:84px;height:27px;border-radius:20px;background:#000;z-index:6}
.sbar{height:46px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 20px 6px 26px;font-size:13px;font-weight:600;flex:none;position:relative;z-index:5}
.sbar .ics{display:flex;gap:5px;align-items:center}
.sbar svg{height:11px;width:auto}
/* whatsapp */
.wa{background:#EFE7DE}
.wa .sbar{background:#F7F5F3}
.wa-head{display:flex;align-items:center;gap:9px;padding:4px 12px 9px 8px;background:#F7F5F3;border-bottom:1px solid rgba(0,0,0,.07);flex:none}
.wa-head .bk{width:22px;height:22px;color:#007AFF}
.wa-av{width:36px;height:36px;border-radius:50%;background:#999 center/cover;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none;font-family:var(--sans)}
.wa-who{flex:1;min-width:0}
.wa-name{font-weight:600;font-size:14.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.wa-name svg{width:14px;height:14px;flex:none}
.wa-st{font-size:12px;color:#667781;height:15px}
.wa-st.typing{color:#008069}
.wa-ics{display:flex;gap:16px;color:#007AFF}
.wa-ics svg{width:21px;height:21px}
.wa-body{flex:1;overflow:hidden;position:relative;padding:10px 9px 8px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;background-color:#EFE7DE;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='15' cy='17' r='6'/%3E%3Cpath d='M55 10l9 9M64 10l-9 9'/%3E%3Crect x='32' y='48' width='13' height='10' rx='2'/%3E%3Cpath d='M66 58c4-7 11-7 14 0'/%3E%3Cpath d='M9 70l7-9 7 9z'/%3E%3Cpath d='M40 25q5-6 10 0t10 0'/%3E%3C/g%3E%3C/svg%3E")}
.chip-date{align-self:center;background:#fff;color:#54656F;font-size:11.5px;padding:4px 10px;border-radius:7px;margin:2px 0 8px;box-shadow:0 1px .5px rgba(0,0,0,.1)}
.msg{position:relative;max-width:82%;padding:6px 9px 7px;border-radius:9px;font-size:14.2px;line-height:1.36;box-shadow:0 1px .5px rgba(0,0,0,.13);animation:pop .38s var(--ease) both;color:#111B21;word-wrap:break-word}
.msg.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px;transform-origin:100% 0}
.msg.in{align-self:flex-start;background:#fff;border-top-left-radius:2px;transform-origin:0 0}
.msg.gap{margin-top:6px}
.msg .tm{float:right;display:flex;align-items:center;gap:3px;font-size:11px;color:#667781;margin:7px -2px -5px 12px;line-height:1}
.msg .tm svg{width:16px;height:11px;color:#53BDEB}
.msg.asking{box-shadow:0 0 0 2px var(--yellow),0 1px .5px rgba(0,0,0,.13)}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(6px)}to{opacity:1;transform:none}}
.wa-body .typing{align-self:flex-start;background:#fff;border-radius:9px;border-top-left-radius:2px;padding:11px 13px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.13);animation:pop .3s var(--ease) both}
.wa-body .typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:dot 1.2s infinite}
.wa-body .typing i:nth-child(2){animation-delay:.15s}.wa-body .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.wa-in{flex:none;display:flex;gap:7px;padding:7px 8px 20px;align-items:center;background:#F7F5F3}
.wa-field{flex:1;height:34px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;padding:0 12px;color:#8696A0;font-size:14px;gap:8px}
.wa-field svg{width:18px;height:18px}
.wa-mic{width:34px;height:34px;border-radius:50%;background:#00A884;display:grid;place-items:center;color:#fff}
.wa-mic svg{width:17px;height:17px}
/* lock screen */
.lock{color:#fff;background:#1a2340;align-items:center}
.lock-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,40,.15),rgba(10,16,40,.55)),var(--wp,linear-gradient(160deg,#2a3f7a,#c06a3c));background-size:cover;background-position:center;transform:scale(1.04);filter:saturate(1.05)}
.lock.lit .lock-bg{animation:lit 1.2s ease}
@keyframes lit{0%{filter:brightness(1.35) saturate(1.05)}100%{filter:brightness(1) saturate(1.05)}}
.lock>*:not(.lock-bg):not(.island){position:relative;z-index:2}
.lock .sbar{width:100%;color:#fff}
.lk-lock{margin-top:8px;opacity:.9}
.lk-lock svg{width:15px;height:15px}
.lk-date{margin-top:6px;font-size:15.5px;font-weight:600;opacity:.92}
.lk-time{font-family:var(--sans);font-size:clamp(66px,6vw,80px);font-variation-settings:"wdth" 92,"wght" 640;line-height:1;letter-spacing:-.02em;margin-top:2px}
.notifs{position:absolute!important;left:9px;right:9px;bottom:74px;top:218px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 70px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 70px)}
.nt{flex:none;background:rgba(246,246,246,.78);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);color:#111;border-radius:19px;padding:10px 12px 11px;font-size:13px;line-height:1.3;animation:ntIn .6s var(--ease) both;transform-origin:50% 100%}
.nt.old{opacity:.72}
@keyframes ntIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.nt-top{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#5c5c5c;margin-bottom:3px}
.nt-ic{width:20px;height:15px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 .5px rgba(0,0,0,.15)}
.nt-ic svg{width:100%;height:100%}
.nt-app{font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:11px}
.nt-when{margin-left:auto}
.nt-tag{background:var(--yellow);color:#111;font-weight:700;font-size:10.5px;padding:2px 7px;border-radius:9px;margin-left:auto}
.nt b{display:block;font-weight:650;font-size:13.5px}
.nt p{color:#333;margin-top:1px}
.nt.ask{background:rgba(255,255,255,.93);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.nt-acts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nt-acts button{position:relative;background:#EDEDEB;border-radius:11px;padding:9px 10px;font-weight:600;font-size:13.5px;text-align:center;color:#111;transition:transform .2s,background .2s}
.nt-acts button:hover{background:#E2E2DF}
.nt-acts button:active{transform:scale(.97)}
.nt-acts button.pri{background:var(--ink);color:#fff}
.nt-acts button.pri:hover{background:#2a2a28}
.nt.hint .nt-acts button.pri{animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%,100%{box-shadow:0 0 0 0 rgba(255,194,46,.0)}50%{box-shadow:0 0 0 5px rgba(255,194,46,.9)}}
.nt-acts button.tapped{background:var(--yellow);color:#111}
.nt.done{padding-bottom:10px}
.nt.done .nt-acts{display:none}
.nt .rs{display:flex;align-items:center;gap:6px;margin-top:6px;font-weight:600;color:#111}
.nt .rs i{width:16px;height:16px;border-radius:50%;background:var(--wa);display:grid;place-items:center}
.nt .rs svg{width:10px;height:10px;color:#fff}
.lk-bot{position:absolute!important;bottom:22px;left:26px;right:26px;display:flex;justify-content:space-between}
.lk-bot span{width:42px;height:42px;border-radius:50%;background:rgba(30,30,30,.35);backdrop-filter:blur(10px);display:grid;place-items:center}
.lk-bot svg{width:18px;height:18px}
.homebar{position:absolute!important;bottom:8px;left:50%;width:120px;height:4.5px;border-radius:3px;background:rgba(255,255,255,.85);transform:translateX(-50%)}
.wa .homebar{background:#111}
/* bridge */
.bridge{position:relative;width:clamp(90px,10vw,150px);display:flex;flex-direction:column;align-items:center;gap:14px;align-self:center}
.br-line{position:relative;width:100%;height:2px;background-image:linear-gradient(90deg,var(--ink) 50%,transparent 50%);background-size:10px 2px;opacity:.5}
.br-f{position:absolute;top:-30px;left:0;width:30px;height:23px;transition:left 1s var(--ease),opacity .4s;opacity:0}
.br-f svg{width:100%;height:100%;transform-origin:0 50%;animation:flutter 1.4s ease-in-out infinite}
.br-f::before{content:"";position:absolute;left:0;top:0;width:1.5px;height:38px;background:var(--ink)}
.bridge.go .br-f{left:calc(100% - 30px);opacity:1}
.bridge.back .br-f{left:0;opacity:1}
.br-tx{font-size:13px;font-weight:600;text-align:center;line-height:1.3;min-height:3.9em;display:flex;align-items:flex-end;justify-content:center;transition:color .3s}
.br-tx.hot{color:var(--ink)}
.yourcall{position:absolute;right:calc(100% + 14px);bottom:150px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:600;padding:9px 13px;border-radius:8px;white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none;z-index:10}
.yourcall::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:0;border-left-color:var(--ink)}
.yourcall.on{opacity:1;transform:none}
.demo-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:var(--gut);align-items:end;margin-top:28px;padding-top:24px;border-top:1.5px solid var(--ink)}
.stat b{display:block;font-size:clamp(40px,4.6vw,72px);font-variation-settings:"wdth" 75,"wght" 800;line-height:.9;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:14px;color:var(--mute);margin-top:8px}
.demo-ctl{display:flex;gap:10px}

/* ---------- sorter ---------- */
.sorter{border-top:1.5px solid var(--ink)}
.sort-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.col{border-radius:12px;padding:clamp(18px,2vw,26px);min-height:390px;background:var(--card);border:1.5px solid var(--line);transition:border-color .3s,background .3s,box-shadow .3s}
.col.you{background:var(--yellow-soft);border-color:rgba(214,160,20,.35)}
.col.over{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.col header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.col header p{font-size:14px;color:var(--mute);max-width:19em;margin-top:4px}
.col .cnt{font-size:13px;font-weight:700;background:var(--ink);color:var(--paper);border-radius:6px;padding:4px 9px;font-variant-numeric:tabular-nums;flex:none}
.col.you .cnt{background:var(--yellow);color:var(--ink)}
.drop{display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start;min-height:280px}
.chip{display:inline-flex;align-items:center;gap:12px;padding:11px 14px 11px 12px;border-radius:8px;background:#fff;border:1.5px solid var(--line);font-size:15.5px;line-height:1.25;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:border-color .25s,box-shadow .25s}
.chip:hover{border-color:rgba(18,18,17,.4);box-shadow:0 6px 16px -10px rgba(0,0,0,.4)}
.chip .gr{width:8px;height:14px;flex:none;opacity:.35;background-image:radial-gradient(currentColor 1.2px,transparent 1.4px);background-size:4px 4.7px}
.chip .hr{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.col.you .chip .hr{text-decoration:line-through}
.chip.drag{position:fixed;z-index:200;pointer-events:none;cursor:grabbing;box-shadow:0 24px 50px -16px rgba(0,0,0,.45);rotate:-2.5deg;scale:1.04;margin:0}
.chip.ph{opacity:.0}
.tally{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(28px,3vw,44px);align-items:start}
.tally b{display:block;font-size:clamp(64px,8.5vw,150px);font-variation-settings:"wdth" 72,"wght" 800;line-height:.82;font-variant-numeric:tabular-nums}
.tally span{display:block;font-size:14.5px;color:var(--mute);margin-top:10px;max-width:14em}
.tally p{font-size:16px;color:var(--ink2);max-width:22em;justify-self:end;padding-bottom:4px}

/* ---------- code (flags) ---------- */
.code{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.code-pin{height:100vh;height:100svh;position:relative;overflow:hidden}
.code-track{display:flex;height:100%;will-change:transform}
.code-intro{flex:none;width:min(64vw,880px);padding:clamp(110px,15vh,150px) var(--gut) clamp(36px,6vh,64px);display:flex;flex-direction:column;justify-content:space-between;position:relative}
.code-intro .sec-h{color:var(--paper)}
.code-intro p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:rgba(244,243,238,.72);max-width:27em;margin-top:28px}
.code-intro p b{color:var(--paper);font-weight:600}
.code-photo{position:relative;width:min(380px,70%);aspect-ratio:16/10;border-radius:8px;overflow:hidden;margin-top:28px}
.code-photo img{width:100%;height:100%;object-fit:cover}
.code-photo span{position:absolute;left:10px;bottom:8px;font-size:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.code-hint{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:rgba(244,243,238,.7)}
.code-hint i{display:block;width:50px;height:1.5px;background:currentColor;position:relative;overflow:hidden}
.code-hint i::after{content:"";position:absolute;inset:0;background:var(--yellow);animation:slide 1.8s var(--ease) infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.panel{flex:none;width:min(80vw,1080px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(110px,15vh,150px) clamp(28px,4vw,64px) clamp(36px,6vh,64px);border-left:1px solid rgba(244,243,238,.12);position:relative}
.p-flag{position:relative}
.p-flag canvas{width:100%;aspect-ratio:4/3.5;display:block}
.p-id{display:flex;align-items:baseline;gap:14px;margin-top:6px}
.p-id b{font-size:clamp(60px,6vw,104px);font-variation-settings:"wdth" 70,"wght" 800;line-height:.8}
.p-id span{font-size:15px;color:rgba(244,243,238,.55);font-weight:500}
.p-q{font-size:clamp(14px,1.05vw,16px);color:rgba(244,243,238,.55);display:flex;gap:10px;align-items:flex-start;border-top:1px solid rgba(244,243,238,.18);padding-top:14px;max-width:30em}
.p-q svg{width:16px;height:16px;flex:none;margin-top:3px;opacity:.7}
.p-h{font-size:clamp(40px,4.6vw,80px);font-variation-settings:"wdth" 72,"wght" 800;text-transform:uppercase;line-height:.86;margin:22px 0 20px}
.p-b{font-size:clamp(16.5px,1.25vw,19px);line-height:1.55;color:rgba(244,243,238,.76);max-width:27em}
.p-b b{color:var(--paper);font-weight:600}
.code-prog{position:absolute;top:clamp(26px,4vh,40px);right:var(--gut);display:flex;gap:8px;z-index:5;align-items:flex-end}
.code-prog span{width:26px;transition:transform .45s var(--ease),opacity .4s;opacity:.35;transform-origin:50% 100%}
.code-prog span svg{width:100%;aspect-ratio:4/3;outline:1px solid rgba(244,243,238,.18)}
.code-prog span.on{opacity:1;transform:scale(1.35)}
.code-count{position:absolute;top:clamp(30px,4.4vh,44px);left:var(--gut);font-size:13.5px;font-weight:600;color:rgba(244,243,238,.6);z-index:5;font-variant-numeric:tabular-nums}
.code-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(244,243,238,.1);z-index:5}
.code-bar i{display:block;height:100%;width:100%;background:var(--yellow);transform-origin:left;transform:scaleX(0)}

/* ---------- ladder ---------- */
.ladder{padding-bottom:clamp(40px,6vw,80px)}
.stack{position:relative}
.step{position:sticky;top:calc(90px + var(--i) * 20px);min-height:min(64vh,540px);border-radius:14px;padding:clamp(24px,3.4vw,54px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);margin-bottom:clamp(20px,4vh,40px);transform-origin:50% 0}
.step::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--dim,0);pointer-events:none}
.step.s1{background:var(--card);box-shadow:0 0 0 1.5px var(--line) inset}
.step.s2{background:var(--yellow)}
.step.s3{background:var(--blue);color:#fff}
.step.s4{background:var(--ink);color:var(--paper)}
.step-l{display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.step-n{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.step-n .sf{width:30px;height:22px}
.step-n .sf svg{width:100%;height:100%}
.step-t{font-size:clamp(54px,7.6vw,138px)}
.step-r{display:flex;flex-direction:column;gap:20px;justify-content:flex-end}
.step-price{font-size:clamp(28px,2.7vw,44px);font-variation-settings:"wdth" 82,"wght" 720;line-height:1.02;letter-spacing:-.01em}
.step-price small{display:block;font-size:14.5px;font-variation-settings:"wdth" 100,"wght" 500;opacity:.7;margin-top:8px;letter-spacing:0}
.step p{font-size:clamp(17px,1.28vw,19.5px);line-height:1.52;max-width:30em}
.step ul{list-style:none;border-top:1.5px solid currentColor}
.step li{padding:12px 0;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent);display:flex;gap:12px;align-items:center;font-size:15.5px}
.step li svg{width:16px;height:16px;flex:none}
.guar{padding:16px 18px;border:1.5px solid var(--ink);border-radius:9px;font-size:16px;line-height:1.4;display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.35)}
.guar b{font-weight:700}
.guar .sf{width:34px;height:26px;flex:none;margin-top:1px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,110px);align-items:center}
.about-pics{position:relative;padding-bottom:12%}
.ph-matt{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:repeating-linear-gradient(-45deg,#E4E3DB 0 14px,#EBEAE3 14px 28px);display:grid;place-items:center;text-align:center;color:var(--mute);font-size:14.5px;line-height:1.4;padding:30px}
.ph-matt b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}
.ph-ct{position:absolute;right:-8%;bottom:0;width:52%;aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);border:6px solid var(--paper)}
.ph-ct img{width:100%;height:118%;object-fit:cover;will-change:transform}
.ph-ct span{position:absolute;left:10px;bottom:8px;font-size:12px;color:#fff;font-weight:600;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.about-copy .sec-h{margin-bottom:clamp(26px,3vw,44px)}
.about-copy p{font-size:clamp(18px,1.42vw,22px);line-height:1.52;color:var(--ink2);margin-bottom:1.05em;max-width:29em}
.about-copy p b{color:var(--ink);font-weight:600}
.sig{font-family:"Herr Von Muellerhoff",cursive;font-size:clamp(78px,7vw,110px);line-height:.8;color:var(--ink);margin:6px 0 0 -6px;clip-path:inset(-20% 100% -20% 0);transition:clip-path 2.4s cubic-bezier(.55,.1,.35,1)}
.sig.in{clip-path:inset(-20% -10% -20% 0)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(28px,3vw,44px);padding-top:20px;border-top:1.5px solid var(--ink)}
.facts span{display:block;font-size:12.5px;color:var(--mute);margin-bottom:4px}
.facts b{font-weight:600;font-size:15px;line-height:1.35;display:block}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--gut);padding-top:clamp(30px,4vw,60px)}
.faq .sec-intro{margin-top:24px}
.qa{border-top:1.5px solid var(--ink)}
.qa:last-child{border-bottom:1.5px solid var(--ink)}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(20px,1.8vw,28px);font-variation-settings:"wdth" 84,"wght" 620;line-height:1.2;transition:padding .4s var(--ease)}
.qa button:hover{padding-left:10px}
.pm{position:relative;width:22px;height:22px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .45s var(--ease)}
.pm::after{transform:rotate(90deg)}
.qa.open .pm::after{transform:rotate(0)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a>div{overflow:hidden}
html:not(.has-js) .qa-a{grid-template-rows:1fr} /* no JS: the answers are simply open, and the +/- does nothing */
html:not(.has-js) .qa .pm{display:none}
.qa-a p{padding:0 0 28px;max-width:38em;font-size:18px;line-height:1.55;color:var(--ink2)}

/* ---------- cta ---------- */
.cta{background:var(--yellow);padding:clamp(100px,13vw,190px) var(--gut) clamp(60px,7vw,100px);position:relative;overflow:hidden}
.cta-h{font-size:clamp(52px,11vw,210px)}
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gut);align-items:end;margin-top:clamp(30px,4vw,56px);padding-top:28px;border-top:1.5px solid var(--ink)}
.cta-row p{font-size:clamp(18px,1.45vw,22px);line-height:1.5;max-width:30em}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.cta .btn-ink::before{background:var(--paper)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:clamp(70px,8vw,120px) var(--gut) 28px;overflow:hidden}
.f-flags{position:relative;display:flex;justify-content:space-between;gap:clamp(6px,1.4vw,20px);padding-top:30px}
.f-flags::before{content:"";position:absolute;top:0;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));height:2px;background:rgba(244,243,238,.55)}
.ff{flex:1;position:relative;max-width:190px}
.ff::before{content:"";position:absolute;left:0;top:-30px;width:1.5px;height:30px;background:rgba(244,243,238,.55)}
.ff svg{width:100%;aspect-ratio:4/3;outline:1px solid rgba(244,243,238,.14);transform-origin:0 50%;animation:flutter 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s)}
.ff span i{font-style:normal}
.ff span{display:block;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:rgba(244,243,238,.55)}
.ff em{display:block;font-style:normal;font-size:12.5px;line-height:1.35;color:rgba(244,243,238,.4);margin-top:4px;max-width:12em;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .45s var(--ease)}
.ff:hover em{opacity:1;transform:none}
.f-note{margin-top:clamp(40px,5vw,70px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:start}
.f-note p{font-size:clamp(18px,1.45vw,22px);line-height:1.45;max-width:24em;color:rgba(244,243,238,.82)}
.f-note p b{color:var(--yellow);font-weight:600}
.f-col span{display:block;font-size:12.5px;color:rgba(244,243,238,.58);margin-bottom:10px}
.f-col a{display:block;font-size:16px;padding:3px 0;width:max-content;position:relative}
.f-col a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.f-col a:hover::after{transform:scaleX(1);transform-origin:left}
.f-base{margin-top:clamp(50px,6vw,90px);padding-top:20px;border-top:1px solid rgba(244,243,238,.15);display:flex;justify-content:space-between;gap:20px;font-size:13px;color:rgba(244,243,238,.58);flex-wrap:wrap}

/* ---------- about sig ---------- */
.sig-wrap{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sig-cap{font-size:14px;color:var(--mute);padding-bottom:14px}

/* ---------- booking ---------- */
.bk{position:fixed;inset:0;z-index:250;visibility:hidden;pointer-events:none}
.bk.open{visibility:visible;pointer-events:auto}
.bk-scrim{position:absolute;inset:0;background:rgba(18,18,17,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .5s var(--ease)}
.bk.open .bk-scrim{opacity:1}
.bk-panel{position:absolute;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--paper);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .7s cubic-bezier(.76,0,.24,1);box-shadow:-30px 0 80px -30px rgba(0,0,0,.4)}
.bk.open .bk-panel{transform:none}
.bk-top{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,3vw,40px);border-bottom:1.5px solid var(--ink)}
.bk-prog{display:flex;gap:18px;font-size:13.5px;font-weight:600;color:var(--mute)}
.bk-prog span{display:flex;align-items:center;gap:8px;transition:color .3s}
.bk-prog span i{width:20px;height:15px;opacity:.3;transition:opacity .3s}
.bk-prog span i svg{width:100%;height:100%}
.bk-prog span.on{color:var(--ink)}.bk-prog span.on i{opacity:1}
.bk-x{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:background .3s,border-color .3s,transform .5s var(--ease)}
.bk-x:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:rotate(90deg)}
.bk-x svg{width:16px;height:16px}
.bk-body{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px) 40px}
.bk-title{font-size:clamp(44px,6vw,76px)}
.bk-lede{font-size:16.5px;color:var(--ink2);margin:16px 0 30px;max-width:30em}
.bk-lab{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.bk-lab small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--mute);font-size:13px}
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px 22px;scroll-snap-type:x mandatory;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:76px;padding:12px 0 13px;border-radius:9px;border:1.5px solid var(--line);background:var(--card);text-align:center;scroll-snap-align:start;transition:border-color .25s,background .25s,color .25s,transform .35s var(--ease)}
.day:hover{border-color:var(--ink);transform:translateY(-2px)}
.day small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.day b{display:block;font-size:30px;line-height:1.05;font-variation-settings:"wdth" 75,"wght" 800;margin:2px 0}
.day.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* visibility:hidden keeps a collapsed step's controls out of the tab order; it turns on at once and off after the fade */
.reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease),opacity .5s,visibility 0s .5s;opacity:0;visibility:hidden}
.reveal.show{grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s}
.reveal>div{overflow:hidden}
.slots{margin-bottom:26px;padding:2px}
.sg{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.sg:first-child{border-top:0;padding-top:0}
.sg-l{font-size:13px;font-weight:600;color:var(--mute);padding-top:13px}
.sg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.slot{text-align:center;height:46px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;transition:border-color .25s,background .25s,color .25s}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed;background:transparent}
.slot.on{background:var(--yellow);border-color:var(--ink)}
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:9px;background:var(--yellow-soft);border:1.5px solid rgba(214,160,20,.4);font-weight:600;margin-bottom:22px}
.pick button{font-size:14px;font-weight:600;border-bottom:1.5px solid currentColor}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.fld span em{font-style:normal;font-weight:500;color:var(--mute)}
.fld input,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;outline:none;transition:border-color .25s,box-shadow .25s}
.fld textarea{min-height:92px;resize:vertical}
.fld input:focus,.fld textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,194,46,.45)}
.fld.bad input{border-color:var(--red)}
.fld .err{display:none;color:var(--red);font-size:13px;margin-top:5px}
.fld.bad .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ways{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.way{padding:10px 14px;border-radius:8px;border:1.5px solid var(--line);font-size:14.5px;font-weight:600;background:var(--card);transition:all .25s}
.way.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink2);margin:6px 0 22px;cursor:pointer}
.consent input{width:20px;height:20px;accent-color:var(--ink);margin-top:1px;flex:none}
.consent a{border-bottom:1px solid currentColor}
.consent.bad{color:var(--red)}
.bk .btn[disabled]{opacity:.6;pointer-events:none}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:none}
.busy .spin{display:block}.busy .arr{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.done{text-align:left}
.done-flag{width:110px;height:82px;margin-bottom:26px;transform-origin:0 50%;animation:flutter 2.2s ease-in-out infinite}
.done-flag svg{width:100%;height:100%}
.done p{font-size:17px;color:var(--ink2);line-height:1.55;margin:18px 0 26px;max-width:28em}
.done p b{color:var(--ink)}
.done .acts{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:600px){.two{grid-template-columns:1fr}.sg{grid-template-columns:1fr;gap:6px}.sg-l{padding-top:0}.sg-row{grid-template-columns:repeat(3,minmax(0,1fr))}.bk-prog span b{display:none}}

/* ---------- whatsapp float ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;height:58px;padding:0 18px;border-radius:30px;background:var(--wa);color:#fff;box-shadow:0 14px 34px -10px rgba(37,211,102,.7);font-weight:600;font-size:15px;transition:transform .5s var(--ease)}
.wa-float svg{width:23px;height:23px;flex:none}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .55s var(--ease),margin .55s var(--ease)}
.wa-float:hover span{max-width:160px;margin-left:10px}
.wa-float.hidden{transform:translateY(120px)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .demo-foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-ctl{grid-column:1/-1}
}
@media (max-width:860px){
  body{font-size:16px}
  .live{display:none}
  .hero-low{grid-template-columns:1fr;gap:10px}
  .hero-flag{min-height:0;margin-top:18px;display:flex;flex-direction:column}
  .hero-flag canvas{position:relative;inset:auto;height:min(64vw,380px)}
  .hero-meta{display:none}
  .flag-cap{position:static;text-align:left;max-width:none;margin-top:4px;padding-left:calc(var(--hx,12%) + 14px)}
  .halyard{bottom:auto;height:min(64vw,380px)}
  .ticker-head,.ticker-foot{flex-direction:column;align-items:flex-start}
  .sec-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .stage{flex-direction:column;gap:20px}
  .bridge{width:auto;flex-direction:row}
  .br-line{width:90px}
  .yourcall{right:auto;left:50%;bottom:auto;top:-46px;transform:translate(-50%,10px)}
  .yourcall.on{transform:translate(-50%,0)}
  .yourcall::after{right:auto;left:50%;top:auto;bottom:-6px;margin:0 0 0 -6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--ink)}
  .sort-grid{grid-template-columns:1fr}
  .col{min-height:0}.drop{min-height:120px}
  .tally{grid-template-columns:1fr 1fr}
  .tally p{grid-column:1/-1;justify-self:start}
  .code-intro{width:88vw}
  .panel{width:88vw;grid-template-columns:1fr;gap:14px;align-content:center;padding-top:96px}
  .p-flag canvas{aspect-ratio:4/2.6}
  .p-h{margin:12px 0 12px}
  .step{grid-template-columns:1fr;min-height:0}
  .about{grid-template-columns:1fr}
  .ph-ct{right:0} /* stacked layout: keep the inset photo inside the page gutter (was overflowing at tablet width) */
  .faq{grid-template-columns:1fr}
  .cta-row{grid-template-columns:1fr}
  .f-note{grid-template-columns:1fr 1fr}
  .f-note p{grid-column:1/-1}
  .ff em{display:none}
}
@media (max-width:860px),(max-height:699px){.step{position:relative;top:auto}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px),(max-height:760px){.lk-time{font-size:52px}.notifs{top:160px}}
@media (max-width:860px){
  .panel{padding:76px 20px 24px;gap:10px}
  .p-flag canvas{aspect-ratio:4/2.2;max-height:26svh}
  .p-id b{font-size:44px}.p-q{display:none}
  .p-h{font-size:clamp(28px,8.5vw,40px)}
  .code-intro{padding-top:84px}.code-photo{display:none}
}
@media (max-width:600px){.ff span i{display:none}}
.cur{opacity:0}.cur.on{opacity:1}.cur.on.hide{opacity:0}
@media (prefers-reduced-motion:reduce){
  /* 0s, not .001s: transition-property defaults to all, so any non-zero duration turns every style change into a
     transition, and fit()/fitDown() then measure the old font-size (the CTA headlines came out twice too big). */
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
}
[hidden]{display:none!important}