/* ════════════════════════════════════════════════════
   PixADair Marketing Site
   ════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Custom Properties ─── */
:root {
    --void:       #07080D;
    --abyss:      #0B1520;
    --nebula:     #0F1D2E;
    --gold:       #C4943A;
    --gold-glow:  #E4B94F;
    --gold-dim:   #8A6A28;
    --bone:       #E6E2DA;
    --dust:       #A5A097;
    --ash:        #7A7570;
    --ember:      #1E1C19;

    --ff-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --ff-body:    'DM Sans', system-ui, -apple-system, sans-serif;

    --wrap:       1120px;
    --wrap-narrow: 680px;
    --gutter:     clamp(1.25rem, 4vw, 3rem);
}

/* ─── Base ─── */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--ff-body);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 300;
    line-height: 1.65;
    color: var(--bone);
    background:
        radial-gradient(ellipse 70% 50% at 20% 15%, rgba(30, 50, 95, 0.35), transparent 70%),
        radial-gradient(ellipse 60% 45% at 85% 40%, rgba(75, 35, 95, 0.28), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(20, 40, 80, 0.25), transparent 65%),
        var(--void);
    background-attachment: fixed;
    overflow-x: hidden;
}

::selection {
    background: var(--gold);
    color: var(--void);
}

img, svg { display: block; }

a {
    color: inherit;
    text-decoration: none;
}

em {
    font-family: var(--ff-display);
    font-style: italic;
    color: var(--gold);
}

/* ─── Layout ─── */
.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

/* ─── Star Field ─── */
.starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    filter: brightness(1.7) saturate(1.1);
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
}
.stars::after {
    content: '';
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
}

