/* =========================================================================
   Appdeft AI — Design System
   Light "paper" theme taken from appdeft.ai: warm off-white pages, navy ink,
   Appdeft blue (#0a63f6) with a cyan accent, white glass cards with soft
   shadows, pill buttons, Satoshi + Instrument Serif. Dark navy "islands"
   (footer, CTA band) re-declare the tokens below, so any component built
   on them adapts automatically. Component classes are prefixed `vs-`.
   ========================================================================= */

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/satoshi/Satoshi-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/satoshi/Satoshi-500.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/satoshi/Satoshi-700.woff2") format("woff2");
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/satoshi/Satoshi-900.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Appdeft palette */
    --vs-paper: #f6f5f2;
    --vs-navy: #0a1628;
    --vs-navy-900: #070f1c;
    --vs-brand: #0a63f6;
    --vs-brand-600: #084fc5;
    --vs-brand-400: #3d84f8;
    --vs-brand-300: #7eb6fb;
    --vs-cyan: #19c2ff;

    /* Page surfaces */
    --vs-base: var(--vs-paper);
    --vs-base-2: #ffffff;
    --vs-surface: #ffffff;

    /* Text (all AA on --vs-paper and on white) */
    --vs-ink: var(--vs-navy);
    --vs-ink-soft: #56627a;
    --vs-ink-faint: #626d85;
    --vs-line: rgba(10, 22, 40, 0.10);

    /* Glass: frosted white over the paper */
    --vs-glass-bg: rgba(255, 255, 255, 0.62);
    --vs-glass-bg-strong: rgba(255, 255, 255, 0.86);
    --vs-glass-border: rgba(255, 255, 255, 0.85);
    --vs-glass-blur: 18px;

    /* Buttons: navy pill on light surfaces, white pill on dark islands */
    --vs-btn-bg: var(--vs-navy);
    --vs-btn-fg: #ffffff;

    /* Typography */
    --vs-font: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --vs-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

    /* Layout */
    --vs-container: 1200px;
    --vs-radius-lg: 30px;
    --vs-radius: 22px;
    --vs-radius-sm: 14px;

    /* Effects */
    --vs-shadow: inset 0 1px 0 #fff, 0 30px 60px -36px rgba(10, 22, 40, 0.38), 0 1px 2px rgba(10, 22, 40, 0.05);
    --vs-shadow-hover: inset 0 1px 0 #fff, 0 40px 70px -34px rgba(10, 22, 40, 0.45), 0 2px 4px rgba(10, 22, 40, 0.06);
    --vs-shadow-brand: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 30px -16px rgba(10, 22, 40, 0.9);
    --vs-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dark navy islands (Appdeft footer / CTA): same tokens, inverted. */
.vs-dark,
.vs-footer,
.vs-band {
    --vs-ink: #ffffff;
    --vs-ink-soft: rgba(255, 255, 255, 0.74);
    --vs-ink-faint: rgba(255, 255, 255, 0.58);
    --vs-line: rgba(255, 255, 255, 0.12);
    --vs-surface: rgba(255, 255, 255, 0.06);
    --vs-glass-bg: rgba(255, 255, 255, 0.07);
    --vs-glass-bg-strong: rgba(255, 255, 255, 0.13);
    --vs-glass-border: rgba(255, 255, 255, 0.16);
    --vs-btn-bg: #ffffff;
    --vs-btn-fg: var(--vs-navy);
    --vs-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    color: var(--vs-ink);
}

/* ------------------------------- Reset --------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--vs-font);
    color: var(--vs-ink);
    background-color: var(--vs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Soft pastel washes over the paper, as on appdeft.ai (teal left, warm
   centre, lavender right) with a faint dot grid near the top. */
.vs-backdrop {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(48% 52% at 0% 10%, rgba(25, 194, 255, 0.12) 0%, transparent 65%),
        radial-gradient(44% 48% at 100% 6%, rgba(120, 104, 214, 0.10) 0%, transparent 62%),
        radial-gradient(40% 40% at 55% 60%, rgba(255, 196, 160, 0.10) 0%, transparent 70%),
        var(--vs-paper);
}

