/* Floating WhatsApp button + offer countdown */
.wa-fab{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:10px;height:56px;padding:0 18px 0 14px;border-radius:99px;background:#25d366;color:#fff;font-weight:700;font-size:14px;box-shadow:0 14px 30px -10px rgba(37,211,102,.7),0 4px 10px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.22,1,.36,1),padding .35s}
.wa-fab:hover{transform:translateY(-3px) scale(1.04)}
.wa-fab svg{width:28px;height:28px;flex:none}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25d366;animation:waPulse 2.4s infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@media(max-width:640px){.wa-fab{padding:0;width:56px;justify-content:center;right:14px;bottom:14px}.wa-fab span{display:none}}
.cd{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cd-l{font-size:13px;font-weight:600;color:var(--muted);margin-right:4px}
.cd-b{min-width:64px;text-align:center;padding:10px 8px 8px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
html[data-theme=light] .cd-b{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.1)}
.cd-b b{display:block;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cd-b i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.cd-b.tick b{animation:cdTick .35s}
@keyframes cdTick{from{transform:translateY(-6px);opacity:.3}}
@media(prefers-reduced-motion:reduce){.wa-fab::before,.cd-b.tick b{animation:none}}

/* counters + testimonials */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:56px}
.cn{padding:26px 18px;text-align:center;border-radius:20px;background:var(--surface);border:1px solid var(--line,rgba(128,128,128,.2))}
.cn b{display:block;font-size:clamp(30px,4.4vw,46px);line-height:1;letter-spacing:-.03em;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.cn span{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
.tm-nav{display:flex;gap:8px}.tm-nav button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line,rgba(128,128,128,.3));background:var(--surface);color:var(--text);cursor:pointer;font-size:17px;transition:.3s}
.tm-nav button:hover{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;border-color:transparent}
.tm-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 18px}
.tm-track::-webkit-scrollbar{display:none}
.tm{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;padding:26px;border-radius:22px;background:var(--surface);border:1px solid var(--line,rgba(128,128,128,.2));display:flex;flex-direction:column;gap:16px;position:relative;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.tm:hover{transform:translateY(-6px);box-shadow:0 24px 44px -24px rgba(0,0,0,.5)}
.tm::before{content:"\201C";position:absolute;right:22px;top:6px;font-size:72px;line-height:1;font-family:Georgia,serif;color:var(--a1);opacity:.22}
.tm .st{color:#ffb020;letter-spacing:2px;font-size:15px}.tm .st i{font-style:normal;opacity:.28}
.tm p{line-height:1.75;color:var(--text);font-size:15px}
.tm .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tm .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--a1),var(--a2));flex:none}
.tm .who b{display:block;font-size:14.5px}.tm .who small{color:var(--muted);font-size:12.5px}
@media(max-width:900px){.tm{flex-basis:calc((100% - 18px)/2)}.counters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tm{flex-basis:88%}}

/* pricing + faq */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 26px;border-radius:24px;background:var(--surface);border:1px solid var(--line,rgba(128,128,128,.22));transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.plan:hover{transform:translateY(-8px);box-shadow:0 30px 50px -28px rgba(0,0,0,.6)}
.plan.pop{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--a1),var(--a2),#ff5a8a) border-box;border:2px solid transparent;box-shadow:0 30px 60px -30px var(--a1)}
.plan .badge{position:absolute;top:-13px;left:50%;translate:-50% 0;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:99px;white-space:nowrap}
.plan h3{font-size:20px}.plan .d{color:var(--muted);font-size:13.5px;min-height:38px}
.plan .pr{display:flex;align-items:baseline;gap:10px}.plan .pr b{font-size:44px;line-height:1;letter-spacing:-.03em}.plan .pr s{color:var(--muted);font-size:16px}
.plan ul{list-style:none;display:grid;gap:11px;margin:6px 0 10px;padding:0}
.plan li{display:flex;gap:10px;font-size:14px;line-height:1.5}.plan li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:rgba(37,211,102,.16);color:#25d366}
.plan .btn{margin-top:auto;justify-content:center;text-align:center}
.faq{max-width:820px;display:grid;gap:12px}
.fq{border-radius:18px;background:var(--surface);border:1px solid var(--line,rgba(128,128,128,.22));overflow:hidden;transition:border-color .3s}
.fq[open]{border-color:var(--a1)}
.fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:600;font-size:15.5px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:rgba(128,128,128,.14);transition:transform .35s,background .3s}
.fq[open] summary::after{transform:rotate(45deg);background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
.fq .ans{padding:0 24px 22px;color:var(--muted);line-height:1.8;font-size:14.5px;animation:fqIn .4s}
@keyframes fqIn{from{opacity:0;transform:translateY(-6px)}}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:480px;margin-inline:auto}.plan.pop{order:-1}}
@media(prefers-reduced-motion:reduce){.fq .ans{animation:none}}

