/* ==========================================================================
   THENN·OS — Startseite Redesign · v4 Platform-Craft
   Vanilla, no build step. Deep Forest theme. Progressive enhancement throughout:
   every modern feature is @supports-gated with a clean fallback, and the whole
   page is fully functional + calm under prefers-reduced-motion.

   Reading order for a dev opening devtools:
     1. Tokens (hex/rgba fallback first, OKLCH override second)
     2. Reset, type, layout primitives, components (top → bottom of page)
     3. Scroll-reveal (IO baseline)  4. Responsive  5. Progressive enhancement
        (scroll-driven anims, container queries, subgrid, :has, view transitions)
     6. Reduced-motion reset (the only place !important lives — on purpose)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens · Layer 1 — Deep Forest fallback (hex/rgba, universal support)
   These are the exact values reused 1:1 from the live styles.css :root.
   Layer 2 (OKLCH) overrides these where supported — see the @supports block
   directly below. Fallback-first means old engines simply keep these.
   -------------------------------------------------------------------------- */
:root {
    --color-bg-deep: #050D0C;
    --color-bg: #0B1A18;
    --color-bg-elevated: #0F2220;
    --color-surface: #1C302D;
    --color-surface-hover: #243D39;

    --color-primary: #E09536;
    --color-primary-glow: rgba(224, 149, 54, 0.4);
    --color-secondary: #CBE075;
    --color-secondary-glow: rgba(203, 224, 117, 0.3);

    --color-text: #FFFFFF;
    --color-text-secondary: #B8C2C0;
    --color-text-muted: #8FA09D; /* WCAG AA ~5.8:1 on --color-bg */
    --color-focus-ring: #CBE075;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);
    --color-danger: #E8806B; /* problem-section accent, AA on dark */

    /* Derived accents — fallback layer uses the existing hand-tuned rgba.
       Layer 2 re-derives these perceptually via color-mix(in oklch). */
    --color-primary-border: rgba(224, 149, 54, 0.4);
    --color-primary-ring: rgba(224, 149, 54, 0.25);
    --color-primary-tint: rgba(224, 149, 54, 0.07);
    --color-danger-border: rgba(232, 128, 107, 0.4);
    --color-danger-ring: rgba(232, 128, 107, 0.3);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Tech display face — brand headline type for the whole page (A2-tech swap) */
    --font-display: 'Space Grotesk', var(--font-sans);
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Per-role accent hues (hero stage glow/chip/ring/tabs + role tabs) */
    --role-manager: #E09536;
    --role-trainer: #CBE075;
    --role-spieler: #6FB6FF;
    --role-eltern:  #C89BFF;

    --section-padding: clamp(4rem, 10vw, 8rem);
    --container-max: 1280px;
    --container-narrow: 820px;

    /* Easing tokens (A6) — one consistent spring vocabulary, no ad-hoc beziers.
       --ease-spring carries a gentle overshoot for entrance/reveal motion;
       --ease-out-expo is the calm utility curve for hovers and toggles. */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 600ms;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    --header-h: 80px;
}

/* --------------------------------------------------------------------------
   Design Tokens · Layer 2 — OKLCH base + color-mix derivations (A4)
   Perceptually uniform brand hues; hover/border/glow are *derived* from the
   base hue via color-mix(in oklch, …) instead of separate hand-picked rgba.
   Gated on color-mix so engines without it keep Layer 1 untouched.
   -------------------------------------------------------------------------- */
@supports (color: color-mix(in oklch, white, black)) {
    :root {
        /* Deep Forest surfaces in OKLCH (L C H) — matched to the hex fallback */
        --color-bg-deep: oklch(0.16 0.012 168);
        --color-bg: oklch(0.21 0.018 169);
        --color-bg-elevated: oklch(0.25 0.020 168);
        --color-surface: oklch(0.33 0.022 167);
        --color-surface-hover: oklch(0.39 0.024 167);

        /* Brand hues */
        --color-primary: oklch(0.72 0.143 67);     /* warm amber */
        --color-secondary: oklch(0.87 0.123 117);  /* lime */
        --color-danger: oklch(0.69 0.115 33);       /* clay */
        --color-text: oklch(1 0 0);
        --color-text-secondary: oklch(0.80 0.011 180);
        --color-text-muted: oklch(0.68 0.014 178);
        --color-focus-ring: var(--color-secondary);

        /* Glows + derived accents, all mixed in oklch from the base hue.
           Transparency comes from mixing toward `transparent`. */
        --color-primary-glow: color-mix(in oklch, var(--color-primary) 40%, transparent);
        --color-secondary-glow: color-mix(in oklch, var(--color-secondary) 30%, transparent);
        --color-primary-border: color-mix(in oklch, var(--color-primary) 40%, transparent);
        --color-primary-ring: color-mix(in oklch, var(--color-primary) 25%, transparent);
        --color-primary-tint: color-mix(in oklch, var(--color-primary) 8%, transparent);
        --color-danger-border: color-mix(in oklch, var(--color-danger) 42%, transparent);
        --color-danger-ring: color-mix(in oklch, var(--color-danger) 32%, transparent);

        /* Hairline borders derived from text instead of literal rgba white */
        --color-border: color-mix(in oklch, var(--color-text) 8%, transparent);
        --color-border-hover: color-mix(in oklch, var(--color-text) 15%, transparent);
    }
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    /* clip (not hidden) so the body never becomes a scroll container — `hidden`
       computes overflow-y:auto and silently breaks native view() timelines.
       `hidden` stays as the fallback for engines without `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

::selection { background: var(--color-primary); color: var(--color-bg-deep); }

/* Anchor offset for the fixed header (H4) — complements scroll-padding-top above */
section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

a { color: inherit; text-decoration: none; }
img, video, picture, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

/* WCAG 2.4.7 — visible focus indicator */
*:focus { outline: none; }
*:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }

/* WCAG 2.4.1 — skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-bg-deep);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: top 0.2s var(--ease-out-expo);
}
.skip-link:focus-visible { top: 1rem; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.display-xl { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; }
.display-lg { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.display-md { font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 700; }
.display-sm { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }

.text-lg { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); line-height: 1.55; }
.text-sm { font-size: 0.875rem; line-height: 1.5; }
.text-muted { color: var(--color-text-secondary); }
.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.mb-2 { margin-bottom: 1rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.container--narrow { max-width: var(--container-narrow); }

section { padding: var(--section-padding) 0; position: relative; }

.section-head {
    max-width: 760px;
    margin: 0 auto clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}
.section-head p.text-lg { margin-top: 1.25rem; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.85rem;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo),
                background var(--duration-fast);
    will-change: transform;
}
.btn--large { padding: 1.15rem 2.4rem; font-size: 1.0625rem; min-height: 56px; }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-bg-deep);
    box-shadow: 0 4px 24px var(--color-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px var(--color-primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--primary:active { transform: translateY(0); }

/* shimmer sweep on primary — only on hover, one sweep (no infinite loop) */
.btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
}
.btn--primary:hover::after {
    animation: shimmer 0.9s var(--ease-out-expo) 1;
}
@keyframes shimmer {
    from { left: -120%; }
    to { left: 160%; }
}

.btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

/* Quiet text link — lets the primary CTA dominate (B1) */
.btn--link {
    background: none;
    border: none;
    padding: 0.5rem 0.5rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    overflow: visible;
}
.btn--link::after { content: none; }
.btn--link:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; transform: none; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.cta-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* --------------------------------------------------------------------------
   Glass utility
   -------------------------------------------------------------------------- */
.glass {
    background: rgba(15, 34, 32, 0.55);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: 1.1rem 0;
    transition: padding var(--duration-normal) var(--ease-out-expo),
                background var(--duration-normal) var(--ease-out-expo),
                border-color var(--duration-normal) var(--ease-out-expo);
    border-bottom: 1px solid transparent;
}
.header--scrolled {
    padding: 0.55rem 0;
    background: rgba(8, 18, 17, 0.82);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom-color: var(--color-border);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header__logo { display: flex; align-items: center; }
.header__logo img {
    height: 52px;
    width: auto;
    transition: height var(--duration-normal) var(--ease-out-expo);
}
.header--scrolled .header__logo img { height: 42px; }

.header__nav { display: flex; align-items: center; gap: 1.85rem; }
.header__nav a:not(.btn) {
    font-size: 0.92rem;
    color: var(--color-text-secondary);
    transition: color var(--duration-fast);
    position: relative;
}
.header__nav a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-out-expo);
}
.header__nav a:not(.btn):hover { color: var(--color-text); }
.header__nav a:not(.btn):hover::after { transform: scaleX(1); }
.header__nav .btn { padding: 0.7rem 1.4rem; min-height: 44px; }

.header__menu-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
}
.header__menu-trigger-bar,
.header__menu-trigger-bar::before,
.header__menu-trigger-bar::after {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--duration-fast) var(--ease-out-expo);
}
.header__menu-trigger-bar { position: relative; }
.header__menu-trigger-bar::before { content: ''; position: absolute; top: -6px; }
.header__menu-trigger-bar::after { content: ''; position: absolute; top: 6px; }

/* Mobile-only Login in the header bar. On phones the desktop nav (incl. its
   Login) is hidden behind the hamburger, so returning users couldn't find the
   login. This keeps it always visible. Shown only ≤768px (see responsive block). */
.header__login-mobile { display: none; }

/* --------------------------------------------------------------------------
   Mobile off-canvas menu
   -------------------------------------------------------------------------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(5, 13, 12, 0.96);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal) var(--ease-out-expo),
                visibility var(--duration-normal) var(--ease-out-expo);
}
.mobile-menu[aria-hidden="false"] { opacity: 1; visibility: visible; }
.mobile-menu__close {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 48px; height: 48px;
    font-size: 2rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
}
.mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; width: min(90vw, 360px); }
.mobile-menu__nav a:not(.btn) { font-size: 1.5rem; font-weight: 600; font-family: var(--font-display); }
.mobile-menu__nav .btn { width: 100%; }
.mobile-menu__cta { margin-top: 0.5rem; }
body.mobile-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Background atmosphere (aurora + grid) — shared
   -------------------------------------------------------------------------- */
