/* ================================================
   MAKE ME TOOLS — Custom software, built to order
   v94 · quicker typewriter, punchier fonts, crisp cards
   Type: Bricolage Grotesque · Figtree · JetBrains Mono
   ================================================ */

:root {
    color-scheme: dark;
    forced-color-adjust: none;

    /* Neutral surfaces */
    --bg-0: #0a0a0b;
    --bg-1: #0f1010;
    --bg-2: #141515;
    --bg-3: #1c1d1d;

    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);

    --text-hi: #f2f3f3;
    --text-mid: #a7acaa;
    --text-low: #6e7472;

    /* Accent — the only colour on the page */
    --accent: #9b7df0;
    --accent-bright: #b9a2ff;
    --accent-ink: #120c20;
    --accent-soft: rgba(155, 125, 240, 0.12);
    --accent-glow: rgba(155, 125, 240, 0.06);

    /* Depth (neutral, no colour) */
    --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
    --shadow-lift: 0 32px 70px -28px rgba(0, 0, 0, 0.65);

    /* Type */
    --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Layout */
    --nav-h: 84px;
    --container: 1140px;
    --radius: 14px;
    --radius-sm: 10px;
    --section-pad: clamp(76px, 10vw, 120px);

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   BASE
   ================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

/* ================================================
   LIGHT THEME — soft off-whites, no glare; the
   purple deepens so contrast holds everywhere
   ================================================ */
html.light {
    color-scheme: light;

    /* ---- LIGHT BACKGROUND OPTIONS ----------------------------------
       Swap --bg-0 below to any of these to retint the whole light
       theme. They are all soft and easy on the eyes (not stark white):
         #ffffff  pure white
         #fbfbfd  barely-there cool white   (almost white)
         #f6f6f8  soft cool grey-white       ← current default
         #f7f6f3  warm paper / off-white
         #f4f1ea  warm cream
         #eef1f4  cool mist
         #f2f0f6  faint lilac (hint of the brand purple)
       Just change the one value on the next line. --------------------*/
    --bg-0: #f7f6f3;
    --bg-1: #ffffff;
    --bg-2: #efeeea;
    --bg-3: #e6e4dd;

    --line: rgba(22, 22, 34, 0.08);
    --line-strong: rgba(22, 22, 34, 0.17);

    --text-hi: #1a1c1f;
    --text-mid: #4c5156;
    --text-low: #7c828a;

    --accent: #7252d8;
    --accent-bright: #5b3cc4;
    --accent-ink: #ffffff;
    --accent-soft: rgba(114, 82, 216, 0.14);
    --accent-glow: rgba(114, 82, 216, 0.1);

    --shadow: 0 24px 60px -28px rgba(26, 26, 46, 0.18);
    --shadow-lift: 0 32px 70px -28px rgba(26, 26, 46, 0.26);
}

html.light .glow-orb {
    /* faint and soft — a whisper of colour that fades out entirely
       through its own gradient, so it can never form a hard edge */
    width: 820px;
    height: 820px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 82%);
    filter: blur(92px);
}

html.light .glow-orb {
    opacity: 0.9;
}

html.light .form-message.error {
    color: #b3372a;
    border-color: rgba(179, 55, 42, 0.3);
}

html.light .btn-shine::after {
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
}

body {
    font-family: var(--font-body);
    background: var(--bg-0) !important;
    color: var(--text-hi) !important;
    line-height: 1.65;
    overflow: hidden;            /* the panels scroll, the window never does */
    forced-color-adjust: none;
}

::selection { background: var(--accent-soft); color: var(--text-hi); }

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

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 10001;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 12px; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
}

.container-narrow { max-width: 800px; }

/* ================================================
   THE STAGE — two full pages side by side.
   The window is locked; the world slides instead.
   The off-stage panel is clipped, inert, unreachable.
   ================================================ */
.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.world {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 200vw;
    display: flex;
    will-change: transform;
}

/* Transitions enabled only after first paint, so a
   #examples deep-link lands instantly with no swoosh */
body.ready .world {
    transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

.world.show-examples { transform: translateX(-100vw); }

.page {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.page::-webkit-scrollbar { width: 10px; }
.page::-webkit-scrollbar-track { background: transparent; }

.page::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.page::-webkit-scrollbar-thumb:hover { background: var(--text-low); }

/* While the panels slide, the scrollbars turn invisible.
   They still occupy their gutter (nothing reflows), so
   the transition shows no bar anywhere mid-screen */
body.sliding .page { scrollbar-color: transparent transparent; }
body.sliding .page::-webkit-scrollbar-thumb { background: transparent; }

/* Anchor scrolling: each content section carries up to 120px
   of its own top padding before the eyebrow/title. We subtract
   that padding here so the title always lands at the same spot,
   a comfortable nav-h + 24px below the top, never pushed down. */
#home, #main {
    scroll-margin-top: calc(var(--nav-h) + 12px);
}

#build, #process, #pricing, #faq, #contact {
    scroll-margin-top: calc(var(--nav-h) + 52px - var(--section-pad));
}

/* Arrival veil — a soft wash that lifts as examples loads in */
.page-veil {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(60% 50% at 50% 28%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 70%);
}

.page-examples.entered .page-veil {
    animation: veilFade 1.1s ease forwards;
}

@keyframes veilFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Header elements float in on each arrival */
.slide-reveal {
    opacity: 0;
    transform: translateX(-30px);
    filter: blur(7px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0s) + 0.35s);
}

.page-examples.entered .slide-reveal {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

/* ================================================
   SCROLL PROGRESS — thin line along the top edge
   ================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 10000;
    pointer-events: none;
}

.scroll-progress i {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent);
}

/* ================================================
   THEME TOGGLE — a moon in the nav; clicking it
   wipes the other theme across the screen with
   every element visible as the colour arrives
   ================================================ */
.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.theme-toggle svg {
    position: absolute;
    width: 16px;
    height: 16px;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

html.light .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
html.light .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* The reveal: the new theme's snapshot is clipped to a
   circle that grows from the button (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Fallback wipe: everything cross-fades to its new colour */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
    transition:
        background-color 0.5s ease,
        color 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        fill 0.5s ease,
        stroke 0.5s ease !important;
}

/* ================================================
   GLOW ORB — a soft light that drifts down the
   home page with the reader (height set by JS)
   ================================================ */
.orb-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    overflow: visible;   /* no clip box — the orb fades by its own gradient */
    pointer-events: none;
}

/* Content paints above the orb */
main,
.folio-header,
.folio-section {
    position: relative;
    z-index: 1;
}

/* footer shares the page background with no seam or stacking edge */
.footer {
    position: relative;
    z-index: 1;
    background: transparent;
}

.glow-orb {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    /* gentler tint + a longer, smoother falloff (fades to nothing
       well before any edge, so there's no hard line anywhere) */
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 82%);
    filter: blur(84px);
    will-change: transform;
    animation: orbBreathe 6.5s ease-in-out infinite;
}

@keyframes orbBreathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
}

html.light .glow-orb { animation-name: orbBreatheLight; }

@keyframes orbBreatheLight {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.68; }
}

@media (max-width: 767px) {
    .orb-layer { display: none; }
}

