/* =====================================================================
   OfficePilotPro – Neugestaltung mit räumlicher Tiefe
   Ebenen (von hinten nach vorn):
     0  Sternenfeld (Canvas, Tiefe über Größe/Helligkeit, Maus-Parallaxe)
     1  Lichtwolken (drei weiche Farbflächen, driften)
     2  Gitterboden im Hero (perspektivisch gekippt, läuft auf den Betrachter zu)
     3  Inhalt: 3D-Bühne mit drei Handys, davor Karten auf eigenen Tiefen,
        Scroll-Stapel aus fünf Platten, kippende Karten, 3D-Karussell
   Alles läuft ohne fremde Server: Schriften lokal, keine 3D-Bibliothek.
   ===================================================================== */

/* ---------- Schriften (lokal, DSGVO) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-v20-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-v20-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-v20-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-v38-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-v38-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/fraunces-v38-latin-700.woff2") format("woff2"); }

:root {
  --bg: #070B14;
  --bg-2: #0C1526;
  --text: #EAF0F8;
  --muted: #96A5BB;
  --line: rgba(255, 255, 255, 0.09);
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.07);
  --accent: #2F5C8C;
  --accent-2: #5B8FD1;
  --glow: #7FB3FF;
  --cyan: #22D3EE;
  --indigo: #6366F1;
  --green: #3DBE8B;
  --gold: #E0B25A;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
section { scroll-margin-top: 80px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Ebene 0 + 1: Hintergrund ---------- */
#depth-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Die Wolken sind fertig weiche Farbverläufe — kein Weichzeichner, der in jedem
   Bild neu rechnen müsste. Nur die Position wird bewegt (billig für die Grafikkarte). */
