:root{
  --ink:#0ea5b7;
  --glass-bg: rgba(255,255,255,.06);
  --glass-brd: rgba(255,255,255,.18);
  --hero-grad: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,183,.25), transparent 60%),
               radial-gradient(900px 500px at 90% 10%, rgba(60,145,75,.22), transparent 55%),
               linear-gradient(180deg, #0b1020 0%, #0f1630 60%, #101528 100%);
  --page-bg:#0c1226;
  --text-strong:#e8eef7;
  --text-soft:#d7e2ff;
  --card-text:#17212e;
  --card-heading:#2a3646;
}

/* ========== Base ========== */
body{ background:var(--page-bg); color:var(--text-strong); }
.section{ padding:24px 16px 48px; }
.section p{ color:var(--text-soft); }
a{ color:#8ad6ff; } a:hover{ color:#a8e4ff; }

/* ========== Hero ========== */
.hero{
  position:relative; overflow:hidden; padding:48px 20px 2px; text-align:center;
  background:var(--hero-grad); isolation:isolate;
}
.hero::after{
  content:""; position:absolute; inset:-20% -20% auto -20%; height:160%;
  background:conic-gradient(from 90deg at 50% 40%, rgba(255,255,255,.06), transparent 35%, rgba(255,255,255,.08));
  filter:blur(40px); opacity:.6; z-index:-1; animation:slowPulse 12s linear infinite;
}
@keyframes slowPulse{0%{transform:translateY(0)}50%{transform:translateY(8px)}100%{transform:translateY(0)}}
.hero .eyebrow{ color:#66e5f0; letter-spacing:.12em; margin-bottom:6px; font-size:.95rem }
.hero h1{ font-size:clamp(28px,3.6vw,44px); margin:0 0 4px; }
.hero .subtitle{ color:#9fb6ff; margin:0; font-size:clamp(14px,1.7vw,18px) }

/* Hero → Section spacing */
.hero + .section{ margin-top:0; padding-top:2px; }

/* ========== Divider ========== */
.section-title-divider{
  position:relative; display:inline-block; padding:10px 16px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass-brd);
  color:var(--text-strong);
  margin:0 0 4px; /* even more compact */
}
.section-title-divider::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:2px;
  background:linear-gradient(90deg, transparent, var(--ink), transparent); filter: blur(.5px);
}

/* ========== Lead text ========== */
.lede{ margin-top:0; }
.lede-strong{ font-size:1.15rem; font-weight:700; color:#eef3ff; }

/* ========== Visuals ========== */
.kv{ margin:20px auto; max-width:1000px; }
.kv img{
  display:block; width:100%; height:auto; border-radius:12px;
  background:rgba(255,255,255,.06);
}

/* ========== Cards ========== */
.layout_box.responsive{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:14px; margin-top:18px;
}
.float_item{
  border-radius:16px; padding:16px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.float_item:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.24); }
.float_item h6{ margin:.2rem 0 .4rem; font-size:1rem; color:var(--card-heading); }
.float_item p{ margin:0; color:var(--card-text); }

/* ========== Footer ========== */
.site-footer{ background:var(--page-bg); padding:12px 0; text-align:center; }
.site-footer .copyright{ margin:0; font-size:10px; color:#ffffff; }

/* ========== Print ========== */
@media print{
  @page{ size:A4; margin:16mm; }
  body{ background:#fff; color:#000; }
  .hero{ background:#fff !important; padding:8mm 0; }
  a[href]::after{ content:" (" attr(href) ")"; font-size:10pt; color:#444; }
  .float_item{ break-inside:avoid; }
}