:root{
  --bg:#0e1627;
  --ink:#0f172a;
  --muted:#5a6781;
  --primary:#5a86c7;
  --primary-600:#3f6bb1;
  --primary-100:#eaf1fb;
  --surface:#f7f9fd;
  --card:#ffffff;
  --radius:18px;
  --shadow:0 12px 32px rgba(5,16,40,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e7ecf6;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand img{height:56px;width:auto}
.brand .text{font-size:18px;color:var(--ink)}
.menu-toggle{display:none;background:transparent;border:1px solid #d6dff1;padding:8px 10px;border-radius:10px;line-height:0}
.menu-toggle svg{width:22px;height:22px}
#site-nav.nav{display:flex;align-items:center;gap:18px}
#site-nav.nav a{ display:block; padding:9px 10px; border-radius:10px; border:1px solid #eef3fb; background:#fff; font-size:15px; }
.btn{display:inline-block;padding:10px 16px;border-radius:12px;background:var(--primary);color:#fff;border:1px solid #3f6bb1;font-weight:600}
.btn:hover{filter:brightness(.98);text-decoration:none}
.btn-outline{background:#fff;border:1px solid #d6dff1;color:var(--ink)}
.btn-ghost{background:transparent;border:1px solid transparent}

.hero{background:linear-gradient(180deg,var(--primary-100),#fff 70%), url('assets/img/hero.svg') no-repeat right -120px top -160px/780px; position:relative}
.hero .hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:68px 0}
.hero h1{font-size:44px;line-height:1.15;margin:0 0 12px}
.hero p{font-size:18px;margin:0 0 18px;color:#2a3550}
.actions{display:flex;gap:12px;margin-top:10px}
.hero-card{background:var(--card);border:1px solid #e6ecf7;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:grid;gap:12px}
.kpi{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #edf2fd;border-radius:14px;padding:14px}
.kpi .num{font-size:28px;font-weight:800;color:var(--primary-600)}

.section{padding:64px 0}
.section.alt{background:var(--surface)}
.grid{display:grid;gap:18px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #e6ecf7;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:8px 0 6px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.panel{background:linear-gradient(180deg,#0f172a,#1e2a44);color:#eaf1ff;border-radius:var(--radius);padding:20px;border:1px solid #2c3e64;box-shadow:var(--shadow)}
.panel h3{margin:0 0 8px}
.center{text-align:center}
.checklist{padding-left:18px}
.checklist li{margin:6px 0}
.illus{border-radius:16px;overflow:hidden;border:1px solid #e6ecf7;background:#fff;box-shadow:var(--shadow)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery img{border-radius:14px;border:1px solid #e6ecf7;box-shadow:var(--shadow)}

.site-footer{background:var(--bg);color:#b5c2e6;padding-top:28px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;padding:0 0 16px}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #1e2947;padding:14px 0;color:#95a6d8}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{height:42px}
.linklist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.muted{color:var(--muted)}

.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;background:#0f172a;color:#e6ecff;border:1px solid #213156;border-radius:14px;padding:14px;box-shadow:var(--shadow);display:none}
.cookie-banner.show{display:block}
.cookie-content{display:flex;gap:14px;align-items:center;justify-content:space-between}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;place-items:center;padding:16px}
.cookie-modal.show{display:grid}
.cookie-card{background:#fff;color:#0f172a;border-radius:14px;max-width:560px;width:100%;padding:18px;border:1px solid #e8edf7;box-shadow:var(--shadow)}
.switch{display:flex;align-items:center;gap:10px;margin:10px 0}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #e6ecf7;padding:10px;text-align:left}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#eaf1fb;color:#285099;font-weight:600;font-size:12px}

/* ===== Mobile menu ===== */
@media (max-width:980px){
  .menu-toggle{display:inline-flex}
  #site-nav{
    position:fixed; top:72px; left:0; right:0;
    background:#fff; border-top:1px solid #e7ecf6;
    box-shadow:0 10px 30px rgba(5,16,40,.08);
    display:none; padding:10px 16px;
  }
  #site-nav[aria-hidden="false"]{display:block}
  #site-nav.nav{display:grid; grid-auto-rows:minmax(40px,auto); gap:8px}
  #site-nav.nav a{ display:block; padding:9px 10px; border-radius:10px; border:1px solid #eef3fb; background:#fff; font-size:15px; }
  .brand .text{display:none}  /* hide long brand title on mobile */
  .header-inner{height:72px}
  .cards-3{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .hero .hero-inner{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .hero p{font-size:16px}
}
@media (max-width:520px){
  .brand img{height:46px}
  .gallery{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .hero p{font-size:15px}
}
img, .illus{max-width:100%; height:auto}


/* ===== v7: Mobile with icon-only (no expanding menu) ===== */
@media (max-width:980px){
  /* Hide the nav completely on mobile */
  #site-nav{ display:none !important; }
  /* Keep header compact */
  .header-inner{ height:64px; }
  .brand .text{ display:none; } /* avoid long brand on mobile */
  .menu-toggle{ display:inline-flex; } /* keep the hamburger visible only */
}


/* ===== v7.1: Minimal mobile dropdown (popover) ===== */
@media (max-width:980px){
  /* Reset v7 forced hide (override with higher specificity and last rule) */
  header .container #site-nav{ display:none !important; }

  /* Popover styles */
  #site-nav{ position:absolute; top:64px; right:12px; width:220px; background:#fff; border:1px solid #e7ecf6; border-radius:12px; box-shadow:0 12px 32px rgba(5,16,40,.14); padding:6px; z-index:9999; }
  html.nav-open #site-nav{ display:block !important; }
  #site-nav.nav{
    display:grid;
    grid-auto-rows:minmax(40px,auto);
    gap:8px;
  }
  #site-nav.nav a{ display:block; padding:9px 10px; border-radius:10px; border:1px solid #eef3fb; background:#fff; font-size:15px; }
  /* Tiny caret */
  #site-nav::before{ content:""; position:absolute; top:-8px; right:22px; border-width:8px; border-style:solid; border-color:transparent transparent #ffffff transparent; filter: drop-shadow(0 -1px 0 #e7ecf6);}

  /* Header tweaks */
  .header-inner{ height:60px; position:relative; }
  .brand .text{ display:none; }
  .menu-toggle{ display:inline-flex; }
}


@media (max-width:620px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; padding:10px; border-radius:12px; }
  .cookie-content p{ font-size:13px; line-height:1.4; margin:0; }
  .cookie-actions{ gap:6px; }
  .cookie-actions .btn{ padding:8px 10px; font-size:13px; border-radius:8px; }
  .cookie-card{ max-width:92vw; padding:14px; }
  .cookie-card h3{ font-size:18px; margin:0 0 6px; }
  .cookie-card .switch span{ font-size:14px; }
}


/* ===== v7.4 Global polish ===== */
html, body { max-width: 100%; overflow-x: hidden; }

.section { padding: 64px 0; }
@media (max-width: 900px){
  .section { padding: 48px 0; }
}
@media (max-width: 600px){
  .section { padding: 38px 0; }
}

/* Hero background alignment on narrow screens */
@media (max-width: 900px){
  .hero{ background-position: right -160px top -160px; }
}
@media (max-width: 700px){
  .hero{ background-position: right -220px top -180px; }
}
@media (max-width: 520px){
  .hero{ background-position: right -280px top -200px; }
}

/* Responsive tables: wrap in scroll container automatically */
.table{ display: table; width: 100%; }
@media (max-width: 520px){
  .table{ display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* Footer improvements */
.site-footer { padding-top: 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; align-items: start; }
.footer-brand{ display:flex; align-items:center; gap:10px }
.footer-brand img{ height: 40px; }

/* Medium screens: two columns */
@media (max-width: 900px){
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; text-align: center; }
  .footer-brand { justify-content: center; }
  .footer-grid h4 { text-align: center; margin-bottom: 10px; }
  .linklist { justify-items: center; }
}

/* Small screens: single column, centered */
@media (max-width: 600px){
  .footer-grid { grid-template-columns: 1fr; gap: 14px; }
  .footer-grid > div { text-align: center; }
  .footer-brand img{ height: 36px; }
  .linklist { display: grid; gap: 8px; justify-items: center; }
  .footer-grid a { display: inline-block; }
}

/* Footer bottom stack */
.footer-bottom { display:flex; justify-content: space-between; align-items:center; border-top:1px solid #1e2947; padding: 14px 0; color:#95a6d8 }
@media (max-width: 900px){
  .footer-bottom { gap: 8px; }
}
@media (max-width: 600px){
  .footer-bottom { flex-direction: column; gap: 6px; text-align:center; }
}

/* Touch targets in footer */
.linklist a { padding: 4px 6px; border-radius: 8px; }
.linklist a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

/* Ensure gallery & cards don't overflow */
.gallery, .cards-3, .cols { max-width: 100%; }