/* Modern homepage — scoped to body.home. White + green palette */
body.home{--bg:#f1f6f2;--ink:#0b2a21;--g:#1e7658;--mint:#bff0d6;--lime:#d4f56b;--mut:#5d7a6e;--line:#d5e4dc;background:var(--bg);color:var(--ink);font-family:"Vazirmatn",Tahoma,sans-serif;overflow-x:clip;--mx:0;--my:0}
.home main{padding:0}.o-wrap{width:min(1240px,92vw);margin-inline:auto}
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--lime));transform-origin:left;transform:scaleX(0)}
.home .topbar{position:fixed;inset:0 0 auto;z-index:50;height:68px;background:transparent;border:0;transition:background .35s,box-shadow .35s}
.home .topbar.scrolled{background:rgba(241,246,242,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.home .brand span,.o-eyebrow{color:var(--g)}.home .nav-cta{background:var(--ink);border-radius:99px;box-shadow:none}
.home footer{background:var(--ink);color:#9bb8ac;border:0;padding:40px}
.o-eyebrow{font-size:.82rem;font-weight:800;margin:0 0 16px}
.o-giant{font-size:clamp(2.8rem,7.2vw,6.6rem);line-height:1.12;font-weight:900;letter-spacing:-.04em;margin:0 0 24px}
.o-giant em{font-style:normal;color:var(--g)}.o-giant.sm{font-size:clamp(2.6rem,6vw,5.6rem)}
.o-lead{font-size:1.08rem;color:var(--mut);max-width:34em}
.home .button{border-radius:99px;padding:14px 26px;font-family:inherit;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}
.home .button.primary{background:var(--ink);color:#fff;box-shadow:none}.home .button.primary:hover{background:var(--g);transform:translateY(-3px)}
.home .button.ghost{border:1.5px solid var(--ink);color:var(--ink)}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em}.w>span{display:inline-block;transform:translateY(115%) rotate(5deg);transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*70ms)}.in .w>span{transform:none}
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s .25s,transform .9s .25s cubic-bezier(.16,1,.3,1)}[data-reveal].in{opacity:1;transform:none}
.reveal-up{opacity:0;transform:translateY(60px) scale(.97);transition:all 1s cubic-bezier(.16,1,.3,1)}.reveal-up.in{opacity:1;transform:none}
/* hero */
.o-hero{min-height:100svh;display:flex;align-items:center;padding-top:80px;position:relative;overflow:hidden}
.o-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3vw;align-items:center;position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;opacity:.8;will-change:transform;animation:drift 14s ease-in-out infinite alternate;pointer-events:none}.b1{width:52vw;height:52vw;background:radial-gradient(circle,var(--mint) 0,rgba(191,240,214,.55) 38%,rgba(191,240,214,0) 70%);top:-18vw;inset-inline-start:-14vw}.b2{width:40vw;height:40vw;background:radial-gradient(circle,rgba(212,245,107,.7) 0,rgba(212,245,107,.28) 40%,rgba(212,245,107,0) 70%);bottom:-14vw;inset-inline-end:4vw;animation-delay:-6s}
@keyframes drift{to{transform:translate(6vw,4vw) scale(1.15)}}
/* 3D scene */
.o-stage{display:grid;place-items:center}.scene{position:relative;width:min(460px,86vw);aspect-ratio:1/1.12;perspective:1300px}
.world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.phone3d{will-change:transform}
.phone3d{position:absolute;left:50%;top:50%;width:250px;height:510px;margin:-255px 0 0 -125px;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg)) rotateZ(calc(var(--rz,0)*1deg))}
.layer{position:absolute;inset:0;border-radius:44px;background:#12372b;border:2px solid #2f7a5c;backface-visibility:hidden}
.front,.back{position:absolute;inset:0;border-radius:44px;backface-visibility:hidden}
.front{background:#06130e;padding:10px;transform:translateZ(9px);box-shadow:inset 0 0 0 2px #2f7a5c,0 0 0 1px #0b2a21}
.back{transform:translateZ(-9px) rotateY(180deg);background:linear-gradient(145deg,#2f9e74,#0f4a37 60%,#0b2a21)}.back i{position:absolute;top:26px;inset-inline-start:26px;width:70px;height:70px;border-radius:22px;background:#0b2a21;box-shadow:inset 0 0 0 3px #3fae84,0 0 0 4px rgba(255,255,255,.1)}
.notch{position:absolute;top:18px;left:50%;width:70px;height:20px;margin-left:-35px;border-radius:99px;background:#000;z-index:3}
.floor{position:absolute;left:12%;right:12%;bottom:-2%;height:36px;border-radius:50%;background:radial-gradient(#0b2a2166,transparent 70%);transform:translateZ(-120px) rotateX(90deg)}
/* floating objects */
.fl{position:absolute;width:26%;aspect-ratio:1;transform:translate3d(calc(var(--mx)*var(--d)*-1px),calc(var(--my)*var(--d)*-1px),var(--z));pointer-events:none}.fl.big{width:34%}.fl.sm{width:17%}
.fl svg{width:100%;height:100%;filter:drop-shadow(0 22px 24px rgba(11,42,33,.28));animation:floaty 6s ease-in-out infinite;will-change:transform}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(7deg)}}

.screen{position:absolute;inset:10px;border-radius:35px;background:#fff;overflow:hidden;direction:ltr;transform:translateZ(1px)}
.lay{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s;pointer-events:none}.lay.on{opacity:1;visibility:visible;transition:opacity .6s,visibility 0s}
.lay iframe{position:absolute;top:-170px;left:-80px;width:390px;height:830px;border:0;transform:scale(.59);transform-origin:50% 50%;background:#fff}
.flip iframe{opacity:0;visibility:hidden;transform:scale(.59) rotateY(-90deg);transition:opacity .45s,transform .7s cubic-bezier(.2,.9,.3,1),visibility 0s .7s}.flip iframe.on{opacity:1;visibility:visible;transform:scale(.59) rotateY(0);transition:opacity .45s,transform .7s cubic-bezier(.2,.9,.3,1),visibility 0s}
.tname{position:absolute;bottom:14px;left:50%;translate:-50% 0;background:#0b2a21;color:#d4f56b;font:800 .72rem Vazirmatn;padding:4px 14px;border-radius:99px;white-space:nowrap;direction:rtl}
.ribbon-pro{position:absolute;top:70px;inset-inline-end:-36px;background:#ee4266;color:#fff;font:900 .75rem Vazirmatn;padding:4px 40px;transform:rotate(35deg) translateX(90px);transition:transform .7s cubic-bezier(.2,1.4,.4,1)}.lang-pro{position:absolute;top:12px;left:12px;background:#fff;color:#0b2a21;border:2px solid #0b2a21;font:900 .68rem Vazirmatn;padding:2px 10px;border-radius:99px;opacity:0;transform:translateY(-14px);transition:all .5s;direction:rtl}
.phone-pro .ribbon-pro,.plan-pro .ribbon-pro{transform:rotate(35deg) translateX(0)}.plan-rich .lang-pro{opacity:1;transform:none}
.domain-pro{position:absolute;bottom:14px;left:50%;transform:translate(-50%,14px);background:#0b2a21;color:#d4f56b;font:900 .66rem Vazirmatn;padding:4px 12px;border-radius:99px;opacity:0;transition:all .5s;direction:ltr;white-space:nowrap;box-shadow:0 6px 18px #0006}.plan-pro .domain-pro{opacity:1;transform:translate(-50%,0)}
.pcard .soon{font-style:normal;font-size:.68rem;font-weight:800;background:#ffffff22;border-radius:99px;padding:1px 8px;margin-inline-start:4px}.pcard .pcall{margin:10px 0 0;text-align:center;font-size:.84rem;color:#b9bfd0}.pcard .pcall a{color:var(--lime);font-weight:900;text-decoration:none}
.lay.qr{display:grid;place-items:center;background:linear-gradient(160deg,#bff0d6,#fff);padding-top:30px}.qrbox{display:grid;justify-items:center;gap:10px}.qrbox small{letter-spacing:.25em;font:800 .62rem Vazirmatn;color:#1e7658}.qrbox canvas{width:170px;height:170px;padding:10px;background:#fff;border-radius:16px;box-shadow:0 20px 40px -16px #0b2a2188;animation:qrpop .9s cubic-bezier(.2,1.4,.4,1)}.qrbox b{font:800 .95rem Vazirmatn}@keyframes qrpop{from{transform:scale(.6) rotate(-8deg);opacity:0}}
/* floating objects */
.fl{position:absolute;width:26%;aspect-ratio:1;transform:translate3d(calc(var(--mx)*var(--d)*-1px),calc(var(--my)*var(--d)*-1px),var(--z));pointer-events:none}.fl.big{width:34%}.fl.sm{width:17%}
.fl svg{width:100%;height:100%;filter:drop-shadow(0 22px 24px rgba(11,42,33,.28));animation:floaty 6s ease-in-out infinite;will-change:transform}@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(7deg)}}
/* merged hero + story: one pinned scene, 6 steps × 75vh */
.o-story{height:550vh;position:relative}.o-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip;display:flex;align-items:center;contain:layout paint}.o-story .blob{position:absolute}
.o-story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3vw;align-items:center;position:relative;z-index:1;padding-top:40px}
.steps{position:relative;display:grid;gap:26px}.stepper{display:flex;gap:10px;flex-wrap:wrap}
.sp{position:relative;width:46px;height:46px;border:0;background:none;padding:0;cursor:pointer;font:800 .9rem Vazirmatn;color:var(--ink)}.sp svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.sp circle{fill:#fff;stroke-width:3}.sp .t{stroke:var(--line)}.sp .f{fill:none;stroke:var(--g);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0)*100);transition:stroke-dashoffset .15s linear}.sp span{position:relative}
.sp.done circle.t{fill:var(--mint)}.sp.on{transform:scale(1.14)}.sp:hover{transform:scale(1.1)}.sp{transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.step-box{position:relative;min-height:290px}.step{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(34px);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none;will-change:opacity,transform}.step.on{opacity:1;transform:none;pointer-events:auto}
.step h2{font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.1;font-weight:900;letter-spacing:-.04em;margin:0 0 14px}.step p{color:var(--mut);font-size:1.12rem;max-width:26em}.step .o-giant{font-size:clamp(2.6rem,5.8vw,5.2rem)}.step .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
/* horizontal scroll + finale panel */
.o-h{height:520vh;position:relative}.o-h .o-sticky{flex-direction:column;justify-content:center;align-items:flex-start;gap:30px}
.o-track{display:flex;gap:2vw;padding-inline:6vw;width:max-content;will-change:transform}
.panel{flex:none;width:min(480px,78vw);height:66vh;border-radius:38px;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.panel.intro{width:min(700px,86vw);background:none;padding:0;justify-content:center;align-items:flex-start}
.card .n{position:absolute;top:30px;inset-inline-start:36px;font-weight:800;opacity:.55}.card .art{position:absolute;top:10%;inset-inline-end:-6%;width:68%;height:48%;filter:drop-shadow(0 26px 24px rgba(0,0,0,.25));animation:floaty 6s ease-in-out infinite;will-change:transform}
.card h3{font-size:clamp(2rem,3.6vw,3rem);margin:0 0 8px;line-height:1.15;font-weight:900}.card p{margin:0;opacity:.8;max-width:16em}
.k1{background:var(--mint)}.k2{background:var(--ink);color:#f2fff8}.k3{background:#fff}.k4{background:var(--lime)}.card{transition:transform .5s cubic-bezier(.16,1,.3,1)}.card:hover{transform:translateY(-10px) rotate(-.8deg)}
.finale{width:min(640px,88vw);background:linear-gradient(140deg,var(--g),#0b2a21);color:#fff;justify-content:space-between;text-decoration:none;transition:transform .5s,box-shadow .5s}.finale:hover{transform:translateY(-8px);box-shadow:0 40px 80px -30px #0b2a21}
.finale span{font-weight:800;color:var(--lime);letter-spacing:.2em}.finale strong{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.2;font-weight:900;letter-spacing:-.03em}.finale em{font-style:normal;color:#bff0d6;animation:nudge 1.8s ease-in-out infinite}@keyframes nudge{50%{transform:translateY(8px)}}
.hbar{align-self:center;width:min(420px,60vw);height:3px;background:var(--line);margin-inline:auto;border-radius:3px;overflow:hidden}.hbar i{display:block;height:100%;background:var(--g);transform-origin:right;transform:scaleX(0)}
/* plans */
.plans{padding:100px 0 60px;position:relative}.pricing-intro{text-align:center;max-width:720px;margin:0 auto 20px}.pricing-intro h2{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:900;letter-spacing:-.04em;margin:8px 0 10px}.pricing-intro p{color:var(--mut)}.pricing-intro .eyebrow{color:var(--g);font-weight:800}
.plans-phone{display:flex;align-items:center;justify-content:center;gap:clamp(20px,6vw,90px);flex-wrap:wrap;margin-bottom:30px}.plans-phone .o-stage{width:min(420px,90vw)}
.plan-phone{--ry:-18;--rx:6;--rz:-3}.switcher{display:grid;gap:10px;min-width:150px}.switcher button{border:2px solid var(--ink);background:#fff;border-radius:99px;padding:12px 22px;font:800 1rem Vazirmatn;cursor:pointer;transition:all .3s cubic-bezier(.2,1.4,.4,1)}.switcher button:hover{transform:translateX(-6px)}.switcher button.on{background:var(--ink);color:var(--lime);transform:scale(1.07)}
.plan-phone.bounce .lay.on iframe{animation:bnc .9s cubic-bezier(.2,1.6,.4,1)}@keyframes bnc{0%{transform:scale(.5)}60%{transform:scale(.66)}100%{transform:scale(.59)}}
.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.pcard{--rx:0deg;--ry:0deg;--lx:50%;--ly:0%;position:relative;border-radius:30px;padding:30px 26px;display:flex;flex-direction:column;gap:6px;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out,box-shadow .4s;overflow:hidden;will-change:transform}
.pcard.sel{box-shadow:0 40px 80px -34px rgba(11,42,33,.55)}.pcard .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,255,255,.38),transparent 55%);opacity:0;transition:opacity .3s}.pcard:hover .glare{opacity:1}
.pcard.cream{background:#f6ecd6;border:1px solid #e6d6b0;color:#3a2e18}.pcard.white{background:#fff;border:1px solid var(--line)}
.pcard.pro{color:#f4f4f6;border:2px solid transparent;background:linear-gradient(#0b0b10,#0b0b10) padding-box,conic-gradient(from var(--a),#d4f56b,#2f9e74,#b86bff,#ee4266,#d4f56b) border-box;animation:spin 5s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes spin{to{--a:360deg}}
.kick{font-size:.8rem;font-weight:800;color:var(--g)}.cream .kick{color:#9a6a20}.pro .kick{color:var(--lime)}.pcard h3{margin:0;font-size:1.7rem;font-weight:900}
.price{margin:4px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.price strong{font-size:clamp(2.4rem,4vw,3.2rem);line-height:1.1;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.price small{opacity:.7;font-size:.85rem}.mon{margin:0 0 10px;opacity:.6;font-size:.82rem}
.pcard ul{list-style:none;margin:6px 0 20px;padding:0;display:grid;gap:8px;flex:1;font-size:.92rem}.pcard li{padding-inline-start:22px;position:relative;line-height:1.55}.pcard li:before{content:"✓";position:absolute;inset-inline-start:0;color:var(--g);font-weight:900}.pro li:before{color:var(--lime)}.cream li:before{color:#9a6a20}.pcard li.all{font-weight:900;padding-inline-start:0}.pcard li.all:before{content:none}.pro li.all{color:var(--lime)}
.pcard .button{width:100%;text-align:center;justify-content:center;margin-top:auto}.home .button.lime{background:var(--lime);color:var(--ink)}.home .button.lime:hover{background:#fff;transform:translateY(-3px)}
.pricing-note{text-align:center;color:var(--mut);font-size:.84rem;margin:26px auto 0;max-width:760px}
.home .closing-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--g);color:#fff;border:0;border-radius:40px;padding:clamp(34px,6vw,80px);margin-bottom:60px;background-image:radial-gradient(circle at 10% 0,#3fae8466,transparent 50%)}.home .closing-cta h2{font-size:clamp(2rem,5vw,3.8rem);font-weight:900;letter-spacing:-.04em;margin:8px 0}.home .closing-cta p,.home .closing-cta .eyebrow{color:#d6f5e4}.home .closing-cta .button{background:var(--lime);color:var(--ink)}
@media(max-width:1000px){.plan-cards{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
@media(max-width:860px){.o-story-grid{grid-template-columns:1fr;gap:0;align-content:center;padding-top:60px}.steps{order:2;gap:14px}.o-story .o-stage{order:1;margin-block:-34px -4px}.stepper{position:relative;z-index:3}.steps{padding-top:6px}.scene{width:min(310px,80vw)}.phone3d{transform-origin:center;scale:.74}
 .sp{width:38px;height:38px;font-size:.78rem}.stepper{gap:6px;justify-content:center}.step-box{min-height:230px}.step{text-align:center}.step p{margin-inline:auto;font-size:1rem}.step .actions{justify-content:center}.step h2{font-size:2.3rem}.step .o-giant{font-size:2.3rem}.o-story{height:520vh}
 .panel{height:56vh;padding:26px}.o-h{height:460vh}.plans-phone{flex-direction:column}.switcher{grid-auto-flow:column;min-width:0}.switcher button{padding:10px 16px}}
@media(max-width:420px){.o-story-grid{padding-top:56px}.scene{width:min(280px,78vw)}.phone3d{scale:.66}.step-box{min-height:250px}}


/* ---- phones: smaller horizontal-scroll cards and plan cards ---- */
@media(max-width:860px){
 .panel{width:60vw;height:42vh;min-height:250px;padding:18px;border-radius:26px}
 .panel.intro{width:74vw;height:auto;min-height:0;padding:0}.panel.intro .o-giant{font-size:2.3rem;margin-bottom:0}
 .card .n{top:16px;inset-inline-start:20px;font-size:.85rem}
 .card .art{top:8%;inset-inline-end:-4%;width:56%;height:42%}
 .card h3{font-size:1.35rem;margin-bottom:4px}.card p{font-size:.85rem;line-height:1.6;max-width:14em}
 .finale{width:68vw}.finale strong{font-size:1.5rem}.finale span{font-size:.8rem}.finale em{font-size:.8rem}
 .o-track{gap:12px;padding-inline:5vw}.o-h{height:380vh}
 .pcard{padding:22px 18px;border-radius:24px}.pcard h3{font-size:1.4rem}.pcard ul{font-size:.86rem}
}
@media(max-width:420px){.panel{width:64vw;height:40vh;min-height:230px}.card h3{font-size:1.2rem}}
.price .nocount{font-size:clamp(1.8rem,3vw,2.3rem)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- performance: pause off-screen animation, calmer phones ---- */
.off *,.off::before,.off::after{animation-play-state:paused!important}
.o-track{backface-visibility:hidden}.panel{contain:layout paint}
@media(max-width:860px){
 .blob{animation:none}
 .fl svg,.card .art{animation:none;filter:drop-shadow(0 12px 10px rgba(11,42,33,.22))}
 .home .topbar.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(241,246,242,.96)}
 .card{transition:none}.card:hover{transform:none}
}
.dur{grid-column:1/-1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 6px}.dur button{border:2px solid var(--ink);background:#fff;border-radius:99px;padding:10px 20px;font:800 .95rem Vazirmatn;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .25s cubic-bezier(.2,1.4,.4,1)}.dur button:hover{transform:translateY(-2px)}.dur button.on{background:var(--ink);color:var(--lime)}.dur button i{font-style:normal;font-size:.72rem;font-weight:800;background:var(--lime);color:var(--ink);border-radius:99px;padding:2px 9px}.dur button.on i{background:var(--lime);color:var(--ink)}

.cta-pair{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---- templates showcase section ---- */
.tplx{padding:90px 0 30px;position:relative}
.tplx-head{max-width:760px;margin:0 auto 36px;text-align:center;display:grid;justify-items:center;gap:10px}
.tplx-head .eyebrow{color:var(--g);font-weight:800;font-size:.82rem}
.tplx-head h2{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.15;font-weight:900;letter-spacing:-.04em;margin:0}.tplx-head h2 em{font-style:normal;color:var(--g)}
.tplx-head p{color:var(--mut);margin:0;max-width:34em}
.home .button.tplx-big{margin-top:10px;font-size:1.05rem;padding:16px 34px}
.tplx-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.tplx-card{display:grid;gap:4px;padding:14px;border-radius:26px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.tplx-card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(11,42,33,.5)}
.tplx-card h3{margin:8px 4px 0;font-size:1rem;font-weight:900}.tplx-card small{margin:0 4px 4px;color:var(--mut);font-size:.78rem}
.tplx-mock{aspect-ratio:3/4;border-radius:18px;background:var(--c1);padding:12px;display:grid;align-content:start;gap:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tplx-mock .tm-bar{display:block;height:34px;border-radius:10px;background:var(--c2)}
.tplx-mock .tm-chips{display:flex;gap:5px}.tplx-mock .tm-chips i{height:14px;flex:1;border-radius:99px;background:var(--c3);opacity:.9}.tplx-mock .tm-chips i:first-child{background:var(--c2)}
.tplx-mock .tm-row{display:flex;gap:7px;align-items:center;padding:7px;border-radius:10px;background:rgba(255,255,255,.55)}.tplx-mock.dark .tm-row{background:rgba(255,255,255,.1)}
.tplx-mock .tm-row b{width:30px;height:30px;border-radius:9px;background:var(--c3);flex:none}.tplx-mock .tm-row u{flex:1;height:8px;border-radius:6px;background:var(--c2);opacity:.55}
.tplx-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding:26px 34px;border-radius:30px;background:linear-gradient(120deg,var(--ink),#173b2f);color:#fff;text-decoration:none;transition:transform .4s,box-shadow .4s}
.tplx-banner:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px #0b2a21}
.tplx-banner span{display:grid;gap:2px}.tplx-banner b{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:900}.tplx-banner small{color:#9fc2b2;font-size:.9rem}
.tplx-banner em{font-style:normal;background:var(--lime);color:var(--ink);font-weight:900;border-radius:99px;padding:12px 24px;white-space:nowrap}
@media(max-width:860px){.tplx{padding:60px 0 20px}.tplx-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 2px 14px;margin-inline:-4vw;padding-inline:4vw;scrollbar-width:none}.tplx-card{flex:0 0 42vw;scroll-snap-align:start}.tplx-banner{padding:20px;border-radius:24px}}