:root {
  --bg: #06111f;
  --bg2: #0a1729;
  --fg: #f5f7fb;
  --muted: #a9b6cc;
  --cyan: #47d8ff;
  --amber: #ffb84a;
  --line: #20304a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.45; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 92vh; position: relative; background: linear-gradient(90deg, rgba(6,17,31,.96) 0%, rgba(6,17,31,.78) 55%, rgba(6,17,31,.35) 100%), url("../assets/hero-preview.jpg") center/cover no-repeat; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.nav { position: absolute; z-index: 2; top: 28px; left: 0; right: 0; }
.nav .wrap, .nav-actions, .language-switcher { display: flex; align-items: center; }
.nav .wrap { justify-content: space-between; }
.nav-actions { gap: 18px; }
.brand { font-weight: 800; letter-spacing: .02em; }
.badge { font-size: 13px; color: var(--cyan); border: 1px solid rgba(71,216,255,.35); padding: 8px 12px; border-radius: 999px; background: rgba(71,216,255,.08); }
.language-switcher { gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.language-switcher span { color: #74839a; }
.language-switcher a[aria-current="page"] { color: var(--cyan); }
h1 { font-size: clamp(48px, 8vw, 92px); line-height: .95; margin: 0 0 24px; letter-spacing: -.07em; max-width: 780px; }
h2 { font-size: clamp(34px, 5vw, 58px); line-height: 1; margin: 0 0 18px; letter-spacing: -.05em; }
.lead { font-size: clamp(22px, 3vw, 34px); max-width: 760px; margin: 0 0 34px; color: #e7edf7; }
.sub { font-size: 18px; color: var(--muted); max-width: 720px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.btn { padding: 15px 22px; border-radius: 14px; font-weight: 700; background: var(--fg); color: #07111f; }
.btn.alt { background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid var(--line); }
section { padding: 92px 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), var(--bg2)); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; }
.cards-grid { margin-top: 42px; }
.card { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 24px; padding: 28px; }
.span4 { grid-column: span 4; }
.span5 { grid-column: span 5; }
.span6 { grid-column: span 6; }
.span7 { grid-column: span 7; }
.span12 { grid-column: span 12; }
.kicker { font-weight: 800; color: var(--cyan); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin-bottom: 14px; }
.muted { color: var(--muted); }
.big { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; }
.number { font-size: 18px; color: var(--amber); font-weight: 900; margin-bottom: 10px; }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 34px; }
.flow div { border-top: 2px solid var(--cyan); padding-top: 15px; color: var(--muted); }
.flow b { display: block; color: var(--fg); margin-bottom: 8px; }
.img { min-height: 420px; border-radius: 30px; background: url("../assets/substrate-preview.jpg") center/cover no-repeat; border: 1px solid var(--line); }
.quote { font-size: clamp(30px, 5vw, 56px); line-height: 1.04; letter-spacing: -.055em; font-weight: 900; max-width: 980px; }
.quote em { font-style: normal; color: var(--cyan); }
.table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.table th, .table td { text-align: left; border-bottom: 1px solid var(--line); padding: 16px 10px; color: var(--muted); }
.table th { color: var(--fg); font-size: 14px; }
.table td:first-child { color: var(--cyan); font-weight: 800; }
.closing-copy { margin-top: 28px; }
.footer { padding: 46px 0; color: #74839a; }
.fine { font-size: 13px; color: #77869b; }

@media (max-width: 820px) {
  .span4, .span5, .span6, .span7 { grid-column: span 12; }
  .flow { grid-template-columns: 1fr; }
  .hero { background-position: center right; }
  .card { padding: 22px; }
  .img { min-height: 300px; }
  .badge { display: none; }
}