.bg-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-atmosphere::before {
    content: '';
    position: absolute;
    top: -40%; left: -30%;
    width: 180%; height: 180%;
    background:
        radial-gradient(ellipse at 28% 22%, var(--color-primary-glow) 0%, transparent 45%),
        radial-gradient(ellipse at 75% 78%, var(--color-secondary-glow) 0%, transparent 42%);
    animation: aurora 24s ease-in-out infinite;
    will-change: transform;
}
@keyframes aurora {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2%, 3%) rotate(4deg); }
    66% { transform: translate(-2%, -1%) rotate(-3deg); }
}
.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at center 30%, black 25%, transparent 72%);
    mask-image: radial-gradient(ellipse at center 30%, black 25%, transparent 72%);
}

/* ==========================================================================
   HERO — A2 · Tech
   Text left, large 3D-tilted role stage right (bleeds off the right edge),
   cursor-parallax. Space Grotesk display, IBM Plex Mono kicker/labels/tabs/meta.
   H1 lead stays constant while the typewriter line rotates — reserved height
   keeps the layout from ever jumping (the core fix).
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + clamp(1.5rem, 5vw, 3.5rem));
    padding-bottom: clamp(3rem, 6vw, 5rem);
    overflow: hidden;
}
/* Hero keeps the shared grid backdrop; the directed role-tinted glow lives on
   .hero__glow (replaces the old diffuse double-aurora override). */
.hero .bg-atmosphere::before {
    background: radial-gradient(ellipse at 78% 38%, var(--color-primary-glow) 0%, transparent 50%);
}
.hero__glow {
    position: absolute;
    z-index: 0;
    width: 62vw; height: 62vw;
    max-width: 840px; max-height: 840px;
    right: -12%; top: -6%;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.42;
    pointer-events: none;
    background: radial-gradient(circle, var(--accent, var(--color-primary)), transparent 60%);
    transition: background var(--duration-slow) var(--ease-out-expo);
}
.hero__inner {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(1.25rem, 2.8vw, 2.25rem);
    align-items: center;
    width: 100%;
    max-width: 1440px; /* wider than the default 1280 → device grows, text shifts left */
}
.hero__col-text { max-width: 36rem; }

/* Mono kicker (// prefix) */
.kicker {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    margin-bottom: 1.2rem;
}
.kicker::before { content: "// "; }

/* H1 — constant lead + reserved typewriter line. NO text-wrap:balance here:
   balancing re-flows the lead as the typed line grows → the lead would jump. */
.hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.4rem, 3.9vw, 3.85rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
    max-width: none;
}
.h1-lead { display: block; }                                   /* constant part — never reflows */
.tw { display: block; color: var(--color-primary); min-height: 2.16em; } /* typed line, height reserved → no vertical jump */
.tw__text { text-wrap: pretty; }
.tw__caret {
    display: inline-block;
    width: 0.05em; height: 0.88em;
    margin-left: 0.07em;
    vertical-align: -0.04em;
    border-radius: 2px;
    background: var(--color-primary);
    animation: blink 1.15s ease-in-out infinite;
}
@keyframes blink { 0%, 38% { opacity: 1; } 50%, 62% { opacity: 0; } } /* soft fade, not a hard on/off */
@media (prefers-reduced-motion: reduce) { .tw__caret { animation: none; opacity: 0.5; } }

.hero__subtitle {
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    line-height: 1.58;
    color: var(--color-text-secondary);
    max-width: 32rem;
    margin-bottom: 2rem;
    text-wrap: pretty;
}
.hero__subtitle strong { color: var(--color-text); font-weight: 600; }

/* CTA stacked: button + mono meta line under it */
.hero__cta {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: flex-start;
    margin-bottom: 1.9rem;
}
.hero__cta .arr { transition: transform var(--duration-fast) var(--ease-out-back); }
.hero__cta .btn:hover .arr { transform: translateX(4px); }
.cta-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); letter-spacing: -0.01em; }

.tabs__label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

/* Square mono role tabs (the "proof" switcher) */
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    min-height: 44px; /* WCAG 2.2 AA touch target */
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--duration-normal) var(--ease-out-expo),
                border-color var(--duration-normal) var(--ease-out-expo),
                background var(--duration-normal) var(--ease-out-expo);
}
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--role); opacity: 0.55; transition: opacity 0.3s, transform 0.3s; }
.tab[aria-selected="true"] {
    background: color-mix(in srgb, var(--role) 14%, transparent);
    border-color: color-mix(in srgb, var(--role) 48%, transparent);
    color: var(--color-text);
}
.tab[aria-selected="true"] .dot { opacity: 1; transform: scale(1.3); }
.tab:hover { color: var(--color-text); border-color: var(--color-border-hover); }

