/* ── RESET ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:    #0e0e0c;
  --bg:     #f5f4f0;
  --warm:   #eae8e1;
  --accent: #c8341a;
  --acc2:   #a32912;
  --muted:  #7a7870;
  --border: rgba(14,14,12,0.1);
  --serif:  'Fraunces', Georgia, serif;
  --sans:   'DM Sans', sans-serif;
  --mono:   'DM Mono', 'Courier New', monospace;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, svg { display: block; }
button { font-family: inherit; }
input, textarea { font-family: inherit; outline: none; }
::selection { background: var(--accent); color: #fff; }

/* ── CURSOR (desktop only) ───────────────────── */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, input, textarea, [role="button"] { cursor: none; }
  #cur, #cring { position: fixed; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); z-index: 9999; left: -200px; top: -200px; }
  #cur  { width:10px; height:10px; background:var(--accent); mix-blend-mode:multiply; transition: width .2s, height .2s; }
  #cring{ width:36px; height:36px; border:1.5px solid rgba(200,52,26,.35); z-index:9998; transition: left .1s, top .1s, width .2s, height .2s; }
  #cur.g  { width:20px; height:20px; }
  #cring.g{ width:52px; height:52px; }
}

/* ── NAV ─────────────────────────────────────── */
nav.topnav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height:68px; padding: 0 6vw;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(245,244,240,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition: border-color .25s, background .25s;
}
nav.topnav.scrolled { border-bottom-color: var(--border); background: rgba(245,244,240,.94); }
.logo {
  font-family:var(--serif); font-weight:500; font-size:1.2rem;
  color:var(--ink); letter-spacing:-.02em;
  display:flex; align-items:center; gap:.5rem;
}
.logo-mark {
  width:28px; height:28px; border-radius:7px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position: relative;
}
.logo-mark::after {
  content:''; position:absolute; inset:-3px; border-radius:10px;
  border:1px solid rgba(200,52,26,.35); opacity:0; transform: scale(.85);
  transition: opacity .3s, transform .3s;
}
.logo:hover .logo-mark::after { opacity:1; transform: scale(1); }
.nav-links { display:flex; align-items:center; gap:2rem; }
.nav-links a { font-size:.85rem; color:var(--muted); transition:color .2s; }
.nav-links a:hover { color:var(--ink); }
.nav-tog { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.nav-tog span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .25s; }

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:var(--sans); font-size:.85rem; font-weight:500;
  border:none; transition:all .22s; white-space:nowrap;
  position: relative; overflow: hidden;
}
.btn-ink   { background:var(--ink);    color:var(--bg);  padding:.65rem 1.4rem; border-radius:100px; }
.btn-ink:hover   { background:var(--accent); transform:translateY(-1px); }
.btn-ghost { background:transparent;   color:var(--ink); padding:.65rem 1.4rem; border-radius:100px; border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-red   { background:var(--accent); color:#fff;       padding:.65rem 1.4rem; border-radius:100px; }
.btn-red:hover   { background:var(--acc2); transform:translateY(-1px); }
.btn-lite  { background:#f5f4f0;       color:var(--ink); padding:.65rem 1.4rem; border-radius:100px; }
.btn-lite:hover  { background:#fff; transform:translateY(-1px); }
.btn-lg  { padding:.9rem 2.2rem; font-size:.95rem; }
.btn-full{ width:100%; }
.btn .arr { display:inline-block; transition: transform .25s; }
.btn:hover .arr { transform: translateX(4px); }

/* ── MOBILE MENU ─────────────────────────────── */
.mmenu {
  display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
  background:var(--bg); z-index:190;
  flex-direction:column; align-items:center; justify-content:center; gap:2rem;
}
.mmenu.open { display:flex; }
.mmenu a { font-family:var(--serif); font-size:2rem; font-weight:300; color:var(--ink); }
.mmenu a:hover { color:var(--accent); }

/* ── HERO ────────────────────────────────────── */
.hero {
  min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr;
  align-items:center; gap:4rem; padding:120px 6vw 80px;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-10%; right:-5%;
  width:55vw; height:80vh;
  background:radial-gradient(ellipse at center, rgba(200,52,26,.07) 0%, transparent 70%);
  pointer-events:none;
}

/* Reveal animations */
.a0,.a1,.a2,.a3,.a4,.a5 { opacity:0; animation:rise .7s ease forwards; }
.a0 { animation-delay:.1s; }
.a1 { animation-delay:.2s; }
.a2 { animation-delay:.3s; }
.a3 { animation-delay:.4s; }
.a4 { animation-delay:.5s; }
.a5 { animation-delay:.35s; animation-duration:.8s; }
@keyframes rise { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

.eyebrow {
  display:flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.5rem;
}
.eyebrow::before { content:''; display:block; width:24px; height:1px; background:var(--accent); flex-shrink:0; }

h1 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,4.5vw,4.6rem);
  line-height:1.06; letter-spacing:-.03em;
  margin-bottom:1.5rem; color:var(--ink);
}
h1 em { font-style:italic; color:var(--accent); }

.hero-body {
  font-size:1rem; font-weight:300; color:var(--muted);
  line-height:1.75; max-width:460px; margin-bottom:2.2rem;
}
.hero-ctas  { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-trust { margin-top:2.5rem; display:flex; align-items:center; gap:1rem; }
.t-avs      { display:flex; }
.t-av {
  width:34px; height:34px; border-radius:50%;
  background:var(--warm); border:2px solid var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.t-av + .t-av { margin-left:-9px; }
.t-txt { font-size:.78rem; color:var(--muted); line-height:1.45; }
.t-txt strong { color:var(--ink); font-weight:500; }

/* ── Hero Mockup (interactive) ────────────────── */
.hero-vis { position:relative; }
.mockup {
  background:#141518; border-radius:22px; overflow:hidden;
  max-width:380px; margin-left:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06);
  position: relative;
}
.mk-head {
  background:linear-gradient(135deg,var(--mk-c1, #c8341a),var(--mk-c2, #8b2010));
  padding:1rem 1.1rem; display:flex; align-items:center; gap:.7rem;
  transition: background .35s;
}
.mk-av { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; transition: background .25s; }
.mk-nm { font-family:var(--serif); font-weight:500; color:#fff; font-size:.95rem; line-height: 1.1;}
.mk-st { font-size:.65rem; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:.3rem; margin-top:3px; }
.mk-dot{ width:6px; height:6px; border-radius:50%; background:#7fffb8; animation:blink 2s ease-in-out infinite; flex-shrink:0; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:.3} }
.mk-body{ padding:1rem; display:flex; flex-direction:column; gap:.55rem; min-height:230px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
.mk-body::-webkit-scrollbar { width: 4px; }
.mk-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px;}
.mk-msg { display:flex; align-items:flex-end; gap:.4rem; animation: msgIn .35s ease forwards; opacity:0; transform: translateY(6px);}
.mk-msg.u { flex-direction:row-reverse; }
@keyframes msgIn { to { opacity:1; transform:translateY(0);} }
.mk-bbl {
  max-width:84%; padding:.55rem .85rem; border-radius:14px;
  font-size:.78rem; line-height:1.55; color:rgba(232,230,225,.9);
}
.mk-msg.b .mk-bbl { background:rgba(255,255,255,.08); border-bottom-left-radius:4px; }
.mk-msg.u .mk-bbl { background:linear-gradient(135deg,var(--mk-c1, #c8341a),var(--mk-c2, #8b2010)); color:#fff; border-bottom-right-radius:4px; transition: background .35s;}
.mk-typing { display:inline-flex; align-items:center; gap:3px; padding: 2px 4px;}
.mk-typing span { width:5px; height:5px; border-radius:50%; background: rgba(255,255,255,.55); animation: tdot 1.2s ease-in-out infinite;}
.mk-typing span:nth-child(2){ animation-delay: .15s; }
.mk-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity:.4; } 30% { transform: translateY(-4px); opacity:1; } }

.mk-quick { padding: 0 1rem .8rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.mk-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  padding: .35rem .7rem; border-radius: 100px; font-size: .7rem; transition: all .2s;
}
.mk-chip:hover { background: rgba(200,52,26,.22); border-color: rgba(200,52,26,.5); color:#fff;}
.mk-chip:disabled { opacity:.4; }

.mk-inp {
  margin:0 .8rem .9rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:.55rem .7rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.mk-inp input { flex:1; background:transparent; border:none; color: #fff; font-size: .8rem; min-width:0; }
.mk-inp input::placeholder { color: rgba(255,255,255,.32); }
.mk-snd { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--mk-c1, #c8341a),var(--mk-c2, #8b2010)); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:none; transition: transform .2s, background .35s;}
.mk-snd:hover { transform: scale(1.08); }
.mk-snd:disabled { opacity:.5; }

.fbadge1 {
  position:absolute; top:-16px; right:-16px;
  background:#fff; border-radius:14px; padding:.75rem 1rem;
  box-shadow:0 8px 32px rgba(0,0,0,.13);
  display:flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:500; color:var(--ink);
  animation:floatY 3s ease-in-out infinite; white-space:nowrap; z-index:2;
}
.fdot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; }
.fbadge2 {
  position:absolute; bottom:-14px; left:-16px;
  background:var(--ink); color:#fff; border-radius:13px; padding:.7rem .95rem;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  font-size:.72rem; line-height:1.45;
  animation:floatY 3s 1.5s ease-in-out infinite; white-space:nowrap; z-index:2;
}
.fbadge2 strong { display:block; font-size:1rem; font-family:var(--serif); font-weight:500; }
@keyframes floatY { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }

/* ── TICKER ──────────────────────────────────── */
.ticker { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.9rem 0; background:var(--warm); user-select:none; }
.t-track { display:flex; gap:3.5rem; width:max-content; animation:tick 35s linear infinite; }
.t-item  { font-size:.78rem; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:.55rem; }
.t-item::before { content:'✦'; color:var(--accent); font-size:.55rem; flex-shrink:0; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SECTIONS ────────────────────────────────── */
section { padding:110px 6vw; }
.si { max-width:1100px; margin:0 auto; }
.si-wide { max-width: 1220px; margin: 0 auto; }

.slabel {
  font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.85rem;
  display:flex; align-items:center; gap:.55rem;
}
.slabel::before { content:''; display:block; width:16px; height:1px; background:var(--accent); flex-shrink:0; }

h2 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,3.6vw,3.3rem);
  line-height:1.1; letter-spacing:-.03em; margin-bottom:1rem;
}
h2 em { font-style:italic; color:var(--accent); }
.ssub { font-size:1rem; font-weight:300; color:var(--muted); max-width:520px; line-height:1.7; }

/* Scroll reveal */
.rv { opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease; }
.rv.in { opacity:1; transform:translateY(0); }

/* ── BRANCHEN-SWITCHER ───────────────────────── */
.branchen { background: var(--bg); }
.br-tabs {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 2.5rem; margin-bottom: 3rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
  position: relative;
}
.br-tab {
  background: none; border: none; color: var(--muted);
  padding: .9rem 1.3rem; font-size: .85rem; font-weight: 500;
  position: relative; transition: color .25s;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: -1px;
}
.br-tab:hover { color: var(--ink); }
.br-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.br-tab-ic { font-size: 1rem; opacity: .8; }

.br-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5vw; align-items: center; }
.br-info { min-height: 380px; position: relative; }
.br-pane { opacity: 0; pointer-events: none; position: absolute; inset: 0; transition: opacity .4s ease; }
.br-pane.active { opacity: 1; pointer-events: auto; position: relative; }
.br-pane h3 { font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1rem; }
.br-pane h3 em { font-style: italic; color: var(--accent); }
.br-pane > p { color: var(--muted); font-weight: 300; line-height: 1.7; margin-bottom: 1.5rem; max-width: 440px; }
.br-features { display: flex; flex-direction: column; gap: .7rem; }
.br-features li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; font-weight: 400; }
.br-features li::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(200,52,26,.12); border: 1px solid rgba(200,52,26,.3);
  flex-shrink: 0; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23c8341a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,6.5 5,9 9.5,4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}

.br-mock { position: relative; perspective: 1200px; }
.br-mock .mockup { max-width: 360px; margin: 0 auto; }

/* ── FEATURES ────────────────────────────────── */
.feat-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; margin-top:4rem; }
.feat-list { display:flex; flex-direction:column; }
.feat-item { padding:1.75rem 0; border-bottom:1px solid var(--border); display:flex; gap:1.25rem; align-items:flex-start; transition: padding-left .3s; }
.feat-item:first-child { border-top:1px solid var(--border); }
.feat-item:hover { padding-left: .5rem; }
.fn { font-family:var(--serif); font-size:.72rem; color:var(--accent); font-weight:300; margin-top:3px; flex-shrink:0; width:22px; }
.ft { font-weight:500; font-size:.95rem; margin-bottom:.35rem; }
.fd { font-size:.83rem; color:var(--muted); line-height:1.65; font-weight:300; }
.feat-img { background:var(--warm); border:1px solid var(--border); border-radius:22px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; padding:2rem; position: relative; overflow: hidden;}
.feat-img::before {
  content:''; position:absolute; inset:-1px;
  background: radial-gradient(circle at 30% 20%, rgba(200,52,26,.06), transparent 60%);
  pointer-events: none;
}
.feat-img-emoji { font-size:4rem; line-height: 1; }
.feat-img-cap  { font-family:var(--serif); font-size:1.15rem; font-weight:300; line-height:1.45; color:var(--muted); }

/* ── BRAND CUSTOMIZER ────────────────────────── */
.customizer { background: var(--warm); }
.cu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; margin-top: 3.5rem; }
.cu-panel { background: var(--bg); border-radius: 22px; padding: 2rem; border: 1px solid var(--border); }
.cu-row { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.cu-row:first-child { padding-top: 0; }
.cu-row:last-child { border-bottom: none; padding-bottom: 0; }
.cu-lbl { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .65rem; display: block; font-weight: 500; }
.cu-input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border);
  padding: .35rem 0; font-size: .95rem; color: var(--ink); transition: border-color .2s;
}
.cu-input:focus { border-bottom-color: var(--accent); }
.cu-sw { display: flex; gap: .5rem; flex-wrap: wrap; }
.cu-sw button {
  width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0;
  position: relative; transition: transform .2s;
}
.cu-sw button:hover { transform: scale(1.1); }
.cu-sw button.active::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--ink);
}
.cu-em-grid { display: flex; gap: .4rem; flex-wrap: wrap; }
.cu-em {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); font-size: 1.1rem; transition: all .2s;
}
.cu-em:hover { border-color: var(--ink); }
.cu-em.active { border-color: var(--accent); background: rgba(200,52,26,.08); }

.cu-result {
  display: flex; align-items: center; justify-content: center; min-height: 480px;
  position: relative;
}
.cu-result .mockup { max-width: 320px; }
.cu-hint {
  position: absolute; top: 0; right: 0; font-size: .7rem; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: .4rem;
}
.cu-hint .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.5s ease-in-out infinite; }

/* ── STEPS (Ablauf) ──────────────────────────── */
.dark { background:var(--ink); color:#f5f4f0; }
.dark .slabel { color:rgba(200,52,26,.85); }
.dark .slabel::before { background:rgba(200,52,26,.85); }
.dark h2 { color:#f5f4f0; }
.dark .ssub { color:rgba(245,244,240,.5); }
.sgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:4rem; background:rgba(255,255,255,.08); border-radius:18px; overflow:hidden; }
.step { background:var(--ink); padding:2.2rem 1.6rem; transition:background .22s; position: relative; }
.step::before {
  content: ''; position: absolute; top: 0; left: 0; height: 2px; background: var(--accent);
  width: 0; transition: width .5s ease;
}
.step:hover { background:#191a18; }
.step:hover::before { width: 100%; }
.sn { font-family:var(--serif); font-size:2.5rem; font-weight:300; color:rgba(200,52,26,.4); line-height:1; margin-bottom:1.2rem; }
.stit { font-weight:500; font-size:.95rem; margin-bottom:.5rem; }
.sdesc{ font-size:.8rem; color:rgba(245,244,240,.48); line-height:1.65; font-weight:300; }

/* ── ROI CALCULATOR ──────────────────────────── */
.roi { background: var(--bg); }
.roi-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 5vw; align-items: stretch; margin-top: 3.5rem;}
.roi-controls { background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 2rem; display: flex; flex-direction: column; gap: 1.8rem; }
.roi-ctl { display: flex; flex-direction: column; gap: .5rem;}
.roi-ctl-head { display: flex; justify-content: space-between; align-items: baseline;}
.roi-ctl-lbl { font-size: .85rem; font-weight: 500; }
.roi-ctl-val { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; color: var(--accent); letter-spacing: -.01em;}
.roi-ctl-sub { font-size: .72rem; color: var(--muted); }
.roi-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: var(--warm); border-radius: 4px;
  outline: none; margin: .35rem 0;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 2px 8px rgba(200,52,26,.35);
  transition: transform .15s;
}
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.roi-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); border: none;
  box-shadow: 0 2px 8px rgba(200,52,26,.35);
}

