/* =========================================================
   Tapstry styles
   1. Theme palettes   2. Base   3. Layout & header
   4. Buttons          5. Hero   6. Card images & phone mockup
   7. Themes showcase  8. How it works   9. Features
   10. Package   11. FAQ   12. CTA & footer   13. Motion
   ========================================================= */

/* ===== 1. Theme palettes (switch with data-theme) ===== */
[data-theme=ocean]{--bg:#f5f6f8;--card:#fff;--ink:#12151c;--accent:#0b5cab}
@media(prefers-color-scheme:dark){[data-theme=ocean]{--bg:#0e1116;--card:#171b23;--ink:#f2f4f8;--accent:#4d9bf0}}
[data-theme=midnight]{--bg:#0b0f1a;--card:#131a2b;--ink:#eef2ff;--accent:#7aa2ff;--chip:#1a2338}
[data-theme=forest]{--bg:#eef3ee;--card:#fff;--ink:#14211a;--accent:#1f6b4a}
[data-theme=rose]{--bg:#faf1f2;--card:#fff;--ink:#2a1519;--accent:#b8324f}
[data-theme=violet]{--bg:#f3f0fa;--card:#fff;--ink:#1b1530;--accent:#5b3fd1}
[data-theme=sand]{--bg:#f4efe7;--card:#fffdf9;--ink:#2b2419;--accent:#8f6128}
[data-theme="graphite"]{--bg:#e9eaec;--card:#fff;--ink:#101114;--muted:#5c6068;--line:#d9dbe0;--accent:#101114;--accent-ink:#fff;--chip:#f1f2f4}

/* ===== 2. Base ===== */
:root{--pg:#fff;--sf:#f5f6f8;--tx:#12151c;--mu:#566070;--ln:rgba(18,21,28,.1);--ac:#0b5cab;--onac:#fff;--e:cubic-bezier(.2,.7,.2,1)}
@media(prefers-color-scheme:dark){:root{--pg:#0e1116;--sf:#171b23;--tx:#f2f4f8;--mu:#9aa3b2;--ln:rgba(255,255,255,.1);--ac:#4d9bf0;--onac:#0e1116}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font:16px/1.55 ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;background:var(--pg);color:var(--tx);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:-.035em;line-height:1.08}
h1{font-size:clamp(2.6rem,9vw,5rem);font-weight:800}
h2{font-size:clamp(1.9rem,5.5vw,3rem);font-weight:750}
p{color:var(--mu)}
a{color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:8px}

/* ===== 3. Layout & header ===== */
.w{width:min(1120px,100% - 32px);margin:auto}
.sec{padding:80px 0;position:relative}
.sec>.w>p.lead{max-width:52ch;margin-top:12px}
.hd{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .3s,box-shadow .3s}
.hd.sc{background:color-mix(in srgb,var(--pg) 72%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--ln)}
.hd .w{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;letter-spacing:-.04em;font-size:1.3rem;text-decoration:none}
nav{display:flex;gap:6px;align-items:center}
nav a{text-decoration:none;font-size:.92rem;padding:8px 12px;border-radius:99px;color:var(--mu)}
nav a:hover{color:var(--tx)}
@media(max-width:620px){nav a:not(.btn){display:none}}

/* ===== 4. Buttons (gentle float on hover) ===== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:99px;font-weight:650;font-size:1rem;text-decoration:none;border:1px solid var(--ln);background:transparent;color:var(--tx);cursor:pointer;transition:transform .35s var(--e),box-shadow .35s var(--e),background-color .5s,color .5s}
.btn.p{background:var(--ac);color:var(--onac);border-color:transparent}
nav .btn{padding:8px 16px;color:var(--onac)}
@media(hover:hover){
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 22px -12px color-mix(in srgb,var(--tx) 45%,transparent)}
.btn.p:hover{box-shadow:0 12px 24px -10px var(--ac)}
}
.btn:active{transform:translateY(-1px)}

/* ===== 5. Hero ===== */
.hero{padding:110px 0 70px;position:relative;overflow:hidden}
.mesh{position:absolute;inset:-20% -10% auto;height:90%;z-index:-1;pointer-events:none}
.mesh i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;background:var(--ac);opacity:.16;filter:blur(90px);transition:background-color .8s;animation:drift 18s ease-in-out infinite alternate}
.mesh i:nth-child(1){left:-10%;top:-10%}
.mesh i:nth-child(2){right:-15%;top:10%;animation-delay:-9s;opacity:.1}
.hero .w{display:grid;gap:40px;align-items:center}
@media(min-width:900px){.hero .w{grid-template-columns:1.1fr .9fr}}
.hero p.sub{font-size:1.15rem;max-width:44ch;margin:20px 0 28px}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.hw{display:inline-block;opacity:0;translate:0 .5em;transition:opacity .7s var(--e),translate .7s var(--e);transition-delay:calc(var(--i)*80ms)}
.go .hw{opacity:1;translate:0}
.u{position:relative;white-space:nowrap}
.u::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.1em;border-radius:9px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e) .7s,background-color .5s}
.go .u::after{transform:none}
.fl{position:absolute;border-radius:22px;border:1px solid var(--ln);background:var(--sf);z-index:-1;width:150px;aspect-ratio:1.586;rotate:-12deg;opacity:.7}

/* hero stage animation (8s loop) */
.hs{position:relative;width:min(100%,400px);aspect-ratio:1;margin:auto}
.f3{position:absolute;inset:0;perspective:900px;animation:flt 6s ease-in-out infinite alternate}
.nfc{position:absolute;left:0;top:24%;width:58%;transform:rotateY(18deg) rotateX(8deg) rotate(-6deg);box-shadow:0 24px 50px -16px var(--accent)}
.phw{position:absolute;right:0;top:4%;width:38%;animation:ph 8s var(--e) infinite both}
.rip{position:absolute;left:56%;top:48%;width:0;height:0}
.rip i{position:absolute;width:110px;height:110px;margin:-55px;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:rp 8s ease-out infinite both;animation-delay:calc(-8s + var(--d))}
.hs .s{animation:pop 8s var(--e) infinite;animation-delay:calc(-8s + var(--d,0s));animation-fill-mode:both}
.hs .blank{animation:bl 8s infinite}

/* marquee */
.mq{overflow:hidden;border-block:1px solid var(--ln);padding:16px 0;background:var(--sf)}
.mq div{display:flex;width:max-content;animation:mq 32s linear infinite}
.mq span{padding:0 22px;font-weight:650;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.mq span::after{content:"\00b7";margin-left:44px;color:var(--ac)}

/* ===== 6. Card images & phone mockup ===== */
/* Card image box. Shows the brand text if the jpg is missing. */
.cd{position:relative;aspect-ratio:1.586;border-radius:6%/9%;overflow:hidden;background:var(--accent);color:var(--bg);display:grid;place-items:center;font-weight:800;letter-spacing:-.04em;transition:background-color .5s,color .5s}
.cd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Phone: radius uses % so it scales with the phone at any size.
   13% of width horizontally, 6.4% of height vertically = even round corners (9:18.2 ratio). */
.ph{container-type:inline-size;position:relative;width:100%;aspect-ratio:9/18.2;border:5px solid #14161b;border-radius:13%/6.4%;background:var(--bg);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.ph .scr{position:absolute;inset:0;background:var(--bg);color:var(--ink);font-size:4.6cqw;padding:10em 1em 1em;transition:background-color .5s,color .5s}
.ph .scr::before{content:"";position:absolute;top:2.2cqw;left:50%;translate:-50% 0;width:24cqw;height:5cqw;border-radius:9cqw;background:#14161b}
.pan{background:var(--card);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:2.6em;padding:0 1em 1em;text-align:center;margin-top:-3.6em;transition:background-color .5s}
.av{width:5.6em;height:5.6em;border-radius:28%;margin:-2.8em auto .7em;background:var(--accent);color:var(--bg);display:grid;place-items:center;font-weight:750;font-size:1.3em;border:.2em solid var(--card);transition:background-color .5s,color .5s}
.ph h4{font-size:1.3em;color:var(--ink)}
.ph .r{font-size:.85em;color:var(--accent);font-weight:650;transition:color .5s}
.ph .t{font-size:.75em;opacity:.7;margin:.2em 0 .9em;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.55em;margin-bottom:.9em}
.tiles i{aspect-ratio:1;border-radius:28%;display:grid;place-items:center;color:var(--accent);background:var(--chip,color-mix(in srgb,var(--accent) 12%,var(--card)));transition:background-color .5s,color .5s}
.tiles svg{width:50%;height:50%}
.bt b{display:block;border-radius:99px;padding:.7em;font-size:.82em;font-weight:650;transition:background-color .5s,color .5s,border-color .5s}
.bp{background:var(--accent);color:var(--bg)}
.bo{border:1.5px solid var(--accent);color:var(--accent);margin-top:.5em}
.blank{position:absolute;inset:0;background:var(--card);display:grid;place-items:center;color:var(--accent);opacity:0}
.blank svg{width:20%;opacity:.5}

/* ===== 7. Themes showcase ===== */
.show{display:grid;gap:36px;margin-top:40px;align-items:center}
@media(min-width:900px){.show{grid-template-columns:1fr 1fr}}
.stage{position:relative;display:grid;place-items:center;padding:30px 0;min-height:540px}
.glow{position:absolute;width:min(420px,90%);aspect-ratio:1;border-radius:50%;background:var(--accent);opacity:.22;filter:blur(70px);transition:background-color .6s}
.pc{position:absolute;left:2%;width:46%;max-width:230px;box-shadow:0 20px 40px -14px var(--accent)}
.pc.f{top:8%;transform:rotate(-10deg)}
.pc.b{top:34%;transform:rotate(7deg)}
.big{width:min(62%,250px);position:relative}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chip{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:99px;border:1px solid var(--ln);background:var(--pg);color:var(--tx);cursor:pointer;font:inherit;font-weight:600;font-size:.95rem;transition:background-color .3s,border-color .3s,transform .35s var(--e)}
.chip:hover{transform:translateY(-2px)}
.chip i{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 3px var(--bg)}
.chip[aria-pressed=true]{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,var(--pg))}
.tn{font-size:1.5rem;font-weight:750;letter-spacing:-.03em}

/* gallery */
.gal{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px 4px 30px;margin-top:40px;scrollbar-width:thin}
.gc{flex:0 0 86%;max-width:360px;scroll-snap-align:center;text-align:center}
@media(min-width:900px){.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));overflow:visible;gap:56px 28px;justify-items:center}.gc{flex:none;width:100%}}

.tilt{position:relative;width:100%;transition:transform .45s var(--e);transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(var(--ty,0))}
.tilt::after{content:"";position:absolute;inset:14% 6%;z-index:-1;border-radius:30%;background:var(--accent);filter:blur(36px);opacity:.12;transition:opacity .4s}
.gc:hover .tilt,.gc:focus-within .tilt{--ty:-6px}
.gc:hover .tilt::after{opacity:.4}
.gc h3{font-size:1.1rem;margin-top:20px}
.gc p{font-size:.88rem}

/* card + phone side by side */
.duo{position:relative;display:flex;align-items:center}
.flip{flex:0 0 74%;position:relative;z-index:1;perspective:900px;appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;rotate:-3deg;border-radius:6%/9%;-webkit-tap-highlight-color:transparent}
.fi{display:block;position:relative;width:100%;aspect-ratio:1.586;transform-style:preserve-3d;transition:transform .8s var(--e)}
.fi .cd{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:1.5rem;box-shadow:0 22px 40px -18px var(--accent)}
.fi .fb{transform:rotateY(180deg)}
.flip[aria-pressed=true] .fi{transform:rotateY(180deg)}
@media(hover:hover){
 .flip:hover .fi{transform:rotateY(14deg)}
 .flip[aria-pressed=true]:hover .fi{transform:rotateY(166deg)}
}

.gph{flex:0 0 40%;margin-left:-14%;position:relative;z-index:2}
.gph .ph{border-width:3px;box-shadow:0 20px 36px -14px rgba(0,0,0,.5)}

/* phone screen replays its pop-in (restarted on every flip) */
.gc .s{animation:gpop 5s var(--e) infinite;animation-delay:calc(-5s + var(--d,0s));animation-fill-mode:both}
.gc.rs .s,.gc.rs .gr i{animation:none}
@keyframes gpop{0%{opacity:0;translate:0 14px;scale:.85}10%,86%{opacity:1;translate:0;scale:1}94%,100%{opacity:0;translate:0 14px}}

/* tap ripple between card and phone */
.gr{position:absolute;left:62%;top:50%;z-index:3;pointer-events:none}
.gr i{position:absolute;width:110px;height:110px;margin:-55px;border:2px solid var(--accent);border-radius:50%;opacity:0}
.gc.ping .gr i{animation:rp2 1s ease-out both;animation-delay:var(--d)}

/* front/back label */
.gc .hint{margin-top:10px;font-size:.8rem}
.side{color:var(--tx);font-weight:700}
.side::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px}

/* ===== 8. How it works ===== */
.steps{position:relative;margin-top:44px;display:grid;gap:44px;padding-left:76px}
.steps svg.th{position:absolute;left:0;top:0;width:60px;overflow:visible}
.th path{fill:none;stroke-width:3;stroke-linecap:round}
.th .bg{stroke:var(--ln)}
.th .fg{stroke:var(--ac)}
.step{position:relative}
.step .n{position:absolute;left:-76px;top:0;width:60px;height:60px;border-radius:20px;background:var(--sf);border:1px solid var(--ln);display:grid;place-items:center;color:var(--ac);transition:background-color .5s,color .5s,scale .5s var(--e)}
.step.in .n{background:var(--ac);color:var(--onac);scale:1.06}
.step .n svg{width:26px;height:26px}
.step h3{font-size:1.4rem;margin-bottom:6px}

/* ===== 9. Features ===== */
.feat{display:grid;gap:16px;margin-top:40px}
@media(min-width:700px){.feat{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.feat{grid-template-columns:repeat(4,1fr)}}
.ft{background:var(--sf);border:1px solid var(--ln);border-radius:28px;padding:22px}
.ft h3{font-size:1.15rem;margin:16px 0 6px}
.ft p{font-size:.93rem}
.vis{height:130px;border-radius:20px;background:var(--pg);border:1px solid var(--ln);display:grid;place-items:center;position:relative;overflow:hidden}
.pop{display:grid;grid-template-columns:repeat(2,44px);gap:8px}
.pop i{width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--ac) 12%,var(--pg));color:var(--ac);display:grid;place-items:center}
.pop svg{width:22px}
.in .pop i{animation:pp .6s var(--e) backwards;animation-delay:calc(var(--i)*80ms)}
.sv svg{width:54px;color:var(--ac)}
.arr{animation:drop 1.8s var(--e) infinite}
.qr{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:84px;position:relative}
.qr i{aspect-ratio:1;background:var(--tx);border-radius:1px}
.qr i.o{opacity:.08}
.qr::after{content:"";position:absolute;left:-6px;right:-6px;top:0;height:3px;border-radius:3px;background:var(--ac);box-shadow:0 0 12px var(--ac);animation:scan 2.2s ease-in-out infinite alternate}
.shr{position:relative;width:56px;height:56px;border-radius:50%;background:var(--ac);color:var(--onac);display:grid;place-items:center;z-index:1}
.shr svg{width:24px}
.bb{position:absolute;width:26px;height:20px;border-radius:12px 12px 12px 3px;background:color-mix(in srgb,var(--ac) 25%,var(--pg));border:1px solid var(--ac);animation:fan 3s var(--e) infinite both;animation-delay:calc(-3s + var(--d))}
.also{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.also span{padding:8px 14px;border-radius:99px;border:1px solid var(--ln);font-size:.9rem;color:var(--mu)}

/* ===== 10. Package ===== */
.pk{position:relative;overflow:hidden;max-width:560px;margin:40px auto 0;padding:34px;border-radius:36px;background:var(--sf);border:1px solid var(--ln);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--ac) 55%,transparent);animation:flt 5s ease-in-out infinite alternate}
.pk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);translate:-100% 0;animation:shm 4.5s ease-in-out infinite}
.price{font-size:clamp(3.4rem,14vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:1;margin:6px 0 4px}
.price small{font-size:1rem;color:var(--mu);letter-spacing:0;font-weight:500;margin-left:8px}
.ck{list-style:none;padding:0;margin:24px 0}
.ck li{display:flex;gap:12px;padding:9px 0;color:var(--tx)}
.ck svg{flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ac) 14%,var(--sf));color:var(--ac);padding:4px;margin-top:1px}
.ck path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .5s var(--e);transition-delay:calc(var(--i)*140ms + 400ms)}
.in .ck path{stroke-dashoffset:0}

/* ===== 11. FAQ ===== */
.faq{max-width:720px;margin-top:32px}
details{border-bottom:1px solid var(--ln);padding:4px 0}
summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:650;font-size:1.1rem;display:flex;justify-content:space-between;gap:16px;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--ac);transition:rotate .3s var(--e)}
details[open] summary::after{rotate:45deg}
details p{padding:0 0 18px;animation:fd .5s var(--e)}

