/**
 * Landing Page Styles - STANDARD BLUE Variant
 * High-conversion dark mode design with professional blue accents
 * Perfect for real-time, cutting-edge developer tools
 */

/* ============================================
   COLOR SYSTEM - STANDARD BLUE
   ============================================ */

:root {
    /* Primary Accents - Standard Blue */
    --accent-primary: #3b82f6;
    --accent-secondary: #60a5fa;
    --accent-tertiary: #2563eb;

    /* Backgrounds */
    --bg-page: #0A0E14;
    --bg-surface: #0F1419;
    --bg-elevated: #151A21;
    --bg-input: #1A2028;

    /* Text - High Contrast */
    --text-primary: #F0F6FC;
    --text-secondary: #C9D1D9;
    --text-muted: #8B949E;
    --text-inverse: #0A0E14;

    /* Borders & Dividers */
    --border-default: #21262D;
    --border-bright: #30363D;
    --border-accent: #3b82f6;

    /* Gradients */
    --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    --gradient-soft: linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(37,99,235,0.1) 100%);

    /* Glow Effects */
    --glow-sm: 0 0 10px rgba(59, 130, 246, 0.3);
    --glow-md: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(96, 165, 250, 0.2);
    --glow-lg: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(96, 165, 250, 0.3);

    /* Design System Tokens */
    --gap: 8px;
    --gap-xs: 4px;
    --gap-sm: 8px;
    --gap-md: 12px;
    --gap-lg: 16px;
    --gap-xl: 24px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'JetBrains Mono', monospace;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-black: 800;

    --transition: 150ms ease-in-out;
    --transition-fast: 100ms ease-in-out;
    --transition-slow: 300ms ease-in-out;
}

/* ============================================
   GLOBAL RESETS & BASE
   ============================================ */

* {
    box-sizing: border-box;
}

body {
    background: var(--bg-page);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

/* ============================================
   CONTAINER SYSTEM
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px);
    width: 100%;
}

.container-small {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px);
    width: 100%;
}

/* ============================================
   TYPOGRAPHY - High Contrast
   ============================================ */

.section-title {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: var(--font-black);
    text-align: center;
    margin-bottom: clamp(16px, 3vw, 24px);
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: clamp(14px, 2.5vw, 18px);
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: clamp(24px, 5vw, 40px);
    line-height: 1.6;
}

.section-subtitle strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.highlight {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   BUTTONS - Neon Style
   ============================================ */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--gradient-accent);
    color: var(--text-inverse);
    border: none;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-slow);
    box-shadow: var(--glow-md);
    text-decoration: none;
    font-family: var(--font-sans);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-lg);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary.btn-large {
    padding: 18px 36px;
    font-size: 18px;
}

.btn-primary.btn-xl {
    padding: 20px 48px;
    font-size: 20px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-bright);
    padding: 16px 28px;
    font-size: 18px;
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    font-family: var(--font-sans);
}

.btn-ghost:hover {
    border-color: var(--border-accent);
    background: rgba(0, 217, 255, 0.05);
    box-shadow: var(--glow-sm);
}

