:root{
  --ink:#111110;
  --ink-2:#1A1917;
  --surface:#1A1917;
  --muted:#6E6A61;
  --paper:#FFFFFF;
  --soft:#F7F5F0;
  --soft-2:#EFEBE2;
  --line:#E7E2D7;
  --line-2:rgba(17,17,16,.08);
  --accent:#8A5F00;
  --accent-soft:#FBF1DC;
  --surface-2:#1F1D1A;
  --amber:#F2A900;
  --amber-hover:#FFB91A;
  --on-amber:#1A1204;
  --text-dark:#F5F3EE;
  --muted-dark:#A8A49B;
  --ok:#8A5F00;
  --ok-soft:#FBF1DC;
  --font-d:'Archivo', system-ui, sans-serif;
  --font-b:'IBM Plex Sans', system-ui, sans-serif;
  --max:1200px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  font-family:var(--font-b); background:var(--paper); color:var(--ink);
  font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-d); font-weight:700; line-height:1.08; letter-spacing:-.02em; }
a{ color:inherit; }
.wrap{ width:min(var(--max), 92vw); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 18px; z-index:200; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-d); font-weight:600; font-size:15px; letter-spacing:-.01em;
  padding:12px 22px; border-radius:10px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .16s, color .16s, border-color .16s;
}
.btn.sm{ padding:9px 16px; font-size:14px; border-radius:8px; }
.btn.lg{ padding:15px 28px; font-size:16px; }
.btn.solid{ background:var(--amber); color:var(--on-amber); }
.btn.solid:hover{ background:var(--amber-hover); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--ink); }
.btn.ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.28); }
.btn.ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.chip{
  display:inline-block; font-family:var(--font-d); font-size:11.5px; font-weight:600;
  letter-spacing:.03em; padding:4px 10px; border-radius:7px;
  background:var(--soft-2); color:var(--muted);
}
.chip-accent{ background:var(--amber); color:var(--on-amber); }
.chip-soft{ background:var(--soft-2); color:var(--muted); }
.chip-ok{ background:var(--ok-soft); color:var(--ok); }

.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.head-row{ display:flex; align-items:center; gap:26px; padding:14px 0; }
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.logo-mark{ display:grid; grid-template-columns:1fr 1fr; gap:2.5px; width:22px; }
.logo-mark i{ display:block; height:9px; background:var(--ink); border-radius:2px; }
.logo-mark i:nth-child(2){ background:var(--amber); border-radius:2px 6px 2px 2px; }
.logo-mark i:nth-child(3){ border-radius:2px 2px 6px 2px; }
.logo-text{ font-family:var(--font-d); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.head-nav{ display:none; margin-left:auto; }
.head-nav ul{ display:flex; gap:24px; list-style:none; }
.head-nav a{ text-decoration:none; font-size:15px; color:var(--muted); }
.head-nav a:hover{ color:var(--ink); }
.head-cta{ display:none; gap:10px; flex:none; }

.nav-toggle{
  display:inline-flex; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  border-radius:10px; background:none; cursor:pointer; align-items:center; justify-content:center;
}
.burger{ display:block; width:19px; height:13px; position:relative; }
.burger i{
  position:absolute; left:0; width:100%; height:2px; background:var(--ink); border-radius:2px;
  transition:top .2s, transform .2s, opacity .16s;
}
.burger i:nth-child(1){ top:0; }
.burger i:nth-child(2){ top:5.5px; }
.burger i:nth-child(3){ top:11px; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1){ top:5.5px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3){ top:5.5px; transform:rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap:6px; padding:8px 4vw 20px;
  border-top:1px solid var(--line); background:var(--paper);
}
.mobile-nav.open{ display:flex; }
.mobile-nav ul{ list-style:none; }
.mobile-nav li + li{ border-top:1px solid var(--line); }
.mobile-nav a{ display:block; padding:13px 2px; text-decoration:none; font-family:var(--font-d); font-weight:600; font-size:16px; }
.mobile-nav .btn{ margin-top:10px; }

.hero{ padding:40px 0 52px; position:relative; overflow:hidden; }

.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
.kicker{
  font-family:var(--font-d); font-weight:600; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.hero h1{ font-size:clamp(36px,5vw,62px); margin-bottom:18px; max-width:16ch; }
.lede{ font-size:19px; color:var(--muted); max-width:46ch; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 18px; }
.hero-note{ font-size:14.5px; color:var(--muted); }

.browser{
  background:var(--paper); border:1px solid var(--line); border-radius:14px 14px 6px 6px;
  box-shadow:0 24px 60px -30px rgba(13,17,23,.35); overflow:hidden;
}
.browser-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--soft); border-bottom:1px solid var(--line);
}
.browser-bar .dot{ width:9px; height:9px; border-radius:50%; background:var(--soft-2); }
.browser-bar .url{
  margin-left:10px; font-size:12px; color:var(--muted); background:var(--paper);
  border:1px solid var(--line); border-radius:7px; padding:3px 14px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.browser-body{ padding:16px; display:grid; gap:14px; }
.mock-hero{ display:grid; gap:9px; }
.mock-line{ display:block; height:12px; border-radius:4px; background:var(--ink); opacity:.86; }
.mock-line.w60{ width:60%; }
.mock-line.w40{ width:40%; height:9px; opacity:.28; }
.mock-btn{ display:block; width:112px; height:32px; border-radius:8px; background:var(--amber); margin-top:4px; }
.mock-btn.small{ width:84px; height:26px; }
.mock-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mock-card{ display:block; height:56px; border-radius:8px; background:var(--soft); border:1px solid var(--line); }
.mock-cards .mock-card:nth-child(2){ border-radius:8px 16px 8px 8px; }
.mock-form{ display:grid; gap:8px; border-top:1px solid var(--line); padding-top:14px; }
.mock-field{ display:block; height:28px; border-radius:7px; background:var(--soft); border:1px solid var(--line); }

.hero-visual{ position:relative; }
.flow-rail{
  list-style:none; position:static; width:auto; margin-top:16px;
  background:var(--ink); color:#fff; border-radius:14px 6px 14px 14px; padding:16px 16px 14px;
  box-shadow:0 22px 44px -22px rgba(13,17,23,.6); display:grid; gap:11px;
}
.flow-rail li{ display:flex; align-items:center; gap:9px; font-size:13px; position:relative; }
.node-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); flex:none; }
.node-dot.is-end{ background:var(--accent); box-shadow:0 0 0 4px rgba(242,169,0,.20); }
.flow-rail li:not(:last-child)::after{
  content:""; position:absolute; left:3.5px; top:14px; width:1px; height:11px;
  background:rgba(255,255,255,.2);
}

.section{ padding:52px 0; }
.section.band{ background:var(--soft); border-block:1px solid var(--line); }
.sec-head{ max-width:640px; margin-bottom:26px; }
.eyebrow{
  font-family:var(--font-d); font-weight:600; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.sec-head h2{ font-size:clamp(27px,3.4vw,42px); margin-bottom:12px; }
.sec-lede{ color:var(--muted); font-size:17px; }

.problem-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.prob{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:26px 22px; }
.problem-grid .prob:nth-child(2){ border-radius:6px 20px 14px 14px; transform:translateY(-12px); }
.problem-grid .prob:nth-child(3){ transform:translateY(10px); }
.problem-grid .prob:nth-child(4){ border-radius:14px 14px 20px 6px; }
.prob h3{ font-size:17px; margin-bottom:8px; }
.prob p{ font-size:14.5px; color:var(--muted); }

.statement{
  font-family:var(--font-d); font-weight:700; font-size:clamp(21px,2.6vw,30px);
  letter-spacing:-.02em; margin-top:44px; max-width:24ch;
}
.statement.small{ font-size:clamp(18px,2.1vw,24px); max-width:34ch; margin-top:32px; }

.chain{ list-style:none; display:grid; grid-template-columns:1fr; gap:12px; }
.chain-item{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:16px 14px 14px; display:grid; gap:10px; align-content:start; position:relative;
}
.chain-item:nth-child(4){ border-radius:6px 18px 12px 12px; }
.chain-item.accent{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,169,0,.12); }
.chain-step{ font-family:var(--font-d); font-weight:700; font-size:12px; color:var(--accent); }
.chain-title{ font-family:var(--font-d); font-weight:600; font-size:15px; line-height:1.25; margin-bottom:2px; }
.chain-text{ font-size:13.5px; line-height:1.5; color:var(--muted); }
.chain-note{ margin-top:44px; color:var(--muted); font-size:15.5px; }

.mod-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.mod{ border:1px solid var(--line); border-radius:14px; padding:26px 24px; background:var(--paper); }
.mod-grid .mod:nth-child(2){ transform:translateY(-14px); border-radius:6px 20px 14px 14px; }
.mod-grid .mod:nth-child(4){ transform:translateY(12px); }
.mod-grid .mod:nth-child(6){ border-radius:14px 6px 20px 14px; }
.mod.wide{ grid-column:span 1; display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-items:center; background:var(--ink); color:var(--text-dark); border-color:var(--ink); }
.mod.wide p{ color:var(--muted-dark); grid-column:2; }
.mod.wide h3{ color:var(--text-dark); display:flex; align-items:center; gap:10px; }
.mod-num{ font-family:var(--font-d); font-weight:700; font-size:12px; color:var(--accent); display:block; margin-bottom:10px; }
.mod.wide .mod-num{ margin:0; }
.mod h3{ font-size:19px; margin-bottom:8px; }
.mod p{ font-size:14.5px; color:var(--muted); }

