:root{
  --ink:#0b1220;
  --ink-2:#111a2e;
  --surface:#0f172a;
  --surface-2:#1e293b;
  --border:#1f2a44;
  --text:#e2e8f0;
  --text-dim:#94a3b8;
  --brand:#06b6d4;
  --brand-2:#22d3ee;
  --brand-dark:#0e7490;
  --accent:#a78bfa;
  --warn:#f59e0b;
  --danger:#ef4444;
  --danger-soft:#7f1d1d;
  --success:#22c55e;
  --success-soft:#14532d;
  --bg:#070b15;
  --bg-soft:#0b1220;
}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:'Inter','system-ui',-apple-system,Segoe UI,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:-0.025em;font-weight:800;color:#fff}
h2{font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.15}
h3{font-size:clamp(1.15rem,2vw,1.35rem)}
section{position:relative}

/* ── BUTTONS ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;border-radius:.75rem;font-weight:600;transition:all .18s ease;min-height:48px;text-decoration:none;cursor:pointer;border:0;font-size:.95rem;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#02141a;box-shadow:0 6px 24px -6px rgba(34,211,238,.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(34,211,238,.75)}
.btn-outline{border:1px solid rgba(148,163,184,.35);color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn-outline:hover{border-color:var(--brand-2);color:var(--brand-2);background:rgba(34,211,238,.08)}
.btn-ghost{color:var(--text-dim);background:transparent}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.06)}
.btn-danger{background:var(--danger);color:#fff}

/* ── PILLS ───────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .85rem;border-radius:9999px;font-size:.8125rem;font-weight:600;border:1px solid transparent}
.pill-brand{background:rgba(6,182,212,.12);color:var(--brand-2);border-color:rgba(6,182,212,.3)}
.pill-success{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.3)}
.pill-warn{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.3)}
.pill-danger{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.3)}
.pill-ghost{background:rgba(148,163,184,.08);color:var(--text-dim);border-color:rgba(148,163,184,.18)}

/* ── CARDS ───────────────────────────────────────── */
.card{background:linear-gradient(180deg,rgba(30,41,59,.6) 0%,rgba(15,23,42,.6) 100%);border:1px solid var(--border);border-radius:1rem;padding:1.75rem;transition:all .25s ease;backdrop-filter:blur(8px)}
.card:hover{border-color:rgba(34,211,238,.4);box-shadow:0 20px 50px -20px rgba(34,211,238,.25);transform:translateY(-3px)}
.card-pain{position:relative;overflow:hidden}
.card-pain::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--danger),var(--warn))}
.card-glow{position:relative}
.card-glow::after{content:"";position:absolute;inset:-1px;border-radius:1rem;padding:1px;background:linear-gradient(135deg,var(--brand-2),transparent 50%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ── HERO ────────────────────────────────────────── */
.gradient-hero{position:relative;background:radial-gradient(ellipse 80% 60% at 70% -10%,rgba(34,211,238,.18) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(167,139,250,.12) 0%,transparent 50%),var(--bg)}
.gradient-hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M0 0h40v40H0z' fill='none'/><circle cx='1' cy='1' r='1' fill='%231f2a44'/></svg>");opacity:.4;pointer-events:none}
.gradient-hero>*{position:relative}

.gradient-band{background:linear-gradient(135deg,var(--ink-2) 0%,var(--surface) 100%)}

/* ── STAT CALLOUT ────────────────────────────────── */
.stat-big{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:800;line-height:1;letter-spacing:-.035em;background:linear-gradient(135deg,var(--brand-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:.8rem;text-transform:uppercase;font-weight:700;letter-spacing:.08em;color:var(--text-dim)}
.stat-card{background:linear-gradient(160deg,rgba(34,211,238,.06),rgba(167,139,250,.06));border:1px solid var(--border);border-radius:1rem;padding:1.5rem}

/* ── COMPARE TABLE ───────────────────────────────── */
.compare-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:768px){.compare-grid{grid-template-columns:1fr 1fr;gap:1.25rem}}
.compare-col{border-radius:1rem;padding:1.75rem;border:1px solid var(--border)}
.compare-col.bad{background:linear-gradient(180deg,rgba(239,68,68,.08),rgba(239,68,68,.02));border-color:rgba(239,68,68,.3)}
.compare-col.good{background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(34,211,238,.04));border-color:rgba(34,197,94,.3)}
.compare-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--border)}
.compare-row:last-child{border-bottom:0}
.compare-row .label{color:var(--text-dim);font-size:.875rem;font-weight:500}
.compare-row .value{font-weight:700;font-size:1rem}
.compare-col.bad .value{color:#fca5a5}
.compare-col.good .value{color:#86efac}

/* ── TIMELINE ────────────────────────────────────── */
.timeline-mini{display:grid;gap:1rem}
@media(min-width:768px){.timeline-mini{grid-template-columns:repeat(4,1fr);gap:1.25rem}}
.timeline-mini .step{position:relative;background:linear-gradient(180deg,rgba(30,41,59,.5),rgba(15,23,42,.5));border:1px solid var(--border);border-radius:1rem;padding:1.75rem 1.25rem 1.5rem;text-align:left}
.timeline-mini .step .num{margin:0 0 1rem;width:44px;height:44px;border-radius:.75rem;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#02141a;font-weight:800;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center}
.timeline-mini .step .time{font-size:.7rem;color:var(--brand-2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:.75rem;display:block}
.timeline-mini .step h3{font-size:1.05rem;margin:.25rem 0 .5rem}
.timeline-mini .step p{color:var(--text-dim);font-size:.9rem;line-height:1.55;margin:0}

/* ── VS COLUMNS ──────────────────────────────────── */
.vs-grid{display:grid;gap:1.25rem}
@media(min-width:768px){.vs-grid{grid-template-columns:repeat(3,1fr)}}
.vs-col{border:1px solid var(--border);border-radius:1rem;padding:1.75rem;background:rgba(15,23,42,.5)}
.vs-col.highlight{background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(167,139,250,.06));border-color:var(--brand-2);box-shadow:0 25px 50px -15px rgba(34,211,238,.3);transform:scale(1.02)}
.vs-col h3{font-size:1.1rem;margin-bottom:.5rem}
.vs-list{margin-top:1rem;padding:0;list-style:none}
.vs-list li{position:relative;padding:.45rem 0 .45rem 1.75rem;color:var(--text-dim);font-size:.92rem;line-height:1.5}
.vs-list li::before{position:absolute;left:0;top:.55rem;font-size:.9rem;font-weight:800}
.vs-list li.no::before{content:"✕";color:#fca5a5}
.vs-list li.yes::before{content:"✓";color:#86efac}
.vs-col.highlight .vs-list li{color:#cbd5e1}

/* ── CASE STUDY BARS ─────────────────────────────── */
.case-grid{display:grid;gap:1rem}
@media(min-width:768px){.case-grid{grid-template-columns:repeat(3,1fr)}}
.case-card{background:linear-gradient(180deg,rgba(30,41,59,.6),rgba(15,23,42,.6));border:1px solid var(--border);border-radius:1rem;padding:1.5rem}
.case-card .before-after{display:flex;align-items:baseline;gap:.5rem;margin-top:.75rem}
.case-card .before{color:#fca5a5;text-decoration:line-through;font-weight:600;font-size:1.05rem}
.case-card .arrow{color:var(--text-dim);font-size:1.1rem}
.case-card .after{color:#86efac;font-weight:800;font-size:1.75rem;letter-spacing:-.02em}

/* ── FAQ ─────────────────────────────────────────── */
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
details[open] .faq-icon{transform:rotate(45deg)}
.faq-icon{transition:transform .2s ease;font-size:1.5rem;color:var(--brand-2);font-weight:300;line-height:1}
.faq{background:rgba(15,23,42,.5);border:1px solid var(--border);border-radius:1rem;padding:1.25rem 1.5rem;transition:all .2s ease}
.faq:hover{border-color:rgba(34,211,238,.3)}
.faq[open]{border-color:rgba(34,211,238,.4);background:rgba(15,23,42,.85)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:600;color:#fff;font-size:1rem}
.faq[open] summary{margin-bottom:.75rem}
.faq p{color:var(--text-dim);line-height:1.65;margin:0}

/* ── HEADER ──────────────────────────────────────── */
.header-sticky{backdrop-filter:saturate(180%) blur(14px);background:rgba(7,11,21,.78);border-bottom:1px solid rgba(148,163,184,.08)}
.logo-mark{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none;font-size:1.05rem}
.logo-mark svg{width:30px;height:30px}
.nav-link{color:var(--text-dim);font-weight:500;font-size:.9rem;text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent;transition:all .15s ease}
.nav-link:hover{color:#fff}
.nav-link.is-active{color:var(--brand-2);border-bottom-color:var(--brand-2)}

/* ── FUNNEL ──────────────────────────────────────── */
.funnel-shell{background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(11,18,32,.95));border:1px solid var(--border);border-radius:1.5rem;padding:2rem;box-shadow:0 50px 100px -30px rgba(6,182,212,.3),0 0 0 1px rgba(34,211,238,.08)}
@media(min-width:768px){.funnel-shell{padding:2.5rem 3rem}}
.funnel-progress{height:6px;background:rgba(148,163,184,.15);border-radius:9999px;overflow:hidden;margin-bottom:2rem}
.funnel-progress-bar{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:9999px;transition:width .35s ease;width:20%}
.funnel-step{display:none;animation:fadeIn .3s ease}
.funnel-step.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.funnel-step h3{font-size:clamp(1.35rem,2.5vw,1.75rem);margin-bottom:.5rem}
.funnel-step .hint{color:var(--text-dim);font-size:.9rem;margin-bottom:1.5rem}
.funnel-option{display:block;width:100%;text-align:left;background:rgba(30,41,59,.6);border:1px solid var(--border);border-radius:.85rem;padding:1rem 1.25rem;margin-bottom:.65rem;cursor:pointer;transition:all .15s ease;color:var(--text);font-size:.95rem;font-weight:500;font-family:inherit}
.funnel-option:hover{border-color:var(--brand-2);background:rgba(34,211,238,.06);transform:translateX(4px)}
.funnel-option.selected{border-color:var(--brand-2);background:linear-gradient(135deg,rgba(34,211,238,.1),rgba(167,139,250,.06));color:#fff}
.funnel-option .em{display:block;font-size:.8rem;color:var(--text-dim);margin-top:.2rem;font-weight:400}
.funnel-option.selected .em{color:var(--brand-2)}
.funnel-input{width:100%;padding:.85rem 1rem;border-radius:.75rem;background:rgba(15,23,42,.85);border:1px solid var(--border);color:#fff;font-size:1rem;transition:all .15s ease;font-family:inherit}
.funnel-input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.funnel-input::placeholder{color:#475569}
.funnel-label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.4rem;color:var(--text-dim)}
.funnel-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;gap:1rem;flex-wrap:wrap}
.funnel-success{text-align:center;padding:2rem 0}
.funnel-success .check{width:80px;height:80px;border-radius:9999px;background:linear-gradient(135deg,var(--success),#16a34a);display:inline-flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;margin-bottom:1.25rem;box-shadow:0 20px 40px -10px rgba(34,197,94,.4)}

/* ── DEMO PREVIEW ────────────────────────────────── */
.demo-preview{position:relative;background:linear-gradient(180deg,rgba(30,41,59,.4),rgba(15,23,42,.7));border:1px solid var(--border);border-radius:1.25rem;padding:1.5rem;overflow:hidden}
.demo-preview .browser-bar{display:flex;align-items:center;gap:.4rem;padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.demo-preview .dot{width:10px;height:10px;border-radius:9999px;background:#475569}
.demo-preview .dot.r{background:#ef4444}
.demo-preview .dot.y{background:#f59e0b}
.demo-preview .dot.g{background:#22c55e}
.demo-preview .url{margin-left:.75rem;color:var(--text-dim);font-size:.8rem;font-family:ui-monospace,Menlo,monospace}

/* ── ACCESSIBILITY ───────────────────────────────── */
:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px;border-radius:.5rem}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand-2);color:#02141a;padding:.75rem 1rem;border-radius:0 0 .5rem 0;font-weight:700}
.skip-link:focus{left:0;z-index:9999}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ── BACK TO TOP ─────────────────────────────────── */
.back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:48px;height:48px;border-radius:9999px;background:var(--brand-2);color:#02141a;border:0;display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 30px -8px rgba(34,211,238,.5);z-index:60;transition:all .2s ease}
.back-to-top.is-visible{display:inline-flex}
.back-to-top:hover{background:#67e8f9;transform:translateY(-3px)}

/* ── FOOTER ──────────────────────────────────────── */
footer{background:#03060d;border-top:1px solid var(--border);color:var(--text-dim)}
footer a{color:var(--text-dim);text-decoration:none}
footer a:hover{color:var(--brand-2)}

/* ── MOBILE CTA ──────────────────────────────────── */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:rgba(7,11,21,.95);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--border);display:none}
.sticky-cta.is-visible{display:block}
.sticky-cta .btn{width:100%;font-size:1rem;padding:1rem 1.25rem}
@media (min-width:768px){.sticky-cta{display:none!important}}

/* ── DIVIDER ─────────────────────────────────────── */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 auto;max-width:64rem}

/* ── PRICE CARD ──────────────────────────────────── */
.price-card{background:linear-gradient(160deg,rgba(34,211,238,.08),rgba(167,139,250,.04));border:1px solid rgba(34,211,238,.3);border-radius:1.25rem;padding:2rem;position:relative;overflow:hidden}
.price-card .ribbon{position:absolute;top:1.25rem;right:1.25rem;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#02141a;font-size:.7rem;font-weight:800;padding:.3rem .7rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.06em}
.price-list{list-style:none;padding:0;margin:1.25rem 0 0}
.price-list li{padding:.6rem 0 .6rem 2rem;position:relative;color:#cbd5e1;font-size:.95rem;border-bottom:1px solid var(--border)}
.price-list li:last-child{border-bottom:0}
.price-list li::before{content:"✓";position:absolute;left:0;top:.55rem;width:1.25rem;height:1.25rem;background:rgba(34,211,238,.15);border:1px solid var(--brand-2);border-radius:9999px;color:var(--brand-2);font-weight:700;font-size:.75rem;display:inline-flex;align-items:center;justify-content:center}

/* ── HERO METRICS ────────────────────────────────── */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.metric{padding:1rem;border-radius:.85rem;background:rgba(15,23,42,.6);border:1px solid var(--border)}
.metric .v{font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.metric .l{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:.25rem}

/* ── URGENCY BANNER ──────────────────────────────── */
.urgency{background:linear-gradient(90deg,rgba(245,158,11,.12),rgba(239,68,68,.12));border:1px solid rgba(245,158,11,.3);border-radius:.85rem;padding:1rem 1.25rem;display:flex;gap:.85rem;align-items:flex-start;font-size:.92rem;color:#fde68a}
.urgency .ic{font-size:1.2rem;flex-shrink:0}

/* ── WHATSAPP CHAT MOCKUP ────────────────────────── */
.chat-mock{background:#0b141a;border:1px solid #1f2937;border-radius:1.25rem;padding:1.25rem;max-width:380px;margin:0 auto;box-shadow:0 30px 60px -20px rgba(34,211,238,.25)}
.chat-mock .chat-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.85rem;border-bottom:1px solid #1f2937;margin-bottom:1rem}
.chat-mock .avatar{width:38px;height:38px;border-radius:9999px;background:linear-gradient(135deg,#06b6d4,#a78bfa);display:flex;align-items:center;justify-content:center;font-weight:800;color:#02141a;font-size:.95rem}
.chat-mock .who{font-size:.92rem;font-weight:600;color:#e2e8f0}
.chat-mock .status{font-size:.7rem;color:#22c55e;display:flex;align-items:center;gap:.3rem}
.chat-mock .status::before{content:"";width:6px;height:6px;background:#22c55e;border-radius:9999px}
.bubble{padding:.7rem .9rem;border-radius:1rem;font-size:.88rem;line-height:1.45;margin-bottom:.55rem;max-width:85%;word-wrap:break-word}
.bubble .meta{display:block;font-size:.65rem;margin-top:.35rem;opacity:.6}
.bubble.bot{background:#1f2937;color:#e2e8f0;border-bottom-left-radius:.35rem}
.bubble.user{background:#005c4b;color:#e8fcef;margin-left:auto;border-bottom-right-radius:.35rem;text-align:left}
.bubble.user .meta{text-align:right;color:#a7f3d0}
.bubble.bot .meta{color:#94a3b8}
.bubble.attachment{background:#1f2937;color:#e2e8f0;display:flex;align-items:center;gap:.6rem;border-bottom-left-radius:.35rem}
.bubble.attachment .ic{width:34px;height:34px;border-radius:.5rem;background:rgba(34,211,238,.15);display:flex;align-items:center;justify-content:center;color:var(--brand-2);font-size:1.1rem;flex-shrink:0}
.bubble.attachment .fn{font-weight:600;font-size:.82rem}
.bubble.attachment .fs{font-size:.7rem;color:#94a3b8;display:block;margin-top:.15rem}
.typing{display:inline-flex;gap:.2rem;padding:.7rem .9rem;background:#1f2937;border-radius:1rem;border-bottom-left-radius:.35rem;margin-bottom:.55rem}
.typing span{width:6px;height:6px;background:#94a3b8;border-radius:9999px;animation:typingDot 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── ROI CALCULATOR ──────────────────────────────── */
.roi-card{background:linear-gradient(160deg,rgba(239,68,68,.06),rgba(245,158,11,.03));border:1px solid rgba(239,68,68,.25);border-radius:1.25rem;padding:2rem;position:relative;overflow:hidden}
.roi-card .roi-head{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#fca5a5;margin-bottom:1rem}
.roi-row{display:flex;justify-content:space-between;align-items:baseline;padding:.85rem 0;border-bottom:1px dashed rgba(148,163,184,.15)}
.roi-row:last-of-type{border-bottom:0}
.roi-row .l{color:var(--text-dim);font-size:.92rem}
.roi-row .v{font-weight:700;color:#fff;font-size:1.05rem;text-align:right}
.roi-row.total{padding-top:1.25rem;margin-top:.75rem;border-top:2px solid rgba(239,68,68,.4);border-bottom:0}
.roi-row.total .l{color:#fff;font-weight:600}
.roi-row.total .v{color:#fca5a5;font-size:1.75rem;letter-spacing:-.02em}
.roi-card.good{background:linear-gradient(160deg,rgba(34,197,94,.08),rgba(34,211,238,.04));border-color:rgba(34,197,94,.3)}
.roi-card.good .roi-head{color:#86efac}
.roi-card.good .roi-row.total{border-top-color:rgba(34,197,94,.4)}
.roi-card.good .roi-row.total .v{color:#86efac}

/* ── STUDY QUOTE ─────────────────────────────────── */
.study{background:rgba(15,23,42,.6);border-left:3px solid var(--brand-2);border-radius:0 .85rem .85rem 0;padding:1.25rem 1.5rem}
.study .src{font-size:.75rem;color:var(--brand-2);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:.4rem}
.study .quote{color:#e2e8f0;font-size:1rem;line-height:1.55}
.study .quote strong{color:#fff}

/* ── DOCUMENT LIST ───────────────────────────────── */
.doc-tag{display:inline-flex;align-items:center;gap:.4rem;background:rgba(15,23,42,.7);border:1px solid var(--border);border-radius:9999px;padding:.4rem .85rem;font-size:.82rem;color:#cbd5e1;margin:.2rem}
.doc-tag .ic{color:var(--brand-2)}

/* ── FLOW (step-by-step with arrows) ─────────────── */
.flow{display:grid;gap:1rem;grid-template-columns:1fr;align-items:stretch}
@media(min-width:1024px){
  .flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:.5rem}
}
.flow-step{position:relative;background:linear-gradient(180deg,rgba(30,41,59,.55),rgba(15,23,42,.7));border:1px solid var(--border);border-radius:1rem;padding:2rem 1.25rem 1.5rem;text-align:center;transition:all .25s ease}
.flow-step:hover{border-color:rgba(34,211,238,.4);transform:translateY(-4px);box-shadow:0 20px 40px -15px rgba(34,211,238,.25)}
.flow-step .num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:9999px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#02141a;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;border:3px solid var(--bg);box-shadow:0 4px 12px -2px rgba(34,211,238,.5)}
.flow-step .ic{font-size:2.25rem;line-height:1;margin-bottom:.85rem;display:block}
.flow-step h3{font-size:1rem;margin-bottom:.5rem;color:#fff;letter-spacing:-.01em}
.flow-step p{font-size:.85rem;color:var(--text-dim);line-height:1.5;margin:0}
.flow-step .time{display:inline-block;margin-top:.85rem;padding:.2rem .6rem;border-radius:9999px;background:rgba(34,211,238,.12);font-size:.7rem;color:var(--brand-2);font-weight:700;letter-spacing:.05em}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--brand-2);opacity:.7;padding:.25rem 0}
.flow-arrow svg{width:28px;height:28px;transform:rotate(90deg);animation:flowPulse 2.4s infinite ease-in-out}
@media(min-width:1024px){
  .flow-arrow{padding:0}
  .flow-arrow svg{transform:rotate(0)}
}
@keyframes flowPulse{0%,100%{opacity:.4;transform:rotate(var(--rot,0deg)) translateX(0)}50%{opacity:1;transform:rotate(var(--rot,0deg)) translateX(3px)}}
@media(max-width:1023px){.flow-arrow svg{--rot:90deg}}
.flow-step.highlight{background:linear-gradient(160deg,rgba(34,211,238,.12),rgba(167,139,250,.06));border-color:rgba(34,211,238,.5);box-shadow:0 20px 40px -15px rgba(34,211,238,.3)}

/* ── PHASE LIST (Ablauf – große Karten) ──────────── */
.phase-list{display:grid;gap:1rem;max-width:60rem;margin:0 auto}
.phase-card{position:relative;background:linear-gradient(180deg,rgba(30,41,59,.55),rgba(15,23,42,.7));border:1px solid var(--border);border-radius:1.5rem;padding:1.75rem;display:grid;grid-template-columns:1fr;gap:1.5rem;transition:all .25s ease;overflow:hidden}
.phase-card:hover{border-color:rgba(34,211,238,.35);transform:translateY(-3px);box-shadow:0 25px 60px -20px rgba(34,211,238,.18)}
@media(min-width:768px){.phase-card{grid-template-columns:180px 1fr;padding:2.25rem 2.5rem;gap:2rem;align-items:start}}
.phase-card.is-feature{background:linear-gradient(160deg,rgba(34,211,238,.12),rgba(167,139,250,.05));border-color:rgba(34,211,238,.4);box-shadow:0 30px 70px -20px rgba(34,211,238,.3)}
.phase-card.is-feature::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent))}

.phase-head{display:flex;flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap}
@media(min-width:768px){.phase-head{flex-direction:column;align-items:flex-start;gap:1rem}}
.phase-num{width:68px;height:68px;border-radius:1.15rem;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#02141a;font-weight:900;font-size:1.85rem;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px -8px rgba(34,211,238,.55);flex-shrink:0;line-height:1}
.phase-card.is-feature .phase-num{background:linear-gradient(135deg,var(--brand-2),var(--accent));box-shadow:0 14px 32px -8px rgba(167,139,250,.55)}
.phase-time-tag{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:9999px;background:rgba(34,211,238,.12);color:var(--brand-2);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(34,211,238,.3);white-space:nowrap}

.phase-body{min-width:0}
.phase-body h3{font-size:clamp(1.3rem,2.5vw,1.55rem);color:#fff;margin-bottom:.65rem;letter-spacing:-.02em;line-height:1.25}
.phase-body>p{color:#cbd5e1;line-height:1.65;font-size:1rem;margin:0}

.phase-docs{margin-top:1.25rem;background:rgba(15,23,42,.55);border:1px dashed rgba(34,211,238,.25);border-radius:1rem;padding:1.15rem 1.25rem}
.phase-docs .docs-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-2);display:block;margin-bottom:.75rem}
.phase-docs .docs-items{display:flex;flex-wrap:wrap;gap:.5rem}
.phase-docs .item{display:inline-flex;align-items:center;gap:.45rem;background:rgba(30,41,59,.85);border:1px solid var(--border);border-radius:.6rem;padding:.5rem .85rem;font-size:.85rem;color:#e2e8f0;font-weight:500}
.phase-docs .item .ic{color:var(--brand-2);font-size:.95rem;line-height:1}

.phase-quote{margin-top:1.25rem;padding:1rem 1.15rem;background:rgba(34,197,94,.06);border-left:3px solid #22c55e;border-radius:0 .85rem .85rem 0;font-size:.92rem;color:#bbf7d0;line-height:1.55}
.phase-quote strong{color:#fff;display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}

.phase-connector{height:32px;display:flex;justify-content:center;align-items:center;color:var(--brand-2);opacity:.55}
.phase-connector svg{width:26px;height:26px;animation:phaseDown 2.4s infinite ease-in-out}
@keyframes phaseDown{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(4px);opacity:1}}