.vs-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(10, 22, 40, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 55% at 50% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(70% 55% at 50% 20%, #000 0%, transparent 75%);
    opacity: 0.6;
}

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

img {
    max-width: 100%;
    display: block;
}

::selection {
    background: rgba(10, 99, 246, 0.18);
    color: var(--vs-navy);
}

/* Accessible focus ring */
:focus-visible {
    outline: 2px solid var(--vs-brand);
    outline-offset: 3px;
    border-radius: 4px;
}
.vs-dark :focus-visible,
.vs-footer :focus-visible,
.vs-band :focus-visible {
    outline-color: var(--vs-cyan);
}
/* Sections that site.js focuses after an anchor jump are not controls. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Skip link */
.vs-skip {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    background: var(--vs-navy);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 12px 0;
    font-weight: 700;
}
.vs-skip:focus {
    left: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------ Layout --------------------------------- */
.vs-container {
    width: 100%;
    max-width: var(--vs-container);
    margin: 0 auto;
    padding: 0 24px;
}

.vs-section {
    position: relative;
    padding: 110px 0;
}

.vs-section-head {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}

.vs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vs-brand);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(10, 99, 246, 0.18);
    box-shadow: inset 0 1px 0 #fff, 0 8px 20px -14px rgba(10, 22, 40, 0.35);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.vs-dark .vs-eyebrow,
.vs-band .vs-eyebrow {
    color: var(--vs-cyan);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(25, 194, 255, 0.3);
    box-shadow: none;
}

.vs-eyebrow .fa {
    font-size: 0.8rem;
}

.vs-h2 {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
    color: var(--vs-ink);
}

/* Accent words: solid Appdeft blue (no gradient), and the serif italic. */
.vs-grad {
    color: var(--vs-brand);
}
.vs-dark .vs-grad,
.vs-band .vs-grad,
.vs-footer .vs-grad {
    color: var(--vs-cyan);
}

.vs-serif {
    font-family: var(--vs-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.vs-lead {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    color: var(--vs-ink-soft);
    margin: 0;
}

/* ------------------------------ Buttons -------------------------------- */
.vs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    font-weight: 500;
    font-size: 1rem;
    padding: 0 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.5s var(--vs-ease), box-shadow 0.5s var(--vs-ease),
        background-color 0.3s var(--vs-ease), border-color 0.3s var(--vs-ease), color 0.3s var(--vs-ease);
    will-change: transform;
}

.vs-btn .fa {
    transition: transform 0.5s var(--vs-ease);
}

.vs-btn-primary {
    background: var(--vs-btn-bg);
    color: var(--vs-btn-fg);
    box-shadow: var(--vs-shadow-brand);
}
.vs-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--vs-brand);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 22px 36px -16px rgba(10, 99, 246, 0.7);
}
.vs-btn-primary:hover .fa {
    transform: translateX(4px);
}

.vs-btn-ghost {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.92);
    color: var(--vs-ink);
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px -18px rgba(10, 22, 40, 0.5);
    -webkit-backdrop-filter: blur(var(--vs-glass-blur));
    backdrop-filter: blur(var(--vs-glass-blur));
}
.vs-btn-ghost:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: #fff;
}
.vs-dark .vs-btn-ghost,
.vs-band .vs-btn-ghost,
.vs-footer .vs-btn-ghost {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.36);
    color: #fff;
    box-shadow: none;
}
.vs-dark .vs-btn-ghost:hover,
.vs-band .vs-btn-ghost:hover,
.vs-footer .vs-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------- Glass --------------------------------- */
.vs-glass {
    background: var(--vs-glass-bg);
    border: 1px solid var(--vs-glass-border);
    box-shadow: var(--vs-shadow);
    -webkit-backdrop-filter: blur(var(--vs-glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--vs-glass-blur)) saturate(160%);
    border-radius: var(--vs-radius);
}

/* =============================== HERO ================================== */
/* Centred copy over the fractal bloom tree (hero-bloom.js), which grows up
   from the bottom centre and is the hero's centrepiece. */
.vs-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* The bottom strip is the AI fruit garden: room for the plants to grow
       clear of the stats card. */
    padding: 150px 0 150px;
    overflow: hidden;
    isolation: isolate;
}

/* Sky (hero-sky.js): a pale blue sky with a warm sun haze, fading back into
   the paper before the section ends; clouds and birds drift on the canvas. */
