/* ===== Theme ===== */
:root{
  --bg: #0b1220;         /* deep navy */
  --panel: #0f172a;      /* slate-900 */
  --card: #111827;       /* near-black */
  --ink: #e5e7eb;        /* gray-200 text */
  --muted: #94a3b8;      /* slate-400 */
  --line: #1f2937;       /* divider */
  --pri: #22d3ee;        /* cyan-400 */
  --pri-700: #0891b2;    /* cyan-700 */
  --acc: #a78bfa;        /* violet-400 */
  --acc-700: #6d28d9;    /* violet-700 */
  --glow: 0 8px 30px rgba(34,211,238,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:linear-gradient(180deg, var(--bg), #0a142a 30%, #0b1220 100%);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65;
}

/* Decorative blobs */
.backdrop{ position: fixed; inset: -20vh 0 auto 0; pointer-events:none; z-index:-1; }
.blob{
  position:absolute; filter: blur(60px); opacity:.35; transform: translateZ(0);
}
.blob-a{ width:42vw; height:42vw; top:-10vh; left:-10vw; background: radial-gradient(closest-side, var(--pri), transparent 60%); }
.blob-b{ width:40vw; height:40vw; top:-8vh; right:-10vw; background: radial-gradient(closest-side, var(--acc), transparent 60%); }

/* Containers */
.container{ max-width: 1200px; margin:0 auto; padding: 0 24px; }

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.3) blur(8px);
  background: rgba(11, 18, 32, .6);
  border-bottom:1px solid var(--line);
}
.header__row{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.2px;
  font-family: Outfit, Inter, sans-serif; font-size: 1.15rem;
}
.nav{ display:none; gap: 16px; }
.nav a{
  color: var(--muted); text-decoration:none; font-weight:600; font-size:.95rem;
  padding: 8px 10px; border-radius:10px; transition: all .18s ease;
}
.nav a:hover{ color:#fff; background: rgba(255,255,255,.05); }
.nav--open{ display:flex; flex-wrap:wrap; }

.nav-toggle{
  background: transparent; color:#fff; border:1px solid var(--line);
  border-radius:10px; padding:7px 10px; cursor:pointer; font-size:18px;
}
@media (min-width: 900px){
  .nav{ display:flex; }
  .nav-toggle{ display:none; }
}

/* Hero */
.hero{ padding: 72px 0 36px; }
.hero__grid{ display:grid; grid-template-columns: 1fr; gap: 28px; align-items:center; }
@media (min-width: 960px){ .hero__grid{ grid-template-columns: 1.2fr 1fr; } }

.eyebrow{
  display:inline-block; font-weight:700; color: var(--pri);
  letter-spacing:.1em; text-transform: uppercase; font-size:.72rem;
}
h1{
  margin:.4rem 0 0; font-family: Outfit, Inter, sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height:1.1; letter-spacing:-.02em;
}
.lead{ color:#c7d2fe; max-width: 58ch; }

.hero__media{ background: linear-gradient(180deg, #0c1428, #0b1220);
  border:1px solid var(--line); box-shadow: var(--glow); overflow:hidden;
}
.hero__media img{ width:100%; display:block; border-radius:12px; }
.hero__media figcaption{ color:var(--muted); font-size:.85rem; padding-top:.4rem; text-align:center; }

/* Section */
.section{ padding: 72px 0; border-top:1px solid var(--line); }
.section--alt{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); }
.section__header{ margin-bottom: 28px; }
.section__header h2{
  margin:.25rem 0 0; font-family: Outfit, Inter, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.section__lead{ color:#cbd5e1; max-width:70ch; }

/* Grid */
.grid{ display:grid; gap: 22px; }
.grid--2{ grid-template-columns: 1fr; }
.grid--3{ grid-template-columns: 1fr; }
@media (min-width: 960px){
  .grid--2{ grid-template-columns: 1fr 1fr; }
  .grid--3{ grid-template-columns: 1fr 1fr 1fr; }
}
.mt-lg{ margin-top: 26px; }

/* Cards */
.card{
  background: linear-gradient(180deg, #0e162a, #0b1220);
  border:1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px;
  box-shadow: var(--glow);
}
.card--accent{ border-color: rgba(167,139,250,.35); background: linear-gradient(180deg, rgba(167,139,250,.08), #0b1220 40%); }

/* Lists, tables, steps */
.list{ margin: 8px 0; padding-left: 1.1rem; }
.list li{ margin:.4rem 0; color:#d1d5db; }
.table{ width:100%; border-collapse: collapse; font-size:.95rem; }
.table th, .table td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; color:#d1d5db; }
.steps{ padding-left:1.2rem; }
.steps li{ margin:.65rem 0; color:#d1d5db; }

/* Stats */
.stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.stat{ background: #0b1220; border:1px solid var(--line); border-radius:12px; padding: 12px; }
.stat__label{ color: var(--muted); font-size:.78rem; text-transform: uppercase; letter-spacing:.06em; }
.stat__value{ font-family: Outfit, Inter, sans-serif; font-size: 1.6rem; font-weight:800; }

/* Media, charts, gallery */
.media img, .chart{ width:100%; border-radius: 10px; border:1px solid var(--line); background:#0b1220; }
.gallery{
  display:grid; gap:14px; grid-template-columns: 1fr 1fr; margin-top: 12px;
}
.gallery img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
@media (min-width:960px){ .gallery{ grid-template-columns: repeat(3,1fr); } }

/* Buttons & links */
.btn{
  display:inline-block; text-decoration:none; font-weight:700;
  padding: 10px 14px; border-radius: 12px; transition: all .18s ease;
  border:1px solid transparent; font-family: Outfit, Inter, sans-serif;
}
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
.btn--primary{ background: linear-gradient(90deg, var(--pri), var(--acc)); color:#0b1220; }
.btn--primary:hover{ filter: brightness(.95); transform: translateY(-1px); }
.btn--ghost{ color:#e5e7eb; border-color:#334155; background: rgba(255,255,255,.02); }
.btn--ghost:hover{ background: rgba(255,255,255,.06); border-color:#475569; }
.link{ color: var(--pri); text-decoration: underline; }
.hint{ color: var(--muted); font-size:.9rem; margin-top:6px; }

/* Footer */
.footer{ border-top:1px solid var(--line); padding: 24px 0; }
.footer__row{ display:flex; align-items:center; justify-content:space-between; color:#94a3b8; font-size:.95rem; }

/* Accessibility focus */
a:focus, button:focus{ outline: 2px solid var(--pri); outline-offset:2px; border-radius: 8px; }

/* Contact form */
.contact-form { padding: 22px; }
.form-grid { display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:14px; }
@media (min-width: 760px){ .form-grid { grid-template-columns: 1fr 1fr; } }

.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { color: var(--muted); font-size:.9rem; }
.form-field input,
.form-field textarea{
  background:#0b1220; color:#e5e7eb; border:1px solid var(--line);
  border-radius:10px; padding:12px 12px; font: inherit;
}
.form-field input::placeholder, .form-field textarea::placeholder{ color:#73809a; }
.form-field input:focus, .form-field textarea:focus{
  outline:2px solid var(--pri); outline-offset:2px; border-color: transparent;
}


.grid--2 { align-items: stretch; }
.card h3 { margin: 0 0 8px; }

.grid--2 > article.card,
.grid--2 > figure.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}


.map-embed {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}


.card--map .map-embed {
  flex: 1 1 auto;   
  min-height: 380px; 
}


.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.card h3 { margin: 0 0 8px; }
.card .hint { margin-top: 10px; }


figure { margin: 0; }                  /* <— this is the big one */
h3 { margin-block-start: 0; }          /* normalize heading start */
ul { margin-block-start: 0; }          /* normalize list start */


.grid--2 { align-items: stretch; }
.grid--2 > article.card,
.grid--2 > figure.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}


.card--map .map-embed { flex: 1 1 auto; min-height: 380px; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.card > *:first-child { margin-top: 0 !important; }
.card > *:last-child  { margin-bottom: 0 !important; }