/* ================================================
   STATS TICKER — a continuous 3D ribbon. JS slices
   the strip into narrow segments and bends them
   along a living wave: up, down, toward you, away.
   Falls back to a flat ticker on phones / reduced
   motion / weak devices.
   ================================================ */
.ticker {
    position: relative;
    padding: 26px 0 30px;
    overflow: hidden;
}

/* Soft fade where the ribbon enters and leaves */
.ticker::before,
.ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(50px, 9vw, 120px);
    z-index: 3;
    pointer-events: none;
}

.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg-0), transparent); }

/* Floating shadow beneath the ribbon */
.ticker-shadow {
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 6px;
    height: 16px;
    background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.4), transparent 72%);
    filter: blur(7px);
}

/* Shared stat typography (flat and ribbon) */
.tick {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding-left: 30px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: var(--text-mid);
    white-space: nowrap;
}

.tick b {
    font-weight: 600;
    color: var(--accent);
}

.tick i {
    width: 1px;
    height: 13px;
    border-radius: 1px;
    background: var(--accent);
    opacity: 0.55;
}

/* ---- Flat fallback ---- */
.ticker-flat {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 13px 0;
}

.ticker.has-ribbon .ticker-flat,
.ticker.has-ribbon .ticker-shadow ~ .ticker-flat { display: none; }

.ticker-flat .ticker-track {
    display: flex;
    width: max-content;
    animation: tickerScroll 64s linear infinite;
}

.ticker-group { display: flex; }

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- The ribbon (built by JS as one continuous SVG band;
        the text flows along the curve, letter by letter; the
        whole band slides via one compositor transform) ---- */
.ribbon-viewport {
    overflow: hidden;
    height: 96px;
}

.ribbon-svg {
    display: block;
    height: 96px;
    overflow: visible;
    will-change: transform;
}

.ribbon-band-base { fill: url(#mmtRibbonVert); }

.ribbon-edge-top {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1;
}

.ribbon-edge-bot {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
}

#mmtRibbonVert .rv-1 { stop-color: color-mix(in srgb, #ffffff 7%, var(--bg-1)); }
#mmtRibbonVert .rv-2 { stop-color: var(--bg-1); }
#mmtRibbonVert .rv-3 { stop-color: color-mix(in srgb, #000000 16%, var(--bg-1)); }

.ribbon-text {
    font-family: var(--font-mono);
    font-size: 12.2px;
    letter-spacing: 0.04em;
    fill: var(--text-mid);
    text-rendering: optimizeSpeed;
}

.ribbon-text .rb {
    font-weight: 600;
    fill: var(--accent);
}

.ribbon-text .rsep {
    fill: var(--accent);
    opacity: 0.55;
}

/* ---- New tool mockups: rota, reviews, inbox ---- */
.mk-rota {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mk-rota-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mk-rota-row .mk-k {
    width: 34px;
    flex: 0 0 34px;
}

.mk-shift {
    height: 13px;
    flex: 1;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.mk-shift.s2 { background: color-mix(in srgb, var(--accent) 13%, transparent); }

.mk-shift.gap {
    background: transparent;
    border: 1px dashed var(--line-strong);
}

.mk-shift.fill {
    background: var(--accent);
    opacity: 0.85;
}

.mk-tag {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    color: var(--text-mid);
    margin-left: auto;
    white-space: nowrap;
}

.mk-tag.hot {
    border-color: rgba(224, 86, 79, 0.6);
    color: #e0564f;
}

.mk-dot.bad { background: #e0564f; }
.mk-dot.on { background: var(--accent); }

.folio.live .mk-shift.fill { animation: mkPop 5s ease infinite; }
.folio.live .mk-shift.gap { animation: mkBlink 2.4s ease-in-out infinite; }
.folio.live .rev-new { animation: mkSlideIn 6s ease infinite; }
.folio.live .rev-new .mk-dot.bad { animation: mkDotPing 6s ease infinite; }
.folio.live .mk-tag { animation: mkPop 7s ease infinite; }
.folio.live .mk-list-row:nth-child(2) .mk-tag { animation-delay: 0.5s; }
.folio.live .mk-list-row:nth-child(3) .mk-tag { animation-delay: 1s; }
.folio.live .mk-dot.on { animation: mkBlink 1.8s ease-in-out infinite; }

@keyframes mkPop {
    0% { transform: scale(0.4); opacity: 0; }
    7% { transform: scale(1.08); opacity: 1; }
    11%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes mkSlideIn {
    0% { transform: translateX(-10px); opacity: 0; }
    8%, 100% { transform: translateX(0); opacity: 1; }
}

/* ================================================
   SHARED TYPE PATTERNS
   ================================================ */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-low);
    margin-bottom: 18px;
}
.eyebrow.center { text-align: center; }

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.8vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.14;
    text-align: center;
    margin-bottom: 16px;
    text-wrap: balance;
}

.title-accent { color: var(--accent); }

.section-subtitle {
    font-size: 1.02rem;
    color: var(--text-mid);
    text-align: center;
    max-width: 560px;
    margin: 0 auto 56px;
    text-wrap: balance;
}

/* ================================================
   NAVIGATION
   ================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    background: rgba(10, 10, 14, 0.70);
    border-bottom: 1px solid transparent;
    z-index: 9998;
    transition: border-color var(--transition-fast);
}

/* An opaque base layer sits behind the bar's contents. It
   needs no backdrop-filter support, so the navbar is always
   solid dark even on browsers that drop the blur. Where blur
   IS supported, this layer carries it for the glass look. */
.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10, 10, 14, 0.70);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar { background: rgba(10, 10, 14, 0.48); }
    .navbar::before { background: rgba(10, 10, 14, 0.48); }
}

html.light .navbar,
html.light .navbar::before { background: rgba(246, 246, 248, 0.72); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.light .navbar,
    html.light .navbar::before { background: rgba(246, 246, 248, 0.52); }
}

.navbar.scrolled { border-bottom-color: var(--line); }

.nav-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 28px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.nav-container .logo { justify-self: start; }
.nav-container .nav-links { justify-self: center; }
.nav-container .nav-actions { justify-self: end; }

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-hi);
    transition: opacity var(--transition-fast);
}


.logo:hover { opacity: 0.85; }

.logo-icon { width: 32px; height: 32px; }

.logo-text {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    color: var(--text-mid);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active { color: var(--text-hi); }

.nav-links-cta { display: none; }

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

.nav-cta {
    padding: 6px 12px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 7px;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.nav-cta:hover {
    background: var(--accent-bright);
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.mobile-menu-btn span {
    width: 22px;
    height: 2px;
    background: var(--text-hi);
    border-radius: 2px;
    transition: var(--transition-fast);
}

/* ================================================
   BUTTONS
   ================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 11px;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 600;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.btn-primary:hover {
    background: var(--accent-bright);
    transform: translateY(-2px);
}

.btn-primary:hover svg { transform: translateX(3px); }

/* The headline CTA: gradient, glow, and a sweeping sheen */
.btn-shine {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 95%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-bright) 40%, transparent),
        0 10px 36px -8px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -75%;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineSweep 4.5s ease-in-out infinite;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.btn-shine:hover::after { opacity: 0; }

@keyframes shineSweep {
    0%, 58% { left: -75%; }
    78%, 100% { left: 135%; }
}

.btn-shine:hover {
    /* Same gradient as rest state — backgrounds can't cross-fade,
       so the brightening happens on a filter instead */
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 95%);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-bright) 60%, transparent),
        0 14px 44px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 15px 22px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: var(--text-hi);
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 500;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-ghost:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* ================================================
   HERO
   ================================================ */