/* ===== Big tilted role stage, bleeding off the right edge, pushed back ===== */
.stage { position: relative; perspective: 2200px; }
.device {
    position: relative;
    width: calc(100% + 10vw);
    max-width: none;
    margin-right: -10vw;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--color-border-hover);
    background: var(--color-bg-elevated);
    aspect-ratio: 1152 / 780;
    box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    transform: perspective(2200px) rotateY(var(--ry, -12deg)) rotateX(var(--rx, 4deg)) scale(0.97);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.device__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-out-expo); }
.device__layer[data-active="true"] { opacity: 1; }
.device__layer img, .device__layer video { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.device__layer[data-active="true"] img, .device__layer[data-active="true"] video { animation: kb 9s var(--ease-out-expo) forwards; }
@keyframes kb { from { transform: scale(1.1) translate3d(1%, 1%, 0); } to { transform: scale(1.0) translate3d(-1%, 0, 0); } }
.device__ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--color-primary)) 28%, transparent) inset; }
.chip {
    position: absolute;
    left: 1.1rem; bottom: 1.1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    background: rgba(8, 18, 16, 0.8);
    border: 1px solid var(--color-border-hover);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
}
.chip .swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--accent, var(--color-primary)); }
.chip small { color: var(--color-text-muted); font-weight: 400; }

/* At the same breakpoint the hero grid stacks (1024px), the stage un-tilts and
   stops bleeding so it sits centred above the copy — no orphan tilt. */
@media (max-width: 1024px) {
    .device { width: 100%; margin-right: 0; transform: none; }
    .stage { perspective: none; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip { padding: clamp(2rem, 4vw, 2.75rem) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-bg-deep); }
.trust-strip__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2.5rem;
}
.trust-strip__item {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.trust-strip__item svg { width: 18px; height: 18px; color: var(--color-secondary); flex-shrink: 0; }
.trust-strip__item strong { color: var(--color-text); font-weight: 600; }

/* ==========================================================================
   PROBLEM
   ========================================================================== */
.problem { background: var(--color-bg); border-top: 1px solid var(--color-border); }
/* 4 cards → symmetric 2×2 (no orphan row); tablet 2, mobile 1 — equal heights via stretch */
.problem__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
}
.problem__card {
    display: flex;
    flex-direction: column;
    padding: 1.85rem;
    background: color-mix(in srgb, var(--color-danger) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 14%, transparent);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}
/* Signature hover: brand-tinted border-glow ring (no translateY) */
.problem__card:hover {
    border-color: var(--color-danger-border);
    box-shadow: 0 0 0 1px var(--color-danger-ring), 0 12px 40px rgba(0, 0, 0, 0.35);
}
.problem__icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    border-radius: var(--radius-md);
    color: var(--color-danger);
    margin-bottom: 1.1rem;
}
.problem__icon svg { width: 22px; height: 22px; }
.problem__card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; line-height: 1.25; }
.problem__card p { color: var(--color-text-secondary); font-size: 0.9375rem; }

/* ==========================================================================
   PRODUCT TOUR (centerpiece) — discrete IntersectionObserver steps, no jacking
   ========================================================================== */
.tour { background: var(--color-bg); overflow: clip; border-top: 1px solid var(--color-border); }
.tour__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

/* Left: sticky captions (desktop). On mobile they stack with each shot. */
.tour__rail { position: sticky; top: calc(var(--header-h) + 2rem); }
.tour__steps { display: flex; flex-direction: column; gap: 0.5rem; }
.tour__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-out-expo),
                border-color var(--duration-normal) var(--ease-out-expo);
    text-align: left;
    width: 100%;
    background: transparent;
    color: inherit;
}
.tour__step:hover { background: rgba(255, 255, 255, 0.03); }
.tour__step[aria-current="true"] {
    background: var(--color-primary-tint);
    border-color: var(--color-primary-ring);
}
.tour__step-num {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-hover);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    transition: all var(--duration-normal) var(--ease-out-expo);
    /* R1: keep markers opaque and above the progress line so the line never strikes through the numbers */
    position: relative;
    z-index: 1;
    background: var(--color-bg);
}
.tour__step[aria-current="true"] .tour__step-num {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg-deep);
}
.tour__step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.2rem; line-height: 1.2; }
.tour__step-desc { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.45; }
.tour__step[aria-current="true"] .tour__step-desc { color: var(--color-text); }

/* progress line behind the numbers — spans from center of first marker to center of last marker (R1) */
.tour__progress {
    position: absolute;
    left: calc(1.25rem + 17px);
    top: calc(1.15rem + 17px); bottom: calc(1.15rem + 17px);
    width: 2px;
    background: var(--color-border);
    z-index: 0;
    transform: translateX(-1px);
}
.tour__progress-fill {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: var(--tour-progress, 0%);
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    transition: height var(--duration-slow) var(--ease-out-expo);
}
.tour__rail-inner { position: relative; }