.stars--sm {
    box-shadow:
        547px 133px rgba(230,226,218,0.40),
        1812px 678px rgba(230,226,218,0.30),
        234px 1945px rgba(230,226,218,0.50),
        1456px 343px rgba(230,226,218,0.35),
        789px 1203px rgba(230,226,218,0.45),
        923px 567px rgba(230,226,218,0.30),
        145px 890px rgba(230,226,218,0.40),
        1678px 1456px rgba(230,226,218,0.35),
        456px 1023px rgba(230,226,218,0.50),
        1234px 789px rgba(230,226,218,0.30),
        67px 456px rgba(230,226,218,0.45),
        1890px 1234px rgba(230,226,218,0.35),
        345px 678px rgba(230,226,218,0.40),
        1567px 90px rgba(230,226,218,0.30),
        890px 1678px rgba(230,226,218,0.50),
        1023px 345px rgba(230,226,218,0.35),
        478px 1567px rgba(230,226,218,0.40),
        1745px 903px rgba(230,226,218,0.30),
        212px 1345px rgba(230,226,218,0.45),
        1389px 567px rgba(230,226,218,0.35),
        678px 23px rgba(230,226,218,0.40),
        1100px 1800px rgba(230,226,218,0.30),
        34px 1200px rgba(230,226,218,0.50),
        1600px 400px rgba(230,226,218,0.35),
        500px 900px rgba(230,226,218,0.40),
        800px 1500px rgba(230,226,218,0.30),
        1300px 200px rgba(230,226,218,0.45),
        100px 600px rgba(230,226,218,0.35),
        1900px 1100px rgba(230,226,218,0.40),
        400px 300px rgba(230,226,218,0.30),
        1700px 1700px rgba(230,226,218,0.50),
        600px 1400px rgba(230,226,218,0.35),
        1200px 100px rgba(230,226,218,0.40),
        300px 1800px rgba(230,226,218,0.30),
        1500px 800px rgba(230,226,218,0.45),
        50px 50px rgba(230,226,218,0.35),
        1950px 1950px rgba(230,226,218,0.40),
        750px 750px rgba(230,226,218,0.30),
        1250px 1250px rgba(230,226,218,0.50),
        350px 1650px rgba(230,226,218,0.35),
        1650px 350px rgba(230,226,218,0.40),
        950px 1050px rgba(230,226,218,0.30),
        1050px 950px rgba(230,226,218,0.45),
        150px 1500px rgba(230,226,218,0.35),
        1800px 500px rgba(230,226,218,0.40),
        550px 1850px rgba(230,226,218,0.30),
        1450px 650px rgba(230,226,218,0.50),
        250px 250px rgba(230,226,218,0.35),
        1150px 1550px rgba(230,226,218,0.40),
        850px 450px rgba(230,226,218,0.30);
    animation: drift-up 100s linear infinite;
}
.stars--sm::after {
    box-shadow:
        547px 133px rgba(230,226,218,0.40),
        1812px 678px rgba(230,226,218,0.30),
        234px 1945px rgba(230,226,218,0.50),
        1456px 343px rgba(230,226,218,0.35),
        789px 1203px rgba(230,226,218,0.45),
        923px 567px rgba(230,226,218,0.30),
        145px 890px rgba(230,226,218,0.40),
        1678px 1456px rgba(230,226,218,0.35),
        456px 1023px rgba(230,226,218,0.50),
        1234px 789px rgba(230,226,218,0.30),
        67px 456px rgba(230,226,218,0.45),
        1890px 1234px rgba(230,226,218,0.35),
        345px 678px rgba(230,226,218,0.40),
        1567px 90px rgba(230,226,218,0.30),
        890px 1678px rgba(230,226,218,0.50),
        1023px 345px rgba(230,226,218,0.35),
        478px 1567px rgba(230,226,218,0.40),
        1745px 903px rgba(230,226,218,0.30),
        212px 1345px rgba(230,226,218,0.45),
        1389px 567px rgba(230,226,218,0.35),
        678px 23px rgba(230,226,218,0.40),
        1100px 1800px rgba(230,226,218,0.30),
        34px 1200px rgba(230,226,218,0.50),
        1600px 400px rgba(230,226,218,0.35),
        500px 900px rgba(230,226,218,0.40),
        800px 1500px rgba(230,226,218,0.30),
        1300px 200px rgba(230,226,218,0.45),
        100px 600px rgba(230,226,218,0.35),
        1900px 1100px rgba(230,226,218,0.40),
        400px 300px rgba(230,226,218,0.30),
        1700px 1700px rgba(230,226,218,0.50),
        600px 1400px rgba(230,226,218,0.35),
        1200px 100px rgba(230,226,218,0.40),
        300px 1800px rgba(230,226,218,0.30),
        1500px 800px rgba(230,226,218,0.45),
        50px 50px rgba(230,226,218,0.35),
        1950px 1950px rgba(230,226,218,0.40),
        750px 750px rgba(230,226,218,0.30),
        1250px 1250px rgba(230,226,218,0.50),
        350px 1650px rgba(230,226,218,0.35),
        1650px 350px rgba(230,226,218,0.40),
        950px 1050px rgba(230,226,218,0.30),
        1050px 950px rgba(230,226,218,0.45),
        150px 1500px rgba(230,226,218,0.35),
        1800px 500px rgba(230,226,218,0.40),
        550px 1850px rgba(230,226,218,0.30),
        1450px 650px rgba(230,226,218,0.50),
        250px 250px rgba(230,226,218,0.35),
        1150px 1550px rgba(230,226,218,0.40),
        850px 450px rgba(230,226,218,0.30);
}