.branch-list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.branch-list li{
  border:1px solid var(--line); border-radius:7px; padding:9px 18px;
  font-family:var(--font-d); font-weight:600; font-size:14.5px; background:var(--paper);
}
.branch-list li:nth-child(3n){ border-radius:6px 100px 100px 100px; }
.branch-list li.more{ background:var(--accent-soft); border-color:transparent; color:var(--accent); }

.demo-box{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px; }
.demo-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.demo-tab{
  font-family:var(--font-d); font-weight:600; font-size:14px; padding:9px 16px;
  border:1px solid var(--line); background:var(--paper); border-radius:7px; cursor:pointer;
  color:var(--muted); transition:background .15s, color .15s, border-color .15s;
}
.demo-tab:hover{ color:var(--ink); }
.demo-tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--text-dark); }
.demo-stage{ display:grid; grid-template-columns:1fr; gap:22px; align-items:start; }
.demo-browser{ border-radius:12px 12px 6px 6px; }
.demo-browser .browser-body{ min-height:264px; align-content:start; }
.demo-side h3{ font-size:20px; margin-bottom:8px; }
.demo-desc{ color:var(--muted); font-size:15px; margin-bottom:18px; }
.demo-steps{ list-style:none; display:grid; gap:0; counter-reset:d; }
.demo-steps li{
  counter-increment:d; position:relative; padding:11px 0 11px 38px;
  border-top:1px solid var(--line); font-size:15px;
}
.demo-steps li:last-child{ border-bottom:1px solid var(--line); }
.demo-steps li::before{
  content:counter(d,decimal-leading-zero); position:absolute; left:0; top:11px;
  font-family:var(--font-d); font-weight:700; font-size:12px; color:var(--accent);
}
.demo-hint{ margin-top:16px; font-size:13.5px; color:var(--muted); }

.dm-head{ display:grid; gap:8px; }
.dm-title{ height:14px; border-radius:4px; background:var(--ink); opacity:.86; width:66%; }
.dm-sub{ height:9px; border-radius:4px; background:var(--soft-2); width:44%; }
.dm-cta{ height:30px; width:120px; border-radius:8px; background:var(--amber); margin-top:4px; }
.dm-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.dm-tile{
  border:1px solid var(--line); border-radius:9px; background:var(--soft);
  padding:11px 10px; display:grid; gap:6px; align-content:start; min-height:74px;
}
.dm-tile b{ font-family:var(--font-d); font-size:12px; font-weight:600; line-height:1.2; }
.dm-tile span{ height:6px; border-radius:3px; background:var(--soft-2); }
.dm-row .dm-tile:nth-child(2){ border-radius:9px 16px 9px 9px; border-color:var(--amber); background:var(--accent-soft); }
.dm-panel{
  margin-top:8px; border:1px solid var(--line); border-radius:9px; padding:12px;
  display:grid; gap:7px; background:var(--paper);
}
.dm-field{ height:26px; border-radius:6px; background:var(--soft); border:1px solid var(--line); }
.dm-field.half{ width:56%; }
.dm-submit{ height:28px; width:118px; border-radius:7px; background:var(--ink); }

.stack-flow{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center; }
.stack{ border:1px solid var(--line); border-radius:14px; padding:24px 22px; background:var(--paper); }
.stack.result{ background:var(--ink); border-color:var(--ink); color:var(--text-dark); border-radius:6px 20px 20px 20px; }
.stack-label{ font-family:var(--font-d); font-weight:700; font-size:15px; margin-bottom:14px; }
.pill-list{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; }
.pill-list li{ font-size:13px; border:1px solid var(--line); border-radius:7px; padding:5px 12px; }
.pill-list.soft li{ background:var(--soft); }
.result-intro{ font-size:14px; color:var(--muted-dark); margin-bottom:10px; }
.result-list{ list-style:none; display:grid; gap:8px; }
.result-list li{ font-size:16px; font-family:var(--font-d); font-weight:600; padding-left:20px; position:relative; color:var(--text-dark); }
.result-list li::before{
  content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--amber);
}
.stack-arrow{ width:26px; height:2px; background:var(--line); position:relative; }
.stack-arrow::after{
  content:""; position:absolute; right:-1px; top:-4px; width:9px; height:9px;
  border-top:2px solid var(--line); border-right:2px solid var(--line); transform:rotate(45deg);
}

.live-grid{ display:grid; grid-template-columns:1fr; gap:14px; }

.note{ margin-top:40px; font-size:13.5px; color:var(--muted); max-width:70ch; }

.price-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.price{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:30px 26px; display:grid; gap:14px; align-content:start; }
.price.featured{ border-color:var(--ink); box-shadow:0 24px 50px -30px rgba(13,17,23,.45); transform:translateY(-16px); border-radius:6px 22px 16px 16px; }
.price h3{ font-size:20px; }
.amount{ font-family:var(--font-d); font-weight:800; font-size:38px; letter-spacing:-.03em; }
.amount span{ font-size:15px; font-weight:600; color:var(--muted); margin-left:6px; letter-spacing:0; }
.price-plus{ font-size:13.5px; color:var(--muted); }
.price ul{ list-style:none; display:grid; gap:8px; }
.price li{ font-size:15px; padding-left:22px; position:relative; }
.price li::before{
  content:""; position:absolute; left:0; top:8px; width:9px; height:5px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}
.price .btn{ margin-top:6px; }
.price-legal{ margin-top:22px; font-size:13px; color:var(--muted); }

.addons{ margin-top:40px; display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.addons h3{ font-size:20px; margin-bottom:16px; }
.addon-list{ list-style:none; display:grid; }
.addon-list li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:14px 0; border-top:1px solid var(--line); font-size:15px;
}
.addon-list li:last-child{ border-bottom:1px solid var(--line); }
.addon-list b{ font-family:var(--font-d); font-weight:600; }
.addon-list span{ color:var(--muted); white-space:nowrap; }
.lp-explain{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 24px; }
.lp-explain h4{ font-size:17px; margin-bottom:10px; }
.lp-explain p{ font-size:15px; color:var(--muted); margin-bottom:18px; }
.lp-chain{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; counter-reset:lp; }
.lp-chain li{
  counter-increment:lp; font-size:13.5px; border:1px solid var(--line);
  border-radius:8px; padding:7px 12px 7px 28px; position:relative; background:var(--soft);
}
.lp-chain li::before{
  content:counter(lp); position:absolute; left:11px; top:7px;
  font-family:var(--font-d); font-weight:700; font-size:11px; color:var(--accent);
}

.steps{ list-style:none; display:grid; grid-template-columns:1fr; gap:14px; }
.steps li{ border-top:2px solid var(--ink); padding-top:16px; }
.steps li:nth-child(2){ transform:translateY(18px); }
.steps li:nth-child(4){ transform:translateY(10px); }
.step-num{ font-family:var(--font-d); font-weight:700; font-size:12px; color:var(--accent); display:block; margin-bottom:10px; }
.steps h3{ font-size:17px; margin-bottom:8px; }
.steps p{ font-size:14.5px; color:var(--muted); }

.compare{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
.comp{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:28px 26px; }
.comp.ours{ background:var(--ink); border-color:var(--ink); color:var(--text-dark); border-radius:6px 22px 16px 16px; }
.comp h3{ font-size:19px; margin-bottom:18px; }
.comp-list{ list-style:none; counter-reset:cc; display:grid; gap:0; }
.comp-list li{
  counter-increment:cc; position:relative; padding:11px 0 11px 34px;
  border-top:1px solid var(--line); font-size:15px;
}
.comp.ours .comp-list li{ border-top-color:rgba(255,255,255,.14); }
.comp-list li::before{
  content:counter(cc,decimal-leading-zero); position:absolute; left:0; top:11px;
  font-family:var(--font-d); font-weight:700; font-size:11.5px; color:var(--muted);
}
.comp.ours .comp-list li::before{ color:var(--accent); }
.comp-list li.end{ color:var(--muted); }
.comp-list li.loop{ color:var(--text-dark); font-weight:600; }

.road-grid{ list-style:none; display:grid; grid-template-columns:1fr; gap:10px; }
.road-grid li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--paper);
}
.road-grid li:nth-child(4n){ border-radius:6px 18px 12px 12px; }
.road-grid span{ font-family:var(--font-d); font-weight:600; font-size:15px; }

