/* =========================================================
   ForexVPS.vip shared CSS extracted from index.html
   ========================================================= */

    :root {
      --bg-dark: #0b0f19;
      --bg-dark2: #0e1322;
      --slate: #1e293b;
      --grad-a: #2563eb;
      --grad-b: #7c3aed;
      --tg: #2481cc;
      --tg-hover: #1a6fad;
      --green: #43C126;
      --cyan: #8efdfb;
      --muted-d: rgba(255,255,255,0.62);
      --muted-l: #64748b;
      --text-l: #0f172a;
      --border-d: rgba(255,255,255,0.08);
      --border-l: #e2e8f0;
      --radius: 18px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif;
      background: var(--bg-dark);
      color: #fff;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    svg { display: inline-block; vertical-align: middle; }
    .container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }

    /* ---------- HEADER ---------- */
    .header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(11,15,25,0.8);
      border-bottom: 1px solid var(--border-d);
      backdrop-filter: blur(16px);
    }
    .header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; }
    .logo-mark {
      width: 40px; height: 40px; border-radius: 12px;
      background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
      color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px;
    }
    .nav { display: flex; align-items: center; gap: 34px; color: #fff; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.095em; }
    .nav a { position: relative; color: rgba(255,255,255,0.92); padding: 25px 0; transition: color 0.22s; }
    .nav a::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 2px;
      background: #1473ff; border-radius: 999px; transform: scaleX(0); transform-origin: left;
      opacity: 0; box-shadow: 0 0 14px rgba(20,115,255,0.65);
    }
    .nav a:hover, .nav a.active { color: #1473ff; }
    .nav a:hover::after { opacity: 1; animation: navUnderlineRun 0.45s ease-out forwards; }
    .nav a.active::after { opacity: 1; transform: scaleX(1); }
    @keyframes navUnderlineRun {
      0% { transform: scaleX(0); }
      100% { transform: scaleX(1); }
    }
    .nav-toggle { display: none; }
    .burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 0; background: #1473ff; color: #fff; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; box-shadow: 0 12px 28px rgba(20,115,255,0.24); transition: transform 0.2s, background 0.2s, box-shadow 0.2s; }
    .burger:hover { background: #0f63df; transform: translateY(-1px); box-shadow: 0 16px 34px rgba(20,115,255,0.32); }
    .burger span { width: 18px; height: 2px; border-radius: 999px; background: #fff; transition: transform 0.2s, opacity 0.2s; }
    .nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .header-support { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.92); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.095em; transition: color 0.2s; white-space: nowrap; }
    .header-support:hover { color: #1473ff; }
    .header-support svg, .nav-support-mobile svg, .nav-account-mobile svg { flex-shrink: 0; }
    .header-support .account-icon, .nav-account-mobile .account-icon { color: #1473ff; width: 22px; height: 22px; stroke-width: 2.45; }
    .nav-support-mobile, .nav-account-mobile { display: none; }

    /* ---------- BUTTONS ---------- */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; border: none; }
    .btn-tg-sm { padding: 10px 18px; background: var(--tg); color: #fff; font-size: 14px; border-radius: 10px; }
    .btn-tg-sm:hover { background: var(--tg-hover); }
    .btn-grad {
      padding: 15px 28px; background: linear-gradient(to right, var(--grad-a), var(--grad-b));
      color: #fff; font-weight: 700; font-size: 16px; border-radius: 14px;
      box-shadow: 0 10px 30px rgba(37,99,235,0.25);
    }
    .btn-grad:hover { transform: scale(1.02); box-shadow: 0 14px 40px rgba(37,99,235,0.35); }
    .btn-grad:active { transform: scale(0.98); }
    .btn-tg {
      padding: 14px 26px; background: var(--tg); color: #fff; font-weight: 600; font-size: 15px;
      border-radius: 12px; box-shadow: 0 8px 20px rgba(36,129,204,0.25);
    }
    .btn-tg:hover { background: var(--tg-hover); transform: translateY(-1px); }
    .btn-ghost-d { padding: 14px 26px; background: rgba(255,255,255,0.05); color: #fff;
      border: 1px solid var(--border-d); border-radius: 12px; font-size: 15px; }
    .btn-ghost-d:hover { background: rgba(255,255,255,0.1); }
    .btn-ghost-l { padding: 13px 26px; background: #fff; color: var(--text-l);
      border: 1px solid var(--border-l); border-radius: 12px; font-size: 15px; }
    .btn-ghost-l:hover { border-color: var(--grad-a); color: var(--grad-a); }
    .btn-full { width: 100%; }

    /* ---------- TYPOGRAPHY ---------- */
    h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.04; margin: 0 0 22px; letter-spacing: -1.5px; font-weight: 800; }
    h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -1px; font-weight: 800; }
    h3 { font-size: 20px; margin: 0 0 10px; font-weight: 700; }
    .lead { font-size: 20px; color: var(--muted-d); max-width: 680px; }
    .hero-price-note {
      display: inline-flex; align-items: baseline; justify-content: center; gap: 10px;
      margin-top: 24px; line-height: 1; font-weight: 900;
    }
    .hero-price-note span {
      font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0.13em;
      text-transform: uppercase; font-weight: 800;
      background: linear-gradient(to right, var(--cyan), var(--grad-a));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 10px 24px rgba(37,99,235,0.34));
    }
    .hero-price-note strong {
      color: #fff; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -1.2px; font-weight: 900;
      text-shadow: 0 18px 44px rgba(37,99,235,0.36);
    }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0; border-radius: 0; margin-bottom: 18px;
      background: none; border: none;
      font-weight: 900; font-size: 13.5px; line-height: 1.1;
      letter-spacing: 0.13em; text-transform: uppercase;
    }
    .eyebrow::before { display: none; }
    /* dark section marker */
    .eyebrow-d { color: #1473ff; }
    .eyebrow-d .dot { display: none; }
    /* light section marker */
    .eyebrow-l { color: var(--grad-a); }
    .pricing-card > .eyebrow {
      padding: 7px 16px; border-radius: 999px; background: rgba(37,99,235,0.08);
      color: var(--grad-a); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
    }
    .pricing-card > .eyebrow::before { display: none; }
    .highlight { background: linear-gradient(to right, var(--cyan), var(--grad-a));
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

    /* ---------- SECTIONS (DARK -> LIGHT PROGRESSION) ---------- */
    .section { padding: 84px 0; }
    .section.small { padding: 56px 0; }

    /* HERO - darkest */
    .hero { position: relative; overflow: hidden; padding: 84px 0 30px; background: var(--bg-dark); }
    .hero .grid-bg { position: absolute; inset: 0; opacity: 0.04;
      background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
      background-size: 44px 44px; }
    .hero .glow { position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
      width: 820px; height: 620px; background: rgba(37,99,235,0.2); border-radius: 50%; filter: blur(145px); z-index: 0; }
    .hero-grid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .hero-copy { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
    .hero-copy .lead { margin: 0 auto; }
    .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 34px 0 0; }
    .btn-hero-tg {
      min-height: 56px; padding: 15px 30px; background: #1473ff; color: #fff; font-weight: 700;
      font-size: 18px; border-radius: 10px; box-shadow: 0 16px 38px rgba(20,115,255,0.28);
    }
    .btn-hero-tg:hover { background: #0f63df; transform: translateY(-1px); }
    .btn-hero-outline {
      min-height: 56px; padding: 15px 30px; color: #fff; font-weight: 700; font-size: 18px;
      border-radius: 10px; border: 1px solid rgba(255,255,255,0.26); background: rgba(4,10,22,0.38);
      box-shadow: inset 0 0 0 1px rgba(37,99,235,0.16);
    }
    .btn-hero-outline:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.42); }
    .telegram-plane { width: 23px; height: 23px; flex-shrink: 0; }
    .hero-info-row {
      width: 100%; max-width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
      margin: 58px auto 0; text-align: left;
    }
    .hero-info-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 0 34px; }
    .hero-info-item:first-child { padding-left: 0; }
    .hero-info-item:last-child { padding-right: 0; }
    .hero-info-item + .hero-info-item { border-left: 1px solid rgba(255,255,255,0.16); }
    .hero-info-icon { width: 48px; height: 48px; color: #126cff; display: grid; place-items: center; }
    .hero-info-icon svg { width: 48px; height: 48px; stroke-width: 1.9; }
    .hero-info-title { color: #fff; font-size: 22px; line-height: 1.18; font-weight: 800; margin-bottom: 8px; }
    .hero-info-title span { display: block; font-size: 17px; font-weight: 700; }
    .hero-info-text { color: rgba(255,255,255,0.68); font-size: 16px; line-height: 1.48; }
    .hero-img {
      position: relative;
      overflow: hidden;
      padding: 18px 0 78px;
      margin-top: -1px;
      margin-bottom: 0;
      background:
        radial-gradient(ellipse at 50% 18%, rgba(20,115,255,0.22), transparent 56%),
        radial-gradient(circle at 18% 42%, rgba(142,253,251,0.045), transparent 32%),
        radial-gradient(circle at 84% 44%, rgba(20,115,255,0.13), transparent 34%),
        linear-gradient(180deg, #0b1426 0%, #071632 52%, #0f2038 100%);
    }
    .hero-img::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(to bottom, rgba(11,20,38,0.98) 0%, rgba(11,20,38,0) 18%, rgba(11,20,38,0) 74%, rgba(11,20,38,0.78) 100%),
        radial-gradient(ellipse at 50% 50%, rgba(20,115,255,0.11), transparent 62%);
    }
    .hero-img::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 112px;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(to bottom, rgba(11,20,38,0) 0%, rgba(103,119,145,0.36) 52%, rgba(248,250,252,0.98) 100%),
        radial-gradient(ellipse at 50% 112%, rgba(20,115,255,0.20), transparent 66%);
    }
    .hero-img-wrap {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
    }
    .hero-img img {
      width: min(100%, 1160px);
      height: auto;
      display: block;
    }

    /* sec1 (intro 2 cards) - still dark */
    .sec-intro { background: linear-gradient(180deg, #10213a 0%, #0f2038 24%, #0e172a 64%, #111a2d 100%); }
    .sec-intro.section.small { padding-top: 120px; }
    /* how - dark */
    .sec-how { background: var(--bg-dark2); }
    /* mini app preview - dark->slate */
    .sec-app { background: linear-gradient(to bottom, #0e1322, #182236); }
    /* benefits - slate transition */
    .sec-benefits { background: linear-gradient(to bottom, #182236, #2b3a52); }
    /* pricing - LIGHT */
    .sec-pricing { background: #f8fafc; color: var(--text-l); }
    /* subscription - light */
    .sec-sub { background: #f8fafc; color: var(--text-l); }
    /* security - light */
    .sec-security { background: #fff; color: var(--text-l); }
    /* faq - lightest white */
    .sec-faq { background: #fff; color: var(--text-l); }
    /* cta - back to dark accent */
    .sec-cta { background: #f8fafc; }


    /* ---------- DARK SECTION ATMOSPHERE ---------- */
    .hero, .sec-intro, .sec-how, .sec-app, .sec-benefits { position: relative; overflow: hidden; }
    .hero .grid-bg { display: none; }

    .hero {
      background:
        radial-gradient(ellipse at 50% -18%, rgba(20,115,255,0.38), transparent 60%),
        radial-gradient(circle at 16% 30%, rgba(142,253,251,0.07), transparent 36%),
        radial-gradient(circle at 84% 52%, rgba(20,115,255,0.16), transparent 38%),
        linear-gradient(180deg, #01020d 0%, #050b1a 52%, #0b1426 100%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.9;
      background:
        linear-gradient(118deg, transparent 0%, transparent 28%, rgba(20,115,255,0.075) 40%, transparent 55%, transparent 100%),
        linear-gradient(22deg, transparent 0%, transparent 62%, rgba(142,253,251,0.045) 74%, transparent 88%),
        radial-gradient(ellipse at 50% 108%, rgba(20,115,255,0.11), transparent 48%);
    }
    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 170px;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(to bottom, rgba(1,2,13,0) 0%, rgba(7,18,41,0.44) 44%, #0b1426 100%),
        radial-gradient(ellipse at 50% 100%, rgba(20,115,255,0.12), transparent 66%);
    }

    .sec-intro::before,
    .sec-how::before,
    .sec-app::before,
    .sec-benefits::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.92;
    }
    .sec-intro::before {
      background:
        linear-gradient(to bottom, rgba(16,33,58,0.92) 0%, rgba(16,33,58,0) 38%),
        radial-gradient(ellipse at 50% -18%, rgba(20,115,255,0.18), transparent 46%),
        radial-gradient(circle at 12% 24%, rgba(20,115,255,0.11), transparent 34%),
        radial-gradient(circle at 92% 72%, rgba(142,253,251,0.055), transparent 30%),
        linear-gradient(145deg, transparent 0%, rgba(255,255,255,0.025) 44%, transparent 68%);
    }

    .sec-intro::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 112px;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(to bottom, rgba(14,19,34,0) 0%, rgba(103,119,145,0.42) 52%, rgba(248,250,252,0.96) 100%),
        radial-gradient(ellipse at 50% 112%, rgba(20,115,255,0.20), transparent 68%);
    }
    .sec-how::before {
      background:
        radial-gradient(ellipse at 18% 88%, rgba(20,115,255,0.12), transparent 40%),
        radial-gradient(ellipse at 78% 18%, rgba(124,58,237,0.11), transparent 34%),
        linear-gradient(24deg, transparent 0%, transparent 44%, rgba(20,115,255,0.04) 58%, transparent 76%);
    }
    .sec-app::before {
      background:
        radial-gradient(circle at 50% -12%, rgba(20,115,255,0.15), transparent 42%),
        radial-gradient(circle at 8% 74%, rgba(142,253,251,0.05), transparent 34%),
        linear-gradient(155deg, transparent 0%, rgba(255,255,255,0.024) 38%, transparent 64%);
    }
    .sec-benefits::before {
      background:
        radial-gradient(ellipse at 88% 14%, rgba(20,115,255,0.13), transparent 36%),
        radial-gradient(ellipse at 22% 92%, rgba(124,58,237,0.10), transparent 38%),
        linear-gradient(118deg, transparent 0%, transparent 48%, rgba(142,253,251,0.036) 62%, transparent 82%);
    }

    .sec-benefits::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 112px;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(to bottom, rgba(43,58,82,0) 0%, rgba(103,119,145,0.42) 52%, rgba(255,255,255,0.96) 100%),
        radial-gradient(ellipse at 50% 112%, rgba(20,115,255,0.22), transparent 68%);
    }

    .hero > .container,
    .sec-intro > .container,
    .sec-how > .container,
    .sec-app > .container,
    .sec-benefits > .container {
      position: relative;
      z-index: 1;
    }
    .cta::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.7;
      background:
        radial-gradient(circle at 50% -25%, rgba(20,115,255,0.22), transparent 45%),
        radial-gradient(circle at 82% 78%, rgba(124,58,237,0.14), transparent 42%),
        linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.035) 45%, transparent 72%);
    }

    .light h2, .light h3 { color: var(--text-l); }
    .light p { color: var(--muted-l); }

    .head-block { max-width: 780px; margin-bottom: 38px; }

    /* ---------- MOCK PHONE ---------- */
    .mock-phone {
      border-radius: 38px; border: 11px solid #0a0e18; background: #11172a;
      padding: 16px; box-shadow: 0 36px 90px rgba(0,0,0,0.5); min-height: 600px;
    }
    .phone-screen { background: #0d1426; border-radius: 26px; min-height: 562px; padding: 20px;
      display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border-d); }
    .phone-top { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-d); padding-bottom: 14px; color: #fff; }
    .mini-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border-d); border-radius: 16px; padding: 18px; }
    .mini-card h3 { color: #fff; }
    .mini-card p { color: var(--muted-d); font-size: 15px; margin: 0; }
    .mini-price { font-size: 36px; font-weight: 800; margin: 12px 0; color: #fff; }
    .mini-price span { font-size: 16px; color: var(--muted-d); font-weight: 500; }
    .mini-line { padding: 10px 0; border-top: 1px solid var(--border-d); color: var(--muted-d); font-size: 14px; display: flex; align-items: center; gap: 8px; }
    .mini-line svg { color: var(--cyan); flex-shrink: 0; }

    /* ---------- GRIDS ---------- */
    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

    /* ---------- CARDS (dark variants) ---------- */
    .card-d { background: rgba(255,255,255,0.04); border: 1px solid var(--border-d);
      border-radius: var(--radius); padding: 28px; transition: transform 0.3s, border-color 0.3s; }
    .card-d:hover { transform: translateY(-6px); border-color: rgba(37,99,235,0.5); }
    .card-d h2, .card-d h3 { color: #fff; }
    .card-d p { color: var(--muted-d); margin: 0; }
    .card-feature { background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
    .card-accent { background: linear-gradient(135deg, var(--grad-a), var(--grad-b)); border: none; }
    .card-accent h2, .card-accent p { color: #fff; }
    .card-blue { background: #1473ff; border: none; box-shadow: 0 18px 46px rgba(20,115,255,0.24); }
    .card-blue h2, .card-blue p { color: #fff; }
    .card-blue .card-icon { background: rgba(255,255,255,0.16); color: #fff; }
    #trading-benefits .card-icon { color: #1473ff; }
    .card-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
      background: rgba(37,99,235,0.14); color: var(--cyan); margin-bottom: 16px; }
    .intro-card .card-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 18px;
      border-radius: 0;
      background: transparent;
      color: #1473ff;
    }
    .intro-card .card-icon svg {
      width: 56px;
      height: 56px;
      stroke-width: 1.9;
    }
    .intro-card.card-blue .card-icon {
      color: #fff;
      background: transparent;
    }

    .intro-card.card-feature .card-icon { color: #1473ff; }

#app .card-d.card-feature.intro-card {
  background: #fff;
  border: 1px solid #dfe7f3;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
}

#app .card-d.card-feature.intro-card:hover {
  transform: none;
  border-color: #dfe7f3;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
}

#app .card-d.card-feature.intro-card .card-icon {
  color: #1473ff;
  background: transparent;
  width: 70px;
  height: 70px;
  margin-bottom: 18px;
}

#app .card-d.card-feature.intro-card .card-icon svg {
  width: 70px;
  height: 70px;
  stroke-width: 2.4;
}

#app .card-d.card-feature.intro-card h2 {
  color: #0f172a;
}

#app .card-d.card-feature.intro-card p {
  color: #5f718d;
}
    .number { width: 46px; height: 46px; border-radius: 14px;
      background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
      color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; font-size: 18px; }



    /* ---------- BENEFITS ROW STYLE ---------- */
    section[id], #app { scroll-margin-top: 88px; }
    .benefit-hero-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 42px;
      border-top: 1px solid rgba(255,255,255,0.16);
      border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    .benefit-hero-item {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 22px;
      align-items: start;
      padding: 34px 36px;
      min-height: 214px;
    }
    .benefit-hero-item:nth-child(3n+1) { padding-left: 0; }
    .benefit-hero-item:nth-child(3n) { padding-right: 0; }
    .benefit-hero-item:not(:nth-child(3n+1)) { border-left: 1px solid rgba(255,255,255,0.16); }
    .benefit-hero-item:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,0.16); }
    .benefit-hero-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      color: #1473ff;
      flex-shrink: 0;
    }
    .benefit-hero-icon svg {
      width: 56px;
      height: 56px;
      stroke-width: 1.9;
    }
    .benefit-hero-title {
      color: #fff;
      font-size: 25px;
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: -0.4px;
      margin: 0 0 12px;
    }
    .benefit-hero-text {
      color: rgba(255,255,255,0.68);
      font-size: 17px;
      line-height: 1.55;
      margin: 0;
    }
    .benefits-intro-grid {
      margin-top: 46px;
      padding-top: 0;
      border-top: 0;
    }
    #trading-benefits .intro-card,
    #trading-benefits .vps-telegram-panel {
      min-height: 270px;
    }

    /* screenshot cards (mini app preview) */
    .screenshot-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border-d);
      border-radius: var(--radius); overflow: hidden; transition: transform 0.3s, border-color 0.3s; }
    .screenshot-card:hover { transform: translateY(-6px); border-color: rgba(37,99,235,0.5); }
    .image-ph { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px; text-align: center; padding: 26px; color: var(--muted-d); font-weight: 600; font-size: 14px;
      background: linear-gradient(135deg, #0d1426, #131c33); border-bottom: 1px solid var(--border-d); }
    .image-ph svg { color: var(--cyan); opacity: 0.85; }
    .screenshot-card.tall .image-ph { min-height: 320px; }
    .screenshot-caption { padding: 20px; }
    .screenshot-caption h3 { color: #fff; }
    .screenshot-caption p { color: var(--muted-d); margin: 0; font-size: 15px; }

    /* big light image placeholder */
    .image-ph-light { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px; text-align: center; padding: 30px; color: var(--muted-l); font-weight: 600;
      background: #fff; border: 2px dashed var(--border-l); border-radius: var(--radius); }
    .image-ph-light svg { color: var(--grad-a); opacity: 0.7; }

    .subscription-visual,
    .security-logic-visual { padding: 0; min-height: auto; overflow: hidden; border: 0; background: transparent; }
    .subscription-visual img,
    .security-logic-visual img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(15,23,42,0.08); }
/* ---------- INFRASTRUCTURE SECTION ---------- */
    #infrastructure .infra-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(410px, 0.92fr);
      gap: 54px;
      align-items: center;
    }
    #infrastructure .infra-feature-stack {
      display: grid;
      gap: 0;
      margin-top: 30px;
      border-top: 1px solid rgba(255,255,255,0.16);
    }
    #infrastructure .infra-feature-row {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 22px;
      align-items: start;
      padding: 26px 0;
      border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    #infrastructure .infra-feature-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      color: #1473ff;
      flex-shrink: 0;
    }
    #infrastructure .infra-feature-icon svg {
      width: 56px;
      height: 56px;
      stroke-width: 1.9;
    }
    #infrastructure .infra-feature-title {
      color: #fff;
      font-size: 25px;
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: -0.4px;
      margin: 0 0 10px;
    }
    #infrastructure .infra-feature-text {
      color: rgba(255,255,255,0.68);
      font-size: 17px;
      line-height: 1.55;
      margin: 0;
    }
    #infrastructure .infra-visual-col {
      position: relative;
      padding-left: 34px;
    }
    #infrastructure .infra-visual-col::before {
      content: "";
      position: absolute;
      left: 0;
      top: 5%;
      bottom: 5%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(20,115,255,0.5), rgba(255,255,255,0.16), transparent);
    }
    #infrastructure .infra-visual-image {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: transparent;
      box-shadow: 0 28px 70px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.10);
    }
    #infrastructure .infra-visual-image img {
      width: 100%;
      height: auto;
      display: block;
    }
    #infrastructure .infra-visual-image::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 58%, rgba(11,15,25,0.18));
    }
    #infrastructure .infra-visual-caption {
      margin-top: 24px;
      padding-top: 22px;

    }
    #infrastructure .infra-visual-caption h3 {
      color: #fff;
      font-size: 28px;
      line-height: 1.15;
      margin-bottom: 10px;
      letter-spacing: -0.5px;
    }
    #infrastructure .infra-visual-caption p {
      color: rgba(255,255,255,0.68);
      font-size: 16px;
      margin: 0 0 22px;
    }
    #infrastructure .infra-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-top: 1px solid rgba(255,255,255,0.16);
      border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    #infrastructure .infra-stat {
      padding: 18px 18px 18px 0;
    }
    #infrastructure .infra-stat:nth-child(even) {
      padding-left: 18px;
      border-left: 1px solid rgba(255,255,255,0.16);
    }
    #infrastructure .infra-stat:nth-child(n+3) {
      border-top: 1px solid rgba(255,255,255,0.16);
    }
    #infrastructure .infra-stat-value {
      color: #fff;
      font-size: 28px;
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -0.6px;
      margin-bottom: 7px;
    }
    #infrastructure .infra-stat-label {
      color: rgba(255,255,255,0.62);
      font-size: 13px;
      line-height: 1.4;
    }
    #infrastructure .infra-note {
      color: rgba(255,255,255,0.46);
      font-size: 12px;
      line-height: 1.5;
      margin: 16px 0 0;
    }

    /* ---------- PRICING ---------- */
    .pricing-card { background: #fff; border: 1px solid var(--border-l); border-radius: var(--radius);
      padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; position: relative;
      box-shadow: 0 4px 24px rgba(15,23,42,0.06); transition: transform 0.3s, box-shadow 0.3s; }
    .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(15,23,42,0.12); }
    .pricing-card h3 { color: var(--text-l); }
    .pricing-card p { color: var(--muted-l); margin: 0; font-size: 16px; }
    .pricing-card.popular { border: 2px solid var(--grad-a); box-shadow: 0 18px 50px rgba(37,99,235,0.18); }
    .price { font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--text-l); }
    .price span { font-size: 17px; color: var(--muted-l); font-weight: 500; }
    .price .annual-total {
      display: block;
      margin-top: 7px;
      color: var(--muted-l);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
    }
    .feature-list { display: grid; gap: 11px; color: var(--slate); font-size: 15px; padding: 0; margin: 0; list-style: none; }
    .feature-list li { display: flex; align-items: center; gap: 10px; }
    .feature-list li svg { color: #1e293b; flex-shrink: 0; }
    .pricing-card .btn-tg { margin-top: auto; }
    .pricing-card .btn-plan-tg {
      margin-top: auto;
      padding: 14px 26px;
      background: #1473ff;
      color: #fff;
      font-weight: 800;
      font-size: 15px;
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(20,115,255,0.24);
    }
    .pricing-card .btn-plan-tg:hover {
      background: #0f63df;
      transform: translateY(-1px);
      box-shadow: 0 16px 34px rgba(20,115,255,0.32);
    }
    .pricing-card .btn-plan-tg .telegram-plane {
      width: 17px;
      height: 17px;
    }

    .pricing-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 22px;
      margin-bottom: 38px;
    }
    .pricing-head .head-block {
      margin-bottom: 0;
    }
    .billing-switch {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px;
      border: 1px solid var(--border-l);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(15,23,42,0.08);
      flex-shrink: 0;
    }
    .billing-switch button {
      appearance: none;
      border: 0;
      border-radius: 999px;
      padding: 11px 18px;
      background: transparent;
      color: var(--muted-l);
      font: inherit;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .billing-switch button.active {
      background: #1473ff;
      color: #fff;
      box-shadow: 0 10px 24px rgba(20,115,255,0.28);
    }
    .billing-switch button:not(.active):hover {
      color: #1473ff;
      background: rgba(20,115,255,0.08);
    }
    .feature-list li svg.windows-logo {
      color: #1473ff;
    }

    /* light feature-list (used in security section) */
    .feature-list-l li { color: var(--slate); }



    /* ---------- WHAT IS VPS - LIGHT SECTION ---------- */
    .vps-basics {
      position: relative;
      overflow: hidden;
      background: #fff;
      color: var(--text-l);
    }
    .vps-basics::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.7;
      background:
        radial-gradient(circle at 12% 8%, rgba(20,115,255,0.07), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(37,99,235,0.055), transparent 34%),
        linear-gradient(135deg, transparent 0%, rgba(15,23,42,0.018) 52%, transparent 80%);
    }
    .vps-basics > .container {
      position: relative;
      z-index: 1;
    }
    .vps-basics .head-block p {
      color: var(--muted-l);
    }
    .vps-basics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 42px;
      border-top: 1px solid var(--border-l);
      border-bottom: 1px solid var(--border-l);
    }
    .vps-basics-item {
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 22px;
      align-items: start;
      padding: 34px 32px;
      min-height: 220px;
    }
    .vps-basics-item:first-child { padding-left: 0; }
    .vps-basics-item:last-child { padding-right: 0; }
    .vps-basics-item + .vps-basics-item { border-left: 1px solid var(--border-l); }
    .vps-basics-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      color: #1473ff;
      flex-shrink: 0;
    }
    .vps-basics-icon svg {
      width: 56px;
      height: 56px;
      stroke-width: 1.85;
    }
    .vps-basics-title {
      color: var(--text-l);
      font-size: 24px;
      line-height: 1.16;
      font-weight: 900;
      letter-spacing: -0.4px;
      margin: 0 0 12px;
    }
    .vps-basics-text {
      color: var(--muted-l);
      font-size: 16px;
      line-height: 1.62;
      margin: 0;
    }
    .vps-basics-split {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      margin-top: 28px;
      align-items: stretch;
    }
    .vps-telegram-panel,
    .vps-audience-panel {
      border-radius: 24px;
      padding: 34px;
      min-height: 270px;
    }
    .vps-telegram-panel {
      background: #1473ff;
      color: #fff;
      box-shadow: 0 20px 52px rgba(20,115,255,0.24);
    }
    .vps-telegram-panel .vps-basics-icon,
    .vps-telegram-panel .vps-basics-title,
    .vps-telegram-panel .vps-basics-text {
      color: #fff;
    }
    .vps-telegram-panel .vps-basics-text {
      color: rgba(255,255,255,0.82);
    }
    .vps-audience-panel {
      background: rgba(255,255,255,0.72);
      border: 1px solid var(--border-l);
      box-shadow: 0 18px 46px rgba(15,23,42,0.06);
    }

    /* ---------- FAQ ---------- */
    .faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
    .faq details { background: #f8fafc; border: 1px solid var(--border-l); border-radius: var(--radius); overflow: hidden; }
    .faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; font-size: 17px;
      color: var(--text-l); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary svg { color: var(--muted-l); transition: transform 0.3s; flex-shrink: 0; }
    .faq details[open] summary svg { transform: rotate(180deg); }
    .faq details p { margin: 0; padding: 0 24px 20px; color: var(--muted-l); font-size: 16px; }
    .faq-toggle { position: absolute; opacity: 0; pointer-events: none; }
    .faq-extra { display: none; gap: 12px; }
    .faq-toggle:checked ~ .faq-extra { display: grid; }
    .faq-more-btn {
      margin: 20px auto 0; display: inline-flex; align-items: center; justify-content: center;
      min-height: 48px; padding: 13px 24px; border-radius: 12px; background: #1473ff; color: #fff;
      font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(20,115,255,0.22);
      transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .faq-more-btn:hover { background: #0f63df; transform: translateY(-1px); box-shadow: 0 16px 34px rgba(20,115,255,0.3); }
    .faq-more-wrap { display: flex; justify-content: center; }
    .faq-more-btn .show-less { display: none; }
    .faq-toggle:checked ~ .faq-more-wrap .show-more { display: none; }
    .faq-toggle:checked ~ .faq-more-wrap .show-less { display: inline; }

    /* ---------- CTA ---------- */
.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -18%, rgba(20,115,255,0.38), transparent 60%),
    radial-gradient(circle at 16% 30%, rgba(142,253,251,0.07), transparent 36%),
    radial-gradient(circle at 84% 52%, rgba(20,115,255,0.16), transparent 38%),
    linear-gradient(180deg, #01020d 0%, #050b1a 52%, #0b1426 100%);
  border: 1px solid var(--border-d);
  border-radius: 32px;
  padding: 64px;
  text-align: center;
}
.cta .glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 500px;
  background: rgba(20,115,255,0.22);
  border-radius: 50%;
  filter: blur(130px);
}
    .cta h2 { color: #fff; position: relative; }
    .cta p { color: var(--muted-d); max-width: 720px; margin: 0 auto 28px; position: relative; }
    .cta .btn { position: relative; }

    /* ---------- FOOTER ---------- */
    .footer {
      padding: 70px 0 34px;
      border-top: 1px solid var(--border-d);
      color: #fff;
      background: #090e2a;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 74px;
      align-items: start;
    }
    .footer-title {
      margin: 0 0 24px;
      color: #1473ff;
      font-size: clamp(28px, 3vw, 36px);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: -0.6px;
    }
    .footer-text {
      max-width: 620px;
      margin: 0;
      color: rgba(255,255,255,0.74);
      font-size: 18px;
      line-height: 1.78;
    }
    .footer-links-title {
      margin: 0 0 28px;
      color: #1473ff;
      font-size: clamp(26px, 2.8vw, 34px);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: -0.5px;
    }
    .footer-links-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 42px;
    }
    .footer-link {
      display: inline-flex;
      align-items: center;
      color: #fff;
      font-size: 17px;
      line-height: 1.28;
      padding: 3px 0;
      transition: color 0.2s, transform 0.2s;
    }
    .footer-link::before { display: none; }
    .footer-link svg { display: none; }
    .footer-link:hover { color: #1473ff; transform: translateX(2px); }
    .footer-bottom {
      margin-top: 58px;
      padding-top: 30px;
      border-top: 1px solid rgba(255,255,255,0.72);
      color: rgba(255,255,255,0.82);
      font-size: 14px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .risk-disclaimer {
      background: #fff;
      color: #64748b;
      padding: 32px 0 34px;
      font-size: 14px;
      line-height: 1.85;
    }
    .risk-disclaimer p { margin: 0; }

    @media (max-width: 920px) {
      .header-inner { height: 68px; position: relative; }
      .header-support { display: none; }
      .burger { display: inline-flex; }
      .nav {
        display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 120;
        flex-direction: column; gap: 0; padding: 10px; border: 1px solid var(--border-d); border-radius: 16px;
        background: rgba(11,15,25,0.96); backdrop-filter: blur(18px); box-shadow: 0 22px 60px rgba(0,0,0,0.38);
      }
      .nav-toggle:checked ~ .nav { display: flex; }
      .nav a { padding: 13px 12px; border-radius: 10px; }
      .nav a::after { bottom: 7px; left: 12px; right: auto; width: calc(100% - 24px); }
      .nav a:hover { background: rgba(255,255,255,0.05); }
      .nav-support-mobile, .nav-account-mobile { display: flex; align-items: center; gap: 8px; }
      #infrastructure .infra-layout { grid-template-columns: 1fr; gap: 36px; }
      #infrastructure .infra-visual-col { padding-left: 0; }
      #infrastructure .infra-visual-col::before { display: none; }
      #infrastructure .infra-feature-row { grid-template-columns: 56px 1fr; gap: 18px; padding: 23px 0; }
      #infrastructure .infra-feature-title { font-size: 22px; }
      #infrastructure .infra-feature-text { font-size: 16px; }
      #infrastructure .infra-visual-caption h3 { font-size: 24px; }
      #infrastructure .infra-stats { grid-template-columns: 1fr; }
      #infrastructure .infra-stat { padding: 16px 0; }
      #infrastructure .infra-stat:nth-child(even) { padding-left: 0; border-left: 0; }
      #infrastructure .infra-stat:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,0.16); }

      .vps-basics-grid { grid-template-columns: 1fr; margin-top: 32px; }
      .vps-basics-item { padding: 24px 0; min-height: auto; border-left: 0 !important; }
      .vps-basics-item + .vps-basics-item { border-top: 1px solid var(--border-l); }
      .vps-basics-title { font-size: 22px; }
      .vps-basics-split { grid-template-columns: 1fr; }
      .vps-telegram-panel, .vps-audience-panel { padding: 28px 22px; min-height: auto; }

      .pricing-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
      .billing-switch { width: 100%; }
      .billing-switch button { flex: 1; padding: 12px 14px; }
      .hero-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
      .hero { padding: 62px 0 42px; }
      .hero-actions { gap: 12px; }
      .btn-hero-tg, .btn-hero-outline { width: 100%; font-size: 16px; padding: 14px 20px; }
      .hero-price-note { margin-top: 20px; }

      .benefit-hero-grid { grid-template-columns: 1fr; margin-top: 32px; }
      .benefit-hero-item { padding: 24px 0; min-height: auto; border-left: 0 !important; }
      .benefit-hero-item:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,0.16); }
      .benefit-hero-item:nth-child(3n) { padding-right: 0; }
      .benefit-hero-title { font-size: 22px; }
      .benefit-hero-text { font-size: 16px; }
      .benefits-intro-grid { margin-top: 34px; padding-top: 28px; }
      #trading-benefits .intro-card,
      #trading-benefits .vps-telegram-panel { min-height: auto; }

      .hero-info-row { grid-template-columns: 1fr; margin-top: 38px; }
      .hero-info-item { padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); }
      .hero-info-item:first-child { border-top: 0; padding-top: 0; }
      .hero-info-item + .hero-info-item { border-left: 0; }
      /* Mobile icon scaling: about 20% smaller for cleaner compact cards */
      .hero-info-item { grid-template-columns: 42px 1fr; gap: 14px; }
      .hero-info-icon,
      .hero-info-icon svg { width: 40px; height: 40px; }

      .card-icon { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px; }
      .intro-card .card-icon,
      .intro-card .card-icon svg { width: 44px; height: 44px; }
      .intro-card .card-icon { margin-bottom: 15px; }

      .number { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 14px; font-size: 16px; }

      .benefit-hero-item { grid-template-columns: 46px 1fr; gap: 16px; }
      .benefit-hero-icon,
      .benefit-hero-icon svg { width: 44px; height: 44px; }

      #infrastructure .infra-feature-row { grid-template-columns: 46px 1fr; gap: 16px; }
      #infrastructure .infra-feature-icon,
      #infrastructure .infra-feature-icon svg { width: 44px; height: 44px; }

      .vps-basics-item { grid-template-columns: 46px 1fr; gap: 16px; }
      .vps-basics-icon,
      .vps-basics-icon svg { width: 44px; height: 44px; }

      .hero-img { padding: 8px 0 58px; margin-bottom: 0; }
      .hero-img img { width: min(112%, 760px); }
      .section { padding: 56px 0; }
      .mock-phone, .phone-screen { min-height: auto; }
      .cta { padding: 44px 22px; }
      .footer { padding: 50px 0 30px; }
      .footer-grid { grid-template-columns: 1fr; gap: 38px; }
      .footer-text { font-size: 16px; line-height: 1.68; }
      .footer-links-grid { grid-template-columns: 1fr; gap: 4px; }
      .footer-bottom { margin-top: 38px; }
      .risk-disclaimer { font-size: 13px; line-height: 1.72; padding: 26px 0; }
    }
  

