/* ============================================
           HERO
           ============================================ */
        .hero {
            padding: 170px var(--section-px) 90px;
            display: flex;
            flex-wrap: wrap;
            gap: 48px;
            align-items: center;
        }

        .hero-text { flex: 1.3 1 380px; }

        .hero-text .section-label { margin-bottom: 14px; }

        .hero-title {
            font-size: clamp(30px, 4.5vw, 46px);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -0.02em;
            color: var(--text-bright);
            margin-bottom: 28px;
        }

        .cursor {
            display: inline-block;
            width: 0.55em;
            height: 1em;
            background: var(--primary);
            vertical-align: -0.12em;
            margin-left: 8px;
            animation: msBlink 1.1s step-end infinite;
        }

        .hero-sub {
            color: var(--text-muted);
            max-width: 560px;
            margin-bottom: 38px;
        }

        .hero-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .hero-figure {
            flex: 1 1 260px;
            text-align: center;
        }
        .hero-figure svg {
            width: 100%;
            max-width: 320px;
            height: auto;
        }
        .hero-figure .node-labels { font-family: var(--font-mono); }
        .hero-figure figcaption {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 10px;
        }

        /* ============================================
           VISION
           ============================================ */
        .vision-text { max-width: 720px; }
        .vision-text p { margin-bottom: 18px; }
        .vision-text p:last-child { margin-bottom: 0; }
        .vision-text .section-title { margin-bottom: 30px; }

        .diff-block {
            border: 1px solid var(--border);
            margin-top: 56px;
            padding: 22px 28px;
            font-size: 12.5px;
            line-height: 2;
        }
        .diff-cmd { color: var(--text-dim); margin-bottom: 8px; }
        .diff-minus { color: var(--amber); }
        .diff-plus { color: var(--primary); }

        .compare {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
            margin-top: 24px;
        }

        .compare-cell {
            border: 1px solid var(--border);
            padding: 28px;
        }
        .compare-cell > svg,
        .compare-cell .graph {
            display: block;
            width: 100%;
            max-width: 270px;
            height: auto;
            margin: 0 auto 20px;
        }

        .compare-verdict {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .verdict-minus { color: var(--amber); }
        .verdict-plus { color: var(--primary); }

        .compare-body {
            font-size: 12.5px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .compare-stat {
            font-size: 11.5px;
            color: var(--text-dim);
        }

        .vision-punchline {
            color: var(--text-muted);
            max-width: 720px;
            margin-top: 40px;
        }

        /* ============================================
           TECHNOLOGY PILLARS
           ============================================ */
        .ls-cmd {
            font-size: 12px;
            color: var(--text-dim);
        }

        .pillar-list {
            border: 1px solid var(--border);
            margin-top: 14px;
        }

        .pillar-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            align-items: baseline;
            transition: background 0.2s;
        }
        .pillar-row:last-child { border-bottom: none; }
        .pillar-row:hover { background: var(--primary-tint); }

        .pillar-num {
            flex: none;
            width: 42px;
            font-size: 12.5px;
            color: var(--primary);
        }

        .pillar-name {
            flex: 0 0 170px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-bright);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .pillar-desc {
            flex: 1 1 300px;
            font-size: 12.5px;
            line-height: 1.8;
            color: var(--text-muted);
        }

        .pillar-tag {
            flex: none;
            margin-left: auto;
            font-size: 11.5px;
            color: var(--text-dim);
            text-align: right;
        }

        /* ============================================
           SERVICES
           ============================================ */
        /* 340px is deliberate and the window is narrow. There are three cards:
           ./build spans the full row, leaving ./advise and ./educate to fill the
           next one. Below 320px of min-width the grid opens a third column that
           nothing occupies (34% of the row empty at both 1440 and 1024); above
           349px it stops fitting two columns at 768 and stacks unnecessarily.
           Anything in 320-349 works; 340 sits mid-window. */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 20px;
        }

        .service-card {
            border: 1px solid var(--border);
            padding: 28px;
            transition: border-color 0.2s;
        }
        .service-card:hover { border-color: var(--primary); }

        .service-card h3 {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-bright);
            margin-bottom: 12px;
        }

        .service-card p {
            font-size: 12.5px;
            color: var(--text-muted);
        }

        .service-card-primary {
            grid-column: 1 / -1;
            border-color: var(--primary);
            padding: 32px;
        }
        .service-card-primary h3 {
            font-size: 16px;
            color: var(--primary);
            margin-bottom: 14px;
        }
        .service-card-primary p {
            font-size: 13px;
            max-width: 760px;
        }

        .service-note {
            font-size: 11px;
            color: var(--text-dim);
            font-weight: 400;
        }

        /* ============================================
           OPEN SOURCE
           ============================================ */
        .open-source .section-head { margin-bottom: 28px; }

        .os-status {
            max-width: 720px;
            border: 1px solid var(--border);
            padding: 20px 24px;
            margin-bottom: 28px;
            font-size: 12.5px;
        }
        .os-cmd { color: var(--text-dim); margin-bottom: 6px; }
        .os-note { color: var(--amber); }

        .os-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--amber);
            animation: msPulse 2s ease-in-out infinite;
            margin-right: 10px;
        }

        .os-body {
            max-width: 720px;
            color: var(--text-muted);
        }

        /* ============================================
           CTA
           ============================================ */
        .cta { padding-top: 110px; padding-bottom: 110px; }

        .cta-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: center;
        }

        .cta-text { flex: 1 1 380px; }

        .cta-text .section-desc {
            max-width: 560px;
            margin-bottom: 36px;
        }

        .cta-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .cta-mascot { opacity: 0.9; }