/* ===== 12. CTA & footer ===== */
.cta{text-align:center;padding:90px 0}
.cta .tap{position:relative;width:200px;height:130px;margin:0 auto 34px}
.cta .tap b{position:absolute;inset:0;border-radius:18px;background:var(--ac);color:var(--onac);display:grid;place-items:center;font-size:1.5rem;letter-spacing:-.04em;animation:flt 3s ease-in-out infinite alternate;transition:background-color .5s}
.cta .tap i{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px;border-radius:50%;border:2px solid var(--ac);animation:rp2 2.8s ease-out infinite;animation-delay:calc(-2.8s + var(--d))}
.cta .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
footer{border-top:1px solid var(--ln);padding:26px 0;font-size:.9rem;color:var(--mu)}

/* contact cards */
.cta .ct{display:grid;gap:14px;max-width:720px;margin:34px auto 0;text-align:left}
@media(min-width:640px){.cta .ct{grid-template-columns:1fr 1fr;gap:18px}}
.cc{position:relative;display:flex;align-items:center;gap:14px;padding:20px 18px;border-radius:24px;border:1px solid var(--ln);background:var(--sf);color:var(--tx);text-decoration:none;overflow:hidden;cursor:pointer;transition:transform .35s var(--e),box-shadow .35s var(--e),background-color .5s,color .5s}
.cc.p{background:var(--ac);color:var(--onac);border-color:transparent}
.cc::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);translate:-100% 0;transition:translate .7s var(--e);pointer-events:none}
.cc:hover{transform:translateY(-4px);box-shadow:0 18px 32px -16px color-mix(in srgb,var(--tx) 45%,transparent)}
.cc.p:hover{box-shadow:0 18px 34px -14px var(--ac)}
.cc:hover::before{translate:100% 0}
.cc:active{transform:translateY(-1px)}
.ci{flex:none;width:52px;height:52px;border-radius:28%;display:grid;place-items:center;background:color-mix(in srgb,currentColor 16%,transparent)}
.ci svg{width:26px;height:26px}
.cc:not(.p) .ci{background:color-mix(in srgb,var(--ac) 12%,var(--pg));color:var(--ac)}
.cc .tx{flex:1;min-width:0;display:grid;gap:2px}
.cc small{font-size:.8rem;font-weight:650;opacity:.75;letter-spacing:.01em}
.cc b{font-size:1rem;letter-spacing:-.02em;overflow-wrap:anywhere}
.cc .ar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,currentColor 28%,transparent);transition:transform .35s var(--e)}
.cc .ar svg{width:18px;height:18px}
.cc:hover .ar{transform:rotate(-45deg)}

