/* ═══════════════════════════════════════════════════════════════════════
   Kerf — landing page styles
   Machined Vantablack aesthetic. Linear / Raycast lineage.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Tokens ---------- */
:root {
    /* Surface */
    --vanta-top: #0E0E10;
    --vanta-bot: #14141A;
    --onyx: #1B1B1D;
    --onyx-elev: #1E1E22;

    /* Emerald accent */
    --emerald: #57D8AA;
    --emerald-deep: #2FB78A;
    --emerald-light: #DAFCEB;
    --emerald-soft: rgba(87, 216, 170, 0.18);
    --emerald-glow: rgba(87, 216, 170, 0.35);
    --emerald-faint: rgba(87, 216, 170, 0.06);

    /* Lines / strokes */
    --hairline: rgba(255, 255, 255, 0.07);
    --hairline-strong: rgba(255, 255, 255, 0.12);
    --hairline-faint: rgba(255, 255, 255, 0.04);
    --inner-highlight: rgba(255, 255, 255, 0.12);

    /* Text */
    --text-primary: rgba(255, 255, 255, 0.96);
    --text-secondary: rgba(255, 255, 255, 0.62);
    --text-tertiary: rgba(255, 255, 255, 0.42);
    --text-faint: rgba(255, 255, 255, 0.28);

    /* Typography */
    --font-display: "Geist", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Layout */
    --container: 1080px;
    --measure: 720px;
    --gutter-x: clamp(20px, 4vw, 48px);

    /* Motion */
    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --t-quick: 160ms;
    --t-base: 220ms;
    --t-slow: 480ms;

    /* Radii */
    --r-pill: 999px;
    --r-card: 14px;
    --r-card-sm: 8px;
    --r-kbd: 6px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: var(--font-display);
    font-feature-settings: "ss01" on, "cv11" on;
    background: var(--vanta-top);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
kbd { font-family: var(--font-mono); }

/* ---------- Atmosphere: kerf watermark + grain ----------
   The watermark used to cross right through the hero logo at ~200px on
   common viewport widths — the emerald line obscured the actual brand
   mark. Anchor it to the right edge well below the hero so it lives in
   the demo-section gutter instead of bisecting the logo. */
.kerf-watermark {
    position: absolute;
    top: 92vh;
    right: -260px;
    width: 1100px;
    height: 28px;
    transform: rotate(28deg);
    transform-origin: right top;
    background: linear-gradient(90deg, transparent 0%, var(--emerald-faint) 35%, var(--emerald-faint) 65%, transparent 100%);
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    /* Inline SVG noise — no extra request. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Typography utilities ---------- */
.mono {
    font-family: var(--font-mono);
    font-feature-settings: "ss01" on, "tnum" on;
    letter-spacing: 0.02em;
}

/* ---------- Background gradient root ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--vanta-top) 0%, var(--vanta-bot) 100%);
    z-index: -1;
}

main, .nav, .footer { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════════════ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--gutter-x);
    background: rgba(14, 14, 16, 0.78);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border-bottom: 1px solid var(--hairline);
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.nav-brand-logo { display: inline-block; width: 26px; height: 26px; border-radius: 6px; overflow: hidden; }
.brand-mark { width: 100%; height: 100%; display: block; }
.nav-brand-name { font-size: 15px; letter-spacing: -0.01em; }

.nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    color: var(--text-secondary);
    font-size: 14px;
}
.nav-links a {
    position: relative;
    padding: 4px 0;
    transition: color var(--t-quick) var(--ease-soft);
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--emerald);
    transition: width var(--t-base) var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }
@media (max-width: 720px) { .nav-links { display: none; } }

.nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

/* Language toggle pill with sliding indicator */
.lang-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    padding: 3px;
    overflow: hidden;
}
.lang-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-pill);
    transition: transform var(--t-base) var(--ease-out);
    pointer-events: none;
}
html[data-lang="en"] .lang-indicator { transform: translateX(100%); }
.lang-btn {
    position: relative;
    z-index: 1;
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    transition: color var(--t-quick) var(--ease-soft);
}
.lang-btn.is-active { color: var(--text-primary); }

