/* ============================================================
   PaytakhtVPN homepage components (home-plus.css)

   Styles for six independent, self-contained homepage components.
   Behaviour for each is driven by a companion js/np-*.js module.
     1. connect-hero  Interactive mock V2Ray connect widget
     2. netmap        Global network map with animated arcs and tooltips
     3. pricing pr-*  Interactive pricing configurator
     4. trust-band tb-* Social-proof band (marquee, status, live counter)
     5. testimonials tst-* Testimonials carousel
     6. mpx           Global motion polish (mesh, scroll progress, reveal)

   Conventions:
     - RTL-native: sizing and offsets use CSS logical properties so the
       Farsi-first RTL layout and any LTR fallback share one ruleset.
     - Every block honours prefers-reduced-motion: reduce.
     - No external, network, or CDN dependencies; fully self-contained.
     - Class, id, keyframes and custom-property names are referenced by
       the companion JS/HTML and must not be renamed.
   ============================================================ */

/* ---- connect-hero: Interactive "Connect" hero widget (mock V2Ray VPN app) ---- */
#connect-hero{
  --connect-size:clamp(150px,42vw,178px);
  --connect-ink:#eef2ff;
  --connect-ink-dim:rgba(238,242,255,.64);
  --connect-ink-faint:rgba(238,242,255,.40);
  --connect-line:rgba(255,255,255,.12);
  --connect-glass:rgba(255,255,255,.05);
  --connect-accent:#828aa8;
  position:relative;
  inline-size:100%;
  max-inline-size:420px;
  margin-inline:auto;
  font-family:var(--font-body,system-ui,sans-serif);
  color:var(--connect-ink);
  -webkit-font-smoothing:antialiased;
}
#connect-hero[data-state="connecting"]{--connect-accent:var(--cyan,#2aabee);}
#connect-hero[data-state="protected"]{--connect-accent:var(--green,#1fae74);}