.faq-wrap{ max-width:860px; }
.faq-list{ display:grid; gap:8px; }
.faq-item{ border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.faq-item:nth-child(3n){ border-radius:6px 16px 12px 12px; }
.faq-item > summary{
  list-style:none; cursor:pointer; padding:16px 52px 16px 18px; position:relative;
  font-family:var(--font-d); font-weight:600; font-size:16px;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::after{
  content:""; position:absolute; right:20px; top:22px; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s;
}
.faq-item[open] > summary::after{ transform:rotate(-135deg); top:26px; }
.faq-item p{ padding:0 18px 18px; color:var(--muted); font-size:15px; }

.final{ background:var(--ink); color:var(--text-dark); padding:60px 0; }
.final-inner{ max-width:720px; text-align:center; margin-inline:auto; }
.final h2{ font-size:clamp(28px,4vw,46px); margin-bottom:16px; }
.final p{ color:rgba(255,255,255,.72); font-size:17px; }
.final-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:30px 0 18px; }
.final-note{ font-size:13px; color:var(--muted-dark); opacity:.8; }

.site-foot{ background:var(--ink); color:var(--muted-dark); padding:56px 0 26px; border-top:1px solid rgba(255,255,255,.1); }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
.foot-brand p{ font-size:14px; margin-top:14px; max-width:34ch; }
.site-foot .logo-mark i{ background:#fff; }
.site-foot .logo-mark i:nth-child(2){ background:var(--amber); }
.site-foot .logo-text{ color:var(--text-dark); }
.foot-col h3{ font-size:13px; color:var(--text-dark); margin-bottom:14px; letter-spacing:.04em; text-transform:uppercase; }
.foot-col a{ display:block; text-decoration:none; font-size:14.5px; padding:5px 0; }
.foot-col a:hover{ color:var(--text-dark); }
.foot-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px;
}

.reveal{ opacity:0; transition:opacity .3s ease; }
.reveal.in{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transition:none; }
  *{ animation:none !important; }
}

.legal{ padding-top:52px; }
.legal-wrap{ max-width:780px; }
.legal h1{ font-size:clamp(30px,3.8vw,44px); margin-bottom:26px; }
.legal h2{ font-size:19px; margin:34px 0 8px; }
.legal p{ color:var(--muted); font-size:15.5px; }
.legal-hint{
  margin-top:36px; padding:16px 18px; background:var(--soft);
  border:1px solid var(--line); border-radius:6px 16px 12px 12px; font-size:14px;
}
.crumbs{ margin-bottom:20px; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; }
.crumbs li{ color:var(--muted); display:flex; align-items:center; gap:8px; }
.crumbs li + li::before{ content:"/"; opacity:.5; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.crumbs [aria-current="page"]{ color:var(--ink); font-weight:600; }
.nf-list{ list-style:none; display:grid; gap:2px; margin-top:22px; }
.nf-list li{ border-top:1px solid var(--line); }
.nf-list li:last-child{ border-bottom:1px solid var(--line); }
.nf-list a{
  display:block; padding:15px 2px; text-decoration:none;
  font-family:var(--font-d); font-weight:600; font-size:16px;
}
.nf-list a:hover{ color:var(--accent); }

.demo-claim{
  margin-top:20px; font-family:var(--font-d); font-weight:700; font-size:17px;
  line-height:1.3; letter-spacing:-.01em;
}
.position-note{ margin-top:32px; max-width:52ch; }
.position-note .statement{ margin:0 0 8px; }
.position-note p:last-child{ color:var(--muted); font-size:16px; }

@media(min-width:721px){
  .section{ padding:70px 0; }
  .hero{ padding:56px 0 66px; }
  .final{ padding:78px 0; }
  .sec-head{ margin-bottom:34px; }
  .browser-body{ padding:22px; }
  .problem-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .chain{ grid-template-columns:repeat(4,1fr); }
  .mod-grid{ grid-template-columns:1fr 1fr; gap:18px; }
  .mod.wide{ grid-column:span 2; }
  .live-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .road-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .problem-grid .prob:nth-child(2){ transform:translateY(-12px); }
  .problem-grid .prob:nth-child(3){ transform:translateY(10px); }
  .mod-grid .mod:nth-child(2){ transform:translateY(-14px); }
  .mod-grid .mod:nth-child(4){ transform:translateY(12px); }

  .steps li:nth-child(2){ transform:translateY(18px); }
  .steps li:nth-child(4){ transform:translateY(10px); }
}

@media(min-width:1041px){
  .section{ padding:78px 0; }
  .hero{ padding:64px 0 72px; }
  .final{ padding:88px 0; }
  .sec-head{ margin-bottom:38px; }
  .head-nav{ display:block; }
  .head-cta{ display:flex; }
  .nav-toggle{ display:none; }
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:56px; }
  .flow-rail{ position:absolute; right:-8px; bottom:-34px; width:184px; margin-top:0; }
  .problem-grid{ grid-template-columns:repeat(4,1fr); }
  .chain{ grid-template-columns:repeat(4,1fr); }
  .mod-grid{ grid-template-columns:repeat(3,1fr); }
  .mod.wide{ grid-column:span 3; }
  .demo-stage{ grid-template-columns:1.15fr .85fr; gap:26px; }
  .stack-flow{ grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; }
  .price-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .price.featured{ transform:translateY(-16px); }
  .steps{ grid-template-columns:repeat(5,1fr); }
  .compare{ grid-template-columns:1fr 1.15fr; gap:22px; }
  .road-grid{ grid-template-columns:repeat(3,1fr); }
  .addons{ grid-template-columns:.9fr 1.1fr; gap:32px; margin-top:56px; }
  .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
}

.split-def{
  display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:stretch;
  margin-top:26px; max-width:820px;
}
.def-col{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:22px 24px; }
.def-col.accent{ background:var(--ink); border-color:var(--ink); color:var(--text-dark); border-radius:6px 18px 14px 14px; }
.def-tag{ font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px; }
.def-col.accent .def-tag{ color:var(--text-dark); }
.def-col p{ font-size:16px; margin:0; }
.def-col.accent p{ color:var(--muted-dark); }
.def-arrow{ align-self:center; width:24px; height:2px; background:var(--line); position:relative; }
.def-arrow::after{ content:""; position:absolute; right:-1px; top:-4px; width:9px; height:9px; border-top:2px solid var(--line); border-right:2px solid var(--line); transform:rotate(45deg); }

.mid-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.demo-cta{ margin-top:22px; }

.final-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
.final-copy{ text-align:left; }
.final .final-copy h2{ font-size:clamp(26px,3.4vw,40px); }
.final-points{ list-style:none; display:grid; gap:9px; margin:20px 0 0; }
.final-points li{ position:relative; padding-left:24px; color:var(--muted-dark); font-size:15.5px; }
.final-points li::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:5px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.lead-form{ background:var(--paper); color:var(--ink); border-radius:16px; padding:26px; display:grid; gap:14px; text-align:left; }
.lf-row{ display:grid; grid-template-columns:1fr; gap:14px; }
.lf-field{ display:grid; gap:6px; }
.lf-field label{ font-family:var(--font-d); font-weight:600; font-size:13px; }
.lf-field .opt{ color:var(--muted); font-weight:500; }
.lf-field input, .lf-field select, .lf-field textarea{
  font-family:var(--font-b); font-size:15px; padding:11px 13px;
  border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); width:100%;
}
.lf-field textarea{ resize:vertical; min-height:70px; }
.lf-consent{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--muted); line-height:1.5; }
.lf-consent input{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:var(--accent); }
.lf-consent a{ color:var(--accent); }
.lf-submit{ width:100%; }
.lf-status{ font-size:14px; margin:0; }
.lf-status.ok{ color:#8A5F00; }
.lf-status.err{ color:#8A5F00; font-weight:600; }
.lead-form.sent{ text-align:center; align-content:center; min-height:220px; }

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(13,17,23,.92); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.12);
}
.sticky-cta .btn{ flex:1; }
.sticky-cta .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.3); }

@media(min-width:721px){
  .final-grid{ grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
  .lf-row{ grid-template-columns:1fr 1fr; }
}
@media(max-width:720px){
  .split-def{ grid-template-columns:1fr; }
  .def-arrow{ justify-self:center; width:2px; height:22px; }
  .def-arrow::after{ right:-4px; top:auto; bottom:-1px; transform:rotate(135deg); }
  .sticky-cta{ display:flex; }
  main{ padding-bottom:68px; }
}

.section.dark{ background:var(--ink); color:var(--text-dark); border-block:1px solid rgba(255,255,255,.06); }
.section.dark .sec-head h2,
.section.dark .statement,
.section.dark .chain-title,
.section.dark .chain-text,
.section.dark .comp h3,
.section.dark .comp-list li.loop{ color:var(--text-dark); }
.section.dark .sec-lede,
.section.dark .chain-note,
.section.dark .comp-list li,
.section.dark .comp-list li.end{ color:var(--muted-dark); }
.section.dark .eyebrow,
.section.dark .chain-step{ color:var(--amber); }
.section.dark .chain-item{ background:var(--surface); border-color:rgba(255,255,255,.10); }
.section.dark .chain-item.accent{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(242,169,0,.14); }
.section.dark .comp{ background:var(--surface); border-color:rgba(255,255,255,.10); }
.section.dark .comp.ours{ background:var(--surface-2); border-color:rgba(255,255,255,.14); }
.section.dark .comp-list li{ border-top-color:rgba(255,255,255,.12); }
.section.dark .comp.ours .comp-list li::before{ color:var(--amber); }
.section.dark .comp-list li::before{ color:var(--muted-dark); }
.section.dark .mid-cta .btn.ghost{ color:var(--text-dark); border-color:rgba(255,255,255,.25); }
.section.dark .mid-cta .btn.ghost:hover{ border-color:var(--text-dark); background:rgba(255,255,255,.06); }

.live-grid .live-card:nth-child(2){ transform:none; border-radius:6px 22px 16px 16px; }
.live-grid .live-card:nth-child(2):hover{ transform:translateY(-3px); }

.live-text{ padding:22px 24px 26px; display:grid; gap:9px; align-content:start; }
.live-text h3{ font-size:22px; }
.live-text p{ color:var(--muted); font-size:15px; }

.live-card:hover{ transform:translateY(-3px); }
.hero-inline{ color:var(--accent); font-weight:600; text-decoration:none; white-space:nowrap; }
.hero-inline:hover{ text-decoration:underline; }

.live-card{
  display:grid; grid-template-rows:auto 1fr; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.live-grid .live-card:nth-child(2){ border-radius:6px 22px 16px 16px; }
.live-frame{ border-bottom:1px solid var(--line); background:var(--soft); }
.lf-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line); }
.lf-bar span{ width:9px; height:9px; border-radius:50%; background:var(--soft-2); }
.lf-bar em{ margin-left:8px; font-size:11.5px; font-style:normal; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:2px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.lf-bar .lf-hint{ font-size:11px; color:var(--muted); white-space:nowrap; }
.lf-viewport{ position:relative; height:440px; overflow:hidden; background:var(--paper); border-radius:0 0 4px 4px; }
.lf-viewport::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px; z-index:3;
  background:linear-gradient(to top, var(--paper) 30%, rgba(255,255,255,0));
  pointer-events:none;
}
.lf-viewport iframe{
  display:block; width:100%; height:600px; border:0;
  zoom:.72;
}
@supports not (zoom:1){
  .lf-viewport iframe{
    width:139%; height:833px; zoom:normal;
    transform:scale(.72); transform-origin:top left;
  }
}

