html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: transparent;
    }
    .skip-link {
      position: absolute;
      top: -40px; left: 0;
      background: #2196F3;
      color: #fff;
      padding: 8px 16px;
      z-index: 200;
      border-radius: 0 0 8px 0;
      transition: top 0.2s;
      text-decoration: none;
      font-weight: 600;
    }
    .skip-link:focus { top: 0; }
    .background-gradient {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: linear-gradient(-45deg, #1e3a8a, #0f172a, #1e40af, #111827);
      background-size: 400% 400%;
      animation: gradientBG 7s linear infinite alternate;
      z-index: -2;
    }
    @keyframes gradientBG {
      0% { background-position: 0% 50%; filter: brightness(1);}
      25% { background-position: 50% 100%; filter: brightness(1.2);}
      50% { background-position: 100% 50%; filter: brightness(1);}
      75% { background-position: 50% 0%; filter: brightness(0.9);}
      100% { background-position: 0% 50%; filter: brightness(1);}
    }
    .header-container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      width: 100vw;
      background: rgba(24, 25, 26, 0.72);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      min-height: 72px;
      box-shadow: 0 1px 8px 0 rgba(30,58,138,0.08);
      position: relative;
      z-index: 50;
    }
    .brand-panel {
      min-width: 240px;
      background: transparent !important;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 32px;
      border-right: 1px solid #222;
      height: 72px;
    }
    .brand-panel img {
      width: 44px;
      height: 44px;
      margin-right: 10px;
      display: block;
    }
    .brand-panel h1 {
      color: #fff;
      font-size: 1.45rem;
      font-weight: 800;
      margin: 0;
      line-height: 1;
      letter-spacing: -1px;
      display: flex;
      align-items: center;
      padding-bottom: 2px;
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .menu-panel {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 32px;
      background: transparent !important;
      min-width: 0;
    }
    .main-nav-list {
      display: flex;
      gap: 32px;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
      height: 100%;
    }
    .main-nav-list > li {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .main-nav-list > li > button.dropbtn {
      color: #fff;
      background: none;
      border: none;
      font-size: 1.16rem;
      font-weight: 700;
      padding: 7px 0 5px 0;
      border-bottom: 2.5px solid transparent;
      transition: color 0.18s, border-bottom 0.18s;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
      z-index: 2;
    }
    .main-nav-list > li > button.dropbtn:focus-visible {
      outline: 2px solid #2196F3;
      outline-offset: 2px;
    }
    .main-nav-list > li > button.dropbtn:hover,
    .main-nav-list > li > button.dropbtn[aria-expanded="true"] {
      color: #2196F3;
      border-bottom: 2.5px solid #2196F3;
    }
    .main-nav-list > li > button.dropbtn::after {
      content: '';
      display: block;
      width: 0;
      height: 2px;
      background: #2196F3;
      transition: width 0.25s;
      margin-top: 2px;
    }
    .main-nav-list > li > button.dropbtn:hover::after,
    .main-nav-list > li > button.dropbtn:focus::after {
      width: 100%;
    }
    .caret {
      display: inline-block;
      margin-left: 4px;
      vertical-align: middle;
      border-width: 6px 5px 0 5px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
      height: 0;
      width: 0;
      transition: border-top-color 0.18s;
    }
    .dropbtn:hover .caret,
    .dropbtn[aria-expanded="true"] .caret {
      border-top-color: #2196F3;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      top: 110%;
      left: 0;
      min-width: 200px;
      background: #242526ee;
      box-shadow: 0 8px 24px rgba(30, 58, 138, 0.16);
      border-radius: 10px;
      margin-top: 8px;
      z-index: 100;
      padding: 10px 0;
      animation: fadeIn 0.22s;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: none;} }
    .dropdown-content a {
      color: #fff;
      padding: 11px 28px;
      display: block;
      font-size: 1.05rem;
      background: none;
      font-weight: 500;
      text-decoration: none;
      border: none;
      transition: background 0.13s, color 0.15s;
      border-radius: 0;
    }
    .dropdown-content a:hover, .dropdown-content a:focus {
      background: #2196F3;
      color: #fff;
      outline: none;
    }
    .dropdown:focus-within .dropdown-content,
    .dropdown:hover .dropdown-content {
      display: block;
    }
    @media (max-width: 900px) {
      .header-container {
        flex-direction: column;
        min-height: unset;
      }
      .brand-panel {
        min-width: 0;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #222;
        justify-content: flex-start;
        padding: 16px 16px 16px 16px;
        height: auto;
      }
      .menu-panel {
        padding-left: 8px;
      }
      .main-nav-list {
        gap: 18px;
      }
      .dropdown-content {
        left: 0;
        min-width: 150px;
      }
    }
    .section-content {
      background: rgba(18, 24, 40, 0.72);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(30, 58, 138, 0.10);
      padding: 42px 32px 34px 32px;
      max-width: 850px;
      margin: 40px auto 0 auto;
      color: #cbd5e1;
    }
    .section-content h2 {
      color: #fff;
      font-size: 2rem;
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: 700;
    }
    .section-content ul {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      padding-left: 1.5rem;
    }
    .section-content li {
      font-size: 1.08rem;
      line-height: 1.7;
      margin-bottom: 0.7em;
    }
    main {
      margin-bottom: 36px;
    }
    .content {
      position: relative;
      z-index: 10;
      min-height: 100vh;
      padding: 40px 10vw;
      color: #f8fafc;
    }
    footer {
      color: #96a6b9;
      text-align: center;
      font-size: 1rem;
      padding: 2rem 0 1rem 0;
      opacity: 0.87;
      letter-spacing: 0.02em;
    }

/* (Copy ALL the CSS from index.php here) */
    html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: transparent; }
    .skip-link { position: absolute; top: -40px; left: 0; background: #2196F3; color: #fff; padding: 8px 16px; z-index: 200; border-radius: 0 0 8px 0; transition: top 0.2s; text-decoration: none; font-weight: 600; }
    .skip-link:focus { top: 0; }
    .background-gradient { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-45deg, #1e3a8a, #0f172a, #1e40af, #111827); background-size: 400% 400%; animation: gradientBG 7s linear infinite alternate; z-index: -2; }
    @keyframes gradientBG { 0% { background-position: 0% 50%; filter: brightness(1);} 25% { background-position: 50% 100%; filter: brightness(1.2);} 50% { background-position: 100% 50%; filter: brightness(1);} 75% { background-position: 50% 0%; filter: brightness(0.9);} 100% { background-position: 0% 50%; filter: brightness(1);} }
    .header-container { display: flex; flex-direction: row; align-items: stretch; width: 100vw; background: rgba(24, 25, 26, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-height: 72px; box-shadow: 0 1px 8px 0 rgba(30,58,138,0.08); position: relative; z-index: 50; }
    .brand-panel { min-width: 240px; background: transparent !important; display: flex; align-items: center; justify-content: flex-start; padding-left: 32px; border-right: 1px solid #222; height: 72px; }
    .brand-panel img { width: 44px; height: 44px; margin-right: 10px; display: block; }
    .brand-panel h1 { color: #fff; font-size: 1.45rem; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -1px; display: flex; align-items: center; padding-bottom: 2px; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .menu-panel { flex: 1; display: flex; align-items: center; padding-left: 32px; background: transparent !important; min-width: 0; }
    .main-nav-list { display: flex; gap: 32px; align-items: center; margin: 0; padding: 0; list-style: none; height: 100%; }
    .main-nav-list > li { position: relative; height: 100%; display: flex; align-items: center; }
    .main-nav-list > li > button.dropbtn { color: #fff; background: none; border: none; font-size: 1.16rem; font-weight: 700; padding: 7px 0 5px 0; border-bottom: 2.5px solid transparent; transition: color 0.18s, border-bottom 0.18s; font-family: inherit; cursor: pointer; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; position: relative; z-index: 2; }
    .main-nav-list > li > button.dropbtn:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
    .main-nav-list > li > button.dropbtn:hover, .main-nav-list > li > button.dropbtn[aria-expanded="true"] { color: #2196F3; border-bottom: 2.5px solid #2196F3; }
    .main-nav-list > li > button.dropbtn::after { content: ''; display: block; width: 0; height: 2px; background: #2196F3; transition: width 0.25s; margin-top: 2px; }
    .main-nav-list > li > button.dropbtn:hover::after, .main-nav-list > li > button.dropbtn:focus::after { width: 100%; }
    .caret { display: inline-block; margin-left: 4px; vertical-align: middle; border-width: 6px 5px 0 5px; border-style: solid; border-color: #fff transparent transparent transparent; height: 0; width: 0; transition: border-top-color 0.18s; }
    .dropbtn:hover .caret, .dropbtn[aria-expanded="true"] .caret { border-top-color: #2196F3; }
    .dropdown-content { display: none; position: absolute; top: 110%; left: 0; min-width: 200px; background: #242526ee; box-shadow: 0 8px 24px rgba(30, 58, 138, 0.16); border-radius: 10px; margin-top: 8px; z-index: 100; padding: 10px 0; animation: fadeIn 0.22s; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: none;} }
    .dropdown-content a { color: #fff; padding: 11px 28px; display: block; font-size: 1.05rem; background: none; font-weight: 500; text-decoration: none; border: none; transition: background 0.13s, color 0.15s; border-radius: 0; }
    .dropdown-content a:hover, .dropdown-content a:focus { background: #2196F3; color: #fff; outline: none; }
    .dropdown:focus-within .dropdown-content, .dropdown:hover .dropdown-content { display: block; }
    @media (max-width: 900px) { .header-container { flex-direction: column; min-height: unset; } .brand-panel { min-width: 0; width: 100%; border-right: none; border-bottom: 1px solid #222; justify-content: flex-start; padding: 16px 16px 16px 16px; height: auto; } .menu-panel { padding-left: 8px; } .main-nav-list { gap: 18px; } .dropdown-content { left: 0; min-width: 150px; } }
    .section-content { background: rgba(18, 24, 40, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 18px; box-shadow: 0 8px 32px rgba(30, 58, 138, 0.10); padding: 42px 32px 34px 32px; max-width: 850px; margin: 40px auto 0 auto; color: #cbd5e1; }
    .section-content h2 { color: #fff; font-size: 2rem; margin-top: 0; margin-bottom: 20px; font-weight: 700; }
    .section-content ul { margin-top: 1.5rem; margin-bottom: 1.5rem; padding-left: 1.5rem; }
    .section-content li { font-size: 1.08rem; line-height: 1.7; margin-bottom: 0.7em; }
    main { margin-bottom: 36px; }
    .content { position: relative; z-index: 10; min-height: 100vh; padding: 40px 10vw; color: #f8fafc; }
    footer { color: #96a6b9; text-align: center; font-size: 1rem; padding: 2rem 0 1rem 0; opacity: 0.87; letter-spacing: 0.02em; }

html, body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(-45deg, #1e3a8a, #0f172a, #1e40af, #111827);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      color: #f8fafc;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .container {
      max-width: 600px;
      margin: 5rem auto;
      background-color: rgba(15, 23, 42, 0.8);
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

    h1 {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    label {
      display: block;
      margin-top: 1rem;
      margin-bottom: 0.5rem;
    }

    input, textarea {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
    }

    textarea {
      resize: vertical;
      min-height: 120px;
    }

    button {
      margin-top: 1.5rem;
      width: 100%;
      padding: 0.75rem;
      background-color: #3b82f6;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
    }

    button:hover {
      background-color: #2563eb;
    }

    .success {
      color: #22c55e;
      text-align: center;
      margin-top: 1rem;
    }

    .error {
      color: #f87171;
      text-align: center;
      margin-top: 1rem;
    }

/* Use same CSS as above */
    html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: transparent; }
    .skip-link { position: absolute; top: -40px; left: 0; background: #2196F3; color: #fff; padding: 8px 16px; z-index: 200; border-radius: 0 0 8px 0; transition: top 0.2s; text-decoration: none; font-weight: 600; }
    .skip-link:focus { top: 0; }
    .background-gradient { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-45deg, #1e3a8a, #0f172a, #1e40af, #111827); background-size: 400% 400%; animation: gradientBG 7s linear infinite alternate; z-index: -2; }
    @keyframes gradientBG { 0% { background-position: 0% 50%; filter: brightness(1);} 25% { background-position: 50% 100%; filter: brightness(1.2);} 50% { background-position: 100% 50%; filter: brightness(1);} 75% { background-position: 50% 0%; filter: brightness(0.9);} 100% { background-position: 0% 50%; filter: brightness(1);} }
    .header-container { display: flex; flex-direction: row; align-items: stretch; width: 100vw; background: rgba(24, 25, 26, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-height: 72px; box-shadow: 0 1px 8px 0 rgba(30,58,138,0.08); position: relative; z-index: 50; }
    .brand-panel { min-width: 240px; background: transparent !important; display: flex; align-items: center; justify-content: flex-start; padding-left: 32px; border-right: 1px solid #222; height: 72px; }
    .brand-panel img { width: 44px; height: 44px; margin-right: 10px; display: block; }
    .brand-panel h1 { color: #fff; font-size: 1.45rem; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -1px; display: flex; align-items: center; padding-bottom: 2px; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .menu-panel { flex: 1; display: flex; align-items: center; padding-left: 32px; background: transparent !important; min-width: 0; }
    .main-nav-list { display: flex; gap: 32px; align-items: center; margin: 0; padding: 0; list-style: none; height: 100%; }
    .main-nav-list > li { position: relative; height: 100%; display: flex; align-items: center; }
    .main-nav-list > li > button.dropbtn { color: #fff; background: none; border: none; font-size: 1.16rem; font-weight: 700; padding: 7px 0 5px 0; border-bottom: 2.5px solid transparent; transition: color 0.18s, border-bottom 0.18s; font-family: inherit; cursor: pointer; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; position: relative; z-index: 2; }
    .main-nav-list > li > button.dropbtn:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
    .main-nav-list > li > button.dropbtn:hover, .main-nav-list > li > button.dropbtn[aria-expanded="true"] { color: #2196F3; border-bottom: 2.5px solid #2196F3; }
    .main-nav-list > li > button.dropbtn::after { content: ''; display: block; width: 0; height: 2px; background: #2196F3; transition: width 0.25s; margin-top: 2px; }
    .main-nav-list > li > button.dropbtn:hover::after, .main-nav-list > li > button.dropbtn:focus::after { width: 100%; }
    .caret { display: inline-block; margin-left: 4px; vertical-align: middle; border-width: 6px 5px 0 5px; border-style: solid; border-color: #fff transparent transparent transparent; height: 0; width: 0; transition: border-top-color 0.18s; }
    .dropbtn:hover .caret, .dropbtn[aria-expanded="true"] .caret { border-top-color: #2196F3; }
    .dropdown-content { display: none; position: absolute; top: 110%; left: 0; min-width: 200px; background: #242526ee; box-shadow: 0 8px 24px rgba(30, 58, 138, 0.16); border-radius: 10px; margin-top: 8px; z-index: 100; padding: 10px 0; animation: fadeIn 0.22s; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: none;} }
    .dropdown-content a { color: #fff; padding: 11px 28px; display: block; font-size: 1.05rem; background: none; font-weight: 500; text-decoration: none; border: none; transition: background 0.13s, color 0.15s; border-radius: 0; }
    .dropdown-content a:hover, .dropdown-content a:focus { background: #2196F3; color: #fff; outline: none; }
    .dropdown:focus-within .dropdown-content, .dropdown:hover .dropdown-content { display: block; }
    @media (max-width: 900px) { .header-container { flex-direction: column; min-height: unset; } .brand-panel { min-width: 0; width: 100%; border-right: none; border-bottom: 1px solid #222; justify-content: flex-start; padding: 16px 16px 16px 16px; height: auto; } .menu-panel { padding-left: 8px; } .main-nav-list { gap: 18px; } .dropdown-content { left: 0; min-width: 150px; } }
    .section-content { background: rgba(18, 24, 40, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 18px; box-shadow: 0 8px 32px rgba(30, 58, 138, 0.10); padding: 42px 32px 34px 32px; max-width: 850px; margin: 40px auto 0 auto; color: #cbd5e1; }
    .section-content h2 { color: #fff; font-size: 2rem; margin-top: 0; margin-bottom: 20px; font-weight: 700; }
    .section-content ul { margin-top: 1.5rem; margin-bottom: 1.5rem; padding-left: 1.5rem; }
    .section-content li { font-size: 1.08rem; line-height: 1.7; margin-bottom: 0.7em; }
    main { margin-bottom: 36px; }
    .content { position: relative; z-index: 10; min-height: 100vh; padding: 40px 10vw; color: #f8fafc; }
    footer { color: #96a6b9; text-align: center; font-size: 1rem; padding: 2rem 0 1rem 0; opacity: 0.87; letter-spacing: 0.02em; }

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: transparent;
    }
    .skip-link {
      position: absolute;
      top: -40px; left: 0;
      background: #2196F3;
      color: #fff;
      padding: 8px 16px;
      z-index: 200;
      border-radius: 0 0 8px 0;
      transition: top 0.2s;
      text-decoration: none;
      font-weight: 600;
    }
    .skip-link:focus { top: 0; }
    .background-gradient {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: linear-gradient(-45deg, #1e3a8a, #0f172a, #1e40af, #111827);
      background-size: 400% 400%;
      animation: gradientBG 7s linear infinite alternate;
      z-index: -2;
    }
    @keyframes gradientBG {
      0% { background-position: 0% 50%; filter: brightness(1);}
      25% { background-position: 50% 100%; filter: brightness(1.2);}
      50% { background-position: 100% 50%; filter: brightness(1);}
      75% { background-position: 50% 0%; filter: brightness(0.9);}
      100% { background-position: 0% 50%; filter: brightness(1);}
    }
    .header-container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      width: 100vw;
      background: rgba(24, 25, 26, 0.72);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      min-height: 72px;
      box-shadow: 0 1px 8px 0 rgba(30,58,138,0.08);
      position: relative;
      z-index: 50;
    }
    .brand-panel {
      min-width: 240px;
      background: transparent !important;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 32px;
      border-right: 1px solid #222;
      height: 72px;
    }
    .brand-panel img {
      width: 44px;
      height: 44px;
      margin-right: 10px;
      display: block;
    }
    .brand-panel h1 {
      color: #fff;
      font-size: 1.45rem;
      font-weight: 800;
      margin: 0;
      line-height: 1;
      letter-spacing: -1px;
      display: flex;
      align-items: center;
      padding-bottom: 2px;
      font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .menu-panel {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 32px;
      background: transparent !important;
      min-width: 0;
    }
    .main-nav-list {
      display: flex;
      gap: 32px;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
      height: 100%;
    }
    .main-nav-list > li {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .main-nav-list > li > button.dropbtn {
      color: #fff;
      background: none;
      border: none;
      font-size: 1.16rem;
      font-weight: 700;
      padding: 7px 0 5px 0;
      border-bottom: 2.5px solid transparent;
      transition: color 0.18s, border-bottom 0.18s;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
      z-index: 2;
    }
    .main-nav-list > li > button.dropbtn:focus-visible {
      outline: 2px solid #2196F3;
      outline-offset: 2px;
    }
    .main-nav-list > li > button.dropbtn:hover,
    .main-nav-list > li > button.dropbtn[aria-expanded="true"] {
      color: #2196F3;
      border-bottom: 2.5px solid #2196F3;
    }
    .main-nav-list > li > button.dropbtn::after {
      content: '';
      display: block;
      width: 0;
      height: 2px;
      background: #2196F3;
      transition: width 0.25s;
      margin-top: 2px;
    }
    .main-nav-list > li > button.dropbtn:hover::after,
    .main-nav-list > li > button.dropbtn:focus::after {
      width: 100%;
    }
    .caret {
      display: inline-block;
      margin-left: 4px;
      vertical-align: middle;
      border-width: 6px 5px 0 5px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
      height: 0;
      width: 0;
      transition: border-top-color 0.18s;
    }
    .dropbtn:hover .caret,
    .dropbtn[aria-expanded="true"] .caret {
      border-top-color: #2196F3;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      top: 110%;
      left: 0;
      min-width: 200px;
      background: #242526ee;
      box-shadow: 0 8px 24px rgba(30, 58, 138, 0.16);
      border-radius: 10px;
      margin-top: 8px;
      z-index: 100;
      padding: 10px 0;
      animation: fadeIn 0.22s;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: none;} }
    .dropdown-content a {
      color: #fff;
      padding: 11px 28px;
      display: block;
      font-size: 1.05rem;
      background: none;
      font-weight: 500;
      text-decoration: none;
      border: none;
      transition: background 0.13s, color 0.15s;
      border-radius: 0;
    }
    .dropdown-content a:hover, .dropdown-content a:focus {
      background: #2196F3;
      color: #fff;
      outline: none;
    }
    .dropdown:focus-within .dropdown-content,
    .dropdown:hover .dropdown-content {
      display: block;
    }
    @media (max-width: 900px) {
      .header-container {
        flex-direction: column;
        min-height: unset;
      }
      .brand-panel {
        min-width: 0;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #222;
        justify-content: flex-start;
        padding: 16px 16px 16px 16px;
        height: auto;
      }
      .menu-panel {
        padding-left: 8px;
      }
      .main-nav-list {
        gap: 18px;
      }
      .dropdown-content {
        left: 0;
        min-width: 150px;
      }
    }
    .section-content {
      background: rgba(18, 24, 40, 0.72);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(30, 58, 138, 0.10);
      padding: 42px 32px 34px 32px;
      max-width: 850px;
      margin: 40px auto 0 auto;
      color: #cbd5e1;
    }
    .section-content h2 {
      color: #fff;
      font-size: 2rem;
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: 700;
    }
    .section-content ul {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      padding-left: 1.5rem;
    }
    .section-content li {
      font-size: 1.08rem;
      line-height: 1.7;
      margin-bottom: 0.7em;
    }
    main {
      margin-bottom: 36px;
    }
    .content {
      position: relative;
      z-index: 10;
      min-height: 100vh;
      padding: 40px 10vw;
      color: #f8fafc;
    }
    footer {
      color: #96a6b9;
      text-align: center;
      font-size: 1rem;
      padding: 2rem 0 1rem 0;
      opacity: 0.87;
      letter-spacing: 0.02em;
    }

/* Use same CSS as above */
    html, body { margin: 0; padding: 0; height: 100%; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: transparent; }
    .skip-link { position: absolute; top: -40px; left: 0; background: #2196F3; color: #fff; padding: 8px 16px; z-index: 200; border-radius: 0 0 8px 0; transition: top 0.2s; text-decoration: none; font-weight: 600; }
    .skip-link:focus { top: 0; }
    .background-gradient { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(-45deg, #1e3a8a, #0f172a, #1e40af, #111827); background-size: 400% 400%; animation: gradientBG 7s linear infinite alternate; z-index: -2; }
    @keyframes gradientBG { 0% { background-position: 0% 50%; filter: brightness(1);} 25% { background-position: 50% 100%; filter: brightness(1.2);} 50% { background-position: 100% 50%; filter: brightness(1);} 75% { background-position: 50% 0%; filter: brightness(0.9);} 100% { background-position: 0% 50%; filter: brightness(1);} }
    .header-container { display: flex; flex-direction: row; align-items: stretch; width: 100vw; background: rgba(24, 25, 26, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); min-height: 72px; box-shadow: 0 1px 8px 0 rgba(30,58,138,0.08); position: relative; z-index: 50; }
    .brand-panel { min-width: 240px; background: transparent !important; display: flex; align-items: center; justify-content: flex-start; padding-left: 32px; border-right: 1px solid #222; height: 72px; }
    .brand-panel img { width: 44px; height: 44px; margin-right: 10px; display: block; }
    .brand-panel h1 { color: #fff; font-size: 1.45rem; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -1px; display: flex; align-items: center; padding-bottom: 2px; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .menu-panel { flex: 1; display: flex; align-items: center; padding-left: 32px; background: transparent !important; min-width: 0; }
    .main-nav-list { display: flex; gap: 32px; align-items: center; margin: 0; padding: 0; list-style: none; height: 100%; }
    .main-nav-list > li { position: relative; height: 100%; display: flex; align-items: center; }
    .main-nav-list > li > button.dropbtn { color: #fff; background: none; border: none; font-size: 1.16rem; font-weight: 700; padding: 7px 0 5px 0; border-bottom: 2.5px solid transparent; transition: color 0.18s, border-bottom 0.18s; font-family: inherit; cursor: pointer; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; position: relative; z-index: 2; }
    .main-nav-list > li > button.dropbtn:focus-visible { outline: 2px solid #2196F3; outline-offset: 2px; }
    .main-nav-list > li > button.dropbtn:hover, .main-nav-list > li > button.dropbtn[aria-expanded="true"] { color: #2196F3; border-bottom: 2.5px solid #2196F3; }
    .main-nav-list > li > button.dropbtn::after { content: ''; display: block; width: 0; height: 2px; background: #2196F3; transition: width 0.25s; margin-top: 2px; }
    .main-nav-list > li > button.dropbtn:hover::after, .main-nav-list > li > button.dropbtn:focus::after { width: 100%; }
    .caret { display: inline-block; margin-left: 4px; vertical-align: middle; border-width: 6px 5px 0 5px; border-style: solid; border-color: #fff transparent transparent transparent; height: 0; width: 0; transition: border-top-color 0.18s; }
    .dropbtn:hover .caret, .dropbtn[aria-expanded="true"] .caret { border-top-color: #2196F3; }
    .dropdown-content { display: none; position: absolute; top: 110%; left: 0; min-width: 200px; background: #242526ee; box-shadow: 0 8px 24px rgba(30, 58, 138, 0.16); border-radius: 10px; margin-top: 8px; z-index: 100; padding: 10px 0; animation: fadeIn 0.22s; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: none;} }
    .dropdown-content a { color: #fff; padding: 11px 28px; display: block; font-size: 1.05rem; background: none; font-weight: 500; text-decoration: none; border: none; transition: background 0.13s, color 0.15s; border-radius: 0; }
    .dropdown-content a:hover, .dropdown-content a:focus { background: #2196F3; color: #fff; outline: none; }
    .dropdown:focus-within .dropdown-content, .dropdown:hover .dropdown-content { display: block; }
    @media (max-width: 900px) { .header-container { flex-direction: column; min-height: unset; } .brand-panel { min-width: 0; width: 100%; border-right: none; border-bottom: 1px solid #222; justify-content: flex-start; padding: 16px 16px 16px 16px; height: auto; } .menu-panel { padding-left: 8px; } .main-nav-list { gap: 18px; } .dropdown-content { left: 0; min-width: 150px; } }
    .section-content { background: rgba(18, 24, 40, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 18px; box-shadow: 0 8px 32px rgba(30, 58, 138, 0.10); padding: 42px 32px 34px 32px; max-width: 850px; margin: 40px auto 0 auto; color: #cbd5e1; }
    .section-content h2 { color: #fff; font-size: 2rem; margin-top: 0; margin-bottom: 20px; font-weight: 700; }
    .section-content ul { margin-top: 1.5rem; margin-bottom: 1.5rem; padding-left: 1.5rem; }
    .section-content li { font-size: 1.08rem; line-height: 1.7; margin-bottom: 0.7em; }
    main { margin-bottom: 36px; }
    .content { position: relative; z-index: 10; min-height: 100vh; padding: 40px 10vw; color: #f8fafc; }
    footer { color: #96a6b9; text-align: center; font-size: 1rem; padding: 2rem 0 1rem 0; opacity: 0.87; letter-spacing: 0.02em; }