.orb { position: absolute; border-radius: 50%; will-change: transform; }
.orb-1 { width: 70vw; height: 70vw; left: -22vw; top: -26vw; background: radial-gradient(circle, rgba(47, 92, 140, 0.55) 0%, rgba(47, 92, 140, 0.28) 28%, rgba(47, 92, 140, 0.08) 52%, rgba(47, 92, 140, 0) 70%); animation: drift1 16s ease-in-out infinite alternate; }
.orb-2 { width: 56vw; height: 56vw; right: -18vw; top: 4vh; background: radial-gradient(circle, rgba(6, 182, 212, 0.26) 0%, rgba(6, 182, 212, 0.12) 30%, rgba(6, 182, 212, 0.03) 52%, rgba(6, 182, 212, 0) 70%); animation: drift2 19s ease-in-out infinite alternate; }
.orb-3 { width: 52vw; height: 52vw; left: 26vw; bottom: -30vw; background: radial-gradient(circle, rgba(79, 70, 229, 0.36) 0%, rgba(79, 70, 229, 0.16) 30%, rgba(79, 70, 229, 0.04) 52%, rgba(79, 70, 229, 0) 70%); animation: drift3 22s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(16vw, 12vh) scale(1.25); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-14vw, 22vh) scale(0.85); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-20vw, -16vh) scale(1.2); } }

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, padding .35s;
}
.site-header.is-scrolled {
  background: rgba(7, 11, 20, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-color: var(--line);
  padding: 10px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -8px rgba(37, 99, 235, 0.9); }
.brand-name { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.main-nav { display: none; gap: 26px; font-size: .92rem; font-weight: 500; color: var(--muted); }
.main-nav a { transition: color .2s; }
.main-nav a:hover { color: var(--text); }
@media (min-width: 900px) { .main-nav { display: flex; } }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 0; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-glow {
  color: #fff;
  background: linear-gradient(135deg, #4F46E5, #2563EB 55%, #06B6D4);
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.9), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(37, 99, 235, 1), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost {
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: var(--panel-2); transform: translateY(-2px); border-color: rgba(127,179,255,.35); }
.btn-nav { display: none; }
@media (min-width: 900px) { .btn-nav { display: inline-flex; } }
/* Kopfzeile rechts: „Webanwendung" (führt zur Anmeldung im Browser, app.officepilotpro.de)
   neben „App laden". Der Rahmen hält beide Knöpfe zusammen; unter 900px ist er ganz weg,
   damit die Kopfzeile am Handy unverändert bleibt. */
.header-aktionen { display: none; align-items: center; gap: 12px; }
@media (min-width: 900px) { .header-aktionen { display: flex; } }
.header-aktionen .btn { white-space: nowrap; }
/* „Webanwendung" erst ab 1100px: Darunter reicht der Platz neben dem Menü nicht (gemessen
   03.10.2026: bei 900px lief die Kopfzeile über, bei 1000px brachen die Knöpfe um). */
.btn-web { display: none; }
@media (min-width: 1100px) { .btn-web { display: inline-flex; } }

/* ---------- Store-Knöpfe (Glas) ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; }
.store-badges--center { justify-content: center; }
.store-badge {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px; border-radius: 16px; min-width: 200px; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.store-badge:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(127,179,255,.55);
  box-shadow: 0 24px 50px -20px rgba(37,99,235,.75), 0 0 0 1px rgba(127,179,255,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.store-badge-icon { width: 26px; height: 26px; flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.store-badge-text small { font-size: .68rem; opacity: .7; }
.store-badge-text strong { font-size: 1.02rem; font-weight: 600; }

/* ---------- Abschnitts-Köpfe ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--glow); background: rgba(127,179,255,.08); border: 1px solid rgba(127,179,255,.22);
  padding: 7px 14px; border-radius: 999px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.eyebrow--green { color: #7FE0B8; background: rgba(61,190,139,.08); border-color: rgba(61,190,139,.25); }
.eyebrow--green::before { background: var(--green); box-shadow: 0 0 12px var(--green); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.section-title { margin-top: 18px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.02em; line-height: 1.1; }
.section-title--left { text-align: left; }
.section-sub { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
.section-sub--left { max-width: 460px; }

/* ---------- Einblenden beim Scrollen (leicht aus der Tiefe gekippt) ---------- */
.reveal {
  opacity: 0;
  transform: perspective(1000px) translateY(40px) rotateX(10deg) scale(.97);
  transform-origin: 50% 100%;
  filter: blur(6px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in-view { opacity: 1; transform: none; filter: none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding: 130px 0 70px; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; width: 100%; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.06fr 1fr; gap: 24px; } }
.hero h1 { margin-top: 22px; font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.06; letter-spacing: -.025em; }
.h1-glow { position: relative; display: inline-block; isolation: isolate; }
.h1-glow .grad {
  background: linear-gradient(92deg, #9CC4FF 0%, #6D9BFF 40%, #22D3EE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.h1-glow .blur { position: absolute; inset: 0; z-index: -1; color: #4F8DFF; filter: blur(22px); opacity: .55; pointer-events: none; user-select: none; }
.hero-sub { margin-top: 22px; max-width: 560px; font-size: 1.08rem; color: var(--muted); }
.hero-actions { margin-top: 34px; }
.hero-trust { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .84rem; color: var(--muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--green); }

/* Ebene 2: Gitterboden */
.grid-floor {
  position: absolute; left: -10%; right: -10%; bottom: -6%; height: 44%;
  pointer-events: none; perspective: 600px; perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.9) 45%, rgba(0,0,0,0) 100%);
  opacity: .7;
}
.grid-floor::before {
  content: ""; position: absolute; left: 0; right: 0; top: -64px; bottom: 0;
  background-image:
    linear-gradient(rgba(127,179,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,179,255,.22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotateX(64deg) translateY(0); transform-origin: 50% 64px;
  animation: gridMove 5s linear infinite;   /* Verschiebung statt Neuzeichnen */
}
@keyframes gridMove { from { transform: rotateX(64deg) translateY(0); } to { transform: rotateX(64deg) translateY(64px); } }

/* 3D-Bühne */
.stage-wrap { position: relative; width: 100%; height: 600px; }
.stage-scaler { position: absolute; left: 50%; top: 0; width: 560px; height: 600px; margin-left: -280px; transform-origin: 50% 0; }
.stage { width: 560px; height: 600px; perspective: 1500px; perspective-origin: 50% 42%; }
.stage-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 7deg));
  will-change: transform;
}
.halo {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; border-radius: 50%;
  transform: translate(-50%, -50%) translateZ(-260px);
  background: radial-gradient(circle, rgba(79,141,255,.36) 0%, rgba(79,70,229,.2) 32%, rgba(79,70,229,.06) 55%, rgba(7,11,20,0) 70%);
}
.ring3d {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; border-radius: 50%;
  border: 1px solid rgba(127,179,255,.22);
  transform: translate(-50%, -50%) translateZ(-200px) rotateX(74deg);
  box-shadow: inset 0 0 60px rgba(79,141,255,.15);
}
.ring3d.r2 { width: 720px; height: 720px; transform: translate(-50%, -50%) translateZ(-320px) rotateX(74deg); border-color: rgba(127,179,255,.12); }

.phone {
  position: absolute; left: 50%; top: 50%;
  width: 236px; aspect-ratio: 236 / 492; margin-left: -118px; margin-top: -246px;
  border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #2b3242, #0f131b 40%, #1b212d);
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone::before { content: ""; position: absolute; left: 50%; top: 15px; width: 66px; height: 19px; margin-left: -33px; border-radius: 999px; background: #05070c; z-index: 2; }
.phone-screen { width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #0b0f18; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone--main {
  transform: translateZ(calc(60px * var(--spread, 1)));
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1), 0 0 90px -10px rgba(79,141,255,.5);
}
.phone--back-l { transform: translateX(-186px) translateY(34px) translateZ(calc(-170px * var(--spread, 1))) rotateY(32deg) scale(.86); filter: brightness(.55) saturate(.9); }
.phone--back-r { transform: translateX(186px) translateY(34px) translateZ(calc(-170px * var(--spread, 1))) rotateY(-32deg) scale(.86); filter: brightness(.55) saturate(.9); }

/* Schwebende Karten: Außenhülle setzt die Tiefe, Innenteil schwebt */
.fcard {
  position: absolute; left: 50%; top: 50%; pointer-events: none;
  transform-style: preserve-3d;
  transform: translate(var(--x), var(--y)) translateZ(calc(var(--z) * var(--spread, 1))) rotateY(var(--cry, 0deg)) rotateX(var(--crx, 0deg));
  animation: fadeIn .8s var(--ease) both;
  animation-delay: calc(.7s + var(--k, 0) * .14s);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Die Bühne kommt beim Laden aus der Tiefe nach vorn. */
.stage { animation: stageIn 1.3s var(--ease) both; }
@keyframes stageIn { from { opacity: 0; transform: translateY(70px) scale(.86); } to { opacity: 1; transform: none; } }
.fcard-inner {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
  /* Kein Hintergrund-Weichzeichner: In einer Szene, die sich mit der Maus dreht,
     müsste er in jedem Bild neu rechnen. Ein leicht deckender Verlauf sieht gleich aus. */
  background: linear-gradient(160deg, rgba(52,66,96,.9), rgba(24,32,52,.92));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.2);
  animation: floatCard var(--dur, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s);
  white-space: nowrap;
}
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.fc-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.fc-icon svg { width: 20px; height: 20px; }
.fc-icon--blue { background: rgba(91,143,209,.25); color: #BFD7FF; }
.fc-icon--cyan { background: rgba(34,211,238,.2); color: #A5F3FC; }
.fc-icon--indigo { background: rgba(99,102,241,.25); color: #C7D2FE; }
.fc-text { display: flex; flex-direction: column; line-height: 1.25; }
.fc-text small { font-size: .7rem; color: var(--muted); }
.fc-text strong { font-size: .95rem; font-weight: 600; }
.fc-badge { font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; margin-left: 6px; }
.fc-badge--green { background: rgba(61,190,139,.2); color: #7FE0B8; }
.fc-check { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #05130d; display: grid; place-items: center; margin-left: 4px; box-shadow: 0 0 18px rgba(61,190,139,.6); }
.fc-check svg { width: 14px; height: 14px; }
.fcard-inner--table { flex-direction: column; align-items: stretch; gap: 4px; min-width: 210px; padding: 12px 16px; }
.fc-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--glow); margin-bottom: 4px; }
.fc-row { display: flex; justify-content: space-between; gap: 18px; font-size: .84rem; }
.fc-row em { font-style: normal; color: var(--muted); }
.fc-row b { font-weight: 600; }
.fc-row--total { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.fc-row--total b { color: #7FE0B8; }
.fcard-inner--fab { gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; background: linear-gradient(135deg, #4F46E5, #2563EB 60%, #06B6D4); border-color: rgba(255,255,255,.3); box-shadow: 0 20px 40px -14px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.35); }
.fc-plus { font-size: 1.3rem; font-weight: 500; line-height: 1; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(255,255,255,.28); border-radius: 14px; opacity: .8;
}
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--glow); animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* =====================================================================
   EBENEN – Scroll-Stapel aus fünf Platten
   ===================================================================== */
/* Ab 980px Breite UND 700px Höhe bleibt der Abschnitt beim Scrollen stehen und die
   Platten ziehen sich auseinander. Darunter (Handy, Tablet hochkant, sehr niedrige
   Fenster) ist der Stapel von Anfang an aufgefächert und die Seite scrollt normal
   weiter. Dieselbe Bedingung steht in main.js (matchMedia) — beide zusammen ändern. */
.layers { position: relative; }
.layers-sticky { display: flex; align-items: center; padding: 90px 0 60px; }
.layers-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; width: 100%; }
@media (min-width: 980px) {
  .layers-grid { grid-template-columns: .9fr 1.1fr; gap: 40px; }
}
@media (min-width: 980px) and (min-height: 700px) {
  .layers { height: 340vh; }
  /* Oben 84px frei für die feste Kopfzeile (81px hoch) — sonst liegt der Abschnittskopf darunter. */
  .layers-sticky { position: sticky; top: 0; height: 100vh; padding: 84px 0 0; overflow: hidden; }
}
/* Niedrige Fenster (Laptops): Die linke Spalte ist sonst 680px hoch und passt nicht
   neben die Kopfzeile. Schritte und Abstände rücken zusammen (≈ 600px). */
@media (min-width: 980px) and (min-height: 700px) and (max-height: 799px) {
  .layers-copy .section-title { margin-top: 12px; }
  .layers-copy .section-sub { margin-top: 10px; }
  .layers-copy .steps { margin-top: 18px; gap: 4px; }
  .layers-copy .step { padding: 7px 14px; }
}

.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; }
.step {
  display: flex; gap: 14px; align-items: flex-start; padding: 11px 14px; border-radius: 14px;
  border: 1px solid transparent; opacity: .5;
  transition: background .35s, border-color .35s, transform .35s var(--ease), opacity .35s;
}
.step.is-active { opacity: 1; background: var(--panel); border-color: var(--line); transform: translateX(8px); }
.step-num {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font-size: .8rem; font-weight: 700; color: var(--glow);
  background: rgba(127,179,255,.12); border: 1px solid rgba(127,179,255,.25);
  transition: background .35s, box-shadow .35s, color .35s;
}
.step.is-active .step-num { background: linear-gradient(135deg, #4F46E5, #06B6D4); color: #fff; border-color: transparent; box-shadow: 0 0 20px rgba(34,211,238,.55); }
.step strong { display: block; font-size: .98rem; }
.step span:not(.step-num) { font-size: .86rem; color: var(--muted); }

.layers-stage { position: relative; height: 560px; perspective: 1500px; perspective-origin: 50% 30%; }
@media (max-width: 979px) { .layers-stage { height: 420px; } }
.beam {
  position: absolute; left: 50%; top: 4%; width: 3px; height: 92%; margin-left: -1px; z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(127,179,255,.9) 30%, rgba(34,211,238,.95) 70%, transparent);
  box-shadow: 0 0 24px rgba(79,141,255,.7);
  transform: scaleY(var(--spread, 0)); transform-origin: 50% 100%;
  opacity: calc(var(--spread, 0) * .9);
}
/* Der Aufzug: Mit jeder Ebene sinkt der ganze Stapel ein Stück, damit die aktive
   Platte nicht immer weiter nach oben wandert. Weich, weil es nur bei einem
   Ebenenwechsel passiert. */
.stack-lift {
  position: absolute; inset: 0; z-index: 1;
  transform-style: preserve-3d;
  transform: translateY(var(--lift, 0px));
  transition: transform .7s var(--ease);
}
.stack {
  position: absolute; left: 50%; top: 50%;
  width: 420px; height: 300px; margin: -150px 0 0 -210px;
  transform-style: preserve-3d;
  transform: translateY(90px) scale3d(var(--s, 1), var(--s, 1), var(--s, 1)) rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -36deg));
}
/* .plate setzt nur die Tiefe (folgt dem Scrollen direkt, ohne Übergang).
   .plate-inner trägt Aussehen, Herausgleiten und Durchsichtigkeit (weich). */
.plate {
  position: absolute; inset: 0;
  transform: translateZ(calc(var(--n) * (16px + var(--spread, 0) * 72px)));
}
/* Jede Ebene hat eine eigene Akzentfarbe (als RGB-Tripel, damit sie mit Deckkraft
   gemischt werden kann). Sie färbt Sinnbild, Chips, Rand, Leuchten und Symbol. */
.plate--kunden     { --pc: #7FB3FF; --pc-rgb: 127,179,255; }
.plate--termine    { --pc: #A5B4FC; --pc-rgb: 165,180,252; }
.plate--rechnungen { --pc: #67E8F9; --pc-rgb: 103,232,249; }
.plate--belege     { --pc: #F1CF8A; --pc-rgb: 241,207,138; }
.plate--eur        { --pc: #7FE0B8; --pc-rgb: 127,224,184; }
.plate-inner {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden;
  transform: translateX(var(--px, 0px));
  background:
    radial-gradient(circle at 20% 35%, rgba(var(--pc-rgb, 127,179,255), .13), transparent 46%),
    linear-gradient(135deg, rgba(26,40,66,.94), rgba(12,20,36,.96));
  border: 1px solid rgba(var(--pc-rgb, 127,179,255), .22);
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--text);
  /* Abgehende Platte: erst zurückgleiten, dann verblassen. */
  transition: transform .34s var(--ease), opacity .32s ease .14s, border-color .3s ease .14s;
}
/* Das Leuchten liegt auf einer eigenen Schicht und wird nur ein-/ausgeblendet —
   ein animierter Schatten müsste sonst in jedem Bild neu gezeichnet werden. */
.plate-inner::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--pc-rgb, 127,179,255), .55), inset 0 0 70px -20px rgba(var(--pc-rgb, 127,179,255), .45);
  opacity: 0; transition: opacity .35s ease .18s;
}
/* Bereits durchlaufene Platten liegen oberhalb der aktiven und werden zum Umriss —
   so bleibt die aktive frei sichtbar. Ihr Inhalt verschwindet ganz, damit sich keine
   Sinnbilder und Texte über die aktive Karte legen; Rahmen und Namensleiste bleiben. */
.plate.is-above .plate-inner { opacity: .16; }
.plate-body { transition: opacity .3s ease; }
.plate.is-above .plate-body { opacity: 0; }
.plate.is-active .plate-inner {
  --px: 64px;
  border-color: rgba(var(--pc-rgb, 127,179,255), .8);
  box-shadow: 0 30px 50px -20px rgba(0,0,0,.75), 0 0 60px -6px rgba(var(--pc-rgb, 127,179,255), .5), inset 0 1px 0 rgba(255,255,255,.1);
  /* Ankommende Platte: erst sichtbar werden, dann herausgleiten (fertig nach ~0,6 s). */
  transition: transform .42s var(--ease) .18s, opacity .22s ease, border-color .3s ease .18s;
}
.plate.is-active .plate-inner::after { opacity: 1; }
.plate-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px 16px; border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.04));
  border-radius: 0 0 26px 26px;
}
.plate-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plate-ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  color: var(--pc, var(--glow)); background: rgba(var(--pc-rgb, 127,179,255), .14);
  border: 1px solid rgba(var(--pc-rgb, 127,179,255), .32);
}
.plate-ico svg { width: 18px; height: 18px; }
.plate-title { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; white-space: nowrap; }
.plate-tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc, var(--glow)); background: rgba(var(--pc-rgb, 127,179,255), .12); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.plate.is-active .plate-tag { background: var(--pc, var(--glow)); color: #0A1020; box-shadow: 0 0 16px rgba(var(--pc-rgb, 127,179,255), .55); }

/* Plattenfläche: Sinnbild links im Lichtkreis, Leitgedanke und Chips rechts. */
.plate-body { height: 244px; padding: 14px 22px 0; display: flex; align-items: center; gap: 20px; }
.plate-art { position: relative; width: 160px; height: 160px; flex-shrink: 0; display: grid; place-items: center; }
.plate-art::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--pc-rgb, 127,179,255), .34) 0%, rgba(var(--pc-rgb, 127,179,255), .1) 48%, transparent 72%);
}
.plate-art::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(var(--pc-rgb, 127,179,255), .4);
}
.plate-art svg {
  position: relative; width: 96px; height: 96px; color: var(--pc, var(--glow));
  filter: drop-shadow(0 0 14px rgba(var(--pc-rgb, 127,179,255), .6));
}
.plate-copy { flex: 1; min-width: 0; }
.plate-sub { font-family: var(--font-head); font-weight: 600; font-size: 1.32rem; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.plate-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.plate-chip {
  font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  color: var(--pc, var(--glow)); background: rgba(var(--pc-rgb, 127,179,255), .12);
  border: 1px solid rgba(var(--pc-rgb, 127,179,255), .3);
}

/* =====================================================================
   FUNKTIONEN – kippende Glas-Karten
   ===================================================================== */
.features { padding: 120px 0; }
.feature-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.tcard {
  position: relative; height: 100%; padding: 26px 22px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s var(--ease), border-color .35s, box-shadow .35s;
}
.tcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(127,179,255,.18), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.tcard:hover { border-color: rgba(127,179,255,.4); box-shadow: 0 30px 60px -30px rgba(37,99,235,.55); }
.tcard:hover::before { opacity: 1; }
.tcard-icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(79,70,229,.4), rgba(6,182,212,.28));
  border: 1px solid rgba(127,179,255,.28); color: #C9DEFF;
  transform: translateZ(46px);
  box-shadow: 0 12px 26px -10px rgba(37,99,235,.8);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.tcard:hover .tcard-icon { transform: translateZ(70px) rotate(-6deg) scale(1.08); box-shadow: 0 22px 40px -12px rgba(37,99,235,1); }