.hero {
    position: relative;
    padding: calc(var(--nav-h) + clamp(56px, 9vh, 104px)) 28px clamp(64px, 8vw, 100px);
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    top: -260px;
    left: 50%;
    width: 920px;
    height: 560px;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 68%);
    filter: blur(72px);
    pointer-events: none;
    transform: translateX(-50%);
    will-change: transform;
}

.hero-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 5vw, 68px);
    align-items: center;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.2vw, 3.9rem);
    font-weight: 700;
    letter-spacing: -0.026em;
    line-height: 1.05;
    margin-bottom: 22px;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: var(--text-mid);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 32px;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-assurance {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-low);
}

/* Keep the ticker above the fold on laptop screens */
@media (min-width: 769px) and (max-height: 920px) {
    .hero { padding-top: calc(var(--nav-h) + 42px); padding-bottom: 38px; }
    .hero-title { font-size: clamp(2.2rem, 4.4vw, 3.15rem); margin-bottom: 18px; }
    .hero-subtitle { margin-bottom: 24px; }
}

/* ================================================
   DEMO PANEL — the work order
   ================================================ */
.demo-panel {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px 20px 14px;
    box-shadow: var(--shadow);
    overflow-anchor: none;
}

.demo-label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-low);
    margin-bottom: 8px;
}

.demo-brief { padding: 4px 2px 2px; }

/* Fixed line reserve so the panel never changes height
   between scenarios (which used to nudge the page) */
.brief-text {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.45;
    color: var(--text-hi);
    min-height: 4.4em;
}

.brief-caret {
    color: var(--accent);
    font-weight: 400;
    animation: caretBlink 0.85s step-end infinite;
}

@keyframes caretBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.brief-from {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-low);
}

/* Brief → Build → Shipped */
.demo-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 2px;
}

.dstep {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-low);
    transition: color var(--transition-smooth);
}

.dstep i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--text-low);
    transition: all var(--transition-smooth);
}

.dstep.on { color: var(--accent); }
.dstep.on i {
    background: var(--accent);
    border-color: var(--accent);
}

.dstep-line {
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* The little tool window */
.tool-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 8px 12px;
}

.tool-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
}

.tool-name {
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.06em;
}

.tool-rows {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-top: none;
    padding: 12px;
    height: 158px;          /* fixed: the panel can never resize the page */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tool-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-mid);
    opacity: 0;
    transform: translateY(8px);
    animation: rowIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes rowIn {
    to { opacity: 1; transform: translateY(0); }
}

.tool-row .row-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tool-row .row-check svg {
    width: 9px;
    height: 9px;
    stroke: var(--accent);
    stroke-width: 3;
    fill: none;
}

/* Result readout — the window's bottom strip */
.tool-result {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-height: 50px;
    padding: 11px 14px;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-top: 1px dashed var(--line-strong);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.result-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-low);
}

.result-value {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.result-value.stamped {
    opacity: 1;
    transform: translateY(0);
}

/* The old time gets crossed out before your eyes… */
.result-before {
    position: relative;
    font-size: 0.84rem;
    color: var(--text-low);
}

.result-before::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 52%;
    height: 1.5px;
    background: var(--text-low);
    transform: scaleX(0);
    transform-origin: left;
}

.result-value.stamped .result-before::after {
    animation: strikeDraw 0.3s ease 0.15s forwards;
}

@keyframes strikeDraw {
    to { transform: scaleX(1); }
}

.result-arrow {
    font-size: 0.84rem;
    color: var(--text-low);
    opacity: 0;
}

.result-value.stamped .result-arrow {
    animation: arrowIn 0.25s ease 0.32s forwards;
}

@keyframes arrowIn {
    to { opacity: 1; }
}

/* …and the new time lands big, bright and glowing */
.result-after {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--accent-bright);
    display: inline-block;
}

.result-value.stamped .result-after {
    animation:
        afterPop 0.55s cubic-bezier(0.18, 1.6, 0.4, 1) 0.42s backwards,
        afterGlow 1.2s ease-out 0.42s;
}

@keyframes afterPop {
    0% { transform: scale(0.55); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes afterGlow {
    0% { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 75%, transparent); }
    100% { text-shadow: 0 0 0 transparent; }
}

.demo-caption {
    margin-top: 12px;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-low);
}

/* ================================================
   WHY CUSTOM & AFFORDABILITY — quiet icon columns
   ================================================ */
.why-section,
.pricing-section { padding: var(--section-pad) 0; }

.item-icon {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--accent);
    margin-bottom: 12px;
}

.item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.why-section .section-title { margin-bottom: 56px; }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.why-item {
    border-top: 1px solid var(--line-strong);
    padding-top: 22px;
}

.why-item h3 {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: -0.014em;
    margin-bottom: 8px;
}

.why-item p {
    font-size: 0.94rem;
    color: var(--text-mid);
    line-height: 1.65;
}

/* ================================================
   WHAT WE BUILD — the brief ledger
   ================================================ */
.build-section { padding: var(--section-pad) 0; }

.brief-list {
    max-width: 960px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}

.brief-row {
    position: relative;
    display: grid;
    grid-template-columns: 170px 1fr;
    column-gap: 40px;
    padding: 28px 10px 28px 22px;
    border-bottom: 1px solid var(--line);
    outline: none;
    transition: border-color 0.5s ease;
}

/* An accent bar grows down the row's edge on hover */
.brief-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.brief-row:hover::before,
.brief-row:focus-within::before { transform: scaleY(1); }

.brief-head {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 5px;
}

.brief-no {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    color: var(--text-low);
}

.brief-cat {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-low);
    transition: color 0.3s ease;
}

.brief-row:hover .brief-cat,
.brief-row:focus-within .brief-cat { color: var(--accent); }

.brief-quote {
    grid-column: 2;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.4;
    color: var(--text-hi);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.brief-row:hover .brief-quote,
.brief-row:focus-within .brief-quote { transform: translateX(10px); }

/* The fix unfolds beneath the quote */
.brief-fix-wrap {
    grid-column: 2;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.brief-row:hover .brief-fix-wrap,
.brief-row:focus-within .brief-fix-wrap { grid-template-rows: 1fr; }

.brief-fix {
    overflow: hidden;
    padding-top: 12px;
    font-size: 0.92rem;
    color: var(--text-mid);
    line-height: 1.65;
    max-width: 560px;
}

.brief-arrow {
    color: var(--accent);
    font-weight: 600;
    margin-right: 8px;
}

/* No hover on touch — show the fixes outright */
@media (hover: none) {
    .brief-fix-wrap { grid-template-rows: 1fr; }
    .brief-row::before { transform: scaleY(1); opacity: 0.45; }
}

.build-more {
    text-align: center;
    margin-top: 36px;
}

.build-more a {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-mid);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.build-more a:hover { color: var(--accent-bright); }

/* ================================================
   PROCESS — hairline list
   ================================================ */
.process-section { padding: var(--section-pad) 0; }

.process-list {
    max-width: 720px;
    margin: 0 auto;
}

.process-step {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 26px;
    padding: 30px 0;
    border-top: 1px solid var(--line);
}

.process-step:last-child { border-bottom: 1px solid var(--line); }

.step-num {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-low);
    padding-top: 4px;
}

.step-content h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.014em;
    margin-bottom: 6px;
}