.nav-github {
    color: var(--text-secondary);
    display: inline-flex;
    width: 32px; height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: color var(--t-quick) var(--ease-soft), border-color var(--t-quick) var(--ease-soft), background var(--t-quick) var(--ease-soft);
}
.nav-github:hover {
    color: var(--text-primary);
    border-color: var(--hairline);
    background: rgba(255, 255, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    padding: clamp(80px, 12vw, 140px) var(--gutter-x) clamp(60px, 8vw, 96px);
    text-align: center;
}

/* Soft emerald glow behind the logo. Sized to halo the logo only —
   720px was big enough to wash out the brand mark and make the whole
   hero feel hazy. 320px keeps it tight around the logo as an accent
   light, not an ambient bath. */
.hero-glow {
    position: absolute;
    top: 140px;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--emerald-soft) 0%, transparent 70%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--measure);
    margin: 0 auto;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 10px;
    margin-bottom: 36px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--text-secondary);
}
.hero-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 0 4px var(--emerald-faint);
    animation: dotPulse 2.4s var(--ease-soft) infinite;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--emerald-faint); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}
.hero-version { color: var(--text-primary); font-weight: 500; }
.hero-eyebrow-sep { color: var(--text-faint); }

.hero-logo-wrap {
    position: relative;
    z-index: 2;          /* keep the brand mark above the hero-glow */
    width: 112px;
    height: 112px;
    margin: 0 auto 36px;
    border-radius: 26px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),  /* top highlight */
        0 0 0 1px rgba(255, 255, 255, 0.06),      /* crisp 1px outline */
        0 16px 32px -8px rgba(0, 0, 0, 0.50),     /* clean elevation */
        0 0 28px -4px rgba(87, 216, 170, 0.28);   /* subtle emerald aura */
    animation: logoIn 700ms var(--ease-out) both;
}
.hero-logo-svg { width: 100%; height: 100%; display: block; }

/* Kerf-line fade-in (opacity only).
   We intentionally do NOT animate `transform` on this group because it
   already carries an SVG presentation-attribute transform
   (`transform="translate(512 512) rotate(28)"`). CSS transform on an
   SVG element **replaces** the SVG-attr transform — the previous
   version's `scaleX(0.55) → scaleX(1)` was wiping the translate +
   rotate, dropping the kerf line to (0,0) outside the clipped squircle
   where it was invisible. Result: the logo looked like an empty dark
   chip. Opacity only is safe. */
.hero-kerf-group {
    animation: kerfDraw 900ms var(--ease-out) 300ms both;
}
@keyframes logoIn {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
@keyframes kerfDraw {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-title {
    font-size: clamp(36px, 7vw, 64px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--text-primary);
    margin-bottom: 24px;
    animation: heroIn 700ms var(--ease-out) 120ms both;
}
.hero-title-accent { display: block; color: var(--emerald-light); }
html[lang*="en"] .hero-title-accent,
html[data-lang="en"] .hero-title-accent { color: var(--emerald-light); }

.hero-sub {
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 40px;
    animation: heroIn 700ms var(--ease-out) 220ms both;
}

@keyframes heroIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.hero-ctas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    animation: heroIn 700ms var(--ease-out) 320ms both;
    margin-bottom: 48px;
}

/* ---------- CTA buttons ----------
   Two-tier hierarchy, both pill-shaped. Primary is solid emerald with
   dark vanta text for razor contrast — Raycast/Linear lineage, not the
   "candy gradient" SaaS template look. Secondary is a clean outline
   with hairline border.
   ---------- */
.cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    transition:
        transform var(--t-base) var(--ease-out),
        background var(--t-quick) var(--ease-soft),
        border-color var(--t-quick) var(--ease-soft),
        color var(--t-quick) var(--ease-soft),
        box-shadow var(--t-base) var(--ease-soft);
    will-change: transform;
    white-space: nowrap;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(0); }

/* Primary — confident emerald button. Solid color, NOT a gradient.
   Inner highlight gives it a single-pixel rim of light at the top edge,
   like a polished metal disc lit from above. The outer emerald halo
   sells the "active / glowing" feel without looking blurry. */