/* ===== 13. Motion ===== */
@keyframes drift{to{translate:8vw 6vh;scale:1.15}}
@keyframes flt{to{translate:0 -14px}}
@keyframes ph{0%,8%{translate:90% 0;opacity:0}20%{opacity:1}32%,92%{translate:-10% 0;opacity:1}100%{translate:90% 0;opacity:0}}
@keyframes rp{0%,33%{opacity:0;scale:.2}35%{opacity:.8;scale:.2}52%,100%{opacity:0;scale:2.6}}
@keyframes pop{0%,43%{opacity:0;translate:0 14px;scale:.85}49%,92%{opacity:1;translate:0;scale:1}98%,100%{opacity:0;translate:0 14px}}
@keyframes bl{0%,42%{opacity:1}46%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes mq{to{translate:-50% 0}}
@keyframes pp{from{scale:.3;opacity:0}}
@keyframes drop{0%{translate:0 -6px;opacity:0}40%{opacity:1}80%,100%{translate:0 4px;opacity:1}}
@keyframes scan{to{translate:0 80px}}
@keyframes fan{0%,8%{translate:0 0;scale:.2;opacity:0}35%,75%{translate:var(--x) var(--y);scale:1;opacity:1}100%{translate:var(--x) var(--y);scale:.6;opacity:0}}
@keyframes shm{0%{translate:-100% 0}55%,100%{translate:100% 0}}
@keyframes fd{from{opacity:0;translate:0 -6px}}
@keyframes rp2{0%{scale:.3;opacity:.8}100%{scale:2;opacity:0}}

/* scroll reveal + pause off-screen loops */
.rv{opacity:0;translate:0 26px;transition:opacity .8s var(--e),translate .8s var(--e);transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1;translate:0}
.off,.off *,.off *::before,.off *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.rv,.hw{opacity:1;translate:0}
.u::after{transform:none}
.ck path{stroke-dashoffset:0}
.blank{opacity:0}
}

