:root{--y:#ffc20e;--y2:#ffb000;--o:#ff9a00;--ink:#111;--ink2:#3b3b3b;--mut:#6b6b6b;--bg:#fff;--alt:#fbf7ec;--line:#ece6d4;--r:20px;--sh:0 10px 30px rgba(17,17,17,.08);--f:'Inter','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px}
img,svg{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{line-height:1.12;margin:0;letter-spacing:-.02em;font-weight:800}
p{margin:0}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}.narrow{width:min(820px,100% - 40px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:200}.skip:focus{left:8px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.center{text-align:center}.gap{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--y);color:var(--ink);font-weight:700;border:2px solid var(--y);padding:13px 24px;border-radius:999px;text-decoration:none;cursor:pointer;font:inherit;font-weight:700;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,176,0,.45);background:var(--y2);border-color:var(--y2)}
.btn:focus-visible,.chip:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn-sm{padding:9px 18px;font-size:15px}.btn-lg{padding:16px 32px;font-size:18px}
.btn-ghost{background:transparent;border-color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.btn-dark{background:var(--ink);color:var(--y);border-color:var(--ink)}.btn-dark:hover{background:#000;color:#fff;border-color:#000}
.btn-wa{background:#25d366;border-color:#25d366;color:#05260f}.btn-wa:hover{background:#1ebe5a;border-color:#1ebe5a}
.btn-tg{background:#2aabee;border-color:#2aabee;color:#fff}.btn-tg:hover{background:#1c96d4;border-color:#1c96d4}

/* topbar (other directions) */
.topbar{background:#0e1218;color:#c9d1dc;font-size:14px}
.topbar-in{display:flex;align-items:center;gap:14px;padding:8px 0;flex-wrap:wrap}
.topbar-label{opacity:.85}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0e1218;font-weight:700;font-size:13px;padding:5px 13px;border-radius:999px;text-decoration:none;letter-spacing:.01em;text-transform:uppercase;transition:transform .15s,background .15s}
.pill:hover{transform:translateY(-1px);background:var(--y)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{border-radius:12px}
.brand-t{display:flex;flex-direction:column;line-height:1.1}.brand-t b{font-size:20px;letter-spacing:-.02em}.brand-t small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px;color:var(--ink2)}
.nav a:hover{background:var(--alt);color:var(--ink)}
.hdr-r{display:flex;align-items:center;gap:10px}
.lang{position:relative}.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);min-width:170px}
.lang li a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:15px}.lang li a span{font-weight:800;width:24px;color:var(--o)}
.lang li a:hover,.lang li a[aria-current]{background:var(--alt)}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 30px}
.hero-bg{position:absolute;inset:0 0 0 38%;background:url(../img/mosaic.svg) center/cover;opacity:.9;-webkit-mask-image:linear-gradient(100deg,transparent 0,#000 38%,#000 70%,transparent 100%),linear-gradient(180deg,#000 55%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(100deg,transparent 0,#000 38%,#000 70%,transparent 100%),linear-gradient(180deg,#000 55%,transparent);mask-composite:intersect}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14px;font-weight:700;color:var(--ink2)}
.eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--o);box-shadow:0 0 0 4px rgba(255,154,0,.2)}
.hero h1{font-size:clamp(40px,6.2vw,76px);margin:22px 0 20px;font-weight:900;letter-spacing:-.035em}
.hero h1 .acc{display:block}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:560px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-vis{position:relative}
.hero-card{background:#fff;border:3px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:14px 14px 0 var(--ink);transform:rotate(1.5deg)}
.hero-chip{position:absolute;left:-14px;bottom:26px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:9px;box-shadow:var(--sh)}
.hero-chip i{width:9px;height:9px;border-radius:50%;background:#3ddc84}
.hero-price{position:absolute;right:-8px;top:-22px;background:var(--y);border:3px solid var(--ink);border-radius:18px;padding:10px 18px;transform:rotate(-4deg);text-align:center;box-shadow:6px 6px 0 var(--ink)}
.hero-price small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800}.hero-price b{font-size:24px;font-weight:900}
.stats{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;position:relative}
.stats li{padding:22px 24px;border-right:1.5px solid var(--line);display:flex;flex-direction:column;gap:2px}.stats li:last-child{border:0}
.stats b{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.02em}.stats b em{font-style:normal;color:var(--o)}.stats span{color:var(--mut);font-size:14px}

/* sections */
.sec{padding:96px 0}.sec-alt{background:var(--alt)}
.sec-h{max-width:720px;margin:0 auto 52px;text-align:center}
.sec-h h2{font-size:clamp(30px,4vw,48px)}.sec-h p{margin-top:14px;color:var(--mut);font-size:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:30px;transition:transform .2s,box-shadow .2s,border-color .2s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--y)}
.ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--y);margin-bottom:18px}
.feat h3{font-size:21px;margin-bottom:8px}.feat p{color:var(--mut);font-size:16px}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.chip{font:inherit;font-weight:700;font-size:15px;padding:9px 18px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;cursor:pointer;transition:.15s}
.chip:hover{background:var(--y)}.chip.on{background:var(--ink);color:var(--y)}
.gfilters{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px}
.card{background:#fff;border:1.5px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,17,17,.12)}
.card[hidden]{display:none}
.card-img{position:relative;aspect-ratio:16/11;background:var(--alt);overflow:hidden}.card-img img,.card-img svg{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:14px;top:14px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.b-stock{background:#17c964;color:#04210f}.b-order{background:var(--ink);color:#fff}
.area{position:absolute;right:14px;bottom:14px;background:var(--y);border:2.5px solid var(--ink);border-radius:14px;padding:3px 12px;font-weight:900;font-size:22px;line-height:1.3}.area small{font-size:13px}
.card-b{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-b h3{font-size:22px}.card-b p{color:var(--mut);font-size:15.5px}
.tags{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}.tags li{font-size:12.5px;font-weight:600;background:var(--alt);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2);font-weight:600}.meta span::before{content:"•";color:var(--o);margin-right:6px}
.card-f{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1.5px dashed var(--line)}
.price small{display:block;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}.price b{font-size:28px;font-weight:900;letter-spacing:-.02em}.price b.req{font-size:18px}.price em{font-style:normal;font-weight:700;color:var(--mut);font-size:14px}
.note{max-width:820px;margin:34px auto 0;text-align:center;color:var(--ink2)}.note-2{margin-top:10px;color:var(--mut);font-size:15px}

/* options band */
.opts{background:var(--ink);color:#fff;padding:56px 0;position:relative;overflow:hidden}
.opts::before{content:"";position:absolute;inset:0;background:url(../img/mosaic.svg) right/cover;opacity:.12}
.opts-in{position:relative;display:grid;grid-template-columns:1.2fr 1fr auto;gap:30px;align-items:center}
.opts h2{font-size:clamp(26px,3vw,38px);color:var(--y)}.opts p{margin-top:10px;color:#cfcfcf}
.opts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;font-weight:700;font-size:15px}
.opts li::before{content:"✓ ";color:var(--y)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.steps li{position:relative;padding:28px 24px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r)}
.steps .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--y);font-weight:900;font-size:20px;margin-bottom:16px}
.steps h3{font-size:19px;margin-bottom:8px}.steps p{color:var(--mut);font-size:15.5px}
.steps li:not(:last-child)::after{content:"";position:absolute;top:50px;right:-22px;width:22px;border-top:2.5px dashed var(--y2)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gi{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#eee;cursor:zoom-in}
.gi img,.gi svg{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gi:hover img{transform:scale(1.06)}
.gi span{position:absolute;left:10px;bottom:10px;background:rgba(17,17,17,.78);color:#fff;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.gi[hidden]{display:none}.gi-ph{cursor:default;border:1.5px solid var(--line)}
.lb{position:fixed;inset:0;background:rgba(10,10,10,.92);z-index:300;display:grid;place-items:center;padding:20px}.lb[hidden]{display:none}
.lb img{max-height:84vh;max-width:94vw;border-radius:12px}.lb p{color:#fff;text-align:center;margin-top:12px;font-weight:600}
.lb button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer}.lb button:hover{background:var(--y);color:#000}
.lb .x{top:18px;right:18px}.lb .pv{left:18px;top:50%}.lb .nx{right:18px;top:50%}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.rev{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px}
.rev-h{display:flex;align-items:center;gap:12px}.rev-h b{display:block}.rev-h small{color:var(--mut)}
.rev-h .stars{margin-left:auto}
.av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--y);font-weight:900;flex:none}
.stars{color:var(--o);letter-spacing:2px;white-space:nowrap}.stars i{font-style:normal;color:#ddd}
.rev p{color:var(--ink2);font-size:16px}
.dlg{border:0;border-radius:24px;padding:32px;width:min(560px,94vw);box-shadow:0 30px 80px rgba(0,0,0,.35)}.dlg::backdrop{background:rgba(10,10,10,.6);backdrop-filter:blur(3px)}
.dlg h3{font-size:26px;margin-bottom:18px}.dlg-x{position:absolute;right:14px;top:12px;border:0;background:var(--alt);width:38px;height:38px;border-radius:50%;font-size:24px;cursor:pointer}

/* faq */
.faq{background:#fff;border:1.5px solid var(--line);border-radius:16px;margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--y);display:grid;place-items:center;font-size:22px;line-height:1;transition:transform .2s}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 24px 22px;color:var(--ink2)}

/* contact */
.contact{background:linear-gradient(180deg,#fff,var(--alt))}
.contact-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact h2{font-size:clamp(30px,4vw,46px)}.contact-l>p{margin-top:12px;color:var(--mut);font-size:18px}
.clist{list-style:none;margin:30px 0;padding:0;display:grid;gap:16px}
.clist li{padding:16px 20px;background:#fff;border:1.5px solid var(--line);border-radius:16px}.clist span{display:block;font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.clist a{font-size:24px;font-weight:800;text-decoration:none;letter-spacing:-.01em}.clist a:hover{color:var(--o)}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.card-form,.form-wrap{background:#fff;border:2px solid var(--ink);border-radius:26px;padding:34px;box-shadow:10px 10px 0 var(--y)}
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:700;font-size:14.5px}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{font:inherit;font-weight:500;padding:13px 15px;border:1.5px solid #d9d2bd;border-radius:12px;background:#fff;color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chk{display:flex!important;grid-template-columns:none;gap:10px!important;align-items:flex-start;font-weight:500!important;font-size:14px!important;color:var(--ink2)}.chk input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink);flex:none}.chk a{text-decoration:underline}
.form-msg{min-height:0;font-weight:700;border-radius:12px}.form-msg.ok{background:#e6f9ee;color:#0b6b35;padding:12px 16px}.form-msg.err{background:#fdecec;color:#a61b1b;padding:12px 16px}
.form button[disabled]{opacity:.6;cursor:wait}
.stars-in{border:0;padding:0;margin:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.stars-in legend{float:left;width:100%;font-weight:700;font-size:14.5px;margin-bottom:4px}
.stars-in input{position:absolute;opacity:0;pointer-events:none}
.stars-in label{font-size:34px;line-height:1;color:#ddd;cursor:pointer;transition:color .1s}
.stars-in input:checked~label,.stars-in label:hover,.stars-in label:hover~label{color:var(--o)}
.stars-in input:focus-visible+label{outline:3px solid var(--ink);border-radius:6px}

/* footer */
.ftr{background:var(--ink);color:#d9d9d9;padding:56px 0 0}
.ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.brand-inv .brand-t b{color:#fff}.brand-inv small{color:#999}
.ftr p{margin-top:14px;max-width:340px;color:#a8a8a8;font-size:15px}
.ftr-col{display:flex;flex-direction:column;gap:8px}.ftr-col a{text-decoration:none;font-weight:600}.ftr-col a:hover{color:var(--y)}.ftr-col small{color:#8a8a8a;font-weight:500}
.ftr-bot{margin-top:40px;padding:22px 0;border-top:1px solid #2b2b2b;font-size:14px;color:#8a8a8a}
.totop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--y);border:2.5px solid var(--ink);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.2s;z-index:60}.totop.on{opacity:1;pointer-events:auto}

/* cookies */
.ck{position:fixed;left:20px;bottom:20px;max-width:440px;background:#fff;border:2px solid var(--ink);border-radius:20px;padding:22px;box-shadow:8px 8px 0 var(--y);z-index:250}.ck[hidden]{display:none}
.ck-t{font-weight:800;font-size:18px;margin-bottom:6px}.ck p{font-size:14.5px;color:var(--ink2)}.ck a{text-decoration:underline}.ck-b{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

.prose h1{font-size:clamp(30px,4vw,44px);margin-bottom:24px}.prose h2{font-size:22px;margin:28px 0 8px}.prose p{color:var(--ink2);margin-bottom:12px}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:1020px){
  .nav{position:fixed;inset:0 0 auto 0;top:var(--hh,70px);background:#fff;flex-direction:column;padding:14px 20px 24px;border-bottom:1px solid var(--line);box-shadow:var(--sh);display:none;margin:0;max-height:calc(100vh - var(--hh,70px));overflow:auto;z-index:40}
  .nav.open{display:flex}.nav a{font-size:18px;padding:13px 14px}
  .burger{display:flex}.hdr-r{margin-left:auto}.hide-m{display:none}
  .hero-in,.contact-in{grid-template-columns:1fr}.hero-bg{inset:0;opacity:.45}
  .hero-vis{max-width:520px;margin:10px auto 0}.hero-chip{left:6px}.hero-price{right:6px}
  .grid3{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.steps li::after{display:none}
  .opts-in{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.stats li:nth-child(2){border-right:0}.stats li:nth-child(-n+2){border-bottom:1.5px solid var(--line)}
  .ftr-in{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}.sec{padding:64px 0}.grid3,.steps,.row2{grid-template-columns:1fr}
  .hero{padding-top:34px}.cards{grid-template-columns:1fr}.card-form,.form-wrap{padding:22px;box-shadow:6px 6px 0 var(--y)}
  .topbar-in{gap:8px}.ck{left:10px;right:10px;bottom:10px;max-width:none}.hero-card{box-shadow:8px 8px 0 var(--ink)}
  .brand-t small{display:none}.ftr-in{grid-template-columns:1fr}.opts ul{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* credit */
.ftr-bot{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;align-items:center}
.credit{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.credit a{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#12202c;text-decoration:none;font-weight:700;border-radius:999px;padding:3px 12px 3px 9px;line-height:1.2;transition:transform .15s,background .15s}
.credit a:hover{background:var(--y);transform:translateY(-1px)}
.credit img{height:1.3em;width:auto;display:block}

/* demo badge */
.demo{position:fixed;right:0;bottom:24px;z-index:260;display:flex;align-items:stretch;transition:transform .7s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
.demo.hide{transform:translateX(calc(100% - 34px))}
.demo-tab{width:34px;border:0;background:var(--y);color:var(--ink);border-radius:16px 0 0 16px;cursor:pointer;display:grid;place-items:center;padding:0;border:2.5px solid var(--ink);border-right:0}
.demo-tab svg{transition:transform .5s;transform:rotate(180deg)}.demo.hide .demo-tab svg{transform:none;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
.demo-b{background:var(--ink);color:#fff;padding:12px 16px 14px;border:2.5px solid var(--ink)}
.demo-t{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}.demo-t b{color:var(--y);text-transform:uppercase;letter-spacing:.08em;font-weight:900}.demo-t span{color:#bdbdbd}
.demo-t i{width:9px;height:9px;border-radius:50%;background:#ff5a5f;animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.25}}
.demo-c{display:flex;gap:7px;margin-top:9px}
.demo-c div{background:var(--y);color:var(--ink);border-radius:10px;min-width:52px;padding:6px 6px 5px;text-align:center;line-height:1}
.demo-c b{display:block;font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.demo-c small{font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.has-demo .totop{bottom:122px}
.dpop{position:fixed;inset:0;z-index:400;background:rgba(10,10,10,.62);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}.dpop[hidden]{display:none}
.dpop-b{background:#fff;border:3px solid var(--ink);border-radius:26px;padding:34px 30px 30px;max-width:460px;text-align:center;box-shadow:10px 10px 0 var(--y);animation:pop .45s cubic-bezier(.22,1,.36,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}}
.dpop-i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--y);border:3px solid var(--ink);font-weight:900;font-size:30px;margin:0 auto 16px}
.dpop-b h3{font-size:26px;margin-bottom:10px}.dpop-b p{color:var(--ink2);margin-bottom:22px}
@media (max-width:640px){.demo-b{padding:9px 11px 11px}.demo-c div{min-width:44px}.demo-c b{font-size:20px}.demo-t{font-size:12px}.demo{bottom:14px}.ck-on .demo{bottom:236px}.has-demo .totop{bottom:104px}}

/* ===== motion & plans ===== */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--o),var(--y));z-index:300}
.hdr{transition:box-shadow .3s,background .3s}.hdr.sc{box-shadow:0 8px 24px rgba(17,17,17,.08);background:rgba(255,255,255,.96)}
/* hero entrance */
.hero h1 .wd{display:inline-block;opacity:0;transform:translateY(.5em);animation:rise .8s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i)*.09s + .15s)}
.hero h1 .acc{display:block;background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit}
.hero h1 .acc .wd{background:linear-gradient(95deg,#ff9a00,#ffc20e,#ff9a00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;animation:rise .8s cubic-bezier(.22,1,.36,1) forwards,shine 5s linear 1.2s infinite;animation-delay:calc(var(--i)*.09s + .15s),0s}
@keyframes rise{to{opacity:1;transform:none}}@keyframes shine{to{background-position:-200% 0}}
.hero .eyebrow,.hero .lead,.hero .cta{opacity:0;animation:rise .8s cubic-bezier(.22,1,.36,1) forwards}.hero .eyebrow{animation-delay:.05s}.hero .lead{animation-delay:.55s}.hero .cta{animation-delay:.7s}
.hero-txt.reveal,.hero-vis.reveal{opacity:1;transform:none}
.hero-card{animation:float 7s ease-in-out infinite}.hero-chip{animation:float2 6s ease-in-out infinite}.hero-price{animation:float3 5.5s ease-in-out infinite}
@keyframes float{50%{transform:rotate(1.5deg) translateY(-12px)}}@keyframes float2{50%{transform:translateY(8px)}}@keyframes float3{50%{transform:rotate(-4deg) translateY(-8px)}}
.hero-bg{animation:drift 26s ease-in-out infinite alternate}@keyframes drift{to{transform:scale(1.08) translate(-2%,2%)}}
/* stagger reveal */
.reveal{transition-delay:var(--d,0s)}
/* button shine */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:130%}
.btn-ghost::after,.btn-dark::after{display:none}
/* section heading underline */
.sec-h h2{position:relative;display:inline-block}
.sec-h h2::after{content:"";position:absolute;left:10%;right:10%;bottom:-10px;height:5px;border-radius:4px;background:linear-gradient(90deg,var(--y),var(--o));transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1) .3s}
.sec-h.in h2::after{transform:scaleX(1)}
.sec-h p{margin-top:24px}
/* icons + cards */
.feat:hover .ico{transform:rotate(-8deg) scale(1.08)}.ico{transition:transform .3s}
.card-img img,.card-img svg{transition:transform .6s cubic-bezier(.22,1,.36,1)}.card:hover .card-img img,.card:hover .card-img svg{transform:scale(1.07)}
.steps li{transition:transform .25s,box-shadow .25s}.steps li:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.steps .n{transition:transform .3s}.steps li:hover .n{transform:scale(1.15) rotate(-6deg)}
.steps li.in .n{animation:pulse 2.4s ease-out 1}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,194,14,.8)}100%{box-shadow:0 0 0 18px rgba(255,194,14,0)}}
.steps li:not(:last-child)::after{transform-origin:left;transform:scaleX(0);transition:transform .8s ease .5s}.steps li.in:not(:last-child)::after{transform:scaleX(1)}
/* marquee */
.marq{background:var(--ink);color:var(--y);overflow:hidden;border-block:3px solid var(--y);padding:14px 0;transform:rotate(-1deg);margin:-14px -10px 0;position:relative;z-index:2}
.marq-t{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:marq 38s linear infinite;font-weight:900;font-size:clamp(20px,2.6vw,30px);letter-spacing:-.01em}
.marq-t i{font-style:normal;color:#fff;opacity:.55}
@keyframes marq{to{transform:translateX(-25%)}}
.marq:hover .marq-t{animation-play-state:paused}
/* layouts section with plan background at 30% */
.lay{position:relative;overflow:hidden;background:#fffdf7}
.lay::before,.bpbg{content:"";position:absolute;inset:0;background:url(../img/plans-bg.svg) center/1200px auto repeat;opacity:.3;pointer-events:none;animation:bpmove 80s linear infinite}
@keyframes bpmove{to{background-position:1200px 400px}}
.lay>.wrap{position:relative}
.contact{position:relative;overflow:hidden}.contact>.wrap{position:relative}
.lay-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px}
.lay-c{background:rgba(255,255,255,.94);border:1.5px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.lay-c:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,17,17,.12);border-color:var(--y)}
.lay-svg{padding:14px 14px 4px}.lay-svg svg{width:100%;height:auto;display:block}
.lay-b{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px 20px;border-top:1.5px dashed var(--line);margin-top:auto}
.lay-b b{display:block;font-size:22px;font-weight:900;letter-spacing:-.02em}.lay-b span{color:var(--mut);font-size:14px}
.pl-t{font:700 12.5px var(--f);fill:#111}.pl-s{font-size:10.5px}.pl-d{font:600 10.5px var(--f);fill:#8a846f}.pl-m{font:800 13px var(--f);fill:#6b6554}.pl-e{font:800 11px var(--f);fill:#a85d00}
.plan .wl{stroke-dasharray:1;stroke-dashoffset:1}
.lay-c.in .plan .wl{animation:draw 2.2s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
.no-js .plan .wl{stroke-dashoffset:0}
@media (max-width:640px){.lay-g{grid-template-columns:1fr}.marq{margin-top:-8px}}
@media (prefers-reduced-motion:reduce){.plan .wl{stroke-dashoffset:0}.hero h1 .wd,.hero .eyebrow,.hero .lead,.hero .cta{opacity:1;transform:none}.marq-t{animation:none}}
.nav a,.brand-t small{white-space:nowrap}
@media (max-width:1240px) and (min-width:1021px){.nav{gap:0}.nav a{padding:8px 9px;font-size:14.5px}.brand-t small{display:none}.hdr-in{gap:12px}}