Update index.html

index.html

@@ -1444,4 +1444,1647 @@
     </footer>
 
 </body>
-</html>
+</html>
+
+:root {
+    --bg: #050506;
+    --bg-soft: #0a0a0d;
+    --panel: #0d0d11;
+    --panel-2: #121216;
+
+    --text: #f4f4f5;
+    --muted: #96969f;
+    --muted-2: #66666f;
+
+    --red: #e10618;
+    --red-bright: #ff2238;
+    --red-dark: #78000c;
+
+    --border: rgba(255, 255, 255, 0.08);
+    --border-red: rgba(225, 6, 24, 0.38);
+
+    --max-width: 1220px;
+}
+
+
+/* ============================================================
+   RESET
+============================================================ */
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    margin: 0;
+
+    background:
+        radial-gradient(
+            circle at 50% -20%,
+            #200008 0%,
+            #080809 34%,
+            #050506 64%
+        );
+
+    color: var(--text);
+
+    font-family:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    line-height: 1.65;
+
+    overflow-x: hidden;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+strong {
+    font-weight: 700;
+}
+
+
+/* ============================================================
+   BACKGROUND
+============================================================ */
+
+.background-grid {
+    position: fixed;
+    inset: 0;
+
+    pointer-events: none;
+
+    opacity: 0.16;
+
+    background-image:
+        linear-gradient(
+            rgba(255,255,255,0.035) 1px,
+            transparent 1px
+        ),
+        linear-gradient(
+            90deg,
+            rgba(255,255,255,0.035) 1px,
+            transparent 1px
+        );
+
+    background-size:
+        42px 42px;
+
+    mask-image:
+        linear-gradient(
+            to bottom,
+            black,
+            transparent 80%
+        );
+
+    z-index: -3;
+}
+
+.background-glow {
+    position: fixed;
+
+    width: 600px;
+    height: 600px;
+
+    border-radius: 50%;
+
+    filter: blur(150px);
+
+    opacity: 0.08;
+
+    pointer-events: none;
+
+    z-index: -2;
+
+    background: var(--red);
+}
+
+.glow-one {
+    left: -260px;
+    top: 250px;
+}
+
+.glow-two {
+    right: -350px;
+    top: 1050px;
+}
+
+
+/* ============================================================
+   LAYOUT
+============================================================ */
+
+.container {
+    width: min(
+        calc(100% - 44px),
+        var(--max-width)
+    );
+
+    margin:
+        0 auto;
+}
+
+.narrow {
+    max-width: 900px;
+}
+
+.section {
+    position: relative;
+
+    padding:
+        110px 0;
+}
+
+.compact-section {
+    padding-top: 35px;
+    padding-bottom: 60px;
+}
+
+.dark-section {
+    background:
+        linear-gradient(
+            180deg,
+            rgba(255,255,255,0.015),
+            rgba(255,255,255,0.006)
+        );
+
+    border-top:
+        1px solid var(--border);
+
+    border-bottom:
+        1px solid var(--border);
+}
+
+
+/* ============================================================
+   NAV
+============================================================ */
+
+.topbar {
+    position: sticky;
+
+    top: 0;
+
+    z-index: 20;
+
+    backdrop-filter:
+        blur(20px);
+
+    background:
+        rgba(5, 5, 6, 0.78);
+
+    border-bottom:
+        1px solid var(--border);
+}
+
+.nav-inner {
+    min-height: 72px;
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    gap: 32px;
+}
+
+.brand {
+    display: flex;
+
+    align-items: center;
+
+    gap: 12px;
+}
+
+.brand-mark {
+    width: 38px;
+    height: 38px;
+
+    border:
+        1px solid var(--red);
+
+    display: grid;
+
+    place-items: center;
+
+    font-weight: 900;
+
+    font-size: 20px;
+
+    color: white;
+
+    background:
+        linear-gradient(
+            145deg,
+            #180006,
+            #070708
+        );
+
+    box-shadow:
+        0 0 25px
+        rgba(225, 6, 24, 0.22);
+}
+
+.brand-text {
+    display: flex;
+
+    flex-direction: column;
+
+    font-size: 15px;
+
+    font-weight: 800;
+
+    letter-spacing: 0.14em;
+}
+
+.brand-text small {
+    color: var(--muted);
+
+    font-size: 8px;
+
+    font-weight: 600;
+
+    letter-spacing: 0.24em;
+}
+
+.nav-links {
+    display: flex;
+
+    gap: 24px;
+
+    font-size: 13px;
+
+    color: var(--muted);
+}
+
+.nav-links a {
+    transition:
+        color 0.2s ease;
+}
+
+.nav-links a:hover {
+    color: white;
+}
+
+
+/* ============================================================
+   HERO
+============================================================ */
+
+.hero {
+    padding:
+        120px 0 75px;
+}
+
+.hero-grid {
+    display: grid;
+
+    grid-template-columns:
+        1.25fr 0.75fr;
+
+    gap: 80px;
+
+    align-items: center;
+}
+
+.eyebrow,
+.panel-label,
+.section-heading > span {
+    color: var(--red-bright);
+
+    font-size: 11px;
+
+    font-weight: 800;
+
+    letter-spacing: 0.22em;
+
+    text-transform: uppercase;
+}
+
+.hero h1 {
+    margin:
+        20px 0 20px;
+
+    font-size:
+        clamp(80px, 12vw, 160px);
+
+    line-height: 0.85;
+
+    letter-spacing: -0.07em;
+
+    font-weight: 950;
+}
+
+.hero h1 span {
+    color: var(--red);
+}
+
+.hero-lead {
+    max-width: 720px;
+
+    color: #c6c6cc;
+
+    font-size: 20px;
+
+    line-height: 1.6;
+}
+
+.hero-actions {
+    display: flex;
+
+    gap: 13px;
+
+    margin-top: 34px;
+}
+
+.button {
+    min-height: 48px;
+
+    padding:
+        0 22px;
+
+    display: inline-flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border:
+        1px solid var(--border);
+
+    font-size: 13px;
+
+    font-weight: 700;
+
+    transition:
+        0.2s ease;
+}
+
+.button-primary {
+    border-color:
+        var(--red);
+
+    background:
+        var(--red);
+
+    color: white;
+}
+
+.button-primary:hover {
+    background:
+        var(--red-bright);
+}
+
+.button-secondary {
+    background:
+        rgba(255,255,255,0.02);
+}
+
+.button-secondary:hover {
+    border-color:
+        rgba(255,255,255,0.2);
+
+    background:
+        rgba(255,255,255,0.05);
+}
+
+.hero-note {
+    margin-top: 20px;
+
+    color: var(--muted-2);
+
+    font-size: 12px;
+}
+
+.hero-panel {
+    padding: 30px;
+
+    border:
+        1px solid var(--border-red);
+
+    background:
+        linear-gradient(
+            145deg,
+            rgba(225,6,24,0.07),
+            rgba(255,255,255,0.018)
+        );
+
+    box-shadow:
+        0 30px 100px
+        rgba(0,0,0,0.35);
+}
+
+.big-stat {
+    margin:
+        12px 0 26px;
+
+    font-size: 54px;
+
+    font-weight: 900;
+
+    letter-spacing: -0.05em;
+}
+
+.big-stat small {
+    display: block;
+
+    margin-top: -4px;
+
+    color: var(--muted);
+
+    font-size: 12px;
+
+    letter-spacing: 0.08em;
+
+    font-weight: 600;
+}
+
+.stat-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(2, 1fr);
+
+    gap: 1px;
+
+    background:
+        var(--border);
+}
+
+.stat-grid div {
+    padding:
+        18px;
+
+    background:
+        var(--bg-soft);
+}
+
+.stat-grid strong,
+.stat-grid span {
+    display: block;
+}
+
+.stat-grid strong {
+    font-size: 21px;
+}
+
+.stat-grid span {
+    margin-top: 3px;
+
+    color: var(--muted);
+
+    font-size: 11px;
+}
+
+.hero-lineage {
+    display: flex;
+
+    flex-wrap: wrap;
+
+    gap: 8px;
+
+    margin-top: 25px;
+
+    color: var(--muted);
+
+    font-size: 12px;
+}
+
+.hero-lineage b {
+    color: var(--muted-2);
+}
+
+.hero-lineage .accent {
+    color: white;
+
+    font-weight: 800;
+}
+
+
+/* ============================================================
+   QUICK METRICS
+============================================================ */
+
+.quick-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(4, 1fr);
+
+    gap: 12px;
+}
+
+.metric-card {
+    min-height: 130px;
+
+    padding:
+        22px;
+
+    display: flex;
+
+    flex-direction: column;
+
+    justify-content: flex-end;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        rgba(255,255,255,0.012);
+}
+
+.metric-label {
+    color: var(--muted);
+
+    font-size: 11px;
+
+    margin-bottom: auto;
+}
+
+.metric-card strong {
+    font-size: 22px;
+}
+
+.metric-card small {
+    color: var(--muted);
+
+    font-size: 10px;
+}
+
+
+/* ============================================================
+   HEADINGS / PROSE
+============================================================ */
+
+.section-heading {
+    margin-bottom: 50px;
+}
+
+.section-heading h2 {
+    max-width: 900px;
+
+    margin:
+        10px 0 0;
+
+    font-size:
+        clamp(36px, 5vw, 62px);
+
+    line-height: 1.05;
+
+    letter-spacing: -0.045em;
+}
+
+.prose {
+    color: #b7b7be;
+
+    font-size: 16px;
+}
+
+.wide-prose {
+    max-width: 940px;
+}
+
+.prose p {
+    margin:
+        0 0 22px;
+}
+
+.lead-paragraph {
+    color: #eeeeef;
+
+    font-size: 21px;
+
+    line-height: 1.6;
+}
+
+blockquote {
+    margin:
+        40px 0 0;
+
+    padding:
+        24px 28px;
+
+    border-left:
+        3px solid var(--red);
+
+    background:
+        rgba(225,6,24,0.045);
+
+    color: white;
+
+    font-size: 20px;
+
+    font-weight: 650;
+}
+
+
+/* ============================================================
+   LINEAGE
+============================================================ */
+
+.lineage {
+    display: grid;
+
+    grid-template-columns:
+        1fr auto 1fr auto 1fr;
+
+    gap: 18px;
+
+    align-items: center;
+
+    margin-bottom: 45px;
+}
+
+.lineage-node {
+    padding:
+        26px;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        var(--panel);
+}
+
+.lineage-node.active {
+    border-color:
+        var(--red);
+
+    background:
+        linear-gradient(
+            140deg,
+            rgba(225,6,24,0.12),
+            var(--panel)
+        );
+}
+
+.lineage-node small {
+    display: block;
+
+    color: var(--muted);
+
+    font-size: 9px;
+
+    letter-spacing: 0.15em;
+}
+
+.lineage-node strong {
+    display: block;
+
+    margin-top: 7px;
+
+    font-size: 18px;
+}
+
+.lineage-arrow {
+    color: var(--red);
+
+    font-size: 24px;
+}
+
+
+/* ============================================================
+   ARCHITECTURE
+============================================================ */
+
+.architecture-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(4, 1fr);
+
+    gap: 12px;
+}
+
+.architecture-card {
+    min-height: 140px;
+
+    padding: 22px;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        var(--panel);
+}
+
+.architecture-card span {
+    display: block;
+
+    color: var(--muted);
+
+    font-size: 11px;
+}
+
+.architecture-card strong {
+    display: block;
+
+    margin-top: 30px;
+
+    font-size: 27px;
+}
+
+.split-panel {
+    display: grid;
+
+    grid-template-columns:
+        1fr 1fr;
+
+    gap: 60px;
+
+    margin-top: 60px;
+
+    padding:
+        35px;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        rgba(255,255,255,0.012);
+}
+
+.layer-list {
+    display: flex;
+
+    flex-wrap: wrap;
+
+    gap: 8px;
+
+    margin-top: 24px;
+}
+
+.layer-list span {
+    width: 48px;
+    height: 48px;
+
+    display: grid;
+
+    place-items: center;
+
+    border:
+        1px solid var(--border-red);
+
+    background:
+        rgba(225,6,24,0.04);
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+}
+
+.big-arrow {
+    margin-top: 35px;
+
+    font-size: 24px;
+
+    font-weight: 800;
+}
+
+.big-arrow span {
+    padding:
+        0 15px;
+
+    color: var(--red);
+}
+
+.compute-panel {
+    margin-top: 20px;
+
+    padding: 30px;
+
+    border:
+        1px solid var(--border-red);
+
+    background:
+        rgba(225,6,24,0.035);
+}
+
+.compute-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(4, 1fr);
+
+    gap: 30px;
+
+    margin-top: 23px;
+}
+
+.compute-grid strong,
+.compute-grid span {
+    display: block;
+}
+
+.compute-grid strong {
+    font-size: 25px;
+}
+
+.compute-grid span {
+    color: var(--muted);
+
+    font-size: 11px;
+}
+
+
+/* ============================================================
+   TABLES
+============================================================ */
+
+.comparison-table {
+    margin-top: 36px;
+
+    border:
+        1px solid var(--border);
+
+    overflow: hidden;
+}
+
+.comparison-row {
+    display: grid;
+
+    grid-template-columns:
+        2fr repeat(4, 1fr);
+
+    border-top:
+        1px solid var(--border);
+}
+
+.comparison-row:first-child {
+    border-top: none;
+}
+
+.comparison-row > * {
+    padding:
+        15px 17px;
+}
+
+.comparison-row span {
+    color: #b5b5bb;
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+
+    font-size: 12px;
+}
+
+.comparison-header {
+    background:
+        rgba(255,255,255,0.025);
+
+    color: var(--muted);
+
+    text-transform: uppercase;
+
+    letter-spacing: 0.08em;
+
+    font-size: 10px;
+}
+
+.comparison-header span {
+    font-family: inherit;
+
+    font-size: 10px;
+}
+
+.comparison-row.highlighted {
+    background:
+        rgba(225,6,24,0.045);
+}
+
+.caption {
+    color: var(--muted-2);
+
+    font-size: 11px;
+
+    margin-top: 13px;
+}
+
+
+/* ============================================================
+   TRAINING
+============================================================ */
+
+.training-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(4, 1fr);
+
+    gap: 12px;
+}
+
+.training-card {
+    padding: 23px;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        var(--panel);
+}
+
+.training-label {
+    display: block;
+
+    color: var(--muted);
+
+    font-size: 10px;
+}
+
+.training-card strong {
+    display: block;
+
+    margin-top: 18px;
+
+    font-size: 21px;
+}
+
+.milestone {
+    margin-top: 60px;
+
+    padding: 35px;
+
+    display: grid;
+
+    grid-template-columns:
+        0.6fr 1.4fr;
+
+    gap: 40px;
+
+    border:
+        1px solid var(--red);
+
+    background:
+        linear-gradient(
+            135deg,
+            rgba(225,6,24,0.1),
+            rgba(255,255,255,0.015)
+        );
+}
+
+.milestone h3 {
+    margin:
+        8px 0 0;
+
+    font-size: 36px;
+}
+
+.milestone-stats {
+    display: grid;
+
+    grid-template-columns:
+        repeat(2, 1fr);
+
+    gap: 25px;
+}
+
+.milestone-stats strong,
+.milestone-stats span {
+    display: block;
+}
+
+.milestone-stats strong {
+    font-size: 23px;
+}
+
+.milestone-stats span {
+    color: var(--muted);
+
+    font-size: 10px;
+}
+
+.warning-box {
+    margin-top: 20px;
+
+    padding: 22px 25px;
+
+    border:
+        1px solid rgba(255,255,255,0.11);
+
+    background:
+        rgba(255,255,255,0.02);
+
+    color: #aaaab1;
+
+    font-size: 13px;
+}
+
+.warning-box strong {
+    color: white;
+}
+
+.warning-box p {
+    margin:
+        5px 0 0;
+}
+
+
+/* ============================================================
+   DATA
+============================================================ */
+
+.data-pipeline {
+    display: grid;
+
+    grid-template-columns:
+        repeat(4, 1fr);
+
+    gap: 12px;
+
+    margin:
+        45px 0;
+}
+
+.data-stage {
+    min-height: 155px;
+
+    padding: 24px;
+
+    border:
+        1px solid var(--border);
+
+    display: flex;
+
+    flex-direction: column;
+
+    justify-content: space-between;
+
+    background:
+        var(--panel);
+}
+
+.data-stage strong {
+    font-size: 22px;
+}
+
+.data-stage span {
+    color: var(--muted);
+
+    font-size: 11px;
+}
+
+.data-stage.keep {
+    border-top:
+        2px solid #5dff94;
+}
+
+.data-stage.clean {
+    border-top:
+        2px solid #ffc65d;
+}
+
+.data-stage.split {
+    border-top:
+        2px solid #6e8cff;
+}
+
+.data-stage.drop {
+    border-top:
+        2px solid var(--red);
+}
+
+.data-number-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(4, 1fr);
+
+    gap: 12px;
+
+    margin-top: 50px;
+}
+
+.data-number-grid div {
+    padding: 22px;
+
+    border:
+        1px solid var(--border);
+}
+
+.data-number-grid strong,
+.data-number-grid span {
+    display: block;
+}
+
+.data-number-grid strong {
+    font-size: 25px;
+}
+
+.data-number-grid span {
+    margin-top: 5px;
+
+    color: var(--muted);
+
+    font-size: 10px;
+}
+
+
+/* ============================================================
+   BENCHMARK
+============================================================ */
+
+.benchmark-title {
+    margin-top: 55px;
+
+    margin-bottom: 18px;
+
+    color: white;
+
+    font-size: 15px;
+
+    font-weight: 750;
+}
+
+.benchmark-warning {
+    border-color:
+        rgba(225,6,24,0.28);
+
+    background:
+        rgba(225,6,24,0.025);
+}
+
+.task-grid {
+    display: grid;
+
+    grid-template-columns:
+        repeat(3, 1fr);
+
+    gap: 10px;
+
+    margin-top: 30px;
+}
+
+.task-grid div {
+    padding: 18px;
+
+    display: flex;
+
+    justify-content: space-between;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        var(--panel);
+}
+
+.task-grid span {
+    color: var(--muted);
+
+    font-size: 11px;
+}
+
+
+/* ============================================================
+   GENERATIONS
+============================================================ */
+
+.generation-card {
+    margin-top: 20px;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        #09090b;
+}
+
+.generation-header {
+    padding:
+        16px 20px;
+
+    border-bottom:
+        1px solid var(--border);
+}
+
+.generation-header span {
+    display: block;
+
+    color: var(--red-bright);
+
+    font-size: 9px;
+
+    letter-spacing: 0.15em;
+
+    margin-bottom: 5px;
+}
+
+.generation-header strong {
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+
+    font-size: 13px;
+}
+
+.generation-body {
+    padding:
+        22px;
+
+    color: #d0d0d4;
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+
+    font-size: 12px;
+}
+
+.generation-body p {
+    margin:
+        10px 0 0;
+}
+
+.generation-mode {
+    color: var(--red-bright);
+
+    font-size: 9px;
+
+    font-weight: 800;
+
+    letter-spacing: 0.15em;
+}
+
+.sampled-mode {
+    color: #f0f0f0;
+}
+
+.generation-comment {
+    padding:
+        14px 20px;
+
+    border-top:
+        1px solid var(--border);
+
+    color: var(--muted);
+
+    font-size: 11px;
+}
+
+.behavior-grid {
+    display: grid;
+
+    grid-template-columns:
+        1fr 1fr;
+
+    gap: 20px;
+
+    margin-top: 40px;
+}
+
+.behavior-grid > div {
+    padding: 28px;
+
+    border:
+        1px solid var(--border);
+
+    background:
+        var(--panel);
+}
+
+.behavior-grid strong {
+    font-size: 18px;
+}
+
+.behavior-grid ul {
+    margin:
+        18px 0 0;
+
+    padding-left: 20px;
+
+    color: var(--muted);
+}
+
+.positive {
+    border-top-color:
+        #48c878 !important;
+}
+
+.negative {
+    border-top-color:
+        var(--red) !important;
+}
+
+
+/* ============================================================
+   STATUS
+============================================================ */
+
+.status-box {
+    padding: 35px;
+
+    border:
+        1px solid var(--border-red);
+
+    background:
+        linear-gradient(
+            140deg,
+            rgba(225,6,24,0.07),
+            rgba(255,255,255,0.01)
+        );
+}
+
+.status-box p {
+    color: #b9b9bf;
+}
+
+.status-indicator {
+    display: flex;
+
+    align-items: center;
+
+    gap: 10px;
+
+    margin-bottom: 27px;
+
+    color: white;
+
+    font-size: 11px;
+
+    font-weight: 800;
+
+    letter-spacing: 0.13em;
+}
+
+.status-indicator span {
+    width: 10px;
+    height: 10px;
+
+    border-radius: 50%;
+
+    background:
+        var(--red);
+
+    box-shadow:
+        0 0 15px
+        var(--red);
+}
+
+
+/* ============================================================
+   ROADMAP
+============================================================ */
+
+.roadmap {
+    border-top:
+        1px solid var(--border);
+}
+
+.roadmap-item {
+    display: grid;
+
+    grid-template-columns:
+        70px 1fr;
+
+    gap: 20px;
+
+    padding:
+        28px 0;
+
+    border-bottom:
+        1px solid var(--border);
+}
+
+.roadmap-item > span {
+    color: var(--muted-2);
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+}
+
+.roadmap-item strong {
+    font-size: 17px;
+}
+
+.roadmap-item p {
+    margin:
+        5px 0 0;
+
+    color: var(--muted);
+
+    font-size: 13px;
+}
+
+.roadmap-item.done > span {
+    color: #5dff94;
+}
+
+.roadmap-item.active > span {
+    color: var(--red-bright);
+}
+
+
+/* ============================================================
+   FINAL
+============================================================ */
+
+.final-section {
+    padding:
+        150px 0;
+}
+
+.final-mark {
+    color: var(--red);
+
+    font-size: 12px;
+
+    font-weight: 900;
+
+    letter-spacing: 0.4em;
+}
+
+.final-section h2 {
+    margin:
+        20px 0;
+
+    font-size:
+        clamp(40px, 6vw, 72px);
+
+    line-height: 1;
+
+    letter-spacing: -0.05em;
+}
+
+.final-section p {
+    color: var(--muted);
+
+    font-size: 17px;
+}
+
+.final-meta {
+    display: flex;
+
+    flex-wrap: wrap;
+
+    gap: 18px;
+
+    margin-top: 45px;
+
+    color: var(--muted-2);
+
+    font-size: 10px;
+
+    text-transform: uppercase;
+
+    letter-spacing: 0.1em;
+}
+
+
+/* ============================================================
+   FOOTER
+============================================================ */
+
+footer {
+    border-top:
+        1px solid var(--border);
+
+    background:
+        #030304;
+}
+
+.footer-inner {
+    min-height: 90px;
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    gap: 30px;
+
+    color: var(--muted-2);
+
+    font-size: 10px;
+}
+
+
+/* ============================================================
+   RESPONSIVE
+============================================================ */
+
+@media (
+    max-width: 980px
+) {
+    .hero-grid,
+    .split-panel,
+    .milestone {
+        grid-template-columns:
+            1fr;
+    }
+
+    .quick-grid,
+    .architecture-grid,
+    .training-grid,
+    .data-pipeline,
+    .data-number-grid,
+    .compute-grid {
+        grid-template-columns:
+            repeat(2, 1fr);
+    }
+
+    .nav-links {
+        display: none;
+    }
+
+    .lineage {
+        grid-template-columns:
+            1fr;
+
+        text-align: center;
+    }
+
+    .lineage-arrow {
+        transform:
+            rotate(90deg);
+    }
+
+    .comparison-table {
+        overflow-x: auto;
+    }
+
+    .comparison-row {
+        min-width: 780px;
+    }
+}
+
+
+@media (
+    max-width: 640px
+) {
+    .section {
+        padding:
+            78px 0;
+    }
+
+    .hero {
+        padding-top: 85px;
+    }
+
+    .hero h1 {
+        font-size:
+            clamp(70px, 25vw, 110px);
+    }
+
+    .hero-lead {
+        font-size: 17px;
+    }
+
+    .quick-grid,
+    .architecture-grid,
+    .training-grid,
+    .data-pipeline,
+    .data-number-grid,
+    .compute-grid,
+    .task-grid,
+    .behavior-grid,
+    .milestone-stats {
+        grid-template-columns:
+            1fr;
+    }
+
+    .hero-actions {
+        flex-direction: column;
+
+        align-items: stretch;
+    }
+
+    .button {
+        width: 100%;
+    }
+
+    .footer-inner {
+        padding:
+            25px 0;
+
+        align-items: flex-start;
+
+        flex-direction: column;
+    }
+}