/* Vasbyt marketing — shared design system */

/* ═══ TOKENS ═══ */
:root {
    color-scheme: light;
    --bg: #fafcff;
    --surface: #ffffff;
    --ink: #0f172a;
    --muted: #526179;
    --faint: #8a9bb5;
    --accent: #2F6FD0;
    --accent-bright: #5A9BF0;
    --accent-soft: #eaf2fe;
    --accent-soft-deep: #e1edfe; /* deeper tint for active icon-tile wash; sits between --accent-soft and a 10% accent tint */
    --line: rgba(15, 23, 42, .08);
    --bezel: #14162a;
    --shadow-sm: 0 4px 14px rgba(47, 111, 208, .08);
    --shadow-md: 0 14px 34px rgba(47, 111, 208, .13);
    --shadow-lg: 0 30px 70px rgba(15, 23, 42, .18);
    --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;
    --content: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; }
body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); overflow-x: clip; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(44px, 6.4vw, 76px); line-height: .98; font-weight: 800; }
h2 { margin: 0; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.04; font-weight: 700; }
h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.2; font-weight: 700; }
p { color: var(--muted); line-height: 1.6; }
section { width: min(var(--content), calc(100% - 40px)); margin: 0 auto; }
.kicker { margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
/* No widows/orphans in the short marketing paragraphs */
.hero-text, .story-lede, .story-outro p, .fp-promise, .fp-sub, .final-cta p { text-wrap: pretty; }

/* ═══ HEADER ═══ */
.site-header {
    position: sticky; top: 10px; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: min(var(--content), calc(100% - 32px));
    margin: 14px auto 0; padding: 10px 14px;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; }
.brand-mark { width: 30px; height: 30px; display: block; }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 600; color: var(--muted); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }
/* Current-page tab (feature pages set aria-current="page") */
.site-nav a[aria-current="page"] { color: var(--accent); position: relative; }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--accent); }
.nav-menu-links a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid transparent; font-weight: 700; font-size: 15px; line-height: 1; white-space: nowrap; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-bright)); color: #fff; box-shadow: 0 12px 28px rgba(47, 111, 208, .32); }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(47, 111, 208, .4); }
.button.secondary { border-color: rgba(15, 23, 42, .14); background: rgba(255, 255, 255, .75); color: var(--ink); }
.button.secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nav-cta { min-height: 38px; padding: 0 18px; font-size: 14px; }

/* ═══ NAV — mobile disclosure ═══ */
/* Desktop: inline tabs visible, toggle + panel hidden */
.nav-toggle { display: none; }
/* Taps land on the inline SVG/rects; keep e.target === the button itself */
.nav-toggle svg { pointer-events: none; }
@media (min-width: 960px) { .nav-menu-panel { display: none; } }
@media (max-width: 959px) {
    .site-nav { display: none; }
    .nav-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; border: 1px solid var(--line);
        border-radius: var(--r-md); background: rgba(255,255,255,.75);
        cursor: pointer; color: var(--ink); flex-shrink: 0;
    }
    .nav-toggle:hover { background: var(--accent-soft); }
    .nav-toggle:focus-visible { outline: 3px solid rgba(47,111,208,.45); outline-offset: 3px; }
    .nav-menu-panel {
        position: fixed; top: 0; left: 0; right: 0;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--line);
        padding: 16px 20px 20px;
        z-index: 200;
        transform: translateY(-110%);
        /* visibility flips after the slide-out so closed links aren't tabbable/painted */
        visibility: hidden;
        transition: transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s;
    }
    html.reduce-motion .nav-menu-panel { transition: none; }
    .nav-menu-panel.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.22,1,.36,1), visibility 0s; }
    .nav-menu-panel .nav-menu-top {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 18px;
    }
    .nav-menu-panel .nav-menu-close {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; padding: 0;
        border: 1px solid var(--line); border-radius: var(--r-md);
        background: transparent; cursor: pointer; color: var(--ink);
    }
    .nav-menu-panel .nav-menu-close:hover { background: var(--accent-soft); }
    .nav-menu-links {
        display: flex; flex-direction: column; gap: 4px;
    }
    .nav-menu-links a {
        display: block; padding: 12px 14px;
        border-radius: var(--r-md); font-size: 16px; font-weight: 600;
        color: var(--ink);
    }
    .nav-menu-links a:hover, .nav-menu-links a:focus-visible {
        background: var(--accent-soft); color: var(--accent);
    }
    .nav-menu-links .button {
        margin-top: 8px; width: 100%; justify-content: center;
    }
}