.tcard-icon svg { width: 24px; height: 24px; }
.tcard h3 { font-size: 1.1rem; margin-bottom: 8px; transform: translateZ(30px); }
.tcard p { color: var(--muted); font-size: .93rem; transform: translateZ(20px); }

/* =====================================================================
   DATENSCHUTZ – mit umlaufenden Ringen
   ===================================================================== */
.trust { padding: 120px 0; position: relative; overflow: hidden; }
.orbit {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(61,190,139,.18);
  transform: translate(-50%, -50%) rotateX(72deg);
}
.orbit-1 { width: 900px; height: 900px; }
.orbit-2 { width: 1300px; height: 1300px; border-color: rgba(127,179,255,.12); }
.orbit::after {
  content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 18px var(--green);
}
.orbit-2::after { background: var(--glow); box-shadow: 0 0 18px var(--glow); }
.orbit-1 { animation: spin 26s linear infinite; }
.orbit-2 { animation: spin 40s linear infinite reverse; }
@keyframes spin { from { transform: translate(-50%, -50%) rotateX(72deg) rotate(0deg); } to { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); } }
.trust .wrap { position: relative; }
.trust-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  height: 100%; text-align: center; padding: 32px 22px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .35s, box-shadow .35s;
}
.trust-item:hover { transform: translateY(-6px); border-color: rgba(61,190,139,.45); box-shadow: 0 30px 60px -30px rgba(61,190,139,.45); }
.trust-icon {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px;
  background: rgba(61,190,139,.12); color: #7FE0B8; border: 1px solid rgba(61,190,139,.3);
  box-shadow: 0 0 34px -6px rgba(61,190,139,.55);
}
.trust-icon svg { width: 26px; height: 26px; }
.trust-item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.trust-item p { color: var(--muted); font-size: .93rem; }