.live-card:hover
.live-text{ padding:22px 24px 26px; display:grid; gap:9px; align-content:start; }
.live-text h3{ font-size:22px; }
.live-text p{ color:var(--muted); font-size:15px; }
.live-text .btn{ justify-self:start; margin-top:6px; }
.live-text .btn i{ font-style:normal; }
@media(max-width:720px){
  .lf-viewport{ height:380px; }
  .lf-viewport iframe{ width:100%; height:560px; zoom:.62; }
  @supports not (zoom:1){
    .lf-viewport iframe{ width:161%; height:903px; zoom:normal; transform:scale(.62); transform-origin:top left; }
  }
}

.price-grid.price-5{ grid-template-columns:repeat(5,1fr); gap:14px; align-items:stretch; }
.price-grid.price-5 .price{ padding:24px 20px; }
.price-grid.price-5 .price h3{ font-size:18px; }
.price-grid.price-5 .amount{ font-size:30px; }
.price-grid.price-5 .price li{ font-size:13.5px; padding-left:20px; }
.price-tag{ font-size:13px; color:var(--muted); margin-top:-4px; }
.price-hint{ font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin-top:2px; }
.price-business{ background:var(--ink); color:var(--text-dark); border-color:var(--ink); border-radius:6px 20px 16px 16px; }
.price-business h3, .price-business .amount{ color:var(--text-dark); }
.price-business .amount span{ color:var(--muted-dark); }
.price-business .price-tag{ color:var(--muted-dark); }
.price-business li{ color:var(--muted-dark); }
.price-business li::before{ border-color:var(--amber); }
@media(max-width:1100px){
  .price-grid.price-5{ grid-template-columns:repeat(2,1fr); }
  .price-grid.price-5 .featured{ transform:none; }
}
@media(max-width:640px){
  .price-grid.price-5{ grid-template-columns:1fr; }
}

.pkg-details{ margin-top:52px; }
.pkg-details-title{ font-size:20px; margin-bottom:18px; }
.pkg-acc{ display:grid; gap:10px; }
.pkg-item{ border:1px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; }
.pkg-item:nth-child(3n){ border-radius:6px 16px 12px 12px; }
.pkg-item > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 52px 16px 20px; position:relative;
  font-family:var(--font-d); font-weight:600; font-size:16px;
}
.pkg-item > summary::-webkit-details-marker{ display:none; }
.pkg-item > summary::after{
  content:""; position:absolute; right:20px; top:21px; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s;
}
.pkg-item[open] > summary::after{ transform:rotate(-135deg); top:25px; }
.pkg-name{ color:var(--ink); }
.pkg-price{ margin-left:auto; margin-right:8px; font-family:var(--font-d); font-weight:700; color:var(--accent); font-size:14.5px; white-space:nowrap; }
.pkg-body{ padding:4px 20px 22px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px; }
.pkg-plus, .pkg-note{ grid-column:1 / -1; }
.pkg-plus{ font-size:13.5px; color:var(--muted); font-weight:600; margin-top:6px; }
.pkg-note{ font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }
.pkg-col h4{ font-size:14px; margin-bottom:8px; }
.pkg-col ul{ list-style:none; display:grid; gap:6px; }
.pkg-col li{ font-size:13.5px; color:var(--muted); padding-left:18px; position:relative; line-height:1.5; }
.pkg-col li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:4px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
@media(max-width:640px){
  .pkg-body{ grid-template-columns:1fr; }
  .pkg-item > summary{ flex-wrap:wrap; }
}

.price-grid.price-5 .price-dark{
  background:var(--ink); color:var(--text-dark); border-color:var(--ink);
}
.price-dark h3, .price-dark .amount{ color:var(--text-dark); }
.price-dark .amount span{ color:var(--muted-dark); }
.price-dark .price-tag, .price-dark .price-plus, .price-dark .price-hint{ color:var(--muted-dark); }
.price-dark .price-hint{ border-top-color:rgba(255,255,255,.14); }
.price-dark li{ color:var(--muted-dark); }
.price-dark li::before{ border-color:var(--amber); }
.price-dark .btn.ghost{ color:var(--text-dark); border-color:rgba(255,255,255,.25); }
.price-dark .btn.ghost:hover{ border-color:var(--text-dark); background:rgba(255,255,255,.06); }

.teaser-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.teaser{ display:block; text-decoration:none; background:var(--surface); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:24px; transition:border-color .16s, transform .16s; }
.teaser:nth-child(3n){ border-radius:6px 18px 14px 14px; }
.teaser:hover{ border-color:var(--amber); transform:translateY(-3px); }
.teaser h3{ font-size:19px; color:var(--text-dark); margin-bottom:6px; }
.teaser p{ font-size:14px; color:var(--muted-dark); margin-bottom:12px; }
.teaser-go{ font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--amber); }
.section.dark .branch-list li{ background:var(--surface); border-color:rgba(255,255,255,.14); color:var(--text-dark); }
.section.dark .branch-list li.more{ background:var(--amber); color:var(--on-amber); border-color:transparent; }
.section.dark .mod{ background:var(--surface); border-color:rgba(255,255,255,.10); }
.section.dark .mod h3{ color:var(--text-dark); }
.section.dark .mod p{ color:var(--muted-dark); }
.section.dark .mod-num{ color:var(--amber); }
.section.dark .prob{ background:var(--surface); border-color:rgba(255,255,255,.10); }
.section.dark .prob h3{ color:#fff; }
.section.dark .prob p{ color:rgba(255,255,255,.78); }
.section.dark .stack{ background:var(--surface); border-color:rgba(255,255,255,.10); }
.section.dark .stack-label{ color:var(--text-dark); }
.section.dark .pill-list li{ border-color:rgba(255,255,255,.14); color:var(--text-dark); }
.section.dark .pill-list.soft li{ background:var(--surface-2); }
@media(max-width:900px){ .teaser-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .teaser-grid{ grid-template-columns:1fr; } }

.hero-proof{ list-style:none; margin:22px 0 0; display:grid; gap:9px; max-width:46ch; }
.hero-proof li{
  position:relative; padding-left:26px; font-size:15.5px; color:var(--ink);
  font-family:var(--font-d); font-weight:500;
}
.hero-proof li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:3px; background:var(--amber);
}

.model-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.model{
  background:var(--soft); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; position:relative;
}
.model-num{
  font-family:var(--font-d); font-weight:700; font-size:12.5px; letter-spacing:.12em;
  color:var(--accent); display:block; margin-bottom:10px;
}
.model h3{ font-size:20px; margin-bottom:6px; }
.model-who{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.model-pain, .model-fix{ font-size:14.5px; padding-left:14px; border-left:2px solid var(--line); }
.model-pain{ color:var(--muted); margin-bottom:10px; }
.model-fix{ border-left-color:var(--amber); }

@media (min-width:820px){
  .model-grid{ grid-template-columns:repeat(3, 1fr); }
}

.profile{
  margin-top:26px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:26px 22px;
}
.profile h3{ font-size:18px; margin-bottom:14px; }
.profile-list{ list-style:none; display:grid; gap:12px; }
.profile-list li{ font-size:15px; color:var(--muted); padding-left:16px; border-left:2px solid var(--line); }
.profile-list b{ color:var(--ink); font-family:var(--font-d); }

.usp-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.usp{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:24px 20px; }
.usp h3{ font-size:17px; margin-bottom:8px; }
.usp p{ font-size:14.5px; color:var(--muted); }

@media (min-width:700px){
  .usp-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1000px){
  .usp-grid{ grid-template-columns:repeat(3, 1fr); }
}

.section.dark .def-col,
.section.dark .def-col p,
.section.dark .profile,
.section.dark .profile h3,
.section.dark .usp h3{ color:var(--ink); }
.section.dark .def-col.accent,
.section.dark .def-col.accent p{ color:var(--text-dark); }
.section.dark .def-col.accent p{ color:var(--muted-dark); }
.section.dark .profile-list li,
.section.dark .usp p{ color:var(--muted); }
.section.dark .def-arrow,
.section.dark .def-arrow::after{ background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.28); }
.section.dark .def-arrow::after{ background:none; }