.btn-ghost.btn-large {
    padding: 16px 28px;
    font-size: 18px;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: white;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.btn-google:hover {
    background: #f9fafb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   HERO SECTION - Electric
   ============================================ */

/*
 * The base ground. Two layers in one declaration: a very wide radial that lifts the middle of the
 * hero a few percent, over the diagonal that was already here. Subtle enough that it reads as depth
 * rather than as a gradient — the whole point is that nothing in this file should be nameable by a
 * visitor.
 */
.hero-section {
    min-height: 90vh;
    background:
        radial-gradient(ellipse 120% 90% at 50% 34%, #101826 0%, transparent 62%),
        linear-gradient(135deg, var(--bg-page) 0%, #0E1218 100%);
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 15vw, 120px) 0 clamp(60px, 10vw, 80px);
    display: flex;
    align-items: center;
}

/*
 * The hero's effects must not stop at its edge. The section below is flat `--bg-page`, so without
 * this the halos and the arcs end on a horizontal line the eye reads as a seam. Sits above the
 * decoration and below the content.
 */
.hero-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 300px;
    /* Not a straight ramp: an ease that stays nearly transparent for the first third lets the foot
       arc and the product's glow survive into the fade instead of being wiped at its top edge. */
    background: linear-gradient(to bottom,
        rgba(15, 21, 33, 0) 0%,
        rgba(15, 21, 33, 0.2) 38%,
        rgba(15, 21, 33, 0.68) 70%,
        #0F1521 100%);
    pointer-events: none;
    z-index: 0;
}

/*
 * The other half of the junction, and it belongs to the section BELOW: `.hero-section` has
 * `overflow: hidden`, so nothing inside it can reach past its own edge. This carries the hero's
 * tint a little way down into "What comes out" so the two meet in a gradient rather than on a line.
 * The section's own layout is untouched.
 */
.use-cases {
    position: relative;
}

.use-cases::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 260px;
    /*
     * Starts on EXACTLY the tone the hero's fade ends on (#0F1521), which is the whole point: the
     * two gradients meet at one value, so the section boundary has no step in it. Ending the hero on
     * --bg-page and starting this on a lighter wash put a visible band right across the join —
     * dark, lighter, dark — which is worse than no transition at all.
     */
    background:
        radial-gradient(ellipse 60% 100% at 72% 0%, rgba(56, 152, 236, 0.05) 0%, transparent 70%),
        linear-gradient(to bottom, #0F1521 0%, rgba(15, 21, 33, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* The section's own content has to stay above that wash. */
.use-cases > .container {
    position: relative;
    z-index: 1;
}

/* ---- the atmosphere: halos, arcs, motes, grain ---- */

/*
 * No `z-index` here on purpose. It is absolutely positioned and comes before `.hero-container`
 * (z-index 1) in the DOM, so it already paints underneath — while declaring `z-index: 0` would make
 * it a STACKING CONTEXT, and the grain's `mix-blend-mode: overlay` would then blend only with the
 * (nearly transparent) layers inside it instead of with the hero's own gradient. Which is the one
 * surface the grain exists to keep from banding.
 */
.hero-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/*
 * Three halos, and the brief for each is the same: felt, not seen. They are enormous relative to
 * the hero and their colour stops reach transparent well before any edge, so no halo ever draws a
 * boundary of its own — which is the difference between depth and three coloured blobs.
 */
.hero-halo {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Behind the headline. Deep blue, the dimmest of the three: it lifts the copy off the ground
   without ever competing with it for contrast. */
.hero-halo-copy {
    width: 1100px;
    height: 900px;
    left: -18%;
    top: 6%;
    background: radial-gradient(closest-side, rgba(37, 99, 235, 0.17) 0%, rgba(37, 99, 235, 0.06) 45%, transparent 76%);
    filter: blur(20px);
}

/* Behind the product. The brightest centre of the three, because this is where the eye should
   land last and stay — and the only place a hint of teal appears. */
.hero-halo-product {
    width: 1250px;
    height: 1000px;
    /* Centred on the WINDOW, not on the column: the visual sits below the vertical middle of the
       hero, and a halo centred on the grid cell put its brightest point above the chrome bar. */
    right: -10%;
    top: 10%;
    background: radial-gradient(closest-side, rgba(56, 152, 236, 0.21) 0%, rgba(45, 176, 198, 0.08) 42%, transparent 74%);
    filter: blur(24px);
    animation: hero-halo-breathe 26s ease-in-out infinite;
}

/* The trace of indigo the palette allows, high and off to the right. Any more than this and the
   hero starts reading as the purple-gradient template every other product ships. */
.hero-halo-high {
    width: 820px;
    height: 620px;
    right: 6%;
    top: -22%;
    background: radial-gradient(closest-side, rgba(99, 102, 241, 0.10) 0%, transparent 72%);
    filter: blur(30px);
}

@keyframes hero-halo-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.82; transform: scale(1.04); }
}

/*
 * The orbital arcs. Centred on the galaxy so they read as its orbit rather than as decoration
 * dropped on top, and the near one passes straight through the product — which is the left-to-right
 * path the composition wants the eye to take, drawn far too faintly to be followed consciously.
 */
.hero-orbits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/*
 * `non-scaling-stroke` is what keeps these hairlines hairlines. The SVG is scaled with `slice`, so
 * on a wide viewport a 1-unit stroke would be drawn nearly two pixels thick — and the difference
 * between a trajectory you feel and a line you see is about half a pixel.
 */
.hero-arc {
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.hero-arc-faint { opacity: 0.66; }

/*
 * Waypoints: the same path, stroked as a dash pattern of zero-length segments with a round cap.
 * A zero-length dash plus a round cap is a dot — so the pattern below reads as "a dot every 168
 * units of arc", positioned on the curve by construction rather than by a second set of numbers.
 */
.hero-arc-dots {
    fill: none;
    stroke: #dbeafe;
    stroke-opacity: 0.34;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 0 168;
    stroke-dashoffset: -74;
    vector-effect: non-scaling-stroke;
}

/* ---- the material jet leaving the galaxy ---- */

/*
 * The cosmic mist / luminescent plasma veil.
 * Soft GPU-blurred strokes wrapping the stream without any hard edges.
 */
.hero-flow-haze-core {
    fill: none;
    stroke: url(#qzFlowHaze);
    stroke-width: 14;
    stroke-linecap: round;
    filter: blur(7px);
    opacity: 0.45;
}

.hero-flow-haze-wide {
    fill: none;
    stroke: url(#qzFlowHaze);
    stroke-width: 36;
    stroke-linecap: round;
    filter: blur(16px);
    opacity: 0.28;
}

.hero-flow-dots {
    fill: none;
    stroke: url(#qzFlow);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/*
 * Core trajectory spine: dense, glowing micro-matter at the centre of the stream.
 * Ultra-tight spacing at the emission zone (2-6px) for pressurized core power.
 */
.hero-flow-spine {
    stroke-width: 2.3;
    stroke-dasharray: 0 2 0 3 0 3 0 4 0 5 0 6 0 8 0 10 0 13 0 16 0 20 0 25 0 32 0 40 0 50 0 62 0 76 0 92;
}

/*
 * Inner filaments: concentrated tightly around the nucleus, opening progressively as they climb.
 */
.hero-flow-inner-a {
    stroke-width: 1.8;
    stroke-opacity: 0.85;
    stroke-dasharray: 0 3 0 4 0 4 0 5 0 6 0 7 0 9 0 12 0 15 0 19 0 24 0 30 0 38 0 48 0 60 0 74 0 90;
    stroke-dashoffset: -2;
}

.hero-flow-inner-b {
    stroke-width: 1.8;
    stroke-opacity: 0.80;
    stroke-dasharray: 0 4 0 4 0 5 0 6 0 7 0 8 0 11 0 14 0 18 0 23 0 29 0 36 0 45 0 56 0 70 0 86 0 102;
    stroke-dashoffset: -5;
}

/*
 * Outer fanning particles: wider lateral dispersion and greater sparsity at higher altitudes.
 */
.hero-flow-outer-a {
    stroke-width: 1.4;
    stroke-opacity: 0.46;
    stroke-dasharray: 0 16 0 20 0 25 0 31 0 38 0 47 0 58 0 72 0 88 0 108;
    stroke-dashoffset: -18;
}

.hero-flow-outer-b {
    stroke-width: 1.4;
    stroke-opacity: 0.42;
    stroke-dasharray: 0 18 0 22 0 28 0 35 0 43 0 53 0 65 0 80 0 98 0 118;
    stroke-dashoffset: -25;
}

/*
 * Luminous energy sparks / accent nodes riding the main trajectory.
 */
.hero-flow-accents {
    fill: none;
    stroke: url(#qzFlowAccent);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-dasharray: 0 35 0 60 0 88 0 120 0 160;
    stroke-dashoffset: -10;
    vector-effect: non-scaling-stroke;
}

/* ---- the ring strata ---- */

/*
 * Anchored on the canvas's own centre, in pixels rather than in a stretched viewBox — see the note
 * in the markup. 900px across a 600-unit viewBox means one unit is 1.5px, which is what makes the
 * ring radii below line up with the disk the canvas draws at scale 0.66.
 */
.hero-galaxy-detail {
    position: absolute;
    left: 10.5%;
    top: 60%;
    width: 900px;
    height: 900px;
    margin: -450px 0 0 -450px;
    overflow: visible;
    pointer-events: none;
}

.hero-ring {
    fill: none;
    stroke: #7fb6f5;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* The extent of the disk: it should be findable only once you go looking. */
.hero-ring-outer { stroke-opacity: 0.075; }

/* An arc, not a ring, and brighter than the others — it is the approaching side, agreeing with the
   canvas's own doppler brightening. A ring that closes reads as a hoop somebody drew. */
.hero-ring-mid {
    stroke: #a9d2ff;
    stroke-opacity: 0.2;
    stroke-linecap: round;
}

.hero-ring-inner { stroke-opacity: 0.13; }

/* Dust in the plane. Same dash-as-dots idiom as the stream, so each speck sits ON the orbit. */
.hero-ring-dust {
    fill: none;
    stroke: #dbeafe;
    stroke-opacity: 0.3;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 0 23;
    vector-effect: non-scaling-stroke;
}

.hero-ring-dust-near {
    stroke-opacity: 0.42;
    stroke-width: 2;
    stroke-dasharray: 0 17;
    stroke-dashoffset: -8;
}

/*
 * The dust orbits; the disk does not tumble.
 *
 * Rotating the <g> was the obvious way to make the stratum turn and it is the wrong one: these are
 * ellipses because the disk is seen nearly edge-on, so spinning them in the page's plane swings
 * that foreshortening around and the disk reads as flipping over rather than as rotating. Moving
 * the dash offset instead sends each speck ALONG its own orbit, which is the motion that actually
 * exists — and the ellipse itself never moves.
 */
.hero-ring-dust { animation: hero-dust-orbit 190s linear infinite; }
.hero-ring-dust-near { animation: hero-dust-orbit-near 130s linear infinite; }

@keyframes hero-dust-orbit { to { stroke-dashoffset: -23; } }
@keyframes hero-dust-orbit-near { to { stroke-dashoffset: -25; } }

/*
 * Jet stream particle animation: slow, organic upward drift along the curves.
 * Each loop travels exactly one full dash pattern length.
 */
.hero-flow-spine   { animation: hero-flow-spine 140s linear infinite; }
.hero-flow-inner-a { animation: hero-flow-inner-a 160s linear infinite; }
.hero-flow-inner-b { animation: hero-flow-inner-b 175s linear infinite; }
.hero-flow-outer-a { animation: hero-flow-outer-a 200s linear infinite; }
.hero-flow-outer-b { animation: hero-flow-outer-b 215s linear infinite; }
.hero-flow-accents { animation: hero-flow-accents 240s linear infinite; }

@keyframes hero-flow-spine   { to { stroke-dashoffset: -467; } }
@keyframes hero-flow-inner-a { to { stroke-dashoffset: -450; } }
@keyframes hero-flow-inner-b { to { stroke-dashoffset: -529; } }
@keyframes hero-flow-outer-a { to { stroke-dashoffset: -521; } }
@keyframes hero-flow-outer-b { to { stroke-dashoffset: -585; } }
@keyframes hero-flow-accents { to { stroke-dashoffset: -473; } }

/*
 * Grain. Large diffuse gradients render as visibly stepped bands on 8-bit panels; a few percent of
 * noise breaks the banding up. Generated by the browser from ~200 bytes of inline SVG — no image
 * request, and nobody is meant to be able to see it on purpose.
 */
.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*
 * A vignette, and the only reason it is a separate layer is that it must sit OVER the halos: darken
 * the edges before them and the halos put the brightness straight back at the corners they bleed
 * into. Transparent across the whole middle, so nothing the reader looks at loses contrast.
 */
.hero-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 78% 86% at 50% 46%, transparent 52%, rgba(6, 9, 14, 0.5) 100%);
    pointer-events: none;
}

/* Animated quasar mark behind the hero copy (wwwroot/js/quasar-logo.js).
   Kept under .hero-container (z-index 1) and masked at the edges so the
   headline never sits on top of the bright core. */
.hero-quasar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Raised with the disk's new density: at 0.46 the extra modules were being spent on something
       too faint to read them in. */
    opacity: 0.62;
    pointer-events: none;
    /* Mask follows the quasar's own centre (centerX in the "background"
       preset), otherwise it would clip the disk on one side.
       The falloff starts EARLIER and ends later than it used to (40%→100%
       became 26%→100%): the old mask held full opacity for most of its
       radius and then fell away quickly, which put a soft but findable
       edge around the galaxy and made it read as an image placed behind
       the text. Fading across the whole radius lets it dissolve into the
       halo behind it instead. */
    -webkit-mask-image: radial-gradient(ellipse 62% 80% at 10.5% 60%, #000 26%, rgba(0,0,0,0.55) 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 80% at 10.5% 60%, #000 26%, rgba(0,0,0,0.55) 62%, transparent 100%);
}

/*
 * The galaxy's own aura, sitting UNDER the canvas and sharing the hero's blue. It is what stops the
 * mask's fade from ending on the flat background: the canvas thins out into a glow that is already
 * there, which is the whole difference between a decorative image and part of the composition.
 */
.hero-halo-galaxy {
    width: 900px;
    height: 900px;
    left: -12%;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(closest-side, rgba(96, 165, 250, 0.24) 0%, rgba(59, 130, 246, 0.08) 40%, transparent 72%);
    filter: blur(30px);
}

/*
 * The bed the galaxy sits on — a wide, very soft cloud in the DISK'S plane, under the canvas.
 *
 * Under, not over, and that is the whole reason it is a separate element declared before the canvas
 * rather than another halo: everything in .hero-atmosphere paints on top, and a cloud on top of the
 * disk veils it. Underneath, it is the diffuse matter the disk fades into — which is what the
 * canvas alone could not give, because its own haze is bounded by its outer radius.
 *
 * Squashed to the disk's ratio and turned to its angle, so it reads as the same object's outskirts.
 */
.hero-galaxy-bed {
    position: absolute;
    /* Must track the canvas's centreX / centreY overrides in Index.cshtml. */
    left: 10.5%;
    top: 60%;
    width: 1180px;
    height: 380px;
    margin: -190px 0 0 -590px;
    transform: rotate(-16deg);
    background:
        radial-gradient(closest-side, rgba(147, 197, 253, 0.13) 0%, rgba(59, 130, 246, 0.05) 46%, transparent 78%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 900px) {
    .hero-quasar {
        opacity: 0.3;
        -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, rgba(0,0,0,0.5) 64%, transparent 100%);
        mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, rgba(0,0,0,0.5) 64%, transparent 100%);
    }

    /*
     * The composition simplifies rather than shrinking. On a narrow screen the copy sits ON the
     * decoration instead of beside it, so the arcs, the motes and the grid go entirely — they were
     * drawing lines across the headline — and the halos stay, at lower intensity, because they are
     * the only part that cannot cross the text.
     */
    .hero-orbits,
    .hero-galaxy-detail,
    .hero-visual::before {
        display: none;
    }

    /* The badges are hidden too, but that rule has to live beside their own declarations further
       down this file — see the note there. */

    .hero-halo-copy,
    .hero-halo-galaxy,
    .hero-halo-product,
    .hero-halo-high {
        filter: blur(28px);
        opacity: 0.66;
    }

    /* The bed is sized against a disk that is no longer beside the copy but behind it. */
    .hero-galaxy-bed {
        opacity: 0.5;
        width: 760px;
        margin-left: -380px;
    }

    /* The product halo is centred on a column that no longer exists once the grid stacks. */
    .hero-halo-product {
        right: -34%;
        top: 46%;
    }

    .hero-atmosphere::after {
        background: radial-gradient(ellipse 92% 84% at 50% 46%, transparent 62%, rgba(6, 9, 14, 0.42) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-quasar { opacity: 0.28; }

    /* Every moving layer here is decorative by construction, so all of it stops. Nothing in the
       hero conveys anything by moving. */
    .hero-halo-product,
    .hero-flow-spine,
    .hero-flow-inner-a,
    .hero-flow-inner-b,
    .hero-flow-outer-a,
    .hero-flow-outer-b,
    .hero-flow-accents,
    .hero-ring-dust,
    .hero-ring-dust-near,
    .hero-badge-pulse,
    .video-glow {
        animation: none;
    }
}

.hero-bg-gradient {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.15) 0%, transparent 70%);
    top: -300px;
    right: -300px;
    animation: pulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.hero-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px);
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(auto, 960px);
    gap: clamp(32px, 6vw, 60px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    animation: slideUp 0.8s ease-out;
}

.badge {
    display: inline-block;
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.3);
    color: var(--accent-primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: var(--font-semibold);
    margin-bottom: var(--gap-xl);
    animation: slideDown 0.6s ease-out;
}

.hero-title {
    font-size: clamp(32px, 8vw, 56px);
    font-weight: var(--font-black);
    line-height: 1.06;
    color: var(--text-primary);
    margin-bottom: var(--gap-xl);
    letter-spacing: -0.03em;
    /* At 56px black weight on a dark ground the default hinting thickens the stems; this is what
       the maquette's crispness actually is. */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * "It's live." — the shared .gradient-text runs to #2563eb, which is fine mid-page at 32px and
 * loses the bottom of a 56px letter into the background here. Scoped to the hero only: same hue,
 * same family, just kept above the contrast floor across the whole glyph. Vertical rather than
 * diagonal, so the shift follows the letterforms instead of cutting across them.
 */
.hero-title .gradient-text {
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 46%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: clamp(15px, 2.6vw, 18px);
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 0;
    max-width: 560px;
}

.hero-subtitle strong {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* The one-line "this is what it is" — visually separated from the pain
   paragraph above so the hero doesn't read as a wall of text. */
.hero-pitch {
    font-size: clamp(16px, 2.8vw, 19px);
    line-height: 1.55;
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    max-width: 560px;
    margin: 16px 0 clamp(24px, 5vw, 36px);
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 32px;
}

.hero-cta form {
    margin: 0;
}

/* Google button as a real hero CTA (the shared .btn-google is sized for
   the narrow login section; in the hero it looked small/cramped). */
.hero-cta .btn-google {
    width: auto;
    padding: 15px 30px;
    font-size: 17px;
    font-weight: var(--font-semibold);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta .btn-google:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

.hero-cta-alt {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.hero-cta-alt a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.hero-cta-alt a:hover {
    text-decoration: underline;
}

/* Killer-feature concrete worked example (reuses .workflow-steps styling) */
.killer-example {
    max-width: 980px;
    margin: 0 auto clamp(32px, 6vw, 56px);
}

.killer-example-label {
    text-align: center;
    color: var(--text-secondary);
    font-size: clamp(15px, 2.4vw, 17px);
    line-height: 1.5;
    margin: 0 0 24px;
}

.killer-example-label strong {
    color: var(--text-primary);
}

/* Sub-qualifier under a comparison-table row label */
.cmp-sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: var(--font-normal);
    color: var(--text-muted);
}

/* Still three quiet lines under the CTA, not cards and not pills — they reassure after the button
   and then get out of the way. Wrapping is the only structural change: at the hero's grid width the
   third one used to be squeezed rather than allowed to fall to a second row. */
.hero-subtext {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
    max-width: 560px;
}

.hero-subtext > span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* The tick carries the accent so the eye can count three of them at a glance; the words stay
   muted, which is what keeps the row secondary to the button above it. */
.hero-check {
    color: var(--accent-secondary);
    flex: none;
    line-height: 1.45;
}

.hero-visual {
    position: relative;
    animation: slideLeft 1s ease-out;
}

/*
 * A technical grid, behind the product and nowhere else. It gives the right half a structure for
 * the window to sit on rather than floating in a gradient — and it is masked to nothing well before
 * it reaches the headline, because a grid across the whole page is a different (and much louder)
 * design than this one. Deliberately a coarser pitch than the canvas's own 50px cells: this is a
 * suggestion of the product, not a picture of it.
 */
/* Blueprint rather than graph paper: a fine 24px pitch under a heavier 96px one. A single pitch
   reads as a texture, two read as a drawing — and the coarse lines are what give the right half its
   sense of being measured out. Both stay under a tenth of an alpha. */
.hero-visual::before {
    content: '';
    position: absolute;
    inset: -22% -16% -26% -20%;
    background-image:
        linear-gradient(to right, rgba(148, 187, 233, 0.058) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 187, 233, 0.058) 1px, transparent 1px),
        linear-gradient(to right, rgba(148, 187, 233, 0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(148, 187, 233, 0.022) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    /* Two masks multiplied: an ellipse holding it around the window, and a horizontal wipe that
       takes it to nothing before the copy's column — the grid must never reach the text. */
    -webkit-mask-image:
        radial-gradient(ellipse 66% 68% at 54% 46%, #000 0%, rgba(0,0,0,0.45) 58%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 22%, #000 44%);
    mask-image:
        radial-gradient(ellipse 66% 68% at 54% 46%, #000 0%, rgba(0,0,0,0.45) 58%, transparent 100%),
        linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 22%, #000 44%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
    z-index: -2;
}

.video-container {
    position: relative;
    width: 960px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    /* Blue like the rest of the page. The cyan was left over from the video and was the only cyan
       on the landing — an accent nothing else agreed with. */
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: var(--bg-surface);

    /*
     * Four layers, each doing one job: a deep soft drop that lifts the window off the page, a
     * tighter one that draws its contact edge, a wide low-saturation bloom so the interface reads
     * as emitting a little light, and an inset top highlight — the one-pixel catch of light along
     * the top edge that makes a surface look like glass rather than like a rectangle with a border.
     * No neon: the bloom is under 10% alpha and spread over 90px.
     */
    box-shadow:
        0 40px 100px rgba(2, 6, 14, 0.62),
        0 12px 32px rgba(2, 6, 14, 0.42),
        0 0 90px rgba(59, 130, 246, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.video-glow {
    position: absolute;
    /* Larger and softer than it was (-40px/blur 40): a glow whose edge is findable reads as a
       sticker behind the window. At this spread it has no edge at all. */
    inset: -80px;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.22) 0%, rgba(45, 176, 198, 0.08) 48%, transparent 76%);
    filter: blur(56px);
    z-index: -1;
    pointer-events: none;
    animation: hero-glow-breathe 22s ease-in-out infinite;
}

@keyframes hero-glow-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.78; }
}

/* ---- the two micro-badges ---- */

/*
 * They sit against .hero-visual, not inside .video-container — that one clips its children, which
 * is what keeps the scene's own animation tidy, and is exactly why a badge placed inside it can
 * never overlap the window's edge. Overlapping the edge is the whole effect: it is what puts them
 * in front of the window instead of on it.
 */
.hero-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(17, 24, 38, 0.82);
    border: 1px solid rgba(120, 170, 240, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* The same four-layer logic as the window, an order of magnitude smaller: they belong to the
       same object, so they must catch light the same way. */
    box-shadow:
        0 14px 34px rgba(2, 6, 14, 0.5),
        0 0 26px rgba(59, 130, 246, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: none;
    white-space: nowrap;
}

.hero-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hero-badge strong {
    font-size: 12px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.hero-badge em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
}

.hero-badge-icon {
    width: 15px;
    height: 15px;
    color: var(--accent-secondary);
    flex: none;
}

/* Green because it means running, which is the one thing on this page that is not the brand's
   blue — the same green the scene's own LIVE marker uses. */
.hero-badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14);
    flex: none;
    animation: hero-badge-pulse 3.2s ease-in-out infinite;
}

@keyframes hero-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14); }
    50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.05); }
}

/* Hung off the corners, clear of the chrome bar and of the SHIPPED list underneath it. */
.hero-badge-live {
    top: -16px;
    right: -22px;
}

.hero-badge-cron {
    bottom: -18px;
    right: 8%;
}

/*
 * The mobile rule lives HERE, not in the hero's other max-width block. That one sits next to
 * `.hero-quasar`, hundreds of lines above these declarations, so at equal specificity the base
 * `display: flex` won on source order and the badges stayed on a 420px screen — hanging off the
 * corners of a window that is now the full width of it. Same media query, placed after what it
 * overrides.
 */
@media (max-width: 900px) {
    .hero-badge {
        display: none;
    }
}

/* Animations */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   FEATURE PREVIEW
   ============================================ */

.feature-preview {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-page);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 32px);
    margin-top: clamp(40px, 8vw, 60px);
}

.preview-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all var(--transition-slow);
}

.preview-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-md);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--gradient-accent);
    border-radius: 50%;
    font-size: 24px;
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    margin-bottom: 24px;
    box-shadow: var(--glow-sm);
}