/* =====================================================================
   SCREENSHOTS – 3D-Karussell
   ===================================================================== */
.gallery { padding: 120px 0 100px; overflow: hidden; }
.ring-wrap { position: relative; margin-top: 48px; height: 540px; perspective: 1300px; perspective-origin: 50% 40%; touch-action: pan-y; user-select: none; }
.ring {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--radius, 430px) * -1)) rotateY(var(--rot, 0deg));
  transition: transform .8s var(--ease);
  --radius: 430px; --step: 40deg;
}
.ring.is-dragging { transition: none; }
.ring-item {
  position: absolute; left: -105px; top: -225px; width: 210px; height: 450px; margin: 0;
  border-radius: 30px; padding: 7px;
  background: linear-gradient(160deg, #2b3242, #0f131b 40%, #1b212d);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));
  backface-visibility: hidden;
  opacity: var(--o, 1); filter: brightness(var(--b, 1));
  transition: opacity .5s, filter .5s;
  cursor: grab;
}
.ring-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; pointer-events: none; }
.ring-caption { text-align: center; margin-top: 14px; color: var(--muted); font-size: .92rem; min-height: 1.5em; }
.ring-nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.ring-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s, border-color .2s;
}
.ring-btn:hover { background: var(--panel-2); transform: translateY(-2px); border-color: rgba(127,179,255,.4); }
.ring-btn svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .ring { --radius: 300px; }
  .ring-wrap { height: 400px; }
  .ring-item { left: -75px; top: -160px; width: 150px; height: 320px; border-radius: 22px; padding: 5px; }
  .ring-item img { border-radius: 18px; }
}

