1  :root {
  2    --bg: #0b1220;
  3    --bg-soft: #10192b;
  4    --card: #162235;
  5    --text: #e6edf6;
  6    --muted: #9fb0c7;
  7    --accent: #06b6d4;
  8    --accent-2: #22c55e;
  9    --border: #2a3a52;
 10  }
 11  
 12  * { box-sizing: border-box; }
 13  
 14  body {
 15    margin: 0;
 16    color: var(--text);
 17    background: radial-gradient(1200px 700px at 10% -10%, #1a2740 0, var(--bg) 52%);
 18    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 19    line-height: 1.5;
 20  }
 21  
 22  a { color: #7dd3fc; }
 23  a:hover { color: #bae6fd; }
 24  
 25  .container {
 26    width: min(1120px, calc(100% - 2rem));
 27    margin: 0 auto;
 28  }
 29  
 30  .topbar {
 31    position: sticky;
 32    top: 0;
 33    z-index: 20;
 34    background: rgba(8, 15, 28, 0.9);
 35    border-bottom: 1px solid var(--border);
 36    backdrop-filter: blur(6px);
 37  }
 38  
 39  .nav {
 40    display: flex;
 41    align-items: center;
 42    justify-content: space-between;
 43    min-height: 62px;
 44    gap: 1rem;
 45  }
 46  
 47  .brand {
 48    color: var(--text);
 49    text-decoration: none;
 50    font-weight: 700;
 51    letter-spacing: 0.2px;
 52  }
 53  
 54  .nav nav {
 55    display: flex;
 56    flex-wrap: wrap;
 57    gap: 0.8rem;
 58  }
 59  
 60  .nav nav a {
 61    color: var(--muted);
 62    text-decoration: none;
 63    padding: 0.35rem 0.55rem;
 64    border-radius: 8px;
 65  }
 66  
 67  .nav nav a:hover {
 68    color: var(--text);
 69    background: #1b2a43;
 70  }
 71  
 72  .page {
 73    padding: 2.2rem 0 3.4rem;
 74  }
 75  
 76  .hero {
 77    background: linear-gradient(140deg, #0f1a2e, #111e35 55%, #0f172a);
 78    border: 1px solid var(--border);
 79    border-radius: 14px;
 80    padding: 1.4rem;
 81  }
 82  
 83  .eyebrow {
 84    margin: 0;
 85    color: #67e8f9;
 86    text-transform: uppercase;
 87    letter-spacing: 0.12em;
 88    font-size: 0.76rem;
 89  }
 90  
 91  h1 { margin: 0.4rem 0 0.6rem; line-height: 1.2; }
 92  h2 { margin: 0 0 0.5rem; line-height: 1.25; }
 93  h3 { margin: 0.2rem 0 0.5rem; }
 94  
 95  .cta-row {
 96    display: flex;
 97    flex-wrap: wrap;
 98    gap: 0.7rem;
 99    margin-top: 1rem;
100  }
101  
102  .button {
103    display: inline-block;
104    text-decoration: none;
105    color: #00141a;
106    background: linear-gradient(135deg, var(--accent), #38bdf8);
107    border-radius: 9px;
108    padding: 0.55rem 0.9rem;
109    font-weight: 700;
110  }
111  
112  .button.ghost {
113    color: var(--text);
114    background: #0e1728;
115    border: 1px solid var(--border);
116  }
117  
118  .stats-grid {
119    margin-top: 1rem;
120    display: grid;
121    gap: 0.8rem;
122    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
123  }
124  
125  .grid-2 {
126    margin-top: 1rem;
127    display: grid;
128    gap: 0.8rem;
129    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
130  }
131  
132  .card {
133    background: var(--card);
134    border: 1px solid var(--border);
135    border-radius: 12px;
136    padding: 1rem;
137  }
138  
139  .stat .metric {
140    margin: 0.1rem 0 0.25rem;
141    font-size: 1.3rem;
142    font-weight: 700;
143  }
144  
145  .muted { color: var(--muted); }
146  
147  ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
148  li { margin-bottom: 0.35rem; }
149  
150  .table-wrap { overflow-x: auto; }
151  
152  table {
153    width: 100%;
154    border-collapse: collapse;
155    margin-top: 0.5rem;
156    font-size: 0.94rem;
157  }
158  
159  th, td {
160    border: 1px solid var(--border);
161    padding: 0.55rem;
162    text-align: left;
163    vertical-align: top;
164  }
165  
166  th { background: #1b2b46; }
167  
168  .chip {
169    display: inline-block;
170    padding: 0.2rem 0.55rem;
171    border-radius: 999px;
172    font-size: 0.76rem;
173    border: 1px solid var(--border);
174    color: var(--muted);
175  }
176  
177  .timeline {
178    display: grid;
179    gap: 0.55rem;
180  }
181  
182  .timeline article {
183    background: #122037;
184    border: 1px solid var(--border);
185    border-radius: 10px;
186    padding: 0.75rem;
187  }
188  
189  .diagram {
190    width: 100%;
191    border: 1px solid var(--border);
192    border-radius: 12px;
193    background: #0d1527;
194  }
195  
196  .footer {
197    border-top: 1px solid var(--border);
198    color: var(--muted);
199    padding: 1rem 0 2rem;
200  }
201  
202  @media (max-width: 700px) {
203    .nav { align-items: flex-start; padding: 0.5rem 0; }
204    .nav nav { gap: 0.35rem; }
205  }