/* =========================================================
   Legal pages CSS extracted from terms.html / privacy.html
   ========================================================= */

/* ---------- TERMS PAGE ---------- */
    .terms-hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 84px;
      background:
        radial-gradient(ellipse at 50% -18%, rgba(20,115,255,0.30), transparent 58%),
        radial-gradient(circle at 16% 24%, rgba(142,253,251,0.07), transparent 34%),
        radial-gradient(circle at 84% 30%, rgba(124,58,237,0.14), transparent 36%),
        linear-gradient(180deg, #070b14 0%, #0b0f19 100%);
    }
    .terms-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.82;
      background:
        linear-gradient(118deg, transparent 0%, transparent 30%, rgba(20,115,255,0.065) 42%, transparent 58%),
        radial-gradient(ellipse at 50% 108%, rgba(20,115,255,0.12), transparent 48%);
    }
    .terms-hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 112px;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(to bottom, rgba(11,15,25,0) 0%, rgba(103,119,145,0.42) 52%, rgba(248,250,252,0.96) 100%),
        radial-gradient(ellipse at 50% 112%, rgba(20,115,255,0.20), transparent 68%);
    }
    .terms-hero .container {
      position: relative;
      z-index: 1;
    }
    .terms-hero h1 {
      max-width: 920px;
    }
    .terms-hero p {
      max-width: 760px;
      color: var(--muted-d);
      font-size: 19px;
      margin: 0;
    }
    .terms-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: #1473ff;
      font-weight: 900;
      font-size: 13.5px;
      line-height: 1.1;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }
    .terms-main {
      background: #f8fafc;
      color: var(--text-l);
      padding: 76px 0 92px;
    }
    .terms-content {
      max-width: 940px;
    }
    .terms-content-body {
      width: 100%;
    }
    .terms-intro {
      margin: 0 0 34px;
      padding: 0 0 28px;
      color: var(--slate);
      font-size: 16px;
      line-height: 1.76;
      border-bottom: 1px solid var(--border-l);
    }
    .terms-intro strong {
      color: var(--text-l);
    }
    .terms-section {
      padding-top: 30px;
      margin-top: 30px;
      border-top: 1px solid var(--border-l);
      scroll-margin-top: 96px;
    }
    .terms-section:first-of-type {
      margin-top: 0;
      border-top: 0;
      padding-top: 0;
    }
    .terms-section h2 {
      color: var(--text-l);
      font-size: clamp(23px, 2.4vw, 30px);
      line-height: 1.18;
      margin: 0 0 14px;
      letter-spacing: -0.5px;
    }
    .terms-section p {
      color: var(--muted-l);
      font-size: 16px;
      line-height: 1.76;
      margin: 0 0 14px;
    }
    .terms-section ul {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .terms-section li {
      position: relative;
      padding-left: 20px;
      color: var(--slate);
      font-size: 16px;
      line-height: 1.62;
    }
    .terms-section li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #1473ff;
    }
    .terms-contact-box {
      margin: 18px 0 18px;
      padding: 22px;
      border-radius: 18px;
      background: #0b0f19;
      color: #fff;
      box-shadow: 0 18px 50px rgba(15,23,42,0.10);
    }
    .terms-contact-box p {
      color: rgba(255,255,255,0.74);
      margin: 0 0 10px;
    }
    .terms-contact-box a {
      color: #1473ff;
      font-weight: 800;
    }
    @media (max-width: 920px) {
      .terms-hero { padding: 66px 0 64px; }
      .terms-main { padding: 54px 0 68px; }
      .terms-intro { padding-bottom: 24px; }
    }