/* Right: stacked crossfading screenshots in one fixed-ratio frame (no CLS) */
.tour__stage {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-hover);
    box-shadow: var(--shadow-lg);
    background: var(--color-bg-elevated);
}
.tour__stage-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    z-index: 2;
}
/* Browser-chrome bar bits — the tour stage is the only consumer now */
.device-frame__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.device-frame__url {
    margin-left: 0.6rem;
    flex: 1;
    max-width: 280px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    padding: 0.25rem 0.7rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-full);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tour__stage-bar .device-frame__dot { width: 10px; height: 10px; }
.tour__viewport {
    position: relative;
    aspect-ratio: 1152 / 851;
}
.tour__shot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
}
.tour__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tour__shot[data-active="true"] { opacity: 1; transform: scale(1); }

/* Tour exit CTA — centered, breaks the dead-end after the walkthrough (A2/H3) */
.tour__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

/* ==========================================================================
   ROLES — one login, four views (leitmotiv anchor)
   ========================================================================== */
.roles { background: var(--color-bg-deep); border-top: 1px solid var(--color-border); }
.roles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    list-style: none;
}
.role-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.85rem 1.6rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}
.role-card:hover {
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 1px var(--color-primary-ring), 0 12px 40px rgba(0, 0, 0, 0.35);
}
.role-card__icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}
.role-card__icon svg { width: 22px; height: 22px; }
.role-card__title { font-size: 1.25rem; font-weight: 700; }
.role-card p { color: var(--color-text-secondary); font-size: 0.92rem; line-height: 1.5; }

/* ==========================================================================
   FEATURES — each paired with a real screenshot crop
   ========================================================================== */
.features { background: var(--color-bg-deep); border-top: 1px solid var(--color-border); }
.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.feature-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}
/* Signature hover: brand border-glow ring + the media zoom below (no translateY) */
.feature-card:hover {
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 1px var(--color-primary-ring), 0 12px 40px rgba(0, 0, 0, 0.35);
}
.feature-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-deep);
    border-bottom: 1px solid var(--color-border);
}
.feature-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top left;
    transition: transform var(--duration-slow) var(--ease-out-expo);
}
.feature-card:hover .feature-card__media img { transform: scale(1.04); }
.feature-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.feature-card__icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.25rem; line-height: 1.25; }
.feature-card p { color: var(--color-text-secondary); font-size: 0.9375rem; }

/* ==========================================================================
   BUILT-FOR (vs. clubs — honest, no false competitor claims)
   ========================================================================== */
.builtfor { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.builtfor__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.compare-col {
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.compare-col--them { background: rgba(255, 255, 255, 0.02); }
.compare-col--us { background: rgba(224, 149, 54, 0.05); border-color: rgba(224, 149, 54, 0.3); }
.compare-col__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}
.compare-col--them .compare-col__label { color: var(--color-text-muted); }
.compare-col--us .compare-col__label { color: var(--color-primary); }
.compare-col h3 { font-size: 1.35rem; margin-bottom: 1.4rem; }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.compare-col li { display: flex; gap: 0.7rem; font-size: 0.95rem; line-height: 1.45; color: var(--color-text-secondary); }
.compare-col li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.compare-col--them li svg { color: var(--color-text-muted); }
.compare-col--us li svg { color: var(--color-secondary); }
.compare-col--us li { color: var(--color-text); }
.builtfor__note {
    max-width: 760px;
    margin: 2.5rem auto 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */
/* Anchor section (S4): a deliberately distinct elevated tone with an inset top highlight */
.proof {
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.proof__card {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.25rem);
    border-radius: var(--radius-xl);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}
.proof__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 0%, rgba(224, 149, 54, 0.12), transparent 60%);
    pointer-events: none;
}
.proof__quote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 1.75rem;
    position: relative;
}
.proof__author { display: flex; align-items: center; gap: 1rem; position: relative; }
.proof__avatar {
    width: 56px; height: 56px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border-hover);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}
.proof__name { font-weight: 700; font-size: 1.05rem; }
.proof__role { font-size: 0.88rem; color: var(--color-text-muted); }