.preview-image-wrapper {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}

.preview-image {
    width: 100%;
    display: block;
}

.preview-card h3 {
    font-size: 20px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.preview-card p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ============================================
   PAIN POINTS
   ============================================ */

.pain-points {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-surface);
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 3vw, 24px);
    margin-top: clamp(40px, 8vw, 60px);
}

.pain-card {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 32px;
    transition: all var(--transition-slow);
}

.pain-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-sm);
}

.pain-icon {
    font-size: 32px;
    margin-bottom: 16px;
}

.pain-title {
    font-size: 20px;
    color: #FF6B6B;
    font-weight: var(--font-semibold);
    margin-bottom: 20px;
    font-style: italic;
}

.solution {
    display: flex;
    gap: 12px;
    align-items: start;
    background: rgba(0, 217, 255, 0.08);
    border-left: 3px solid var(--accent-primary);
    padding: 16px;
    border-radius: 8px;
}

.solution-icon {
    color: var(--accent-primary);
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.solution p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.solution strong {
    color: var(--text-primary);
}

/* ============================================
   HOW IT WORKS
   ============================================ */

.how-it-works {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-surface);
}

.workflow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    margin-top: clamp(40px, 8vw, 60px);
    flex-wrap: wrap;
}

.workflow-step {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 24px;
    flex: 1;
    min-width: 200px;
    max-width: 260px;
    transition: all var(--transition-slow);
}

