/* VPNKibi website — design handoff "VPNKibi Landing v2" (light default + dark theme), en/ru in Onest + Unbounded,
   fa in Estedad (the PIXI KINGDOM Persian font). Logical properties throughout so the fa pages mirror. */

/* ---------- fonts (self-hosted: Google Fonts is unreliable from Iran and Russia) ---------- */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-cyrillic.68e5e01d62.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-latin-ext.14e7d3079b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20BC, U+20BE-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-latin.052df74533.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/unbounded-cyrillic.e30bf6a606.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/unbounded-latin-ext.845e1c9fe2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20BC, U+20BE-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/unbounded-latin.22f9b928aa.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/onest-rub.9d3e9f02bc.woff2") format('woff2'); unicode-range: U+20BD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/unbounded-rub.ebb6ebb0c3.woff2") format('woff2'); unicode-range: U+20BD; }
/* The word «فارسی» in the language chips of en/ru pages: a 6 KB subset instead of the whole Persian font. */
@font-face { font-family: 'Estedad Label'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/estedad-label.5b62339ed0.woff2") format('woff2'); }
@font-face { font-family: 'Estedad'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/estedad-vf.b40ce2504e.woff2") format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --bg: #FFFFFF; --bg2: #F5FAFE; --surface: #FFFFFF; --tint: #EAF5FD; --hover: #EEF6FC;
  --ink: #111A27; --ink2: #2B3546; --muted: #566174; --muted2: #4A5A6E; --muted3: #6A7587; --deep: #0A73B8;
  --line: #E1ECF5; --line2: #E6EFF6; --line3: #EDF3F8; --line4: #D5E6F3; --line5: #CDE6F7;
  --header: rgba(255, 255, 255, .88); --navy: #0D1B2E; --glow: .42;
  --marker: linear-gradient(180deg, rgba(125, 198, 245, 0) 56%, #7DC6F5 56%, #7DC6F5 94%, rgba(125, 198, 245, 0) 94%);
  --marker-ink: inherit;
  --blue: #7DC6F5; --blue-hover: #6ABCF2; --blue-navy-hover: #93D0F7; --ink-on-blue: #0B1626;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --track-h1: -0.04em; --track-h2: -0.03em; --track-h3: -0.02em; --track-num: -0.05em;
  --lh-h1: 1.06; --lh-h2: 1.12;
  --gutter: clamp(20px, 4vw, 40px);
  color-scheme: light;
}
[data-theme='dark'] {
  --bg: #070E18; --bg2: #0B1522; --surface: #0F1C2C; --tint: #13273D; --hover: #13253A;
  --ink: #EEF4FA; --ink2: #C9D6E3; --muted: #9DAEC1; --muted2: #A9BACB; --muted3: #8193A8; --deep: #7DC6F5;
  --line: #1C2C40; --line2: #16253A; --line3: #1A2A3E; --line4: #27405A; --line5: #21405E;
  --header: rgba(7, 14, 24, .82); --navy: #0F2036; --glow: .24;
  --marker: none; --marker-ink: #7DC6F5;
  color-scheme: dark;
}
/* Persian: Estedad for everything; Arabic script must never be letter-spaced, and needs more line height. */
[lang^='fa'] {
  --font-body: 'Estedad', Tahoma, system-ui, sans-serif;
  --font-display: 'Estedad', Tahoma, system-ui, sans-serif;
  --track-h1: 0; --track-h2: 0; --track-h3: 0; --track-num: 0;
  --lh-h1: 1.35; --lh-h2: 1.4;
  font-variant-numeric: proportional-nums;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); transition: background-color .3s; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.5; }
img { max-width: 100%; }
a { color: var(--deep); text-decoration: none; }
a:hover { color: #075A91; }
[data-theme='dark'] a:hover { color: #A6D8F8; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.page { min-height: 100vh; overflow-x: clip; }
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.on-dark { display: none !important; }
[data-theme='dark'] .on-light { display: none !important; }
[data-theme='dark'] .on-dark { display: block !important; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: var(--ink-on-blue); font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--ink-on-blue); }
section[id] { scroll-margin-top: 72px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; transition: transform .2s, background-color .2s, border-color .2s; text-align: center; }
.btn-lg { min-height: 56px; padding: 14px 24px; font-size: 16px; }
.btn-lg.btn-icon { padding-inline-start: 14px; }
.btn-sm { min-height: 48px; padding: 13px 22px; font-size: 15px; }
.btn-xs { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.btn img { flex-shrink: 0; }
.btn-primary { background: var(--blue); color: var(--ink-on-blue); }
.btn-primary:hover { background: var(--blue-hover); color: var(--ink-on-blue); }
.btn-primary.btn-lg { box-shadow: 0 16px 32px -14px rgba(10, 115, 184, .85); }
.header-actions .btn-primary.btn-sm { min-height: 44px; padding: 11px 20px; box-shadow: 0 10px 24px -12px rgba(10, 115, 184, .8); }
.btn-primary.on-navy-btn { box-shadow: 0 16px 32px -14px rgba(125, 198, 245, .7); }
.btn-primary.on-navy-btn:hover { background: var(--blue-navy-hover); }
.lift:hover { transform: translateY(-2px); }
.btn-secondary { background: var(--surface); border: 1.5px solid var(--line4); color: var(--ink); }
.btn-secondary:hover { border-color: var(--blue); color: var(--ink); }
.btn-white { background: #FFFFFF; color: var(--ink-on-blue); }
.btn-white:hover { background: #EAF5FD; color: var(--ink-on-blue); }
.btn-navy { background: var(--navy); color: #FFFFFF; }
.btn-navy:hover { background: #1A2C45; color: #FFFFFF; }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .3); color: #FFFFFF; }
.btn-ghost:hover { border-color: var(--blue); color: #FFFFFF; }
.btn-outline-soft { min-height: 48px; padding: 10px 18px; padding-inline-start: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.btn-outline-soft:hover { border-color: var(--blue); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.icon-btn { all: unset; box-sizing: border-box; cursor: pointer; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.icon-btn.round { border-radius: 999px; }
.icon-btn:hover { border-color: var(--blue); }
.icon-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.icon-btn img { width: 20px; height: 20px; }

/* ---------- announcement ---------- */
.announce { background: var(--navy); color: #DCE8F3; }
.announce-row { padding-block: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; font-size: 14px; line-height: 1.45; text-align: center; }
.announce-text { display: inline-flex; align-items: center; gap: 8px; }
.announce-text img { width: 18px; height: 18px; flex-shrink: 0; }
.announce strong { color: var(--blue); font-weight: 600; }
.announce a { padding-block: 6px; color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--blue); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line2); }
.header-row { min-height: 72px; padding-block: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: clamp(24px, 7vw, 30px); width: auto; display: block; }
.desk-nav { display: flex; align-items: center; gap: 2px; }
.desk-nav a { padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink2); }
.desk-nav a:hover { background: var(--hover); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-btn { flex-direction: column; gap: 5px; display: flex; align-items: center; justify-content: center; }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--line2); background: var(--surface); padding: 4px var(--gutter) 16px; display: flex; flex-direction: column; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 14px 0; font-size: 17px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line3); }
.mobile-menu a:last-child { border-bottom: 0; }
.mob-only { display: none; }

/* language picker (not in the design: same chip as the theme button's family) */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink2); user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { border-color: var(--blue); }
.lang summary img { width: 18px; height: 18px; }
[data-theme='dark'] .lang summary img, [data-theme='dark'] .icon-btn img.on-dark { filter: none; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 168px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(13, 27, 46, .35); z-index: 60; }
.lang li a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink2); }
.lang li a:hover { background: var(--hover); color: var(--ink); }
.lang li a[aria-current] { color: var(--deep); font-weight: 600; }
.lang li a[aria-current]::after { content: '✓'; float: inline-end; }

@media (max-width: 1023.98px) {
  .desk-nav, .desk-only { display: none; }
  .mob-only { display: inline-flex; }
  .header-actions { gap: 8px; }
  .header-actions .icon-btn.round { border-radius: 12px; }
  .lang summary { border-radius: 12px; width: 44px; padding: 0; justify-content: center; }
  .lang summary img { display: none; }
}
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }
@media (max-width: 379.98px) { .try-free { display: none; } }

/* ---------- section scaffolding ---------- */
.section > .container { padding-block: clamp(72px, 9vw, 120px); }
.section-tight > .container { padding-block: clamp(64px, 8vw, 104px); }
.band { background: var(--bg2); border-block: 1px solid var(--line2); }
.band-top { border-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.center-items { align-items: center; }
.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head.center { align-items: center; text-align: center; }
.section-head.narrow { max-width: 680px; }
.w640 { max-width: 640px; }
.w480 { max-width: 480px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep); }
[lang^='fa'] .eyebrow { letter-spacing: 0; font-size: 14px; text-transform: none; }
.eyebrow.on-navy { color: var(--blue); }
.eyebrow.on-blue { color: #0B3A5C; }
h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: var(--lh-h2); letter-spacing: var(--track-h2); text-wrap: balance; }
.lead { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.lead.on-navy { color: #B9C7D8; }
.tile { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; background: var(--tint); display: grid; place-items: center; }
.tile img { width: 32px; height: 32px; }
.tile.white { background: #FFFFFF; position: relative; }
.tile.bordered { background: var(--surface); border: 1px solid var(--line); }
.tile.white-surface { background: var(--surface); }
.tile.glass { position: relative; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.tile-48 { width: 48px; height: 48px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tile-48 img { width: 28px; height: 28px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 65% at 80% 50%, rgba(125, 198, 245, var(--glow)), rgba(125, 198, 245, 0) 70%), radial-gradient(35% 45% at 0% 0%, rgba(125, 198, 245, .2), rgba(125, 198, 245, 0) 70%); }
[dir='rtl'] .hero-glow { transform: scaleX(-1); }
.hero-row { position: relative; padding-block: clamp(36px, 5vw, 72px) clamp(40px, 6vw, 88px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 40px); }
.hero-text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.price-line { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 6px; font-size: 20px; font-weight: 500; color: var(--ink); }
.price-underline { position: relative; display: inline-block; padding: 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--deep); white-space: nowrap; }
[lang^='fa'] .price-underline { letter-spacing: 0; font-size: 32px; font-weight: 800; }
.price-underline::after { content: ''; position: absolute; inset-inline: -2px -10px; bottom: -10px; height: 5px; border-radius: 2px 8px 3px 6px; background: var(--blue); transform: rotate(-2deg); }
.hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: var(--lh-h1); letter-spacing: var(--track-h1); }
[lang='ru'] .hero h1 { font-size: clamp(34px, 5vw, 62px); }
[lang^='fa'] .hero h1 { font-weight: 800; font-size: clamp(42px, 5.6vw, 72px); }
.hero h1 > span { display: block; }
.hero h1 > .h1-kicker { font-family: var(--font-body); font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--deep); margin-bottom: 14px; }
.marker { background: var(--marker); color: var(--marker-ink); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: var(--muted); max-width: 500px; text-wrap: pretty; }
[lang^='fa'] .hero-lead { line-height: 1.8; }
.hero .btn-row { padding-top: 4px; }
.hero-art { flex: 1.2 1 520px; min-width: 0; max-width: 700px; margin: 0 auto; display: flex; justify-content: center; }
.hero-art img { width: 112%; max-width: none; margin: 0 -6%; height: auto; display: block; }

/* ---------- how it works ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 16px; }
.step-card { flex: 1 1 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 18px; transition: transform .25s, box-shadow .25s; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(13, 27, 46, .3); }
.step-top { display: flex; justify-content: space-between; align-items: flex-start; }
.step-num { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1; color: var(--blue); }
.step-card h3 { font-size: 20px; line-height: 1.25; letter-spacing: var(--track-h3); }
.step-card p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- features ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.feature-card { position: relative; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 16px; min-height: 300px; }
.feature-card.highlight { background: var(--blue); border-color: transparent; }
.deco { position: absolute; inset-inline-end: -56px; top: -56px; width: 280px; height: 280px; opacity: .2; pointer-events: none; }
.feature-text { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.feature-card h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: var(--track-h3); }
[lang^='fa'] .feature-card h3 { line-height: 1.5; }
.feature-card p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.feature-card.highlight h3 { color: var(--ink-on-blue); }
.feature-card.highlight p { color: #12324A; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink2); unicode-bidi: isolate; }
.chip:hover { border-color: var(--blue); color: var(--ink); }
[lang='fa-IR'] .chip:not([lang^='fa']), [lang^='fa'] .lang-chip:not([lang^='fa']) { font-family: 'Onest', system-ui, sans-serif; }
.chip[lang^='fa'], .lang-chip[lang^='fa'], .lang li a[lang^='fa'] { font-family: 'Estedad Label', Tahoma, sans-serif; }
html[lang^='fa'] :is(.chip, .lang-chip, .lang li a)[lang^='fa'] { font-family: 'Estedad', Tahoma, sans-serif; }

.feature-link { align-self: flex-start; padding-block: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- locations + client apps ---------- */
.locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.location { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.flag { width: 48px; height: 34px; flex-shrink: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); display: block; }
.location h3 { font-size: 20px; line-height: 1.25; letter-spacing: var(--track-h3); }
.location p { font-size: 14px; font-weight: 600; color: var(--deep); }
.apps-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px; padding-inline-start: 28px; border-radius: 24px; background: var(--bg2); border: 1px solid var(--line); }
.apps-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.apps-text h3 { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.3; letter-spacing: var(--track-h3); }
.apps-text p { font-size: 16px; line-height: 1.6; color: var(--muted); }
[lang^='fa'] .apps-text p { line-height: 1.85; }
.app-chips { flex: 1 1 280px; display: flex; flex-wrap: wrap; gap: 8px; }
.app-chips li { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink2); font-family: 'Onest', system-ui, sans-serif; direction: ltr; }

/* ---------- inset navy panels (referral, final CTA) ---------- */
.inset-wrap { padding-inline: clamp(12px, 2vw, 24px); }
.inset-panel { max-width: 1240px; margin: 0 auto; position: relative; overflow: hidden; background: var(--navy); border-radius: clamp(28px, 3vw, 40px); color: #FFFFFF; }
.inset-panel h2 { color: #FFFFFF; }
.referral::before, .cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.referral::before { background: radial-gradient(45% 60% at 88% 18%, rgba(125, 198, 245, .34), rgba(125, 198, 245, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(125, 198, 245, .16), rgba(125, 198, 245, 0) 70%); }
.cta::before { background: radial-gradient(50% 70% at 78% 60%, rgba(125, 198, 245, .3), rgba(125, 198, 245, 0) 70%); }
[dir='rtl'] .referral::before, [dir='rtl'] .cta::before { transform: scaleX(-1); }
.referral-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(36px, 5vw, 64px); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); }
.referral-text { flex: 1.1 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.h2-xl { font-size: clamp(34px, 4.6vw, 60px); line-height: var(--lh-h1); letter-spacing: var(--track-h1); }
.h2-xl > span { display: block; }
.accent { color: var(--blue); }
.referral .lead { max-width: 470px; }
.ref-steps { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.ref-steps li { flex: 1 1 150px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: 15px; font-weight: 500; color: #E6F1FA; }
.ref-steps img { width: 26px; height: 26px; flex-shrink: 0; }
.calc { flex: 1 1 340px; min-width: 0; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 28px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.calc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.calc-top label { font-size: 15px; font-weight: 500; color: #B9C7D8; }
.calc-pill { min-width: 48px; padding: 6px 12px; border-radius: 999px; background: var(--blue); color: var(--ink-on-blue); font-weight: 700; font-size: 16px; text-align: center; }
.calc input[type='range'] { width: 100%; height: 44px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.calc-result { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #B9C7D8; }
.calc-days { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.calc-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 8vw, 104px); line-height: .95; letter-spacing: var(--track-num); color: var(--blue); }
[lang^='fa'] .calc-num { font-weight: 800; line-height: 1.1; }
.calc-unit { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); letter-spacing: var(--track-h3); color: #FFFFFF; }
.calc-line { line-height: 1.5; }

/* ---------- pricing ---------- */
.plans { width: 100%; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.plan { border-radius: 28px; padding: clamp(28px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.plan-daily { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 28px 56px -36px rgba(13, 27, 46, .3); }
.plan-gb { background: var(--tint); border: 1px solid var(--line5); }
.plan-head { display: flex; align-items: center; gap: 14px; }
.plan-label { font-size: 14px; font-weight: 600; color: var(--deep); }
.plan h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: var(--track-h2); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.price-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(56px, 6.4vw, 80px); line-height: 1; letter-spacing: var(--track-num); color: var(--deep); white-space: nowrap; }
[lang='ru'] .price-big { font-size: clamp(48px, 5.6vw, 72px); }
[lang^='fa'] .price-big { font-weight: 800; font-size: clamp(48px, 5.6vw, 72px); line-height: 1.15; }
.price-unit { font-size: .34em; font-weight: 700; letter-spacing: 0; margin-inline-start: .3em; }
.price-per { font-size: 18px; font-weight: 600; color: var(--ink); }
.plan-body { font-size: 16px; line-height: 1.6; color: var(--muted); }
.plan-gb .plan-body { color: var(--muted2); }
.checks { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line3); }
.plan-gb .checks { border-top-color: var(--line5); }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink2); }
.check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: system-ui, sans-serif; }
.check.solid { background: var(--blue); color: var(--ink-on-blue); }
.check.soft { background: var(--surface); color: var(--deep); }
.guarantee { width: 100%; max-width: 1000px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 18px; padding-inline-start: 22px; border-radius: 24px; background: var(--bg2); border: 1px solid var(--line); }
.guarantee p { flex: 1 1 300px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.guarantee strong { color: var(--ink); font-weight: 700; }
.guarantee p a { padding-block: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- payments ---------- */
.split { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 56px); }
.split-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.split-art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.split-art img { width: 100%; max-width: 600px; height: auto; display: block; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.pay-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; padding-inline: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--ink2); }
.pay-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--tint); display: grid; place-items: center; }
.pay-ic img { width: 20px; height: 20px; }

/* ---------- partners ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.partner-card { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 360px; }
.partner-card > * { position: relative; }
.partner-card .deco { position: absolute; inset-inline-end: -50px; top: -50px; width: 240px; height: 240px; }
.partner-card h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: var(--track-h2); }
[lang^='fa'] .partner-card h3 { line-height: 1.45; }
.partner-card p { font-size: 16px; line-height: 1.6; max-width: 440px; }
.partner-card .btn { margin-top: auto; }
.reseller { background: var(--navy); }
.reseller::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 100% 0%, rgba(125, 198, 245, .28), rgba(125, 198, 245, 0) 70%); }
[dir='rtl'] .reseller::before { transform: scaleX(-1); }
.reseller h3 { color: #FFFFFF; }
.reseller p { color: #B9C7D8; }
.affiliate { background: var(--blue); }
.affiliate h3 { color: var(--ink-on-blue); }
.affiliate p { color: #12324A; }

/* ---------- FAQ ---------- */
.faq-row { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 72px); align-items: flex-start; }
.faq-intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq-intro p { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 360px; }
.faq-list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; min-height: 64px; padding: 18px 20px; padding-inline-start: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.faq-plus { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--ink); display: grid; place-items: center; font-size: 20px; font-weight: 500; line-height: 1; font-family: system-ui, sans-serif; transition: transform .25s, background-color .25s; }
.faq-item[open] .faq-plus { background: var(--blue); color: var(--ink-on-blue); transform: rotate(45deg); }
.faq-item p { padding: 0 22px 22px; padding-inline-end: 64px; font-size: 16px; line-height: 1.65; color: var(--muted); }
[lang^='fa'] .faq-item p { line-height: 1.85; }

/* ---------- final CTA ---------- */
.cta-wrap { padding-block: clamp(72px, 9vw, 120px) clamp(24px, 3vw, 32px); }
.cta-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(24px, 4vw, 48px); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 72px) 0; }
.cta-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: clamp(32px, 5vw, 72px); }
.h2-cta { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: var(--track-h1); }
[lang^='fa'] .h2-cta { line-height: 1.4; }
.cta .lead { max-width: 460px; }
.cta-note { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #B9C7D8; }
.cta-note:hover { color: #FFFFFF; }
.cta-note img { width: 20px; height: 20px; }
.cta-art { flex: 1 1 400px; min-width: 0; align-self: flex-end; display: flex; justify-content: center; }
.cta-art img { width: 100%; max-width: 600px; height: auto; display: block; }

/* ---------- footer ---------- */
.site-footer { padding-inline: var(--gutter); }
.site-footer .container { padding-inline: 0; }
.footer-top { padding-block: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted3); }
.footer-brand a { align-self: flex-start; }
.footer-logo { height: 26px; width: auto; display: block; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 500; }
.footer-nav a { color: var(--ink2); padding-block: 6px; }
.footer-nav a:hover { color: var(--deep); }
.footer-langs { display: flex; gap: 6px; }
.lang-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); font-size: 13px; font-weight: 600; unicode-bidi: isolate; }
.lang-chip:hover { border-color: var(--blue); color: var(--ink); }
.lang-chip.active { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.footer-bottom { padding-block: 20px 28px; border-top: 1px solid var(--line2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted3); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { color: var(--muted3); padding-block: 4px; }
.footer-legal a:hover { color: var(--deep); }

/* ---------- text pages ---------- */
.doc { max-width: 820px; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted3); margin-bottom: 28px; }
.crumbs a { color: var(--muted3); }
.crumbs a:hover { color: var(--deep); }
.doc-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--line2); }
.doc h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: var(--lh-h2); letter-spacing: var(--track-h1); }
[lang^='fa'] .doc h1 { font-weight: 800; }
.doc-updated { font-size: 14px; color: var(--muted3); }
.doc-body { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; }
.doc-body section { display: flex; flex-direction: column; gap: 12px; }
.doc-body h2 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; letter-spacing: var(--track-h3); }
[lang^='fa'] .doc-body h2 { line-height: 1.6; font-weight: 700; }
.doc-body p, .doc-body li { font-size: 16px; line-height: 1.7; color: var(--ink2); }
[lang^='fa'] .doc-body p, [lang^='fa'] .doc-body li { line-height: 1.95; }
.doc-body ul { display: flex; flex-direction: column; gap: 8px; padding-inline-start: 22px; list-style: disc; }
.doc-body li::marker { color: var(--blue); }
.doc-body strong { color: var(--ink); }
.doc-contact { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; padding: 20px; padding-inline-start: 22px; border-radius: 24px; background: var(--bg2); border: 1px solid var(--line); }
.doc-contact > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.doc-contact strong { font-size: 16px; color: var(--ink); }
.doc-contact p { font-size: 15px; line-height: 1.55; color: var(--muted); }

