:root{
  --blue:#1d4ed8; --blue-dark:#1e40af; --ink:#0f172a;
  --muted:#475569; --border:#e5e7eb; --bg:#ffffff; --ring:#93c5fd;
  --overlay: rgba(15,23,42,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.center{text-align:center}

/* Top bar with logo + hamburger */
.header{position:sticky;top:0;z-index:60;backdrop-filter:saturate(180%) blur(8px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--border)}
.header .bar{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:72px;width:auto}
.menu-btn{appearance:none;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;cursor:pointer}
.menu-btn:focus{outline:3px solid var(--ring)}
.menu-btn svg{display:block;height:22px;width:22px}

/* Sidebar (off-canvas) */
.sidebar{position:fixed;inset:0;pointer-events:none}
.sidebar .panel{position:absolute;left:0;top:0;height:100%;width:290px;background:linear-gradient(180deg,#000000,#222222) !important;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow-y:auto}
.sidebar .overlay{position:absolute;inset:0;background:var(--overlay);opacity:0;transition:opacity .25s ease}
.sidebar.open{pointer-events:auto}
.sidebar.open .panel{transform:none}
.sidebar.open .overlay{opacity:1}

.side-nav{display:flex;flex-direction:column;padding:22px}
.side-nav a{padding:14px 12px;border-radius:10px;text-decoration:none;font-weight:700;color:#ffffff !important;display:block;line-height:1.25}
.side-nav a:hover{background:rgba(255,255,255,.12) !important}

/* Hero / background */
.hero{background:radial-gradient(1200px 600px at 50% -100px,#dbeafe 0,transparent 60%),linear-gradient(180deg,#f8fafc 0,#ffffff 100%);padding:100px 0 72px}
.hero h1{font-size:42px;margin:0 0 12px}
.btn{display:inline-block;text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:700;background:var(--blue);color:#fff;border:2px solid transparent}
.btn:hover{background:var(--blue-dark)} .btn:focus{outline:3px solid var(--ring)}

.card{border:1px solid var(--border);border-radius:16px;padding:18px;background:#fff}
.form{max-width:820px;margin:0 auto}
label{display:block;font-weight:700;font-size:14px;color:#334155;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid var(--ring)}
textarea{min-height:140px;resize:vertical}
.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:700px){.form-row{grid-template-columns:1fr}}
.footer{border-top:1px solid var(--border);padding:18px 0;color:#64748b;background:#fff}

/* Landing flags */
.flags{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1000px;margin:20px auto}
.flag{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff}
.flag img{display:block;width:100%;height:auto;transition:transform .18s ease, box-shadow .18s ease}
.flag:hover img{transform:scale(1.04);box-shadow:0 12px 30px rgba(29,78,216,.25)}

@media (max-width: 480px){
  .side-nav a{padding:14px 12px;border-radius:10px;text-decoration:none;font-weight:700;color:#ffffff !important;display:block;line-height:1.25}
  .header .bar{height:76px}
  .brand img{height:64px}
}
.sidebar .panel .head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08); color:#fff}
.sidebar .panel {
  background: linear-gradient(180deg, #000000, #222222) !important;
}

.side-nav a {
  color: #ffffff !important;
}

.side-nav a:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* === Menu dark theme (precise) === */
.sidebar .panel{ background:#000 !important; }
.sidebar .head{ color:#fff !important; border-bottom:1px solid rgba(255,255,255,.12) !important; }
.sidebar .head strong{ color:#fff !important; }
.side-nav a{ color:#fff !important; background:transparent !important; }
.side-nav a:hover{ background:rgba(255,255,255,0.08) !important; color:#fff !important; }
.side-nav a:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.sidebar .overlay{ background: rgba(0,0,0,.55) !important; }


/* === Menu dark theme (v4 full-height) === */
.sidebar .panel{
  background:#000 !important;
  height:100vh !important;
  min-height:100vh !important;
}
.sidebar .head{ color:#fff !important; border-bottom:1px solid rgba(255,255,255,.12) !important; }
.sidebar .head strong{ color:#fff !important; }

.side-nav a,
.side-nav a:visited{ color:#fff !important; background:transparent !important; }
.side-nav a:hover{ background:rgba(255,255,255,0.08) !important; color:#fff !important; }

/* keep overlay */
.sidebar .overlay{ background: rgba(0,0,0,.55) !important; }