/* Theme chips: one row on desktop */
@media(min-width:900px){
  .chips{flex-wrap:nowrap;gap:6px}
  .chip{flex:1 1 auto;min-width:0;justify-content:center;gap:6px;
    padding:8px 10px 8px 8px;font-size:.85rem}
  .chip i{width:14px;height:14px;flex:none}
}

/* "Also" pills: single column on mobile */
@media(max-width:699px){
  .also{flex-direction:column;align-items:stretch;gap:8px}
  .also span{text-align:center}
}

/* How it works + Questions: two columns on laptop, desktop and iPad landscape */
@media(min-width:900px){
  #how>.w,#faq>.w{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:72px;align-items:start;
  }
  #how>.w{grid-template-rows:auto auto 1fr}
  #faq>.w{grid-template-rows:auto 1fr}

  #how .steps{grid-column:2;grid-row:1/span 3;margin-top:0}
  #faq .faq{grid-column:2;grid-row:1/span 2;margin-top:0;max-width:none}
}
/* FAQ side block */
.faq-side .lead{max-width:34ch;margin-top:12px;color:var(--mu)}
.faq-side .btn{margin-top:20px;display:inline-flex}

@media(min-width:900px){
  #faq>.w{grid-template-rows:auto}
  #faq .faq-side{grid-column:1;grid-row:1}
  #faq .faq{grid-row:1}
}