.workflow-step:hover {
    transform: translateY(-4px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-sm);
}

.workflow-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--gradient-accent);
    border-radius: 50%;
    font-size: 16px;
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    margin-bottom: 16px;
    box-shadow: var(--glow-sm);
}

.workflow-step .step-content h3 {
    font-size: 18px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.workflow-step .step-content p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.workflow-step .step-content code {
    background: var(--bg-elevated);
    color: var(--accent-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}

.workflow-arrow {
    font-size: 24px;
    color: var(--accent-primary);
    font-weight: var(--font-bold);
    align-self: center;
    opacity: 0.7;
}

/* ============================================
   KILLER FEATURE
   ============================================ */

.killer-feature {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-page);
}

.feature-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 8vw, 60px);
    align-items: center;
    margin-top: clamp(40px, 8vw, 60px);
}

.feature-visual {
    position: relative;
}

.feature-diagram {
    width: 100%;
    border-radius: 12px;
    /* Was rgba(0,217,255,.3) — cyan left over from the pre-blue palette, which
       read as a second accent next to the blue in the artwork itself. */
    border: 1px solid rgba(59, 130, 246, 0.28);
    box-shadow: var(--glow-md);
}

.latency-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 217, 255, 0.95);
    color: var(--text-inverse);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    box-shadow: var(--glow-sm);
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--text-inverse);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-item {
    display: flex;
    gap: 16px;
    align-items: start;
}