/* ═══ MOTION: scroll reveal — a longer eased glide so cards arrive fluidly ═══ */
:where(html.js) [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .85s ease, transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--rd, 0s); }
html.js [data-reveal].in { opacity: 1; transform: none; transition: opacity .85s ease, transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--rd, 0s); }
html.reduce-motion [data-reveal], html.reduce-motion [data-reveal].in { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .phone { animation: none; }
    .hero [data-rise] { animation: none; opacity: 1; transform: none; }
    .hero-underline path { animation: none; stroke-dashoffset: 0; }
}

/* Self-drawing SVG strokes: .draw paths animate when an ancestor gains .in. REQUIRES pathLength="1" on each path/circle — without it the dash math breaks. */
html.js .draw path, html.js .draw circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .draw path, .in .draw circle, .draw.in path, .draw.in circle, .chapter.active .draw path, .chapter.active .draw circle { animation: strokeDraw 1.1s ease-out forwards; animation-delay: .15s; }
@keyframes strokeDraw { to { stroke-dashoffset: 0; } }
html.reduce-motion .draw path, html.reduce-motion .draw circle { stroke-dashoffset: 0; animation: none; }

a:focus-visible, .button:focus-visible { outline: 3px solid rgba(47, 111, 208, .45); outline-offset: 3px; }

/* ═══ FLOW PASS — scroll choreography (site.js drives the custom properties).
   Every rule here is inert without JS (vars default to identity, html.js gates)
   and fully disabled under reduced motion, so the static page is untouched. ═══ */

/* Header compresses slightly once the page has been scrolled */
html.js:not(.reduce-motion) .site-header { transition: padding .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
html.vb-scrolled .site-header { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .10); }

/* Refined button press: quick settle on :active */
html.js:not(.reduce-motion) .button:active { transform: translateY(0) scale(.97); transition-duration: .08s; }

/* The thread: a thin accent line that draws down the page with scroll,
   linking hero → stats → story beats → CTA. Behind all content (z -1),
   never interactive, desktop + JS + motion only. */