.vs-hero-sky {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 80% 14%, rgba(255, 236, 204, 0.55) 0%, rgba(255, 236, 204, 0) 70%),
        linear-gradient(180deg, #cfe2f4 0%, #dfebf6 34%, #edf1f4 62%, rgba(246, 245, 242, 0) 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}

.vs-hero-sky canvas,
.vs-hero-bloom canvas,
.vs-hero-garden canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.vs-hero-bloom,
.vs-hero-garden {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* Mist at the base, so the trunk rises out of the page rather than being
   cut off by the section edge (the component's bottom gradient). */
.vs-hero-bloom::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    background: linear-gradient(to top, var(--vs-paper) 8%, rgba(246, 245, 242, 0));
}

.vs-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* A soft white haze behind the copy keeps the thin branches from competing
   with the text while the crown still reads all around it. */
.vs-hero-inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    width: min(1000px, 120%);
    height: 112%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(250, 252, 255, 0.86) 0%, rgba(250, 252, 255, 0.66) 48%, rgba(250, 252, 255, 0) 100%);
    pointer-events: none;
}

.vs-hero-title {
    margin: 0 0 24px;
    font-size: clamp(2.6rem, 6.6vw, 5.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--vs-ink);
}
.vs-hero-title .vs-hero-line {
    display: block;
}
.vs-hero-title .vs-serif {
    font-size: 1.06em;
    letter-spacing: -0.02em;
}
.vs-hero-title .vs-hero-blue {
    color: var(--vs-brand);
}

.vs-hero-sub {
    font-size: clamp(1.02rem, 1.6vw, 1.16rem);
    color: var(--vs-ink-soft);
    max-width: 58ch;
    margin: 0 auto 32px;
}

.vs-hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
}

.vs-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 720px);
    padding: 22px 8px;
    text-align: left;
}

.vs-stat {
    padding: 0 18px;
}

.vs-stat-num {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--vs-ink);
    line-height: 1;
}

.vs-stat-label {
    font-size: 0.82rem;
    color: var(--vs-ink-soft);
    margin-top: 8px;
    line-height: 1.35;
}

.vs-stat + .vs-stat {
    border-left: 1px solid var(--vs-line);
}

.vs-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    color: var(--vs-ink-faint);
    font-size: 1.4rem;
    animation: vs-bounce 2s infinite;
}

@keyframes vs-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 9px); }
}

/* ========================== CAPABILITIES ============================== */
.vs-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
}

.vs-cap-card {
    padding: 32px 28px;
    border-radius: var(--vs-radius);
    background: var(--vs-glass-bg-strong);
    border: 1px solid var(--vs-glass-border);
    box-shadow: var(--vs-shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.5s var(--vs-ease), box-shadow 0.5s var(--vs-ease), background-color 0.4s var(--vs-ease);
}

.vs-cap-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 0% 0%, rgba(10, 99, 246, 0.08), transparent 55%);
    opacity: 0;
    transition: opacity 0.4s var(--vs-ease);
}

.vs-cap-card:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: var(--vs-shadow-hover);
}
.vs-cap-card:hover::before {
    opacity: 1;
}

.vs-cap-icon {
    position: relative;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.3rem;
    color: #fff;
    background: var(--vs-navy);
    box-shadow: var(--vs-shadow-brand);
    margin-bottom: 20px;
}

.vs-cap-title {
    position: relative;
    font-size: 1.22rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--vs-ink);
}

.vs-cap-text {
    position: relative;
    color: var(--vs-ink-soft);
    font-size: 0.95rem;
    margin: 0;
}

/* ============================== FOOTER ================================ */
/* Dark navy, as appdeft.ai's footer (#070f1c) — tokens flipped above. */
.vs-footer {
    position: relative;
    overflow: hidden;
    padding: 90px 0 36px;
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(10, 99, 246, 0.20), transparent 60%),
        radial-gradient(40% 60% at 100% 100%, rgba(25, 194, 255, 0.10), transparent 60%),
        var(--vs-navy-900);
}

.vs-footer-grid {
    display: grid;
    /* brand | Platform | Products | Contact Us */
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.vs-footer-brand img {
    height: 30px;
    width: auto;
    margin-bottom: 18px;
}

.vs-footer-brand p {
    color: var(--vs-ink-soft);
    max-width: 38ch;
    margin: 0 0 22px;
    font-size: 0.95rem;
}

.vs-footer-col h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vs-ink-faint);
    margin: 0 0 18px;
}