/* =====================================================================
   CTA
   ===================================================================== */
.cta { padding: 60px 0 120px; text-align: center; }
.cta-card {
  position: relative; padding: 72px 28px; border-radius: 32px; overflow: hidden;
  background: linear-gradient(160deg, rgba(47,92,140,.38), rgba(12,20,36,.75));
  border: 1px solid rgba(127,179,255,.25);
  box-shadow: 0 40px 90px -40px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.cta-card::before {
  content: ""; position: absolute; inset: -60%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(127,179,255,.16) 72%, transparent 82%);
  animation: spinFlat 20s linear infinite;
}
@keyframes spinFlat { to { transform: rotate(360deg); } }
.cta-card > * { position: relative; }
.cta-logo { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 18px; box-shadow: 0 20px 50px -14px rgba(37,99,235,.9); animation: floatCard 6s ease-in-out infinite; }
.cta h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.02em; }
.cta p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
.cta .store-badges { margin-top: 32px; }
.cta-support { margin-top: 44px; }
.cta-support p { margin-bottom: 16px; font-size: .95rem; }

/* ---------- Fußzeile ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; background: rgba(7,11,20,.6); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; }
.footer-logo { width: 24px; height: 24px; border-radius: 6px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font-size: .9rem; color: var(--muted); }
.footer-nav a:hover { color: var(--text); }
.footer-copy { color: var(--muted); font-size: .82rem; }
@media (min-width: 700px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } }

/* =====================================================================
   Werte, die früher als style="…" im Seitentext standen.
   Die Server-Einstellung (.htaccess, Content-Security-Policy) erlaubt
   Gestaltung nur aus dieser Datei — direkte Angaben im Seitentext wären online stumm.
   ===================================================================== */
