/* Glide - motion + mobile enhancement layer. Loaded last. Additive, logical properties (RTL-safe),
   all animation gated by prefers-reduced-motion: no-preference. */

/* ---------- scroll progress bar ---------- */
.fx-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #5d6cff, #7b88ff);
}
[dir="rtl"] .fx-progress { transform-origin: 100% 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- hero entrance ---------- */
  .fx-ready .hero .fx-in {
    opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px);
    animation: fx-rise .9s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(var(--fx-i, 0) * 90ms + 80ms);
  }
  @keyframes fx-rise { to { opacity: 1; transform: none; filter: none; } }

  /* ---------- ambient glow behind the hero ---------- */
  .hero { position: relative; isolation: isolate; }
  .hero::before {
    content: ""; position: absolute; inset-inline: -20%; top: -10%; height: 70%; z-index: -1; pointer-events: none;
    background: none;
    filter: blur(30px); animation: fx-drift 14s ease-in-out infinite alternate;
  }
  @keyframes fx-drift {
    from { transform: translate3d(-3%, 0, 0) scale(1); }
    to   { transform: translate3d(3%, 4%, 0) scale(1.12); }
  }

  /* ---------- staggered children reveal ---------- */
  .fx-stagger > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--fx-i, 0) * 70ms);
  }
  .fx-stagger.fx-seen > * { opacity: 1; transform: none; }

  /* ---------- section titles: soft line sweep ---------- */
  .section-title { position: relative; }
  .section-title::after {
    content: ""; display: block; height: 3px; width: 56px; margin-top: 14px; border-radius: 3px;
    background: linear-gradient(90deg, #5d6cff, #22d3ee);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .2s;
  }
  [dir="rtl"] .section-title::after { transform-origin: 100% 50%; }
  .fx-seen .section-title::after, .section-title.fx-seen::after { transform: scaleX(1); }
  .section-head[style*="center"] .section-title::after, .section-head.center .section-title::after { margin-inline: auto; }

  /* ---------- press feedback + ripple ---------- */
  .btn, button, .util-btn, .mobile-nav-link, a[class*="btn"] {
    position: relative; overflow: clip;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, background-color .2s ease;
  }
  .btn:active, a[class*="btn"]:active, .util-btn:active { transform: scale(.95); }
  .fx-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    background: currentColor; opacity: .22; transform: scale(0); animation: fx-rip .6s ease-out forwards;
  }
  @keyframes fx-rip { to { transform: scale(16); opacity: 0; } }

  /* ---------- cards lift ---------- */
  .feature-panel, .feature-spotlight, .faq-item, .qs-steps > li {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .3s ease;
  }
  @media (hover: hover) {
    .feature-panel:hover, .feature-spotlight:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(93, 108, 255, .4); }
  }
  .feature-panel:active, .faq-item:active { transform: scale(.985); }

  /* ---------- screenshots: gentle float ---------- */
  .feature-shot { will-change: transform; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
  .fx-seen .feature-shot, .feature-shot.fx-seen { animation: fx-float 7s ease-in-out infinite alternate; }
  @keyframes fx-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

  /* ---------- FAQ smooth open ---------- */
  .faq-item[open] .faq-a { animation: fx-faq .45s cubic-bezier(.2, .8, .2, 1); }
  @keyframes fx-faq { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  /* ---------- header slide on scroll (mobile) ---------- */
  @media (max-width: 820px) {
    .site-header { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
    .site-header.fx-hide { transform: translateY(-110%); }
    .mobile-drawer:not([hidden]) { animation: fx-drawer .22s var(--ease); }
  }
  @keyframes fx-drawer { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
}

/* ---------- extra mobile polish ---------- */
@media (max-width: 820px) {
  html { scroll-behavior: smooth; }
  body { -webkit-tap-highlight-color: transparent; }
  .hero h1, .hero-title { text-wrap: balance; letter-spacing: -.02em; }
  p, li { text-wrap: pretty; }
  .btn, a[class*="btn"] { min-height: 48px; }
  .hero .btn, .hero a[class*="btn"], .final-cta .btn { width: 100%; justify-content: center; }
  img { max-width: 100%; height: auto; }
  .feature-panel, .feature-spotlight { border-radius: 22px; }
  .faq-item summary { min-height: 56px; }
}

/* ---------- tablet/small phones: tidy ---------- */
@media (max-width: 380px) {
  :root { --pad: 14px; }
  .section-title { font-size: 1.6rem; }
}

/* ================= v2: troubleshooting timeline ================= */
.qs-steps { list-style: none; counter-reset: qs; position: relative; padding-inline-start: 0; }
.qs-steps > li { position: relative; padding-inline-start: 56px; padding-block-end: 22px; counter-increment: qs; }
.qs-steps > li::before {
  content: counter(qs); position: absolute; inset-inline-start: 0; top: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem; z-index: 1;
  background: var(--panel-solid, #12141f); border: 2px solid var(--line-2, #333); color: var(--ink, #fff);
  transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.qs-steps > li::after {
  content: ""; position: absolute; inset-inline-start: 18px; top: 38px; bottom: 0; width: 2px; background: var(--line-2, #333);
}
.qs-steps > li:last-child::after { display: none; }
.qs-steps > li > strong { display: block; margin-bottom: 4px; }
.qs-steps > li > span { display: block; opacity: .85; }
.qs-steps > li.fx-lit::before {
  background: #5560f5; border-color: transparent; color: #fff;
  box-shadow: 0 0 0 6px rgba(93,108,255,.16); transform: scale(1.08);
}
.qs-steps > li.fx-lit::after { background: linear-gradient(#22d3ee, var(--line-2, #333)); }

/* ================= v2: status chips pop ================= */
@media (prefers-reduced-motion: no-preference) {
  .tile .viz-chips .chip { opacity: 0; transform: scale(.8) translateY(8px); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--fx-c, 0) * 90ms); }
  .tile.fx-seen .viz-chips .chip, .fx-seen .tile .viz-chips .chip { opacity: 1; transform: none; }
  .btn-primary { background-size: 200% 100%; }
  .hero-actions .btn-primary { animation: fx-pulse 3.2s ease-in-out 1.6s infinite; }
  @keyframes fx-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(93,108,255,.0); } 50% { box-shadow: 0 0 0 10px rgba(93,108,255,.14); } }
  .dl-pkg-row { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
  @media (hover: hover) { .dl-pkg-row:hover { transform: translateX(4px); } [dir="rtl"] .dl-pkg-row:hover { transform: translateX(-4px); } }
}

/* ================= v2: mobile hero + download ================= */
@media (max-width: 820px) {
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn-secondary { min-height: 44px; opacity: .92; }
  .hero-subinfo { flex-wrap: wrap; gap: 6px 10px; font-size: .85rem; }
  .dl-pkg-row { padding: 14px; gap: 12px; border-radius: 18px; }
  .dl-pkg-btn { font-size: .8rem; word-break: break-all; }
  .qs-steps > li { padding-inline-start: 50px; }
}

/* ================= v3: mobile hero order = text -> app preview -> buttons ================= */
@media (max-width: 820px) {
  .hero-copy > .hero-badge-pill, .hero-copy > .hero-headline, .hero-copy > .lede { order: 0 !important; }
  .hero-copy > .hero-stage-col { order: 1 !important; margin: 20px 0 22px !important; }
  .hero-copy > .hero-actions { order: 2 !important; }
  .hero-copy > .hero-subinfo, .hero-copy > .hero-newcomer-pill { order: 3 !important; }

  /* tidy toolbar: switcher on top, Inspect as a clean full-width ghost button */
  .hero-stage-col .showcase-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-stage-col .zoom-trigger-btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; padding: 0 16px; margin: 0;
    border: 1px solid var(--line-2) !important; border-radius: 14px; background: var(--panel);
    font-size: .9rem; font-weight: 700; color: var(--ink);
  }
  .hero-stage-col .zoom-trigger-btn .icon { width: 16px; height: 16px; flex: none; }
  .hero-stage-col .m-zoom-chip { display: none !important; }   /* duplicate "Tap to enlarge" overlay */
  .hero-stage-col .showcase-caption { margin-top: 12px; }
}

/* ================= v4: toolbar on ONE row (tabs + Inspect) ================= */
@media (max-width: 820px) {
  .hero-stage-col .showcase-toolbar { flex-direction: row !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap; }
  .hero-stage-col .view-switcher { flex: 1 1 auto; min-width: 0; }
  .hero-stage-col .view-switcher .view-btn { padding-inline: 10px; font-size: .85rem; white-space: nowrap; }
  .hero-stage-col .zoom-trigger-btn { width: auto !important; flex: none; min-width: 44px; padding: 0 12px; }
}
@media (max-width: 480px) {
  /* icon-only on phones so everything fits; aria-label keeps it accessible */
  .hero-stage-col .zoom-trigger-btn { width: 44px !important; padding: 0; }
  .hero-stage-col .zoom-trigger-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero-stage-col .zoom-trigger-btn .icon { width: 18px; height: 18px; }
}

/* ================= v5: Inspect lives INSIDE the tab pill ================= */
@media (max-width: 820px) {
  .hero-stage-col .showcase-toolbar {
    background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px;
    padding: 4px !important; gap: 4px !important; box-sizing: border-box;
  }
  .hero-stage-col .view-switcher { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .hero-stage-col .zoom-trigger-btn {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    border-radius: 999px !important; width: 40px !important; min-width: 40px; min-height: 40px !important; height: 40px; padding: 0 !important;
    border-inline-start: 1px solid var(--line-2) !important; border-radius: 0 999px 999px 0 !important;
  }
  [dir="rtl"] .hero-stage-col .zoom-trigger-btn { border-radius: 999px 0 0 999px !important; }
  .hero-stage-col .zoom-trigger-btn:active { background: var(--line) !important; }
}

/* ================= v6: tabs fill the pill (no gap) + full, uncropped screenshot ================= */
@media (max-width: 820px) {
  .hero-stage-col .view-switcher { display: flex !important; flex: 1 1 auto; }
  .hero-stage-col .view-switcher .view-btn { flex: 1 1 0; text-align: center; justify-content: center; }

  .hero-stage-col .window-showcase { transform: none !important; }
  .hero-stage-col .screenshot-viewport { aspect-ratio: auto !important; height: auto !important; overflow: hidden !important; }
  .hero-stage-col .hero-app-screen,
  .hero-stage-col .hero-app-screen[src*="main-fa"] {
    position: static !important; inset: auto !important; left: auto !important; top: auto !important;
    width: 100% !important; max-width: 100% !important; height: auto !important;
    object-fit: contain !important; transform: none !important; translate: none !important; scale: none !important;
  }
}

/* ================= v7: remove the version / GPL badge pill on mobile ================= */
@media (max-width: 820px) {
  .hero-badge-pill { display: none !important; }
}

/* ================= v8: bug fixes ================= */
/* 1) Inspect label clipped in the tab pill at tablet widths: icon-only everywhere in the pill */
@media (max-width: 820px) {
  .hero-stage-col .zoom-trigger-btn { width: 40px !important; padding: 0 !important; }
  .hero-stage-col .zoom-trigger-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hero-stage-col .zoom-trigger-btn .icon { width: 18px; height: 18px; }
  .hero-stage-col .view-switcher .view-btn { min-width: 0; }
}
/* 2) Hero text/buttons hidden under the preview at in-between widths: stack earlier, let buttons wrap */
.hero-actions { flex-wrap: wrap; }
.hero-copy, .hero-copy > * { min-width: 0; max-width: 100%; }
@media (min-width: 821px) and (max-width: 1200px) {
  .hero-split { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .hero-copy { align-items: center !important; text-align: center !important; margin-inline: auto !important; max-width: 760px; }
  .hero-actions, .hero-subinfo { justify-content: center; }
  .hero-stage-col { max-width: 920px; margin-inline: auto; }
}

/* ================= v9: header redesign ================= */
.header-pill {
  background: color-mix(in srgb, var(--bg) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  transition: padding .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background-color .35s ease;
}
.site-header.fx-scrolled .header-pill { box-shadow: 0 16px 50px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08) !important; }

/* nav links: soft pill, sliding underline dot for the active section */
.site-nav a {
  position: relative; padding: 8px 14px; border-radius: 999px; font-weight: 600;
  transition: background-color .25s ease, color .25s ease;
}
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 50% ; bottom: 3px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #5d6cff, #22d3ee); transition: inset-inline .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
  opacity: 0;
}
.site-nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.site-nav a.is-active { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.site-nav a.is-active::after { inset-inline: 38%; opacity: 1; }

/* controls: tidy group with a divider */
.header-controls { gap: 6px; }
.header-controls .util-btn { border-radius: 12px; transition: background-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); }
.header-controls .util-btn:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.util-search .kbd { opacity: .7; }

/* download button: gradient with arrow that nudges on hover */
.btn-header-dl {
  background: #5560f5 !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; padding-inline: 18px 14px !important; font-weight: 800; gap: 8px;
  box-shadow: 0 8px 22px -8px rgba(93,108,255, .75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-header-dl::after {
  content: "\2193"; display: inline-block; font-weight: 800; transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.btn-header-dl:hover::after { transform: translateY(3px); }
.btn-header-dl:hover { box-shadow: 0 12px 28px -8px rgba(93,108,255, .9), inset 0 1px 0 rgba(255,255,255,.3); }

/* ---------- mobile header ---------- */
@media (max-width: 820px) {
  .header-pill { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent) !important; }
  .util-search, .util-btn-label { display: none !important; }
  .header-controls { gap: 4px; }
  .header-controls .util-btn { min-width: 40px; min-height: 40px; border-radius: 12px; }
  .btn-header-dl { min-height: 38px !important; padding-inline: 14px 10px !important; font-size: .85rem; }
  .mobile-menu-btn { background: color-mix(in srgb, var(--ink) 8%, transparent); }

  /* drawer: roomy rows with arrow, active highlight, CTA at the bottom */
  .mobile-drawer { backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
  .mobile-nav-link { position: relative; padding-inline: 8px !important; border-radius: 12px; transition: background-color .2s, padding .25s; }
  .mobile-nav-link::after { content: "\203A"; font-size: 1.4rem; opacity: .4; }
  [dir="rtl"] .mobile-nav-link::after { content: "\2039"; }
  .mobile-nav-link:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .mobile-nav-link.is-active { color: var(--indigo); }
  .mobile-nav-link.is-active::after { opacity: 1; color: var(--indigo); }
  .mobile-drawer-footer { margin-top: 14px; }
}

/* ================= v10: "A closer look" = one swipe rail with all 4 slides ================= */
@media (max-width: 820px) {
  .closer-look #closerCarouselDots { display: none !important; }   /* replaced by .fx-rail-dots */
  .closer-trio-grid > * { opacity: 1 !important; transform: none !important; translate: none !important; animation: none !important; }
  .closer-trio-grid > .feature-panel,
  .closer-trio-grid > .feature-spotlight {
    flex: 0 0 86% !important; max-width: 340px !important; scroll-snap-align: center !important; scroll-snap-stop: always;
    margin: 0 !important; border-radius: 22px !important; display: flex; flex-direction: column; overflow: hidden;
  }
  .closer-trio-grid > .feature-spotlight { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
  .closer-trio-grid > .feature-spotlight .spotlight-main { display: flex; flex-direction: column; }
  .closer-trio-grid > .feature-spotlight .spotlight-header { padding: 16px 16px 4px; order: 2; }
  .closer-trio-grid > .feature-spotlight .spotlight-header p { font-size: .88rem; }
  .closer-trio-grid > .feature-spotlight .spotlight-media { order: 1; margin: 0; }
  .closer-trio-grid > .feature-spotlight .spotlight-side { padding: 0 16px 16px; }
  .closer-trio-grid > .feature-spotlight .migration-callout { display: none; }   /* keeps the slide the same height as the others */
  /* show whole screenshots, not crops */
  .closer-trio-grid .feature-shot { height: auto !important; max-height: none !important; object-fit: contain !important; width: 100%; background: #0b0d14; }
  .closer-trio-grid .panel-media, .closer-trio-grid .spotlight-media { margin: 0; }
  .closer-trio-grid .panel-body { padding: 14px 16px 18px; }

  .fx-rail-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 12px; }
  .fx-rail-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: width .3s cubic-bezier(.34,1.56,.64,1), background-color .2s; }
  .fx-rail-dots i.is-active { width: 20px; background: linear-gradient(90deg, #5d6cff, #22d3ee); }
}

/* ================= v11: note dropdown + comparison redesign ================= */
.fx-note { border-radius: 18px; overflow: clip; }
.fx-note > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 14px 18px; min-height: 52px;
  font-weight: 800; user-select: none; -webkit-tap-highlight-color: transparent;
}
.fx-note > summary::-webkit-details-marker { display: none; }
.fx-note > summary > .icon:first-child { flex: none; width: 20px; height: 20px; color: #f2c14e; }
.fx-note-label { flex: 1; }
.fx-note .fx-fa { display: none; }
.fx-note:lang(fa) .fx-fa { display: inline; }
.fx-note:lang(fa) .fx-en { display: none; }
.fx-note > summary .chev { flex: none; width: 18px; height: 18px; opacity: .7; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.fx-note[open] > summary .chev { transform: rotate(180deg); }
.fx-note-body { padding: 0 18px 16px; }
.fx-note-body p { margin: 0; }
.fx-note[open] .fx-note-body { animation: fx-faq .4s cubic-bezier(.2,.8,.2,1); }

/* desktop table: calmer, with Glide column emphasised */
.vs-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.vs-table thead th { position: sticky; top: 0; padding: 14px 18px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; text-align: start; }
.vs-table thead th.th-glide { color: var(--indigo); opacity: 1; }
.vs-table tbody th, .vs-table tbody td { padding: 16px 18px; vertical-align: top; border-top: 1px solid var(--line); text-align: start; }
.vs-table tbody th { font-weight: 800; width: 22%; }
.vs-table tbody td:not(.td-glide) { opacity: .75; }
.vs-table tbody td.td-glide { background: linear-gradient(90deg, rgba(93,108,255,.10), rgba(34,211,238,.05)); font-weight: 600; border-inline-start: 2px solid rgba(93,108,255,.55); }
.vs-table tbody tr { transition: background-color .25s ease; }
@media (hover: hover) { .vs-table tbody tr:hover > th, .vs-table tbody tr:hover > td:not(.td-glide) { background: color-mix(in srgb, var(--ink) 4%, transparent); } }

/* mobile: each row becomes a card with two labelled blocks */
@media (max-width: 820px) {
  .table-scroll-wrap { overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .vs-table, .vs-table tbody { display: block; width: 100%; }
  .vs-table thead { display: none; }
  .vs-table tbody tr {
    display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: 12px; overflow: hidden;
    border: 1px solid var(--line-2); border-radius: 20px; background: var(--panel);
  }
  .vs-table tbody th {
    display: block; width: auto; padding: 14px 16px 10px; border: 0; font-size: 1rem;
  }
  .vs-table tbody td { display: block; padding: 10px 16px 14px; border: 0; opacity: 1 !important; font-size: .92rem; line-height: 1.55; }
  .vs-table tbody td::before {
    display: block; margin-bottom: 4px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .6;
  }
  .vs-table tbody td:not(.td-glide)::before { content: "v2rayN"; }
  .vs-table tbody td:not(.td-glide) { border-top: 1px solid var(--line); color: var(--ink-2, inherit); }
  .vs-table tbody td.td-glide { border-inline-start: 0; border-top: 1px solid rgba(93,108,255,.35); }
  .vs-table tbody td.td-glide::before { content: "Glide"; color: var(--indigo); opacity: 1; }
}

/* ================= v12: fix note layout (inherited flex row from old banner) ================= */
details.comparison-note-banner.fx-note { display: block !important; padding: 0 !important; gap: 0 !important; align-items: stretch !important; }
details.fx-note > summary { width: 100%; box-sizing: border-box; }
details.fx-note > summary > .icon:first-child { width: 20px !important; height: 20px !important; margin: 0 !important; }
details.fx-note > summary .chev { width: 18px !important; height: 18px !important; margin: 0 !important; }
details.fx-note .fx-note-label { font-size: 1rem; line-height: 1.3; white-space: normal; }
details.fx-note .fx-note-body { display: block; width: 100%; box-sizing: border-box; }
details.fx-note .fx-note-body p { font-size: .92rem; line-height: 1.65; font-weight: 500; }

/* ================= v13: Glide vs v2rayN - mobile cards redesign ================= */
@media (max-width: 820px) {
  .vs-table tbody tr {
    position: relative; margin-bottom: 14px !important; padding: 0 !important; border-radius: 22px !important;
    border: 1px solid var(--line-2) !important; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent 60%), var(--panel) !important;
    box-shadow: 0 12px 30px -22px rgba(0,0,0,.7);
  }
  .vs-table tbody tr > th {
    padding: 16px 18px 12px !important; font-size: 1.02rem !important; letter-spacing: -.01em;
    border-bottom: 1px dashed var(--line-2) !important; background: none !important;
  }
  /* neutralise the old boxed cells */
  .vs-table tbody tr > td {
    position: relative; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    margin: 0 !important; padding: 12px 18px 12px 56px !important; padding-inline: 56px 18px !important;
    font-size: .93rem !important; line-height: 1.55 !important;
  }
  .vs-table tbody tr > td::before {
    display: block !important; margin: 0 0 3px !important; font-size: .66rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  }
  /* round markers */
  .vs-table tbody tr > td::after {
    position: absolute; inset-inline-start: 18px; top: 13px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: .8rem; font-weight: 900; line-height: 1;
  }
  /* v2rayN row: muted, dash marker */
  .vs-table tbody tr > td:not(.td-glide) { color: color-mix(in srgb, var(--ink) 68%, transparent) !important; }
  .vs-table tbody tr > td:not(.td-glide)::before { content: "v2rayN" !important; opacity: .55; }
  .vs-table tbody tr > td:not(.td-glide)::after { content: "\2013"; background: color-mix(in srgb, var(--ink) 10%, transparent); color: color-mix(in srgb, var(--ink) 55%, transparent); }
  /* Glide row: highlighted band, check marker */
  .vs-table tbody tr > td.td-glide {
    color: var(--ink) !important; font-weight: 600 !important;
    background: linear-gradient(90deg, rgba(93,108,255,.16), rgba(34,211,238,.07)) !important;
    padding-bottom: 16px !important;
  }
  [dir="rtl"] .vs-table tbody tr > td.td-glide { background: linear-gradient(270deg, rgba(93,108,255,.16), rgba(34,211,238,.07)) !important; }
  .vs-table tbody tr > td.td-glide::before { content: "Glide" !important; color: var(--indigo) !important; opacity: 1 !important; }
  .vs-table tbody tr > td.td-glide::after { content: "\2713"; background: #5560f5; color: #fff; box-shadow: 0 4px 12px -3px rgba(93,108,255,.7); }
  /* connector line between the two markers */
  .vs-table tbody tr > td:not(.td-glide) { padding-bottom: 14px !important; }
  .vs-table tbody tr > td:not(.td-glide)::after { box-shadow: 0 0 0 3px var(--panel); }
}

/* ================= v14: show 5 rows, then "Show all" (restore hiding my card styles broke) ================= */
.vs-table tbody tr.is-hidden { display: none !important; }
@media (max-width: 820px) {
  .vs-expand-wrap { display: flex; justify-content: center; margin-top: 4px; }
  .vs-expand-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px;
    border-radius: 16px; font-weight: 800; font-size: .95rem; color: var(--ink);
    background: linear-gradient(135deg, rgba(93,108,255,.22), rgba(34,211,238,.12));
    border: 1px solid rgba(93,108,255,.4); box-shadow: 0 10px 26px -14px rgba(93,108,255,.7);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  }
  .vs-expand-btn:active { transform: scale(.97); }
  .vs-expand-btn .chev { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .vs-expand-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
  /* soft fade on the last visible card hints there is more */
  .vs-table tbody tr:not(.is-hidden):nth-child(2) { margin-bottom: 16px !important; }
}

/* ================= v16: download / FAQ / final CTA / footer – mobile redesign ================= */
@media (max-width: 820px) {

  /* ---------- DOWNLOAD: compact ---------- */
  .download-panel { padding: 22px 16px !important; border-radius: 26px !important; }
  .download .section-title { font-size: 1.6rem; margin-bottom: 6px; }
  .download .section-sub {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .92rem; margin: 6px 0 16px !important;
  }
  .dl-packages { display: grid; gap: 10px; }
  .dl-pkg-row.is-primary { padding: 14px !important; gap: 12px; align-items: center; border-radius: 20px !important; }
  .dl-pkg-row.is-primary .dl-pkg-info > span {
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; margin-top: 2px;
  }
  .dl-pkg-row.is-primary .dl-pkg-btn { margin-top: 10px; }
  .dl-secondary-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .dl-secondary-row .dl-pkg-row {
    flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px !important; border-radius: 18px !important; min-height: 0;
  }
  .dl-secondary-row .dl-pkg-info > span, .dl-secondary-row .dl-pkg-btn { display: none !important; }   /* name only: file names live in the checksum box */
  .dl-secondary-row .dl-pkg-info strong { font-size: .92rem; line-height: 1.3; }
  .dl-secondary-row .dl-pkg-ico { width: 38px; height: 38px; }
  .checksum-details { margin-top: 12px; }
  /* Quick-start steps collapse behind a native button. */
  .quickstart-col { margin-top: 18px; padding-top: 6px; border-top: 1px dashed var(--line-2); }
  .qs-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 8px 0 !important;
    min-height: 48px; font-size: 1.05rem; -webkit-tap-highlight-color: transparent;
  }
  .qs-toggle:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    border: 0;
    padding: 0;
    color: inherit;
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .qs-toggle::after { content: "\2304" / ""; font-size: 1.4rem; line-height: 1; }
  .qs-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .quickstart-col.is-collapsed .qs-steps { display: none; }

  /* ---------- FAQ ---------- */
  .faq-list { counter-reset: faq; display: grid; gap: 10px; }
  .faq-item {
    counter-increment: faq; border-radius: 20px !important; border: 1px solid var(--line-2) !important; overflow: hidden;
    background: var(--panel) !important; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
  }
  .faq-item[open] {
    border-color: rgba(93,108,255,.55) !important; box-shadow: 0 14px 34px -22px rgba(93,108,255,.8);
    background: linear-gradient(180deg, rgba(93,108,255,.10), transparent 70%), var(--panel) !important;
  }
  .faq-item > summary {
    display: flex !important; align-items: center; gap: 12px; padding: 14px 14px 14px 14px !important; min-height: 60px;
    font-weight: 700; font-size: .98rem; line-height: 1.35; list-style: none; cursor: pointer;
  }
  .faq-item > summary::-webkit-details-marker { display: none; }
  .faq-item > summary::before {
    content: counter(faq, decimal-leading-zero); flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-3);
    background: color-mix(in srgb, var(--ink) 7%, transparent); transition: background .3s, color .3s;
  }
  .faq-item[open] > summary::before { background: #5560f5; color: #fff; }
  .faq-item > summary > span { flex: 1; min-width: 0; }
  .faq-item > summary .chev { flex: none; width: 18px; height: 18px; opacity: .6; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .faq-item[open] > summary .chev { transform: rotate(180deg); opacity: 1; }
  .faq-a { padding: 0 16px 16px 60px !important; font-size: .92rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 82%, transparent); }
  [dir="rtl"] .faq-a { padding: 0 60px 16px 16px !important; }
  .faq-a p { margin: 0; }

  /* ---------- FINAL CTA: a framed card ---------- */
  .final-cta { padding: 28px 14px 36px !important; }
  .final-inner {
    position: relative; overflow: hidden; text-align: center; padding: 34px 20px 26px !important; border-radius: 28px;
    border: 1px solid rgba(93,108,255,.4);
    background: var(--panel);
    box-shadow: 0 24px 48px -28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .final-title { font-size: clamp(1.7rem, 8vw, 2.2rem) !important; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
  .final-sub { margin: 10px 0 22px !important; font-size: .98rem; opacity: .85; }
  .final-inner .hero-actions { display: grid !important; gap: 10px; width: 100%; }
  .final-inner .btn { width: 100%; min-height: 54px; justify-content: center; border-radius: 16px; }
  .final-inner .btn-primary {
    background: #5560f5 !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 14px 30px -12px rgba(93,108,255,.9), inset 0 1px 0 rgba(255,255,255,.25) !important;
  }
  .final-inner .btn-secondary { display: inline-flex !important; background: color-mix(in srgb, var(--ink) 7%, transparent) !important; border: 1px solid var(--line-2) !important; }

  /* ---------- FOOTER ---------- */
  .footer-inner { display: grid; gap: 18px; justify-items: center; text-align: center; padding-block: 28px 20px; }
  .footer-brand-col { display: grid; gap: 6px; justify-items: center; }
  .footer-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .footer-links a {
    min-height: 44px; font-size: .88rem; border-radius: 14px; padding: 0 10px; text-align: center;
    background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line);
  }
  .footer-links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ================= v17: smaller footer + compact steps (mobile) ================= */
@media (max-width: 820px) {
  /* steps: no boxes, no duplicate number circles (titles already say "1.", "2."), tight rhythm */
  .qs-steps { display: grid; gap: 0; margin: 0 0 4px !important; padding: 0 !important; }
  .qs-steps > li {
    padding: 8px 0 8px 14px !important; padding-inline: 14px 0 !important; margin: 0 !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    border-inline-start: 2px solid var(--line-2) !important;
  }
  .qs-steps > li::before, .qs-steps > li::after { display: none !important; }
  .qs-steps > li.fx-lit { border-inline-start-color: #5d6cff !important; }
  .qs-steps > li > strong { font-size: .92rem; margin-bottom: 2px; }
  .qs-steps > li > span { font-size: .82rem; line-height: 1.5; opacity: .8; }
  .qs-heading { min-height: 40px; font-size: .98rem; }

  /* footer: slim */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  .footer-inner { gap: 10px !important; padding-block: 16px 8px !important; }
  .footer-brand-col { gap: 2px !important; }
  .footer-brand { font-size: .9rem; gap: 8px; }
  .footer-brand .brand-logo { height: 20px; width: auto; }
  .footer-note { font-size: .74rem; margin: 0; }
  .footer-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px !important; }
  .footer-links a, .footer-links a:last-child:nth-child(odd) {
    flex: none; grid-column: auto; min-height: 32px !important; padding: 0 12px !important;
    font-size: .76rem !important; font-weight: 600; border-radius: 999px !important;
  }
}

/* ================= v18: collapse fix, tighter footer, download + footer animation ================= */
.qs-steps[hidden], .quickstart-col.is-collapsed > .qs-steps { display: none !important; }
@media (max-width: 820px) {
  .site-footer { padding: 14px var(--pad) 10px !important; }
  .site-footer .footer-inner { gap: 8px !important; padding-block: 0 !important; }
  .final-cta { padding-bottom: 14px !important; }
  body.fx-at-end { padding-bottom: 0 !important; }
  body.fx-at-end .sticky-cta { transform: translateY(120%) !important; opacity: 0 !important; pointer-events: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  /* download: panel glow breathes, primary row sweeps a shine, rows pop in */
  .download-glow { animation: fx-breathe 6s ease-in-out infinite alternate; }
  @keyframes fx-breathe { from { opacity: .55; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
  .dl-pkg-row.is-primary { position: relative; overflow: hidden; }
  .dl-pkg-row.is-primary::after {
    content: ""; position: absolute; inset-block: 0; width: 40%; inset-inline-start: -60%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg);
    animation: fx-shine 4.5s ease-in-out 1.2s infinite;
  }
  @keyframes fx-shine { 0% { inset-inline-start: -60%; } 55%, 100% { inset-inline-start: 130%; } }
  .dl-packages.fx-stagger > *, .dl-secondary-row.fx-stagger > * { transform: translateY(18px) scale(.97); }
  .dl-packages.fx-seen > *, .dl-secondary-row.fx-seen > * { transform: none; }
  .checksum-details[open] .checksum-content { animation: fx-faq .4s cubic-bezier(.2,.8,.2,1); }
  .quickstart-col:not(.is-collapsed) .qs-steps { animation: fx-faq .45s cubic-bezier(.2,.8,.2,1); }
  .dl-pkg-ico { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
  .dl-pkg-row:active .dl-pkg-ico, .dl-pkg-row:hover .dl-pkg-ico { transform: scale(1.1) rotate(-4deg); }

  /* footer: line draws in, brand fades up, link pills pop in one after another */
  .site-footer { position: relative; }
  .site-footer::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; transform: scaleX(0); transform-origin: 50% 50%;
    background: linear-gradient(90deg, transparent, #5d6cff, #22d3ee, transparent); transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .site-footer.fx-seen::before { transform: scaleX(1); }
  .footer-links.fx-stagger > * { transform: translateY(12px) scale(.9); transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
  .footer-links.fx-seen > * { transform: none; }
  .footer-brand-col.fx-stagger > * { transform: translateY(10px); }
  .footer-links a { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s, border-color .2s, opacity .7s; }
  .footer-links a:hover { transform: translateY(-2px); border-color: rgba(93,108,255,.5); }
  .footer-links a:active { transform: scale(.94); }
  .footer-brand .brand-logo { animation: fx-float 6s ease-in-out infinite alternate; }

  /* final CTA card: slow aurora sheen */
  .final-inner::before {
    content: ""; position: absolute; inset: -40%; pointer-events: none; z-index: 0;
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(93,108,255,.18) 85%, transparent 100%); animation: fx-spin 14s linear infinite;
  }
  .final-inner > * { position: relative; z-index: 1; }
  @keyframes fx-spin { to { transform: rotate(360deg); } }
}

/* ================= v19: download gap, footer rework, Persian/desktop nav fit ================= */

/* nav: never wrap link labels; free space by trimming secondary bits */
.site-nav { gap: 2px; flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; padding: 8px 11px; font-size: .92rem; }
html[lang="fa"] .site-nav a { font-size: .9rem; padding-inline: 10px; }
@media (min-width: 821px) and (max-width: 1240px) {
  .util-search .kbd { display: none; }
  .header-controls .util-btn-label { display: none; }
  .header-controls .lang-toggle #langText { font-size: .85rem; }
  .site-nav a { padding-inline: 9px; font-size: .86rem; }
}
@media (min-width: 821px) and (max-width: 1080px) {
  .site-nav a { padding-inline: 7px; font-size: .82rem; }
  .btn-header-dl { padding-inline: 14px 10px !important; }
}

@media (max-width: 820px) {
  /* download: remove the dead band between the checksum box and "Up and running" */
  .download-panel { gap: 0 !important; row-gap: 0 !important; }
  .download-copy { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  .checksum-details { margin: 12px 0 0 !important; }
  .quickstart-col { margin: 12px 0 0 !important; padding-top: 0 !important; border-top: 0 !important; }
  .qs-heading { margin: 0 !important; padding: 12px 2px; border-top: 1px dashed var(--line-2); }

  /* footer: clean three-line stack — brand, plain link row, copyright */
  .site-footer { padding: 18px var(--pad) 12px !important; }
  .site-footer .footer-inner { display: flex !important; flex-direction: column; align-items: center; gap: 10px !important; text-align: center; }
  .footer-brand-col { display: contents; }
  .footer-brand { order: 1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: .92rem; }
  .footer-brand .brand-logo { height: 22px; width: auto; }
  .footer-links { order: 2; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 6px !important; width: auto; max-width: 340px; }
  .footer-links a, .footer-links a:last-child:nth-child(odd) {
    min-height: 30px !important; padding: 0 8px !important; border: 0 !important; background: none !important; border-radius: 8px !important;
    font-size: .8rem !important; font-weight: 600; color: var(--ink-3); position: relative;
  }
  .footer-links a + a::before { content: ""; position: absolute; inset-inline-start: -4px; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 50%; background: var(--line-2); }
  .footer-links a:active { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent) !important; }
  .footer-note { order: 3; margin: 2px 0 0 !important; font-size: .72rem; opacity: .7; }
}

/* ================= v20: footer brand alignment + compact diagnostics (mobile) ================= */
.footer-brand { display: flex !important; align-items: center !important; justify-content: center; gap: 8px !important; line-height: 1; }
.footer-brand > * { margin: 0 !important; padding: 0 !important; vertical-align: middle; }
.footer-brand .brand-logo { display: block; align-self: center; }
.footer-brand .brand-logo-light { display: none; }
[data-theme="light"] .footer-brand .brand-logo-dark { display: none; }
[data-theme="light"] .footer-brand .brand-logo-light { display: block; }
.footer-brand a { line-height: 1; padding-bottom: 2px !important; }

/* ================= v23: footer brand must always be visible; no orphan separator dots ================= */
.footer-brand-col > * { opacity: 1 !important; transform: none !important; }
@media (max-width: 820px) { .footer-links a + a::before { display: none !important; } }

/* ================= v24: desktop – "Portable zip" / "32-bit" rows were stuck invisible (display:contents container never "seen") ================= */
.dl-secondary-row, .dl-secondary-row > * { opacity: 1 !important; transform: none !important; }

/* ================= v25: fix display:contents stagger bug (features 7 & 8 + download rows) & desktop 4-step circles ================= */
.features-duo-row, .features-duo-row > *,
.dl-secondary-row, .dl-secondary-row > * {
  opacity: 1 !important;
  transform: none !important;
}

@media (min-width: 821px) {
  .qs-steps > li::before,
  .qs-steps > li:last-child::before {
    display: grid !important;
    bottom: auto !important;
    opacity: 1 !important;
  }
  .qs-steps > li::after {
    width: 2px !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Responsive navigation feedback uses the existing motion curve. */
html { scroll-padding-top: calc(var(--hdr-h, 72px) + 16px); }
.mobile-drawer { overscroll-behavior: contain; }
.site-nav a, .mobile-nav-link, .view-btn, .details-tab, .proto-chip, .scenario-btn { touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
 .site-nav a, .mobile-nav-link { transition: background-color 160ms ease, color 160ms ease; }
}
@media (max-width: 820px) {
 .site-header { transition: transform 220ms var(--ease); }
 .site-header:focus-within { transform: none !important; }
 .mobile-drawer:not([hidden]) .mobile-nav-link { animation: none; }
 .details-tabs-bar, .proto-chips-bar, .scenario-picker { scroll-padding-inline: 16px; overscroll-behavior-inline: contain; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto !important; }
 .site-header { transition: none !important; }
 .mobile-drawer, .mobile-nav-link { animation: none !important; }
}

/* Keep the longer Persian preview label inside its segment on phones. */
@media (max-width: 820px) {
  .hero-stage-col .view-switcher {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.55fr);
    align-items: stretch;
    overflow: visible;
  }
  .hero-stage-col .view-switcher .view-btn {
    min-width: 0;
    min-height: 44px;
    padding: 6px;
    white-space: normal;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-stage-col .view-switcher .view-btn > span {
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  .hero-stage-col .zoom-trigger-btn { flex-shrink: 0; }
}