.hero-sub{
  font-size:clamp(19px,2.2vw,26px); font-weight:600; line-height:1.25;
  margin:-6px 0 16px; max-width:22ch; color:var(--ink);
}

.about-wrap{ max-width:760px; }
.about-text{ font-size:17px; color:var(--muted); margin-bottom:14px; }
.about-text:last-child{ margin-bottom:0; }

.split-def{ margin-inline:auto; }
.section.dark .def-col.accent{
  background:var(--surface-2); border:1px solid rgba(255,255,255,.16);
}
.section.dark .def-col.accent .def-tag{ color:var(--amber); }

.branch-block{ margin-top:26px; }
.branch-intro{ font-size:14.5px; color:var(--muted); margin-bottom:12px; }
.pill-list li.more{ background:var(--accent-soft); border-color:transparent; color:var(--accent); font-weight:600; }

#ablauf .compare{ margin-top:44px; }
#ablauf .comp.ours .comp-list li::before{ color:var(--amber); }

.dm-screen{ display:grid; gap:14px; }
.dm-headline{ font-family:var(--font-d); font-weight:700; font-size:21px; line-height:1.15; letter-spacing:-.01em; }
.dm-sub{ font-size:14px; color:var(--muted); margin-top:-8px; }
.dm-hint{ font-size:12.5px; color:var(--muted); }

.dm-cta-btn{
  justify-self:start; font-family:var(--font-d); font-weight:700; font-size:14.5px;
  background:var(--amber); color:var(--on-amber); border:0; border-radius:10px;
  padding:12px 22px; cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.dm-cta-btn:hover{ background:var(--amber-hover); }

.dm-q{ font-family:var(--font-d); font-weight:700; font-size:17px; }
.dm-options{ display:grid; gap:9px; }
.dm-opt{
  text-align:left; font-family:var(--font-b); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  padding:14px 16px; cursor:pointer; position:relative;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.dm-opt::after{ content:"→"; position:absolute; right:14px; color:var(--muted); opacity:0; transition:opacity .15s ease; }
.dm-opt:hover{ border-color:var(--amber); background:var(--accent-soft); }
.dm-opt:hover::after{ opacity:1; }
.dm-opt:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.dm-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.dm-back, .dm-restart{
  font-family:var(--font-d); font-size:13px; font-weight:600; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:7px;
  padding:7px 16px; cursor:pointer;
}
.dm-back:hover, .dm-restart:hover{ color:var(--ink); border-color:var(--ink); }

.dm-done{ display:grid; gap:6px; justify-items:start; }
.dm-check{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--amber); color:var(--on-amber); font-size:19px; font-weight:700;
}
.dm-done-title{ font-family:var(--font-d); font-weight:700; font-size:19px; }
.dm-done-text{ font-size:14px; color:var(--muted); }

.dm-lead{ background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.dm-lead-title{
  font-family:var(--font-d); font-weight:700; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.dm-lead-list{ display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:14px; }
.dm-lead-list dt{ color:var(--muted); }
.dm-lead-list dd{ font-weight:600; }

.demo-steps li.done{ color:var(--muted); }
.demo-steps li.done::before{ content:"✓"; color:var(--amber); }
.demo-steps li.now{ font-weight:600; }
.demo-steps li.now::before{ color:var(--ink); }

.cfg{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:0 0 30px; overflow:hidden; max-width:960px; margin-inline:auto;
}
.cfg-progress{ height:4px; background:var(--soft-2); }
.cfg-progress span{ display:block; height:100%; width:0; background:var(--amber); transition:width .3s ease; }
.cfg-stage{ padding:30px 26px 0; }

.cfg-count{
  font-family:var(--font-d); font-weight:700; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.cfg-q{ font-size:clamp(23px,3vw,32px); margin-bottom:8px; }
.cfg-hint{ font-size:14px; color:var(--muted); margin-bottom:20px; }

.cfg-options{ display:grid; gap:10px; margin-bottom:18px; }
.cfg-opt{
  display:grid; gap:3px; text-align:left; cursor:pointer;
  background:var(--soft); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; font-family:var(--font-b);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.cfg-opt:hover{ border-color:var(--amber); background:var(--accent-soft); }
.cfg-opt:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.cfg-opt.sel{ border-color:var(--amber); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--amber); }
.cfg-opt-label{ font-family:var(--font-d); font-weight:600; font-size:16px; color:var(--ink); }
.cfg-opt-note{ font-size:13.5px; color:var(--muted); }

.cfg-next{ margin-bottom:14px; }
.cfg-back{
  display:inline-block; background:none; border:0; cursor:pointer;
  font-family:var(--font-d); font-size:13.5px; font-weight:600; color:var(--muted); padding:6px 0;
}
.cfg-back:hover{ color:var(--ink); text-decoration:underline; }

.cfg-grid{ display:grid; gap:14px; margin:22px 0 24px; }
.cfg-card{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:22px 20px; }
.cfg-card h3{ font-size:15px; margin-bottom:12px; }
.cfg-mods{ list-style:none; display:grid; gap:8px; }
.cfg-mods li{ font-size:14.5px; padding-left:22px; position:relative; color:var(--ink); }
.cfg-mods li::before{ content:"✓"; position:absolute; left:0; color:var(--amber); font-weight:700; }
.cfg-paket{ background:var(--accent-soft); border-color:var(--amber); }
.cfg-paket-name{ font-family:var(--font-d); font-weight:700; font-size:24px; line-height:1.1; }
.cfg-paket-preis{ font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--accent); margin-bottom:10px; }
.cfg-paket-warum{ font-size:14px; color:var(--muted); margin-bottom:12px; }
.cfg-sys{ font-family:var(--font-d); font-weight:700; font-size:19px; margin-bottom:6px; }
.cfg-link{ font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--accent); text-decoration:none; }
.cfg-link:hover{ text-decoration:underline; }

.cfg-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.cfg-note{ max-width:960px; margin-inline:auto; margin-top:18px; }

@media (min-width:760px){
  .cfg-stage{ padding:36px 34px 0; }
  .cfg-options{ grid-template-columns:repeat(2, 1fr); }
  .cfg-grid{ grid-template-columns:repeat(3, 1fr); align-items:start; }
}

.calc{
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:28px 24px; margin:40px 0 30px;
}
.calc-head h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:6px; }
.calc-head p{ font-size:15px; color:var(--muted); margin-bottom:22px; }
.calc-body{ display:grid; gap:22px; }
.calc-group{ border:0; margin-bottom:22px; }
.calc-group legend{
  font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.calc-note{ font-size:13.5px; color:var(--muted); margin-bottom:10px; }
.calc-radios{ display:grid; gap:9px; }
.calc-radio{
  display:grid; gap:2px; text-align:left; cursor:pointer;
  background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-family:var(--font-b); transition:border-color .15s ease, background .15s ease;
}
.calc-radio:hover{ border-color:var(--amber); }
.calc-radio.sel{ border-color:var(--amber); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--amber); }
.calc-radio-name{ font-family:var(--font-d); font-weight:600; font-size:16px; }
.calc-radio-note{ font-size:13px; color:var(--muted); }
.calc-radio-price{ font-family:var(--font-d); font-weight:600; font-size:13.5px; color:var(--accent); }

.calc-stepper{ display:flex; align-items:center; gap:14px; }
.calc-pm{
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:var(--soft); border:1px solid var(--line);
  font-size:19px; line-height:1; color:var(--ink);
}
.calc-pm:hover{ border-color:var(--ink); }
.calc-stepper output{ font-family:var(--font-d); font-weight:700; font-size:19px; min-width:24px; text-align:center; }

.calc-sum{ background:var(--ink); color:var(--text-dark); border-radius:14px; padding:24px 22px; align-self:start; }
.calc-sum-label{
  font-family:var(--font-d); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted-dark);
}
.calc-sum-month{ font-family:var(--font-d); font-weight:700; font-size:38px; line-height:1.1; margin-bottom:14px; }
.calc-sum-once{ font-family:var(--font-d); font-weight:700; font-size:22px; margin-bottom:16px; }
.calc-lines{ list-style:none; display:grid; gap:6px; margin-bottom:18px; }
.calc-lines li{ font-size:13.5px; color:var(--muted-dark); padding-left:14px; position:relative; }
.calc-lines li::before{ content:"·"; position:absolute; left:2px; color:var(--amber); }
.calc-sum .btn.solid{ width:100%; justify-content:center; }
.calc-hint{ font-size:12px; color:var(--muted-dark); margin-top:10px; }

@media (min-width:820px){
  .calc{ padding:34px 32px; }
  .calc-body{ grid-template-columns:1.4fr 1fr; gap:34px; }
}