.fcard--1 { --x: -228px; --y: -262px; --z: 170px; --cry: 10deg; --dur: 6.4s; --k: 0; }
.fcard--2 { --x: 66px; --y: -236px; --z: 110px; --cry: -8deg; --dur: 7.2s; --delay: -2s; --k: 1; }
.fcard--3 { --x: -232px; --y: 70px; --z: 230px; --cry: 12deg; --crx: -4deg; --dur: 5.8s; --delay: -1s; --k: 2; }
.fcard--4 { --x: 96px; --y: 66px; --z: 70px; --cry: -10deg; --dur: 6.9s; --delay: -3s; --k: 3; }
.fcard--5 { --x: -150px; --y: 250px; --z: 190px; --cry: 4deg; --dur: 6.1s; --delay: -4s; --k: 4; }
.d-1 { --i: 1; } .d-2 { --i: 2; } .d-3 { --i: 3; } .d-4 { --i: 4; }
/* Reihenfolge wie in der Liste: Ebene 1 (Kunden) liegt OBEN im Stapel, Ebene 5 ganz unten.
   --n ist die Höhe im Stapel, deshalb hier umgekehrt zur Reihenfolge im Seitentext. */
.plate:nth-child(1) { --n: 4; } .plate:nth-child(2) { --n: 3; } .plate:nth-child(3) { --n: 2; }
.plate:nth-child(4) { --n: 1; } .plate:nth-child(5) { --n: 0; }