.cta-primary {
    background: var(--emerald);
    color: #06231A;
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(87, 216, 170, 0.0),
        0 14px 38px -14px rgba(87, 216, 170, 0.55),
        0 2px 8px -2px rgba(87, 216, 170, 0.30);
}
.cta-primary:hover {
    background: #6FE3BA;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(87, 216, 170, 0.30),
        0 18px 46px -14px rgba(87, 216, 170, 0.70),
        0 4px 14px -2px rgba(87, 216, 170, 0.45);
}
.cta-primary:active { background: var(--emerald-deep); }

/* Secondary — outline with subtle fill */
.cta-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-color: var(--hairline-strong);
}
.cta-secondary:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
}

.cta-icon {
    display: inline-flex;
    align-items: center;
    /* Pull the icon up against the text more naturally */
    margin-right: -2px;
}

/* The .dmg · 2.9 MB metadata used to be baked INSIDE the primary
   button as a vertical-rule-separated suffix. It crowded the label
   and made the button feel cluttered. We moved it out to a small
   caption row below the CTAs. */
/* Caption row below the CTAs.
   MUST be block-level (display:flex), not inline-flex — `.hero-ctas`
   above this is inline-flex, and putting an inline-flex sibling right
   after another inline-level element makes them share a baseline,
   producing the "caption text trailing the GitHub button on the same
   line" bug we hit. Block flex with justify-content:center keeps the
   caption on its own row, centered. */
.cta-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 0;
    max-width: 100%;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}
.cta-caption-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-faint);
}

.cta-wide { padding: 15px 30px; font-size: 15px; }

/* ---------- Hero meta tag list ---------- */
.hero-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
    font-size: 11px;
    color: var(--text-tertiary);
    animation: heroIn 700ms var(--ease-out) 420ms both;
}
.hero-meta li { white-space: nowrap; }
.hero-meta-key { color: var(--text-faint); margin-right: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   Section labels (Linear-style "01 / FEATURES" eyebrow)
   ═══════════════════════════════════════════════════════════════════════ */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 24px;
}
.section-label-num {
    color: var(--emerald);
    padding-right: 12px;
    border-right: 1px solid var(--hairline-strong);
}

.section-head {
    max-width: var(--container);
    margin: 0 auto 56px;
    padding: 0 var(--gutter-x);
}
.section-title {
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    max-width: 720px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DEMO
   ═══════════════════════════════════════════════════════════════════════ */
.demo {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(60px, 9vw, 96px) var(--gutter-x);
    border-top: 1px solid var(--hairline);
    position: relative;
}
.demo .section-label { display: block; margin-bottom: 40px; text-align: center; }

.demo-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 780px) {
    .demo-stage { grid-template-columns: 1fr; gap: 16px; }
}