.step-content p {
    color: var(--text-mid);
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 520px;
}

/* ================================================
   FAQ
   ================================================ */
.faq-section { padding: var(--section-pad) 0; }

.faq-section .section-title { margin-bottom: 48px; }

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px 4px;
    text-align: left;
    color: var(--text-hi);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color var(--transition-fast);
}

.faq-q:hover { color: var(--accent-bright); }

.faq-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: var(--text-low);
    transition: transform var(--transition-smooth), color var(--transition-fast);
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    color: var(--accent);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-smooth);
}

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner { overflow: hidden; }

.faq-a-inner p {
    padding: 0 4px 22px;
    color: color-mix(in srgb, var(--text-hi) 30%, var(--text-mid));
    font-size: 1rem;
    line-height: 1.8;
    max-width: 640px;
}

/* ================================================
   CONTACT
   ================================================ */
.contact-section { padding: var(--section-pad) 0 calc(var(--section-pad) + 8px); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(44px, 6vw, 80px);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}

.contact-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.16;
    margin-bottom: 14px;
    text-wrap: balance;
}

.contact-lede {
    font-size: 1rem;
    color: var(--text-mid);
    margin-bottom: 28px;
    line-height: 1.7;
}

.contact-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.contact-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-benefits svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.contact-benefits span { color: var(--text-mid); font-size: 0.95rem; }

.contact-form-wrapper,
.contact-cal-wrapper {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(20px, 3vw, 30px);
    box-shadow: var(--shadow);
}

.cal-embed {
    position: relative;
    width: 100%;
    min-height: 420px;   /* floor for the loading state; Cal sizes itself after */
    border-radius: 12px;
}

.cal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: var(--text-mid);
    font-size: 0.95rem;
    padding: 24px;
}

.cal-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--line-strong);
    border-top-color: var(--accent);
    animation: calSpin 0.8s linear infinite;
}

.cal-loading a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}

.cal-loading a:hover { text-decoration: underline; }

@keyframes calSpin { to { transform: rotate(360deg); } }

/* If the embed times out, drop the spinner and foreground
   the direct booking link so the section still converts */
.cal-loading.cal-failed .cal-spinner { display: none; }

.cal-loading.cal-failed::before {
    content: "Open the booking calendar:";
    color: var(--text-hi);
    font-weight: 600;
    font-size: 1.02rem;
}

.cal-loading.cal-failed a {
    padding: 11px 20px;
    border: 1px solid var(--accent);
    border-radius: 9px;
    font-size: 0.95rem;
}

.cal-loading.cal-failed > span:not(.cal-spinner) { display: none; }

.contact-cal-wrapper .form-note {
    margin-top: 16px;
    text-align: center;
}

.contact-cal-wrapper .form-note a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.contact-cal-wrapper .form-note a:hover { text-decoration: underline; }

.contact-cal-wrapper .form-note a.copied {
    color: #2ea66b;
    text-decoration: none;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-mid);
}

.form-group .optional { color: var(--text-low); font-size: 0.76rem; font-weight: 400; }

.form-group input,
.form-group textarea {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 15px;
    font-size: 0.96rem;
    color: var(--text-hi);
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-low); }

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Honeypot — invisible to humans, irresistible to bots */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 11px;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.submit-btn svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.submit-btn:hover {
    background: var(--accent-bright);
    transform: translateY(-2px);
}

.submit-btn:hover svg { transform: translateX(3px); }

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-low);
}

.form-message {
    padding: 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    display: none;
}

.form-message.success {
    display: block;
    background: var(--bg-2);
    color: var(--accent-bright);
    border: 1px solid var(--line-strong);
}

.form-message.error {
    display: block;
    background: var(--bg-2);
    color: #f08c8c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ================================================
   FOOTER
   ================================================ */
.footer {
    padding: 64px 0 32px;
    /* floats freely — no top divider or fade band */
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 56px;
    margin-bottom: 52px;
}

.footer-brand { max-width: 300px; }

.footer-brand .logo { margin-bottom: 14px; }

.footer-brand p {
    color: var(--text-mid);
    font-size: 0.93rem;
    line-height: 1.7;
}

.footer-links { display: flex; gap: 70px; }

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: 5px;
}

.footer-col a {
    font-size: 0.92rem;
    color: var(--text-mid);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-col a:hover { color: var(--accent-bright); }

.footer-bottom {
    text-align: center;
    padding-top: 30px;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--text-low);
}

/* ================================================
   EXAMPLES PANEL
   ================================================ */
.folio-header {
    padding: calc(var(--nav-h) + clamp(48px, 8vh, 84px)) 0 clamp(30px, 4vw, 48px);
}

.folio-title:focus,
.folio-title:focus-visible { outline: none; }

.folio-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.06;
    margin-bottom: 18px;
}

.folio-lede {
    font-size: 1.02rem;
    color: var(--text-mid);
    line-height: 1.7;
    max-width: 520px;
}


.folio-section { padding: 0 0 var(--section-pad); }

.folio-section > .container { max-width: 1480px; }

.folio-split {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    padding-top: calc(var(--nav-h) + clamp(28px, 5vh, 56px));
    padding-bottom: clamp(28px, 5vh, 56px);
}

.folio-intro {
    position: relative;
    flex: 0 1 clamp(300px, 30%, 420px);
    margin-left: clamp(8px, 1.5vw, 40px);
}

/* a soft pool of light anchors the text side */
.folio-intro::before {
    content: "";
    position: absolute;
    left: -130px;
    top: 50%;
    transform: translateY(-50%);
    width: 540px;
    height: 540px;
    background: radial-gradient(closest-side, var(--accent), transparent 70%);
    opacity: 0.07;
    filter: blur(42px);
    pointer-events: none;
}

.folio-intro .folio-title { font-size: clamp(2.6rem, 3.6vw, 4.6rem); }

.folio-intro .folio-lede {
    margin-top: 20px;
    font-size: 1.22rem;
    max-width: 460px;
}


.folio-cue {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 34px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-mid);
    transition: color var(--transition-fast);
}

.folio-cue:hover { color: var(--text-hi); }

.cue-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    animation: cueBob 2.3s ease-in-out infinite, cuePulse 2.4s ease-in-out infinite;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

/* an expanding ring ripples outward, like a gentle "tap here" */
.cue-ring::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
    animation: cueRipple 2.4s ease-out infinite;
    pointer-events: none;
}

.folio-cue:hover .cue-ring {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    transform: scale(1.08);
}

.folio-cue:hover { color: var(--accent); }

.cue-ring svg { width: 17px; height: 17px; }

@keyframes cuePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent); }
    50% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--accent) 34%, transparent); }
}

@keyframes cueRipple {
    0% { opacity: 0.55; transform: scale(0.85); }
    70% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.5); }
}

@keyframes cueBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

html.perf-static .cue-ring { animation: none; }
html.perf-static .cue-ring::after { display: none; }
html.perf-static .folio-intro::before { display: none; }

@media (max-width: 900px) {
    .folio-intro::before { display: none; }
}

.folio-cta {
    position: relative;
    /* land lower in the viewport so the cue scrolls noticeably less far
       (about a quarter less travel) instead of pinning to the very top */
    scroll-margin-top: calc(var(--nav-h) + 20px + 22vh);
}

/* Arrival spotlight: a soft accent bloom behind the block
   and an underline that sweeps out from the centre of the
   heading, then both breathe back out */
.folio-cta::before {
    content: "";
    position: absolute;
    inset: -48px -70px;
    background: radial-gradient(closest-side, var(--accent), transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

.folio-cta.spotlight::before { opacity: 0.16; }

.folio-cta h2 {
    position: relative;
    display: inline-block;
    font-size: clamp(2rem, 3.4vw, 2.9rem);
}

.folio-cta > p {
    font-size: 1.16rem;
    line-height: 1.65;
}

.folio-cta h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    height: 3px;
    width: 0;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, opacity 0.4s ease;
}

.folio-cta.spotlight h2::after {
    width: 100%;
    opacity: 1;
}

html.perf-static .folio-cta::before { display: none; }

.folio-wall {
    --cgap: clamp(10px, 1.2vw, 16px);
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--cgap);
    /* the wall keeps a constant ~40px gutter from the right edge at
       EVERY width, one continuous formula with no breakpoint cliff.
       Written with clamp() rather than min() because clamp() has the
       broadest, most stable engine support (Firefox dev builds choked
       on the mixed-unit min()). Same result: the value is (752px-50vw),
       capped at +12px below the 1480 container and floored far out. */
    margin-right: clamp(-1200px, 752px - 50vw, 12px);
}

/* Two tall conveyors of pure mockups: the left column
   sinks, the right column rises, both fading out softly
   at the top and bottom edges and looping forever */
.folio-col {
    flex: 0 1 clamp(188px, 16.5vw, 300px);
    min-width: 0;
    overflow: hidden;
    height: min(82vh, 900px);
    --col-fade: clamp(56px, 9vh, 110px);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent,
        rgb(0 0 0 / 0.12) calc(var(--col-fade) * 0.4),
        rgb(0 0 0 / 0.45) calc(var(--col-fade) * 0.75),
        #000 var(--col-fade),
        #000 calc(100% - var(--col-fade)),
        rgb(0 0 0 / 0.45) calc(100% - var(--col-fade) * 0.75),
        rgb(0 0 0 / 0.12) calc(100% - var(--col-fade) * 0.4),
        transparent);
    mask-image: linear-gradient(to bottom,
        transparent,
        rgb(0 0 0 / 0.12) calc(var(--col-fade) * 0.4),
        rgb(0 0 0 / 0.45) calc(var(--col-fade) * 0.75),
        #000 var(--col-fade),
        #000 calc(100% - var(--col-fade)),
        rgb(0 0 0 / 0.45) calc(100% - var(--col-fade) * 0.75),
        rgb(0 0 0 / 0.12) calc(100% - var(--col-fade) * 0.4),
        transparent);
}

.folio-col-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* default shift is overwritten by JS with an exact per-column
       percentage; the fallback keeps motion sane if JS is delayed */
    --shift: -50%;
    animation: colDriftDown 95s linear infinite;
    /* Keep cards razor-sharp while the track moves: a clean GPU
       layer plus crisp text rendering avoids the sub-pixel blur
       that animated transforms can introduce. */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
}

.folio-col.col-up .folio-col-track {
    animation-name: colDriftUp;
    animation-duration: 105s;
}

.folio-col:nth-child(3) .folio-col-track { animation-duration: 88s; }

.folio-col:focus-within .folio-col-track { animation-play-state: paused; }

.folio-set {
    display: flex;
    flex-direction: column;
}

.folio-col .folio {
    margin-bottom: var(--cgap);
    /* keep cards razor-sharp while the column scrolls */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* render text crisply inside the moving column */
    text-rendering: optimizeLegibility;
    transform: translateZ(0);
}

/* Wall density: every mock's internals scale down and
   the chunky parts slim, so 4-5 tools fit per column.
   Scoped to .folio: the home demo panel is untouched. */
.folio .shot-body {
    zoom: 0.93;
    gap: 6px;
    padding: 9px;
}

.folio .shot-bar { padding: 7px 11px; }
.folio .mk-stat { padding: 7px 9px; }
.folio .mk-list-row { padding: 6px 9px; }
.folio .mk-drop { padding: 7px; }
.folio .mk-footer { gap: 8px; }

@keyframes colDriftDown {
    from { transform: translateY(var(--shift, -50%)); }
    to   { transform: translateY(0); }
}

@keyframes colDriftUp {
    from { transform: translateY(0); }
    to   { transform: translateY(var(--shift, -50%)); }
}

html.perf-static .folio-col-track { animation: none; }
html.perf-static .folio-set.clone { display: none; }

html.perf-static .folio-col {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
    .folio-col-track { animation: none; }
    .cue-ring { animation: none; }
    .cue-ring::after { display: none; }
    .folio-set.clone { display: none; }

    .folio-col {
        height: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* No zoom steps: the column width, headline and gaps all scale
   continuously with the viewport (clamp + vw above), so every
   screen width in between renders proportionally — no dead zones. */

/* (Wide-screen balancing is now handled by the single continuous
   wall formula above — no separate breakpoint needed.) */

/* Calendar size by screen: it has fixed internal dimensions, so we
   scale the whole embed down on smaller machines (a 13" laptop was
   showing the entire month at full size). */
/* Laptops & small desktops: shrink the portrait calendar hard so
   it sits as a small, tidy block (a 13" laptop was showing the whole
   month at full size). zoom scales the embed AND its footprint. */
@media (max-width: 1499px) {
    .contact-cal-wrapper { max-width: 630px; margin: 8px auto 0; }
    .cal-embed { zoom: 0.94; min-height: 0; }
}

@media (max-width: 1100px) {
    .contact-cal-wrapper { margin-top: 4px; }
    .cal-embed { zoom: 0.84; }
}

@media (max-width: 1120px) {
    .folio-col:nth-child(3) { display: none; }
}

/* Tablet band (two columns visible): keep cards wide enough that the
   mockup text and chips don't get squeezed or overflow. */
@media (min-width: 901px) and (max-width: 1120px) {
    .folio-col { flex: 0 1 clamp(240px, 34vw, 320px); }
    .folio .shot-body { zoom: 0.9; }
}

@media (max-width: 900px) {
    .folio-split {
        display: block;
        padding-top: calc(var(--nav-h) + clamp(32px, 7vh, 56px));
    }

    .folio-intro {
        flex: none;
        margin-left: 0;
        margin-bottom: clamp(24px, 6vw, 40px);
    }

    /* ---- Phone: TWO horizontal rows that auto-scroll in opposite
       directions. Cards are sized so the second row peeks below the
       first, hinting there's more to see. ---- */
    .folio-wall {
        display: flex;
        flex-direction: column;
        gap: clamp(20px, 5vw, 30px);   /* breathing room between the two rows */
        margin-right: 0;
        /* a touch of negative bleed left/right so cards run to the edges */
        margin-left: -18px;
        width: calc(100% + 36px);
        overflow: hidden;
    }

    /* show only the first two columns as the two rows; hide the third */
    .folio-col:nth-child(3) { display: none; }

    /* each column becomes a horizontal row. Clip only horizontally
       (via the side fade mask); never clip vertically, or tall cards
       get their tops/bottoms cut off. */
    .folio-col {
        height: auto;
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
        padding: 4px 0;            /* small vertical breathing room */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
                mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }

    /* the track lays its sets out in a horizontal line and slides sideways */
    .folio-col-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;   /* cards keep natural height, no clipping */
        width: max-content;
        height: auto;
        animation: folioRowLeft 46s linear infinite;
    }
    .folio-col.col-up .folio-col-track {
        animation: folioRowRight 52s linear infinite;
    }

    /* each set is a horizontal strip of its 4 cards */
    .folio-set {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;   /* natural card heights */
        gap: clamp(10px, 2.6vw, 14px);
        padding-right: clamp(10px, 2.6vw, 14px);   /* gap before next set */
        height: auto;
    }

    /* card sizing: small enough that the next row peeks underneath.
       ~62vw wide shows ~1.5 cards across and keeps them short. */
    .folio-col .folio {
        flex: 0 0 auto;
        width: clamp(190px, 62vw, 280px);
        margin-bottom: 0;
        height: auto;
        transform: none;           /* avoid a clip context with the mask */
    }

    .folio .shot-body { zoom: 1; }
    .folio-meta { padding: 0 1px; }

    /* pause a row if the user is interacting with it */
    .folio-col:focus-within .folio-col-track { animation-play-state: paused; }
}

/* horizontal conveyor keyframes (mobile rows). The JS clones each set,
   so shifting by one set width loops seamlessly; we shift by 50% of the
   track which lands on a set boundary because sets are equal width. */
@keyframes folioRowLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes folioRowRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .folio-col-track { animation: none !important; }
}
html.perf-static .folio-col-track { animation: none !important; }

/* Very narrow phones: keep both rows but slightly smaller cards */
@media (max-width: 460px) {
    .folio-col .folio { width: clamp(170px, 66vw, 240px); }
}


.folio {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.folio-meta { padding: 0 2px; }

.folio-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-low);
    margin-bottom: 7px;
}

.folio-meta h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.014em;
    margin-bottom: 5px;
}

.folio-meta > p:not(.folio-tag) {
    font-size: 0.86rem;
    color: var(--text-mid);
    line-height: 1.6;
}

.folio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.folio-chips span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    color: var(--text-mid);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    padding: 3px 9px;
}

.folio-cta {
    text-align: center;
    margin-top: clamp(64px, 8vw, 96px);
    padding-top: clamp(48px, 6vw, 72px);
    border-top: 1px solid var(--line);
}

.folio-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.018em;
    margin-bottom: 10px;
}

.folio-cta p {
    color: var(--text-mid);
    max-width: 440px;
    margin: 0 auto 26px;
}

/* ------------------------------------------------
   Mockup window + shared primitives (compact)
   ------------------------------------------------ */
.shot {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: border-color var(--transition-smooth), transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.folio:hover .shot {
    border-color: var(--line-strong);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.shot-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}

.shot-bar .sd {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-strong);
}

.shot-name {
    margin-left: 7px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text-mid);
    letter-spacing: 0.06em;
}

.shot-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 96px;
}

.mk-grid2 {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 10px;
}

.mk-panel {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 10px;
    min-width: 0;
}

.mk-doc { display: flex; flex-direction: column; gap: 9px; }

.mk-doc-head {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-low);
    letter-spacing: 0.04em;
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-line {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--bg-3);
}

.mk-line-hl { outline: 1px solid var(--line-strong); }

.w-30 { width: 30%; } .w-45 { width: 45%; }
.w-60 { width: 60%; } .w-70 { width: 70%; }

/* Stacked label-over-value pair */
.mk-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    min-width: 0;
}

.mk-kv:not(:last-child) { border-bottom: 1px dashed var(--line); }

.mk-kv .mk-v {
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline label/value row */
.mk-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--line);
    min-width: 0;
}

.mk-field:last-of-type { border-bottom: none; }

.mk-k {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-low);
}

.mk-v {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--text-hi);
}

.mk-field .mk-chip,
.mk-field .mk-btn { margin-left: auto; }
.mk-v-strong { font-weight: 600; color: var(--accent-bright); }

.mk-tick {
    display: inline-block;
    vertical-align: -2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-3);
    position: relative;
}

.mk-tick::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2.5px;
    width: 3.5px;
    height: 6.5px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(40deg);
}

.mk-tr {
    display: grid;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    font-size: 0.74rem;
    color: var(--text-mid);
}

.mk-tr .mk-v {
    margin-left: 0;
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-tr-head {
    background: none;
    border: none;
    padding-top: 0;
    padding-bottom: 1px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-low);
}

.mk-quote-cols { grid-template-columns: 1fr auto; }
.mk-stock-cols { grid-template-columns: 1.15fr 0.9fr auto; }

.mk-level {
    height: 5px;
    background: var(--bg-0);
    border-radius: 4px;
    overflow: hidden;
}

.mk-level i {
    display: block;
    height: 100%;
    background: var(--text-low);
    border-radius: 4px;
}

.mk-level i.low { background: var(--text-low); }

.mk-totals {
    width: 100%;
    padding-top: 2px;
}

.mk-totals-grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--line-strong);
    padding-top: 7px;
}

.mk-chip {
    justify-self: start;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mid);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}

.mk-btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 7px;
    background: var(--accent);
    color: var(--accent-ink);
    white-space: nowrap;
}

.mk-btn.ghost {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-mid);
    font-weight: 500;
}

.mk-btn.sm { font-size: 0.6rem; padding: 5px 9px; }

.mk-input {
    display: flex;
    align-items: center;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px 10px;
    color: var(--text-low);
    font-size: 0.72rem;
}

.mk-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
}

.mk-note {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-low);
    letter-spacing: 0.05em;
}

.mk-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mk-stat {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mk-stat-v {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-hi);
}

.mk-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 56px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 8px;
}

.mk-bars i {
    flex: 1;
    background: var(--bg-3);
    border-radius: 3px 3px 0 0;
}

.mk-bars i.hl { background: var(--accent); }

.mk-list { display: flex; flex-direction: column; gap: 6px; }

.mk-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.7rem;
}

.mk-list-row .mk-v {
    margin-left: 0;
    margin-right: auto;
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-list-row .mk-k { text-transform: none; letter-spacing: 0.02em; white-space: nowrap; }

.mk-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-low);
}

.mk-dot.ok { background: var(--accent); }

.mk-week-head {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-low);
    text-align: center;
}

.mk-week {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    height: 84px;
}

.mk-day {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mk-day .bk {
    display: block;
    border-radius: 3px;
    background: var(--bg-3);
    border: 1px solid var(--line-strong);
}

.mk-greet { font-size: 0.8rem; color: var(--text-mid); }

.mk-progress {
    height: 5px;
    background: var(--bg-2);
    border-radius: 4px;
    overflow: hidden;
}

.mk-progress i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
}

.mk-drop {
    margin-top: auto;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    color: var(--text-low);
    font-size: 0.7rem;
}

/* GPS map — street grid, a flowing route, two pins */
.mk-map {
    position: relative;
    height: 116px;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
    background-color: var(--bg-2);
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 26px 26px;
}

.mk-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mk-route {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 7;
    opacity: 0.9;
}

.mk-pin {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.mk-pin.a { left: 6%; bottom: 14%; background: var(--text-low); }
.mk-pin.b { right: 6%; top: 13%; background: var(--accent); }

/* Scraper — a page skeleton with a scanning beam */
.mk-webpage {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: center;
}

.mk-scan {
    position: absolute;
    left: 6px;
    right: 6px;
    top: -40%;
    height: 36%;
    border-radius: 6px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
    opacity: 0;
    pointer-events: none;
}

/* Price chart — sparkline with a live point */
.mk-chart {
    height: 82px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-2);
    padding: 8px;
}

.mk-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mk-spark {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.mk-spark-dot { fill: var(--accent-bright); }

/* Lit by the passing orb */
.lit { border-color: color-mix(in srgb, var(--accent) 32%, transparent); }

.contact-form-wrapper.lit {
    box-shadow: var(--shadow), 0 0 36px -10px color-mix(in srgb, var(--accent) 30%, transparent);
}

.why-item,
.process-step,
.faq-item,
.contact-form-wrapper {
    transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

/* ================================================
   LIVE MOCKUPS — when the examples orb passes, the
   concept tools wake up and pretend to work. The orb
   moves on, they fall still again.
   ================================================ */
.folio.live .shot {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    box-shadow: var(--shadow), 0 0 34px -10px color-mix(in srgb, var(--accent) 26%, transparent);
}

@keyframes mkPulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}

@keyframes mkBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@keyframes mkScan {
    0%, 100% { outline-color: var(--line-strong); }
    50% { outline-color: color-mix(in srgb, var(--accent) 70%, transparent); }
}

@keyframes mkTick {
    0%, 58%, 100% { transform: rotate(40deg) scale(1); }
    68% { transform: rotate(40deg) scale(1.5); }
}

@keyframes mkBar {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(var(--amp, 0.78)); }
}

@keyframes mkRowGlow {
    0%, 86%, 100% { border-color: var(--line); }
    8%, 16% { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
}

@keyframes mkShrink {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.86); }
}

@keyframes mkGrow {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.07); }
}

@keyframes mkBkPulse {
    0%, 100% { border-color: var(--line-strong); }
    50% { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
}

@keyframes mkFlow {
    to { stroke-dashoffset: -12; }
}

@keyframes mkPing {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
    75%, 100% { box-shadow: 0 0 0 11px transparent; }
}

@keyframes mkScanY {
    0% { top: -40%; opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 108%; opacity: 0; }
}

@keyframes mkSparkDraw {
    0% { stroke-dashoffset: 360; opacity: 0.35; }
    12% { opacity: 1; }
    60%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes mkDotPing {
    0%, 52% { transform: scale(0); opacity: 0; }
    64% { transform: scale(1.7); opacity: 1; }
    74%, 100% { transform: scale(1); opacity: 1; }
}

/* Invoice Reader — the document gets read, the total ticks off */
.folio.live .mk-line-hl { animation: mkScan 2.4s ease-in-out infinite; }
.folio.live .mk-tick::after { animation: mkTick 3.4s ease-in-out infinite; }
.folio.live .mk-btn { animation: mkPulse 3.4s ease-in-out infinite; }

/* Route Planner — traffic flows the route, destination pings */
.folio.live .mk-route { animation: mkFlow 1.1s linear infinite; }
.folio.live .mk-pin.b { animation: mkPing 2.1s ease-out infinite; }

/* Quote Builder — rows light in turn, the total breathes */
.folio.live .mk-tr { animation: mkRowGlow 4.6s linear infinite; }
.folio.live .mk-tr:nth-of-type(3) { animation-delay: 1.2s; }
.folio.live .mk-tr-head { animation: none; }
.folio.live .mk-v-strong {
    display: inline-block;
    animation: mkPulse 3.4s ease-in-out infinite 0.5s;
}

/* Site Scraper — a beam sweeps the page, values refresh */
.folio.live .mk-scan { animation: mkScanY 2.7s ease-in-out infinite; }
.folio.live .mk-kv .mk-v { animation: mkPulse 2.7s ease-in-out infinite; }
.folio.live .mk-kv:nth-child(2) .mk-v { animation-delay: 0.35s; }
.folio.live .mk-kv:nth-child(3) .mk-v { animation-delay: 0.7s; }

/* Ops Dashboard — the chart trades places with itself */
.folio.live .mk-bars i {
    transform-origin: bottom;
    animation: mkBar 2.6s ease-in-out infinite;
}
.folio.live .mk-bars i:nth-child(1) { --amp: 0.72; }
.folio.live .mk-bars i:nth-child(2) { --amp: 0.84; animation-delay: 0.2s; }
.folio.live .mk-bars i:nth-child(3) { --amp: 0.66; animation-delay: 0.35s; }
.folio.live .mk-bars i:nth-child(4) { --amp: 0.9;  animation-delay: 0.5s; }
.folio.live .mk-bars i:nth-child(5) { --amp: 0.74; animation-delay: 0.15s; }
.folio.live .mk-bars i:nth-child(6) { --amp: 0.88; animation-delay: 0.45s; }
.folio.live .mk-bars i.hl {
    --amp: 0.8;
    animation: mkBar 2.6s ease-in-out infinite 0.3s, mkPulse 2.6s ease-in-out infinite 0.3s;
}
.folio.live .mk-dot { animation: mkBlink 1.8s ease-in-out infinite; }

/* Booking Board — slots flicker with activity */
.folio.live .mk-day .bk { animation: mkBkPulse 3s ease-in-out infinite; }
.folio.live .mk-day:nth-child(2) .bk { animation-delay: 0.3s; }
.folio.live .mk-day:nth-child(3) .bk { animation-delay: 0.6s; }
.folio.live .mk-day:nth-child(4) .bk { animation-delay: 0.9s; }
.folio.live .mk-day:nth-child(5) .bk { animation-delay: 1.2s; }

/* Stock Tracker — levels breathe, the low line nags */
.folio.live .mk-level i {
    transform-origin: left;
    animation: mkShrink 3.2s ease-in-out infinite;
}
.folio.live .mk-level i.low { animation: mkBlink 1.4s ease-in-out infinite; }
.folio.live .mk-stock-cols .mk-btn.sm { animation: mkPulse 1.7s ease-in-out infinite; }

/* Price Watcher — the line redraws, the latest point lands */
.folio.live .mk-spark {
    stroke-dasharray: 360;
    animation: mkSparkDraw 3.6s ease-in-out infinite;
}
.folio.live .mk-spark-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: mkDotPing 3.6s ease-out infinite;
}
.folio.live .mk-chip.alert { animation: mkBkPulse 2s ease-in-out infinite; }

/* Client Portal — progress creeps, the drop zone invites */
.folio.live .mk-progress i {
    transform-origin: left;
    animation: mkGrow 4s ease-in-out infinite;
}
.folio.live .mk-drop { animation: mkBkPulse 3.2s ease-in-out infinite; }

/* ================================================
   REVEAL ANIMATIONS
   ================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(22px);
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-up.delay-1 { animation-delay: 0.1s; }
.fade-up.delay-2 { animation-delay: 0.2s; }
.fade-up.delay-3 { animation-delay: 0.3s; }

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.fade-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal {
    opacity: 0;
    transform: translateX(var(--reveal-x, -38px));
    filter: blur(7px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.in {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1080px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .hero-copy { text-align: center; }
    .hero-subtitle { margin-left: auto; margin-right: auto; }
    .hero-cta { justify-content: center; }

    .demo-panel { max-width: 560px; margin: 0 auto; width: 100%; }

    .why-grid { gap: 28px; }
}

@media (max-width: 900px) {
    .why-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

.nav-scrim { display: none; }

@media (max-width: 768px) {
    .nav-scrim { display: block; }

    .nav-container {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
    }

    /* The menu is a solid drawer sliding in from the right:
       plain tokens only, so it can never render transparent */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(78vw, 320px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: calc(var(--nav-h) + 16px) 26px 26px;
        background: var(--bg-0);
        border-left: 1px solid var(--line);
        box-shadow: -28px 0 70px rgba(0, 0, 0, 0.5);
        transform: translateX(102%);
        visibility: hidden;
        overscroll-behavior: contain;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
        z-index: 9997;
    }

    .nav-links.active {
        transform: translateX(0);
        visibility: visible;
    }

    .nav-links > a:not(.nav-links-cta) {
        font-size: 1.05rem;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
    }

    .nav-links .theme-toggle {
        align-self: flex-start;
        margin-top: 18px;
    }

    .nav-links-cta {
        display: inline-flex;
        justify-content: center;
        margin-top: auto;
        padding: 11px 16px;
        background: var(--accent);
        color: var(--accent-ink) !important;
        border-radius: 9px;
        font-weight: 600;
        font-size: 0.88rem;
    }

    .nav-scrim {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 9996;
    }

    .nav-scrim.active {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-cta { display: none; }
    .mobile-menu-btn { display: flex; }

    .hero { padding-left: 20px; padding-right: 20px; }

    .hero-cta {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-cta .btn-primary,
    .hero-cta .btn-ghost {
        width: auto;
        flex: 0 1 auto;
        padding: 12px 18px;
        font-size: 0.92rem;
        justify-content: center;
    }

    .brief-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding-left: 16px;
    }

    .brief-head {
        grid-row: auto;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding-top: 0;
    }

    .brief-quote,
    .brief-fix-wrap { grid-column: 1; }

    .shot-body { min-height: 0; }

    .process-step {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 26px 0;
    }

    .step-num { padding-top: 0; }

    .footer-content {
        flex-direction: column;
        gap: 40px;
    }

    .footer-links { width: 100%; justify-content: space-between; gap: 28px; }
}

@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .hero { padding-left: 18px; padding-right: 18px; }

    .demo-panel { padding: 16px 14px 12px; }
    .brief-text { min-height: 5.8em; }
    .demo-steps { gap: 7px; }
    .dstep { font-size: 0.58rem; letter-spacing: 0.1em; }
    .tool-result { padding: 10px 12px; gap: 10px; }
    .result-after { font-size: 1.05rem; }

    .mk-grid2 { grid-template-columns: 1fr; }
    .mk-stats { gap: 7px; }
    .mk-stat { padding: 10px 9px; }
    .mk-stat-v { font-size: 1.05rem; }
    .shot-body { min-height: 0; }

    .contact-form-wrapper,
    .contact-cal-wrapper { padding: 16px 12px; }

    .cal-embed { min-height: 440px; }
}

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

    .page { scroll-behavior: auto; }
    body.ready .world { transition: none; }

    .fade-section,
    .fade-up,
    .reveal,
    .slide-reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .result-value { opacity: 1; transform: none; }
    .result-value .result-arrow { opacity: 1; }
    .result-before::after { transform: scaleX(1); }
    .brief-caret { display: none; }
    .ticker-flat .ticker-track { animation: none; }
    .orb-layer { display: none; }
    .btn-shine::after { display: none; }
    .page-veil { display: none; }
}