/* Package details dialog */
.dlg{border:1px solid var(--ln);border-radius:28px;padding:26px;width:min(600px,100% - 24px);max-height:92svh;overflow:auto;
  background:var(--sf);color:var(--tx);margin:auto;scrollbar-width:thin;scrollbar-color:var(--ln) transparent}
.dlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.dlg[open]{animation:dlgIn .35s var(--e) both}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.97)}}

.dlg-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dlg-hd h3{font-size:1.45rem}
.dlg-hd p{color:var(--mu);font-size:.92rem;margin-top:4px}
.dlg-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);background:var(--pg);
  color:var(--tx);font-size:1.4rem;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.dlg-x:hover{border-color:var(--ac);color:var(--ac)}

.dg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.dt{position:relative;padding:12px 12px 12px 42px;border:1px solid var(--ln);border-radius:16px;background:var(--pg)}
.dt::before{content:"";position:absolute;left:12px;top:14px;width:20px;height:20px;border-radius:50%;
  background:color-mix(in srgb,var(--ac) 16%,var(--pg))}
.dt::after{content:"";position:absolute;left:19px;top:19px;width:5px;height:9px;border:solid var(--ac);
  border-width:0 2px 2px 0;rotate:45deg;translate:0 -2px}
.dt b{display:block;font-size:.95rem}
.dt span{display:block;margin-top:2px;font-size:.82rem;color:var(--mu);line-height:1.35}