.stars--md {
    box-shadow:
        412px 982px 3px rgba(230,226,218,0.60),
        1356px 127px 3px rgba(230,226,218,0.70),
        78px 1734px 3px rgba(230,226,218,0.55),
        1823px 456px 3px rgba(230,226,218,0.65),
        645px 234px 3px rgba(230,226,218,0.75),
        1178px 1567px 3px rgba(230,226,218,0.60),
        234px 678px 3px rgba(230,226,218,0.70),
        1567px 1890px 3px rgba(230,226,218,0.55),
        890px 345px 3px rgba(230,226,218,0.65),
        456px 1456px 3px rgba(230,226,218,0.75),
        1690px 789px 3px rgba(230,226,218,0.60),
        345px 1123px 3px rgba(230,226,218,0.70),
        1234px 456px 3px rgba(230,226,218,0.55),
        567px 1890px 3px rgba(230,226,218,0.65),
        1890px 1345px 3px rgba(230,226,218,0.75),
        123px 234px 3px rgba(230,226,218,0.60),
        1456px 1678px 3px rgba(230,226,218,0.70),
        789px 890px 3px rgba(230,226,218,0.55),
        1023px 1234px 2px rgba(196,148,58,0.40),
        1678px 123px 2px rgba(196,148,58,0.35);
    animation: drift-up 70s linear infinite;
}
.stars--md::after {
    box-shadow:
        412px 982px 3px rgba(230,226,218,0.60),
        1356px 127px 3px rgba(230,226,218,0.70),
        78px 1734px 3px rgba(230,226,218,0.55),
        1823px 456px 3px rgba(230,226,218,0.65),
        645px 234px 3px rgba(230,226,218,0.75),
        1178px 1567px 3px rgba(230,226,218,0.60),
        234px 678px 3px rgba(230,226,218,0.70),
        1567px 1890px 3px rgba(230,226,218,0.55),
        890px 345px 3px rgba(230,226,218,0.65),
        456px 1456px 3px rgba(230,226,218,0.75),
        1690px 789px 3px rgba(230,226,218,0.60),
        345px 1123px 3px rgba(230,226,218,0.70),
        1234px 456px 3px rgba(230,226,218,0.55),
        567px 1890px 3px rgba(230,226,218,0.65),
        1890px 1345px 3px rgba(230,226,218,0.75),
        123px 234px 3px rgba(230,226,218,0.60),
        1456px 1678px 3px rgba(230,226,218,0.70),
        789px 890px 3px rgba(230,226,218,0.55),
        1023px 1234px 2px rgba(196,148,58,0.40),
        1678px 123px 2px rgba(196,148,58,0.35);
}

.stars--lg {
    box-shadow:
        824px 423px 5px 1px rgba(230,226,218,0.95),
        1567px 1678px 5px 1px rgba(230,226,218,1.0),
        234px 890px 4px 1px rgba(196,148,58,0.80),
        1890px 234px 5px 1px rgba(230,226,218,0.90),
        456px 1567px 5px 1px rgba(230,226,218,0.95),
        1234px 678px 4px 1px rgba(196,148,58,0.70),
        678px 1890px 5px 1px rgba(230,226,218,1.0),
        1678px 1023px 5px 1px rgba(230,226,218,0.90);
    animation: drift-up 50s linear infinite;
}
.stars--lg::after {
    box-shadow:
        824px 423px 5px 1px rgba(230,226,218,0.95),
        1567px 1678px 5px 1px rgba(230,226,218,1.0),
        234px 890px 4px 1px rgba(196,148,58,0.80),
        1890px 234px 5px 1px rgba(230,226,218,0.90),
        456px 1567px 5px 1px rgba(230,226,218,0.95),
        1234px 678px 4px 1px rgba(196,148,58,0.70),
        678px 1890px 5px 1px rgba(230,226,218,1.0),
        1678px 1023px 5px 1px rgba(230,226,218,0.90);
}

@keyframes drift-up {
    from { transform: translateY(0); }
    to { transform: translateY(-2000px); }
}

/* ─── Header ─── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem var(--gutter);
    transition: background 0.4s ease-out, box-shadow 0.4s ease-out;
}
.header--solid {
    background: rgba(7, 8, 13, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(230, 226, 218, 0.06);
}
.header__logo {
    display: inline-flex;
    align-items: center;
}
.header__logo img {
    height: 28px;
    width: auto;
    display: block;
}
.header__cta {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--gold-dim);
    border-radius: 2px;
    transition: background 0.3s ease-out, border-color 0.3s ease-out;
}
.header__cta:hover {
    background: rgba(196, 148, 58, 0.1);
    border-color: var(--gold);
}

/* ─── Hero ─── */
.hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5rem;
}
.hero__eyebrow {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
}
.hero__title {
    font-family: var(--ff-display);
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--bone);
    margin-bottom: 1.75rem;
    max-width: 14ch;
}
.hero__body {
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.7;
    color: var(--dust);
    max-width: 42ch;
    margin-bottom: 2.5rem;
}
.hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--ash);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: pulse-down 2.5s ease-in-out infinite;
}
.hero__scroll svg { opacity: 0.5; }

