* { box-sizing: border-box; }
:root{
  --text:#eef2ff;
  --muted:#b8c0e0;
  --accent:#67d4ff;
  --accent-2:#7cffb2;
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 30px rgba(0,0,0,.28);
}
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, Arial, sans-serif;
  background:linear-gradient(180deg,#0a1020 0%, #0d1430 100%);
  color:var(--text);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; border-radius:16px; }
.hero{
  padding:24px clamp(20px,4vw,48px) 72px;
  background:
    radial-gradient(circle at top right, rgba(103,212,255,.18), transparent 32%),
    radial-gradient(circle at top left, rgba(124,255,178,.12), transparent 28%);
}
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:56px;
}
.brand{ font-weight:700; letter-spacing:.04em; }
.nav-links{ display:flex; gap:18px; flex-wrap:wrap; }
.nav-links a{ color:var(--muted); }

.hero-content{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap:28px;
  align-items:start;
}
.hero-text h1{
  font-size: clamp(2rem, 5vw, 4rem);
  line-height:1.08;
  margin:.2rem 0 1rem;
  max-width:12ch;
}
.eyebrow{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.82rem;
  font-weight:700;
}
.lead{
  max-width:60ch;
  color:var(--muted);
  font-size:1.05rem;
}
.hero-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.button{
  display:inline-block;
  padding:12px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
}
.button.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#08101f;
  border:none;
  font-weight:700;
}
.hero-card, .card, .media-card{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(8px);
}
.clean-list, .hero-card ul { padding-left:18px; }
.section{ padding:70px clamp(20px,4vw,48px); }
.section.alt{ background:rgba(255,255,255,.03); }
.section-title{ margin-bottom:24px; }
.section-title h2{
  margin:.2rem 0 0;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}
.grid{ display:grid; gap:20px; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery-grid{ align-items:start; }
.highlight{
  background:linear-gradient(180deg, rgba(103,212,255,.12), rgba(124,255,178,.08));
}
.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-row.center{ justify-content:center; }
.pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--muted);
}
.architecture{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:20px;
}
.arch-box{
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:22px;
  padding:22px;
}
.arch-arrow{
  font-size:2rem;
  color:var(--accent);
  text-align:center;
}
.diagram pre{
  margin:0;
  white-space:pre-wrap;
  font-family: "Courier New", monospace;
  color:#d9e8ff;
}
.quote{
  margin-top:20px;
  border-left:4px solid var(--accent);
}
.media-card figcaption h3{
  margin-bottom:.4rem;
}
.footer{
  padding:32px 20px 50px;
  text-align:center;
  color:var(--muted);
}
.small{
  font-size:.9rem;
  opacity:.88;
}
@media (max-width: 920px){
  .hero-content,
  .grid.two,
  .grid.three,
  .architecture{
    grid-template-columns:1fr;
  }
  .arch-arrow{ transform:rotate(90deg); }
}