/* showcase filters */
.chip small{opacity:.6;font-size:11px;margin-left:3px}
.ftools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:-8px 0 14px}
.ftools .search{flex:1 1 260px;max-width:none;margin:0}
.fsel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.fsel select{background:var(--surface);color:var(--text);border:1px solid var(--line,rgba(128,128,128,.3));border-radius:99px;padding:9px 14px;font:inherit;font-size:13px;outline:none;cursor:pointer;max-width:180px}
.fsel select:focus{border-color:var(--a1)}
.frange{gap:10px}.frange b{color:var(--text);font-size:13px;min-width:54px}
.frange input{width:130px;accent-color:var(--a1);cursor:pointer}
.fclear{background:none;border:1px solid var(--warm,#ff6a3d);color:var(--warm,#ff6a3d);border-radius:99px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.3s}
.fclear:hover{background:var(--warm,#ff6a3d);color:#fff}
.fcount{font-size:12.5px;color:var(--muted);margin-bottom:18px}
@media(max-width:700px){.ftools{gap:10px}.fsel{flex:1 1 45%}.fsel select{width:100%;max-width:none}.frange{flex:1 1 100%}.frange input{flex:1;width:auto}}

/* hero background video */
.bg-vidw{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-vid{width:100%;height:100%;object-fit:cover;display:block;animation:vidIn 1.2s both}
@keyframes vidIn{from{opacity:0}}
.bg-vid-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,16,.78) 0%,rgba(7,8,16,.5) 45%,rgba(7,8,16,.25) 100%)}
html[data-theme=light] .bg-vid-ov{background:linear-gradient(90deg,rgba(244,245,252,.9) 0%,rgba(244,245,252,.62) 45%,rgba(244,245,252,.3) 100%)}
.bg-vidw.bird .bg-vid-ov{background:linear-gradient(180deg,rgba(36,31,88,.35),rgba(36,31,88,.7))}
html[data-theme=light] .bg-vidw.bird .bg-vid-ov{background:linear-gradient(180deg,rgba(220,214,250,.4),rgba(220,214,250,.75))}
#live{position:relative}

/* mobile sticky buy bar */
.sbar{display:none}
@media(max-width:700px){
  .sbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:95;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:99px;background:rgba(14,15,28,.86);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);color:#fff;transform:translateY(140%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
  html[data-theme=light] .sbar{background:rgba(255,255,255,.9);color:#111;border-color:rgba(0,0,0,.1)}
  .sbar.on{transform:none}
  .sb-t{display:grid;line-height:1.1;margin-right:auto}.sb-t small{font-size:10.5px;opacity:.65}.sb-t b{font-size:19px;letter-spacing:-.02em}
  .sb-wa{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff}.sb-wa svg{width:24px;height:24px}
  .sb-go{flex:none;padding:12px 22px;margin:0}
  body.has-sbar{padding-bottom:84px}
  .sbar.on ~ .wa-fab,body.has-sbar .wa-fab{display:none}
}
