
:root{
  --bg:#05070d;
  --bg2:#080d17;
  --panel:rgba(255,255,255,.055);
  --panel2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.10);
  --text:#eef4ff;
  --muted:#9facbf;
  --soft:#cbd7ea;
  --blue:#5aa0ff;
  --blue2:#2f6dff;
  --deep:#07111f;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(70,130,255,.24), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(30,90,180,.22), transparent 38%),
    linear-gradient(180deg,#05070d 0%,#080d17 48%,#05070d 100%);
  color:var(--text);
  line-height:1.65;
}
a{color:inherit}
img{max-width:100%;display:block}
.topbar{
  padding:11px 16px;
  text-align:center;
  background:#05080f;
  border-bottom:1px solid var(--line);
  color:#cbd7ea;
  font-size:.88rem;
}
.topbar a{color:#8dbbff;text-decoration:none}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:18px 7%;
  backdrop-filter:blur(18px);
  background:rgba(5,8,15,.75);
  border-bottom:1px solid var(--line);
}
.logo{
  font-weight:800;
  letter-spacing:-.03em;
  font-size:1.2rem;
  text-decoration:none;
}
.logo span{color:var(--blue)}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
nav a{color:#d6e0ef;text-decoration:none;font-size:.93rem}
.hero{
  min-height:88vh;
  display:flex;
  align-items:center;
  padding:86px 7%;
}
.hero-grid{
  width:100%;
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:36px;
  align-items:center;
}
.eyebrow{
  color:#88b9ff;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.78rem;
}
h1,h2,h3{letter-spacing:-.055em;line-height:1.04;margin:0 0 18px}
h1{font-size:clamp(3.3rem,8.6vw,7.3rem)}
h2{font-size:clamp(2.1rem,4.2vw,4rem)}
h3{font-size:1.45rem}
p{color:var(--muted);font-size:1.03rem}
.lead{font-size:1.22rem;max-width:760px;color:#c9d5e7}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn,.btn-secondary,button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  min-height:50px;
  padding:14px 23px;
  text-decoration:none;
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
}
.btn{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:white;
  box-shadow:0 16px 45px rgba(47,109,255,.26);
}
.btn-secondary{
  border-color:var(--line);
  color:#eaf1ff;
  background:rgba(255,255,255,.045);
}
.glass,.card,.article-card,.metric{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.glass{padding:30px;backdrop-filter:blur(20px)}
.dashboard{
  display:grid;
  gap:16px;
}
.dash-row{
  min-height:74px;
  border:1px solid rgba(120,170,255,.16);
  background:rgba(7,17,31,.75);
  border-radius:18px;
  padding:17px;
}
.dash-row span{
  display:block;
  height:7px;
  border-radius:20px;
  background:linear-gradient(90deg,#5aa0ff,transparent);
  margin-bottom:13px;
}
.section{padding:76px 7%}
.wrap{max-width:var(--max);margin:auto}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.card,.article-card,.metric{padding:28px}
.metric strong{font-size:2.2rem;display:block;line-height:1;color:white}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article-card img{border-radius:20px;margin-bottom:18px;aspect-ratio:16/9;object-fit:cover}
.article-card a{text-decoration:none}
.kicker{color:#7fb3ff;font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800}
.share{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.share a,.share button{
  background:rgba(255,255,255,.045);
  color:#eaf1ff;
  border:1px solid var(--line);
  min-height:42px;
  font-size:.9rem;
}
.article{
  max-width:860px;
  margin:auto;
}
.article h1{font-size:clamp(2.6rem,6vw,5.2rem)}
.article-body{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:28px;
  padding:clamp(24px,5vw,54px);
}
.article-body h2{font-size:2.2rem;margin-top:34px}
.article-body h3{margin-top:26px}
.toc{
  background:rgba(90,160,255,.08);
  border:1px solid rgba(90,160,255,.2);
  border-radius:22px;
  padding:22px;
}
.footer{
  padding:78px 7% 34px;
  border-top:1px solid var(--line);
  background:#05070d;
}
.footer-grid{
  max-width:var(--max);
  margin:auto;
  display:grid;
  grid-template-columns:1fr 460px;
  gap:36px;
}
.footer-bottom{
  max-width:var(--max);
  margin:34px auto 0;
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#8190a7;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.aol-form{
  border:1px solid #35527d;
  background:#08111e;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.36);
}
.aol-title{
  background:linear-gradient(90deg,#16355f,#0e1c33);
  padding:12px 16px;
  font-weight:800;
  color:#dceaff;
}
.aol-form form{padding:18px}
.aol-form label{display:block;color:#bcd0ec;font-size:.9rem;margin:10px 0 5px}
.aol-form input,.aol-form textarea{
  width:100%;
  background:#050a13;
  border:1px solid #273b5b;
  border-radius:10px;
  color:white;
  padding:13px;
  font:inherit;
}
.aol-form button{margin-top:14px;width:100%;background:#2f6dff;color:white}
[data-fs-success],[data-fs-error]{display:none;padding:12px 18px;color:#cbd7ea}
.hero.small{min-height:auto;padding-top:80px;padding-bottom:40px}
.breadcrumb{color:#7f8da3;font-size:.92rem;margin-bottom:24px}
ul{color:#b8c5d8}
@media(max-width:920px){
  .site-header{align-items:flex-start;flex-direction:column}
  .hero-grid,.two,.footer-grid{grid-template-columns:1fr}
  .grid,.article-grid{grid-template-columns:1fr}
  h1{font-size:clamp(3rem,15vw,5rem)}
  .hero{padding-top:54px}
}