.dpay{margin-top:14px;padding:18px;border-radius:20px;border:1px solid color-mix(in srgb,var(--ac) 40%,var(--ln));
  background:color-mix(in srgb,var(--ac) 8%,var(--pg))}
.dpay .tag{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--ac);color:var(--onac);font-size:.72rem;font-weight:700}
.dpay h4{margin-top:8px;font-size:1.1rem}
.dpay p{margin-top:4px;color:var(--mu);font-size:.9rem}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pills span{padding:6px 12px;border-radius:99px;border:1px solid var(--ln);background:var(--sf);font-size:.82rem;font-weight:600}

.dlg-cta{display:flex;justify-content:center;margin-top:16px}

@media(max-width:520px){
  .dlg{padding:20px}
  .dg{grid-template-columns:1fr}
}

/* Package buttons */
.pk-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

@media(max-width:520px){
  .pk-acts{flex-direction:column}
  .pk-acts .btn{width:100%;justify-content:center}
}

/* Package tiers */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;text-align:left;align-items:stretch}
.plans .pk{display:flex;flex-direction:column;max-width:none;margin:0;padding:28px;border-radius:30px;background:var(--pg);animation:none;box-shadow:none}
.plans .pk::after{display:none}
.plans .pk.hot{background:var(--sf);border-color:var(--ac);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--ac) 55%,transparent)}
.plans .pk.hot::after{display:block}
.pl h3{font-size:1.3rem}
.pl .pd{color:var(--mu);font-size:.92rem;margin-top:2px}
.pl .price{font-size:clamp(2.8rem,6vw,3.6rem);margin-top:16px}
.pl .one{color:var(--mu);font-size:.85rem}
.pl .ck{margin:18px 0 22px}
.pl .ck li{padding:7px 0;font-size:.95rem}
.pl .pk-acts{margin-top:auto}
.bdg{position:absolute;top:18px;right:18px;padding:4px 12px;border-radius:99px;background:var(--ac);color:var(--onac);font-size:.74rem;font-weight:700}
.addon{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px auto 0;padding:22px 26px;border-radius:24px;border:1px dashed color-mix(in srgb,var(--ac) 50%,var(--ln));background:color-mix(in srgb,var(--ac) 6%,var(--pg));text-align:left}
.addon .tag{display:inline-block;padding:3px 10px;border-radius:99px;background:var(--ac);color:var(--onac);font-size:.72rem;font-weight:700}
.addon h3{margin-top:8px;font-size:1.15rem}
.addon p{margin-top:2px;color:var(--mu);font-size:.92rem;max-width:52ch}
.addon .ap{flex:none;font-size:2.2rem;font-weight:800;letter-spacing:-.04em}
@media(max-width:980px){.plans{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}
@media(max-width:520px){.addon{flex-direction:column;align-items:flex-start}}

/* Footer links */
footer .w{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center}
.flinks{display:flex;flex-wrap:wrap;gap:8px 20px}
.flinks a{color:var(--mu);text-decoration:none;transition:color .2s}
.flinks a:hover{color:var(--ac)}

/* Privacy + Terms pages */
.doc{padding:120px 0 72px}
.doc .w{max-width:760px}
.doc h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1}
.doc .upd{margin-top:10px;color:var(--mu);font-size:.95rem}
.doc h2{margin:36px 0 10px;font-size:1.25rem}
.doc p,.doc li{color:var(--mu);line-height:1.7}
.doc p{margin-top:10px}
.doc ul{margin:10px 0 0;padding-left:22px}
.doc li{margin-top:6px}
.doc b{color:var(--tx)}
.doc a{color:var(--ac)}