.lf-dots{ display:flex; gap:6px; margin-bottom:20px; }
.lf-dot{ height:4px; flex:1; border-radius:2px; background:rgba(255,255,255,.16); transition:background .2s ease; }
.lf-dot.done{ background:var(--amber); opacity:.55; }
.lf-dot.now{ background:var(--amber); }
.lf-step{ display:none; }
.lf-step.on{ display:block; }
.lf-legend{
  font-family:var(--font-d); font-weight:700; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); margin-bottom:16px;
}
.lf-nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.lf-prev{
  background:none; border:0; cursor:pointer; padding:8px 0;
  font-family:var(--font-d); font-size:13.5px; font-weight:600; color:var(--muted-dark);
}
.lf-prev:hover{ color:#fff; text-decoration:underline; }
.lf-step .btn.solid{ margin-top:8px; }

.ba-cols{ display:grid; gap:14px; }
.ba-col{
  background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 22px;
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease;
}
.ba-col h3{ font-size:18px; margin-bottom:14px; }
.ba-col ul{ list-style:none; display:grid; gap:9px; }
.ba-col li{ font-size:14.5px; color:var(--muted); padding-left:20px; position:relative; }
.ba-before li::before{ content:"×"; position:absolute; left:0; color:var(--muted); font-weight:700; }
.ba-after li::before{ content:"✓"; position:absolute; left:0; color:var(--amber); font-weight:700; }
.ba-tag{ margin-top:16px; font-family:var(--font-d); font-weight:700; font-size:15px; }
.ba-after{ border-color:var(--amber); }

@media (min-width:820px){
  .ba-cols{ grid-template-columns:1fr 1fr; }
}

.bk{ display:grid; gap:24px; margin-top:26px; }
.bk-field{ margin-bottom:18px; }
.bk-field label, .bk-label{
  display:block; font-family:var(--font-d); font-weight:700; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:9px;
}
#bkName{
  width:100%; font-family:var(--font-b); font-size:16px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:13px 15px;
}
#bkName:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(242,169,0,.16); }

.bk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bk-chip{
  cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:8px 16px;
  transition:border-color .15s ease, background .15s ease;
}
.bk-chip:hover{ border-color:var(--amber); }
.bk-chip.sel{ background:var(--ink); border-color:var(--ink); color:#fff; }

.bk-colors{ display:flex; gap:10px; }
.bk-color{
  width:34px; height:34px; border-radius:50%; cursor:pointer; background:var(--c);
  border:2px solid transparent; box-shadow:0 0 0 1px var(--line);
}
.bk-color.sel{ border-color:var(--paper); box-shadow:0 0 0 2px var(--ink); }

.bk-note{ font-size:13px; color:var(--muted); margin:18px 0 14px; max-width:42ch; }

.bk-browser{ box-shadow:0 30px 70px -34px rgba(13,17,23,.45); }
.bk-body{ padding:0; display:block; min-height:340px; transition:background .2s ease; }

.bkp-head{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.bkp-logo{ display:flex; align-items:center; gap:7px; font-family:var(--font-d); font-weight:700; font-size:13.5px; }
.bkp-logo i{ width:14px; height:14px; border-radius:4px; background:var(--bk-akzent); display:block; }
.bkp-nav{ display:flex; gap:12px; margin-left:auto; }
.bkp-nav em{ font-style:normal; font-size:11.5px; opacity:.62; }
.bkp-btn{
  font-family:var(--font-d); font-weight:700; font-size:11px; padding:6px 12px; border-radius:7px;
  background:var(--bk-akzent); color:var(--bk-auf); white-space:nowrap;
}

.bkp-hero{ padding:26px 20px 20px; display:grid; gap:8px; }
.bkp-kicker{
  font-family:var(--font-d); font-weight:700; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bk-akzent);
}
.bkp-h1{ font-family:var(--font-d); font-weight:800; font-size:26px; line-height:1.08; letter-spacing:-.02em; }
.bkp-sub{ font-size:13.5px; opacity:.66; }
.bkp-cta{
  justify-self:start; margin-top:8px; font-family:var(--font-d); font-weight:700; font-size:12.5px;
  padding:10px 18px; border-radius:9px; background:var(--bk-akzent); color:var(--bk-auf);
}

.bkp-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:4px 20px 20px; }
.bkp-tile{
  display:grid; gap:6px; padding:12px; border-radius:10px;
  border:1px solid rgba(0,0,0,.09); background:rgba(0,0,0,.02);
}
.bkp-tile b{ font-family:var(--font-d); font-size:11.5px; font-weight:600; }
.bkp-tile i{ display:block; height:5px; border-radius:3px; background:rgba(0,0,0,.10); }
.bkp-tile i.short{ width:62%; }

.bkp-foot{
  display:flex; justify-content:space-between; gap:10px; padding:12px 20px 16px;
  border-top:1px solid rgba(0,0,0,.08); font-size:11px; opacity:.55;
}

.bk-body.is-dark{ color:#F5F3EE; }
.bk-body.is-dark .bkp-head,
.bk-body.is-dark .bkp-foot{ border-color:rgba(255,255,255,.12); }
.bk-body.is-dark .bkp-tile{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.05); }
.bk-body.is-dark .bkp-tile i{ background:rgba(255,255,255,.16); }

@media (min-width:900px){
  .bk{ grid-template-columns:minmax(280px, 360px) 1fr; gap:40px; align-items:start; }
}

.bk-opt{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11px; }
.bk-sub{ font-size:13px; color:var(--muted); margin:-4px 0 10px; }
#bkClaim{
  width:100%; font-family:var(--font-b); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:12px 15px;
}
#bkClaim:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(242,169,0,.16); }
.bk-sections .bk-chip{ font-size:13px; padding:7px 14px; }
.bk-chip.fix{ opacity:.75; cursor:default; background:var(--soft-2); border-color:var(--soft-2); color:var(--muted); }
.bk-chip.fix.sel{ background:var(--soft-2); color:var(--muted); border-color:var(--soft-2); }

.bk-brief{
  margin-top:16px; background:var(--ink); color:var(--text-dark);
  border-radius:14px; padding:22px 20px;
}
.bk-brief-title{
  font-family:var(--font-d); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber); margin-bottom:14px;
}
.bk-brief-list{ list-style:none; display:grid; gap:8px; margin-bottom:18px; }
.bk-brief-list li{ display:grid; grid-template-columns:110px 1fr; gap:12px; font-size:13.5px; }
.bk-brief-k{ color:var(--muted-dark); }
.bk-brief-v{ font-weight:600; }
.bk-brief-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.bk-copy{
  background:none; border:1px solid rgba(255,255,255,.25); border-radius:7px;
  color:var(--text-dark); font-family:var(--font-d); font-weight:600; font-size:13px;
  padding:9px 18px; cursor:pointer;
}
.bk-copy:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.bk-brief .bk-note{ color:var(--muted-dark); margin:14px 0 0; }

.bk-body .bkp-logo, .bk-body .bkp-h1{ font-family:var(--bk-font); }
.bkp-h1{ font-weight:var(--bk-weight); letter-spacing:var(--bk-space); }
.bkp-blocks{ display:grid; gap:16px; padding:4px 20px 18px; }
.bkp-bl{
  display:block; font-family:var(--font-d); font-weight:700; font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.5; margin-bottom:8px;
}
.bkp-text{ display:grid; gap:6px; }
.bkp-text i{ display:block; height:6px; border-radius:3px; background:rgba(0,0,0,.09); }
.bkp-text i.short{ width:55%; }
.bkp-gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.bkp-gal span{ aspect-ratio:1/1; border-radius:8px; background:rgba(0,0,0,.09); }
.bkp-prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bkp-prices span{ border:1px solid rgba(0,0,0,.1); border-radius:9px; padding:12px 10px; display:grid; gap:7px; }
.bkp-prices b{ display:block; height:9px; width:52%; border-radius:3px; background:rgba(0,0,0,.16); }
.bkp-prices i{ display:block; height:5px; border-radius:3px; background:rgba(0,0,0,.09); }
.bkp-prices .hi{ border-color:var(--bk-akzent); box-shadow:inset 0 0 0 1px var(--bk-akzent); }
.bkp-team{ display:flex; gap:10px; }
.bkp-team span{ width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.1); }
.bkp-stars{ display:flex; gap:5px; margin-bottom:8px; }
.bkp-stars span{ width:34px; height:8px; border-radius:3px; background:rgba(0,0,0,.12); }
.bk-body.is-dark .bkp-stars span{ background:rgba(255,255,255,.18); }
.bkp-faq{ display:grid; gap:6px; }
.bkp-faq span{ height:22px; border-radius:7px; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.07); }
.bkp-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.bkp-cal span{ aspect-ratio:1/1; border-radius:6px; background:rgba(0,0,0,.07); }
.bkp-cal .hi{ background:var(--bk-akzent); }
.bkp-form{ display:grid; gap:7px; }
.bkp-form i{ display:block; height:16px; border-radius:6px; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.08); }
.bkp-form i.half{ width:62%; }
.bkp-send{ justify-self:start; width:84px; height:20px; border-radius:6px; background:var(--bk-akzent); }
.bkp-map{ height:74px; border-radius:9px; background:rgba(0,0,0,.08); }

.bk-body.is-dark .bkp-text i,
.bk-body.is-dark .bkp-gal span,
.bk-body.is-dark .bkp-team span,
.bk-body.is-dark .bkp-cal span,
.bk-body.is-dark .bkp-map{ background:rgba(255,255,255,.14); }
.bk-body.is-dark .bkp-prices span,
.bk-body.is-dark .bkp-faq span,
.bk-body.is-dark .bkp-form i{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06); }
.bk-body.is-dark .bkp-prices b{ background:rgba(255,255,255,.22); }
.bk-body.is-dark .bkp-prices i{ background:rgba(255,255,255,.14); }
.bk-body.is-dark .bkp-cal .hi{ background:var(--bk-akzent); }

.pact{ list-style:none; display:grid; gap:14px; }
.pact li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:22px 20px;
}
.pact-num{
  font-family:var(--font-d); font-weight:700; font-size:12px; letter-spacing:.1em;
  color:var(--accent); padding-top:3px;
}
.pact h3{ font-size:17px; margin-bottom:7px; }
.pact p{ font-size:14.5px; color:var(--muted); }

@media (min-width:760px){
  .pact{ grid-template-columns:repeat(2, 1fr); }
}

.effort{ margin-top:44px; background:var(--ink); color:var(--text-dark); border-radius:18px; padding:30px 26px; }
.effort h3{ font-size:22px; margin-bottom:8px; }
.effort-lede{ font-size:15px; color:var(--muted-dark); margin-bottom:22px; max-width:52ch; }
.effort-list{ list-style:none; display:grid; gap:14px; }
.effort-list li{ display:grid; gap:4px; padding-left:16px; border-left:2px solid rgba(255,255,255,.16); }
.effort-time{ font-family:var(--font-d); font-weight:700; font-size:15px; color:var(--amber); }
.effort-list p{ font-size:14.5px; color:var(--muted-dark); }
.effort-sum{ margin-top:22px; font-family:var(--font-d); font-weight:700; font-size:17px; }

@media (min-width:820px){
  .effort{ padding:36px 34px; }
  .effort-list{ grid-template-columns:repeat(4, 1fr); gap:18px; }
}

.bk-picker{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.bk-wheel{
  width:132px; height:132px; border-radius:50%; position:relative; cursor:crosshair; touch-action:none;
  background:
    radial-gradient(circle at center, #fff 0%, rgba(255,255,255,0) 68%),
    conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  box-shadow:0 0 0 1px var(--line), inset 0 0 14px rgba(0,0,0,.10);
}
.bk-wheel:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.bk-wheel-dot{
  position:absolute; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.3); pointer-events:none;
}
.bk-picker-side{ display:grid; gap:6px; align-content:start; }
.bk-mini{ font-size:11.5px; color:var(--muted); font-family:var(--font-d); font-weight:600; }
#bkLight{ width:100%; accent-color:var(--ink); margin-bottom:6px; }
#bkHex{
  font-family:var(--font-d); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:9px 11px; width:100%;
}
#bkHex:focus{ outline:none; border-color:var(--ink); }
.bk-picker-side .bk-colors{ margin-top:10px; }
.bk-picker-side .bk-color{ width:26px; height:26px; }

.bkp-btn, .bkp-cta, .bkp-tile, .bkp-prices span, .bkp-faq span,
.bkp-gal span, .bkp-form i, .bkp-send, .bkp-map, .bkp-cal span{
  border-radius:var(--bk-radius, 9px);
}
.bkp-logo i{ border-radius:calc(var(--bk-radius, 9px) * .45); }

@media (max-width:520px){
  .bk-picker{ grid-template-columns:1fr; }
  .bk-wheel{ justify-self:center; }
}

.pay{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:24px 22px; margin:32px 0 18px; }
.pay-title{ font-family:var(--font-d); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.pay-list{ list-style:none; display:grid; gap:12px; }
.pay-list li{ display:grid; gap:2px; padding-left:16px; border-left:2px solid var(--amber); }
.pay-list b{ font-family:var(--font-d); font-size:15px; }
.pay-list span{ font-size:14px; color:var(--muted); }
.pay-note{ margin-top:16px; font-size:13px; color:var(--muted); }
@media (min-width:760px){ .pay-list{ grid-template-columns:repeat(3,1fr); } }

.nf-list.plain li{ color:var(--muted); }
.nf-list.plain b{ color:var(--ink); font-family:var(--font-d); }

.cmp-note{ background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:26px 24px; margin:34px 0 0; }
.cmp-note h3{ font-size:20px; margin-bottom:18px; }
.cmp-two{ display:grid; gap:20px; }
.cmp-k{ font-family:var(--font-d); font-weight:700; font-size:15px; color:var(--accent); margin-bottom:8px; }
.cmp-two p{ font-size:14.5px; color:var(--muted); }
.cmp-fit{ margin-top:10px; font-family:var(--font-d); font-weight:600; color:var(--ink) !important; font-size:14px; }
.cmp-sum{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:15px; }
@media (min-width:760px){ .cmp-two{ grid-template-columns:1fr 1fr; gap:30px; } }

.chain-item{ align-content:start; }
.section.dark .chain-text{ color:rgba(255,255,255,.72); }

@media (min-width:1280px){
  .chain{ grid-template-columns:repeat(4,1fr); gap:16px; }
}

.show-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.show-tab{
  cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:9px 18px;
  transition:border-color .15s ease, background .15s ease;
}
.show-tab:hover{ border-color:var(--amber); }
.show-tab[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.show-tab:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.show-browser{ box-shadow:0 30px 70px -34px rgba(13,17,23,.4); }
.show-stage{
  position:relative; background:var(--soft); aspect-ratio:16 / 10; min-height:420px;
  display:grid; place-items:center;
}
.show-stage iframe{ width:100%; height:100%; border:0; display:block; }
.show-consent{ display:grid; gap:10px; justify-items:center; text-align:center; padding:30px 24px; max-width:44ch; }
.show-consent p{ font-size:14.5px; color:var(--muted); margin:0; }
.show-consent p b{ font-family:var(--font-d); font-size:17px; color:var(--ink); }
.show-consent .btn{ margin-top:6px; }
.show-alt{ font-size:13.5px; color:var(--muted); }
.show-note{ margin-top:16px; font-size:13px; color:var(--muted); }

@media (max-width:700px){
  .show-stage{ aspect-ratio:3 / 4; min-height:0; }
}

.show-devices{ display:grid; grid-template-columns:1fr; gap:22px; align-items:end; }
.phone{
  position:relative; width:230px; justify-self:center;
  background:var(--ink); border-radius:30px; padding:12px 10px 14px;
  box-shadow:0 24px 50px -26px rgba(13,17,23,.55);
}
.phone-speaker{
  display:block; width:52px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.28); margin:0 auto 10px;
}
.phone-screen{
  position:relative; overflow:hidden; border-radius:20px; background:var(--paper);
  aspect-ratio:9 / 19; display:grid; place-items:center;
}
.phone-screen iframe{
  width:390px; height:823px; border:0; display:block;
  transform:scale(.538); transform-origin:top left;
  position:absolute; top:0; left:0;
}
.phone-hint{
  font-size:12.5px; color:var(--muted); text-align:center; padding:0 18px; line-height:1.5;
}

@media (min-width:1000px){
  .show-devices{ grid-template-columns:1fr 230px; gap:28px; }
  .phone{ justify-self:start; }
}
@media (max-width:520px){
  .phone{ width:200px; }
  .phone-screen iframe{ transform:scale(.462); }
}

.inbox{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.inbox-mail{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px; box-shadow:0 24px 50px -34px rgba(13,17,23,.45);
}
.mail-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.mail-tag{
  font-family:var(--font-d); font-weight:700; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-amber); background:var(--amber);
  padding:4px 9px; border-radius:5px;
}
.mail-tag.muted{ background:var(--soft-2); color:var(--muted); }
.mail-time{ font-size:12.5px; color:var(--muted); }
.mail-subject{ font-family:var(--font-d); font-weight:700; font-size:19px; margin-bottom:16px; }
.mail-data{ display:grid; grid-template-columns:auto 1fr; gap:9px 20px; font-size:14.5px; }
.mail-data dt{ color:var(--muted); }
.mail-data dd{ font-weight:600; }
.mail-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.mail-btn{
  font-family:var(--font-d); font-weight:600; font-size:13px; padding:9px 16px; border-radius:7px;
  background:var(--amber); color:var(--on-amber);
}
.mail-btn.ghost{ background:none; border:1px solid var(--line); color:var(--muted); }

.inbox-old{
  background:var(--soft); border:1px dashed var(--line); border-radius:16px; padding:24px 22px;
}
.old-line{ font-size:15px; color:var(--muted); margin-bottom:8px; }
.old-note{ margin-top:14px; font-family:var(--font-d); font-weight:600; font-size:14px; }

@media (min-width:860px){
  .inbox{ grid-template-columns:1.25fr 1fr; gap:26px; }
}

.deliver{ display:grid; grid-template-columns:1fr; gap:16px; }
.deliver-col{ background:var(--surface); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:22px 20px; }
.deliver-label{
  display:block; font-family:var(--font-d); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber); margin-bottom:14px;
}
.deliver-list{ list-style:none; display:grid; gap:9px; }
.deliver-list li{
  font-size:14.5px; color:rgba(255,255,255,.82); padding-left:22px; position:relative;
}
.deliver-list li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px;
  border-radius:2px; background:var(--amber);
}
@media (min-width:820px){ .deliver{ grid-template-columns:repeat(3,1fr); gap:18px; } }

.faq-more{ margin-top:22px; font-size:14.5px; }
.status{ font-style:normal; font-size:12.5px; color:var(--muted); }
.mail-label{ font-family:var(--font-d); font-weight:600; font-size:12.5px; color:var(--muted); }

.vs-table{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); }
.vs-row{ display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--line); }
.vs-row:last-child{ border-bottom:0; }
.vs-row > span{ padding:14px 16px; font-size:14.5px; color:var(--muted); }
.vs-row > span:first-child{ font-family:var(--font-d); font-weight:600; color:var(--ink); background:var(--soft); }
.vs-row > span.vs-us{ background:var(--accent-soft); color:var(--ink); font-weight:600; }
.vs-head > span{ font-family:var(--font-d); font-weight:700; color:var(--ink); background:var(--soft-2); font-size:14px; }
.vs-head > span.vs-us{ background:var(--amber); color:var(--on-amber); }
@media (min-width:880px){
  .vs-row{ grid-template-columns:1.1fr 1fr 1fr 1.2fr; }
  .vs-row > span{ border-right:1px solid var(--line); }
  .vs-row > span:last-child{ border-right:0; }
}
@media (max-width:879px){
  .vs-head{ display:none; }
  .vs-row > span::before{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:4px; }
  .vs-row > span:nth-child(2)::before{ content:"Selbst bauen"; }
  .vs-row > span:nth-child(3)::before{ content:"Agentur"; }
  .vs-row > span:nth-child(4)::before{ content:"Peyvand"; }
}
.vs-when{ display:grid; gap:16px; margin:34px 0 30px; }
.vs-when article{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:22px 20px; }
.vs-when h2{ font-size:17px; margin-bottom:8px; }
.vs-when p{ font-size:14.5px; color:var(--muted); }
@media (min-width:820px){ .vs-when{ grid-template-columns:repeat(3,1fr); } }

.lf-empty{ display:grid; place-items:center; padding:30px 24px; text-align:center; background:var(--surface); }
.lf-empty p{ font-size:13.5px; color:var(--muted-dark); }

.calc-cycle{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.cycle-btn{
  cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:13.5px;
  background:var(--soft); border:1px solid var(--line); color:var(--ink);
  border-radius:7px; padding:9px 16px;
}
.cycle-btn:hover{ border-color:var(--amber); }
.cycle-btn.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.sys-grid{ display:grid; gap:16px; }
@media (min-width:700px){ .sys-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .sys-grid{ grid-template-columns:repeat(3,1fr); } }
.sys{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
}
.sys-bar{
  background:var(--soft); border-bottom:1px solid var(--line); padding:9px 14px;
  font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sys-bar em{ font-style:normal; }
.sys-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.sys-modell{
  font-family:var(--font-d); font-weight:700; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.sys h3{ font-size:18px; margin-bottom:8px; }
.sys-text{ font-size:14px; color:var(--muted); margin-bottom:16px; }
.sys .btn{ margin-top:auto; align-self:flex-start; }
.sys-bald{ margin-top:auto; font-size:12.5px; color:var(--muted); }

.show-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; scrollbar-width:thin; }
.show-tabs .show-tab{ white-space:nowrap; flex:0 0 auto; }
@media (min-width:1100px){ .show-tabs{ flex-wrap:wrap; overflow:visible; } }

.sys-aktion{ margin-top:auto; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.sys-tab{ font-family:var(--font-d); font-weight:600; font-size:13px; color:var(--muted); }
.sys-tab:hover{ color:var(--ink); }

.pv{
  position:fixed; inset:0; z-index:80; background:rgba(13,17,23,.72);
  display:grid; place-items:center; padding:18px;
}
.pv-flaeche{
  width:min(100%, 1180px); height:min(92svh, 900px);
  background:var(--paper); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
}
.pv-kopf{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 14px; border-bottom:1px solid var(--line); background:var(--soft);
}
.pv-wahl{
  font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:9px 12px;
}
.pv-wahl:focus{ outline:2px solid var(--amber); outline-offset:2px; }
.pv-url{ font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-extern{ margin-left:auto; font-family:var(--font-d); font-weight:600; font-size:13.5px; color:var(--accent); }
.pv-zu{
  cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:13.5px;
  background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:7px; padding:9px 16px;
}
.pv-zu:hover{ background:var(--amber); border-color:var(--amber); color:var(--on-amber); }
.pv-buehne{ flex:1; background:var(--soft); }
.pv-buehne iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width:640px){
  .pv{ padding:0; }
  .pv-flaeche{ height:100svh; border-radius:0; }
  .pv-extern{ margin-left:0; }
}

.ls-layout{ display:grid; gap:24px; }
@media (min-width:980px){ .ls-layout{ grid-template-columns:290px 1fr; gap:34px; align-items:start; } }

.ls-seite{ background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:18px 16px; }
@media (min-width:980px){ .ls-seite{ position:sticky; top:96px; max-height:calc(100svh - 120px); overflow:auto; } }
.ls-filter{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.ls-fbtn{
  cursor:pointer; font-family:var(--font-d); font-weight:600; font-size:13px; color:var(--muted);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:7px 13px;
}
.ls-fbtn:hover{ border-color:var(--amber); color:var(--ink); }
.ls-fbtn.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.ls-gruppe{ margin-bottom:20px; }
.ls-gruppe h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.ls-gruppe-note{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.ls-gruppe ul{ list-style:none; display:grid; gap:2px; }
.ls-item{
  width:100%; text-align:left; cursor:pointer; font-family:var(--font-b); font-size:14.5px; color:var(--ink);
  background:none; border:0; border-radius:7px; padding:9px 11px;
  transition:background .15s ease, color .15s ease;
}
.ls-item:hover{ background:var(--accent-soft); }
.ls-item:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.ls-item.is-on{ background:var(--ink); color:#fff; font-weight:600; }

.ls-kopf{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; }
.ls-titel{ font-size:clamp(20px,2.4vw,28px); margin-bottom:5px; }
.ls-text{ font-size:14.5px; color:var(--muted); max-width:62ch; }

.ls-rahmen{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); box-shadow:0 26px 60px -40px rgba(13,17,23,.45); }
.ls-bar{ display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--line); }
.ls-bar span{ width:9px; height:9px; border-radius:50%; background:var(--soft-2); }
.ls-bar em{ font-style:normal; font-size:12.5px; color:var(--muted); margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ls-view{ height:min(74svh, 720px); background:var(--soft); display:grid; place-items:center; }
.ls-view iframe{ width:100%; height:100%; border:0; display:block; }
.ls-leer{ text-align:center; padding:30px 26px; max-width:46ch; display:grid; gap:8px; }
.ls-leer p{ font-size:14.5px; color:var(--muted); }
.ls-leer b{ font-family:var(--font-d); font-size:17px; color:var(--ink); }
@media (max-width:700px){ .ls-view{ height:min(64svh, 520px); } }

.hero-video{ position:relative; margin:0; }
.hero-video video{
  width:100%; display:block; border-radius:14px; border:1px solid var(--line);
  background:var(--soft); box-shadow:0 30px 70px -40px rgba(13,17,23,.5);
}
.hero-video figcaption{ margin-top:12px; font-size:13.5px; color:var(--muted); }
.hero-video-btn{
  position:absolute; left:14px; bottom:62px; cursor:pointer;
  font-family:var(--font-d); font-weight:600; font-size:13px;
  background:rgba(13,17,23,.82); color:#fff; border:0; border-radius:7px; padding:8px 15px;
}
.hero-video-btn:hover{ background:var(--amber); color:var(--on-amber); }
.hero-video-leer{
  border:1px dashed var(--line); border-radius:14px; background:var(--soft);
  padding:30px 26px; display:grid; gap:8px;
}
.hero-video-leer p{ font-size:14px; color:var(--muted); }
.hero-video-leer b{ font-family:var(--font-d); font-size:16px; color:var(--ink); }
.hero-video-leer code{ font-size:13px; background:var(--soft-2); padding:1px 5px; border-radius:4px; }
@media (max-width:640px){ .hero-video-btn{ bottom:auto; top:12px; } }

#schau{ overflow:hidden; }
.mq{ overflow:hidden; margin-top:18px; }
.mq-spur{ display:flex; gap:16px; width:max-content; will-change:transform; }
.mq-links .mq-spur{ animation:mq-lauf 70s linear infinite; }
.mq-rechts .mq-spur{ animation:mq-lauf 78s linear infinite reverse; }
.mq:hover .mq-spur, .mq:focus-within .mq-spur{ animation-play-state:paused; }
@keyframes mq-lauf{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .mq-spur{ animation:none; }
  .mq{ overflow-x:auto; }
}

.mq-karte{
  position:relative; flex:0 0 auto; width:300px; cursor:pointer; padding:0;
  background:var(--mq-farbe, var(--ink)); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:block; text-align:left;
  transition:border-color .15s ease;
}
.mq-karte:hover{ border-color:var(--amber); }
.mq-karte:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.mq-karte img{ width:100%; aspect-ratio:8 / 5; object-fit:cover; display:block; }
.mq-name{
  display:block; padding:11px 14px 13px; font-family:var(--font-d); font-weight:600;
  font-size:14px; color:var(--ink); background:var(--paper); border-top:1px solid var(--line);
}

.mq-fuss{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:22px; }
.mq-alle{ font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--accent); }
@media (max-width:640px){ .mq-karte{ width:240px; } }

.mq-karte{ background:var(--paper); }
.mq-karte img{ background:var(--soft); }
.mq-fuss{ justify-content:flex-end; }

.mq-live{
  display:block; position:relative; width:100%; aspect-ratio:8 / 5; overflow:hidden;
  background-size:cover; background-position:top center; background-color:var(--soft);
}
.mq-live iframe{
  position:absolute; top:0; left:0; border:0; display:block;
  transform:scale(.25); transform-origin:top left; pointer-events:none;
  opacity:0; transition:opacity .25s ease;
}
.mq-live.ist-live iframe{ opacity:1; }
@media (max-width:640px){ .mq-live iframe{ transform:scale(.2); } }