.vs-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.vs-footer-col a {
    color: var(--vs-ink-soft);
    font-size: 0.95rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.vs-footer-col a:hover {
    color: #fff;
    padding-left: 4px;
}

.vs-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vs-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--vs-glass-bg);
    border: 1px solid var(--vs-glass-border);
    color: var(--vs-ink-soft);
    transition: transform 0.4s var(--vs-ease), background-color 0.25s var(--vs-ease), color 0.25s var(--vs-ease);
}
.vs-social a:hover {
    transform: translateY(-3px);
    background: #fff;
    color: var(--vs-navy);
    border-color: #fff;
}

.vs-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    align-items: center;
    justify-content: space-between;
    padding-top: 26px;
    border-top: 1px solid var(--vs-line);
    color: var(--vs-ink-faint);
    font-size: 0.88rem;
}

.vs-footer-legal {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.vs-footer-legal a {
    transition: color 0.25s var(--vs-ease);
}
.vs-footer-legal a:hover,
.vs-footer-legal a:focus-visible {
    color: #fff;
}

/* The signature: label + mark, kept together on one baseline so the pair reads
   as a single sentence and never breaks between the two. */
.vs-footer-sign {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--vs-ink-faint);
    transition: color 0.25s var(--vs-ease);
}
.vs-footer-sign:hover,
.vs-footer-sign:focus-visible {
    color: #fff;
}

.vs-footer-sign-label {
    white-space: nowrap;
}

.vs-footer-sign img {
    display: block;
    height: 26px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.25s var(--vs-ease), transform 0.25s var(--vs-ease);
}
.vs-footer-sign:hover img,
.vs-footer-sign:focus-visible img {
    opacity: 1;
    transform: translateY(-1px);
}

/* ---------------------------- Closing CTA band -------------------------- */
/* Dark navy card with a blue glow, as appdeft.ai's "Ready to build" band.
   Kept here rather than in projects-index.css so the home page does not
   have to pull in the catalogue's stylesheet for one block. */
.vs-section-band {
    padding-top: 0;
}
.vs-band {
    position: relative;
    overflow: hidden;
    padding: 56px 56px;
    border-radius: var(--vs-radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background:
        radial-gradient(70% 140% at 0% 100%, rgba(10, 99, 246, 0.55) 0%, transparent 60%),
        radial-gradient(50% 100% at 100% 0%, rgba(25, 194, 255, 0.18) 0%, transparent 60%),
        linear-gradient(135deg, var(--vs-navy) 0%, var(--vs-navy-900) 100%);
    box-shadow: 0 40px 80px -40px rgba(10, 22, 40, 0.7);
}
.vs-band-title {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}
.vs-band-sub {
    margin: 0;
    color: var(--vs-ink-soft);
}
.vs-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ------------------------- Reveal animations --------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--vs-ease), transform 0.8s var(--vs-ease);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

/* ------------------------------ Responsive ----------------------------- */
@media (max-width: 1024px) {
    /* The brand block no longer fits beside four columns: give it a full-width
       row and keep Platform / Products / Contact Us together underneath. */
    .vs-footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
    .vs-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .vs-section { padding: 80px 0; }
    .vs-footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .vs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .vs-stat:nth-child(odd) { border-left: none; }
}

@media (max-width: 767px) {
    /* Once the two halves no longer share a row, centre them instead of
       leaving the signature hanging on the left under the copyright. */
    .vs-footer-bottom { justify-content: center; text-align: center; }
    .vs-band { padding: 34px 24px; }
    .vs-band-actions { width: 100%; }
    .vs-band-actions .vs-btn { width: 100%; }
}

@media (max-width: 640px) {
    /* The copy fills a phone's width, so the crown runs right through it:
       quieter here, still the backdrop. */
    .vs-hero-bloom canvas:first-child { opacity: 0.45; }
}

@media (max-width: 520px) {
    .vs-container { padding: 0 16px; }
    .vs-hero { padding: 116px 0 128px; }
    .vs-hero-cta { flex-direction: column; }
    .vs-hero-cta .vs-btn { width: 100%; }
}

/* --------------------------- Reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}