:root{
  --bg:#0b0d12;
  --panel:#121722;
  --panel-2:#171d2b;
  --text:#eef3ff;
  --muted:#b6c0d6;
  --line:rgba(255,255,255,.1);
  --accent:#8bb6ff;
  --accent-2:#b18cff;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --radius:22px;
  --container:min(1120px, calc(100vw - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(circle at top left, rgba(139,182,255,.08), transparent 30%),
             radial-gradient(circle at top right, rgba(177,140,255,.08), transparent 25%),
             var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:var(--container);margin:0 auto}
.bg-orb{
  position:fixed; inset:auto; width:420px; height:420px; filter:blur(80px); border-radius:50%;
  pointer-events:none; opacity:.22; z-index:0;
}
.orb-a{background:#3d63ff; top:-120px; right:-120px}
.orb-b{background:#8f4cff; bottom:-180px; left:-120px}
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background:rgba(11,13,18,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:74px;
}
.brand{display:flex; align-items:center; gap:14px; font-weight:700}
.mark{
  display:inline-flex; flex-direction:column; gap:4px;
  line-height:1; letter-spacing:.18em; font-size:1.05rem; text-transform:uppercase;
}
.mark .line{display:block; width:58px; height:2px; background:linear-gradient(90deg,var(--text),transparent)}
.wordmark{font-size:1rem; color:var(--muted)}
nav{display:flex; gap:22px}
nav a{color:var(--muted); font-size:.95rem}
nav a:hover{color:var(--text)}

.hero{position:relative; padding:92px 0 48px; z-index:1}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.03); color:var(--muted); font-size:.86rem;
}
h1{
  margin:18px 0 16px; font-size:clamp(2.8rem, 7vw, 5.8rem);
  line-height:.95; letter-spacing:-.04em;
}
.lead{
  font-size:clamp(1.08rem,2vw,1.3rem);
  max-width:760px; color:var(--muted);
}
.hero-actions{display:flex; gap:14px; margin:28px 0 34px; flex-wrap:wrap}
.button{
  padding:13px 18px; border-radius:14px; border:1px solid var(--line);
  font-weight:600; transition:.2s ease; display:inline-flex; align-items:center;
}
.button.primary{
  background:linear-gradient(135deg, rgba(139,182,255,.28), rgba(177,140,255,.18));
  box-shadow:var(--shadow)
}
.button.secondary{background:rgba(255,255,255,.03)}
.button:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.2)}

.hero-panel{
  display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin-top:14px;
}
.quote, .rail, .card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.quote{padding:26px}
.quote-kicker, .section-label, .closing-kicker{
  color:#9dbaff; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:700;
}
.quote p{margin:8px 0 0; font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.25}
.rail{padding:26px; display:flex; flex-direction:column; justify-content:center; gap:16px}
.track{
  height:2px; width:100%; background:rgba(255,255,255,.12); position:relative; overflow:hidden;
}
.glow{
  position:absolute; top:-2px; left:10%; width:120px; height:6px;
  background:linear-gradient(90deg, transparent, var(--accent), #fff, transparent);
  filter:blur(2px); animation: glide 4.5s ease-in-out infinite;
}
@keyframes glide{
  0%{left:-20%} 50%{left:45%} 100%{left:100%}
}

.section{padding:40px 0}
.section-intro{margin-bottom:18px}
.section-intro h2{
  margin:.35rem 0 0; font-size:clamp(1.8rem,4vw,3rem); line-height:1.05; letter-spacing:-.03em;
}
.grid{display:grid; gap:18px}
.grid.two{grid-template-columns:1.08fr .92fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{padding:24px; position:relative; overflow:hidden}
.prose p{margin:0 0 1rem; color:var(--muted)}
.visual-card{display:flex; align-items:center; justify-content:center; min-height:320px}
.visual-card img{width:100%; height:auto; opacity:.95}
.timeline .t-item{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.timeline .t-item:last-child{border-bottom:0}
.timeline .year{
  display:inline-block; min-width:70px; margin-bottom:6px; color:#cdd9ff; font-weight:700
}
.timeline p{margin:0; color:var(--muted)}
.feature h3{margin:0 0 8px; font-size:1.1rem}
.feature p,.note p{margin:0; color:var(--muted)}
.note{margin-top:18px}
.closing{padding-bottom:74px}
.closing-card{text-align:center; padding:42px}
.closing-card h2{margin:10px 0 8px; font-size:clamp(2rem,4vw,3.2rem)}
.closing-card p{margin:0; color:var(--muted); font-size:1.1rem}

.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:28px 0 40px;
}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start}
.footer-brand{font-size:1.2rem; font-weight:800; margin-bottom:8px}
.site-footer p{margin:0; color:var(--muted)}
.footer-meta{text-align:right}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@media (max-width: 900px){
  nav{display:none}
  .hero-panel,.grid.two,.grid.three,.footer-grid{grid-template-columns:1fr}
  .footer-meta{text-align:left}
}
@media (max-width: 640px){
  .hero{padding-top:72px}
  .container{width:min(1120px, calc(100vw - 24px))}
  .card,.quote,.rail{padding:18px}
  .button{width:100%; justify-content:center}
}