/* ==============================
   Modern base + theming
   ============================== */

   :root {
    /* Core palette (dark base) */
    --bg: #0f1115;
    --bg-2: #121821;
    --text: #e7e9ee;
    --muted: #afbacb;
  
    --topbar: #0b3151;
    --nav: #1f5e67;
    --nav-2: #21414b;
    --nav-text: #ffffff;
  
    --accent: #2fbf71;
    --accent-2: #6aa0ff;
  
    --card: #171a21;
    --card-2: #1b2230;
    --border: #253140;
  
    --radius: 14px;
    --radius-sm: 10px;
  
    --shadow: 0 12px 30px rgba(0,0,0,.35);
    --shadow-2: 0 18px 40px rgba(0,0,0,.45);
  
    --blur: 10px;
  
    /* Typography scale */
    --fs-1: clamp(2rem, 4.5vw, 4.5rem);
    --fs-2: clamp(1.25rem, 2.2vw, 2rem);
    --fs-3: clamp(1.05rem, 1.2vw, 1.15rem);
    --fs-body: 1rem;
  
    /* Transitions */
    --t-quick: .15s ease;
    --t-slow: .28s cubic-bezier(.22,.8,.24,1);
  
    /* Container */
    --container-w: min(1200px, 92%);
  }
  
  /* Auto-light theme support */
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f8fafc;
      --bg-2: #ffffff;
      --text: #0f172a;
      --muted: #4b5563;
  
      --topbar: #e8f3ff;
      --nav: #e6f0f2;
      --nav-2: #dbe7ea;
      --nav-text: #0f172a;
  
      --card: #ffffff;
      --card-2: #ffffff;
      --border: #e2e8f0;
  
      --shadow: 0 12px 30px rgba(2, 6, 23, .08);
      --shadow-2: 0 18px 40px rgba(2, 6, 23, .12);
    }
  }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
  
  /* ==============================
     Base / resets
     ============================== */
  
  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ height: 100%; }
  html { scroll-behavior: smooth; }
  body{
    margin: 0;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 800px at 10% -10%, rgba(47,191,113,.06), transparent 60%),
                radial-gradient(1000px 600px at 110% -10%, rgba(106,160,255,.06), transparent 60%),
                var(--bg);
    font-size: var(--fs-body);
    line-height: 1.55;
  }
  
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }
  a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
  }
  
  ::selection { background: rgba(47,191,113,.35); color: #071813; }
  
  /* Scrollbar (WebKit) */
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 999px; }
  *::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
  
  /* ==============================
     Layout utilities
     ============================== */
  
  .container{ width: var(--container-w); margin: 0 auto; }
  .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 900px){ .grid-4,.grid-3{ grid-template-columns: 1fr; } }
  
  .card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 18px; border-radius:10px;
    background: var(--accent); color:#07361f; font-weight:800;
    transition: transform var(--t-quick), filter var(--t-quick);
    will-change: transform;
  }
  .btn:hover{ filter: brightness(1.05); transform: translateY(-1px) scale(1.02); }
  .btn.secondary { background: var(--accent-2); color: #08131f; }
  
  /* ==============================
     Dual-level header (modernized)
     ============================== */
  
  .dual-header{
    position: sticky; top: 0; z-index: 1000;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
  }
  
  /* Topbar with glass effect */
  .topbar{
    background: color-mix(in oklab, var(--topbar), transparent 35%);
    color: var(--nav-text);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
  .topbar-row{ display:flex; align-items:center; gap:18px; min-height:66px; }
  
  .brand-link{ display:flex; align-items:center; gap:12px; color:inherit; }
  .logo-circle{
    width:34px; height:34px; border-radius:50%;
    background: conic-gradient(from 140deg, #32d17a, #2fbf71, #3de08b 75%);
    color:#0b1d29; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 2px 10px rgba(47,191,113,.35);
    transition: transform var(--t-slow), filter var(--t-quick);
  }
  .brand-link:hover .logo-circle{ transform: scale(1.08) rotate(-3deg); filter: saturate(1.1); }
  .brand-text{ line-height:1.05 }
  .brand-title{ font-weight:800; letter-spacing:.3px }
  .brand-subtitle{ font-size:.82rem; color: color-mix(in oklab, var(--text), transparent 45%); }
  
  .top-links{ display:flex; gap:22px; margin-left:auto; }
  .toplink{ color: var(--nav-text); font-weight:800; letter-spacing:.2px; transition: opacity .2s; }
  .toplink:hover{ opacity:.85; }
  
  .top-actions{ display:flex; align-items:center; gap:10px; }
  .icon-btn{
    background: transparent; border: 1px solid rgba(255,255,255,.22);
    border-radius:10px; padding:6px 10px; color: var(--nav-text); cursor:pointer;
    transition: background var(--t-quick), transform var(--t-quick);
  }
  .icon-btn:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
  
  .login{ font-weight:700; }
  
  /* Subbar */
  .subbar{
    background: color-mix(in oklab, #ffffff, var(--nav) 8%);
    color: #143246;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
  }
  .sub-links{
    display:flex; gap:26px; align-items:center; min-height:54px; position:relative; justify-content:center;
    flex-wrap: wrap;
  }
  .sub-links .link{
    color:#143246; font-weight:800; position:relative; padding:8px 2px; border-radius:6px;
    transition: color var(--t-quick);
  }
  .sub-links .link::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius:3px; transform: scaleX(0); transform-origin: center; transition: transform .22s ease;
  }
  .sub-links .link:hover::after, .sub-links .link.active::after{ transform: scaleX(1); }
  
  /* Dropdown (supports desktop + mobile) */
  .has-drop{ position:relative; }
  .has-drop .dropdown{
    display:none; position:absolute; left:0; top:100%;
    min-width:220px; background: var(--bg-2); color:var(--text);
    border:1px solid var(--border); border-radius:10px; padding:8px;
    box-shadow: var(--shadow); z-index:20;
  }
  .has-drop:hover .dropdown{ display:block; }
  .dropdown a{ display:block; padding:8px 10px; border-radius:8px; color:inherit; font-weight:600; }
  .dropdown a:hover{ background: rgba(255,255,255,.06); }
  
  /* Burger */
  .burger{
    display:none; align-items:center; justify-content:center; width:42px; height:42px;
    border:1px solid rgba(255,255,255,.22); border-radius:10px; background:transparent; color:#fff; cursor:pointer;
    transition: transform var(--t-quick), background var(--t-quick);
  }
  .burger .bar{ width:20px; height:2px; background:#fff; position:relative; transition:transform .2s; }
  .burger .bar::before,.burger .bar::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:#fff;
    transition: transform .2s, opacity .2s;
  }
  .burger .bar::before{ top:-6px; } .burger .bar::after{ top:6px; }
  .burger[aria-expanded="true"] .bar{ transform: rotate(45deg); }
  .burger[aria-expanded="true"] .bar::before{ transform: rotate(90deg); }
  .burger[aria-expanded="true"] .bar::after{ opacity: 0; }
  
  .menu-overlay{ display:none; }
  @media (max-width: 900px){
    .top-links{ display:none; }
    .burger{ display:inline-flex; }
  
    .sub-links{
      position:fixed; inset:66px 0 auto 0; background: var(--bg); color:var(--text);
      display:grid; gap:8px; padding:14px;
      transform: translateY(-120%); transition: transform var(--t-slow);
      border-top: 1px solid rgba(255,255,255,.06);
      box-shadow: var(--shadow);
    }
    .sub-links .link{ color:var(--text); padding:12px; border-radius:10px; background: var(--bg-2); }
    .sub-links.open{ transform: translateY(0); }
  
    .has-drop .dropdown{
      position:static; display:none; background: var(--card-2);
      border-color: #263142; box-shadow: none; padding:6px; margin-top: -6px;
    }
    .has-drop.open .dropdown{ display:block; }
    .dropdown a{ color:#dfe7ef; }
  
    .menu-overlay{
      display:block; position:fixed; inset:66px 0 0 0; background:rgba(0,0,0,.35);
      opacity:0; pointer-events:none; transition:opacity var(--t-quick);
    }
    .menu-overlay.show{ opacity:1; pointer-events:auto; }
  }
  
  /* Legacy header classes preserved (if used somewhere else) */
  .site-header{ background:#1a2b38; color:#fff; position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-bar{ display:flex; align-items:center; justify-content:space-between; height:68px }
  
  /* ==============================
     Hero
     ============================== */
  
  .hero{ position:relative; overflow:hidden; }
  .hero-bg{
    height: 420px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),
      radial-gradient(100% 100% at 100% 0%, rgba(106,160,255,.35), rgba(0,0,0,0) 60%),
      radial-gradient(100% 80% at 0% 0%, rgba(47,191,113,.35), rgba(0,0,0,0) 60%),
      linear-gradient(90deg, #154e57, #2b7a86);
    border-bottom: 8px solid color-mix(in oklab, #2c6b72, var(--accent) 35%);
    filter: saturate(1.02);
  }
  .hero-inner{ position:absolute; inset:0; display:grid; place-items:center; padding: 0 8px; }
  .hero h1{
    font-size: var(--fs-1);
    text-align:center; line-height:1.05; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  }
  .hero h1 span{ color:#ffffff; }
  
  /* ==============================
     News
     ============================== */
  
  .news-band{ background:#f2f5f7; color:#0d2830; padding:26px 0; border-top:10px solid var(--nav); }
  .news-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .news-card{
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display:flex; flex-direction:column; gap:8px;
    box-shadow: var(--shadow);
    transition: transform var(--t-quick), box-shadow var(--t-quick), border-color var(--t-quick);
    will-change: transform, box-shadow;
  }
  .news-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--border), var(--accent) 35%); }
  .news-card h3{ font-size:1.02rem; margin:0; color: var(--text); }
  .news-card .meta{ font-size:.86rem; color: color-mix(in oklab, var(--text), transparent 45%); font-weight:700; }
  .news-card a{ color: var(--accent-2); font-weight:700; }
  
  /* ==============================
     Footer
     ============================== */
  
  .footer{
    background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 40%), #0b1a22;
    color:#8ea0ad; border-top:1px solid #10222b;
  }
  .footer .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px }
  
  /* ==============================
     Contacts (cards with animation class support)
     ============================== */
  
  .contact-grid{
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 24px; margin: 40px auto; width: var(--container-w);
  }
  @media (max-width: 700px){ .contact-grid{ grid-template-columns: 1fr; } }
  
  .contact-card{
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; min-height: 180px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    color: var(--text);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform-origin: center;
    transition: transform var(--t-slow), box-shadow var(--t-quick), border-color var(--t-quick), background var(--t-quick);
  }
  .contact-card h3{ margin: 0 0 8px; font-size: 1.2rem; letter-spacing: .2px; color: var(--accent); }
  .contact-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.98rem; color:#c9d2dd; }
  .contact-card a{ color: var(--accent-2); text-decoration:none; font-weight:600; }
  .contact-card a:hover{ text-decoration: underline; }
  
  /* class toggled by JS on hover */
  .contact-card.hovered{
    border-color: var(--accent);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    transform: scale(1.06);
    background: linear-gradient(180deg, rgba(47,191,113,.06), transparent 40%), var(--card);
  }
  
  /* ==============================
     Forms / search (generic)
     ============================== */
  
  .search{
    display:flex; align-items:center; gap:8px;
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px; padding:6px 10px;
  }
  .search input{
    border:0; background:transparent; color:var(--nav-text);
    outline:none; width:160px;
  }
  
  /* ==============================
     Responsive tweaks
     ============================== */
  
  @media (max-width: 900px){
    .hero-bg{ height: 320px; }
    .news-grid{ grid-template-columns: 1fr; }
    .topbar-row{ min-height: 64px; }
  }
  
  /* ==============================
     Tiny utilities
     ============================== */
  
  .muted{ color: var(--muted); }
  .hide{ display:none !important; }
  .visually-hidden{
    position:absolute !important; width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important; overflow:hidden !important;
    clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
  }