.connect-hero__panel{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:clamp(20px,5vw,28px);
  padding:clamp(1.05rem,4vw,1.6rem);
  background:radial-gradient(130% 120% at 82% -12%,#202a5e 0%,#10143a 52%,#0a0c24 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 80px -24px rgba(8,10,32,.75),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex; flex-direction:column; gap:clamp(.85rem,2.6vw,1.15rem);
}
.connect-hero__panel > :not(.connect-hero__aura){position:relative; z-index:1;}

.connect-hero__aura{position:absolute; inset:0; z-index:0; pointer-events:none;}
.connect-hero__blob{position:absolute; border-radius:50%; filter:blur(42px); opacity:.55; will-change:transform;}
.connect-hero__blob--a{inline-size:52%; block-size:52%; inset-block-start:-16%; inset-inline-start:-12%; background:radial-gradient(circle,#2764e7,transparent 70%); animation:connect-float 16s ease-in-out infinite;}
.connect-hero__blob--b{inline-size:46%; block-size:46%; inset-block-start:34%; inset-inline-end:-14%; background:radial-gradient(circle,#7a41dc,transparent 70%); animation:connect-float 20s ease-in-out infinite reverse;}
.connect-hero__blob--c{inline-size:40%; block-size:40%; inset-block-end:-16%; inset-inline-start:24%; background:radial-gradient(circle,#2aabee,transparent 70%); animation:connect-float 18s ease-in-out infinite;}

.connect-hero__head{display:flex; align-items:center; justify-content:space-between; gap:.6rem;}
.connect-hero__brand{display:flex; align-items:center; gap:.6rem; min-inline-size:0;}
.connect-hero__logo{inline-size:38px; block-size:38px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#2764e7,#7a41dc); box-shadow:0 8px 20px -6px rgba(39,100,231,.7);}
.connect-hero__logo svg{inline-size:21px; block-size:21px;}
.connect-hero__brandtext{display:flex; flex-direction:column; line-height:1.15; min-inline-size:0;}
.connect-hero__brandname{font-family:var(--font-display,inherit); font-size:1rem; font-weight:600; letter-spacing:.2px;}
.connect-hero__badge{font-size:.72rem; color:var(--connect-ink-dim);}
.connect-hero__pill{display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .66rem; border-radius:999px; background:var(--connect-glass); border:1px solid var(--connect-line); font-size:.76rem; font-weight:600; white-space:nowrap;}
.connect-hero__dot{inline-size:8px; block-size:8px; border-radius:50%; background:var(--connect-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--connect-accent) 22%,transparent); transition:background .4s ease,box-shadow .4s ease;}
#connect-hero[data-state="connecting"] .connect-hero__dot{animation:connect-blink 1s ease-in-out infinite;}

.connect-hero__dial{position:relative; display:flex; align-items:center; justify-content:center; padding-block:clamp(.5rem,2.4vw,1rem); min-block-size:calc(var(--connect-size) + 2.2rem);}
.connect-hero__pulse{position:absolute; top:50%; left:50%; inline-size:var(--connect-size); block-size:var(--connect-size); border-radius:50%; border:1.5px solid var(--connect-accent); opacity:0; transform:translate(-50%,-50%) scale(.7); pointer-events:none;}
#connect-hero[data-state="protected"] .connect-hero__pulse{animation:connect-pulse 2.8s ease-out infinite;}
#connect-hero[data-state="protected"] .connect-hero__pulse--2{animation-delay:1.4s;}

.connect-hero__btn{
  position:relative; inline-size:var(--connect-size); block-size:var(--connect-size);
  border:0; border-radius:50%; cursor:pointer; padding:0;
  background:radial-gradient(circle at 50% 38%,#232e64,#0d1237 72%);
  color:var(--connect-ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 20px 44px -16px rgba(0,0,0,.7);
  transition:transform .35s var(--ease,ease),box-shadow .5s var(--ease,ease);
  -webkit-tap-highlight-color:transparent;
}
.connect-hero__btn:hover{transform:translateY(-2px) scale(1.015);}
.connect-hero__btn:active{transform:scale(.97);}
.connect-hero__btn:focus-visible{outline:3px solid var(--cyan,#2aabee); outline-offset:4px;}
#connect-hero[data-state="connecting"] .connect-hero__btn{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 20px 44px -16px rgba(0,0,0,.7),0 0 60px -8px rgba(42,171,238,.55);}
#connect-hero[data-state="protected"] .connect-hero__btn{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 20px 44px -16px rgba(0,0,0,.7),0 0 66px -6px rgba(31,174,116,.5);}

.connect-hero__ring{position:absolute; inset:0; inline-size:100%; block-size:100%; transform:rotate(-90deg); overflow:visible;}
.connect-hero__ring-track{fill:none; stroke:rgba(255,255,255,.10); stroke-width:6;}
.connect-hero__ring-prog{fill:none; stroke:url(#connect-grad); stroke-width:6; stroke-linecap:round; stroke-dasharray:339.292; stroke-dashoffset:339.292;}
#connect-hero[data-state="protected"] .connect-hero__ring-prog{stroke:url(#connect-grad-ok);}

.connect-hero__btn-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; padding-inline:1.3rem; text-align:center;}
.connect-hero__icon{position:relative; inline-size:34px; block-size:34px; margin-inline:auto;}
.connect-hero__power{position:absolute; inset:0; display:grid; place-items:center; color:var(--connect-ink); transition:color .4s ease;}
.connect-hero__power svg{inline-size:30px; block-size:30px;}
#connect-hero[data-state="protected"] .connect-hero__power{color:var(--green,#1fae74);}
#connect-hero[data-state="connecting"] .connect-hero__power{display:none;}
.connect-hero__spinner{position:absolute; inset:0; margin:auto; inline-size:30px; block-size:30px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:var(--cyan,#2aabee); display:none;}
#connect-hero[data-state="connecting"] .connect-hero__spinner{display:block; animation:connect-spin .8s linear infinite;}
.connect-hero__btn-state{font-family:var(--font-display,inherit); font-size:clamp(1.05rem,4.4vw,1.28rem); font-weight:600;}
.connect-hero__btn-hint{font-size:.7rem; color:var(--connect-ink-faint); max-inline-size:9rem; line-height:1.3;}

.connect-hero__hops{list-style:none; margin:0; padding:0; display:flex; align-items:flex-start; justify-content:center; gap:.5rem;}
.connect-hero__hop{display:flex; flex-direction:column; align-items:center; gap:.4rem; flex:0 0 auto;}
.connect-hero__hop-dot{inline-size:14px; block-size:14px; border-radius:50%; border:2px solid var(--connect-line); background:transparent; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;}
.connect-hero__hop[data-on="1"] .connect-hero__hop-dot{background:var(--connect-accent); border-color:var(--connect-accent); box-shadow:0 0 12px var(--connect-accent);}
.connect-hero__hop-label{font-size:.72rem; color:var(--connect-ink-faint); transition:color .35s ease;}
.connect-hero__hop[data-on="1"] .connect-hero__hop-label{color:var(--connect-ink);}
.connect-hero__wire{flex:1 1 auto; max-inline-size:64px; block-size:2px; margin-block-start:6px; border-radius:2px; background:var(--connect-line); position:relative; overflow:hidden;}
.connect-hero__wire i{position:absolute; inset-block:0; inset-inline-start:0; inline-size:0; background:linear-gradient(90deg,var(--cyan,#2aabee),var(--blue,#2764e7)); transition:inline-size .5s var(--ease,ease);}
.connect-hero__wire[data-on="1"] i{inline-size:100%;}

.connect-hero__server{display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:16px; background:var(--connect-glass); border:1px solid var(--connect-line);}
.connect-hero__flag{inline-size:26px; block-size:19px; border-radius:5px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2px 5px rgba(0,0,0,.4);}
.connect-hero__flag[data-flag="de"]{background:linear-gradient(180deg,#141414 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66% 100%);}
.connect-hero__flag[data-flag="nl"]{background:linear-gradient(180deg,#ae1c28 0 33.33%,#fff 33.33% 66.66%,#21468b 66.66% 100%);}
.connect-hero__flag[data-flag="fr"]{background:linear-gradient(90deg,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66% 100%);}
.connect-hero__server-info{display:flex; flex-direction:column; line-height:1.25; margin-inline-end:auto; min-inline-size:0;}
.connect-hero__server-info small{font-size:.68rem; color:var(--connect-ink-faint);}
.connect-hero__server-info b{font-size:.9rem; font-weight:600;}
.connect-hero__ping{font-family:var(--font-mono,monospace); font-size:.8rem; color:var(--connect-ink-dim); direction:ltr; unicode-bidi:isolate;}
.connect-hero__ping b{font-weight:600; color:var(--connect-ink);}
.connect-hero__change{border:1px solid var(--border-lume,rgba(39,100,231,.5)); background:transparent; color:var(--cyan,#2aabee); font:inherit; font-size:.76rem; font-weight:600; padding:.32rem .7rem; border-radius:999px; cursor:pointer; transition:background .3s ease,color .3s ease;}
.connect-hero__change:hover{background:rgba(42,171,238,.14);}
.connect-hero__change:focus-visible{outline:3px solid var(--cyan,#2aabee); outline-offset:2px;}

.connect-hero__stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin:0;}
.connect-hero__stat{display:flex; flex-direction:column; align-items:center; gap:.28rem; padding:.6rem .4rem; border-radius:14px; background:var(--connect-glass); border:1px solid var(--connect-line); text-align:center;}
.connect-hero__stat dt{font-size:.66rem; color:var(--connect-ink-faint); order:2;}
.connect-hero__stat dd{margin:0; order:1; font-size:.9rem; font-weight:600;}
.connect-hero__mono{font-family:var(--font-mono,monospace); font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;}
.connect-hero__stat dd[data-connect-ip]{color:var(--connect-ink-dim);}
.connect-hero__stat dd[data-connect-ip].is-secure{color:var(--green,#1fae74);}

.connect-hero__live{position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;}

.connect-hero--paused .connect-hero__blob,
.connect-hero--paused .connect-hero__pulse,
.connect-hero--paused .connect-hero__spinner,
.connect-hero--paused .connect-hero__dot{animation-play-state:paused !important;}

@keyframes connect-float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6%,-5%) scale(1.08);}}
@keyframes connect-pulse{0%{transform:translate(-50%,-50%) scale(.7); opacity:.5;}70%{opacity:0;}100%{transform:translate(-50%,-50%) scale(1.55); opacity:0;}}
@keyframes connect-spin{to{transform:rotate(360deg);}}
@keyframes connect-blink{0%,100%{opacity:1;}50%{opacity:.35;}}

@media (prefers-reduced-motion: reduce){
  .connect-hero__blob,.connect-hero__pulse,.connect-hero__dot{animation:none !important;}
  .connect-hero__spinner{animation-duration:1.4s;}
  .connect-hero__wire i{transition-duration:.15s;}
  .connect-hero__btn{transition:box-shadow .3s ease;}
  .connect-hero__btn:hover{transform:none;}
}

/* ---- netmap: Global network map ---- */
.netmap{padding-block:var(--s-8,4rem);color:var(--text,#16183a);font-family:var(--font-body,"Inter",Vazirmatn,system-ui,sans-serif)}
.netmap-inner{max-width:1120px;margin-inline:auto;padding-inline:var(--s-4,1.25rem)}

.netmap-head{max-width:46rem}
.netmap-eyerow{display:flex;align-items:center;gap:var(--s-3,.75rem);flex-wrap:wrap;margin-block-end:var(--s-3,.75rem)}
.netmap-eyebrow{display:inline-block;font-family:var(--font-display,"Space Grotesk",Vazirmatn,sans-serif);font-size:.82rem;font-weight:600;letter-spacing:.01em;padding:.34rem .7rem;border-radius:999px;color:var(--blue,#2764e7);background:var(--bg-raise,#f5f8ff);border:1px solid var(--border-lume,rgba(39,100,231,.38))}
.netmap-status{display:inline-flex;align-items:center;gap:.44rem;font-size:.8rem;font-weight:600;color:var(--green,#1fae74)}
.netmap-status-dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--green,#1fae74);box-shadow:0 0 0 0 rgba(31,174,116,.5)}
.netmap.netmap-run .netmap-status-dot{animation:netmap-livedot 2.4s ease-out infinite}
.netmap-title{font-family:var(--font-display,"Space Grotesk",Vazirmatn,sans-serif);font-weight:700;line-height:1.18;font-size:clamp(1.5rem,3.4vw,2.35rem);margin:0 0 var(--s-2,.5rem);color:var(--text,#16183a)}
.netmap-sub{margin:0;color:var(--text-dim,#565d76);font-size:clamp(.95rem,1.6vw,1.06rem);line-height:1.7;max-width:40rem}

.netmap-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4,1.25rem);flex-wrap:wrap;margin-block:var(--s-5,2rem) var(--s-4,1.25rem)}
.netmap-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.netmap-chip{display:inline-flex;align-items:center;gap:.44rem;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--text-dim,#565d76);background:var(--surface,#fff);border:1px solid var(--border,rgba(22,20,90,.10));padding:.5rem .95rem;border-radius:999px;cursor:pointer;transition:color .25s var(--ease,ease),background .25s var(--ease,ease),border-color .25s var(--ease,ease),box-shadow .25s var(--ease,ease),transform .18s var(--ease,ease)}
.netmap-chip:hover{color:var(--text,#16183a);border-color:var(--border-lume,rgba(39,100,231,.38));transform:translateY(-1px)}
.netmap-chip:focus-visible{outline:2px solid var(--blue,#2764e7);outline-offset:2px}
.netmap-chip.is-active{color:#fff;background:var(--grad-btn,linear-gradient(100deg,#2764e7,#4a43cb 55%,#7a41dc));border-color:transparent;box-shadow:var(--shadow-card,0 12px 34px rgba(39,100,231,.12))}
.netmap-chip-dot{inline-size:.55rem;block-size:.55rem;border-radius:50%;background:var(--nm,#2764e7)}
.netmap-chip.is-active .netmap-chip-dot{background:#fff}

.netmap-legend{display:flex;align-items:center;gap:var(--s-3,.75rem)}
.netmap-stat{display:flex;flex-direction:column;align-items:flex-start;text-align:start;line-height:1.1}
.netmap-num{font-family:var(--font-display,"Space Grotesk",Vazirmatn,sans-serif);font-weight:700;font-size:1.28rem;color:var(--text,#16183a);font-variant-numeric:tabular-nums;transition:color .4s ease}
.netmap-num.is-bump{color:var(--green,#1fae74)}
.netmap-lab{font-size:.76rem;color:var(--text-faint,#8b90a6);margin-block-start:.15rem}
.netmap-sep{inline-size:1px;block-size:2rem;background:var(--border,rgba(22,20,90,.10))}

.netmap-stage{position:relative;margin-block-start:var(--s-2,.5rem);padding:clamp(.6rem,2vw,1.4rem);border-radius:var(--radius-lg,24px);background:var(--bg-raise,#f5f8ff);border:1px solid var(--border,rgba(22,20,90,.10));box-shadow:var(--shadow-card,0 12px 34px rgba(39,100,231,.12));overflow:visible}
.netmap-map{display:block;inline-size:100%;block-size:auto;aspect-ratio:1000/520;direction:ltr}

.netmap-dot{fill:rgba(39,100,231,.18)}
.netmap-land-fill{fill:rgba(39,100,231,.05)}
.netmap-bg-glow{transform-box:fill-box;transform-origin:center;opacity:.7}
.netmap.netmap-run .netmap-bg-glow{animation:netmap-breathe 8s ease-in-out infinite}

.netmap-arc{transition:opacity .4s var(--ease,ease)}
.netmap-arc--dim{opacity:.05}
.netmap-arc-base{fill:none;stroke:url(#netmap-grad-arc);stroke-width:1.1;stroke-opacity:.28;stroke-linecap:round}
.netmap-flow{fill:none;stroke:url(#netmap-grad-arc);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 98;stroke-dashoffset:0;opacity:.92;will-change:stroke-dashoffset}
.netmap.netmap-run .netmap-flow{animation-name:netmap-comet;animation-timing-function:linear;animation-iteration-count:infinite}

.netmap-node{cursor:pointer}
.netmap-node:focus-visible{outline:none}
.netmap-pulse,.netmap-ring,.netmap-core{pointer-events:none}
.netmap-hit{fill:transparent}
.netmap-pulse{fill:var(--nm,#2764e7);opacity:0;transform-box:fill-box;transform-origin:center;will-change:transform,opacity}
.netmap.netmap-run .netmap-pulse{animation:netmap-pulse 3.4s var(--ease,ease-out) infinite}
.netmap-ring{fill:none;stroke:var(--nm,#2764e7);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .22s var(--ease,ease),transform .22s var(--ease,ease)}
.netmap-core{fill:var(--nm,#2764e7);stroke:#fff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease,ease);filter:drop-shadow(0 2px 5px rgba(39,100,231,.35))}

.netmap-node[data-region="eu"]{--nm:#2764e7}
.netmap-node[data-region="as"]{--nm:#7a41dc}
.netmap-node[data-region="am"]{--nm:#2aabee}

.netmap-node--hub .netmap-ring{opacity:.5}
.netmap-node--hub .netmap-core{filter:drop-shadow(0 0 8px rgba(122,65,220,.55))}

.netmap-node:hover .netmap-ring,.netmap-node:focus-visible .netmap-ring{opacity:1;transform:scale(1.08)}
.netmap-node:hover .netmap-core,.netmap-node:focus-visible .netmap-core{transform:scale(1.28)}
.netmap-node:focus-visible .netmap-ring{stroke-width:2.2}

.netmap[data-filter="eu"] .netmap-node:not([data-region="eu"]),
.netmap[data-filter="as"] .netmap-node:not([data-region="as"]),
.netmap[data-filter="am"] .netmap-node:not([data-region="am"]){opacity:.14;filter:saturate(.35)}
.netmap[data-filter="eu"] .netmap-node[data-region="eu"] .netmap-ring,
.netmap[data-filter="as"] .netmap-node[data-region="as"] .netmap-ring,
.netmap[data-filter="am"] .netmap-node[data-region="am"] .netmap-ring{opacity:.6}
.netmap-node{transition:opacity .4s var(--ease,ease),filter .4s var(--ease,ease)}

.netmap-tip{position:absolute;top:0;left:0;transform:translate(-50%,calc(-100% - 14px));background:var(--surface,#fff);border:1px solid var(--border-lume,rgba(39,100,231,.38));box-shadow:var(--shadow-card,0 12px 34px rgba(39,100,231,.12));border-radius:12px;padding:.5rem .72rem;pointer-events:none;opacity:0;transition:opacity .16s var(--ease,ease);white-space:nowrap;z-index:6;text-align:start;font-family:var(--font-body,"Inter",Vazirmatn,sans-serif)}
.netmap-tip.is-on{opacity:1}
.netmap-tip-name{display:block;font-family:var(--font-display,"Space Grotesk",Vazirmatn,sans-serif);font-weight:700;font-size:.92rem;color:var(--text,#16183a)}
.netmap-tip-meta{display:flex;align-items:center;gap:.36rem;margin-block-start:.16rem}
.netmap-tip-dot{inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--nm,#2764e7)}
.netmap-tip-ping{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:.8rem;color:var(--text-dim,#565d76);font-variant-numeric:tabular-nums}
.netmap-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--surface,#fff)}
.netmap-tip.is-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--surface,#fff)}

@keyframes netmap-pulse{0%{transform:scale(.55);opacity:.5}70%{opacity:0}100%{transform:scale(2.7);opacity:0}}
@keyframes netmap-comet{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes netmap-breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:.95;transform:scale(1.05)}}
@keyframes netmap-livedot{0%{box-shadow:0 0 0 0 rgba(31,174,116,.5)}70%{box-shadow:0 0 0 7px rgba(31,174,116,0)}100%{box-shadow:0 0 0 0 rgba(31,174,116,0)}}

@media (max-width:640px){
  .netmap-toolbar{align-items:flex-start}
  .netmap-legend{inline-size:100%;justify-content:space-between}
  .netmap-num{font-size:1.1rem}
}

@media (prefers-reduced-motion: reduce){
  .netmap-pulse{display:none}
  .netmap-flow{display:none}
  .netmap-bg-glow,.netmap-status-dot{animation:none!important}
}

/* ---- pricing: Interactive Pricing Configurator ---- */
.pr-section{position:relative;overflow:hidden;padding-block:var(--s-8,6rem);color:var(--text,#16183a);font-family:var(--font-body,inherit)}
.pr-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.pr-bg::before,.pr-bg::after{content:"";position:absolute;width:38rem;height:38rem;border-radius:50%;filter:blur(90px);opacity:.55}
.pr-bg::before{inset-inline-start:-12rem;inset-block-start:-8rem;background:radial-gradient(circle,rgba(39,100,231,.18),transparent 70%)}
.pr-bg::after{inset-inline-end:-14rem;inset-block-end:-10rem;background:radial-gradient(circle,rgba(122,65,220,.16),transparent 70%)}
.pr-inner{position:relative;z-index:1;max-width:72rem;margin-inline:auto;padding-inline:var(--s-4,1.5rem)}
.pr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pr-head{text-align:center;margin-block-end:var(--s-5,2.5rem)}
.pr-eyebrow{display:inline-block;font-family:var(--font-mono,monospace);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue,#2764e7);background:var(--bg-raise,#f5f8ff);border:1px solid var(--border-lume,rgba(39,100,231,.38));border-radius:99px;padding:.4em 1em;margin-block-end:var(--s-3,1rem)}
.pr-title{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.15;margin:0}
.pr-title-grad{background:var(--grad-accent,linear-gradient(100deg,#2764e7,#4a43cb 55%,#7a41dc));-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-sub{color:var(--text-dim,#565d76);max-width:34rem;margin:var(--s-2,.5rem) auto 0;font-size:1.02rem;line-height:1.7}

.pr-duration-row{display:flex;flex-direction:column;align-items:center;gap:var(--s-2,.5rem);margin-block:var(--s-5,2.5rem) var(--s-6,4rem)}
.pr-duration{position:relative;display:flex;background:var(--bg-raise,#f5f8ff);border:1px solid var(--border,rgba(22,20,90,.10));border-radius:99px;padding:5px;width:min(24rem,100%);box-shadow:inset 0 1px 2px rgba(22,20,90,.04)}
.pr-seg-ind{position:absolute;z-index:0;inset-block:5px;inset-inline-start:calc(5px + var(--pr-seg-i,1) * ((100% - 10px)/3));width:calc((100% - 10px)/3);border-radius:99px;background:var(--grad-btn,var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc)));box-shadow:0 6px 16px rgba(39,100,231,.32);transition:inset-inline-start .45s var(--ease,cubic-bezier(.22,.61,.36,1))}
.pr-seg-btn{position:relative;z-index:1;flex:1 1 0;min-width:0;border:0;background:transparent;cursor:pointer;padding:.72em .5em;font:inherit;font-weight:600;font-size:.95rem;color:var(--text-dim,#565d76);border-radius:99px;transition:color .3s var(--ease,ease)}
.pr-seg-btn[aria-checked="true"]{color:#fff}
.pr-seg-btn:focus-visible{outline:2px solid var(--blue,#2764e7);outline-offset:3px}
.pr-dur-hint{display:inline-flex;align-items:center;gap:.4em;font-size:.86rem;color:var(--green,#1fae74);font-weight:600}
.pr-dur-hint svg{width:1.05em;height:1.05em}

.pr-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-5,2.5rem);align-items:start}

.pr-slider-card{background:var(--surface,#fff);border:1px solid var(--border,rgba(22,20,90,.10));border-radius:var(--radius-lg,24px);box-shadow:var(--shadow-card,0 12px 34px rgba(39,100,231,.12));padding:var(--s-5,2rem)}
.pr-slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2,.5rem);margin-block-end:var(--s-4,1.5rem)}
.pr-vol-label{font-weight:600;color:var(--text-dim,#565d76);font-size:.95rem}
.pr-vol-value{display:inline-flex;align-items:baseline;gap:.35em}
.pr-vol-num{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.2rem);line-height:1;background:var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc));-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-vol-unit{color:var(--text-dim,#565d76);font-weight:600;font-size:.95rem}

.pr-slider-wrap{position:relative;padding-block:.6rem}
.pr-track{position:relative;height:10px;margin-inline:13px;border-radius:99px;background:rgba(39,100,231,.12)}
.pr-track-fill{position:absolute;inset-block:0;inset-inline-start:0;width:var(--pr-pct,40%);border-radius:99px;background:var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc));transition:width .35s var(--ease,cubic-bezier(.22,.61,.36,1))}
.pr-thumb{position:absolute;inset-block:0;margin-block:auto;inset-inline-end:0;margin-inline-end:calc(var(--pr-thumb,26px) / -2);width:var(--pr-thumb,26px);height:var(--pr-thumb,26px);border-radius:50%;background:#fff;border:3px solid var(--blue,#2764e7);box-shadow:0 4px 12px rgba(39,100,231,.4);transition:box-shadow .25s var(--ease,ease),transform .2s var(--ease,ease)}
.pr-thumb::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-radius:50%;background:var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc))}
.pr-thumb.is-focus{box-shadow:0 0 0 6px rgba(39,100,231,.18),0 4px 12px rgba(39,100,231,.4)}
.pr-slider-wrap:hover .pr-thumb{transform:scale(1.08)}
.pr-range{position:absolute;inset-block:0;inset-inline:13px;width:auto;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:100%}
.pr-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:transparent;border:0}
.pr-range::-moz-range-thumb{width:26px;height:26px;border:0;background:transparent}
.pr-range:focus{outline:none}
.pr-range::-moz-focus-outer{border:0}

.pr-ticks{display:flex;justify-content:space-between;margin-block-start:var(--s-3,1rem);gap:.25rem}
.pr-tick{border:0;background:transparent;cursor:pointer;font:inherit;font-size:.82rem;color:var(--text-faint,#8b90a6);font-weight:600;padding:.2em .3em;border-radius:8px;transition:color .25s var(--ease,ease),transform .25s var(--ease,ease)}
.pr-tick.is-active{color:var(--blue,#2764e7);transform:translateY(-1px)}
.pr-tick:first-child{text-align:start}
.pr-tick:last-child{text-align:end}

.pr-presets-title{text-align:center;color:var(--text-dim,#565d76);font-size:.92rem;margin-block:var(--s-4,1.5rem) var(--s-3,1rem)}
.pr-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3,1rem)}
.pr-preset{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;text-align:start;background:var(--surface,#fff);border:1.5px solid var(--border,rgba(22,20,90,.10));border-radius:var(--radius,16px);padding:var(--s-4,1.5rem) var(--s-3,1rem);cursor:pointer;font:inherit;transition:transform .25s var(--ease,ease),border-color .25s var(--ease,ease),box-shadow .25s var(--ease,ease)}
.pr-preset:hover{transform:translateY(-3px);box-shadow:var(--shadow-card,0 12px 34px rgba(39,100,231,.12));border-color:var(--border-lume,rgba(39,100,231,.38))}
.pr-preset:focus-visible{outline:2px solid var(--blue,#2764e7);outline-offset:3px}
.pr-preset.is-active{border-color:var(--blue,#2764e7);box-shadow:0 0 0 3px rgba(39,100,231,.14),var(--shadow-card,0 12px 34px rgba(39,100,231,.12))}
.pr-preset--pop{border-color:var(--border-lume,rgba(39,100,231,.38))}
.pr-preset-ic{width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:11px;background:var(--bg-raise,#f5f8ff);color:var(--blue,#2764e7)}
.pr-preset-ic svg{width:1.15rem;height:1.15rem}
.pr-preset-name{font-weight:700;font-size:1rem}
.pr-preset-vol{font-family:var(--font-display,inherit);font-weight:700;font-size:1.15rem;color:var(--text,#16183a)}
.pr-preset-vol b{color:var(--blue,#2764e7)}
.pr-preset-desc{color:var(--text-faint,#8b90a6);font-size:.82rem;line-height:1.5}
.pr-preset-price{font-size:.82rem;color:var(--text-dim,#565d76);margin-block-start:auto;padding-block-start:.3rem}
.pr-preset-price b{color:var(--text,#16183a);font-size:.94rem}
.pr-ribbon{position:absolute;inset-block-start:0;inset-inline-end:var(--s-3,1rem);transform:translateY(-50%);background:var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc));color:#fff;font-size:.7rem;font-weight:700;padding:.32em .8em;border-radius:99px;box-shadow:0 4px 10px rgba(39,100,231,.3)}

.pr-summary{position:relative;background:var(--surface,#fff);border:1px solid var(--border-lume,rgba(39,100,231,.38));border-radius:var(--radius-lg,24px);box-shadow:var(--shadow-card,0 12px 34px rgba(39,100,231,.12));padding:var(--s-5,2rem);overflow:hidden}
.pr-sum-glow{position:absolute;inset-inline:0;inset-block-start:0;height:5px;background:var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc))}
.pr-sum-head{display:flex;flex-direction:column;gap:.3rem;margin-block-end:var(--s-3,1rem)}
.pr-sum-plan-label{font-size:.85rem;color:var(--text-faint,#8b90a6);font-weight:600}
.pr-sum-plan{font-family:var(--font-display,inherit);font-weight:700;font-size:1.15rem;color:var(--text,#16183a);display:flex;align-items:center;gap:.4em;flex-wrap:wrap}
.pr-plan-num{color:var(--blue,#2764e7)}
.pr-plan-sep{color:var(--text-faint,#8b90a6)}
.pr-price{padding-block:var(--s-3,1rem);border-block-end:1px solid var(--border,rgba(22,20,90,.10));margin-block-end:var(--s-3,1rem)}
.pr-price-full{display:inline-block;color:var(--text-faint,#8b90a6);text-decoration:line-through;font-size:.9rem;margin-block-end:.25rem}
.pr-price-main{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
.pr-price-num{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(2rem,5vw,2.8rem);line-height:1;color:var(--text,#16183a);font-variant-numeric:tabular-nums}
.pr-price-cur{font-weight:600;color:var(--text-dim,#565d76);font-size:1rem}
.pr-save-badge{display:inline-flex;align-items:center;gap:.25em;background:rgba(31,174,116,.12);color:var(--green,#1fae74);font-weight:700;font-size:.78rem;padding:.32em .7em;border-radius:99px;margin-inline-start:auto}
.pr-price-per{color:var(--text-dim,#565d76);font-size:.9rem;margin-block-start:.55rem;display:flex;gap:.35em;align-items:baseline;flex-wrap:wrap}
.pr-price-per b{color:var(--text,#16183a);font-family:var(--font-display,inherit)}

.pr-features{list-style:none;margin:0 0 var(--s-4,1.5rem);padding:0;display:grid;gap:.65rem}
.pr-features li{display:flex;align-items:flex-start;gap:.55em;font-size:.92rem;color:var(--text,#16183a);line-height:1.5}
.pr-feat-ic{flex:0 0 auto;width:1.3rem;height:1.3rem;display:grid;place-items:center;border-radius:50%;background:rgba(31,174,116,.12);color:var(--green,#1fae74);margin-block-start:.05rem}
.pr-feat-ic svg{width:.8rem;height:.8rem}

.pr-cta{display:grid;gap:.6rem}
.pr-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.92em 1.2em;border-radius:var(--radius,16px);font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease,ease),box-shadow .2s var(--ease,ease),filter .2s var(--ease,ease)}
.pr-btn svg{width:1.15em;height:1.15em}
.pr-btn:hover{transform:translateY(-2px)}
.pr-btn:focus-visible{outline:2px solid var(--blue,#2764e7);outline-offset:3px}
.pr-btn-site{background:var(--grad-btn,var(--grad-accent,linear-gradient(100deg,#2764e7,#7a41dc)));color:#fff;box-shadow:0 8px 20px rgba(39,100,231,.28)}
.pr-btn-site:hover{box-shadow:0 12px 26px rgba(39,100,231,.36)}
.pr-btn-tg{background:#229ed9;color:#fff;box-shadow:0 8px 20px rgba(34,158,217,.28)}
.pr-btn-tg:hover{box-shadow:0 12px 26px rgba(34,158,217,.36)}
.pr-note{display:flex;align-items:center;justify-content:center;gap:.45em;color:var(--text-faint,#8b90a6);font-size:.82rem;margin:var(--s-3,1rem) 0 0}
.pr-note svg{width:.95em;height:.95em}

.pr-head,.pr-duration-row,.pr-config,.pr-summary{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease,ease),transform .6s var(--ease,ease)}
.pr-in .pr-head{transition-delay:.02s}
.pr-in .pr-duration-row{transition-delay:.1s}
.pr-in .pr-config{transition-delay:.18s}
.pr-in .pr-summary{transition-delay:.26s}
.pr-in .pr-head,.pr-in .pr-duration-row,.pr-in .pr-config,.pr-in .pr-summary{opacity:1;transform:none}

@media(min-width:861px){.pr-summary{position:sticky;top:96px}}
@media(max-width:860px){.pr-grid{grid-template-columns:1fr}}
@media(max-width:520px){.pr-presets{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .pr-head,.pr-duration-row,.pr-config,.pr-summary{opacity:1;transform:none;transition:none}
  .pr-seg-ind,.pr-track-fill,.pr-thumb,.pr-preset,.pr-btn,.pr-tick{transition:none}
}

/* ---- trust-band: Trust / social-proof band (marquee + status pill + live counter) ---- */
.tb-sr{
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#trust-band{
  background:
    radial-gradient(120% 150% at 50% -30%, rgba(39,100,231,.07), transparent 62%),
    var(--bg-raise);
  border-block: 1px solid var(--border);
  padding-block: clamp(1.5rem, 3.6vw, 2.6rem);
  overflow: clip;
}

.tb-inner{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  gap: var(--s-4);
}

/* ---- top row: status + live counter ---- */
.tb-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.tb-status{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .42rem;
  padding-inline: .9rem;
  border-radius: 999px;
  background: rgba(31,174,116,.10);
  border: 1px solid rgba(31,174,116,.30);
  color: #0c6b45;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
}

.tb-dot{
  position: relative;
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}
.tb-dot::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: tb-pulse 2.4s var(--ease) infinite;
}
@keyframes tb-pulse{
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}

.tb-live{ margin: 0; display: inline-flex; align-items: center; }
.tb-live-visual{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}
.tb-live-ico{ inline-size: 1rem; block-size: 1rem; color: var(--blue); flex: 0 0 auto; }
.tb-live-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-inline-size: 5.6ch;
  text-align: center;
  color: var(--blue);
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- marquee row ---- */
.tb-marquee-row{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--s-4);
}

.tb-marquee-label{
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
}

.tb-toggle{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tb-toggle:hover{ color: var(--blue); border-color: var(--border-lume); background: var(--bg-raise); }
.tb-toggle:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
.tb-toggle .tb-ico{ inline-size: 1rem; block-size: 1rem; }
.tb-ico--play{ display: none; }
.tb-toggle[aria-pressed="true"] .tb-ico--pause{ display: none; }
.tb-toggle[aria-pressed="true"] .tb-ico--play{ display: block; }
.tb-toggle-lbl--play{ display: none; }
.tb-toggle[aria-pressed="true"] .tb-toggle-lbl--pause{ display: none; }
.tb-toggle[aria-pressed="true"] .tb-toggle-lbl--play{ display: inline; }

.tb-marquee{
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.tb-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  inline-size: max-content;
  direction: ltr;
  animation: tb-scroll 34s linear infinite;
  will-change: transform;
}
@keyframes tb-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* RTL: reverse motion so it flows in the natural reading direction */
[dir="rtl"] .tb-track{ animation-direction: reverse; }

.tb-marquee:hover .tb-track,
.tb-marquee:focus-within .tb-track{ animation-play-state: paused; }
#trust-band.tb-off .tb-track{ animation-play-state: paused; }
.tb-marquee.tb-user-paused .tb-track{ animation-play-state: paused; }

.tb-brand{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-inline-end: clamp(2rem, 4.5vw, 3.75rem);
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tb-brand:hover{ color: var(--blue); }
.tb-brand-ico{ inline-size: 1.15rem; block-size: 1.15rem; flex: 0 0 auto; }
.tb-brand-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.tb-brand-name b{ font-weight: 700; color: var(--text-dim); transition: color var(--dur) var(--ease); }
.tb-brand:hover .tb-brand-name b{ color: var(--violet); }

@media (max-width: 720px){
  .tb-marquee-row{ flex-wrap: wrap; }
  .tb-marquee-label{ order: 1; }
  .tb-toggle{ order: 2; margin-inline-start: auto; }
  .tb-marquee{ order: 3; flex-basis: 100%; }
}
@media (max-width: 460px){
  .tb-status, .tb-live-visual{ font-size: .8rem; }
  .tb-live-num{ font-size: 1rem; }
  .tb-brand-name{ font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce){
  .tb-track{
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
  }
  .tb-track > .tb-brand[aria-hidden="true"]{ display: none; }
  .tb-brand{ margin-inline-end: 0; }
  .tb-dot::after{ animation: none !important; }
  .tb-toggle{ display: none; }
}

/* ---- testimonials: Testimonials carousel ---- */
.tst-section{ position:relative; }
.tst-section .tst-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.tst-section::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(39,100,231,.07), transparent 72%);
}
.tst-inner{
  position:relative; z-index:1;
  max-inline-size: 60rem; margin-inline:auto;
  padding-inline: var(--s-4);
}

/* ---- header ---- */
.tst-head{ text-align:center; margin-block-end: var(--s-6); }
.tst-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-size:.8rem; font-weight:600; letter-spacing:.01em;
  padding:.4rem .9rem; border-radius:999px;
  background: var(--bg-raise); border:1px solid var(--border-lume); color: var(--blue);
}
.tst-eyebrow::before{
  content:""; inline-size:.5rem; block-size:.5rem; border-radius:50%;
  background: var(--grad-accent);
}
.tst-title{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.55rem, 4.2vw, 2.4rem); line-height:1.3; color: var(--text);
  margin: var(--s-3) 0 0;
}
.tst-sub{
  color: var(--text-dim); max-inline-size: 46ch; margin: var(--s-3) auto 0;
  line-height:1.95; font-size: clamp(.95rem, 2vw, 1.05rem);
}

/* ---- carousel shell ---- */
.tst-carousel{ position:relative; }
.tst-viewport{
  position:relative; overflow:hidden;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-block-size: 20rem;
  touch-action: pan-y;
  cursor: grab;
}
.tst-viewport:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.tst-carousel.is-dragging .tst-viewport{ cursor: grabbing; }
.tst-carousel.is-dragging .tst-slide{ user-select:none; }

/* ---- slides ---- */
.tst-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(1.5rem, 4vw, 3rem);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.tst-slide--active{ opacity:1; pointer-events:auto; }

.tst-quote-mark{
  position:absolute; inset-block-start:.35rem; inset-inline-start:1.25rem; z-index:0;
  font-family: var(--font-display); font-weight:700; line-height:1;
  font-size: clamp(4rem, 11vw, 6.5rem);
  background: var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.13; user-select:none;
}
.tst-stars{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.22rem; margin-block-end: var(--s-3); }
.tst-star{ inline-size:19px; block-size:19px; fill:url(#tst-grad); }
.tst-quote{
  position:relative; z-index:1; margin:0 0 var(--s-5);
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.12rem, 2.6vw, 1.55rem); line-height:1.95; color: var(--text);
}
.tst-person{ position:relative; z-index:1; display:flex; align-items:center; gap: var(--s-3); }
.tst-avatar{
  inline-size:52px; block-size:52px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; color:#fff;
  font-family: var(--font-display); font-weight:700; font-size:1.25rem;
  box-shadow: 0 6px 16px rgba(39,100,231,.26);
}
.tst-av-1{ background:linear-gradient(135deg,#2764e7,#7a41dc); }
.tst-av-2{ background:linear-gradient(135deg,#2aabee,#2764e7); }
.tst-av-3{ background:linear-gradient(135deg,#7a41dc,#2764e7); }
.tst-av-4{ background:linear-gradient(135deg,#1fae74,#2aabee); }
.tst-av-5{ background:linear-gradient(135deg,#2764e7,#2aabee); }
.tst-meta{ display:flex; flex-direction:column; gap:.15rem; min-inline-size:0; }
.tst-name{ font-weight:700; color: var(--text); font-size:1rem; }
.tst-city{ color: var(--text-faint); font-size:.85rem; }

/* ---- floating play/pause ---- */
.tst-play{
  position:absolute; z-index:3; inset-block-start:.85rem; inset-inline-end:.85rem;
  inline-size:36px; block-size:36px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--bg-raise); border:1px solid var(--border); color: var(--blue);
  cursor:pointer; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
}
.tst-play:hover{ background:#fff; border-color: var(--border-lume); box-shadow:0 4px 14px rgba(39,100,231,.16); }
.tst-play:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.tst-play svg{ inline-size:15px; block-size:15px; fill:currentColor; }
.tst-ic--play{ display:none; margin-inline-start:2px; }
.tst-carousel.is-paused .tst-ic--pause{ display:none; }
.tst-carousel.is-paused .tst-ic--play{ display:block; }
.tst-sr--play{ display:none; }
.tst-carousel.is-paused .tst-sr--pause{ display:none; }
.tst-carousel.is-paused .tst-sr--play{ display:inline; }

/* ---- progress bar ---- */
.tst-progress{
  position:absolute; z-index:2; inset-inline:0; inset-block-end:0; block-size:3px;
  background: rgba(39,100,231,.08); overflow:hidden;
}
.tst-progress-fill{
  display:block; block-size:100%; inline-size:100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--grad-accent);
}
[dir="rtl"] .tst-progress-fill{ transform-origin: right center; }
.tst-carousel.is-autoplaying .tst-progress-fill{
  animation: tst-fill var(--tst-int, 6000ms) linear forwards;
}
@keyframes tst-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---- controls ---- */
.tst-controls{
  display:flex; align-items:center; justify-content:center; gap: var(--s-4);
  margin-block-start: var(--s-5);
}
.tst-arrow{
  inline-size:48px; block-size:48px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  cursor:pointer; box-shadow:0 4px 14px rgba(39,100,231,.10);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, color .25s;
}
.tst-arrow:hover{ color: var(--blue); border-color: var(--border-lume); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.tst-arrow:active{ transform: translateY(0); }
.tst-arrow:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.tst-chev{ inline-size:22px; block-size:22px; }
.tst-arrow--next .tst-chev{ transform: scaleX(-1); }
[dir="rtl"] .tst-arrow--prev .tst-chev{ transform: scaleX(-1); }
[dir="rtl"] .tst-arrow--next .tst-chev{ transform: none; }

.tst-dots{ display:inline-flex; align-items:center; gap:.5rem; }
.tst-dot{
  inline-size:9px; block-size:9px; padding:0; border:0; border-radius:999px;
  background: var(--border); cursor:pointer;
  transition: inline-size .3s var(--ease), background .3s var(--ease);
}
.tst-dot:hover{ background: var(--text-faint); }
.tst-dot.is-active{ inline-size:26px; background: var(--grad-accent); }
.tst-dot:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ---- a11y helper ---- */
.tst-sr{
  position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (max-width: 560px){
  .tst-controls{ gap: var(--s-3); }
  .tst-arrow{ inline-size:44px; block-size:44px; }
  .tst-avatar{ inline-size:46px; block-size:46px; font-size:1.1rem; }
}

@media (prefers-reduced-motion: reduce){
  .tst-slide{ transition:none !important; }
  .tst-arrow, .tst-dot, .tst-play{ transition:none !important; }
  .tst-progress-fill{ animation:none !important; }
  .tst-progress, .tst-play{ display:none; }
}

/* ============================================================
   mpx: Global motion polish for PaytakhtVPN (light homepage)
   (a) drifting gradient-mesh background  (b) scroll-progress bar
   (c) springy, staggered scroll-reveal choreography
   Self-contained. All selectors/ids prefixed .mpx-* / #mpx-*.
   RTL-native via logical properties. Honors reduced motion.
   ============================================================ */

/* Springy easing used by the reveal choreography (mild, tasteful overshoot) */
:root { --mpx-spring: cubic-bezier(.34, 1.25, .5, 1); }

/* ---------- (a) Gradient-mesh background ----------
   Fixed, aria-hidden, injected by JS as the first body child. Uses the
   same z-index (0) the page already reserves for its ambient layer, so
   positioned sections (position:relative) paint above it, while the
   frosted navbar (z-index:100) shows the soft mesh blurred behind it. */
#mpx-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
#mpx-mesh .mpx-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .6;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: mpx-drift 34s var(--ease, cubic-bezier(.22,.61,.36,1)) infinite alternate;
}
#mpx-mesh .mpx-blob--1 {
  inset-block-start: -12%; inset-inline-end: -6%;
  width: 46vw; height: 46vw;
  background: radial-gradient(circle at 50% 50%, rgba(39,100,231,.17), transparent 62%);
}
#mpx-mesh .mpx-blob--2 {
  inset-block-start: 24%; inset-inline-start: -14%;
  width: 42vw; height: 42vw;
  background: radial-gradient(circle at 50% 50%, rgba(122,65,220,.15), transparent 62%);
  animation-duration: 40s; animation-delay: -8s;
}
#mpx-mesh .mpx-blob--3 {
  inset-block-end: -18%; inset-inline-start: 32%;
  width: 40vw; height: 40vw;
  background: radial-gradient(circle at 50% 50%, rgba(42,171,238,.14), transparent 62%);
  animation-duration: 30s; animation-delay: -16s;
}
#mpx-mesh .mpx-blob--4 {
  inset-block-end: 4%; inset-inline-end: 10%;
  width: 30vw; height: 30vw;
  background: radial-gradient(circle at 50% 50%, rgba(74,67,203,.11), transparent 62%);
  animation-duration: 44s; animation-delay: -22s;
}
@keyframes mpx-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, -3vh, 0) scale(1.08); }
  100% { transform: translate3d(-3vw, 4vh, 0) scale(1.04); }
}
/* Battery: JS pauses the drift while the tab is hidden */
#mpx-mesh[data-mpx-paused] .mpx-blob { animation-play-state: paused; }

/* ---------- (b) Scroll-progress bar ----------
   Above the navbar (100), below the skip-link (200). Grows from the
   inline-start edge via scaleX so it reads correctly in RTL and LTR. */
#mpx-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 150;
  pointer-events: none;
}
.mpx-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--mpx-p, 0));
  background: var(--grad-accent, linear-gradient(100deg, #2764e7, #4a43cb 55%, #7a41dc));
  box-shadow: 0 0 10px rgba(39, 100, 231, .45);
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
}
[dir="rtl"] .mpx-progress__bar { transform-origin: right center; }

/* ---------- (c) Reveal choreography ----------
   Activated only when JS confirms support + motion is allowed
   (html.mpx-choreo). Reuses the existing .reveal / .is-visible toggle
   from main.js; nothing here re-observes or overrides that observer. */

/* Grid cards: each .reveal card slides in as an atomic unit, staggered
   by its column (--mpx-i is reset per row in JS so later rows don't lag). */
html.mpx-choreo .reveal {
  transform: translateY(28px) scale(.985);
  transition:
    opacity .72s var(--mpx-spring),
    transform .72s var(--mpx-spring);
  transition-delay: calc(var(--mpx-i, 0) * 80ms);
}
html.mpx-choreo .reveal.is-visible {
  transform: none;
}

/* Standalone blocks (section head, stats, CTA...): the container itself
   settles instantly and its children cascade for a richer entrance. */
html.mpx-choreo .reveal[data-mpx-group] {
  opacity: 1;
  transform: none;
  transition: none;
}
html.mpx-choreo .reveal[data-mpx-group] > * {
  opacity: 0;
  transform: translateY(20px) scale(.99);
  transition:
    opacity .66s var(--mpx-spring),
    transform .66s var(--mpx-spring);
  transition-delay: calc(var(--mpx-child, 0) * 85ms);
}
html.mpx-choreo .reveal[data-mpx-group].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion: no drift, no spring, no churn ---------- */
@media (prefers-reduced-motion: reduce) {
  #mpx-mesh .mpx-blob { animation: none; }
  .mpx-progress__bar { box-shadow: none; }
  html.mpx-choreo .reveal,
  html.mpx-choreo .reveal[data-mpx-group],
  html.mpx-choreo .reveal[data-mpx-group] > * {
    transition: none;
    transform: none;
    opacity: 1;
  }
}