.feature-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.feature-item h3 {
    font-size: 18px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.feature-item p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */

.comparison {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-surface);
}

.comparison-table-wrapper {
    margin-top: clamp(40px, 8vw, 60px);
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-page);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-default);
}

.comparison-table thead {
    background: var(--bg-elevated);
}

.comparison-table th {
    padding: 20px;
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-default);
}

.comparison-table td {
    padding: 16px 20px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
}

.comparison-table tbody tr:hover {
    background: rgba(0, 217, 255, 0.03);
}

.comparison-table .highlight-col {
    background: rgba(0, 217, 255, 0.08);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================
   SOCIAL PROOF
   ============================================ */

.social-proof {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-page);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 32px);
    margin-top: clamp(40px, 8vw, 60px);
}

.testimonial-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 32px;
    transition: all var(--transition-slow);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-md);
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    flex-shrink: 0;
}

.author-name {
    font-size: 15px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.author-title {
    font-size: 13px;
    color: var(--text-muted);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 4vw, 32px);
    margin-top: clamp(60px, 10vw, 80px);
}

.stat {
    text-align: center;
}

.stat-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.stat-number {
    font-size: 36px;
    font-weight: var(--font-black);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============================================
   USE CASES
   ============================================ */

.use-cases {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-page);
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 4vw, 32px);
    margin-top: clamp(40px, 8vw, 60px);
}