/* =========================================================
   About page CSS extracted from about.html
   ========================================================= */

/* ---------- ABOUT PAGE ---------- */
    .about-main {
      background: #f8fafc;
      color: var(--text-l);
      padding: 76px 0 92px;
    }
    .about-content {
      max-width: 1060px;
    }
    .about-lead-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
      gap: 52px;
      align-items: center;
      margin-bottom: 64px;
    }
    .about-copy h2 {
      color: var(--text-l);
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.08;
      letter-spacing: -1.45px;
      margin: 0 0 18px;
    }
    .about-copy p {
      color: var(--muted-l);
      font-size: 17px;
      line-height: 1.78;
      margin: 0 0 18px;
    }
    .about-copy .strong-line {
      color: var(--slate);
      font-weight: 800;
    }
    .about-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }
    .about-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px;
      border-radius: 999px;
      background: #eef6ff;
      color: #0f3f91;
      font-size: 13px;
      font-weight: 800;
    }
    .about-image-slot {
      aspect-ratio: 16 / 9;
      min-height: 0;
      border-radius: 30px;
      overflow: hidden;
      position: relative;
      background: #07101d;
      box-shadow: 0 30px 90px rgba(15,23,42,0.18);
    }
    .about-image-slot img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
      transform: none;
    }
    .about-image-slot::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(7,11,20,0.02) 0%, rgba(7,11,20,0.16) 48%, rgba(7,11,20,0.68) 100%),
        radial-gradient(circle at 18% 20%, rgba(142,253,251,0.12), transparent 34%),
        radial-gradient(circle at 78% 78%, rgba(124,58,237,0.18), transparent 40%);
    }
    .about-image-slot::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -90px;
      z-index: 1;
      width: 360px;
      height: 220px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(20,115,255,0.28);
      filter: blur(46px);
      pointer-events: none;
    }
    .about-image-caption {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 22px;
      z-index: 2;
      padding: 20px 22px;
      border-radius: 22px;
      background: rgba(7,11,20,0.72);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 46px rgba(0,0,0,0.26);
    }
    .about-image-caption strong {
      display: block;
      color: #fff;
      font-size: 20px;
      line-height: 1.22;
      letter-spacing: -0.25px;
      margin-bottom: 8px;
    }
    .about-image-caption span {
      display: block;
      color: rgba(255,255,255,0.68);
      font-size: 14px;
      line-height: 1.58;
    }
    .about-rows {
      border-top: 1px solid var(--border-l);
    }
    .about-row {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 48px;
      padding: 36px 0;
      border-bottom: 1px solid var(--border-l);
    }
    .about-row h3 {
      color: var(--text-l);
      font-size: 23px;
      line-height: 1.18;
      letter-spacing: -0.45px;
      margin: 0;
    }
    .about-row p {
      color: var(--muted-l);
      font-size: 16px;
      line-height: 1.76;
      margin: 0 0 14px;
    }
    .about-row p:last-child { margin-bottom: 0; }
    .about-list {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .about-list li {
      position: relative;
      padding-left: 20px;
      color: var(--slate);
      font-size: 16px;
      line-height: 1.62;
    }
    .about-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #1473ff;
    }
    .about-contact-strip {
      margin-top: 48px;
      padding: 30px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 18%, rgba(142,253,251,0.13), transparent 34%),
        linear-gradient(135deg, #0b0f19 0%, #101a31 100%);
      color: #fff;
      box-shadow: 0 22px 70px rgba(15,23,42,0.14);
    }
    .about-contact-strip h2 {
      margin: 0 0 10px;
      color: #fff;
      font-size: 28px;
      letter-spacing: -0.6px;
    }
    .about-contact-strip p {
      margin: 0 0 18px;
      color: rgba(255,255,255,0.68);
      font-size: 16px;
      line-height: 1.68;
    }
    .about-contact-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .about-contact-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(255,255,255,0.07);
      color: #8efdfb;
      font-weight: 800;
    }
    .about-contact-link:hover { background: rgba(255,255,255,0.11); }
    @media (max-width: 920px) {
      .about-main { padding: 54px 0 68px; }
      .about-lead-grid { grid-template-columns: 1fr; gap: 34px; margin-bottom: 48px; }
      .about-image-slot { min-height: 0; border-radius: 24px; }
      .about-row { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
    }

/* =========================================================
   Broker Latency page CSS extracted from broker-latency.html
   ========================================================= */

/* ---------- BROKER LATENCY PAGE ---------- */
    .latency-hero {
      position: relative;
      overflow: hidden;
      padding: 86px 0 72px;
      background:
        radial-gradient(ellipse at 50% -18%, rgba(20,115,255,0.34), transparent 58%),
        radial-gradient(circle at 15% 24%, rgba(142,253,251,0.08), transparent 34%),
        radial-gradient(circle at 84% 34%, rgba(124,58,237,0.16), transparent 36%),
        linear-gradient(180deg, #070b14 0%, #0b0f19 58%, #0b0f19 100%);
    }
    .latency-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.9;
      background:
        linear-gradient(118deg, transparent 0%, transparent 28%, rgba(20,115,255,0.075) 40%, transparent 55%, transparent 100%),
        linear-gradient(22deg, transparent 0%, transparent 62%, rgba(142,253,251,0.045) 74%, transparent 88%),
        radial-gradient(ellipse at 50% 108%, rgba(20,115,255,0.11), transparent 48%);
    }
    .latency-hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 112px;
      pointer-events: none;
      background:
        linear-gradient(to bottom, rgba(11,15,25,0) 0%, rgba(103,119,145,0.42) 52%, rgba(248,250,252,0.96) 100%),
        radial-gradient(ellipse at 50% 112%, rgba(20,115,255,0.20), transparent 68%);
    }
    .latency-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 920px;
      text-align: center;
    }
    .latency-hero h1 {
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }
    .latency-hero .lead {
      margin: 0 auto;
    }
    .latency-hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      max-width: 760px;
      margin: 42px auto 0;
      border-top: 1px solid rgba(255,255,255,0.16);
      border-bottom: 1px solid rgba(255,255,255,0.16);
    }
    .latency-hero-stats div {
      padding: 24px 22px;
    }
    .latency-hero-stats div + div {
      border-left: 1px solid rgba(255,255,255,0.16);
    }
    .latency-hero-stats strong {
      display: block;
      color: #fff;
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .latency-hero-stats span {
      display: block;
      color: rgba(255,255,255,0.68);
      font-size: 14px;
      line-height: 1.4;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 800;
    }
    .latency-section {
      position: relative;
      overflow: hidden;
      background: #f8fafc;
      color: var(--text-l);
    }
    .latency-section::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.65;
      background:
        radial-gradient(circle at 12% 8%, rgba(20,115,255,0.07), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(37,99,235,0.055), transparent 34%),
        linear-gradient(135deg, transparent 0%, rgba(15,23,42,0.018) 52%, transparent 80%);
    }
    .latency-section > .container {
      position: relative;
      z-index: 1;
    }
    .latency-intro p {
      color: var(--muted-l);
      font-size: 17px;
      margin: 0 0 12px;
    }
    .latency-table-card {
      overflow: hidden;
      border: 1px solid var(--border-l);
      border-radius: 24px;
      background: rgba(255,255,255,0.92);
      box-shadow: 0 22px 60px rgba(15,23,42,0.08);
    }
    .latency-table-top {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: flex-end;
      padding: 28px 30px;
      border-bottom: 1px solid var(--border-l);
      background: linear-gradient(135deg, rgba(20,115,255,0.075), rgba(255,255,255,0.72));
    }
    .latency-table-top h3 {
      margin: 0 0 7px;
      color: var(--text-l);
      font-size: 24px;
      letter-spacing: -0.35px;
    }
    .latency-table-top p {
      margin: 0;
      color: var(--muted-l);
      font-size: 15px;
    }
    .latency-table-wrap {
      padding: 24px 24px 28px;
    }
    table.latency-table.dataTable {
      border-collapse: separate;
      border-spacing: 0;
      color: var(--text-l);
      font-size: 15px;
    }
    table.latency-table.dataTable thead th {
      background: #0f172a;
      color: #fff;
      border-bottom: 0;
      padding: 15px 16px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 900;
    }
    table.latency-table.dataTable thead th:first-child {
      border-top-left-radius: 14px;
    }
    table.latency-table.dataTable thead th:last-child {
      border-top-right-radius: 14px;
    }
    table.latency-table.dataTable tbody td {
      padding: 13px 16px;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: middle;
    }
    table.latency-table.dataTable tbody tr:hover td {
      background: rgba(20,115,255,0.055);
    }
    table.latency-table.dataTable tbody td:not(:first-child) {
      font-weight: 800;
      color: #1473ff;
      text-align: center;
    }
    table.latency-table.dataTable tbody td:first-child {
      font-weight: 800;
      color: #0f172a;
    }
    /* DataTables controls styled to match ForexVPS.vip */
    div.dt-container .dt-layout-row {
      align-items: center;
      gap: 16px;
      margin: 0 0 18px;
    }
    div.dt-container .dt-length,
    div.dt-container .dt-search,
    div.dt-container .dt-info,
    div.dt-container .dt-paging {
      color: var(--slate);
      font-size: 14px;
      font-weight: 800;
    }
    div.dt-container .dt-length label,
    div.dt-container .dt-search label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--slate);
      font-weight: 900;
      letter-spacing: 0.02em;
    }
    div.dt-container .dt-search input,
    div.dt-container .dt-length select {
      min-height: 44px;
      border: 1px solid rgba(20,115,255,0.16);
      border-radius: 12px !important;
      background-color: #fff;
      color: var(--text-l);
      outline: none;
      box-shadow: 0 10px 26px rgba(15,23,42,0.06);
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
      font: inherit;
      font-size: 14px;
      font-weight: 800;
    }
    div.dt-container .dt-search input {
      min-width: 260px;
      margin-left: 0;
      padding: 11px 14px;
    }
    div.dt-container .dt-search input::placeholder {
      color: #94a3b8;
      font-weight: 700;
    }
    div.dt-container .dt-length select {
      min-width: 88px;
      margin: 0;
      padding: 10px 36px 10px 14px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, #1473ff 50%),
        linear-gradient(135deg, #1473ff 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 19px,
        calc(100% - 12px) 19px;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }
    div.dt-container .dt-search input:hover,
    div.dt-container .dt-length select:hover {
      border-color: rgba(20,115,255,0.34);
      background-color: #f8fbff;
    }
    div.dt-container .dt-search input:focus,
    div.dt-container .dt-length select:focus {
      border-color: #1473ff;
      box-shadow: 0 0 0 4px rgba(20,115,255,0.13), 0 12px 28px rgba(15,23,42,0.08);
    }
    table.latency-table.dataTable thead th.dt-orderable-asc,
    table.latency-table.dataTable thead th.dt-orderable-desc {
      cursor: pointer;
    }
    table.latency-table.dataTable thead th.dt-orderable-asc:hover,
    table.latency-table.dataTable thead th.dt-orderable-desc:hover,
    table.latency-table.dataTable thead th.dt-ordering-asc,
    table.latency-table.dataTable thead th.dt-ordering-desc {
      color: #fff;
      background: #111d34;
    }
    table.latency-table.dataTable thead th span.dt-column-order::before,
    table.latency-table.dataTable thead th span.dt-column-order::after {
      color: rgba(255,255,255,0.78) !important;
      opacity: 1 !important;
      text-shadow: none !important;
    }
    table.latency-table.dataTable thead th.dt-ordering-asc span.dt-column-order::before,
    table.latency-table.dataTable thead th.dt-ordering-desc span.dt-column-order::after {
      color: #1473ff !important;
      opacity: 1 !important;
    }
    div.dt-container .dt-paging {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
    }
    div.dt-container .dt-paging .dt-paging-button {
      min-width: 34px;
      min-height: 34px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      margin: 0 2px !important;
      padding: 7px 10px !important;
      border-radius: 10px !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      color: var(--slate) !important;
      font-weight: 900;
      box-shadow: none !important;
      transition: color 0.2s, background 0.2s, border-color 0.2s, opacity 0.2s;
    }
    div.dt-container .dt-paging .dt-paging-button:not(.current):not(.disabled):hover {
      background: rgba(20,115,255,0.07) !important;
      color: #1473ff !important;
      border-color: rgba(20,115,255,0.12) !important;
    }
    div.dt-container .dt-paging .dt-paging-button.current,
    div.dt-container .dt-paging .dt-paging-button.current:hover {
      min-width: 38px;
      min-height: 38px;
      background: #1473ff !important;
      color: #fff !important;
      border-color: #1473ff !important;
      border-radius: 10px !important;
      box-shadow: 0 12px 26px rgba(20,115,255,0.24) !important;
    }
    div.dt-container .dt-paging .dt-paging-button.disabled,
    div.dt-container .dt-paging .dt-paging-button.disabled:hover {
      background: transparent !important;
      border-color: transparent !important;
      color: #94a3b8 !important;
      box-shadow: none !important;
      opacity: 0.75;
      cursor: not-allowed !important;
    }
    .latency-note {
      margin-top: 24px;
      padding: 22px 24px;
      border: 1px solid var(--border-l);
      border-radius: 18px;
      background: rgba(255,255,255,0.72);
      color: var(--muted-l);
      font-size: 14px;
      line-height: 1.75;
    }
    .latency-note strong {
      color: var(--text-l);
    }
    @media (max-width: 920px) {
      .latency-hero {
        padding: 62px 0 54px;
      }
      .latency-hero-stats {
        grid-template-columns: 1fr;
        margin-top: 32px;
      }
      .latency-hero-stats div + div {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.16);
      }
      .latency-table-top,
      .latency-table-wrap {
        padding: 22px 18px;
      }
      div.dt-container .dt-layout-row,
      div.dt-container .dt-layout-cell,
      div.dt-container .dt-search,
      div.dt-container .dt-length {
        width: 100%;
      }
      div.dt-container .dt-search label,
      div.dt-container .dt-length label {
        width: 100%;
        justify-content: space-between;
      }
      div.dt-container .dt-search input,
      div.dt-container .dt-length select {
        min-width: 0;
        width: 100%;
      }
      div.dt-container .dt-paging {
        justify-content: center;
        flex-wrap: wrap;
      }
    }