.proof__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    max-width: 880px;
    margin: 2.5rem auto 0;
}
.proof__stat {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
}
.proof__stat-value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.proof__stat-label { font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 0.5rem; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.pricing__toggle {
    display: inline-flex;
    margin: 0 auto 0.75rem;
    padding: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    gap: 4px;
}
.pricing__toggle-wrap { text-align: center; margin-bottom: 3rem; }
.pricing__toggle-btn {
    padding: 0.6rem 1.4rem;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.pricing__toggle-btn--active { background: var(--color-primary); color: var(--color-bg-deep); }
.pricing__save {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--color-secondary);
    min-height: 1.2em;
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}
.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 2.25rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
}
.pricing-card--featured {
    border-color: rgba(224, 149, 54, 0.5);
    background: rgba(224, 149, 54, 0.04);
    box-shadow: 0 0 50px rgba(224, 149, 54, 0.08);
}
.pricing-card__badge {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 1rem;
    background: var(--color-primary);
    color: var(--color-bg-deep);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.pricing-card__name { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.4rem; }
.pricing-card__desc { color: var(--color-text-secondary); font-size: 0.92rem; margin-bottom: 1.5rem; min-height: 2.6em; }
.pricing-card__price { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.25rem; }
.pricing-card__amount { font-family: var(--font-display); font-size: 2.85rem; font-weight: 800; line-height: 1; transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease; }
.pricing-card__period { color: var(--color-text-muted); font-size: 0.95rem; }
.pricing-card__note { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 1.6rem; min-height: 1.1em; }
/* Micro reassurance right under each plan CTA (B2) */
.pricing-card__reassure { margin-top: 0.85rem; font-size: 0.78rem; line-height: 1.4; color: var(--color-text-muted); text-align: center; }
.pricing-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.75rem; flex: 1; }
.pricing-card li { display: flex; gap: 0.6rem; font-size: 0.93rem; line-height: 1.4; color: var(--color-text-secondary); }
.pricing-card li svg { width: 18px; height: 18px; color: var(--color-secondary); flex-shrink: 0; margin-top: 1px; }
.pricing-card li strong { color: var(--color-text); font-weight: 600; }
.pricing-card--featured li svg { color: var(--color-primary); }
.pricing-card .btn { width: 100%; }

.pricing-card--addons .addon-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.93rem;
}
.pricing-card--addons .addon-row:last-of-type { border-bottom: none; }
.pricing-card--addons .addon-price { color: var(--color-primary); font-weight: 700; white-space: nowrap; }

/* Risk-reversal cluster */
.risk-reversal {
    max-width: 1100px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--color-border);
}
.risk-reversal__item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--color-text-secondary); }
.risk-reversal__item svg { width: 18px; height: 18px; color: var(--color-secondary); flex-shrink: 0; }
.risk-reversal__item a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.migration-line {
    max-width: 1100px;
    margin: 1.25rem auto 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--color-text-muted);
}
.migration-line a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Demo path inside pricing — guides the undecided to the no-login demo (B3) */
.pricing__demo-hint {
    max-width: 1100px;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}
.pricing__demo-hint a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--color-bg-deep); border-top: 1px solid var(--color-border); }
.faq__list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq__item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-normal) var(--ease-out-expo);
}
.faq__item--open { border-color: var(--color-border-hover); }
.faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    min-height: 56px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    text-align: left;
    cursor: pointer;
}
.faq__icon {
    flex-shrink: 0;
    width: 24px; height: 24px;
    position: relative;
}
.faq__icon::before, .faq__icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 13px; height: 2px;
    background: var(--color-primary);
    transform: translate(-50%, -50%);
    transition: transform var(--duration-normal) var(--ease-out-expo);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item--open .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-out-expo);
}
.faq__item--open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer p { padding: 0 1.5rem 1.4rem; color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta { background: var(--color-bg); overflow: hidden; position: relative; border-top: 1px solid var(--color-border); }
.final-cta__inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}
.final-cta__title { margin-bottom: 1.25rem; }
/* Accent word in the final-CTA headline (class reused from the former hero H1) */
.hero__title-accent { color: var(--color-primary); }
.final-cta__sub { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--color-text-secondary); margin-bottom: 2.25rem; }
.final-cta .btn-row { justify-content: center; }
.final-cta__meta { margin-top: 1.5rem; font-size: 0.88rem; color: var(--color-text-muted); }

/* ==========================================================================
   APP INSTALLIEREN (PWA / QR)
   Static, JS-free section — no reveal/opacity:0 start; renders without JS.
   ========================================================================== */
.install { background: var(--color-bg-deep); border-top: 1px solid var(--color-border); }
.install__inner {
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
}
.install__text .eyebrow { margin-bottom: 1rem; }
.install__text .text-lg { margin-top: 1.25rem; color: var(--color-text-secondary); max-width: 46ch; }
.install__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
}
.install__url {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--color-secondary);
    letter-spacing: -0.01em;
}
.install__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.install__qr img {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-sm);
    /* QR keeps its own white quiet zone for reliable scanning on the dark card */
    background: #FFFFFF;
}
.install__qr-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}
.install__qr-hint strong { color: var(--color-text-secondary); }

@media (max-width: 768px) {
    .install__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .install__text .text-lg { margin-left: auto; margin-right: auto; }
    .install__actions { justify-content: center; }
}

/* ==========================================================================
   STICKY MOBILE CTA BAR
   ========================================================================== */