.flow-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
html.js:not(.reduce-motion) .flow-thread { display: block; }
@media (max-width: 959.98px), (prefers-reduced-motion: reduce) { .flow-thread { display: none !important; } }
.flow-thread path { fill: none; stroke-width: 2.25; stroke-linecap: round; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Node dots pop in as the thread tip reaches each beat numeral */
.flow-thread .thread-dot { fill: var(--accent); opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.flow-thread .thread-dot.on { opacity: .5; transform: scale(1); }

/* ═══ AMBIENT CURRENTS — large ultra-soft gradient blobs drifting behind the
   page (transform-only, 45s+). JS + motion gated: no-JS and reduced-motion
   render the exact static page; mobile keeps them (they are calm). ═══ */
html.js:not(.reduce-motion) body::before,
html.js:not(.reduce-motion) body::after,
html.js:not(.reduce-motion) main::after {
    content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
}
body::before {
    width: 58vmax; height: 58vmax; left: -20vmax; top: -14vmax;
    background: radial-gradient(closest-side, rgba(90, 155, 240, .07), rgba(90, 155, 240, 0) 72%);
    animation: vbBlobA 52s ease-in-out infinite alternate;
}
body::after {
    width: 64vmax; height: 64vmax; right: -26vmax; top: 24vh;
    background: radial-gradient(closest-side, rgba(47, 111, 208, .06), rgba(47, 111, 208, 0) 72%);
    animation: vbBlobB 64s ease-in-out infinite alternate;
}
main::after {
    width: 50vmax; height: 50vmax; left: 26vw; bottom: -28vmax;
    background: radial-gradient(closest-side, rgba(90, 155, 240, .055), rgba(90, 155, 240, 0) 72%);
    animation: vbBlobC 46s ease-in-out infinite alternate;
}
@keyframes vbBlobA {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(9vw, 13vh, 0) scale(1.2); }
    100% { transform: translate3d(-4vw, 24vh, 0) scale(.92); }
}
@keyframes vbBlobB {
    0% { transform: translate3d(0, 0, 0) scale(1.06); }
    50% { transform: translate3d(-10vw, -9vh, 0) scale(.88); }
    100% { transform: translate3d(4vw, 9vh, 0) scale(1.16); }
}
@keyframes vbBlobC {
    0% { transform: translate3d(0, 0, 0) scale(.94); }
    50% { transform: translate3d(7vw, -7vh, 0) scale(1.12); }
    100% { transform: translate3d(-6vw, 3vh, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    body::before, body::after, main::after { display: none !important; }
}

/* ═══ SCROLL-VELOCITY DRIFT — site.js writes --vbdrift (px of scroll lag,
   eased to settle). Media frames drift most, cards a little, body text none.
   Desktop only; identity without JS; fully off under reduced motion. The
   :not([data-reveal]) gate keeps the entrance transition unaffected. ═══ */
@media (min-width: 960px) {
    html.js:not(.reduce-motion) .fp-media .device-frame,
    html.js:not(.reduce-motion) .fp-showcase .device-frame:not([data-reveal]) {
        transform: translate3d(0, calc(var(--vbdrift, 0) * .55px), 0);
    }
    html.js:not(.reduce-motion) .fp-tile:not([data-reveal]) {
        transform: translate3d(0, calc(var(--vbdrift, 0) * .16px), 0);
    }
}
html.reduce-motion .fp-media .device-frame, html.reduce-motion .fp-showcase .device-frame,
html.reduce-motion .fp-tile { transform: none !important; }

/* Seam ramp: the light page eases into the dark CTA card through a soft
   navy/accent pocket instead of a hard cut. Paint-only (zero layout height);
   JS + motion gated so reduced-motion / no-JS render exactly the current page. */
.cta-seam { position: relative; height: 0; pointer-events: none; }
.cta-seam::before {
    content: ""; position: absolute; left: 50%; top: -170px; transform: translateX(-50%);
    width: 100%; height: 880px; z-index: -1; display: none;
    background:
        radial-gradient(58% 46% at 50% 46%, rgba(13, 24, 46, .30), rgba(13, 24, 46, 0) 100%),
        radial-gradient(30% 20% at 50% 22%, rgba(90, 155, 240, .22), rgba(90, 155, 240, 0) 100%);
}
html.js:not(.reduce-motion) .final-cta { box-shadow: 0 34px 90px rgba(13, 24, 46, .35); }
html.js:not(.reduce-motion) .cta-seam::before { display: block; }
@media (prefers-reduced-motion: reduce) { .cta-seam::before { display: none !important; } }

/* ═══ DEVICE FRAME (feature deep-dive pages) ═══ */
.device-frame { aspect-ratio: 390 / 844; border: 9px solid var(--bezel); border-radius: 44px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.device-frame img, .device-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Showcase device: third term caps height so the frame fits a laptop fold (~100vh - header/heading room) */
.fp-showcase .device-frame { width: min(430px, 92%, calc((100vh - 220px) * 390 / 844)); margin: 36px auto 0; }
@media (max-width: 960px) { .fp-showcase .device-frame { width: min(300px, 86%); margin-top: 36px; } }

/* ═══ FINAL CTA — the one dark moment that closes every page ═══ */
.final-cta {
    position: relative; overflow: hidden; text-align: center;
    border-radius: var(--r-lg);
    background: radial-gradient(95% 130% at 50% -30%, #1d3156 0%, var(--ink) 62%);
    padding: 84px 22px;
}
.final-cta .kicker { color: var(--accent-bright); }
.final-cta h2 { color: #fff; }
.final-cta p { max-width: 520px; margin: 18px auto 28px; font-size: 18px; color: #aab4d8; }
.final-cta .watermark { position: absolute; right: -60px; bottom: -80px; width: 380px; opacity: .14; pointer-events: none; }
.final-cta .button.primary { box-shadow: 0 14px 36px rgba(90, 155, 240, .45), 0 0 0 1px rgba(90, 155, 240, .28); }
.final-cta .button.primary:hover { box-shadow: 0 18px 44px rgba(90, 155, 240, .55), 0 0 0 1px rgba(90, 155, 240, .34); }
.final-cta a:focus-visible, .final-cta .button:focus-visible { outline-color: rgba(154, 191, 245, .85); }

/* ═══ FOOTER ═══ */
.site-footer { border-top: 1px solid var(--line); padding: 30px 0 38px; }
.footer-inner { width: min(var(--content), calc(100% - 40px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.site-footer .brand { gap: 8px; font-size: 13px; }
.site-footer .brand-mark { width: 22px; height: 22px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--ink); }
.footer-copy { font-size: 13px; color: var(--faint); }
@media (max-width: 680px) { .footer-inner { flex-direction: column; align-items: flex-start; } }

.icon-tile { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.icon-tile svg { width: 32px; height: 32px; }
.icon-tile svg path, .icon-tile svg circle { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }