/* ==========================================================================
   AngebotPilot – landing & legal site
   Design system: deep-navy cinematic surfaces, brand indigo, Inter / Inter Display,
   Instrument Serif italic accents. All motion respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --night-950: #04071a;
  --night-900: #060a1f;
  --night-850: #0a1030;
  --night-800: #0f1640;
  --night-700: #18215a;
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #7c8cf8;
  --brand-500: #4f63f0;
  --brand-600: #2f45d8;
  --brand-700: #2537b0;
  --cyan-300: #6ee7f9;
  --violet-400: #a78bfa;
  --mint-400: #34d399;
  --amber-400: #fbbf24;
  --ink-900: #0b1020;
  --ink-700: #2b3245;
  --ink-600: #4a5266;
  --ink-500: #626b80;
  --ink-400: #8a93a6;
  --line: #e4e7ef;
  --line-strong: #d3d8e4;
  --paper: #ffffff;
  --paper-2: #f6f7fb;
  --paper-3: #eef0f6;
  --ok: #059669;
  /* Semantic tokens – redefined for the dark theme below */
  --surface: #ffffff;            /* raised cards and panels on paper */
  --accent: var(--brand-600);    /* accent text and icons on paper */
  --accent-strong: var(--brand-700);
  --tint: var(--brand-50);       /* tinted chips, current TOC item, info boxes */
  --tint-line: var(--brand-200);
  --ok-text: #047857;
  --header-glass: rgba(255,255,255,.78);
  --header-line: rgba(15,22,64,.08);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Display", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 20px;
  --radius-sm: 12px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-sm: 0 1px 2px rgba(10, 16, 48, .06), 0 1px 1px rgba(10, 16, 48, .04);
  --shadow-md: 0 10px 30px -12px rgba(10, 16, 48, .18), 0 2px 6px -2px rgba(10, 16, 48, .06);
  --shadow-xl: 0 50px 100px -30px rgba(4, 7, 26, .55), 0 30px 60px -30px rgba(4, 7, 26, .5);
  --header-h: 72px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brand-200); color: var(--night-900); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--paper); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow-md); transition: top .2s; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.muted { color: var(--ink-400); }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); background: linear-gradient(90deg, var(--brand-500), var(--violet-400), var(--cyan-300)); }