.mobile-cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 900;
    display: none;
    gap: 0.6rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 18, 17, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--color-border);
    transform: translateY(110%);
    transition: transform var(--duration-normal) var(--ease-out-expo);
}
.mobile-cta-bar--visible { transform: translateY(0); }
.mobile-cta-bar .btn { flex: 1; min-height: 50px; }
.mobile-cta-bar .btn--secondary { flex: 0 0 auto; padding-inline: 1.1rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--color-bg-deep); border-top: 1px solid var(--color-border); padding: clamp(3rem, 6vw, 5rem) 0 2.5rem; }
.footer__grid {
    display: grid;
    /* brand + 5 link columns in one row. NOTE: auto-fit/auto-fill is invalid
       when combined with an fr track outside the repeat() — that silently
       collapsed the whole grid to one stacked column. Explicit tracks instead. */
    grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    margin-bottom: 3rem;
}
.footer__brand img { height: 40px; margin-bottom: 1rem; }
.footer__brand p { color: var(--color-text-muted); font-size: 0.9rem; max-width: 280px; }
.footer__column h3 { font-size: 0.95rem; margin-bottom: 1rem; color: var(--color-text); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer__links a { font-size: 0.88rem; color: var(--color-text-muted); transition: color var(--duration-fast); }
.footer__links a:hover { color: var(--color-text); }
.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.footer__bottom p { font-size: 0.85rem; color: var(--color-text-muted); }
.footer__trust { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__trust span { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--color-text-muted); }
.footer__trust svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ==========================================================================
   SCROLL REVEAL (IntersectionObserver-driven, spring-y, stagger)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-spring);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-spring);
    will-change: opacity, transform;
}
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