.demo-card {
    background: var(--onyx);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--inner-highlight);
    transition: border-color var(--t-base) var(--ease-soft);
}
.demo-card-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.015);
}
.demo-dot {
    width: 9px; height: 9px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
.demo-dot-r { background: #ff5f56; }
.demo-dot-y { background: #ffbd2e; }
.demo-dot-g { background: #28c840; }
.demo-card-title {
    margin-left: 8px;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}
.demo-card-label {
    padding: 14px 20px 0;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
}
.demo-card-label-on { color: var(--emerald); }
.demo-card-body {
    padding: 12px 20px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    min-height: 96px;
}
.demo-card-body p { color: var(--text-primary); }
.demo-before .demo-card-body p { color: var(--text-secondary); }
.demo-caret {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: var(--emerald);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: caretBlink 1.1s steps(2) infinite;
}
@keyframes caretBlink {
    50% { opacity: 0; }
}
.demo-after { border-color: rgba(87, 216, 170, 0.22); box-shadow: inset 0 1px 0 var(--inner-highlight), 0 0 0 1px rgba(87, 216, 170, 0.06); }

.demo-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 140px;
}
@media (max-width: 780px) {
    .demo-arrow { flex-direction: row; padding: 8px 0; }
}

.demo-chord {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: 10px;
}
.demo-arrow-line { width: 80%; max-width: 200px; }
.demo-arrow-cap { font-size: 10px; color: var(--emerald); letter-spacing: 0.2em; text-transform: uppercase; }

.demo-tag {
    text-align: center;
    margin-top: 32px;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   Keycaps — used in nav, demo, features, use cases
   ═══════════════════════════════════════════════════════════════════════ */
.kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid var(--hairline-strong);
    border-radius: var(--r-kbd);
    font-size: 11px;
    line-height: 1;
    color: var(--text-primary);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
}
.kbd-key {
    color: var(--emerald-light);
    border-color: rgba(87, 216, 170, 0.25);
    background: linear-gradient(180deg, rgba(87,216,170,0.18), rgba(87,216,170,0.06));
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════════════════════ */
.features {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(80px, 12vw, 140px) var(--gutter-x);
    border-top: 1px solid var(--hairline);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    overflow: hidden;
}
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
    background: var(--vanta-top);
    padding: 28px 26px;
    transition: background var(--t-quick) var(--ease-soft), box-shadow var(--t-base) var(--ease-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
}
.feature-card:hover {
    background: var(--onyx-elev);
    box-shadow: inset 0 0 0 1px var(--emerald-glow);
}
.feature-num {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.2em;
}
.feature-card h3 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.feature-body {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.feature-foot {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    margin-top: auto;
}

.feature-chords {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.feature-chord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.feature-chord em {
    margin-left: 6px;
    font-style: normal;
    color: var(--text-tertiary);
    font-size: 11.5px;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
}
.feature-tags li {
    padding: 3px 9px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}
.feature-tags em {
    font-style: normal;
    color: var(--text-faint);
    margin-left: 3px;
}

.feature-bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}
.feature-bullets li {
    position: relative;
    padding-left: 16px;
}
.feature-bullets li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 5px;
    height: 1px;
    background: var(--emerald);
}

.feature-code {
    margin-top: auto;
    padding: 10px 12px;
    background: rgba(0,0,0,0.28);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-sm);
    font-size: 11.5px;
    color: var(--emerald-light);
    overflow-x: auto;
}

.feature-card-detail { grid-column: span 1; }

/* ═══════════════════════════════════════════════════════════════════════
   PIPELINE
   ═══════════════════════════════════════════════════════════════════════ */
.how {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(80px, 12vw, 140px) var(--gutter-x);
    border-top: 1px solid var(--hairline);
}

.pipeline {
    max-width: 760px;
    margin: 0 auto;
    counter-reset: pipeline-step;
}
.pipeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--hairline);
}
.pipeline-step:first-child { border-top: 0; padding-top: 0; }
.pipeline-step:last-child  { padding-bottom: 0; }

/* Connecting hairline through the column of numbers */
.pipeline-step::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 38px;
    bottom: -28px;
    width: 1px;
    background: var(--hairline);
}
.pipeline-step:last-child::before { display: none; }

.pipeline-marker {
    width: 56px;
    display: flex;
    justify-content: center;
}
.pipeline-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(87, 216, 170, 0.18), rgba(87, 216, 170, 0.06));
    border: 1px solid rgba(87, 216, 170, 0.30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--emerald-light);
    z-index: 1;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.pipeline-body h3 {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
}
.pipeline-body p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 580px;
}
.pipeline-code {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 9px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--hairline);
    border-radius: 5px;
    font-size: 11px;
    color: var(--text-tertiary);
}
.pipeline-codeblock {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-sm);
    font-size: 12px;
    line-height: 1.7;
    color: var(--emerald-light);
    overflow-x: auto;
    max-width: 540px;
}

/* ═══════════════════════════════════════════════════════════════════════
   USE CASES
   ═══════════════════════════════════════════════════════════════════════ */
.usecases {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(80px, 12vw, 140px) var(--gutter-x);
    border-top: 1px solid var(--hairline);
}

.usecase-table {
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    overflow: hidden;
}
.usecase-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 18px 24px;
    border-top: 1px solid var(--hairline);
    font-size: 14px;
    color: var(--text-primary);
    transition: background var(--t-quick) var(--ease-soft);
}
.usecase-row:hover { background: rgba(255, 255, 255, 0.02); }
.usecase-row:first-child { border-top: 0; }
.usecase-row-head {
    background: rgba(255, 255, 255, 0.015);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
    padding: 12px 24px;
}
.usecase-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    min-width: 220px;
}
.usecase-scene { color: var(--text-tertiary); margin-left: 8px; font-size: 11px; }

@media (max-width: 720px) {
    .usecase-row { grid-template-columns: 1fr; gap: 12px; padding: 18px 20px; font-size: 13.5px; }
    .usecase-row-head { display: none; }
    .usecase-shortcut { justify-content: flex-start; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STACK
   ═══════════════════════════════════════════════════════════════════════ */
.stack-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(60px, 8vw, 96px) var(--gutter-x);
    border-top: 1px solid var(--hairline);
}
.stack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.stack-list li {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-size: 11.5px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    transition: border-color var(--t-quick) var(--ease-soft), color var(--t-quick) var(--ease-soft);
}
.stack-list li:hover { border-color: var(--emerald-glow); color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════════════
   INSTALL
   ═══════════════════════════════════════════════════════════════════════ */
.install {
    max-width: var(--container);
    margin: 0 auto;
    padding: clamp(80px, 12vw, 140px) var(--gutter-x);
    border-top: 1px solid var(--hairline);
}

.install-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    overflow: hidden;
    margin-bottom: 48px;
}
@media (max-width: 980px) { .install-steps { grid-template-columns: 1fr; } }

.install-step {
    background: var(--vanta-top);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.install-num {
    font-size: 28px;
    font-weight: 500;
    color: var(--emerald);
    letter-spacing: -0.02em;
    line-height: 1;
}
.install-content h3 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
}
.install-content p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.install-link {
    display: inline-block;
    font-size: 12px;
    color: var(--emerald);
    margin-top: 4px;
    border-bottom: 1px solid rgba(87, 216, 170, 0.35);
    padding-bottom: 1px;
    transition: color var(--t-quick) var(--ease-soft), border-color var(--t-quick) var(--ease-soft);
}
.install-link:hover { color: var(--emerald-light); border-color: var(--emerald-light); }

.install-code {
    margin-top: 6px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-sm);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
    overflow-x: auto;
}
.cmd-prompt { color: var(--emerald); margin-right: 8px; user-select: none; }

.install-cta { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.footer {
    border-top: 1px solid var(--hairline);
    padding: 64px var(--gutter-x) 40px;
}
.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    gap: 64px;
}
@media (max-width: 780px) { .footer-inner { grid-template-columns: 1fr; gap: 40px; } }

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.footer-tagline {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 280px;
}
.footer-brand .nav-brand-logo { width: 32px; height: 32px; }
.footer-brand .nav-brand-name { font-size: 17px; font-weight: 600; }
.footer-brand .nav-brand-name + .footer-tagline { margin-top: 8px; }

.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }

.footer-col h4 {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
    font-size: 13px;
    color: var(--text-secondary);
    transition: color var(--t-quick) var(--ease-soft);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-col li { color: var(--text-tertiary); font-size: 13px; }

.footer-bottom {
    max-width: var(--container);
    margin: 48px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    color: var(--text-faint);
}
.footer-sep { color: var(--text-faint); }

/* ═══════════════════════════════════════════════════════════════════════
   Stagger-in for items marked [data-stagger]
   ═══════════════════════════════════════════════════════════════════════ */
[data-stagger] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
[data-stagger].is-in {
    opacity: 1;
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Language switch — hide opposite language text
   ═══════════════════════════════════════════════════════════════════════ */
html[data-lang="zh"] [data-en]:not([data-zh]) { display: none; }
html[data-lang="en"] [data-zh]:not([data-en]) { display: none; }

/* For dual elements (have both data-en and data-zh), JS swaps textContent */

/* ═══════════════════════════════════════════════════════════════════════
   Selection
   ═══════════════════════════════════════════════════════════════════════ */
::selection { background: rgba(87, 216, 170, 0.32); color: var(--emerald-light); }

/* Custom scrollbar — subtle, no chrome */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); border: 2px solid transparent; background-clip: padding-box; }

/* ═══════════════════════════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-status-dot { animation: none; }
    .demo-caret { animation: none; opacity: 1; }
}

html { scroll-behavior: smooth; }

/* Anchor links: make sure target sections land below the sticky nav, not
   underneath it. 80 = 64 nav + 16 breathing room. */
section[id] { scroll-margin-top: 80px; }