.use-case-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 32px;
    transition: all var(--transition-slow);
}

.use-case-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-sm);
}

.use-case-icon {
    font-size: 36px;
    margin-bottom: 16px;
}

.use-case-card h3 {
    font-size: 20px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 12px;
}

.use-case-card p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.use-case-example {
    display: inline-block;
    background: var(--bg-elevated);
    color: var(--accent-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    border: 1px solid var(--border-default);
}

/* ============================================
   PRICING TEASER
   ============================================ */

.pricing-teaser {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-surface);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 4vw, 32px);
    max-width: 900px;
    margin: clamp(40px, 8vw, 60px) auto 0;
}

.pricing-card {
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 40px;
    transition: all var(--transition-slow);
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-md);
}

.pricing-card--featured {
    border-color: var(--border-accent);
    box-shadow: var(--glow-sm);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--gradient-accent);
    color: var(--text-inverse);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--font-semibold);
}

.pricing-header h3 {
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.price {
    font-size: 48px;
    font-weight: var(--font-black);
    color: var(--text-primary);
    margin-bottom: 32px;
}

.price span {
    font-size: 18px;
    color: var(--text-secondary);
    font-weight: var(--font-normal);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-features li {
    padding: 12px 0;
    font-size: 15px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
}

.pricing-features li:last-child {
    border-bottom: none;
}

/* ============================================
   FINAL CTA
   ============================================ */

.final-cta {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-page);
    text-align: center;
}

.cta-title {
    font-size: clamp(28px, 6vw, 48px);
    font-weight: var(--font-black);
    color: var(--text-primary);
    margin-bottom: clamp(12px, 2vw, 16px);
    letter-spacing: -0.02em;
}

.cta-subtitle {
    font-size: clamp(16px, 3vw, 20px);
    color: var(--text-secondary);
    margin-bottom: clamp(24px, 5vw, 40px);
}

.cta-subtext {
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ============================================
   LOGIN/SIGNUP SECTION
   ============================================ */

.login-section {
    padding: clamp(60px, 10vw, 80px) 0;
    background: var(--bg-surface);
}

.login-title {
    font-size: 28px;
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 12px;
}

.login-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 40px;
}

.login-options {
    max-width: 400px;
    margin: 0 auto;
}

.divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-default);
}

.divider span {
    position: relative;
    background: var(--bg-surface);
    padding: 0 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.form-switch-text {
    text-align: center;
    font-size: 15px;
    color: var(--text-secondary);
}

.form-switch-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.form-switch-link:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* ============================================
   FOOTER
   ============================================ */

.landing-footer {
    padding: 40px 0;
    background: var(--bg-page);
    border-top: 1px solid var(--border-default);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-left {
    color: var(--text-muted);
    font-size: 14px;
}

.footer-right {
    display: flex;
    gap: 24px;
}

.footer-right a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--transition);
}