@keyframes pulse-down {
    0%, 100% { opacity: 0.75; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
}

/* ─── App Store badge ─── */
.app-store-badge {
    display: inline-block;
    line-height: 0;
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
}
.app-store-badge img {
    display: block;
    height: 56px;
    width: auto;
}
.app-store-badge--lg img {
    height: 63px;
}
.app-store-badge:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 6px 18px rgba(230, 226, 218, 0.18));
}
.app-store-badge:active {
    transform: translateY(0);
}

/* ─── Value ─── */
.value {
    position: relative;
    z-index: 1;
    padding: clamp(5rem, 10vh, 8rem) 0;
}
.value__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.25rem;
}
.value__eyebrow::before {
    content: '';
    width: 44px;
    height: 1px;
    background: var(--gold);
    opacity: 0.8;
}
.value__heading {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--bone);
    margin-bottom: 1.75rem;
    max-width: 16ch;
}
.value__body {
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.8;
    color: var(--dust);
    margin-bottom: 1.25rem;
}
.value__body:last-child { margin-bottom: 0; }
.value__body strong {
    color: var(--bone);
    font-weight: 500;
}

/* ─── Before/After Demo ─── */
.demo-section {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(4rem, 8vh, 7rem);
}
.demo-section__caption {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--ash);
    margin-top: 1rem;
}

.demo {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    cursor: col-resize;
    border: 1px solid rgba(230, 226, 218, 0.08);
    background: var(--void);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 148, 58, 0.04);
}

.demo__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.demo__img--clean {
    z-index: 1;
}

.demo__noisy {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: inset(0 50% 0 0);
    will-change: clip-path;
}

/* Amplified noise overlay on the "before" side for extra drama */
.demo__grain {
    position: absolute;
    inset: -10%;
    filter: url(#grain);
    opacity: 0.35;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Drag handle */
.demo__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    cursor: col-resize;
    touch-action: none;
    will-change: left;
}
.demo__handle-line {
    flex: 1;
    width: 1px;
    background: rgba(230, 226, 218, 0.35);
}
.demo__handle-grip {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(7, 8, 13, 0.7);
    border: 1px solid rgba(230, 226, 218, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bone);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: border-color 0.2s ease-out, transform 0.2s ease-out;
}
.demo__handle:hover .demo__handle-grip {
    border-color: var(--gold);
    transform: scale(1.08);
}
.demo__label {
    position: absolute;
    top: 1rem;
    z-index: 11;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone);
    padding: 0.375rem 0.75rem;
    background: rgba(7, 8, 13, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 2px;
    pointer-events: none;
    user-select: none;
}
.demo__label--before { left: 1.25rem; }
.demo__label--after  { right: 1.25rem; }

/* ─── Features ─── */
.features {
    position: relative;
    z-index: 1;
    padding: clamp(4rem, 8vh, 7rem) 0;
}

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding: clamp(3rem, 5vh, 5rem) 0;
}
.feature + .feature {
    border-top: 1px solid rgba(230, 226, 218, 0.06);
}
/* Flip second feature so its illustration is on the left */
.feature--offset .feature__text  { grid-column: 2; grid-row: 1; }
.feature--offset .feature__illus { grid-column: 1; grid-row: 1; }

.feature__text {
    max-width: 52ch;
}
.feature__heading {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--bone);
    margin-bottom: 1rem;
    position: relative;
}
.feature__heading::before {
    content: '';
    display: block;
    width: 44px;
    height: 1px;
    background: var(--gold);
    opacity: 0.75;
    margin-bottom: 1.25rem;
}
.feature__body {
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.75;
    color: var(--dust);
}
.feature__body strong {
    color: var(--bone);
    font-weight: 500;
}

/* ─── Feature illustrations ─── */
.feature__illus {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 420px;
}
.feature--offset .feature__illus { justify-self: start; }
.feature:not(.feature--offset) .feature__illus { justify-self: end; }

.feature__illus svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Shared label strips under illustrations */
.illus__labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dust);
}
.illus__labels--export span { color: var(--ash); }
.illus__labels--export .illus__labels--accent { color: var(--gold); }

/* Before/After tags on the compare illustration */
.illus--compare {
    position: relative;
}
.illus__tag {
    position: absolute;
    top: clamp(0.75rem, 3%, 1.25rem);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dust);
    background: rgba(7, 8, 13, 0.65);
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.illus__tag--left  { left: clamp(0.75rem, 3%, 1.25rem); }
.illus__tag--right { right: clamp(0.75rem, 3%, 1.25rem); }