/* Hero entrance choreography (CSS-only, plays once on load) */
.hero__col-text > * { animation: heroIn 0.8s var(--ease-out-expo) both; }
.kicker { animation-delay: 0.05s; }
.hero__title { animation-delay: 0.14s; }
.hero__subtitle { animation-delay: 0.22s; }
.hero__cta { animation-delay: 0.30s; }
.tabs__label { animation-delay: 0.38s; }
.tabs { animation-delay: 0.44s; }
.stage { animation: heroVisualIn 1s var(--ease-out-expo) 0.3s both; }
@keyframes heroIn {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroVisualIn {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   PROGRESSIVE ENHANCEMENT — modern platform features, each @supports-gated.
   Everything above is the universal baseline; everything here is additive and
   degrades cleanly. Order: A1 scroll-driven · A3 layout (subgrid / container /
   :has) · A5 variable-font · A2 view transitions.
   ========================================================================== */

/* -------- A1 · Native scroll-driven reveals + tour progress --------------- */
/* When the browser supports animation-timeline:view(), it drives the reveals
   straight from scroll — the IO fallback stands down (html.has-scroll-driven
   is set by JS only when this is supported AND motion is allowed). The keyframe
   end-state is identical to the .is-visible state, so both paths look the same. */
@supports (animation-timeline: view()) {
    @keyframes reveal-rise {
        from { opacity: 0; transform: translateY(28px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    html.has-scroll-driven .reveal {
        /* no JS toggles this class on; CSS owns the whole reveal */
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 22%;
        transition: none; /* the timeline, not a transition, drives it now */
    }
    html.has-scroll-driven .stagger > * {
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 2% cover 24%;
        transition: none;
    }
    /* small per-child range offset keeps the staggered feel without JS delays */
    html.has-scroll-driven .stagger > *:nth-child(2) { animation-range: entry 6%  cover 26%; }
    html.has-scroll-driven .stagger > *:nth-child(3) { animation-range: entry 10% cover 28%; }
    html.has-scroll-driven .stagger > *:nth-child(4) { animation-range: entry 14% cover 30%; }
    html.has-scroll-driven .stagger > *:nth-child(5) { animation-range: entry 18% cover 32%; }
    html.has-scroll-driven .stagger > *:nth-child(6) { animation-range: entry 22% cover 34%; }

    /* Tour progress line is driven by the active step (JS writes --tour-progress
       in paintStep), not by scroll — the steps cycle on a timer now, so a
       scroll-linked fill would desync. Base .tour__progress-fill rule owns it. */
}

/* -------- A3 · subgrid (equal card rows without min-heights) --------------- */
/* Cards opt into the grid's rows so icon / title / body align across a row.
   Without subgrid the cards keep their natural flex layout (already symmetric). */
@supports (grid-template-rows: subgrid) {
    .roles__grid,
    .features__grid,
    .problem__grid {
        grid-auto-rows: 1fr; /* uniform row track the cards can subscribe to */
    }
    .role-card,
    .problem__card {
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: 0.55rem;
    }
    .feature-card__body {
        display: grid;
        grid-template-rows: auto auto 1fr;
    }
}

/* -------- A3 · Container queries (components respond to their own width) ---- */
/* The card grids and the tour stage become containers; cards adapt to the
   space they actually get, not just the viewport. Viewport breakpoints remain
   as the fallback for engines without container queries. */
@supports (container-type: inline-size) {
    .roles__grid,
    .features__grid,
    .problem__grid { container-type: inline-size; container-name: cardgrid; }

    /* When a single card track gets wide (tablet 2-up), give it more air */
    @container cardgrid (min-width: 720px) {
        .role-card,
        .problem__card { padding: 2rem 1.85rem; }
    }

    .tour__stage { container-type: inline-size; container-name: tourstage; }
    /* Roomy stage → slightly larger chrome url; tight stage → hide it */
    @container tourstage (max-width: 360px) {
        .tour__stage-bar .device-frame__url { display: none; }
    }
}

/* -------- A3 · :has() — JS-free relational states -------------------------- */
@supports selector(:has(*)) {
    /* Dim sibling role cards while one is hovered → focus the hovered one.
       Pure CSS; no class toggling. Pointer-only so it never traps keyboard users. */
    @media (hover: hover) and (pointer: fine) {
        .roles__grid:has(.role-card:hover) .role-card:not(:hover) { opacity: 0.62; }
        .roles__grid .role-card { transition: opacity var(--duration-normal) var(--ease-out-expo),
                                              border-color var(--duration-normal) var(--ease-out-expo),
                                              box-shadow var(--duration-normal) var(--ease-out-expo); }
    }
    /* Lift the whole pricing grid's emphasis off the featured card while the
       user is actively hovering a non-featured plan — subtle, JS-free. */
    @media (hover: hover) and (pointer: fine) {
        .pricing__grid:has(.pricing-card:not(.pricing-card--featured):hover) .pricing-card--featured {
            box-shadow: none;
        }
    }
}

/* -------- B3 · content-visibility for below-the-fold sections -------------- */
/* The browser can skip rendering work for off-screen sections until they near
   the viewport. contain-intrinsic-size reserves a plausible block size so the
   scrollbar stays stable (no scroll jumps). Hero/trust stay rendered (LCP). */
@supports (content-visibility: auto) {
    .roles,
    .problem,
    .builtfor,
    .proof,
    .pricing,
    .faq,
    .final-cta,
    .footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }
    /* Tour & features are taller — reserve more so the scrollbar doesn't lurch */
    .features { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
}

/* -------- A2 · View Transitions (same-document morphs) --------------------- */
@supports (view-transition-name: none) {
    /* Hero role switch, tour shots and pricing numbers all morph through the
       default (root) group. Gentle, short — craft, not spectacle. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 220ms;
        animation-timing-function: var(--ease-out-expo);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hero__col-text { max-width: 640px; margin: 0 auto; }
    .hero__subtitle { margin-left: auto; margin-right: auto; }
    /* Centre the A2-tech copy column once it stacks above the stage */
    .hero__cta { align-items: center; }
    .tabs { justify-content: center; }
    .stage { max-width: 720px; margin: 0 auto; }

    .tour__layout { grid-template-columns: 1fr; }
    .tour__rail { position: static; }
    .tour__progress { display: none; }

    /* Tablet: roles + features collapse to 2 columns */
    .roles__grid { grid-template-columns: repeat(2, 1fr); }
    .features__grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer: brand on its own full-width row, links in a 3-col grid */
    .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .header__nav { display: none; }
    .header__menu-trigger { display: inline-flex; }
    .mobile-cta-bar { display: flex; }
    /* Always-visible Login next to the hamburger (≥44px touch target) */
    .header__login-mobile {
        display: inline-flex;
        margin-left: auto;
        min-height: 48px;
        padding: 0 1.1rem;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
    }
    /* Room for the sticky bar incl. the iOS home-indicator inset (P2) */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* All fixed grids collapse to a single column on phones */
    .roles__grid,
    .problem__grid,
    .features__grid,
    .builtfor__grid { grid-template-columns: 1fr; }

    /* Tour collapses to a simple stacked list: each shot + its caption inline */
    .tour__rail { display: none; }
    .tour__stage { display: none; }
    .tour-mobile { display: flex; flex-direction: column; gap: 2rem; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 769px) {
    .tour-mobile { display: none; }
}

@media (max-width: 480px) {
    .btn-row .btn--large { width: 100%; }
    .hero__cta .btn { width: 100%; }
}

/* ==========================================================================
   REDUCED MOTION — every animation falls back to its static end-state.
   Nothing is hidden; content remains fully visible & readable. This is the one
   place !important is used, on purpose: it must win over every enhancement above.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        /* kill any scroll-driven timeline so nothing is tied to scroll position */
        animation-timeline: auto !important;
    }
    /* Reveals: show final state immediately */
    .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
    .hero__col-text > *, .stage { opacity: 1 !important; transform: none !important; }

    /* Background motion off */
    .bg-atmosphere::before { animation: none !important; }

    /* Tour: all shots become a static stacked list (handled via .reduced-motion class in JS too) */
    .tour__shot { position: static; opacity: 1 !important; transform: none !important; }
    .tour__viewport { aspect-ratio: auto; }
    .tour__shot + .tour__shot { border-top: 1px solid var(--color-border); }
    .tour__progress-fill { height: 0 !important; } /* no pretend progress */

    /* Hero stage: static first role, no tilt/parallax/Ken-Burns/glow drift.
       JS already disables the auto-cycle; roles stay keyboard-selectable. */
    .device { transform: none !important; }
    .device__layer[data-active="true"] { opacity: 1 !important; }
    .device__layer[data-active="true"] img,
    .device__layer[data-active="true"] video { animation: none !important; transform: scale(1.02); }
    .device__ring { transition: none !important; }
    .hero__glow { transition: none !important; }

    /* A2 — neutralise view-transition pseudo-elements (instant swap, no cross-fade) */
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}