.footer-right a:hover {
    color: var(--accent-primary);
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE DESIGN - Mobile First
   ============================================ */

/* Small Mobile: 320px - 479px */
@media (max-width: 479px) {
    /* Hero Section */
    .hero-section {
        min-height: auto;
        padding: 80px 0 60px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 16px;
    }

    /* Responsive video for mobile */
    .video-container {
        max-width: 100%;
        width: 100%;
    }

    .feature-diagram {
        display: block;
        max-height: 350px;
        object-fit: contain;
    }

    /* Make SVG text more readable on mobile */
    .feature-diagram svg,
    .preview-image svg {
        font-size: 14px;
    }

    /* Buttons - Full width + Touch friendly */
    .btn-primary,
    .btn-ghost {
        width: 100%;
        min-height: 48px;
        padding: 14px 24px;
        font-size: 16px;
        text-align: center;
    }

    .btn-primary.btn-large,
    .btn-primary.btn-xl {
        width: 100%;
        min-height: 48px;
        padding: 14px 24px;
        font-size: 16px;
    }

    .btn-ghost.btn-large {
        width: 100%;
        min-height: 48px;
        padding: 14px 24px;
        font-size: 16px;
    }

    .hero-cta {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    /* Sections - Reduce padding */
    .feature-preview,
    .pain-points,
    .killer-feature,
    .comparison,
    .social-proof,
    .pricing-teaser,
    .final-cta,
    .how-it-works {
        padding: 60px 0;
    }

    /* Workflow steps - stack vertically on mobile */
    .workflow-steps {
        flex-direction: column;
        align-items: center;
    }

    .workflow-step {
        max-width: 100%;
        width: 100%;
    }

    .workflow-arrow {
        transform: rotate(90deg);
        margin: 8px 0;
    }

    /* Grids - Single column */
    .preview-grid,
    .pain-grid,
    .testimonials-grid,
    .stats-row,
    .pricing-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Cards - Reduce padding */
    .preview-card,
    .pain-card,
    .testimonial-card,
    .pricing-card,
    .use-case-card {
        padding: 24px;
    }

    /* Comparison Table - Minimal columns */
    .comparison-table {
        font-size: 13px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px 8px;
    }

    /* Hide all columns except first two */
    .comparison-table th:nth-child(n+3),
    .comparison-table td:nth-child(n+3) {
        display: none;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-right {
        flex-direction: column;
        gap: 12px;
    }
}

/* Large Mobile: 480px - 639px */
@media (min-width: 480px) and (max-width: 639px) {
    .hero-section {
        min-height: auto;
        padding: 100px 0 70px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Responsive video for mobile */
    .video-container {
        max-width: 100%;
        width: 100%;
    }

    .feature-diagram {
        display: block;
        max-height: 300px;
        object-fit: contain;
    }

    /* Buttons - Still full width for better hierarchy */
    .btn-primary,
    .btn-ghost,
    .btn-primary.btn-large,
    .btn-primary.btn-xl,
    .btn-ghost.btn-large {
        width: 100%;
        min-height: 48px;
        text-align: center;
    }

    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }

    /* Grids - Still single column */
    .preview-grid,
    .pain-grid,
    .testimonials-grid,
    .pricing-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Stats can be 2 columns */
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Comparison Table - Show 3 columns */
    .comparison-table th:nth-child(n+4),
    .comparison-table td:nth-child(n+4) {
        display: none;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* Tablet: 640px - 767px */
@media (min-width: 640px) and (max-width: 767px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Responsive video for tablet */
    .video-container {
        max-width: 100%;
        width: 100%;
    }

    .feature-diagram {
        display: block;
    }

    /* Buttons - Back to inline */
    .hero-cta {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }

    .btn-primary,
    .btn-ghost {
        width: auto;
        min-height: 44px;
    }

    /* Grids - 2 columns */
    .preview-grid,
    .pain-grid,
    .testimonials-grid,
    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .pricing-grid,
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    /* Feature showcase - still single column */
    .feature-showcase {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Comparison Table - Show 3 columns */
    .comparison-table th:nth-child(n+4),
    .comparison-table td:nth-child(n+4) {
        display: none;
    }
}

/* Desktop: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .preview-grid,
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .pain-grid,
    .pricing-grid,
    .feature-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Show all comparison columns */
    .comparison-table th,
    .comparison-table td {
        display: table-cell;
    }
}

/* Large Desktop: 1024px+ */
@media (min-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
    }

    .preview-grid,
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pain-grid,
    .pricing-grid,
    .feature-showcase {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   PROMPT MOCK (how-it-works)
   ============================================ */

.prompt-mock {
    max-width: 860px;
    margin: clamp(32px, 6vw, 52px) auto 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.prompt-mock-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--gap-lg);
    padding: clamp(16px, 3vw, 24px);
}

.prompt-mock-row--user {
    border-bottom: 1px solid var(--border-default);
}

.prompt-mock-row--agent {
    background: var(--bg-elevated);
}

.prompt-mock-who {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-top: 3px;
}

.prompt-mock-row--agent .prompt-mock-who {
    color: var(--accent-secondary);
}

.prompt-mock-row p {
    margin: 0;
    font-size: clamp(15px, 2vw, 17px);
    color: var(--text-primary);
    line-height: 1.6;
}

.prompt-mock-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.prompt-mock-steps li {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.prompt-mock-steps code {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 2px 7px;
    margin-right: 4px;
}

.prompt-mock-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-primary);
    border: 1px solid var(--border-accent);
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 4px;
}

/* ============================================
   CODE SHOWCASE
   ============================================ */

.code-showcase {
    padding: clamp(60px, 10vw, 100px) 0;
    background: var(--bg-surface);
}

/* Single column on purpose: three columns of 70-character lines clip, and a
   sample you have to scroll sideways to read stops being evidence. */
.code-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 28px);
    margin: clamp(40px, 8vw, 60px) auto 0;
    max-width: 900px;
}

.code-sample {
    margin: 0;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.code-sample:hover {
    border-color: var(--border-accent);
    box-shadow: var(--glow-sm);
}

.code-sample figcaption {
    font-size: 14px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-elevated);
}

.code-sample pre {
    margin: 0;
    padding: 20px;
    /* Samples are wide; scroll the block, never the page. */
    overflow-x: auto;
}

.code-sample code {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.75;
    color: #cfd3dc;
    white-space: pre;
}

/* Token colours match wwwroot/docs/scripting.html — the samples are lifted
   from there, so they must read identically in both places. */
.tok-k { color: #c4b5fd; }
.tok-s { color: #fbbf77; }
.tok-c { color: #6f7585; font-style: italic; }
.tok-f { color: #7dd3fc; }
.tok-n { color: #f0a868; }

.use-case-example a {
    color: inherit;
    text-decoration: none;
}

.use-case-example a:hover {
    text-decoration: underline;
}

@media (min-width: 900px) {
    .use-cases-grid--three {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 639px) {
    .prompt-mock-row {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   SECTION EYEBROW
   A one-word label above a section title. Three of the sections below are new pillars rather than
   more detail about the API, and a visitor scanning at speed needs the category before the claim.
   ============================================ */

.section-eyebrow {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: var(--font-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-bottom: 12px;
}

/* ============================================
   THREE-UP / FOUR-UP GRIDS
   ============================================ */

/* Four doors do not fit the base two-column grid, and squeezing them into three leaves an orphan.
   Below 1000px they fall back to the responsive rules already in this file. */
@media (min-width: 1000px) {
    .use-cases-grid--four {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* A card that leads with a claim rather than an icon: used by "what it ships", where the three
   things are peers and the eye should land on the noun. */
.use-case-card--lead h3 {
    font-size: 22px;
}

.use-case-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ============================================
   SITE MOCK — the browser window in the "sites" section
   Deliberately static markup rather than an image: it is text at small sizes, and the file names in
   it are the ones the platform genuinely generates.
   ============================================ */

.site-mock {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.site-mock-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #12171E;
    border-bottom: 1px solid var(--border-default);
}

.site-mock-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-bright);
    flex-shrink: 0;
}

.site-mock-url {
    margin-left: 6px;
    min-width: 0;
    padding: 4px 12px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-mock-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--bg-elevated);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 0;
}

.site-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Two origins, and the difference is the whole point of the section: one file the author wrote,
   two the platform keeps correct on its behalf. */
.site-file-tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-file-tag--yours {
    color: var(--accent-secondary);
    border: 1px solid rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.1);
}

.site-file-tag--generated {
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, 0.3);
    background: rgba(63, 185, 80, 0.1);
}

.site-mock-foot {
    padding: 0 18px 18px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================
   CRON ROWS — the "starts on a clock" section
   ============================================ */

.cron-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 680px;
    margin: 0 auto clamp(24px, 5vw, 40px);
}

.cron-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    background: var(--bg-surface);
    min-width: 0;
}

.cron-expr {
    font-family: var(--font-mono);
    font-size: 13px;
    color: #c4b5fd;
    border: 1px solid rgba(163, 113, 247, 0.3);
    background: rgba(163, 113, 247, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.cron-what {
    font-size: 14px;
    color: var(--text-secondary);
    min-width: 0;
}

.cron-when {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 639px) {
    .cron-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .cron-when {
        margin-left: 0;
    }
}

/* ============================================
   PRICING — the AI line
   Credits are the main thing that separates the two plans now, so the line carries its own weight
   rather than sitting fourth in a list of ticks.
   ============================================ */

.pricing-features li.pricing-ai {
    color: var(--text-primary);
    font-weight: var(--font-medium);
}

.pricing-features li.pricing-ai small {
    display: block;
    color: var(--text-muted);
    font-weight: var(--font-normal);
    font-size: 12px;
    margin-left: 20px;
}

.pricing-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: clamp(20px, 4vw, 28px);
}

/* ============================================
   CLOSING NOTE under a section
   ============================================ */

.section-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-top: clamp(20px, 4vw, 32px);
}

.section-note a {
    color: var(--accent-secondary);
    text-decoration: none;
}

.section-note a:hover {
    text-decoration: underline;
}

/* ============================================
   INLINE CODE
   Bootstrap paints a bare <code> pink (#d63384). It is the only pink on the page, and the landing
   uses inline code in running prose all over — file names, `noindex`, an address. Claim the element
   here rather than wrapping every one in a class.
   ============================================ */

.use-case-card code,
.feature-item code,
.section-subtitle code,
.section-note code,
.cron-what code,
.site-mock-foot code,
.pricing-features code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--accent-secondary);
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ============================================
   CARD ALIGNMENT
   The example chip is the card's footer: pinned to the bottom so a row of cards with unequal prose
   still lines its chips up. Without this the four-up "ways in" row stair-steps.
   ============================================ */

.use-case-card {
    display: flex;
    flex-direction: column;
}

.use-case-card .use-case-example {
    align-self: flex-start;
    margin-top: auto;
}

/* The cron expression is a column, not a label — the descriptions beside it have to start at the
   same x or the three rows read as three unrelated boxes. */
.cron-expr {
    min-width: 104px;
    text-align: center;
}

@media (max-width: 639px) {
    .cron-expr {
        min-width: 0;
    }
}

/* ============================================
   PHONE: the two-column showcase has to fold
   .feature-showcase is 1fr 1fr in its base rule and the responsive blocks above collapse it at
   640-767px and widen it again at 768+ — but nothing ever folded it BELOW 640. So on a phone the
   diagram and its four feature items each got ~160px and ran off the side; body{overflow-x:hidden}
   hid the symptom rather than the cause. Three sections use this layout.
   ============================================ */

@media (max-width: 639px) {
    .feature-showcase {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* On a phone the hero frame is ~343px wide. At 16/9 that is a 193px-tall scene whose type — sized
   in cqw — lands at 7px. The scene is the proof the headline is making, so it gets a portrait
   frame instead of a legible-nowhere widescreen one. hero-demo.css raises the type to match. */
@media (max-width: 639px) {
    .video-container {
        aspect-ratio: 5 / 6;
    }

    /* Three ticks on one row is three two-word columns at this width. */
    .hero-subtext {
        flex-direction: column;
        gap: 10px;
    }
}

/* A card that is a link.
 *
 * .use-case-card was written for a <div> and sets no colour or text-decoration, so used on an
 * <a> the whole card arrives underlined and in link blue. The h3 and p inside set their own
 * colours and were fine; everything else was not. */
a.use-case-card {
    color: inherit;
    text-decoration: none;
}

a.use-case-card:hover {
    border-color: var(--accent-primary, #3b82f6);
    transform: translateY(-2px);
}

a.use-case-card:focus-visible {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: 2px;
}