/* ---------- Buttons ---------- */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 44px; padding: .7em 1.2em; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1.2 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease-out);
}
.btn-lg { min-height: 54px; padding: .95em 1.55em; font-size: 16px; }
.btn-primary { color: #fff; background: linear-gradient(180deg, #4a5ff0, var(--brand-600)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px -8px rgba(47,69,216,.7); }
.btn-primary:hover { color: #fff; background: linear-gradient(180deg, #5468f2, #2a3fd0); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 34px -10px rgba(47,69,216,.85); }
.btn-glow::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--angle, 0deg), var(--brand-400), var(--cyan-300), var(--violet-400), var(--brand-400)); filter: blur(14px); opacity: .55; animation: spin-angle 6s linear infinite; }
.btn-glass { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
.btn-quiet { color: inherit; background: transparent; }
.btn-quiet:hover { color: inherit; background: rgba(127,140,180,.14); }
.btn-outline { color: var(--ink-900); background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-outline:hover { color: var(--ink-900); border-color: var(--ink-400); }
.btn-arrow { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-play { width: 14px; height: 14px; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-angle { to { --angle: 360deg; } }

/* ---------- Eyebrow / headings ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 18px; font: 600 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow-dark { color: var(--brand-200); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 0 4px rgba(110,231,249,.18), 0 0 16px var(--cyan-300); animation: pulse-dot 2.6s var(--ease-out) infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgba(110,231,249,.06), 0 0 20px var(--cyan-300); } }
.h2 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem); letter-spacing: -.035em; line-height: 1.03; font-weight: 600; text-wrap: balance; }
.h2 .serif { font-size: 1.08em; letter-spacing: -.01em; }
.h2-light { color: #fff; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-lead { margin-top: 20px; font-size: 18.5px; color: var(--ink-600); max-width: 60ch; }
.section-head-center .section-lead { margin-inline: auto; }
.lead-light { margin-top: 22px; font-size: 18.5px; line-height: 1.65; color: rgba(222,228,255,.78); max-width: 56ch; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  color: #fff; transition: background-color .4s, color .4s, box-shadow .4s, height .4s var(--ease-out), border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { height: 64px; color: var(--ink-900); background: var(--header-glass); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-color: var(--header-line); }
.site-header.is-dark.is-scrolled { color: #fff; background: rgba(6,10,31,.72); border-color: rgba(255,255,255,.08); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -.03em; }
.brand:hover { color: inherit; }
.brand-mark { width: 32px; height: 32px; color: var(--brand-600); filter: drop-shadow(0 6px 14px rgba(47,69,216,.45)); transition: transform .5s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.wordmark span { color: var(--brand-400); }
.is-scrolled .wordmark span, .brand-dark .wordmark span { color: var(--accent); }
.is-dark.is-scrolled .wordmark span { color: var(--brand-400); }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a { position: relative; display: block; white-space: nowrap; padding: 8px 12px; border-radius: 999px; color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; opacity: .82; transition: opacity .2s, background-color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; background: rgba(127,140,180,.14); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
/* Narrow desktops: keep links, actions and tools on one line */
@media (min-width: 1101px) and (max-width: 1320px) {
  .header-inner { gap: 16px; }
  .site-nav { gap: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 9px; font-size: 14.5px; }
  .nav-actions { gap: 4px; }
  .nav-actions .btn { padding-inline: 1em; }
}
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(127,140,180,.16); color: inherit; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
/* Language switch (DE/EN) and colour-scheme toggle; both follow the header's text colour */
.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(127,140,180,.32); }
.lang-switch a { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; color: inherit; text-decoration: none; font: 600 12.5px/1 var(--font); letter-spacing: .05em; opacity: .72; transition: opacity .2s, background-color .2s; }
.lang-switch a:hover { color: inherit; opacity: 1; background: rgba(127,140,180,.16); }
.lang-switch a[aria-current] { opacity: 1; background: rgba(127,140,180,.26); }
.theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; color: inherit; background: transparent; box-shadow: inset 0 0 0 1px rgba(127,140,180,.32); cursor: pointer; transition: background-color .2s; }
.theme-toggle:hover { background: rgba(127,140,180,.16); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle g { display: none; }
[data-theme-pref="system"] .theme-toggle .ti-system, [data-theme-pref="light"] .theme-toggle .ti-light, [data-theme-pref="dark"] .theme-toggle .ti-dark, html:not([data-theme-pref]) .theme-toggle .ti-system { display: inline; }
html:not(.js) .theme-toggle { display: none; }

/* ---------- Hero ---------- */
.hero {
  --hp: 0;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(780px, 100svh);
  padding: calc(var(--header-h) + clamp(40px, 7vh, 90px)) 0 clamp(80px, 10vh, 120px);
  color: #fff; background: var(--night-900);
  display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.aurora-1 { width: 56vw; height: 56vw; max-width: 900px; max-height: 900px; left: -14vw; top: -22vw; background: radial-gradient(circle at 40% 40%, #3346e0, transparent 65%); animation: drift-1 22s ease-in-out infinite alternate; }
.aurora-2 { width: 48vw; height: 48vw; max-width: 780px; max-height: 780px; right: -12vw; top: 4vh; background: radial-gradient(circle at 50% 50%, #7c3aed, transparent 62%); opacity: .35; animation: drift-2 26s ease-in-out infinite alternate; }
.aurora-3 { width: 40vw; height: 40vw; max-width: 620px; max-height: 620px; left: 32vw; bottom: -28vw; background: radial-gradient(circle at 50% 50%, #06b6d4, transparent 60%); opacity: .3; animation: drift-3 30s ease-in-out infinite alternate; }
@keyframes drift-1 { to { transform: translate(8vw, 6vh) scale(1.12); } }
@keyframes drift-2 { to { transform: translate(-10vw, 10vh) scale(.92); } }
@keyframes drift-3 { to { transform: translate(-6vw, -8vh) scale(1.15); } }
.hero-grid {
  position: absolute; inset: -1px;
  background-image: linear-gradient(rgba(160,175,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(160,175,255,.08) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  transform: perspective(900px) rotateX(calc(var(--hp) * 18deg)) translateY(calc(var(--hp) * -60px));
  transform-origin: 50% 0;
}
.hero-noise { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-beam { position: absolute; left: 50%; top: -20%; width: 2px; height: 70%; background: linear-gradient(transparent, rgba(160,175,255,.55), transparent); transform: rotate(32deg); filter: blur(1px); opacity: .5; animation: beam 9s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: 0; transform: translateX(-30vw) rotate(32deg); } 40%, 60% { opacity: .5; } 100% { transform: translateX(30vw) rotate(32deg); } }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { position: relative; z-index: 2; transform: translateY(calc(var(--hp) * -90px)); opacity: calc(1 - var(--hp) * 1.4); }
.hero-title { font-size: clamp(2.9rem, 1rem + 5vw, 5.7rem); line-height: .98; letter-spacing: -.055em; font-weight: 600; margin: 4px 0 28px; }
.hero-title .line { display: block; overflow: hidden; white-space: nowrap; padding: .04em 0 .08em; margin-bottom: -.08em; }
.hero-title .word { display: inline-block; }
.hero-title .serif { font-size: 1.1em; letter-spacing: -.025em; padding-right: .06em; background: linear-gradient(100deg, #c7d2fe 0%, #9aa8ff 35%, #6ee7f9 70%, #c4b5fd 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s ease-in-out infinite; }
@keyframes shimmer { 50% { background-position: 100% 0; } }
.hero-lead { font-size: clamp(17.5px, .9rem + .45vw, 20.5px); line-height: 1.65; color: rgba(225,231,255,.8); max-width: 34em; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin-top: 34px; font-size: 14.5px; color: rgba(214,221,255,.72); }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--mint-400); }

/* Entrance choreography */
.js .hero-anim, .js .hero-title .word { opacity: 0; transform: translateY(26px); }
.js .hero-title .word { transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; }
.is-loaded .hero-anim, .is-loaded .hero-title .word { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--d) * 110ms + 100ms); }

/* Scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 14px; opacity: calc(1 - var(--hp) * 4); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 2s var(--ease-out) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }

/* ---------- Hero scene ---------- */
.hero-scene { --rx: 0deg; --ry: 0deg; position: relative; z-index: 1; height: clamp(440px, 46vw, 560px); perspective: 1600px; }
.stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) + var(--hp) * 22deg)) rotateY(calc(var(--ry) - 10deg + var(--hp) * 8deg)) rotateZ(calc(var(--hp) * -4deg)) translateY(calc(var(--hp) * 60px)) scale(calc(1 - var(--hp) * .12));
  transition: transform .9s var(--ease-out);
}
.js .hero-scene { opacity: 0; transform: translateY(40px) scale(.96); }
.is-loaded .hero-scene { opacity: 1; transform: none; transition: opacity 1.4s var(--ease-out) .35s, transform 1.6s var(--ease-out) .35s; }

.flight { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(30px); }
.flight-path { fill: none; stroke: url(#trailGrad); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 9; stroke-dashoffset: 0; opacity: 0; }
.scene-fly .flight-path { opacity: 1; animation: trail-move 1.2s linear infinite; }
@keyframes trail-move { to { stroke-dashoffset: -24; } }

.qdoc {
  position: absolute; left: 0; top: 10%; width: min(61%, 360px);
  padding: 22px 22px 18px; border-radius: 18px;
  color: var(--ink-900); background: linear-gradient(180deg, #fff, #f7f8fc);
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,.9);
  transform: translateZ(60px);
  font-size: 12.5px;
}
.qdoc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border-top: 4px solid var(--brand-600); pointer-events: none; }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.doc-brand { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--display); color: var(--brand-600); letter-spacing: -.01em; }
.doc-logo { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.doc-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--paper-3); color: var(--ink-600); font-weight: 600; font-size: 11px; transition: background-color .4s, color .4s; }
.doc-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scene-sent .doc-status { background: #e0e7ff; color: var(--brand-700); }
.scene-accepted .doc-status { background: #d1fae5; color: #047857; }
.doc-kicker { margin: 0 0 2px; font: 700 10.5px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); }
.doc-title { margin: 0 0 14px; font: 600 16px/1.25 var(--display); letter-spacing: -.02em; }
.doc-table { border-top: 1px solid var(--line); }
.doc-row { display: grid; grid-template-columns: 1fr auto 82px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.doc-row span:nth-child(2) { color: var(--ink-500); }
.doc-row span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-row-head { font-size: 10.5px; font-weight: 600; color: var(--ink-400); letter-spacing: .02em; padding: 7px 0; }
.doc-row-head span:last-child { font-weight: 600; }
.doc-row[data-row] { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.doc-row[data-row].is-on { opacity: 1; transform: none; }
.doc-row[data-row] { position: relative; }
.doc-row[data-row]::after { content: ""; position: absolute; inset: 2px -6px; z-index: -1; border-radius: 6px; background: rgba(79,99,240,.12); opacity: 0; }
.doc-row[data-row].is-on::after { animation: row-flash 1.1s var(--ease-out); }
@keyframes row-flash { 15% { opacity: 1; } 100% { opacity: 0; } }
.doc-totals { margin-top: 12px; margin-left: auto; width: 74%; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.doc-totals div { display: flex; justify-content: space-between; color: var(--ink-600); }
.doc-gross { white-space: nowrap; gap: 10px; margin-top: 6px; padding: 9px 11px; border-radius: 10px; color: #fff !important; background: linear-gradient(100deg, var(--brand-600), #4757e6); font-weight: 700; font-size: 13.5px; box-shadow: 0 10px 22px -12px rgba(47,69,216,.8); }
.doc-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--ink-500); font-size: 11.5px; }
.doc-qr { width: 30px; height: 30px; border-radius: 4px; background:
  conic-gradient(from 90deg at 3px 3px, #0b1020 25%, transparent 0) 0 0 / 6px 6px,
  linear-gradient(#fff, #fff); outline: 3px solid #fff; box-shadow: 0 0 0 4px var(--ink-900) inset; opacity: .85; }

.plane {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; z-index: 5;
  offset-path: path("M250 300 C 330 230, 380 150, 470 110");
  offset-rotate: auto 0deg; offset-distance: 0%;
  opacity: 0; filter: drop-shadow(0 10px 18px rgba(4,7,26,.6)) drop-shadow(0 0 14px rgba(154,168,255,.65));
  transform: translateZ(120px);
}
.plane svg { width: 100%; height: 100%; transform: rotate(18deg); }
.scene-fly .plane { animation: fly 1.6s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; scale: .5; } 12% { opacity: 1; scale: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; scale: .6; } }

.phone {
  position: absolute; right: -2%; top: 0; width: min(38%, 214px);
  padding: 30px 16px 18px; border-radius: 30px; text-align: center;
  color: var(--ink-900); background: linear-gradient(180deg, #fff, #f3f5fb);
  box-shadow: var(--shadow-xl), 0 0 0 7px #121935, 0 0 0 8px rgba(255,255,255,.12);
  transform: translateZ(40px) translateY(24px) rotate(4deg); opacity: 0;
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.scene-phone .phone { opacity: 1; transform: translateZ(40px) rotate(4deg); }
.phone-notch { position: absolute; top: 9px; left: 50%; width: 54px; height: 13px; margin-left: -27px; border-radius: 99px; background: #121935; }
.phone-from { margin: 0; font: 600 10.5px/1.4 var(--font); color: var(--brand-600); }
.phone-title { margin: 4px 0 2px; font: 600 13px/1.3 var(--display); }
.phone-amount { margin: 0 0 14px; font: 700 22px/1.2 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.phone-btn { position: relative; display: grid; place-items: center; height: 38px; border-radius: 11px; overflow: hidden; color: #fff; font: 600 12.5px/1 var(--font); background: var(--brand-600); transition: background-color .5s, transform .2s; }
.phone-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: transform .5s var(--ease-out), opacity .4s; }
.phone-btn svg { width: 14px; height: 14px; }
.phone-btn-done { transform: translateY(120%); opacity: 0; }
.scene-press .phone-btn { transform: scale(.94); }
.scene-accepted .phone-btn { background: #047857; }
.scene-accepted .phone-btn-idle { transform: translateY(-120%); opacity: 0; }
.scene-accepted .phone-btn-done { transform: none; opacity: 1; }
.phone-note { margin: 10px 0 0; font-size: 10.5px; color: var(--ink-400); }

.chip {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px;
  border-radius: 14px; color: #fff; font-size: 12px; line-height: 1.25;
  background: rgba(20, 28, 74, .62); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6);
  opacity: 0; transform: translateZ(140px) translateY(14px) scale(.92);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-spring);
}
.chip b { display: block; font-weight: 600; }
.chip small { display: block; color: rgba(214,221,255,.7); font-size: 11px; }
.chip-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #f87171, #dc2626); font: 700 9.5px/1 var(--font); letter-spacing: .04em; }
.chip-ico svg { width: 16px; height: 16px; }
.chip-ico-bell { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #3b2300; }
.chip-ico-ok { background: linear-gradient(135deg, #34d399, #059669); }
.chip-pdf { right: 0; top: 52%; }
.chip-reminder { right: 1%; bottom: 8%; }
.chip-job { right: 0; bottom: 8%; }
.scene-pdf .chip-pdf, .scene-reminder .chip-reminder, .scene-job .chip-job { opacity: 1; transform: translateZ(140px); }
.scene-fadeout .stage > * { opacity: 0 !important; transition: opacity .7s ease; }

/* ---------- Reveal system ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Trades marquee ---------- */
.trades { padding: clamp(60px, 9vw, 110px) 0 clamp(40px, 6vw, 70px); background: var(--paper); overflow: hidden; }
.trades-title { margin: 0 auto 34px; text-align: center; font: 500 15px/1.4 var(--font); color: var(--ink-500); letter-spacing: .01em; padding-inline: var(--gutter); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee + .marquee { margin-top: 14px; }
.marquee-track { display: flex; gap: 14px; flex: none; padding-right: 14px; animation: marquee 48s linear infinite; }
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { flex: none; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); font: 500 16px/1 var(--display); letter-spacing: -.01em; color: var(--ink-700); white-space: nowrap; }
.marquee span:nth-child(3n+1)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--brand-500); vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Statement ---------- */
.statement { padding: clamp(80px, 13vw, 180px) 0; background: var(--paper); }
.statement-text { margin: 0 auto; max-width: 22em; font: 600 clamp(1.9rem, 1rem + 3.2vw, 3.6rem)/1.15 var(--display); letter-spacing: -.035em; text-align: center; text-wrap: balance; color: var(--ink-900); }
.statement-text .w { opacity: .14; transition: opacity .3s linear; }
.statement-text .w.on { opacity: 1; }
.statement-text .w-accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }

/* ---------- Story (pinned) ---------- */
.story { --sp: 0; position: relative; background: var(--paper-2); }
.story-intro { margin-bottom: clamp(30px, 4vw, 50px); max-width: var(--wrap); }
.story-h2 { font-size: clamp(1.9rem, .8rem + 1.9vw, 2.7rem); margin-bottom: 20px; max-width: 12em; }
.story-track { position: relative; height: 620vh; }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); }
/* Wider than the page grid so the app window can show whole screens at a readable size */
.story-grid { --wrap: 1400px; display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.story-steps { list-style: none; display: grid; gap: 4px; counter-reset: s; }
.story-step { position: relative; padding: 13px 18px 13px 58px; border-radius: 16px; transition: background-color .5s, box-shadow .5s; }
.story-step h3 { font-size: 19px; letter-spacing: -.02em; color: var(--ink-500); transition: color .5s var(--ease-out); }
.story-step.is-active h3 { color: var(--ink-900); }
.story-step p { margin: 0; max-height: 0; overflow: hidden; color: var(--ink-600); font-size: 15px; line-height: 1.55; transition: max-height .7s var(--ease-out), margin .7s var(--ease-out), opacity .5s; opacity: 0; }
.story-num { position: absolute; left: 18px; top: 14px; font: 600 13px/1.6 var(--display); color: var(--ink-500); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.story-step.is-active { opacity: 1; background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); }
.story-step.is-active p { max-height: 12em; margin-top: 6px; opacity: 1; }
/* Short laptop screens: keep all six steps and the window inside the pinned panel */
@media (min-width: 961px) and (max-height: 820px) {
  .story-h2 { font-size: clamp(1.7rem, .7rem + 1.6vw, 2.2rem); margin-bottom: 14px; }
  .story-step { padding-block: 10px; }
  .story-step h3 { font-size: 17.5px; }
  .story-step p { font-size: 14px; }
  .story-num { top: 11px; }
  .story-sticky .eyebrow { margin-bottom: 8px; }
}
.story-step.is-active .story-num { color: var(--accent); }
.story-step::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease-out); }
.story-step.is-active::before { transform: scaleY(1); }
.story-media-mobile { display: none; }
.story-stage { position: relative; }
.browser { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 60px 120px -40px rgba(15,22,64,.45), 0 0 0 1px rgba(15,22,64,.08); transform: perspective(1800px) rotateY(calc(-6deg + var(--sp) * 6deg)) rotateX(calc(4deg - var(--sp) * 4deg)); transition: transform .6s var(--ease-out); }
.browser-bar { position: relative; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: linear-gradient(#f8f9fc, #f1f3f8); border-bottom: 1px solid var(--line); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e2e5ec; }
.browser-dots i:nth-child(1) { background: #fb7185; } .browser-dots i:nth-child(2) { background: #fbbf24; } .browser-dots i:nth-child(3) { background: #34d399; }
.browser-url { display: inline-flex; align-items: center; gap: 6px; margin-inline: auto; padding: 5px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-500); }
.browser-url svg { width: 12px; height: 12px; }
.browser-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.browser-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--brand-500), var(--cyan-300)); transform-origin: 0 50%; transform: scaleX(var(--sp)); }
.browser-view { position: relative; aspect-ratio: 16 / 10; background: #f6f7f9; overflow: hidden; }
.browser-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.04) translateY(10px); filter: blur(6px); transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out), filter .8s var(--ease-out); }
.browser-view img.is-active { opacity: 1; transform: none; filter: none; }
.story-caption { margin: 14px 0 0; font-size: 13px; color: var(--ink-500); }

/* ---------- Features / bento ---------- */
.features { padding: clamp(90px, 12vw, 160px) 0; background: var(--paper); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card {
  --x: 50%; --y: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px; border-radius: var(--radius); background: var(--paper-2);
  border: 1px solid var(--line);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--x) var(--y), rgba(79,99,240,.12), transparent 45%); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card:hover::before { opacity: 1; }
.span-2 { grid-column: span 2; }
.row-2 { grid-row: span 2; }
.span-all { grid-column: 1 / -1; }
/* Invoicing tile: text left, animated invoice life cycle right */
.card-invoice { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.inv-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.inv-tags li { padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent-strong); background: var(--tint); box-shadow: inset 0 0 0 1px var(--brand-100); }
.inv-flow { list-style: none; position: relative; margin: 0; padding: 6px 0; display: grid; gap: 14px; }
.inv-flow::before { content: ""; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--line); }
.inv-flow li { position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px 12px 0; opacity: .35; transform: translateX(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i) * .35s + .2s); }
.inv-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--line-strong) inset; transition: background-color .4s, box-shadow .4s; transition-delay: inherit; }
.inv-label { font-weight: 600; color: var(--ink-900); }
.inv-meta { font-size: 13.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; text-align: right; }
.card-invoice.is-in .inv-flow li { opacity: 1; transform: none; }
.card-invoice.is-in .inv-dot { background: var(--brand-600); box-shadow: 0 0 0 5px var(--brand-100); }
.card-invoice.is-in .inv-paid .inv-dot { background: #047857; box-shadow: 0 0 0 5px rgba(4, 120, 87, .15); }
.card-invoice.is-in .inv-paid .inv-label { color: var(--ok-text); }
@media (max-width: 960px) { .card-invoice { grid-template-columns: 1fr; } }
.reduced-motion .inv-flow li { opacity: 1; transform: none; transition: none; }
.card-head h3 { margin: 16px 0 8px; font-size: 21px; letter-spacing: -.025em; }
.card-head p { margin: 0; color: var(--ink-600); font-size: 15.5px; }
.card-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--accent); background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.card-ico svg { width: 22px; height: 22px; }

.card-calc { background: linear-gradient(180deg, var(--surface), var(--paper-2)); }
.calc { margin-top: 24px; display: grid; gap: 16px; }
.calc-field label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--ink-600); margin-bottom: 8px; }
.calc-field output { font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-600) var(--fill, 50%), var(--paper-3) var(--fill, 50%)); outline-offset: 6px; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-600); box-shadow: 0 4px 12px rgba(47,69,216,.35); transition: transform .2s; }
.calc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--brand-600); box-shadow: 0 4px 12px rgba(47,69,216,.35); }
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc-tax { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.calc-tax legend { width: 100%; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink-600); }
.calc-tax label { position: relative; cursor: pointer; }
.calc-tax input { position: absolute; opacity: 0; inset: 0; }
.calc-tax span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; font-weight: 600; transition: all .25s; }
.calc-tax input:checked + span { color: #fff; background: var(--brand-600); border-color: var(--brand-600); box-shadow: 0 6px 16px -6px rgba(47,69,216,.7); }
.calc-tax input:focus-visible + span { outline: 3px solid var(--brand-400); outline-offset: 2px; }
.calc-result { margin: 6px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.calc-result div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.calc-result dt { color: var(--ink-500); }
.calc-result dd { margin: 0; font-weight: 600; }
.calc-gross { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 18px !important; }
.calc-gross dt { color: var(--ink-900) !important; font-weight: 600; }
.calc-gross dd { color: var(--accent); font-weight: 700 !important; }
.calc-result dd.bump { animation: bump .45s var(--ease-out); }
@keyframes bump { 40% { transform: translateY(-2px); color: var(--brand-500); } }

.timeline { list-style: none; position: relative; margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.timeline::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: var(--line-strong); }
.timeline::after { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: linear-gradient(90deg, var(--brand-600), var(--mint-400)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2.4s var(--ease-out) .3s; }
.timeline.is-in::after { transform: scaleX(1); }
.timeline li { position: relative; padding-top: 26px; font-size: 13.5px; line-height: 1.35; opacity: .35; transition: opacity .5s; }
.timeline li b { display: block; font-weight: 600; }
.timeline li small { color: var(--ink-500); }
.tl-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color .4s, background-color .4s, transform .5s var(--ease-spring); }
.timeline.is-in li { opacity: 1; }
.timeline.is-in li .tl-dot { border-color: var(--brand-600); background: var(--brand-600); transform: scale(1.1); box-shadow: 0 0 0 5px rgba(79,99,240,.15); }
.timeline.is-in li:nth-child(1), .timeline.is-in li:nth-child(1) .tl-dot { transition-delay: .3s; }
.timeline.is-in li:nth-child(2), .timeline.is-in li:nth-child(2) .tl-dot { transition-delay: 1s; }
.timeline.is-in li:nth-child(3), .timeline.is-in li:nth-child(3) .tl-dot { transition-delay: 1.7s; }
.timeline.is-in li:nth-child(3) .tl-dot { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 5px rgba(5,150,105,.15); }
.timeline.is-in li.tl-stop, .timeline.is-in li.tl-stop .tl-dot { transition-delay: 2.4s; }
.timeline.is-in li.tl-stop .tl-dot { border-color: var(--ink-400); background: var(--surface); box-shadow: none; }

.accept-demo { margin-top: 24px; }
.accept-btn { position: relative; display: grid; height: 46px; border-radius: 13px; overflow: hidden; color: #fff; background: var(--brand-600); font-weight: 600; font-size: 15px; box-shadow: 0 12px 26px -12px rgba(47,69,216,.8); transition: background-color .5s; }
.accept-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .6s var(--ease-out), opacity .4s; }
.accept-btn svg { width: 16px; height: 16px; }
.accept-btn > span:last-child { transform: translateY(110%); opacity: 0; }
.card-accept.is-in .accept-btn { background: #047857; transition-delay: 1.2s; }
.card-accept.is-in .accept-btn > span:first-child { transform: translateY(-110%); opacity: 0; transition-delay: 1.2s; }
.card-accept.is-in .accept-btn > span:last-child { transform: none; opacity: 1; transition-delay: 1.2s; }
.card-pdf { padding-bottom: 0; }
.pdf-thumb { margin: 22px -26px 0 26px; border-radius: 12px 0 0 0; overflow: hidden; box-shadow: var(--shadow-md), 0 0 0 1px var(--line); transform: translateY(14px); transition: transform .6s var(--ease-out); }
.card-pdf:hover .pdf-thumb { transform: translateY(4px); }
.pdf-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 60% 30%; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.role { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-600); }
.role-owner { color: var(--accent-strong); background: var(--tint); box-shadow: 0 0 0 1px var(--tint-line); }
.role-admin { color: #6d28d9; background: #f5f3ff; box-shadow: 0 0 0 1px #ddd6fe; }

/* ---------- Mobile section ---------- */
.mobile { position: relative; isolation: isolate; overflow: hidden; padding: clamp(100px, 12vw, 170px) 0; color: #fff; background: radial-gradient(1200px 600px at 80% 20%, #1c2a8a 0%, transparent 60%), linear-gradient(180deg, var(--night-850), var(--night-900)); }
.mobile-glow { position: absolute; z-index: -1; width: 700px; height: 700px; right: -100px; top: 50%; margin-top: -350px; border-radius: 50%; background: radial-gradient(circle, rgba(124,140,248,.35), transparent 60%); filter: blur(40px); }
.mobile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.mobile-points { list-style: none; display: grid; gap: 12px; margin: 32px 0 26px; }
.mobile-points li { position: relative; padding-left: 34px; color: rgba(228,233,255,.86); }
.mobile-points li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 7px; background: rgba(124,140,248,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.6 2.6L12 5.5' fill='none' stroke='%23a5b4fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px rgba(165,180,252,.3); }
.badge-soon { display: inline-block; margin: 0; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; color: rgba(214,221,255,.85); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.phones { position: relative; height: clamp(520px, 52vw, 680px); }
.device { position: absolute; width: min(48%, 300px); padding: 9px; border-radius: 42px; background: linear-gradient(145deg, #2a3366, #10163a); box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,.12); transform: translateY(calc(var(--pp, 0) * 1px)) rotate(var(--rot)); }
.device img { width: 100%; border-radius: 34px; }
.device-a { --rot: -6deg; left: 6%; top: 10%; z-index: 2; }
.device-b { --rot: 5deg; right: 4%; top: 0; }

/* ---------- Security ---------- */
.security { position: relative; padding: clamp(100px, 12vw, 170px) 0; color: #fff; background: var(--night-950); overflow: hidden; }
.security::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(160,175,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(160,175,255,.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 20% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 20% 50%, #000, transparent 70%); }
.security-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.shield { position: relative; width: 210px; height: 230px; margin-top: 44px; }
.shield svg { position: relative; z-index: 1; width: 160px; height: 176px; margin: 27px 25px; overflow: visible; }
.shield-outline, .shield-check { fill: none; stroke: url(#shieldGrad); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.shield-outline { stroke-dasharray: 560; stroke-dashoffset: 560; filter: drop-shadow(0 0 12px rgba(110,231,249,.5)); }
.shield-check { stroke-dasharray: 120; stroke-dashoffset: 120; }
.shield.is-in .shield-outline { stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease-out); }
.shield.is-in .shield-check { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out) 1.4s; }
.orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(165,180,252,.25); animation: orbit 18s linear infinite; }
.orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 14px var(--cyan-300); }
.orbit-2 { inset: 22px; animation-duration: 12s; animation-direction: reverse; }
.orbit-2::after { background: var(--violet-400); box-shadow: 0 0 14px var(--violet-400); }
@keyframes orbit { to { transform: rotate(360deg); } }
.facts-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.facts-grid li { position: relative; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); transition: border-color .4s, transform .5s var(--ease-out), background-color .4s; }
.facts-grid li:hover { border-color: rgba(165,180,252,.35); transform: translateY(-3px); }
.facts-grid h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -.02em; }
.facts-grid h3::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: linear-gradient(90deg, var(--brand-400), var(--cyan-300)); }
.facts-grid p { margin: 0; color: rgba(214,221,255,.7); font-size: 15px; }

/* ---------- Pricing ---------- */
.pricing { padding: clamp(100px, 12vw, 170px) 0; background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { --x: 50%; --y: 50%; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--x) var(--y), rgba(79,99,240,.1), transparent 45%); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan:hover::before { opacity: 1; }
.plan h3 { font-size: 21px; }
.plan-desc { margin: 6px 0 22px; color: var(--ink-500); font-size: 15px; min-height: 2.9em; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.price-num { font: 600 44px/1 var(--display); letter-spacing: -.04em; }
.price-per { font-size: 14px; color: var(--ink-500); }
.plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; flex: 1; }
.plan li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-700); }
.plan li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%232f45d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan .btn { width: 100%; }
.plan-featured { color: #fff; background: linear-gradient(180deg, var(--night-800), var(--night-900)); border-color: transparent; box-shadow: var(--shadow-xl); }
.plan-featured::after { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle), var(--brand-400), var(--cyan-300), var(--violet-400), var(--brand-400)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-angle 7s linear infinite; }
.plan-featured .plan-desc, .plan-featured .price-per { color: rgba(214,221,255,.7); }
.plan-featured li { color: rgba(236,240,255,.9); }
.plan-featured li::before { background-color: rgba(124,140,248,.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan-featured::before { background: radial-gradient(380px circle at var(--x) var(--y), rgba(124,140,248,.18), transparent 45%); }
.plan-badge { position: absolute; top: -13px; left: 26px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--night-900); background: linear-gradient(90deg, #c7d2fe, #a5f3fc); }
.plans-note { max-width: 900px; margin: 36px auto 0; text-align: center; font-size: 14px; color: var(--ink-500); }

/* ---------- FAQ ---------- */
.faq { padding: clamp(40px, 6vw, 80px) 0 clamp(100px, 12vw, 160px); background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.faq-aside { position: sticky; top: calc(var(--header-h) + 40px); }
.accordion { display: grid; gap: 12px; }
.accordion details { border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line); transition: background-color .3s, border-color .3s, box-shadow .4s; }
.accordion details[open] { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.accordion summary { position: relative; display: block; padding: 22px 64px 22px 24px; cursor: pointer; list-style: none; font: 600 17.5px/1.4 var(--display); letter-spacing: -.015em; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%232f45d8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 1px var(--line); transition: transform .45s var(--ease-out); }
.accordion details[open] summary::after { transform: rotate(135deg); }
.acc-body { padding: 0 24px 22px; color: var(--ink-600); }
.acc-body p { margin: 0; }
.path { font-weight: 600; color: var(--ink-900); white-space: nowrap; }

/* ---------- Final CTA ---------- */
.final { --fp: 0; position: relative; isolation: isolate; overflow: hidden; padding: clamp(120px, 16vw, 220px) 0; color: #fff; text-align: center; background: var(--night-900); }
.final-bg { position: absolute; inset: 0; z-index: -1; }
.final-bg .aurora-1 { left: 10%; top: -30%; }
.final-bg .aurora-2 { right: 0; top: 20%; }
.final-title { font-size: clamp(3rem, 1.4rem + 6vw, 6.6rem); letter-spacing: -.05em; line-height: 1; font-weight: 600; }
.final-title .serif { background: linear-gradient(100deg, #c7d2fe, #6ee7f9); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.final .lead-light { margin-inline: auto; }
.final-actions { justify-content: center; margin-top: 38px; }
.final-plane { position: absolute; width: clamp(48px, 6vw, 84px); left: 0; top: 50%; z-index: 0; filter: drop-shadow(0 0 24px rgba(154,168,255,.7)); transform: translate(calc(-10vw + var(--fp) * 120vw), calc(30vh - var(--fp) * 60vh)) rotate(-18deg); opacity: 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; padding: 80px 0 34px; background: var(--paper); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-about p { margin: 16px 0 0; max-width: 34ch; color: var(--ink-600); font-size: 15px; }
.footer-credit { font-size: 14px !important; color: var(--ink-500) !important; }
.site-footer h2 { margin-bottom: 14px; font: 600 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer nav a { color: var(--ink-700); text-decoration: none; font-size: 15px; }
.site-footer nav a:hover, .site-footer nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.footer-giant { margin: 70px 0 -.1em; padding-bottom: .18em; font: 700 clamp(3.2rem, 12.4vw, 11.6rem)/.86 var(--display); letter-spacing: -.065em; text-align: center; color: var(--brand-600); user-select: none; white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-giant { color: transparent; background: linear-gradient(100deg, var(--night-800) 8%, var(--brand-600) 48%, var(--violet-400) 78%, var(--cyan-300) 100%); -webkit-background-clip: text; background-clip: text; }
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-500); }
.footer-bottom p { margin: 0; }

/* ==========================================================================
   Document pages (Impressum, Datenschutz, AGB, AVV, …)
   ========================================================================== */
.page-doc { background: var(--paper-2); }
.page-head { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + clamp(50px, 8vw, 90px)) 0 clamp(60px, 8vw, 96px); color: #fff; background: var(--night-900); }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 15% 0%, rgba(51,70,224,.55), transparent 70%), radial-gradient(600px 300px at 90% 30%, rgba(124,58,237,.35), transparent 70%); }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(160,175,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(160,175,255,.07) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.page-head h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.8rem); letter-spacing: -.05em; line-height: 1; margin: 18px 0 14px; }
.page-head .meta { margin: 0; color: rgba(214,221,255,.72); font-size: 15.5px; max-width: 70ch; }
.js .page-head h1, .js .page-head .meta, .js .page-head .breadcrumb { opacity: 0; transform: translateY(20px); }
.is-loaded .page-head h1, .is-loaded .page-head .meta, .is-loaded .page-head .breadcrumb { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.is-loaded .page-head h1 { transition-delay: .1s; } .is-loaded .page-head .meta { transition-delay: .2s; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; font-size: 14px; color: rgba(214,221,255,.6); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumb a { color: rgba(214,221,255,.85); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: -40px; padding-bottom: 100px; position: relative; z-index: 2; }
.doc-layout.no-toc { grid-template-columns: minmax(0, 860px); justify-content: center; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); font-size: 14px; max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
.toc h2 { margin: 0 0 12px; font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.toc ol, .toc ul { list-style: none; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 9px; color: var(--ink-600); text-decoration: none; line-height: 1.35; transition: background-color .2s, color .2s; }
.toc a:hover { background: var(--paper-2); color: var(--ink-900); }
.toc a.is-current { color: var(--accent-strong); background: var(--tint); font-weight: 600; }
.doc { padding: clamp(28px, 4vw, 56px); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); font-size: 16.5px; line-height: 1.75; color: var(--ink-700); min-width: 0; overflow-wrap: anywhere; }
.doc > :first-child { margin-top: 0; }
.doc h2 { margin: 2.2em 0 .6em; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); color: var(--ink-900); letter-spacing: -.025em; scroll-margin-top: calc(var(--header-h) + 24px); }
.doc h3 { margin: 1.8em 0 .5em; font-size: 1.15rem; color: var(--ink-900); }
.doc p, .doc ul, .doc ol, .doc address, .doc dl, .doc table { margin: 0 0 1.1em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: .3em 0; }
.doc address { font-style: normal; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc thead th { font-size: 13px; letter-spacing: .02em; color: var(--ink-500); border-bottom: 2px solid var(--line-strong); }
.doc .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; }
.doc .facts dt { color: var(--ink-500); }
.doc .facts dd { margin: 0; }
mark.ph { padding: 1px 6px; border-radius: 6px; color: #7c2d12; background: #ffedd5; box-shadow: inset 0 0 0 1px #fdba74; font-size: .95em; }
.doc .note, .doc .callout { padding: 16px 18px; border-radius: 14px; background: var(--tint); border: 1px solid var(--tint-line); color: var(--ink-700); }
.doc .steps { counter-reset: st; list-style: none; padding: 0; }
.doc .steps li { counter-increment: st; position: relative; padding-left: 44px; margin: .7em 0; }
.doc .steps li::before { content: counter(st); position: absolute; left: 0; top: .1em; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-600); color: #fff; font-weight: 700; font-size: 14px; }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; color: var(--ink-700); font-size: 15.5px; line-height: 1.6; }
.notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #b45309; }
.notice p { margin: 0; }
.notice.info { background: var(--tint); border-color: var(--tint-line); }
.notice.info svg { color: var(--accent-strong); }
.page-head .meta + .notice { margin-top: 22px; max-width: 820px; background: rgba(255,251,235,.96); }
.doc .notice { margin: 0 0 1.4em; }
.doc .table-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 14px; }
.doc .table-wrap table { margin: 0; }
.doc .steps-list { counter-reset: s; list-style: none; padding: 0; }
.doc .steps-list li { counter-increment: s; position: relative; padding-left: 44px; margin: 0 0 .9em; }
.doc .steps-list li::before { content: counter(s); position: absolute; left: 0; top: .05em; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #4a5ff0, var(--brand-600)); color: #fff; font: 700 14px/1 var(--font); box-shadow: 0 6px 14px -6px rgba(47,69,216,.7); }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 1.5em; }
.cards-2 > div { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); transition: border-color .3s, transform .4s var(--ease-out); }
.cards-2 > div:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.cards-2 h3 { margin-top: 0; }
.cards-2 p:last-child, .cards-2 ul:last-child { margin-bottom: 0; }
.review { padding: 10px 14px; border-radius: 10px; background: #fff7ed; border: 1px dashed #fdba74; color: #9a3412; font-size: 14.5px; }
.muted-sm { color: var(--ink-500); font-size: 14px; }

/* 404 */
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; background: var(--night-900); position: relative; isolation: isolate; overflow: hidden; padding: 120px var(--gutter) 80px; }
.notfound h1 { font-size: clamp(2.8rem, 1rem + 6vw, 6rem); letter-spacing: -.05em; line-height: 1; background: linear-gradient(100deg, #c7d2fe, #6ee7f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound p { color: rgba(214,221,255,.78); font-size: 19px; margin: 18px auto 32px; max-width: 32em; }
.notfound p.notfound-en { margin-top: -14px; font-size: 16px; color: rgba(214,221,255,.62); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-calc { grid-row: span 1; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .site-nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 30px; padding: calc(var(--header-h) + 20px) var(--gutter) 40px; margin: 0; color: #fff; background: rgba(4,7,26,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility .45s; }
  .nav-open .site-nav { opacity: 1; visibility: visible; }
  .nav-links { flex-direction: column; gap: 4px; }
  .nav-links a { font: 600 30px/1.2 var(--display); letter-spacing: -.03em; padding: 10px 4px; opacity: 0; transform: translateY(20px); }
  .nav-open .nav-links a { opacity: .95; transform: none; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
  .nav-open .nav-links li:nth-child(2) a { transition-delay: .05s; } .nav-open .nav-links li:nth-child(3) a { transition-delay: .1s; } .nav-open .nav-links li:nth-child(4) a { transition-delay: .15s; } .nav-open .nav-links li:nth-child(5) a { transition-delay: .2s; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { min-height: 52px; font-size: 16px; }
  .nav-actions .btn-quiet { color: #fff; border: 1px solid rgba(255,255,255,.2); }
  .nav-toggle { display: block; position: relative; z-index: 2; margin-left: 0; }
  .header-tools { margin-left: auto; }
  .header-inner { gap: 16px; }
  .nav-open .site-header { color: #fff; background: transparent; border-color: transparent; backdrop-filter: none; }
  .nav-open .wordmark span { color: var(--brand-400); }
  .nav-open { overflow: hidden; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-scene { height: clamp(400px, 92vw, 520px); margin-top: 10px; }
  .story-track { height: auto; }
  .story-sticky { position: static; height: auto; display: block; overflow: visible; padding-bottom: 80px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-stage { display: none; }
  .story-steps { gap: 18px; }
  .story-step { opacity: 1; padding: 22px 22px 22px 22px; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
  .story-step h3 { color: var(--ink-900); }
  .story-step::before { display: none; }
  .story-num { position: static; display: block; margin-bottom: 6px; color: var(--accent); }
  .story-step p { max-height: none; opacity: 1; margin-top: 8px; }
  .story-media-mobile { display: block; margin: 18px -8px 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
  .story-media-mobile img { display: block; width: 100%; height: auto; }
  .mobile-grid, .security-grid, .faq-grid { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
  .phones { height: clamp(460px, 110vw, 620px); }
  .doc-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .header-inner { gap: 10px; }
  .header-tools { gap: 6px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .bento, .plans, .facts-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .timeline::before, .timeline::after { display: none; }
  .hero-actions .btn { width: 100%; }
  .doc-row span:nth-child(2) { display: none; }
  .phone-amount { font-size: 18px; }
  .chip { font-size: 11px; padding: 8px 11px 8px 8px; }
  .chip-ico { width: 28px; height: 28px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .path { white-space: normal; }
  .doc .facts { grid-template-columns: 1fr; gap: 0 0; }
  .doc .facts dd { margin-bottom: 10px; }
  .cards-2 { grid-template-columns: 1fr; }
  .doc .table-wrap { overflow: visible; border: 0; }
  .doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack th, .doc table.stack td { display: block; width: auto; }
  .doc table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc table.stack tr { margin-bottom: 12px; padding: 6px 0; border: 1px solid var(--line); border-radius: 14px; }
  .doc table.stack th, .doc table.stack td { padding: 6px 16px; border: 0; }
  .doc table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
}

/* ---------- Hero scene: compact layouts ---------- */
@media (max-width: 1100px) {
  .qdoc { width: 64%; font-size: 11.5px; padding: 18px 18px 14px; }
  .doc-row { grid-template-columns: 1fr 74px; }
  .doc-row span:nth-child(2) { display: none; }
  .doc-totals { width: 86%; }
  .doc-foot { display: none; }
  .hero-scene { height: 580px; }
  .qdoc { top: 5%; }
  .phone { width: 40%; right: -2%; }
  .chip-reminder { display: none; }
  .chip-pdf { right: auto; left: 0; top: auto; bottom: 1%; }
  .chip-job { right: 0; bottom: 1%; }
}
@media (max-width: 640px) {
  .hero-scene { height: 560px; }
  .qdoc { width: 72%; top: 8%; }
  .phone { width: 44%; right: -4%; top: 0; padding: 26px 12px 14px; }
  .chip-pdf { left: 0; bottom: 13%; }
  .chip-job { right: -2%; bottom: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}
.reduced-motion .aurora, .reduced-motion .hero-beam, .reduced-motion .marquee-track, .reduced-motion .orbit, .reduced-motion .btn-glow::after { animation: none !important; }
.reduced-motion .marquee { overflow-x: auto; }
.reduced-motion .story-track { height: auto; }
.reduced-motion .story-sticky { position: static; height: auto; display: block; overflow: visible; padding-bottom: 80px; }
.reduced-motion .story-grid { grid-template-columns: 1fr; }
.reduced-motion .story-stage { display: none; }
.reduced-motion .story-step { opacity: 1; background: var(--surface); box-shadow: 0 0 0 1px var(--line); padding: 22px; }
.reduced-motion .story-step h3 { color: var(--ink-900); }
.reduced-motion .story-step::before { display: none; }
.reduced-motion .story-num { position: static; display: block; color: var(--accent); }
.reduced-motion .story-step p { max-height: none; opacity: 1; margin-top: 8px; }
.reduced-motion .story-media-mobile { display: block; max-width: 420px; margin-top: 18px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.reduced-motion .story-media-mobile img { display: block; width: 100%; height: auto; }
.reduced-motion .statement-text .w { opacity: 1; }

/* ==========================================================================
   Dark theme
   <html data-theme="dark"> is set before first paint by the inline head script from the preference
   "system" | "light" | "dark" (localStorage "ap.theme", shared with the web app; default: system).
   The night sections are dark in both themes; this re-tints the paper sections and documents.
   Screen only – printing always uses the light theme.
   ========================================================================== */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --ink-900: #eef1fb;
    --ink-700: #cfd5e6;
    --ink-600: #b4bccf;
    --ink-500: #99a2b8;
    --ink-400: #858ea6;
    --line: #222a46;
    --line-strong: #323c5f;
    --paper: #090e23;
    --paper-2: #0d1329;
    --paper-3: #1f2848;
    --surface: #121a34;
    --accent: #a5b4fc;
    --accent-strong: #c7d2fe;
    --tint: #1a2253;
    --tint-line: #35418a;
    --ok: #10b981;
    --ok-text: #34d399;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 16px 36px -16px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.45);
    --header-glass: rgba(9,14,35,.8);
    --header-line: rgba(255,255,255,.08);
  }
  /* The hero illustration (quotation sheet, customer phone) stays a light paper object */
  :root[data-theme="dark"] :is(.qdoc, .phone) {
    --ink-900: #0b1020; --ink-700: #2b3245; --ink-600: #4a5266; --ink-500: #626b80; --ink-400: #8a93a6;
    --line: #e4e7ef; --line-strong: #d3d8e4; --paper-3: #eef0f6;
  }
  :root[data-theme="dark"] ::selection { background: #3646c8; color: #fff; }

  /* Story: dark browser chrome; a hairline and slightly dimmed screenshots so white app screens don't glare */
  :root[data-theme="dark"] .browser { box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(165,180,252,.18); }
  :root[data-theme="dark"] .browser-bar { background: linear-gradient(#1b2343, #161d39); }
  :root[data-theme="dark"] .browser-url { background: var(--paper-2); }
  :root[data-theme="dark"] .browser-view { background: #10172f; }
  :root[data-theme="dark"] .browser-view img.is-active,
  :root[data-theme="dark"] .story-media-mobile img,
  :root[data-theme="dark"] .pdf-thumb img { filter: brightness(.93); }
  :root[data-theme="dark"] .story-media-mobile, :root[data-theme="dark"] .pdf-thumb { box-shadow: 0 0 0 1px rgba(165,180,252,.2); }

  /* Bento */
  :root[data-theme="dark"] .card:hover { border-color: #3a4570; }
  :root[data-theme="dark"] .card::before { background: radial-gradient(420px circle at var(--x) var(--y), rgba(124,140,248,.14), transparent 45%); }
  :root[data-theme="dark"] .card-invoice.is-in .inv-dot { box-shadow: 0 0 0 5px rgba(124,140,248,.24); }
  :root[data-theme="dark"] .card-invoice.is-in .inv-paid .inv-dot { background: #059669; box-shadow: 0 0 0 5px rgba(16,185,129,.2); }
  :root[data-theme="dark"] .role-admin { color: #ddd6fe; background: #261d4f; box-shadow: 0 0 0 1px #4f3d94; }
  :root[data-theme="dark"] .calc input[type="range"]::-webkit-slider-thumb { background: #eef1fb; }

  /* Pricing and FAQ: icons drawn as data URIs get a lighter stroke */
  :root[data-theme="dark"] .plan:not(.plan-featured) li::before { background-color: var(--tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%23c7d2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  :root[data-theme="dark"] .plan-featured { box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(165,180,252,.12); }
  :root[data-theme="dark"] .accordion summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%23c7d2fe' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

  /* Footer wordmark: start the gradient light instead of navy */
  :root[data-theme="dark"] .footer-giant { color: var(--accent); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    :root[data-theme="dark"] .footer-giant { color: transparent; background-image: linear-gradient(100deg, #c7d2fe 8%, var(--brand-400) 48%, var(--violet-400) 78%, var(--cyan-300) 100%); }
  }

  /* Documents */
  :root[data-theme="dark"] mark.ph { color: #fed7aa; background: rgba(251,146,60,.16); box-shadow: inset 0 0 0 1px rgba(251,146,60,.55); }
  :root[data-theme="dark"] .notice:not(.info) { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.34); }
  :root[data-theme="dark"] .notice:not(.info) svg { color: #fbbf24; }
  :root[data-theme="dark"] .page-head .meta + .notice:not(.info) { background: rgba(40,32,10,.92); }
  :root[data-theme="dark"] .review { background: rgba(251,146,60,.1); border-color: rgba(251,146,60,.5); color: #fdba74; }
  :root[data-theme="dark"] .doc .steps-list li::before { box-shadow: 0 6px 14px -6px rgba(0,0,0,.8); }
}

@media print {
  .site-header, .scroll-progress, .site-footer, .toc, .hero-bg { display: none !important; }
  .page-head { padding: 0; color: #000; background: none; }
  .page-head::before, .page-head::after { display: none; }
  .doc { box-shadow: none; padding: 0; }
  .doc-layout { margin: 0; display: block; }
}