/* =====================================================================
   Unterseiten: Hilfe, Impressum, AGB, Fehlerseite
   ===================================================================== */
.page { position: relative; max-width: 780px; margin: 0 auto; padding: 130px 24px 90px; }
.page-back { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 500; color: var(--glow); margin-bottom: 26px; }
.page-back:hover { color: #fff; }
.page h1 { font-size: clamp(1.75rem, 4vw, 2.8rem); letter-spacing: -.02em; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.page .btn { text-decoration: none; }
.page .meta { color: var(--muted); font-size: .92rem; margin: 10px 0 34px; }
.page h2 { font-size: 1.28rem; margin: 40px 0 10px; }
.page h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; margin: 28px 0 6px; color: #fff; }
.page p, .page li { font-size: 1rem; color: #C9D3E2; }
.page p { margin: 0 0 12px; }
.page ul { margin: 0 0 12px; padding-left: 20px; }
.page li { margin-bottom: 6px; }
.page a { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(127,179,255,.45); }
.page a:hover { color: #fff; text-decoration-color: #fff; }
.page strong { color: var(--text); }
.panel {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px 14px; margin: 26px 0 8px;
}
.panel h2 { margin-top: 0; }
.support-mail { font-size: 1.2rem; font-weight: 600; word-break: break-word; }
.support-en { color: var(--muted); font-size: .92rem; }
.legal-tight p { margin-bottom: 10px; }
.notfound { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.notfound .big {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(5.5rem, 18vw, 10rem); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(92deg, #9CC4FF 0%, #6D9BFF 40%, #22D3EE 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.notfound p { max-width: 460px; margin: 16px auto 28px; }

/* ---------- Weniger Bewegung, wenn das System es wünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .grid-floor::before, .fcard-inner, .fcard, .stage, .cta-logo, .orbit, .cta-card::before, .scroll-hint span { animation: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .stage-inner { transform: rotateY(-14deg) rotateX(7deg); }
  .plate, .plate-inner, .plate-inner::after, .stack-lift, .step, .ring, .tcard { transition: none; }
}

/* =====================================================================
   PREIS – Kostenlos testen / Premium (Kampagne 002, seit 02.10.2026)
   ===================================================================== */
.pricing { padding: 110px 0 90px; position: relative; }
.price-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 900px; margin-left: auto; margin-right: auto; }
@media (min-width: 820px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price-card {
  position: relative; padding: 30px 28px 28px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.price-card:hover { transform: translateY(-6px); border-color: rgba(127,179,255,.35); }
.price-card--premium {
  border-color: rgba(127,179,255,.35);
  background: linear-gradient(180deg, rgba(99,102,241,.16), rgba(34,211,238,.06));
  box-shadow: 0 30px 60px -30px rgba(79,141,255,.55);
}
.price-card h3 { font-size: 1.25rem; }
.price-badge {
  position: absolute; top: 18px; right: 18px; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, #4F46E5, #06B6D4);
}
.price-amount { font-family: var(--font-head); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; margin-top: 8px; }
.price-amount small { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
.price-note { color: var(--muted); font-size: .9rem; }
.price-list { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.price-list li { position: relative; padding-left: 26px; }
.price-list li::before { content: ""; position: absolute; left: 0; top: .4em; width: 15px; height: 15px; border-radius: 50%; background: rgba(61,190,139,.18); border: 1px solid rgba(61,190,139,.5); }
.price-list li::after { content: ""; position: absolute; left: 4px; top: calc(.4em + 3px); width: 6px; height: 3px; border-left: 2px solid #7FE0B8; border-bottom: 2px solid #7FE0B8; transform: rotate(-45deg); }
.price-card .btn { margin-top: auto; justify-content: center; text-align: center; }
.price-foot { margin-top: 22px; text-align: center; color: var(--muted); font-size: .86rem; }
.price-foot a { color: var(--glow); }
.start-steps { list-style: none; margin: 56px auto 0; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: s; }
@media (min-width: 820px) { .start-steps { grid-template-columns: repeat(3, 1fr); } }
.start-steps li {
  position: relative; padding: 18px 18px 18px 62px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line); font-size: .92rem; color: var(--muted);
}
.start-steps li strong { display: block; color: var(--text); margin-bottom: 4px; font-size: .98rem; }
.start-steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #4F46E5, #06B6D4); box-shadow: 0 0 18px rgba(34,211,238,.4);
}