/* 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;
}

    @keyframes dash { to { stroke-dashoffset: -24; } }
    @keyframes glow-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
    @keyframes spin-cw { to { transform: rotate(360deg); } }
    @keyframes spin-ccw { to { transform: rotate(-360deg); } }
    @keyframes bubble-rise { 0% { transform: translateY(0); opacity: 0.7; } 100% { transform: translateY(-40px); opacity: 0; } }
    .flow-line { stroke-dasharray: 8 4; animation: dash 1.5s linear infinite; }
    .glow-node { animation: glow-pulse 2.5s ease-in-out infinite; }

:root {
      --bg-base:    #ffffff;
      --bg-raised:  #f5f8fe;
      --bg-card:    #ffffff;
      --clr-h:      #0D1B3E;
      --clr-b:      #5a6e8c;
      --clr-muted:  #4a5870;
      --bdr:        #dde5f4;
    }
    html.dark {
      --bg-base:    #0a1428;
      --bg-raised:  #0D1B3E;
      --bg-card:    #122244;
      --clr-h:      #e8f0fa;
      --clr-b:      #8aaac8;
      --clr-muted:  #6888a8;
      --bdr:        rgba(77,174,229,0.18);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { overflow-x: hidden; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-base);
      color: var(--clr-h);
      transition: background 0.25s ease, color 0.25s ease;
      line-height: 1.7;
      overflow-x: hidden;
    }

    .nav-blur { backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
    .logo-img { height: 52px; width: auto; display: block; }
    .nav-link { font-family:'Inter',sans-serif;font-size:0.84rem;font-weight:500;color:rgba(195,215,245,0.70);text-decoration:none;padding:0.42rem 0.85rem;border-radius:8px;transition:color 0.15s ease,background 0.15s ease;letter-spacing:0.01em; }
    .nav-link:hover { color:#fff;background:rgba(255,255,255,0.07); }
    .nav-link:focus-visible { outline:2px solid #4DAEE5;outline-offset:2px; }
    .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}}
    #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:420px;opacity:1}
    .content-wrap { max-width:1060px;margin:0 auto;padding: 3.5rem clamp(2rem, 5vw, 4rem) 5rem; }
    .ds-breadcrumb { font-size:0.82rem;color:rgba(195,215,245,0.50);margin-bottom:1.5rem;display:flex;align-items:center;gap:0.5rem;  justify-content:center; }
    .ds-breadcrumb a { color:rgba(195,215,245,0.60);text-decoration:none;transition:color 0.14s ease; }
    .ds-breadcrumb a:hover { color:rgba(195,215,245,0.9); }
    .ds-eyebrow { font-family:'Montserrat',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#4DAEE5;margin-bottom:0.9rem;  text-align:center; }
    .ds-title { font-family:'Montserrat',sans-serif;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-0.03em;color:var(--clr-h);line-height:1.15;margin-bottom:0.5rem;  text-align:center; }
    .ds-subtitle { font-size:0.95rem;color:var(--clr-b);line-height:1.75;margin-bottom:0.5rem;max-width:640px;  text-align:center; margin-left:auto; margin-right:auto; }
    .ds-updated { font-size:0.78rem;color:var(--clr-b);margin-bottom:3.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--bdr);  text-align:center; }
    .ds-section { margin-bottom: 4.5rem; }
    .ds-section h2 {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.025em;
      color: var(--clr-h);
      margin-bottom: 1.2rem;
      padding-bottom: 0;
      border-bottom: none;
      line-height: 1.2;
      text-align: center;
    }
    .ds-section h3 { font-family:'Montserrat',sans-serif;font-size:1.1rem;font-weight:700;color:var(--clr-h);margin-top:1.8rem;margin-bottom:0.7rem;letter-spacing:-0.01em;  text-align:center; }
    .ds-section p { font-size:0.95rem;color:var(--clr-b);line-height:1.78;margin-bottom:1rem; }
    .ds-section ul,.ds-section ol { margin:0.6rem 0 1.1rem 1.2rem;display:flex;flex-direction:column;gap:0.45rem; }
    .ds-section ul li,.ds-section ol li { font-size:0.95rem;color:var(--clr-b);line-height:1.72; }
    .ds-section a { color:#4DAEE5;text-decoration:none;transition:color 0.14s ease; }
    .ds-section a:hover { color:#7ec8f0;text-decoration:underline; }
    .ds-box { background:var(--bg-raised);border:1px solid var(--bdr);border-radius:12px;padding:1.4rem 1.75rem;font-size:0.92rem;color:var(--clr-b);line-height:1.72;margin:1.2rem 0 1.5rem;transition:background 0.25s ease,border-color 0.25s ease;  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(30,86,181,0.06); position: relative; overflow: hidden; }
    .ds-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #1E56B5, #4DAEE5); border-radius: 12px 12px 0 0; }
    .ds-box strong { color:var(--clr-h);font-weight:600; }
    .ds-highlight-box { background:var(--bg-raised);border:1px solid var(--bdr);border-left:4px solid #1E56B5;border-radius:0 12px 12px 0;padding:1.4rem 1.75rem;font-size:0.92rem;color:var(--clr-b);line-height:1.72;margin:1.2rem 0 1.5rem;transition:background 0.25s ease,border-color 0.25s ease;  box-shadow: 0 2px 8px rgba(30,86,181,0.08), 0 1px 2px rgba(0,0,0,0.04); }
    .ds-highlight-box strong { color:var(--clr-h);font-weight:600; }
    .ds-step { display:flex;gap:1.2rem;align-items:flex-start;margin-bottom:1.5rem; }
    .ds-step-num { flex-shrink:0;width:38px;height:38px;background:#1E56B5;color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:0.95rem;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,0.3),0 4px 10px rgba(30,86,181,0.3); }
    .ds-step-num::after { content: ""; position: absolute; inset: -3px; border-radius: 13px; background: linear-gradient(135deg, rgba(30,86,181,0.2), rgba(77,174,229,0.1)); z-index: -1; }
    .ds-step-content h3 { margin-top:0; }
    .ds-table-wrap { overflow-x:auto;margin:1.2rem 0 1.5rem;border-radius:12px;border:1px solid var(--bdr);  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(30,86,181,0.06); border-radius: 14px; overflow: hidden; }
    .ds-table { width:100%;border-collapse:collapse;font-size:0.85rem; }
    .ds-table th { background: linear-gradient(135deg, var(--bg-raised), rgba(30,86,181,0.06));font-family:'Montserrat',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.02em;color:var(--clr-h);text-align:left;padding:0.75rem 1rem;border-bottom:1px solid var(--bdr); }
    .ds-table td { padding:0.65rem 1rem;color:var(--clr-b);border-bottom:1px solid var(--bdr);line-height:1.55; }
    .ds-table tr:last-child td { border-bottom:none; }
    html.dark .ds-table th { background:var(--bg-card); }
    .faq-item { border:1px solid var(--bdr);border-radius:12px;margin-bottom:0.65rem;overflow:hidden;transition:border-color 0.25s ease; }
    .faq-q { display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:1rem 1.25rem;background:var(--bg-raised);border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:0.88rem;font-weight:600;color:var(--clr-h);text-align:left;line-height:1.5;transition:background 0.15s ease,color 0.15s ease; }
    .faq-q:hover { background:var(--bg-raised);opacity:0.85; }
    .faq-q:focus-visible { outline:2px solid #4DAEE5;outline-offset:-2px; }
    .faq-q svg { flex-shrink:0;transition:transform 0.2s ease; }
    .faq-item.open .faq-q svg { transform:rotate(180deg); }
    .faq-a { display:none;padding:0 1.25rem 1rem;font-size:0.87rem;color:var(--clr-b);line-height:1.7; }
    .faq-item.open .faq-a { display:block; }
    html.dark .faq-q { background:var(--bg-card); }
    .cta-section { background: linear-gradient(135deg, #04091a 0%, #0D1B3E 50%, #122244 100%);border: 1px solid rgba(77,174,229,0.18);border-radius:16px;padding:2.5rem 2rem;text-align:center;margin-top:3rem;margin-bottom:1rem;transition:background 0.25s ease,border-color 0.25s ease;  box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden; position: relative; }
    .cta-section h2 { font-family:'Montserrat',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-0.02em;color: #fff;margin-bottom:0.8rem;border:none;padding-bottom:0; }
    .cta-section p { font-size:0.9rem;color: rgba(195,215,245,0.72);line-height:1.75;margin-bottom:1.5rem;max-width:560px;margin-left:auto;margin-right:auto; }
    .toc { background:var(--bg-raised);border:1px solid var(--bdr);border-radius:12px;padding:1.5rem 1.75rem;margin-bottom:3.5rem;transition:background 0.25s ease,border-color 0.25s ease; }
    html.dark .toc { background:var(--bg-card); }
    .toc-title { font-family:'Montserrat',sans-serif;font-size:0.82rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--clr-muted);margin-bottom:0.8rem; }
    .toc ol { margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:0.4rem; }
    .toc ol li { font-size:0.85rem;color:var(--clr-b);line-height:1.55; }
    .toc ol li a { color:#4DAEE5;text-decoration:none;transition:color 0.14s ease; }
    .toc ol li a:hover { color:#7ec8f0; }
    footer { background:#04091a;border-top:1px solid rgba(255,255,255,0.07); }
    html.dark .ds-box { background:var(--bg-card); }
    html.dark .ds-highlight-box { background:var(--bg-card); }
    html.dark .cta-section { background:var(--bg-card); }
    .logo-light { display:none; }
    html.dark .logo-dark { display:none !important; }
    html.dark .logo-light { display:inline !important; }
    html { overflow-y:scroll; }
    ::-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; }
    html.dark ::-webkit-scrollbar-thumb { background:rgba(77,174,229,0.30); }
    html.dark ::-webkit-scrollbar-thumb:hover { background:rgba(77,174,229,0.48); }
    html.dark { scrollbar-color:rgba(77,174,229,0.30) transparent; }

    .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; }
  
    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-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 .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 .related-card{background:var(--bg-card)!important;border-color:var(--bdr)!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}
    /* 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);
    }
    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 .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 [style*="color:#0D1B3E"]{color:#e8f0fa!important}
    html.dark [style*="color:#5a6e8c"]{color:#8aaac8!important}
    html.dark [style*="color:#374151"]{color:#a8c0d8!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}
  
    
.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%);
}
.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%);
}
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.85rem; border-radius: 999px;
  background: rgba(30,86,181,0.09);
  border: 1px solid rgba(30,86,181,0.20);
  color: #1E56B5;
  font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.badge-dark {
  background: rgba(77,174,229,0.13);
  border-color: rgba(77,174,229,0.30);
  color: #7ECEF5;
}

/* STAT CARDS */
.stat-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--bdr, #dde5f4);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(30,86,181,0.06);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(13,27,62,0.06), 0 12px 24px rgba(30,86,181,0.10); }
.stat-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #1E56B5, #4DAEE5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.35rem;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--clr-b, #5a6e8c);
  line-height: 1.4;
}
html.dark .stat-card { background: var(--bg-card) !important; border-color: var(--bdr) !important; }
html.dark .stat-value { -webkit-text-fill-color: transparent !important; }
html.dark .stat-label { color: #8aaac8 !important; }
.floating-shape { position: absolute; pointer-events: none; opacity: 0.03; }
.section-badge { display: flex; width: fit-content; margin: 0 auto 1rem; }
.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;
}

    /* ══ REDESIGN INJECTION ══ */
    .wave-divider { display: block; width: 100vw !important; height: auto; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
    /* ══ Section alternation with wave transitions ══ */
    .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; }
    .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;
    }
    .factor-card-v2 {
      background: #fff; border-radius: 20px; padding: 2rem 1.5rem;
      border: 1px solid rgba(30,86,181,0.10); position: relative; overflow: hidden;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
      box-shadow: 0 1px 2px rgba(13,27,62,0.05), 0 4px 12px rgba(13,27,62,0.06);
    }
    .factor-card-v2:hover {
      transform: translateY(-6px);
      box-shadow: 0 4px 8px rgba(13,27,62,0.06), 0 16px 32px rgba(30,86,181,0.10);
    }
    
    /* 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);
    }

    @keyframes shield-draw { to { stroke-dashoffset: 0; } }
    @keyframes check-draw { to { stroke-dashoffset: 0; } }
    html.dark .wave-divider path{fill:var(--bg-base)!important}
    html.dark .wave-divider path[fill="#04091a"]{fill:#04091a!important}
    html.dark .factor-card-v2{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .factor-card-v2 h3{color:#e8f0fa!important}
    html.dark .factor-card-v2 p{color:#8aaac8!important}
  
    
html.dark .floating-shape { opacity: 0.02 !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 .wave-divider path[fill="#ffffff"] { fill: var(--bg-base) !important; }
html.dark .wave-divider path[fill="#f5f8fe"] { fill: var(--bg-raised) !important; }


html.dark .sec-white { background: var(--bg-base) !important; }
html.dark .sec-raised { background: var(--bg-raised) !important; }
html.dark .wave-white { background: transparent !important; }
html.dark .wave-raised { background: transparent !important; }
html.dark .wave-white path { fill: var(--bg-raised) !important; }
html.dark .wave-raised path { fill: var(--bg-base) !important; }
html.dark .wave-raised rect { fill: var(--bg-raised) !important; }
html.dark main section { color: #8aaac8 !important; }
html.dark main section h2 { color: #e8f0fa !important; }
html.dark main section h3 { color: #e8f0fa !important; }
html.dark main section p { color: #8aaac8 !important; }
html.dark main section li { color: #8aaac8 !important; }
html.dark main section span { color: #8aaac8 !important; }
html.dark main section td { color: #8aaac8 !important; }
html.dark main section th { color: #c8daf0 !important; }
html.dark main section strong { color: #c8daf0 !important; }
html.dark main section a { color: #4DAEE5 !important; }
html.dark main section a:hover { color: #7ECEF5 !important; }
html.dark main section label { color: #8aaac8 !important; }

/* Component dark overrides */
html.dark .ds-box{background:var(--bg-card)!important;border-color:var(--bdr)!important;color:#8aaac8!important}
html.dark .ds-box strong{color:#c8daf0!important}
html.dark .ds-box a{color:#4DAEE5!important}
html.dark .ds-box::before{background:linear-gradient(90deg,#4DAEE5,#7ECEF5)!important}
html.dark .ds-highlight-box{background:var(--bg-card)!important;border-color:var(--bdr)!important;color:#8aaac8!important}
html.dark .ds-highlight-box strong{color:#c8daf0!important}
html.dark .ds-highlight-box a{color:#4DAEE5!important}
html.dark .ds-table{background:var(--bg-card)!important}
html.dark .ds-table-wrap{border-color:var(--bdr)!important}
html.dark .ds-table th{background:linear-gradient(135deg,var(--bg-raised),rgba(77,174,229,0.08))!important;border-color:var(--bdr)!important;color:#c8daf0!important}
html.dark .ds-table td{border-color:var(--bdr)!important}
html.dark .ds-table td strong{color:#e8f0fa!important}
html.dark .ds-table tr[style*="background"]{background:var(--bg-raised)!important}
html.dark .faq-item{border-color:var(--bdr)!important;background:transparent!important}
html.dark .faq-q{background:var(--bg-card)!important;color:#e8f0fa!important}
html.dark .faq-a{color:#8aaac8!important}
html.dark .faq-a p{color:#8aaac8!important}
html.dark .cta-section{background:var(--bg-card)!important;border-color:var(--bdr)!important}
html.dark .cta-section h2{color:#e8f0fa!important}
html.dark .cta-section p{color:#8aaac8!important}
html.dark .toc{background:var(--bg-card)!important;border-color:var(--bdr)!important}
html.dark .toc a{color:#4DAEE5!important}
html.dark .external-citations{background:var(--bg-raised)!important;border-color:var(--bdr)!important}
html.dark .external-citations a{color:#4DAEE5!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}

    main{background:#f5f8fe}html.dark main{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}
  
    /* ── Canonical dark mode (aligned to erfolge) ── */
    html.dark body{background:var(--bg-base)!important;color:var(--clr-h)!important}
    html.dark [style*="color: #0D1B3E"]{color:#e8f0fa!important}
    html.dark [style*="color: #5a6e8c"]{color:#8aaac8!important}
    html.dark [style*="color:#8a9ab8"]{color:#7a9ab8!important}
    html.dark [style*="color: #8a9ab8"]{color:#7a9ab8!important}
    html.dark [style*="color:#1E56B5"]{color:#4DAEE5!important}
    html.dark [style*="color: #1E56B5"]{color:#4DAEE5!important}
    html.dark [style*="background:#f5f8fe"]{background:var(--bg-raised)!important}
    html.dark [style*="background: #f5f8fe"]{background:var(--bg-raised)!important}
    html.dark [style*="border-color:#dde5f4"]{border-color:var(--bdr)!important}
    html.dark [style*="border:1px solid #dde5f4"]{border-color:var(--bdr)!important}
    html.dark [style*="border-top:1px solid #dde5f4"]{border-color:var(--bdr)!important}
    html.dark section[style*="background:#ffffff"]{background:var(--bg-base)!important}
    html.dark section[style*="background: #ffffff"]{background:var(--bg-base)!important}
    html.dark section[style*="background:#fff"]{background:var(--bg-base)!important}
    html.dark section[style*="background:#f5f8fe"]{background:var(--bg-base)!important}
    html.dark .case-zigzag{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .story-mag{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .related-card-v2:hover{border-color:rgba(77,174,229,0.3)!important}
    html.dark .gauge-number{fill:#e8f0fa!important}
    html.dark .gauge-label{fill:#8aaac8!important}
    html.dark svg text[fill="#0D1B3E"]{fill:#e8f0fa!important}
    html.dark svg text[fill="#5a6e8c"]{fill:#8aaac8!important}
    html.dark svg text[fill="#8a9ab8"]{fill:#7a9ab8!important}
    html.dark .svg-text-dark{fill:#e8f0fa!important}
    html.dark .svg-text-muted{fill:#8aaac8!important}
    html.dark .svg-text-light{fill:#7a9ab8!important}
    html.dark h2{color:#e8f0fa!important}
    html.dark h3{color:#e8f0fa!important}
    html.dark [style*="background:linear-gradient(135deg,rgba(30,86,181,0.06)"]{background:rgba(30,86,181,0.15)!important;border-color:rgba(77,174,229,0.2)!important}
    html.dark [style*="rgba(30,86,181,0.06)"]{background:rgba(30,86,181,0.18)!important;border-color:rgba(77,174,229,0.2)!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 p[style*="color:#8a9ab8"]{color:#5a8aaa!important}
    html.dark .ds-section:nth-child(even){background:var(--bg-raised)!important;border-color:var(--bdr)!important}
    html.dark .ds-table-wrap th{background:var(--bg-raised)!important;color:#e8f0fa!important;border-color:var(--bdr)!important}
    html.dark .ds-table-wrap td{background:var(--bg-card)!important;color:#8aaac8!important;border-color:var(--bdr)!important}
    html.dark .faq-a-inner strong{color:#c8daf0!important}
    html.dark .faq-a-inner a{color:#4DAEE5!important}
  
    /* ── Universal dark-mode: background & wave pattern (from erfolge.html) ── */
    :root{--bg-base:#ffffff;--bg-raised:#f5f8fe;--bg-card:#ffffff;--clr-h:#0D1B3E;--clr-b:#5a6e8c;--bdr:#dde5f4}
    html.dark{--bg-base:#0a1428;--bg-raised:#0D1B3E;--bg-card:#122244;--clr-h:#e8f0fa;--clr-b:#8aaac8;--bdr:rgba(77,174,229,0.18)}
    .logo-light{display:none}html.dark .logo-dark{display:none!important}html.dark .logo-light{display:inline!important}
    html.dark .wave-fill-white{fill:var(--bg-base)!important}
    html.dark .wave-fill-raised{fill:var(--bg-raised)!important}
    html.dark .wave-fill-tinted{fill:var(--bg-base)!important}
    html.dark .wave-divider path.wave-fill-raised{fill:var(--bg-raised)!important}
    html.dark .wave-divider rect.wave-fill-raised{fill:var(--bg-raised)!important}
    html.dark .ds-wave path{fill:var(--bg-base)!important}
    html.dark .ds-wave{background:transparent!important}
    html.dark .floating-shape{opacity:0.03!important}

    /* Praxisbeispiele cards dark mode */
    html.dark .praxis-card{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .praxis-card-header{background:rgba(30,86,181,0.15)!important;border-color:rgba(77,174,229,0.12)!important}
    html.dark .praxis-card-body{color:#8aaac8!important}
    html.dark .praxis-card-body strong{color:#c8daf0!important}
    html.dark .praxis-card-body p{color:#8aaac8!important}
    html.dark .praxis-card-body span{color:#7a9ab8!important}
    html.dark .praxis-highlight{background:rgba(77,174,229,0.10)!important}
    html.dark .praxis-highlight span{color:#e8f0fa!important}
    html.dark .praxis-highlight strong{color:#e8f0fa!important}
    html.dark .praxis-stat{background:rgba(77,174,229,0.10)!important}
    html.dark .praxis-stat div:first-child{color:#7a9ab8!important}
    html.dark .praxis-stat div:last-child{color:#e8f0fa!important}

    /* Weiterführende cards dark mode */
    html.dark .weiterfuehrend-card{background:var(--bg-card)!important;border-color:var(--bdr)!important}
    html.dark .weiterfuehrend-card:hover{border-color:rgba(77,174,229,0.3)!important;box-shadow:0 4px 8px rgba(0,0,0,0.2),0 12px 28px rgba(0,0,0,0.15)!important}
    html.dark .weiterfuehrend-card h3{color:#e8f0fa!important}
    html.dark .weiterfuehrend-card p{color:#8aaac8!important}

    .weiterfuehrend-card:hover{transform:translateY(-4px);border-color:rgba(30,86,181,0.25)!important;box-shadow:0 4px 8px rgba(13,27,62,0.06),0 12px 28px rgba(30,86,181,0.10)!important}
    .weiterfuehrend-card:focus-visible{outline:2px solid #4DAEE5;outline-offset:2px}
    .weiterfuehrend-card:active{transform:translateY(-1px)}
    .weiterfuehrend-card img{transition:transform 0.4s cubic-bezier(0.16,1,0.3,1)}
    .weiterfuehrend-card:hover img{transform:scale(1.05)}
    @media(max-width:480px){
      .praxis-card-header{flex-wrap:wrap!important}
      .praxis-card-header>div:last-child{margin-left:0!important;margin-top:0.5rem;text-align:left!important}
      .praxis-card-body div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
    }

@keyframes hero-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
          @keyframes hero-glow{0%,100%{opacity:0.12;transform:scale(1)}50%{opacity:0.22;transform:scale(1.08)}}
          @keyframes hero-flow{to{stroke-dashoffset:-20}}
          .hfade{opacity:0;animation:hero-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
          .hflow{stroke-dasharray:6 4;animation:hero-flow 1.2s linear infinite}

@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}}