.doc-eyebrow { margin-bottom: -4px; }
.doc-faq { display: flex; flex-direction: column; gap: 10px; }
.doc-faq .faq-item p { padding-inline-end: 22px; }
.doc-cta { margin-top: 40px; }

/* coming soon + 404 */
.soon { padding-block: clamp(48px, 8vw, 112px); display: flex; justify-content: center; }
.soon-card { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--bg2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.soon-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 100% 0%, rgba(125, 198, 245, var(--glow)), rgba(125, 198, 245, 0) 70%); }
[dir='rtl'] .soon-card::before { transform: scaleX(-1); }
.soon-card > * { position: relative; }
.soon-card h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: var(--lh-h2); letter-spacing: var(--track-h1); }
[lang^='fa'] .soon-card h1 { font-weight: 800; }
.soon-card .checks { width: 100%; }
.center-text { align-items: center; text-align: center; }
.center-row { justify-content: center; }
.big-404 { font-family: var(--font-display); font-weight: 700; font-size: clamp(72px, 12vw, 128px); line-height: 1; letter-spacing: var(--track-num); color: var(--blue); }

/* ---------- small screens ---------- */
@media (max-width: 599.98px) {
  .btn-row .btn-lg { flex: 1 1 100%; }
  .hero-text, .referral-text, .cta-text { align-items: stretch; }
  .hero-text > .price-line { align-self: flex-start; }
  .eyebrow, .referral-text h2, .referral-text p, .cta-text h2, .cta-text p { align-self: flex-start; }
  .cta-note { align-self: flex-start; }
  .faq-item p { padding-inline-end: 22px; }
  .guarantee .btn { flex: 1 1 100%; }
  .partner-card { min-height: 0; }
  .partner-card .btn { margin-top: 8px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}