/* Self-hosted Google Fonts — Latin + Latin-ext only */
/* Inter 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/montserrat-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/montserrat-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/montserrat-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; overflow-y: scroll; }
    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #0D1B3E;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      line-height: 1.7;
    }
    h1, h2, h3, h4, h5 {
      font-family: 'Montserrat', sans-serif;
      letter-spacing: -0.03em;
      line-height: 1.13;
    }
    p, li, span, a, label { font-family: 'Inter', sans-serif; line-height: 1.7; }

    /* Grain texture */
    .grain { position: relative; }
    .grain::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 2;
    }

    /* Hero background */
    .hero-bg {
      background:
        radial-gradient(ellipse 110% 60% at 55% -5%,  rgba(30, 86, 181, 0.30) 0%, transparent 62%),
        radial-gradient(ellipse 55%  55% at 95% 45%,  rgba(77,174, 229, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 65%  70% at  0% 100%, rgba(13, 27,  62, 0.25) 0%, transparent 60%),
        linear-gradient(160deg, #04091a 0%, #0D1B3E 50%, #122244 100%);
    }

    /* Nav */
    .nav-blur {
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
    }
    .nav-link {
      font-family: 'Inter', sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255,255,255,0.70);
      text-decoration: none;
      padding: 0.4rem 0.8rem;
      border-radius: 8px;
      transition: background 0.14s ease, color 0.14s ease;
    }
    .nav-link:hover       { color: #fff; background: rgba(255,255,255,0.09); }
    .nav-link:active      { background: rgba(255,255,255,0.15); }
    .nav-link:focus-visible { outline: 2px solid #4DAEE5; outline-offset: 2px; }

    .nav-dropdown-wrap { position: relative; display: flex; align-items: center; }
    .nav-dropdown-wrap::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
    .nav-dropdown-trigger { display: flex; align-items: center; gap: 2px; }
    .dd-caret { transition: transform 0.22s cubic-bezier(0.16,1,0.3,1); opacity: 0.5; flex-shrink: 0; }
    .nav-dropdown-wrap:hover .dd-caret { transform: rotate(180deg); }
    .nav-dropdown {
      position: absolute; top: calc(100% + 10px); left: 50%;
      transform: translateX(-50%) translateY(-8px);
      min-width: 220px;
      background: rgba(6,13,40,0.98);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.09); border-radius: 14px;
      padding: 0.45rem;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.18s;
      z-index: 200;
      box-shadow: 0 24px 56px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }
    .nav-dropdown::before {
      content: ''; position: absolute; top: -5px; left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 10px; height: 10px; background: rgba(6,13,40,0.98);
      border-left: 1px solid rgba(255,255,255,0.09);
      border-top: 1px solid rgba(255,255,255,0.09);
      border-radius: 2px 0 0 0;
    }
    .nav-dropdown-wrap:hover .nav-dropdown,
    .nav-dropdown-wrap:focus-within .nav-dropdown {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
      transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), visibility 0s;
    }
    .nav-dd-item {
      display: flex; align-items: center; gap: 0.65rem;
      padding: 0.55rem 0.85rem; border-radius: 9px;
      font-size: 0.82rem; color: rgba(195,215,245,0.72);
      text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 500;
      transition: background 0.12s ease, color 0.12s ease; white-space: nowrap;
    }
    .nav-dd-item:hover { background: rgba(255,255,255,0.09); color: #fff; }
    .nav-dd-item:focus-visible { outline: 2px solid #4DAEE5; outline-offset: -2px; border-radius: 9px; }
    .nav-dd-icon {
      width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(30,86,181,0.32), rgba(77,174,229,0.20));
      display: flex; align-items: center; justify-content: center;
    }

    /* Buttons */
    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.875rem 2rem;
      background: linear-gradient(135deg, #1E56B5 0%, #1A3462 100%);
      color: #fff;
      font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.005em;
      border-radius: 10px; border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
      box-shadow: 0 4px 14px rgba(30,86,181,0.38), 0 1px 3px rgba(0,0,0,0.22);
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, opacity 0.15s ease;
    }
    .btn-primary:hover       { transform: translateY(-2px) scale(1.025); box-shadow: 0 8px 24px rgba(30,86,181,0.48), 0 2px 6px rgba(0,0,0,0.28); }
    .btn-primary:active      { transform: translateY(0) scale(0.98); opacity: 0.92; }
    .btn-primary:focus-visible { outline: 2px solid #4DAEE5; outline-offset: 3px; }
    @media(max-width:639px){header .btn-primary,header .lang-toggle,header #dark-toggle{display:none!important}}

    .btn-outline {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.875rem 1.875rem;
      background: transparent;
      color: #fff;
      font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem;
      border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.22); cursor: pointer; text-decoration: none; white-space: nowrap;
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.14s ease, border-color 0.14s ease;
    }
    .btn-outline:hover       { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.40); transform: translateY(-1px); }
    .btn-outline:active      { transform: translateY(0); background: rgba(255,255,255,0.05); }
    .btn-outline:focus-visible { outline: 2px solid #4DAEE5; outline-offset: 3px; }

    /* Badge */
    .badge-dark {
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.28rem 0.85rem;
      border-radius: 999px;
      background: rgba(77,174,229,0.13);
      border: 1px solid rgba(77,174,229,0.30);
      color: #7ECEF5;
      font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
    }

    /* Content styles */
    .content-section {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .section-card {
      background: #ffffff;
      border: 1px solid #dde5f4;
      border-radius: 20px;
      padding: 2.5rem;
      margin-bottom: 2rem;
      box-shadow:
        0 1px 2px rgba(13,27,62,0.06),
        0 4px 8px rgba(13,27,62,0.06),
        0 0 0 1px rgba(30,86,181,0.06) inset;
      transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease;
    }
    .section-card:hover {
      transform: translateY(-3px);
      box-shadow:
        0 2px 4px rgba(13,27,62,0.07),
        0 8px 18px rgba(13,27,62,0.08),
        0 24px 40px rgba(13,27,62,0.05),
        0 0 0 1px rgba(30,86,181,0.08) inset;
    }

    .section-h2 {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1.4rem, 3vw, 1.8rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #0D1B3E;
      margin-bottom: 1.2rem;
      line-height: 1.2;
    }

    .section-h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #0D1B3E;
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }

    .body-text {
      font-size: 0.92rem;
      color: #5a6e8c;
      line-height: 1.75;
      margin-bottom: 0.85rem;
    }

    .body-text a {
      color: #1E56B5;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.14s ease;
    }
    .body-text a:hover { color: #4DAEE5; text-decoration: underline; }

    /* Timeline step */
    .timeline-step {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      margin-bottom: 2.5rem;
      position: relative;
    }
    .timeline-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 23px;
      top: 52px;
      bottom: -12px;
      width: 2px;
      background: linear-gradient(180deg, #1E56B5 0%, rgba(30,86,181,0.15) 100%);
    }
    .step-number {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #1E56B5 0%, #1A3462 100%);
      color: #fff;
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 1.1rem;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(30,86,181,0.35), 0 1px 3px rgba(0,0,0,0.2);
      position: relative;
      z-index: 2;
    }
    .step-content {
      flex: 1;
      padding-top: 0.15rem;
    }
    .step-content h3 {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: #0D1B3E;
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }

    /* Mistake item */
    .mistake-item {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1.1rem 1.3rem;
      background: #f5f8fe;
      border: 1px solid #dde5f4;
      border-radius: 14px;
      margin-bottom: 0.75rem;
      transition: transform 0.18s cubic-bezier(0.16,1,0.3,1);
    }
    .mistake-item:hover { transform: translateY(-2px); }
    .mistake-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(220,50,50,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #c43232;
    }

    /* Checklist item */
    .check-item {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
      padding: 0.75rem 0;
      border-bottom: 1px solid #edf2fb;
    }
    .check-item:last-child { border-bottom: none; }
    .check-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      background: rgba(30,86,181,0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1E56B5;
      margin-top: 2px;
    }

    /* Timeline visual */
    .tl-bar {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .tl-item {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .tl-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 3px solid #1E56B5;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(30,86,181,0.12);
    }
    .tl-line {
      width: 2px;
      height: 20px;
      background: rgba(30,86,181,0.18);
      margin-left: 6px;
    }
    .tl-label {
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem;
      font-weight: 500;
      color: #0D1B3E;
    }
    .tl-duration {
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      color: #1E56B5;
      background: rgba(30,86,181,0.08);
      padding: 0.15rem 0.6rem;
      border-radius: 6px;
      white-space: nowrap;
    }

    /* FAQ */
    .faq-item {
      border: 1px solid #dde5f4;
      border-radius: 14px;
      margin-bottom: 0.75rem;
      overflow: hidden;
      background: #fff;
      transition: box-shadow 0.18s ease;
    }
    .faq-item:hover {
      box-shadow: 0 2px 8px rgba(13,27,62,0.06);
    }
    .faq-q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem 1.4rem;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.92rem;
      font-weight: 700;
      color: #0D1B3E;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      transition: background 0.12s ease;
    }
    .faq-q:hover { background: #f5f8fe; }
    .faq-q:focus-visible { outline: 2px solid #4DAEE5; outline-offset: -2px; border-radius: 14px; }
    .faq-q:active { background: #edf2fb; }
    .faq-q svg { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); color: #1E56B5; }
    .faq-item.open .faq-q svg { transform: rotate(180deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .faq-item.open .faq-a { max-height: 300px; }
    .faq-a-inner {
      padding: 0 1.4rem 1.2rem;
      font-size: 0.9rem;
      color: #5a6e8c;
      line-height: 1.75;
    }


    /* Accordion step cards */
    .acc-step {
      border: 1px solid #dde5f4;
      border-radius: 16px;
      margin-bottom: 1rem;
      overflow: hidden;
      background: #fff;
      transition: box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .acc-step:hover {
      box-shadow: 0 2px 12px rgba(13,27,62,0.07);
      border-color: rgba(30,86,181,0.18);
    }
    .acc-step.open {
      border-color: rgba(30,86,181,0.22);
      box-shadow: 0 2px 8px rgba(13,27,62,0.05), 0 8px 24px rgba(30,86,181,0.07);
      margin-bottom: 1.25rem;
    }
    .acc-step-head {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.15rem 1.4rem;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: #0D1B3E;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      transition: background 0.14s ease;
      letter-spacing: -0.01em;
    }
    .acc-step-head:hover { background: #f5f8fe; }
    .acc-step-head:focus-visible { outline: 2px solid #4DAEE5; outline-offset: -2px; border-radius: 16px; }
    .acc-step-head:active { background: #edf2fb; }
    .acc-step-num {
      width: 38px; height: 38px; border-radius: 12px;
      background: linear-gradient(135deg, #0D1B3E, #1E56B5);
      color: #fff; font-size: 0.92rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-family: 'Montserrat', sans-serif;
    }
    .acc-step-icon {
      width: 38px; height: 38px; border-radius: 10px;
      background: rgba(30,86,181,0.08); color: #1E56B5;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .acc-step-title { flex: 1; }
    .acc-step-chevron {
      flex-shrink: 0; color: #1E56B5;
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
    }
    .acc-step.open .acc-step-chevron { transform: rotate(180deg); }
    .acc-step-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .acc-step.open .acc-step-body { max-height: 2000px; }
    .acc-step-inner {
      padding: 0.2rem 1.4rem 1.6rem 5.2rem;
      font-size: 0.9rem;
      color: #5a6e8c;
      line-height: 1.75;
      border-top: 1px solid #edf2fb;
      margin-top: 0.2rem;
    }
    @media(max-width:639px) {
      .acc-step-inner { padding-left: 1.4rem; }
    }

    /* Mistake accordion cards */
    .acc-mistake {
      border: 1px solid rgba(239,68,68,0.15);
      border-radius: 16px;
      margin-bottom: 0.75rem;
      overflow: hidden;
      background: #fff;
      transition: box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .acc-mistake:hover {
      box-shadow: 0 2px 12px rgba(239,68,68,0.06);
      border-color: rgba(239,68,68,0.25);
    }
    .acc-mistake-head {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 1.1rem 1.4rem;
      cursor: pointer;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      color: #0D1B3E;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      transition: background 0.14s ease;
    }
    .acc-mistake-head:hover { background: rgba(239,68,68,0.03); }
    .acc-mistake-head:focus-visible { outline: 2px solid #ef4444; outline-offset: -2px; border-radius: 16px; }
    .acc-mistake-head:active { background: rgba(239,68,68,0.05); }
    .acc-mistake-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(239,68,68,0.08); color: #ef4444;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .acc-mistake-num {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800; font-size: 0.85rem; color: #ef4444;
      flex-shrink: 0; min-width: 18px;
    }
    .acc-mistake-title { flex: 1; }
    .acc-mistake-chevron {
      flex-shrink: 0; color: #ef4444;
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
    }
    .acc-mistake.open .acc-mistake-chevron { transform: rotate(180deg); }
    .acc-mistake-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .acc-mistake.open .acc-mistake-body { max-height: 600px; }
    .acc-mistake-inner {
      padding: 0 1.4rem 1.3rem 4.8rem;
      font-size: 0.88rem;
      color: #5a6e8c;
      line-height: 1.7;
    }
    @media(max-width:639px) {
      .acc-mistake-inner { padding-left: 1.4rem; }
      .cl-grid { grid-template-columns: 1fr; }
    }

    /* Checklist grid cards */
    .cl-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .cl-card {
      background: #fff;
      border: 1px solid #dde5f4;
      border-radius: 16px;
      padding: 1.4rem;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .cl-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(13,27,62,0.07), 0 1px 3px rgba(13,27,62,0.04);
      border-color: rgba(30,86,181,0.2);
    }
    .cl-card-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: linear-gradient(135deg, rgba(30,86,181,0.08), rgba(77,174,229,0.06));
      color: #1E56B5;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cl-card-check {
      position: absolute; top: -4px; right: -4px;
      width: 18px; height: 18px; border-radius: 50%;
      background: #1E56B5; color: #fff;
      display: flex; align-items: center; justify-content: center;
    }
    .cl-card strong { color: #0D1B3E; font-size: 0.9rem; display: block; margin-bottom: 0.3rem; }
    .cl-card p { font-size: 0.84rem; color: #5a6e8c; line-height: 1.6; margin: 0; }

    /* CTA section */
    .cta-box {
      background:
        radial-gradient(ellipse 80% 60% at 90% 10%, rgba(30,86,181,0.055) 0%, transparent 60%),
        radial-gradient(ellipse 60% 60% at  5% 90%, rgba(77,174,229,0.04)  0%, transparent 55%),
        #f5f8fe;
      border: 1px solid #dde5f4;
      border-radius: 20px;
      padding: 3rem 2rem;
      text-align: center;
    }

    /* Trust badges */
    .trust-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }
    .trust-badge {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
      color: #5a6e8c;
      font-weight: 500;
    }
    .trust-badge svg { color: #1E56B5; flex-shrink: 0; }

    /* Related links */
    .related-card {
      background: #fff;
      border: 1px solid #dde5f4;
      border-radius: 16px;
      padding: 1.5rem;
      text-decoration: none;
      display: block;
      transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), box-shadow 0.22s ease;
      box-shadow: 0 1px 2px rgba(13,27,62,0.06), 0 4px 8px rgba(13,27,62,0.04);
    }
    .related-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(13,27,62,0.08), 0 16px 32px rgba(13,27,62,0.06);
    }
    .related-card:focus-visible { outline: 2px solid #4DAEE5; outline-offset: 2px; }
    .related-card:active { transform: translateY(0); }

    /* RELATED CARD V2 */
    .related-card-v2 {
      background: #fff;
      border: 1px solid rgba(30,86,181,0.10);
      border-radius: 16px;
      padding: 1.5rem;
      text-decoration: none;
      display: block;
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, border-color 0.25s ease;
      box-shadow: 0 2px 8px rgba(13,27,62,0.04);
    }
    .related-card-v2:hover {
      transform: translateY(-4px);
      border-color: rgba(30,86,181,0.25);
      box-shadow: 0 4px 8px rgba(13,27,62,0.06), 0 12px 28px rgba(30,86,181,0.10);
    }
    .related-card-v2:focus-visible { outline: 2px solid #4DAEE5; outline-offset: 2px; }
    .related-card-v2:active { transform: translateY(-1px); }
    .related-card-v2 .arrow-icon {
      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }
    .related-card-v2:hover .arrow-icon {
      transform: translateX(4px);
    }

    /* Info box */
    .info-box {
      background: #f5f8fe;
      border: 1px solid #dde5f4;
      border-left: 4px solid #1E56B5;
      border-radius: 0 12px 12px 0;
      padding: 1.25rem 1.5rem;
      font-size: 0.88rem;
      color: #5a6e8c;
      line-height: 1.7;
      margin: 1rem 0 1.2rem;
    }
    .info-box strong { color: #0D1B3E; font-weight: 600; }

    /* Breadcrumb */
    .breadcrumb {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.45);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }
    .breadcrumb a {
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.14s ease;
    }
    .breadcrumb a:hover { color: #fff; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(77,174,229,0.38); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(77,174,229,0.55); }
    html { scrollbar-width: thin; scrollbar-color: rgba(77,174,229,0.38) transparent; }

    /* Mobile menu */
    #mob-menu { max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.22s ease; }
    #mob-menu.open { max-height: 380px; opacity: 1; }

    @media (max-width: 640px) {
      .section-card { padding: 1.5rem; }
      .timeline-step { gap: 1rem; }
      .step-number { width: 40px; height: 40px; font-size: 0.95rem; border-radius: 12px; }
      .timeline-step:not(:last-child)::after { left: 19px; top: 46px; }
    }
  .lang-toggle {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.lang-btn {
  padding: 0.28rem 0.62rem; border: none; background: transparent; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.71rem;
  color: rgba(255,255,255,0.48); letter-spacing: 0.06em;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn.active { background: rgba(255,255,255,0.16); color: #fff; }
.lang-btn:hover { color: rgba(255,255,255,0.85); }
.lang-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
  
    :root{--bg-base:#ffffff;--bg-raised:#f5f8fe;--bg-card:#ffffff;--bg-faq-btn:#ffffff;--bg-faq-hov:#f5f8fe;--clr-h:#0D1B3E;--clr-b:#5a6e8c;--bdr:#dde5f4;--bdr-faq:#edf2fb}
    html.dark{--bg-base:#0a1428;--bg-raised:#0D1B3E;--bg-card:#122244;--bg-faq-btn:#0D1B3E;--bg-faq-hov:#122244;--clr-h:#e8f0fa;--clr-b:#8aaac8;--bdr:rgba(77,174,229,0.18);--bdr-faq:rgba(77,174,229,0.10)}
    html.dark body{background:var(--bg-base)!important;color:var(--clr-h)!important}
    html.dark .sec-white{background:var(--bg-base)!important}
    html.dark .sec-raised{background:var(--bg-raised)!important}
    html.dark .hero-bg{background:linear-gradient(160deg,#04091a 0%,#0D1B3E 50%,#122244 100%)!important}
    html.dark ::-webkit-scrollbar-track{background:#0a1428}
    .logo-light{display:none}html.dark .logo-dark{display:none!important}html.dark .logo-light{display:inline!important}
    html.dark .section-card{background:var(--bg-card)!important;border-color:var(--bdr)!important;box-shadow:0 1px 2px rgba(0,0,0,0.3),0 4px 8px rgba(0,0,0,0.2),0 0 0 1px rgba(77,174,229,0.08) inset!important}
    html.dark .section-card:hover{box-shadow:0 2px 4px rgba(0,0,0,0.3),0 8px 18px rgba(0,0,0,0.25),0 0 0 1px rgba(77,174,229,0.12) inset!important}
    html.dark .section-h2{color:#e8f0fa!important}
    html.dark .section-h3{color:#e8f0fa!important}
    html.dark .body-text{color:#8aaac8!important}
    html.dark .body-text a{color:#4DAEE5!important}
    html.dark .step-content h3{color:#e8f0fa!important}
    html.dark .info-box{background:var(--bg-raised)!important;border-color:var(--bdr)!important;color:#8aaac8!important}
    html.dark .info-box strong{color:#c8daf0!important}
    html.dark .mistake-item{background:var(--bg-raised)!important;border-color:var(--bdr)!important}
    html.dark .mistake-item span,html.dark .mistake-item p{color:#8aaac8!important}
    html.dark .mistake-item strong{color:#c8daf0!important}
    html.dark .check-item{border-bottom-color:var(--bdr-faq)!important}
    html.dark .check-item span{color:#8aaac8!important}
    html.dark .check-item strong{color:#c8daf0!important}

    html.dark .acc-step{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .acc-step:hover{box-shadow:0 2px 12px rgba(0,0,0,0.3)!important;border-color:rgba(77,174,229,0.25)!important}
    html.dark .acc-step-head{color:#e8f0fa!important}
    html.dark .acc-step-head:hover{background:var(--bg-faq-hov)!important}
    html.dark .acc-step-inner{color:#8aaac8!important;border-top-color:rgba(77,174,229,0.10)!important}
    html.dark .acc-step.open{border-color:rgba(77,174,229,0.22)!important;box-shadow:0 2px 8px rgba(0,0,0,0.2),0 8px 24px rgba(0,0,0,0.15)!important}
    html.dark .acc-step-inner a{color:#4DAEE5!important}
    html.dark .acc-step-inner strong[style*="color:#0D1B3E"]{color:#c8daf0!important}
    html.dark .acc-step-icon{background:rgba(77,174,229,0.12)!important;color:#4DAEE5!important}
    html.dark .acc-mistake{background:var(--bg-card)!important;border-color:rgba(239,68,68,0.12)!important}
    html.dark .acc-mistake:hover{border-color:rgba(239,68,68,0.25)!important}
    html.dark .acc-mistake-head{color:#e8f0fa!important}
    html.dark .acc-mistake-head:hover{background:rgba(239,68,68,0.05)!important}
    html.dark .acc-mistake-inner{color:#8aaac8!important}
    html.dark .acc-mistake-icon{background:rgba(239,68,68,0.12)!important}
    html.dark .cl-card{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .cl-card:hover{border-color:rgba(77,174,229,0.25)!important;box-shadow:0 4px 12px rgba(0,0,0,0.3)!important}
    html.dark .cl-card strong{color:#e8f0fa!important}
    html.dark .cl-card p{color:#8aaac8!important}
    html.dark .cl-card-icon{background:rgba(77,174,229,0.12)!important;color:#4DAEE5!important}
    html.dark .faq-item{background:var(--bg-faq-btn)!important;border-color:var(--bdr)!important}
    html.dark .faq-q{color:#e8f0fa!important}
    html.dark .faq-q:hover{background:var(--bg-faq-hov)!important}
    html.dark .faq-a-inner{color:#8aaac8!important}
    html.dark .faq-a-inner a{color:#4DAEE5!important}
    html.dark .related-card{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .related-card h3,html.dark .related-card strong{color:#e8f0fa!important}
    html.dark .related-card p,html.dark .related-card span{color:#8aaac8!important}
    html.dark .related-card-v2{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .related-card-v2 div[style*="color:#0D1B3E"],html.dark .related-card-v2 strong{color:#e8f0fa!important}
    html.dark .related-card-v2 p,html.dark .related-card-v2 span:not([style*="#1E56B5"]){color:#8aaac8!important}
    html.dark .related-card-v2:hover{border-color:rgba(77,174,229,0.3)!important}
    html.dark .cta-box{background:var(--bg-raised)!important;border-color:var(--bdr)!important}
    html.dark .cta-box h2{color:#e8f0fa!important}
    html.dark .cta-box p{color:#8aaac8!important}
    html.dark .trust-badge{color:#8aaac8!important}
    html.dark .tldr-summary{background:var(--bg-raised)!important;border-color:var(--bdr)!important;color:#8aaac8!important}
    html.dark .tldr-summary strong{color:#c8daf0!important}
    html.dark .tldr-summary span{color:#8aaac8!important}
    html.dark .tl-dot{background:var(--bg-base)!important}
    html.dark .tl-label{color:#e8f0fa!important}
    html.dark .tl-duration{background:rgba(30,86,181,0.25)!important;color:#7ECEF5!important}
    html.dark [style*="color:#0D1B3E"]{color:#e8f0fa!important}
    html.dark [style*="color:#5a6e8c"]{color:#8aaac8!important}
    html.dark [style*="color:#374151"]{color:#a8c0d8!important}
    html.dark [style*="background: #f5f8fe"],html.dark [style*="background:#f5f8fe"]{background:var(--bg-raised)!important}
    html.dark [style*="border-color:#dde5f4"],html.dark [style*="border: 1px solid #dde5f4"]{border-color:var(--bdr)!important}
    html.dark #dark-toggle:hover,html.dark #dark-toggle-mob:hover{background:rgba(255,255,255,0.14)!important;color:#fff!important}
  
    html.dark .bg-tinted{background:var(--bg-base)!important}
    html.dark .badge{background:rgba(77,174,229,0.12)!important;border-color:rgba(77,174,229,0.25)!important;color:#7ECEF5!important}
    html.dark .faq-wrap{border-color:var(--bdr)!important}
    html.dark .faq-btn{background:var(--bg-card)!important;color:#e8f0fa!important}
    html.dark .faq-btn:hover{background:var(--bg-raised)!important}
    html.dark .faq-icon{background:rgba(30,86,181,0.25)!important;color:#7ECEF5!important}
    html.dark .faq-content{color:#8aaac8!important;border-top-color:rgba(77,174,229,0.10)!important}
    html.dark .faq-content a{color:#4DAEE5!important}
    html.dark [style*="background:#ffffff"]{background:var(--bg-base)!important}
    html.dark [style*="background:#fff"]{background:var(--bg-base)!important}
    html.dark #ham-btn span{background:#fff!important}
    html.dark [style*="background: #ffffff"]{background:var(--bg-base)!important}
    html.dark [style*="color:#4a5870"]{color:#8aaac8!important}
    html.dark [style*="background:#f8fafd"]{background:var(--bg-raised)!important}
    html.dark [style*="background:#e8eef8"]{background:rgba(77,174,229,0.12)!important}
    html.dark [style*="border-bottom:1px solid #dde5f4"]{border-color:var(--bdr)!important}
    html.dark [style*="border-top:1px solid #edf2fb"]{border-color:rgba(77,174,229,0.10)!important}
    html.dark .bg-white{background:var(--bg-card)!important}

    /* ══ Wave dividers ══ */
    .wave-divider{display:block;width:100vw!important;height:auto;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}
    /* ── Section alternation ── */
    .content-section-raised{background:#f5f8fe;position:relative;padding:3rem 0}
    .content-section-white{background:#ffffff;position:relative;padding:3rem 0}
    html.dark .content-section-raised{background:var(--bg-raised)!important}
    html.dark .content-section-white{background:var(--bg-base)!important}
    /* ── Ring gauge ── */
    .ring-gauge-bg{fill:none;stroke:rgba(30,86,181,0.12)}
    .ring-gauge-fill{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.8s cubic-bezier(0.16,1,0.3,1)}
    /* ── Hero spotlight ── */
    .hero-spotlight{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(600px circle at var(--mx,50%) var(--my,30%),rgba(77,174,229,0.08),transparent 60%)}
    /* ── Shield animation ── */
    @keyframes shield-draw{to{stroke-dashoffset:0}}
    @keyframes check-draw{to{stroke-dashoffset:0}}
    /* ── Dark mode: wave dividers ── */
    html.dark .wave-divider:not([style*="linear-gradient"]){background:transparent!important}
    html.dark .wave-divider path[fill="#ffffff"]{fill:var(--bg-base)!important}
    html.dark .wave-divider path[fill="#f5f8fe"]{fill:var(--bg-raised)!important}
    html.dark .wave-divider path[fill="#04091a"]{fill:#04091a!important}
    html.dark .wave-divider rect[fill="#f5f8fe"]{fill:var(--bg-raised)!important}
    html.dark .wave-fill-white{fill:var(--bg-base)!important}
    html.dark .wave-fill-raised{fill:var(--bg-raised)!important}
    html.dark .wave-divider path.wave-fill-raised{fill:var(--bg-raised)!important}
    html.dark svg.wave-divider[style*="background:linear-gradient"]{background:linear-gradient(160deg,#04091a 0%,#0D1B3E 50%,#122244 100%)!important}
    html.dark .wave-fill-white{fill:var(--bg-base)!important}
    /* ── Dark mode: section backgrounds ── */
    html.dark main{background:var(--bg-base)!important}
    html.dark main > section{background:var(--bg-base)!important}
    html.dark main > section[style*="background:#f5f8fe"],
    html.dark main > section[style*="background: #f5f8fe"]{background:var(--bg-raised)!important}
    html.dark section[style*="background:#ffffff"]{background:var(--bg-base)!important}
    html.dark section[style*="background:#f5f8fe"]{background:var(--bg-raised)!important}
    html.dark #ring-gauges{background:var(--bg-card,#122244)!important;border-color:var(--bdr,rgba(77,174,229,0.18))!important}
    html.dark .ring-gauge-bg{stroke:rgba(77,174,229,0.15)!important}
    html.dark .floating-shape{opacity:0.03!important}

/* Hero split layout */
  @media(max-width:768px){
    .hero-split{flex-direction:column!important;text-align:center}
    .hero-text-col{text-align:center}
    .hero-text-col .breadcrumb{justify-content:center!important}
    .hero-text-col>div:last-child{justify-content:center}
    .hero-graphic-col{flex:0 0 auto!important;max-width:320px;margin:0 auto}
  }
  /* Flowchart step entrance animation */
  .flow-step{transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1)}
  .flow-step.visible{opacity:1!important;transform:translateY(0)!important}

@media(max-width:639px){#ring-gauges{grid-template-columns:1fr!important;gap:2rem!important}}

.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2.5rem}@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.footer-grid{grid-template-columns:1.6fr 1fr 2fr 1fr}}