/* ─── Workflow ─── */
.workflow {
    position: relative;
    z-index: 1;
    padding: clamp(5rem, 10vh, 8rem) 0;
}
.workflow__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.25rem;
}
.workflow__eyebrow::before {
    content: '';
    width: 44px;
    height: 1px;
    background: var(--gold);
    opacity: 0.8;
}
.workflow__heading {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--bone);
    margin-bottom: clamp(3rem, 5vh, 4.5rem);
    max-width: 18ch;
}
.workflow__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    list-style: none;
    counter-reset: none;
}

.step {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.step--visible {
    opacity: 1;
    transform: translateY(0);
}
.step__num {
    display: block;
    font-family: var(--ff-display);
    font-size: 2.5rem;
    color: var(--gold);
    opacity: 0.75;
    line-height: 1;
    margin-bottom: 1rem;
}
.step__title {
    font-family: var(--ff-display);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--bone);
    margin-bottom: 0.5rem;
}
.step__body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--dust);
}

/* ─── CTA ─── */
.cta {
    position: relative;
    z-index: 1;
    padding: clamp(6rem, 12vh, 10rem) 0;
    text-align: center;
}
.cta__heading {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--bone);
    margin-bottom: 1.5rem;
}
.cta__body {
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.75;
    color: var(--dust);
    margin-bottom: 2.5rem;
}

/* ─── Footer ─── */
.footer {
    position: relative;
    z-index: 1;
    padding: 3rem 0;
    border-top: 1px solid rgba(230, 226, 218, 0.06);
    text-align: center;
}
.footer__brand {
    font-family: var(--ff-display);
    font-size: 1.125rem;
    color: var(--ash);
    margin-bottom: 0.25rem;
}
.footer__copy {
    font-size: 0.8125rem;
    color: var(--ash);
}
.footer__links {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--ash);
}
.footer__links a {
    color: var(--dust);
    transition: color 0.2s ease;
}
.footer__links a:hover {
    color: var(--gold);
}

/* ─── Legal / Prose Pages ─── */
.legal {
    position: relative;
    z-index: 1;
    padding: clamp(7rem, 14vh, 10rem) 0 5rem;
}
.legal__eyebrow {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}
.legal__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.05;
    color: var(--bone);
    margin-bottom: 0.75rem;
}
.legal__meta {
    font-size: 0.8125rem;
    color: var(--ash);
    margin-bottom: 3rem;
}
.legal p,
.legal ul {
    color: var(--dust);
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.75;
}
.legal h2 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    color: var(--bone);
    margin: 2.75rem 0 0.875rem;
}
.legal ul {
    padding-left: 1.25rem;
}
.legal li {
    margin-bottom: 0.5rem;
}
.legal strong {
    color: var(--bone);
    font-weight: 500;
}
.legal a {
    color: var(--gold);
    border-bottom: 1px solid rgba(196, 148, 58, 0.3);
    transition: border-color 0.2s ease;
}
.legal a:hover {
    border-bottom-color: var(--gold);
}

/* ─── Scroll Reveal ─── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Responsive ─── */
@media (max-width: 860px) {
    .feature {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .feature--offset .feature__text,
    .feature--offset .feature__illus {
        grid-column: 1;
    }
    .feature--offset .feature__text  { grid-row: 1; }
    .feature--offset .feature__illus { grid-row: 2; }
    .feature__illus,
    .feature--offset .feature__illus,
    .feature:not(.feature--offset) .feature__illus {
        justify-self: start;
        max-width: 380px;
    }

    .workflow__steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 540px) {
    .hero__title br { display: none; }

    .demo { aspect-ratio: 1 / 1; }

    .workflow__steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .step {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 1rem;
    }
    .step__num {
        grid-row: 1 / 3;
        align-self: center;
        font-size: 2rem;
        margin-bottom: 0;
    }
    .step__title { margin-bottom: 0.25rem; }

    .cta__heading br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .starfield,
    .stars--sm,
    .stars--md,
    .stars--lg,
    .hero__scroll {
        animation: none;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .step {
        opacity: 1;
        transform: none;
        transition: none;
    }
}