/* ================================================
   PERFORMANCE TIERS (set by JS from real frame
   timings; remembered between visits)
   lite   — same look, cheaper motion
   static — calm site for machines that struggle
   ================================================ */
html.perf-lite .reveal,
html.perf-lite .slide-reveal {
    filter: none;               /* the blur transition is the costly part */
}

html.perf-static .reveal,
html.perf-static .slide-reveal,
html.perf-static .fade-section,
html.perf-static .fade-up {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

html.perf-static .orb-layer { display: none; }
html.perf-static .page-veil { display: none; }
html.perf-static .btn-shine::after { display: none; }
html.perf-static .brief-caret { animation: none; }
html.perf-static .icon-moon,
html.perf-static .icon-sun { transition: none; }

html.perf-static .folio.live *,
html.perf-static .folio.live *::after {
    animation: none !important;
}

/* Backdrop blur is brutal on weak GPUs: solid bar instead */
html.perf-static .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg-0) 97%, transparent);
}

/* ---- Typewriter effect on the examples headline 'Anything' ---- */
/* "We Build" is the smaller lead line */
.type-lead {
    display: block;
    font-size: 0.80em;          /* smaller than the accent word below */
    letter-spacing: -0.02em;
    line-height: 1.0;
    margin-bottom: 0;           /* hugs 'Anything' directly below */
}

/* "Anything" is larger and dominant, and locked so cycling fonts
   can't nudge the layout. The accent line is a fixed-height block
   and the word sits in a stable inline-block, so swapping fonts
   never shifts "We Build" or jumps the height. */
#type-accent {
    display: block;
    white-space: nowrap;
    font-size: 1.04em;          /* a touch larger than 'We Build', not huge */
    line-height: 1.05;
    min-height: 1.05em;         /* reserve height so it never jumps */
    margin-top: 0;
}

.type-word {
    /* the cycling font is applied inline by JS; this is the resting font */
    display: inline-block;
    font-family: var(--font-display);
    vertical-align: top;
}

.type-caret {
    display: inline-block;
    width: 0.06em;
    min-width: 2px;
    height: 0.92em;
    margin-left: 0.06em;
    background: currentColor;
    vertical-align: -0.08em;
    border-radius: 1px;
    animation: typeCaretBlink 1s steps(1) infinite;
}

@keyframes typeCaretBlink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* When the user prefers reduced motion, no caret blink and the word
   simply stays put (JS also halts the cycle). */
@media (prefers-reduced-motion: reduce) {
    .type-caret { animation: none; opacity: 0; }
}

html.perf-static .type-caret { animation: none; opacity: 0; }

/* Keep the example mockups crisp during conveyor motion (no blur).
   Promote only the card container to its own layer and keep text
   rendering sharp — without touching descendant transforms, so the
   mockup animations (bars, pins, scans) are unaffected. */
.folio .shot {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   CUSTOM PURPLE CURSOR — a small purple send-arrow pointer.
   Hotspot at the tail tip (top-left). Falls back gracefully.
   ============================================================ */
html, body {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KPHBhdGggZD0iTTggNCBMNDQgMjcgTDI1IDI3IEwyMCA0NCBMOCA0IFoiIGZpbGw9IiM3QzVDRkYiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==") 4 2, auto;
}

a, button, .cue-ring, .theme-toggle, [role="button"], label,
.folio-cue, summary {
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KPHBhdGggZD0iTTggNCBMNDQgMjcgTDI1IDI3IEwyMCA0NCBMOCA0IFoiIGZpbGw9IiM3QzVDRkYiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==") 4 2, pointer;
}

input[type="text"], input[type="email"], textarea {
    cursor: text;
}