/* =========================================================
   Contact page CSS extracted from contacts.html
   ========================================================= */

/* ---------- CONTACT PAGE ---------- */
    .contact-main {
      background: #f8fafc;
      color: var(--text-l);
      padding: 76px 0 92px;
    }
    .contact-content {
      max-width: 1120px;
    }
    .contact-intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
      gap: 54px;
      align-items: center;
      margin-bottom: 46px;
    }
    .contact-copy h2 {
      color: var(--text-l);
      font-size: clamp(32px, 4.4vw, 56px);
      line-height: 1.04;
      letter-spacing: -1.8px;
      margin: 0 0 20px;
    }
    .contact-copy p {
      color: var(--muted-l);
      font-size: 18px;
      line-height: 1.76;
      margin: 0 0 18px;
      max-width: 660px;
    }
    .contact-copy .strong-line {
      color: var(--slate);
      font-weight: 800;
    }
    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }
    .contact-actions .btn {
      min-height: 52px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 850;
    }
    .contact-visual-slot {
      position: relative;
      min-height: 510px;
      border-radius: 34px;
      overflow: hidden;
      background:
        radial-gradient(circle at 28% 18%, rgba(37,99,235,0.14), transparent 34%),
        radial-gradient(circle at 74% 86%, rgba(124,58,237,0.12), transparent 42%),
        linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
      box-shadow: 0 30px 90px rgba(15,23,42,0.13);
      border: 1px solid rgba(226,232,240,0.85);
    }
    .contact-visual-slot img {
      width: 100%;
      height: 100%;
      min-height: 510px;
      display: block;
      object-fit: contain;
      object-position: center;
    }
    .contact-visual-slot img[src=""],
    .contact-visual-slot img:not([src]) {
      display: none;
    }
    .contact-visual-placeholder {
      position: absolute;
      inset: 34px;
      display: grid;
      place-items: center;
      text-align: center;
      border: 2px dashed rgba(20,115,255,0.22);
      border-radius: 28px;
      background:
        radial-gradient(circle at 50% 0%, rgba(20,115,255,0.10), transparent 48%),
        rgba(255,255,255,0.54);
      color: #64748b;
      padding: 34px;
    }
    .contact-visual-placeholder strong {
      display: block;
      color: var(--text-l);
      font-size: 26px;
      line-height: 1.15;
      letter-spacing: -0.6px;
      margin-bottom: 10px;
    }
    .contact-visual-placeholder span {
      display: block;
      max-width: 420px;
      color: var(--muted-l);
      font-size: 16px;
      line-height: 1.65;
      margin: 0 auto;
    }
    .contact-visual-slot.has-image .contact-visual-placeholder {
      display: none;
    }
    .contact-channel-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 38px;
      border-top: 1px solid var(--border-l);
      border-bottom: 1px solid var(--border-l);
    }
    .contact-channel {
      padding: 34px 28px;
    }
    .contact-channel + .contact-channel {
      border-left: 1px solid var(--border-l);
    }
    .contact-channel-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      color: #1473ff;
      margin-bottom: 18px;
    }
    .contact-channel-icon svg {
      width: 54px;
      height: 54px;
      stroke-width: 1.85;
    }
    .contact-channel h3 {
      color: var(--text-l);
      font-size: 23px;
      line-height: 1.18;
      letter-spacing: -0.45px;
      margin: 0 0 12px;
    }
    .contact-channel p {
      color: var(--muted-l);
      font-size: 16px;
      line-height: 1.68;
      margin: 0;
    }
    .contact-email-block {
      margin-top: 50px;
      padding: 38px;
      border-radius: 30px;
      background:
        radial-gradient(circle at 16% 18%, rgba(142,253,251,0.11), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(124,58,237,0.16), transparent 40%),
        linear-gradient(135deg, #0b0f19 0%, #101a31 100%);
      color: #fff;
      box-shadow: 0 24px 70px rgba(15,23,42,0.14);
    }
    .contact-email-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
    }
    .contact-email-block h2 {
      color: #fff;
      font-size: clamp(27px, 3.2vw, 38px);
      line-height: 1.12;
      letter-spacing: -0.8px;
      margin: 0 0 12px;
    }
    .contact-email-block p {
      color: rgba(255,255,255,0.70);
      font-size: 16px;
      line-height: 1.72;
      margin: 0;
      max-width: 720px;
    }
    .contact-email-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 54px;
      padding: 15px 20px;
      border-radius: 14px;
      color: #fff;
      background: #1473ff;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(20,115,255,0.28);
      white-space: nowrap;
      transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .contact-email-link:hover {
      background: #0f63df;
      transform: translateY(-1px);
      box-shadow: 0 20px 42px rgba(20,115,255,0.36);
    }
    .contact-faq-section {
      background: #fff;
      color: var(--text-l);
      padding: 78px 0 92px;
    }
    .contact-faq-section .head-block p {
      color: var(--muted-l);
      font-size: 17px;
      line-height: 1.66;
      margin: 14px auto 0;
      max-width: 680px;
    }

    @media (max-width: 920px) {
      .contact-main { padding: 54px 0 66px; }
      .contact-intro-grid { grid-template-columns: 1fr; gap: 34px; margin-bottom: 34px; }
      .contact-visual-slot { min-height: 380px; border-radius: 26px; }
      .contact-visual-slot img { min-height: 380px; }
      .contact-visual-placeholder { inset: 22px; padding: 24px; }
      .contact-channel-grid { grid-template-columns: 1fr; margin-top: 30px; }
      .contact-channel { padding: 26px 0; }
      .contact-channel + .contact-channel {
        border-left: 0;
        border-top: 1px solid var(--border-l);
      }
      .contact-email-block { margin-top: 34px; padding: 30px 22px; border-radius: 24px; }
      .contact-email-grid { grid-template-columns: 1fr; gap: 22px; }
      .contact-email-link { width: 100%; }
      .contact-faq-section { padding: 58px 0 72px; }
    }


    /* ---------- CONTACT PAGE V2 ---------- */
    .contact-flow-main {
      background: #ffffff;
      color: var(--text-l);
      padding: 76px 0 84px;
    }
    .contact-flow-grid {
      display: grid;
      grid-template-columns: minmax(360px, 0.98fr) minmax(0, 1.02fr);
      gap: 62px;
      align-items: center;
    }
    .contact-shot {
      position: relative;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
      border-radius: 34px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 28px 80px rgba(15,23,42,0.10);
      border: 1px solid rgba(226,232,240,0.95);
    }
    .contact-shot::before {
      content: "";
      display: block;
      aspect-ratio: 1 / 1;
    }
    .contact-shot.has-image::before {
      display: none;
    }
    .contact-shot img {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      object-position: center center;
      background: #ffffff;
    }
    .contact-shot img[src=""],
    .contact-shot img:not([src]) {
      display: none;
    }
    .contact-shot-placeholder {
      position: absolute;
      inset: 28px;
      display: grid;
      place-items: center;
      text-align: center;
      border: 2px dashed rgba(20,115,255,0.18);
      border-radius: 28px;
      background: #ffffff;
      color: var(--muted-l);
      padding: 30px;
    }
    .contact-shot-placeholder strong {
      display: block;
      color: var(--text-l);
      font-size: 25px;
      line-height: 1.15;
      letter-spacing: -0.6px;
      margin-bottom: 10px;
    }
    .contact-shot-placeholder span {
      display: block;
      max-width: 360px;
      margin: 0 auto;
      color: var(--muted-l);
      font-size: 15px;
      line-height: 1.62;
    }
    .contact-shot.has-image .contact-shot-placeholder {
      display: none;
    }
    .contact-flow-copy h2 {
      color: var(--text-l);
      font-size: clamp(34px, 4.2vw, 54px);
      line-height: 1.05;
      letter-spacing: -1.6px;
      margin: 0 0 20px;
    }
    .contact-flow-copy p {
      color: var(--muted-l);
      font-size: 18px;
      line-height: 1.72;
      margin: 0 0 18px;
      max-width: 650px;
    }
    .contact-flow-copy .strong-line {
      color: var(--slate);
      font-weight: 850;
    }
    .contact-step-list {
      display: grid;
      gap: 0;
      margin: 26px 0 28px;
      border-top: 1px solid var(--border-l);
      border-bottom: 1px solid var(--border-l);
    }
    .contact-step {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 16px;
      align-items: start;
      padding: 18px 0;
    }
    .contact-step + .contact-step {
      border-top: 1px solid var(--border-l);
    }
    .contact-step-number {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      background: #1473ff;
      font-size: 15px;
      font-weight: 900;
      box-shadow: 0 12px 26px rgba(20,115,255,0.22);
    }
    .contact-step strong {
      display: block;
      color: var(--text-l);
      font-size: 18px;
      line-height: 1.25;
      margin-bottom: 4px;
    }
    .contact-step span {
      display: block;
      color: var(--muted-l);
      font-size: 15px;
      line-height: 1.55;
    }
    .contact-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin: 0 0 24px;
    }
    .contact-action-row .btn {
      min-height: 52px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 850;
    }
    .contact-email-mini {
      padding: 22px;
      border-radius: 22px;
      background: #fff;
      border: 1px solid var(--border-l);
      box-shadow: 0 18px 48px rgba(15,23,42,0.06);
    }
    .contact-email-mini h3 {
      margin: 0 0 8px;
      color: var(--text-l);
      font-size: 21px;
      letter-spacing: -0.35px;
    }
    .contact-email-mini p {
      margin: 0 0 12px;
      font-size: 15px;
      line-height: 1.62;
    }
    .contact-email-mini a {
      color: #1473ff;
      font-size: 17px;
      font-weight: 900;
    }
    .contact-channels-section {
      background: #fff;
      color: var(--text-l);
      padding: 72px 0 80px;
    }
    .contact-channel-grid-v2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--border-l);
      border-bottom: 1px solid var(--border-l);
    }
    .contact-channel-v2 {
      padding: 34px 30px;
    }
    .contact-channel-v2 + .contact-channel-v2 {
      border-left: 1px solid var(--border-l);
    }
    .contact-channel-icon-v2 {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      color: #1473ff;
      margin-bottom: 18px;
    }
    .contact-channel-icon-v2 svg {
      width: 56px;
      height: 56px;
      stroke-width: 1.85;
    }
    .contact-channel-v2 h3 {
      color: var(--text-l);
      font-size: 24px;
      line-height: 1.16;
      letter-spacing: -0.45px;
      margin: 0 0 12px;
    }
    .contact-channel-v2 p {
      color: var(--muted-l);
      font-size: 16px;
      line-height: 1.68;
      margin: 0;
    }
    .contact-faq-section {
      background: #f8fafc;
      color: var(--text-l);
      padding: 78px 0 92px;
    }
    .contact-faq-section .head-block p {
      color: var(--muted-l);
      font-size: 17px;
      line-height: 1.66;
      margin: 14px auto 0;
      max-width: 680px;
    }

    @media (max-width: 920px) {
      .contact-flow-main { padding: 54px 0 64px; }
      .contact-flow-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .contact-shot {
        max-width: 560px;
        border-radius: 28px;
      }
      .contact-shot-placeholder {
        inset: 22px;
        padding: 24px;
      }
      .contact-action-row .btn {
        width: 100%;
      }
      .contact-channels-section {
        padding: 56px 0 64px;
      }
      .contact-channel-grid-v2 {
        grid-template-columns: 1fr;
      }
      .contact-channel-v2 {
        padding: 26px 0;
      }
      .contact-channel-v2 + .contact-channel-v2 {
        border-left: 0;
        border-top: 1px solid var(--border-l);
      }
      .contact-faq-section {
        padding: 58px 0 72px;
      }
    }


    .contact-miniapp-btn {
      min-height: 56px;
      padding: 15px 30px;
      background: #1473ff;
      color: #fff;
      font-weight: 700;
      font-size: 18px;
      border-radius: 10px;
      box-shadow: 0 16px 38px rgba(20,115,255,0.28);
    }
    .contact-miniapp-btn:hover {
      background: #0f63df;
      transform: translateY(-1px);
      box-shadow: 0 18px 44px rgba(20,115,255,0.34);
    }
    .contact-miniapp-btn .telegram-plane {
      width: 23px;
      height: 23px;
      flex-shrink: 0;
    }
    .contact-bot-btn {
      min-height: 56px;
      padding: 15px 30px;
      background: #fff;
      color: var(--text-l);
      font-weight: 700;
      font-size: 18px;
      border-radius: 10px;
      border: 1px solid var(--border-l);
      box-shadow: 0 12px 30px rgba(15,23,42,0.07);
    }
    .contact-bot-btn:hover {
      color: #1473ff;
      border-color: rgba(20,115,255,0.36);
      transform: translateY(-1px);
      box-shadow: 0 16px 38px rgba(15,23,42,0.10);
    }
    .contact-bot-btn svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .contact-action-row {
      align-items: center;
    }
    @media (max-width: 920px) {
      .contact-miniapp-btn,
      .contact-bot-btn {
        width: 100%;
        font-size: 16px;
        padding: 14px 20px;
      }
    }