.roi-output {
  background: var(--ink); color: #f5f4f0; border-radius: 22px; padding: 2.2rem 2rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
  position: relative; overflow: hidden;
}
.roi-output::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(200,52,26,.18), transparent 55%);
  pointer-events: none;
}
.roi-out-row { position: relative; z-index: 1; }
.roi-out-lbl { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(245,244,240,.5); margin-bottom: .35rem; display: block;}
.roi-out-val { font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.roi-out-val .roi-unit { font-size: .85rem; color: rgba(245,244,240,.55); margin-left: .5rem; font-family: var(--sans);}
.roi-divider { height: 1px; background: rgba(255,255,255,.08); }
.roi-footer { font-size: .75rem; color: rgba(245,244,240,.45); line-height: 1.6; font-weight: 300; position: relative; z-index: 1; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.08);}
.roi-footer strong { color: #f5f4f0; font-weight: 500;}

/* ── EMBED ───────────────────────────────────── */
.embed-bg { background:var(--warm); }
.egrid { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:start; margin-top:3rem; }
.plat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-top:1.5rem; }
.pchip { background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:.8rem 1rem; display:flex; align-items:center; gap:.6rem; font-size:.8rem; font-weight:500; transition: all .2s; }
.pchip:hover { border-color:rgba(14,14,12,.3); transform: translateY(-2px); }
.pi { font-size:1.1rem; flex-shrink:0; }
.dsg { background:rgba(200,52,26,.06); border:1px solid rgba(200,52,26,.18); border-radius:14px; padding:1.2rem 1.4rem; display:flex; align-items:flex-start; gap:1rem; margin-top:1.5rem; }
.dsg-ic { font-size:1.4rem; flex-shrink:0; margin-top:1px; }
.dsg-tt { font-weight:500; font-size:.88rem; margin-bottom:.3rem; }
.dsg-tx { font-size:.78rem; color:var(--muted); line-height:1.6; font-weight:300; }
.code-wrap { position: relative; }
.code-blk { background:#0d0f12; border-radius:16px; padding:1.5rem 1.6rem; font-family:var(--mono); font-size:.8rem; line-height:2; border:1px solid rgba(255,255,255,.05); overflow-x:auto; white-space: pre; color: #e8e6e1;}
.code-copy {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7); border-radius: 8px;
  padding: .4rem .8rem; font-size: .7rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: all .2s;
}
.code-copy:hover { background: rgba(255,255,255,.12); color: #fff; }
.code-copy.copied { background: rgba(127,255,184,.15); border-color: rgba(127,255,184,.3); color: #7fffb8; }
.cc { color:#4a5568; }
.ct { color:#63b3ed; }
.ca { color:#fbd38d; }
.cv { color:#7fffb8; }

/* ── PRICING ─────────────────────────────────── */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:4rem; }
.pcard { background:var(--bg); border:1px solid var(--border); border-radius:22px; padding:2rem; position:relative; transition:all .25s; display:flex; flex-direction:column; }
.pcard:hover { border-color:rgba(200,52,26,.3); transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.07); }
.pcard.feat { background:var(--ink); color:#f5f4f0; border-color:var(--ink); }
.pcard.feat:hover { border-color:var(--ink); transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.18); }
.ppill { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:.65rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; padding:.22rem .9rem; border-radius:100px; white-space:nowrap; }
.ptier { font-size:.68rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:1.25rem; }
.pamt  { font-family:var(--serif); font-weight:300; font-size:3rem; line-height:1; letter-spacing:-.03em; margin-bottom:.2rem; }
.pcur  { font-size:1.1rem; vertical-align:.4rem; margin-right:.15rem; }
.pper  { font-size:.78rem; color:var(--muted); margin-bottom:.5rem; }
.pcard.feat .pper { color:rgba(245,244,240,.45); }
.pset  { font-size:.72rem; color:var(--muted); padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--border); }
.pcard.feat .pset { color:rgba(245,244,240,.35); border-color:rgba(255,255,255,.1); }
.pfeat { display:flex; flex-direction:column; gap:.7rem; flex:1; margin-bottom:2rem; }
.pfeat li { display:flex; align-items:flex-start; gap:.6rem; font-size:.83rem; font-weight:300; line-height:1.45; }
.pfeat li::before { content:'–'; color:var(--accent); font-weight:600; flex-shrink:0; }
.pcard.feat .pfeat li { color:rgba(245,244,240,.85); }

/* ── FAQ ─────────────────────────────────────── */
.faq { background: var(--bg); }
.faq-list { margin-top: 3rem; max-width: 800px; }
.faq-item { border-top: 1px solid var(--border); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; padding: 1.4rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  text-align: left; font-family: var(--serif); font-weight: 300;
  font-size: 1.2rem; color: var(--ink); letter-spacing: -.01em;
  transition: color .2s;
}
.faq-q:hover { color: var(--accent); }
.faq-ic {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .25s; position: relative;
}
.faq-ic::before, .faq-ic::after {
  content: ''; position: absolute; background: var(--ink); transition: transform .25s, background .25s;
}
.faq-ic::before { width: 10px; height: 1.5px; }
.faq-ic::after  { width: 1.5px; height: 10px; }
.faq-item.open .faq-ic { background: var(--accent); border-color: var(--accent); }
.faq-item.open .faq-ic::before, .faq-item.open .faq-ic::after { background: #fff; }
.faq-item.open .faq-ic::after { transform: rotate(90deg); }
.faq-a {
  overflow: hidden; max-height: 0; transition: max-height .35s ease;
}
.faq-a > div {
  padding: 0 0 1.4rem 0; color: var(--muted); font-weight: 300;
  font-size: .92rem; line-height: 1.7; max-width: 720px;
}

/* ── CTA ─────────────────────────────────────── */
.cta-sec { background:var(--ink); color:#f5f4f0; text-align:center; padding:120px 6vw; position:relative; overflow:hidden; }
.cta-sec::before { content:''; position:absolute; bottom:-20%; left:50%; transform:translateX(-50%); width:700px; height:400px; background:radial-gradient(ellipse at center,rgba(200,52,26,.18),transparent 65%); pointer-events:none; }
.cta-in { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.cta-lbl { font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(200,52,26,.85); margin-bottom:1.2rem; display:flex; align-items:center; justify-content:center; gap:.55rem; }
.cta-lbl::before, .cta-lbl::after { content:''; display:block; width:16px; height:1px; background:rgba(200,52,26,.7); }
.cta-h { font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5vw,4rem); line-height:1.08; letter-spacing:-.03em; margin-bottom:1.2rem; }
.cta-h em { font-style:italic; color:rgba(200,52,26,.95); }
.cta-p { font-size:.95rem; color:rgba(245,244,240,.55); margin-bottom:2.5rem; line-height:1.7; font-weight:300; }
.cta-btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.cta-note { margin-top:1.5rem; font-size:.73rem; color:rgba(245,244,240,.3); line-height:1.6; }

/* ── FOOTER ──────────────────────────────────── */
footer { padding:2.5rem 6vw; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); font-size:.78rem; color:var(--muted); flex-wrap:wrap; gap:1rem; }
.flogo { font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--ink); }
.flinks { display:flex; gap:1.5rem; flex-wrap:wrap; }
.flinks a { color:var(--muted); transition:color .2s; }
.flinks a:hover { color:var(--ink); }

/* ── TOAST ───────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #f5f4f0; padding: .8rem 1.4rem;
  border-radius: 100px; font-size: .85rem; font-weight: 400;
  box-shadow: 0 12px 40px rgba(0,0,0,.2); z-index: 1000;
  display: flex; align-items: center; gap: .6rem;
  transition: transform .3s ease, opacity .3s; opacity: 0; pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7fffb8;}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:1024px) {
  .pgrid { grid-template-columns:1fr 1fr; }
  .pgrid .pcard:nth-child(3) { grid-column:span 2; max-width:400px; margin:0 auto; width:100%; }
}
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; padding-top:100px; gap:0; }
  .hero-vis { display:none; }
  .feat-wrap { grid-template-columns:1fr; }
  .feat-img  { display:none; }
  .sgrid { grid-template-columns:1fr 1fr; }
  .egrid { grid-template-columns:1fr; }
  .pgrid { grid-template-columns:1fr; }
  .pgrid .pcard:nth-child(3) { grid-column:span 1; max-width:none; }
  .nav-links { display:none; }
  .nav-tog   { display:flex; }
  .br-grid, .cu-grid, .roi-grid { grid-template-columns: 1fr; gap: 3rem;}
  .br-info { min-height: auto;}
  .br-mock .mockup, .cu-result .mockup { margin: 0 auto;}
  .cu-result { min-height: auto;}
}
@media (max-width:560px) {
  section { padding:70px 5vw; }
  .sgrid { grid-template-columns:1fr; }
  .plat-grid { grid-template-columns:1fr; }
  .hero-ctas, .cta-btns { flex-direction:column; width:100%; }
  .hero-ctas .btn, .cta-btns .btn { width:100%; }
  footer { flex-direction:column; text-align:center; }
  .flinks { justify-content:center; }
  .br-tab { padding: .7rem .9rem; font-size: .8rem;}
  .cu-panel, .roi-controls, .roi-output { padding: 1.5rem;}
}