/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
:root {
  --bg: #040102; --fg: #fff;
  --muted: rgba(255,255,255,.55); --muted-2: rgba(255,255,255,.4); --muted-3: rgba(255,255,255,.65);
  --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.1);
  --card: rgba(255,255,255,.02); --card-2: rgba(255,255,255,.03);
  --red: #df1d48; --red-2: #ff486d; --red-3: #f97084; --red-4: #fca4ae; --red-deep: #bc123c;
  --teal: #2dd3be; --teal-2: #0d9085; --blue: #0099ff; --ink: #9c8d92;
  --font: 'Instrument Sans', 'Instrument Sans Placeholder', sans-serif;
  --font-inter: 'Inter', 'Inter Placeholder', sans-serif;
}
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
::selection { background: rgba(223,29,72,.6); color: #fff; }

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.21,.6,.35,1), transform .9s cubic-bezier(.21,.6,.35,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ============ navbar ============ */
/* ============ Navbar ============ */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px;
  background: rgba(4, 1, 2, 0.4);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.nav-container {
  max-width: 1280px;
  height: 60px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- Brand + links group --- */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.nav-logo-mark {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.nav-wordmark {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}

/* --- Center links --- */
.nav-links {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

.nav-link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding: 20px 0;
  text-decoration: none;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--muted);
  transition: color 0.25s ease;
}

.nav-link--active,
.nav-link:hover {
  color: var(--fg);
}

/* 32px gradient hairline pinned to navbar bottom */
.nav-link-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: radial-gradient(44.6% 825% at 50% 50%, rgb(255, 72, 109) 0%, rgba(255, 72, 109, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* red glow under the link (strip on hover, dot on active) */
.nav-link-glow {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -8px;
  height: 4px;
  border-radius: 4px;
  background: rgb(223, 29, 72);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.nav-link--active .nav-link-line,
.nav-link--active .nav-link-glow {
  opacity: 1;
}

.nav-link--active .nav-link-glow {
  left: 50%;
  right: auto;
  bottom: -5px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  filter: blur(8px);
}

/* --- Right actions --- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-signin {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--fg);
  background: rgba(255, 255, 255, 0);
  transition: background 0.25s ease;
}

.nav-signin:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* --- Remix Template pill (dark fill, gradient rim, orbiting glow) --- */
.nav-cta {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  isolation: isolate;
}

.nav-cta-glow,
.nav-cta-stroke,
.nav-cta-fill {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

@property --nav-gx {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 85%;
}
@property --nav-gy {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 50%;
}

/* white highlight that orbits the rim (shows through the 1px ring gap) */
.nav-cta-glow {
  inset: 0;
  background: radial-gradient(18% 50% at var(--nav-gx) var(--nav-gy), rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.05) 100%);
  animation: nav-glow-orbit 2.8s linear infinite;
}

@keyframes nav-glow-orbit {
  0%     { --nav-gx: 85%;   --nav-gy: 50%; }
  12.5%  { --nav-gx: 74.7%; --nav-gy: 74.7%; }
  25%    { --nav-gx: 50%;   --nav-gy: 85%; }
  37.5%  { --nav-gx: 25.3%; --nav-gy: 74.7%; }
  50%    { --nav-gx: 15%;   --nav-gy: 50%; }
  62.5%  { --nav-gx: 25.3%; --nav-gy: 25.3%; }
  75%    { --nav-gx: 50%;   --nav-gy: 15%; }
  87.5%  { --nav-gx: 74.7%; --nav-gy: 25.3%; }
  100%   { --nav-gx: 85%;   --nav-gy: 50%; }
}

.nav-cta-stroke {
  inset: 0;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 61.1128%);
  transition: background 0.25s ease;
}

.nav-cta:hover .nav-cta-stroke {
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 61.1128%);
}

.nav-cta-fill {
  inset: 1px;
  background: linear-gradient(207deg, rgb(47, 41, 43) -70.344%, rgb(4, 1, 2) 100%);
}

.nav-cta-label {
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

/* --- Tablet / small laptop: tighten so all links fit --- */
@media (max-width: 1140px) {
  .nav-brand {
    gap: 20px;
  }
  .nav-links {
    gap: 18px;
  }
}
@media (max-width: 980px) {
  .nav-signin {
    display: none;
  }
}

/* --- Mobile --- */
@media (max-width: 809px) {
  .nav-container {
    padding: 0 20px;
  }
  .nav-links,
  .nav-signin {
    display: none;
  }
}
/* ============ hero-text ============ */
/* ============ Hero section ============ */
.hero-section{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:96px 0 40px;}

/* --- Background (sits behind transparent 60px navbar, hence top:-60px) --- */
.hero-bg{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:100%;max-width:1280px;height:1212px;overflow:hidden;pointer-events:none;z-index:0;}
.hero-wave{position:absolute;top:0;left:0;right:0;height:706px;}
.hero-wave img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.hero-glow{position:absolute;background:rgba(255,41,77,.5);border-radius:999px;filter:blur(100px);}
.hero-glow-1{width:579px;height:621px;top:-266px;left:calc(50% - 289.5px);}
.hero-glow-2{width:533px;height:552px;top:-60px;left:calc(50% - 266.5px);}
.hero-mask{position:absolute;top:0;left:0;width:100%;height:1200px;background:radial-gradient(43.2% 48.8715% at 50% 0px,rgba(4,1,2,.2) 0%,rgb(4,1,2) 100%);}

/* --- Layout --- */
.hero-container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:64px;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;}
.hero-content{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:720px;}
.hero-header{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:720px;}

/* --- Badge pill --- */
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2);}
.hero-badge-icon{display:flex;width:16px;height:16px;flex-shrink:0;color:#fff;}
.hero-badge-icon svg{width:100%;height:100%;fill:currentColor;}
.hero-badge-text{margin:0;font-size:14px;line-height:20px;font-weight:400;color:#fff;white-space:nowrap;}

/* --- Headline + description --- */
.hero-title{margin:0;font-family:var(--font);font-size:56px;line-height:64px;font-weight:500;text-align:center;color:#fff;}
.hero-title-accent{color:rgb(242,63,93);}
.hero-desc{margin:0;width:100%;max-width:560px;font-size:16px;line-height:24px;font-weight:400;text-align:center;color:rgba(255,255,255,.55);}

/* --- Buttons --- */
.hero-buttons{display:flex;align-items:center;justify-content:center;gap:12px;}
.hero-btn{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:999px;overflow:hidden;text-decoration:none;cursor:pointer;}
.hero-btn-label{position:relative;z-index:2;font-size:16px;line-height:24px;font-weight:500;color:#fff;white-space:nowrap;}
.hero-btn-primary{gap:8px;background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.hero-btn-primary::after{content:"";position:absolute;inset:0;z-index:3;border:1px solid rgba(255,255,255,.1);border-radius:999px;pointer-events:none;}
.hero-btn-stroke{position:absolute;inset:0;border-radius:999px;background:linear-gradient(225deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.05) 61.113%);}
.hero-btn-fill{position:absolute;inset:1px;border-radius:999px;background:linear-gradient(207deg,rgb(47,41,43) -70.344%,rgb(4,1,2) 100%);transition:filter .25s ease;}
.hero-btn-primary:hover .hero-btn-fill{filter:brightness(1.4);}
.hero-btn-ghost{gap:10px;background:rgba(255,255,255,0);transition:background .25s ease;}
.hero-btn-ghost:hover{background:rgba(255,255,255,.05);}
.hero-btn-play{display:flex;width:20px;height:20px;flex-shrink:0;color:#fff;}
.hero-btn-play svg{width:100%;height:100%;fill:currentColor;}

/* --- Hero app mockup: Browser zeigt fertige Kundenwebsite + Abo/Ansprechpartner-Karten (finale Version aus 36cbe7b5, wiederhergestellt 2026-06-15) --- */
/* ===== App mockup (hero browser frame) — prefix: app- ===== */
/* Wrapper MUST be present: it's a flex item in .hero-container (flex column, align-items:center).
   Without align-self:stretch + width:100% it sizes to its content — and since the whole mockup
   (browser window + float cards) is position:absolute, that content width is 0 → the window
   collapses to 0px wide and disappears. This rule was lost in the 2026-06-15 recovery; restored. */
.hero-mockup-wrap{position:relative;align-self:stretch;display:flex;justify-content:center;width:100%}
.app-mockup{position:relative;width:100%;max-width:1216px;height:620px;margin:0 auto}
.app-mockup p{margin:0;font-family:var(--font)}

/* Reveal: original Content fades in only (opacity .001 -> 1, spring, delay .3s) */
.app-mockup.rv{opacity:0;transform:none;transition:opacity .9s cubic-bezier(.22,.78,.3,1) .3s}
.app-mockup.rv.in{opacity:1;transform:none}

/* 3D tilt: perspective(1200px) rotateX(21.7deg) at scroll 0, flattens to 0 as the page scrolls.
   (NB: needs the .hero-mockup-wrap rule above to give the chain a definite width — without it the
   whole mockup collapses to width:0 regardless of the tilt.) */
.app-stage{position:relative;width:100%;height:100%;transform:perspective(1200px) rotateX(21.7deg)}
@supports (animation-timeline: scroll()){
  .app-stage{animation:app-untilt linear both;animation-timeline:scroll(root block);animation-range:0px 700px}
}
@keyframes app-untilt{
  from{transform:perspective(1200px) rotateX(21.7deg)}
  to{transform:perspective(1200px) rotateX(0deg)}
}

/* ----- Browser window ----- */
/* (backdrop-filter intentionally omitted: the bg is 96% opaque so blur(4px) was invisible; dropped while debugging, not worth re-adding.) */
.app-browser{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:1026px;background:rgba(4,1,2,.96);border-radius:8px}
.app-browser::after{content:"";position:absolute;inset:0;border:1px solid var(--line-2);border-radius:8px;pointer-events:none;z-index:3}
.app-glow{position:absolute;inset:0;border-radius:8px;overflow:hidden;background:radial-gradient(32.9012% 29.0323% at 59.0156% -12.7419%,rgba(223,29,72,.16) 0%,rgba(134,54,248,0) 100%);border-top:1px solid rgba(223,29,72,.06)}

/* ----- Topbar with real address bar ----- */
.app-topbar{position:absolute;top:0;left:0;right:0;height:48px;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.app-dot{position:absolute;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:999px;background:#2f292b}
.app-addr{position:absolute;top:50%;transform:translateY(-50%);left:84px;right:16px;height:28px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:7px;background:var(--card-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.app-addr-lock{flex:none;display:block}
.app-addr-url{flex:1;min-width:0;font-family:var(--font-inter);font-size:12px;line-height:14px;font-weight:400;color:var(--muted-3);letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-addr-url b{font-weight:400;color:var(--muted-2)}
.app-addr-refresh{flex:none;display:block;opacity:.85}

/* ----- Finished website preview (the delivered result) — flex column so hero/services never collide ----- */
.app-web{position:absolute;top:49px;left:0;right:0;bottom:0;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,rgba(255,255,255,0) 240px);font-family:var(--font)}

/* Site header */
.app-web-nav{flex:none;display:flex;align-items:center;gap:24px;height:60px;padding:0 36px;border-bottom:1px solid var(--line)}
.app-web-brand{display:flex;align-items:center;gap:11px;min-width:0}
.app-web-brandmark{flex:none}
.app-web-brandname{font-size:15px;line-height:18px;font-weight:600;color:var(--fg);letter-spacing:-.1px}
.app-web-brandsub{font-size:10px;line-height:14px;font-weight:400;color:var(--muted-2);margin-top:1px;white-space:nowrap}
.app-web-menu{margin-left:auto;display:flex;align-items:center;gap:26px;min-width:0}
.app-web-link{font-size:13px;line-height:16px;font-weight:500;color:var(--muted);white-space:nowrap}
.app-web-link-on{color:var(--fg)}
.app-web-headcta{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 18px;border-radius:7px;font-size:13px;line-height:34px;font-weight:600;color:var(--fg);background:rgba(224,176,116,.12);box-shadow:inset 0 0 0 1px rgba(224,176,116,.4)}

/* Hero (flexible middle band, vertically centred) */
.app-web-hero{flex:1 1 auto;min-height:0;display:flex;align-items:center;gap:40px;padding:0 36px}
.app-web-hero-copy{flex:1 1 0;min-width:0;max-width:430px}
.app-web-eyebrow{display:inline-block;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e0b074}
.app-web-title{margin:14px 0 0;font-size:34px;line-height:1.06;font-weight:600;letter-spacing:-.8px;color:var(--fg)}
.app-web-sub{margin-top:13px;font-size:14px;line-height:1.5;font-weight:400;color:var(--muted-3);max-width:380px}
.app-web-hero-actions{margin-top:22px;display:flex;align-items:center;gap:14px}
.app-web-btn{display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:8px;font-size:14px;line-height:42px;font-weight:600;color:#1a120a;background:linear-gradient(180deg,#ecc089 0%,#e0b074 100%);box-shadow:0 8px 24px rgba(224,176,116,.16)}
.app-web-btn-2{display:inline-flex;align-items:center;gap:7px;height:42px;font-size:14px;line-height:42px;font-weight:500;color:var(--muted-3)}
.app-web-hero-visual{position:relative;flex:1 1 0;min-width:0;height:212px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#3a2a1c 0%,#241712 55%,#1a120e 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.app-web-grain-wood{position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(96deg,rgba(224,176,116,.10) 0px,rgba(224,176,116,.02) 3px,rgba(0,0,0,.14) 7px,rgba(224,176,116,.06) 11px),radial-gradient(120% 90% at 20% 0%,rgba(236,192,137,.18) 0%,rgba(0,0,0,0) 60%)}
.app-web-visual-badge{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;background:rgba(10,7,5,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.app-web-visual-badge span{font-size:11px;line-height:14px;font-weight:600;color:#f0d7b4;white-space:nowrap}

/* Service cards (flow item, sits above footer) */
.app-web-services{flex:none;display:flex;gap:14px;padding:0 36px 22px}
.app-web-card{position:relative;flex:1 0 0;min-width:0;padding:15px 16px 16px;border-radius:10px;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.app-web-card-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:rgba(224,176,116,.08);box-shadow:inset 0 0 0 1px rgba(224,176,116,.18)}
.app-web-card-title{margin-top:12px;font-size:14px;line-height:18px;font-weight:600;color:var(--fg)}
.app-web-card-text{margin-top:4px;font-size:12px;line-height:1.4;font-weight:400;color:var(--muted)}

/* Footer hint (no live dot — the care card carries the single status marker) */
.app-web-foot{flex:none;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;border-top:1px solid var(--line)}
.app-web-foot-l{font-size:11px;line-height:14px;font-weight:500;color:var(--muted-2)}
.app-web-foot-r{font-size:11px;line-height:14px;font-weight:400;color:var(--muted-2)}

/* Grain overlay over the whole window */
.app-grain{position:absolute;inset:0;border-radius:8px;overflow:hidden;opacity:.02;pointer-events:none;z-index:2}
.app-grain img{width:100%;height:100%;object-fit:cover;display:block}

/* ----- Floating glass cards (HTML only) -----
   z-index:4 is intentional and required: floats overhang the rounded browser
   corners and must paint ABOVE .app-grain (z-index:2) and .app-browser::after (z-index:3).
   This is a deliberate change from the old scaffold value (z-index:1). cursor:default
   because there is NO drag JS — the cards are decorative, not a tool. */
.app-float{position:absolute;z-index:4;cursor:default;border-radius:8px;background:rgba(8,4,6,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 60px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

/* Card A — personal care (left, kisses the lower-left browser corner) */
.app-float-care{left:-10px;bottom:48px;width:316px;padding:18px}
.app-care-head{display:flex;align-items:center;gap:12px}
.app-care-avatar{flex:none;width:44px;height:44px;border-radius:999px;object-fit:cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.app-care-who{min-width:0}
.app-care-name{font-size:14px;line-height:18px;font-weight:600;color:var(--fg)}
.app-care-role{margin-top:2px;font-size:11px;line-height:14px;font-weight:400;color:var(--muted)}
.app-care-msg{margin-top:14px;font-size:13px;line-height:1.5;font-weight:400;color:var(--muted-3)}
.app-care-status{margin-top:14px;display:flex;align-items:center;gap:8px;padding-top:13px;border-top:1px solid var(--line)}
.app-care-live{flex:none;width:8px;height:8px;border-radius:999px;background:#4ad07a;box-shadow:0 0 0 4px rgba(74,208,122,.14);animation:app-care-pulse 2.4s ease-in-out infinite}
@keyframes app-care-pulse{0%,100%{box-shadow:0 0 0 3px rgba(74,208,122,.18)}50%{box-shadow:0 0 0 6px rgba(74,208,122,.05)}}
.app-care-status-text{font-size:11px;line-height:14px;font-weight:500;color:var(--muted)}

/* Card B — subscription value (right, kisses the lower-right browser corner) */
.app-float-plan{right:-10px;bottom:72px;width:292px;padding:18px}
.app-float-plan::before{content:"";position:absolute;inset:0;border-radius:8px;background:radial-gradient(120% 80% at 100% 0%,rgba(223,29,72,.16) 0%,rgba(223,29,72,0) 62%);pointer-events:none}
.app-plan-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.app-plan-label{font-size:11px;line-height:1.35;font-weight:500;color:var(--muted)}
.app-plan-price{font-size:14px;line-height:1;font-weight:400;color:var(--muted-3);white-space:nowrap}
.app-plan-price strong{font-size:28px;font-weight:700;color:var(--fg);letter-spacing:-.5px}
.app-plan-price span{font-size:13px;font-weight:500;color:var(--muted)}
.app-plan-list{position:relative;list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.app-plan-list li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:16px;font-weight:500;color:var(--muted-3)}
.app-plan-list svg{flex:none}

/* ----- Tablet / mid-width (810–1100px): gutter between stage (1216) and browser (1026)
   collapses here, so floats would sit on top of the preview. Hide them early. ----- */
@media (max-width:1100px){
  .app-float{display:none}
}

/* ----- Mobile (<=809px) — preview fills width, floats hidden, flatter tilt, scroll-anim off ----- */
@media (max-width:809px){
  .app-mockup{height:487px}
  .app-stage{transform:perspective(1200px) rotateX(12deg)}
  @supports (animation-timeline: scroll()){
    .app-stage{animation:none}
  }
  .app-addr{left:80px;right:12px}
  .app-addr-url{font-size:11px}
  .app-web-nav{padding:0 18px;gap:14px;height:54px}
  .app-web-menu{display:none}
  .app-web-brandsub{display:none}
  .app-web-hero{flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:0 18px}
  .app-web-hero-copy{max-width:none}
  .app-web-title{font-size:24px}
  .app-web-sub{font-size:12.5px;max-width:none;margin-top:10px}
  .app-web-hero-actions{margin-top:16px}
  .app-web-hero-visual{display:none}
  .app-web-services{padding:0 18px 16px;gap:10px}
  .app-web-card{padding:12px}
  .app-web-card-text{display:none}
  .app-web-foot{padding:0 18px;justify-content:center}
  .app-web-foot-l{display:none}
}

/* ============ logos ============ */
/* ---- Logo ticker section (logos-) ---- */
.logos-section{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:52px 0 88px;position:relative;overflow:hidden}
.logos-defs{position:absolute;width:0;height:0;overflow:hidden}
.logos-container{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:32px;width:100%;max-width:1280px;padding:0 32px}
.logos-heading-wrap{display:flex;width:100%;max-width:560px}
.logos-heading{margin:0;width:100%;font-family:var(--font);font-size:16px;font-weight:400;line-height:24px;letter-spacing:normal;text-align:center;color:var(--ink)}
.logos-marquee{display:flex;width:100%;height:84px;padding:12px 10px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgb(0,0,0) 12.5%,rgb(0,0,0) 87.5%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgb(0,0,0) 12.5%,rgb(0,0,0) 87.5%,rgba(0,0,0,0) 100%)}
.logos-track{display:flex;flex-direction:row;align-items:center;width:max-content;height:100%;margin:0;padding:0;list-style:none;will-change:transform;animation:logos-scroll 28s linear infinite}
.logos-item{display:flex;align-items:center;justify-content:center;flex:none;height:60px;margin-right:64px}
.logos-logo{display:block;flex:none;height:60px;width:auto;opacity:.6;transition:opacity .3s ease}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(calc(var(--logos-shift,50%) * -1))}}
/* fade-in (original ticker fades from opacity 0 after hydration) */
.logos-marquee.rv{opacity:0;transition:opacity .8s ease}
.logos-marquee.rv.in{opacity:1}
@media (max-width:1199px){
  .logos-section{padding:60px 0 100px}
}
@media (max-width:809px){
  .logos-section{padding:48px 0 84px}
  .logos-container{padding:0 20px}
  .logos-track{animation-duration:22s}
  .logos-marquee{height:64px}
  .logos-item{height:46px;margin-right:44px}
  .logos-logo{height:46px}
}
/* ============ feature1 ============ */
/* ============ Feature 1 — "How it works" dome section ============ */
.f1-section{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:96px 0 0;overflow:hidden;}

/* --- background layer (1440px stage, clipped by section) --- */
.f1-bg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:1440px;height:774px;overflow:hidden;pointer-events:none;}
.f1-bg-glow{position:absolute;top:-200px;left:19.3403%;width:61%;height:400px;border-radius:999px;background:rgba(223,29,72,.48);filter:blur(100px);}
.f1-wave{position:absolute;top:-160px;left:0;right:0;height:794px;}
.f1-wave img{display:block;width:100%;height:100%;object-fit:cover;}
.f1-bg-mask{position:absolute;inset:0;background:radial-gradient(38.4% 50% at 50% -3.59198%,rgba(4,1,2,0) 0%,#040102 100%);}
.f1-lines{position:absolute;top:0;left:calc(50% - 480px);width:960px;height:1px;}
.f1-line{position:absolute;inset:0;overflow:hidden;background:linear-gradient(90deg,rgba(255,72,109,0) 0%,#ff486d 49.6875%,rgba(255,72,109,0) 100%);}
.f1-line-soft{filter:blur(1px);background:linear-gradient(90deg,rgba(255,72,109,0) 0%,#ff486d 50%,rgba(255,72,109,0) 100%);}
.f1-star{position:absolute;}
.f1-star svg{display:block;width:100%;height:100%;}
.f1-star-1{top:102px;left:calc(16.6667% - 12px);width:24px;height:24px;}
.f1-star-2{top:102px;left:1232px;width:20px;height:20px;}
.f1-star-3{top:255px;left:calc(6.11111% - 6px);width:12px;height:12px;}

/* --- dome container --- */
.f1-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;border-radius:8px;}
.f1-rim-glow{position:absolute;top:0;left:0;width:100%;height:678px;border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(223,29,72,.48) 0%,rgba(223,29,72,0) 85.5457%);filter:blur(32px);overflow:hidden;pointer-events:none;}
/* 1px gradient rim via padding trick (rim: #ff486d fading to transparent) */
.f1-dome{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:1px 1px 0;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#ff486d 0%,rgba(255,72,109,0) 100%);overflow:hidden;}
.f1-dome-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:64px;width:100%;padding:96px;border-radius:9999px 9999px 0 0;background:#040102;overflow:hidden;}
.f1-grain{position:absolute;top:0;left:0;right:0;height:676px;border-radius:999px 999px 0 0;opacity:.02;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");background-size:200px 200px;pointer-events:none;}
.f1-fade{position:absolute;top:0;left:0;right:0;height:676px;border-radius:999px 999px 0 0;background:linear-gradient(180deg,rgba(4,1,2,0) 49.5511%,#040102 100%);pointer-events:none;}

/* --- sparkles (replaces original canvas particle effect) --- */
.f1-sparkles{position:absolute;inset:0;border-radius:999px 999px 0 0;overflow:hidden;pointer-events:none;}
.f1-sp{position:absolute;width:3px;height:3px;border-radius:50%;background:rgb(244,242,254);box-shadow:0 0 6px rgba(244,242,254,.8);opacity:.15;animation:f1-twinkle var(--t,4s) ease-in-out var(--d,0s) infinite;}
.f1-sp-sm{width:2px;height:2px;}
.f1-sp-lg{width:4px;height:4px;}
@keyframes f1-twinkle{0%,100%{opacity:.1;transform:scale(.6);}50%{opacity:.95;transform:scale(1);}}

/* --- header (badge + h2 + description) --- */
.f1-header{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:720px;}
.f1-header-top{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;}
.f1-badge{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2);overflow:hidden;}
.f1-badge-icon{width:16px;height:16px;flex-shrink:0;}
.f1-badge-icon svg{display:block;width:100%;height:100%;fill:#fff;}
.f1-badge-label{margin:0;font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;color:#fff;}
.f1-title{margin:0;font-family:var(--font);font-size:48px;line-height:56px;font-weight:500;text-align:center;color:#fff;}
.f1-desc{margin:0;max-width:560px;font-family:var(--font);font-size:16px;line-height:24px;font-weight:400;text-align:center;color:rgba(255,255,255,.55);}

/* --- 3 feature columns --- */
.f1-features{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:64px;width:100%;}
.f1-card{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:1 0 0;width:1px;min-width:0;overflow:hidden;}
.f1-chip{display:flex;align-items:center;padding:1px;width:40px;height:40px;border-radius:999px;background:linear-gradient(225deg,rgb(105,94,98) 0%,rgb(4,1,2) 100%);}
.f1-chip-core{display:flex;width:38px;height:38px;padding:7px;border-radius:999px;background:linear-gradient(180deg,rgb(47,41,43) 0%,rgb(4,1,2) 100%);}
.f1-chip-core svg{display:block;width:24px;height:24px;fill:rgba(255,255,255,.75);}
.f1-card-text{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;}
.f1-card-title{margin:0;font-family:var(--font);font-size:24px;line-height:32px;font-weight:500;color:#fff;}
.f1-card-desc{margin:0;font-family:var(--font);font-size:16px;line-height:24px;color:rgba(255,255,255,.55);}

/* --- scroll reveal (page shell IO adds .in) --- */
.f1-section .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.27,.65,.3,.9),transform .8s cubic-bezier(.27,.65,.3,.9);}
.f1-section .rv.in{opacity:1;transform:none;}
.f1-features .f1-card:nth-child(2){transition-delay:.12s;}
.f1-features .f1-card:nth-child(3){transition-delay:.24s;}

/* --- mobile (matches original 809px breakpoint overrides) --- */
@media (max-width:809px){
  .f1-bg{width:375px;}
  .f1-bg-glow{width:100%;left:.133336%;}
  .f1-wave{top:-96px;left:-175px;right:-175px;height:399px;}
  .f1-bg-mask{background:radial-gradient(50% 39.7% at 50% -3.59198%,rgba(4,1,2,0) 0%,#040102 100%);}
  .f1-lines{width:343px;left:calc(50% - 171.5px);}
  .f1-star{display:none;}
  .f1-container{padding:0 16px;}
  .f1-dome{background:linear-gradient(180deg,#ff486d 0%,rgba(255,72,109,0) 65.6596%);}
  .f1-dome-inner{gap:48px;padding:64px 24px 48px;}
  .f1-title{font-size:32px;line-height:40px;}
  .f1-features{flex-direction:column;gap:32px;}
  .f1-card{flex:none;width:100%;}
}
/* ============ feature2 ============ */
/* ============ Feature 2 (f2-) ============ */
.f2-sec{display:flex;flex-direction:column;gap:112px;padding:96px 0;position:relative}
.f2-row{display:flex;align-items:center;gap:80px;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.f2-row2,.f2-row3{gap:96px}

/* columns */
.f2-media{position:relative;flex:1 1 0;min-width:0;height:364px}
.f2-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 1 0;min-width:0}
.f2-text{display:flex;flex-direction:column;gap:16px;width:100%}

/* glows (sit behind the card) */
.f2-glow{position:absolute;width:244px;height:244px;border-radius:999px;filter:blur(20px)}
.f2-glow1{background:#df1d48;right:0;top:48px}
.f2-glow2{background:#ff5b00a3;left:0;top:48px}
.f2-glow3{background:#14b7a6a3;right:0;top:80px}

/* card shell */
.f2-card{position:relative;width:100%;height:100%;border-radius:8px;background:rgba(4,1,2,.64);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1);overflow:hidden;cursor:pointer}

/* inner boards */
.f2-board{position:absolute;left:calc(50% - 226.5px);width:453px;border-radius:8px;overflow:hidden}
.f2-board1{top:45px;height:274px;background:rgba(252,164,174,.03);box-shadow:0 -1px 0 0 rgba(255,219,223,.12)}
.f2-board2{top:33.5px;height:297px;background:rgba(46,42,40,.2);box-shadow:0 -1px 0 0 rgba(255,230,219,.12)}
.f2-board3{top:33.5px;height:297px;background:rgba(40,46,45,.2);box-shadow:0 -1px 0 0 rgba(255,230,219,.12)}

/* row 1 — icon chips */
.f2-tabs{position:absolute;top:24px;left:calc(48.7859% - 197.5px);width:395px;display:flex;align-items:center;justify-content:center;gap:20px;transition:gap .3s ease}
.f2-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 0;border-radius:16px;overflow:hidden}
.f2-chip-active{border-radius:4px;background:rgb(47,41,43)}
.f2-chip-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:8px;box-sizing:border-box;border-radius:20px;background:rgba(255,255,255,.06)}
.f2-chip-ic svg{width:24px;height:24px;display:block;flex-shrink:0}
.f2-chip p{margin:0;font-family:var(--font-inter);font-size:14px;line-height:20px;font-weight:400;color:rgba(255,255,255,.55);text-align:center;white-space:nowrap}
.f2-card1:hover .f2-tabs{gap:14px}
.f2-card1:hover .f2-chip{padding:12px}

/* prompt inputs */
.f2-input{position:absolute;left:26px;right:26px;height:64px;border-radius:8px;box-shadow:0 -1px 0 0 rgba(255,219,223,.12),0 0 0 1px rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}
.f2-input1{bottom:64px;background:linear-gradient(270deg,rgba(4,1,2,.64) 0%,rgba(4,1,2,.32) 50.4505%,rgba(4,1,2,.64) 100%)}
.f2-input2{bottom:75px;background:linear-gradient(270deg,rgba(4,1,2,.64) 0%,rgba(4,1,2,.96) 49.6063%,rgba(4,1,2,.4) 100%)}
.f2-input3{bottom:64px;left:24px;right:24px;background:linear-gradient(270deg,rgba(1,5,4,.64) 0%,rgba(4,1,2,.8) 49.6063%,rgba(4,1,2,.4) 100%)}
.f2-ph{position:absolute;left:24px;top:50%;transform:translateY(-50%);margin:0;font-family:var(--font-inter);font-size:18px;line-height:28px;font-weight:300;color:rgba(255,255,255,.4);white-space:nowrap}
.f2-ph-sm{left:19px;font-size:16px}
.f2-send{position:absolute;right:12px;bottom:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(46,42,40,.2);box-shadow:0 -1px 0 0 rgba(255,219,223,.2);transition:background .25s ease}
.f2-send svg{width:24px;height:24px;display:block}
.f2-card:hover .f2-send{background:rgba(46,42,40,.45)}

/* badge pill (rows 2+3) */
.f2-badge-pos{position:absolute;top:18px;left:50%;transform:translateX(-50%)}
.f2-badge{padding:6px 14px;border-radius:16px;background:rgba(255,255,255,.06);font-family:var(--font-inter);font-size:14px;line-height:20px;font-weight:400;color:#fff;white-space:nowrap}

/* row 2 — images + generate button */
.f2-img{position:absolute;bottom:26px;width:197px;height:203px;border-radius:16px;overflow:hidden}
.f2-img-l{left:24px}
.f2-img-r{left:232px}
.f2-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
.f2-btn{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.03);cursor:pointer}
.f2-btn-glow,.f2-btn-stroke,.f2-btn-fill{position:absolute;border-radius:999px;pointer-events:none}
.f2-btn-glow{inset:0;overflow:hidden;background:radial-gradient(20.1% 50% at 50% 0%,#fff 0%,rgba(255,255,255,.05) 100%)}
.f2-btn-glow::after{content:"";position:absolute;inset:-150%;background:conic-gradient(from 0deg,transparent 0deg 300deg,rgba(255,255,255,.5) 332deg,transparent 360deg);animation:f2-orbit 5s linear infinite}
.f2-btn-stroke{inset:0;background:linear-gradient(225deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.05) 61.1128%)}
.f2-btn-fill{inset:1px;background:linear-gradient(207deg,rgb(47,41,43) -70.344%,rgb(4,1,2) 100%);transition:filter .25s ease}
.f2-btn-label{position:relative;font-family:var(--font);font-size:14px;line-height:20px;font-weight:500;color:#fff}
.f2-btn:hover .f2-btn-fill{filter:brightness(1.35)}
.f2-btn{text-decoration:none}
/* clickable CTA input bar (box 1) */
.f2-cta{text-decoration:none;cursor:pointer}
.f2-input1 .f2-ph,.f2-input3 .f2-ph{transition:opacity .42s cubic-bezier(.21,.61,.35,1),transform .42s cubic-bezier(.21,.61,.35,1)}
.f2-ph-hover{opacity:0;transform:translateY(calc(-50% + 12px))}
.f2-card1:hover .f2-ph-default,.f2-card3:hover .f2-ph-default{opacity:0;transform:translateY(calc(-50% - 12px))}
.f2-card1:hover .f2-ph-hover,.f2-card3:hover .f2-ph-hover{opacity:1;transform:translateY(-50%)}
.f2-card1:hover .f2-send,.f2-card3:hover .f2-send{background:rgba(46,42,40,.2)}
@keyframes f2-orbit{to{transform:rotate(360deg)}}

/* row 3 — keyword table */
.f2-table{position:absolute;bottom:16px;left:calc(49.0066% - 195px);width:390px;height:114px;overflow:hidden}
.f2-th,.f2-td{position:absolute;margin:0;font-family:var(--font-inter);font-size:16px;line-height:28px;font-weight:400;white-space:nowrap}
.f2-th{top:0;color:#fff}
.f2-td{color:rgba(255,255,255,.65);transition:top .5s cubic-bezier(.4,.1,.2,1),bottom .5s cubic-bezier(.4,.1,.2,1)}
.f2-c1{left:0}
.f2-c2{left:155px}
.f2-c3{left:258px}
.f2-c4{left:341px}
.f2-c2h{left:47%;transform:translateX(-50%)}
.f2-c4h{right:0}
.f2-td.f2-c2{transition-delay:.05s}
.f2-td.f2-c3{transition-delay:.1s}
.f2-td.f2-c4{transition-delay:.15s}
.f2-ra{top:43px}
.f2-rb{top:86px}
.f2-rc.f2-c1{bottom:-43px}.f2-rc.f2-c2{bottom:-53px}.f2-rc.f2-c3{bottom:-63px}.f2-rc.f2-c4{bottom:-73px}
.f2-rd.f2-c1{bottom:-86px}.f2-rd.f2-c2{bottom:-96px}.f2-rd.f2-c3{bottom:-106px}.f2-rd.f2-c4{bottom:-116px}
.f2-card3:hover .f2-ra{top:-28px}
.f2-card3:hover .f2-rb{top:18px}
.f2-card3:hover .f2-rc{bottom:43px}
.f2-card3:hover .f2-rd{bottom:0}

/* row 1 — growth chart (Vertriebskanal, der mitwächst) */
.f2-chart{position:absolute;top:24px;left:28px;right:28px;display:flex;flex-direction:column;gap:12px}
.f2-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.f2-chart-label{font-family:var(--font-inter);font-size:14px;line-height:20px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f2-chart-trend{flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:rgba(223,29,72,.14);font-family:var(--font-inter);font-size:13px;line-height:18px;color:#ff6b88;white-space:nowrap}
.f2-chart-trend svg{width:14px;height:14px;display:block;fill:#ff6b88}
.f2-bars{display:flex;align-items:flex-end;gap:12px;height:100px}
.f2-bar{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(223,29,72,.30) 0%,rgba(223,29,72,.04) 100%);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.07);transition:filter .25s ease}
.f2-bar-on{background:linear-gradient(180deg,#df1d48 0%,rgba(223,29,72,.32) 100%);box-shadow:0 0 18px rgba(223,29,72,.45)}
.f2-months{display:flex;gap:12px}
.f2-months span{flex:1;text-align:center;font-family:var(--font-inter);font-size:11px;line-height:16px;color:rgba(255,255,255,.32)}

/* row 2 — leistungs-checkliste (alles in einem Betrag) */
.f2-incl{position:absolute;top:62px;left:28px;right:28px;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 18px}
.f2-incl li{display:flex;align-items:center;gap:10px;font-family:var(--font-inter);font-size:14px;line-height:18px;color:rgba(255,255,255,.78)}
.f2-incl-ic{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:rgba(255,92,0,.16);box-shadow:0 -1px 0 0 rgba(255,230,219,.14)}
.f2-incl-ic svg{width:13px;height:13px;display:block;fill:#ff8a3d}

/* row 3 — fester ansprechpartner (eine beziehung) */
.f2-contact{position:absolute;top:60px;left:28px;right:28px;display:flex;flex-direction:column;gap:16px}
.f2-contact-head{display:flex;align-items:center;gap:14px}
.f2-contact-av{flex:none;width:52px;height:52px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.f2-contact-id{flex:1;min-width:0}
.f2-contact-name{margin:0;font-family:var(--font);font-size:16px;line-height:22px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f2-contact-role{margin:0;font-family:var(--font-inter);font-size:13px;line-height:18px;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f2-contact-status{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-inter);font-size:12px;line-height:16px;color:#5fe0d0;white-space:nowrap}
.f2-contact-dot{width:8px;height:8px;border-radius:999px;background:#14b7a6;box-shadow:0 0 8px rgba(20,183,166,.85)}
.f2-contact-bubble{align-self:flex-start;max-width:90%;padding:11px 15px;border-radius:14px 14px 14px 4px;background:rgba(20,183,166,.10);box-shadow:0 -1px 0 0 rgba(219,255,250,.12);font-family:var(--font-inter);font-size:14px;line-height:20px;color:rgba(255,255,255,.8)}

/* typography */
.f2-eyebrow{margin:0;font-family:var(--font);font-size:14px;line-height:20px;font-weight:400}
.f2-h3{margin:0;font-family:var(--font);font-size:36px;line-height:44px;font-weight:500;letter-spacing:0}
.f2-desc{margin:0;font-family:var(--font);font-size:16px;line-height:24px;font-weight:400}
.f2-gt{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.f2-g1a{background-image:linear-gradient(90deg,#df1d48 -42.7331%,#fff 51.992%)}
.f2-g1b{background-image:linear-gradient(90deg,#df1d48 -12.9576%,#fff 18.2676%)}
.f2-g1c{background-image:linear-gradient(90deg,#df1d48 -12.9576%,#fff 15.8451%)}
.f2-g2a{background-image:linear-gradient(270deg,#ff5c00 -52.1214%,#fff 30.1247%)}
.f2-g2b{background-image:linear-gradient(270deg,#ff5c00 -13.2812%,#fff 46.4844%)}
.f2-g2c{background-image:linear-gradient(270deg,#ff5c00 -13.2812%,#fff 21.7081%)}
.f2-g3a{background-image:linear-gradient(90deg,#14b7a6 -50.2176%,#fff 60.0076%)}
.f2-g3b{background-image:linear-gradient(270deg,#fff 74.8214%,#14b7a6 117.5%)}
.f2-g3c{background-image:linear-gradient(90deg,#14b7a6 -16.7969%,rgba(255,255,255,.88) 19.8214%)}

/* scroll-reveal (page shell IO adds .in) */
.f2-sec .rv{transition:opacity .8s ease,transform .9s cubic-bezier(.21,.61,.35,1)}
.f2-sec .f2-fade{opacity:0}
.f2-sec .f2-x64{opacity:0;transform:translateX(64px)}
.f2-sec .f2-x96{opacity:0;transform:translateX(96px)}
.f2-sec .f2-x128{opacity:0;transform:translateX(128px)}
.f2-sec .f2-y32{transform:translateY(32px)}
.f2-sec .f2-y64{transform:translateY(64px)}
.f2-sec .f2-y96{transform:translateY(96px)}
.f2-sec .f2-y128{transform:translateY(128px)}
.f2-sec .f2-pop{opacity:0;transform:translateY(96px) scale(.5)}
.f2-sec .rv.in{opacity:1;transform:none}
.f2-sec .f2-d1{transition-delay:.1s}
.f2-sec .f2-d2{transition-delay:.2s}
/* chips + input keep hover transitions alongside reveal */
.f2-sec .f2-chip.rv{transition:opacity .8s ease,transform .9s cubic-bezier(.21,.61,.35,1),padding .3s ease}
.f2-sec .f2-input1.rv{transition:opacity .8s ease,transform .9s cubic-bezier(.21,.61,.35,1),height .35s ease}

/* mobile */
@media (max-width:809px){
  .f2-sec{gap:96px;padding:48px 0}
  .f2-row{flex-direction:column;align-items:stretch;gap:32px;padding:0 16px}
  .f2-row2 .f2-copy{order:1}
  .f2-media{flex:none;width:100%;height:322px}
  .f2-row2 .f2-media,.f2-row3 .f2-media{height:345px}
  .f2-board{left:24px;right:24px;width:auto}
  .f2-board1,.f2-board2,.f2-board3{top:24px}
  .f2-tabs{left:24px}
  .f2-input1,.f2-input2,.f2-input3{left:12px;right:12px;bottom:64px}
  .f2-img-l{left:24px;width:120px}
  .f2-img-r{left:auto;right:24px;width:120px}
  .f2-table{left:16px}
  .f2-chart,.f2-incl,.f2-contact{left:20px;right:20px}
  .f2-chart{top:16px}
  .f2-bars{height:76px}
  .f2-incl{top:56px;gap:12px 14px}
  .f2-incl li{font-size:13px;line-height:17px}
  .f2-contact{top:48px}
  .f2-input2 .f2-ph{font-size:13px}
  .f2-input3 .f2-ph{font-size:16px}
  .f2-h3{font-size:32px;line-height:40px}
  /* The desktop reveal slides these in from the RIGHT (translateX 64/96/128px); in the
     un-revealed state (below the fold) that pushes content past the viewport edge and,
     because .f2-sec has overflow:visible, caused a horizontal overflow / "black bar" on
     phones. On mobile slide up instead — no sideways overflow, matches the global .rv. */
  .f2-sec .f2-x64,.f2-sec .f2-x96,.f2-sec .f2-x128{transform:translateY(32px)}
}
/* ============ feature3 ============ */
/* ============ Features 3 — "Build no-code AI chatbots" ============ */
.f3-section{position:relative;display:flex;flex-direction:column;align-items:center;padding:96px 0;overflow:hidden}

/* Background: red glow + grain arc + radial vignette mask (exact computed values) */
.f3-bg{position:absolute;left:0;right:0;bottom:0;height:974px;overflow:hidden;pointer-events:none}
.f3-glow{position:absolute;top:173px;left:50%;transform:translateX(-50%);width:600px;height:272px;border-radius:999px;background:rgba(223,29,72,.64);filter:blur(160px)}
.f3-grain{position:absolute;top:0;left:0;right:0;height:676px;border-radius:999px 999px 0 0;overflow:hidden;opacity:.06}
.f3-grain img{display:block;width:100%;height:100%;object-fit:fill;border-radius:inherit}
.f3-mask{position:absolute;top:-19px;left:0;right:0;height:992px;background:radial-gradient(26.1% 33.5% at 50% 33.6%,rgba(4,1,2,.1) 0%,rgb(4,1,2) 100%)}

.f3-container{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;align-items:center;gap:64px}

/* Header */
.f3-header{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:768px;text-align:center}
.f3-headtop{display:flex;flex-direction:column;align-items:center;gap:12px}
.f3-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2)}
.f3-pill svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
.f3-pill span{font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;color:#fff;white-space:nowrap}
.f3-h2{margin:0;font-family:var(--font);font-size:48px;line-height:56px;font-weight:500;color:#fff}
.f3-desc{margin:0;max-width:560px;font-family:var(--font);font-size:16px;line-height:24px;font-weight:400;color:var(--muted)}

/* Two big cards */
.f3-cards{display:flex;justify-content:center;gap:24px;width:100%}
.f3-card{position:relative;flex:0 1 596px;min-width:0;height:360px;border-radius:8px;background:rgba(4,1,2,.64);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1);overflow:hidden}
.f3-board{position:absolute;top:31.5px;bottom:31.5px;left:71.5px;right:71.5px;border-radius:8px;background:rgba(40,46,45,.2);box-shadow:0 -1px 0 0 rgba(255,230,219,.12);overflow:hidden}
.f3-scene{position:absolute;top:0;left:50%;width:453px;height:297px;transform:translateX(-50%);transform-origin:top center}

/* Icon chips (48px round) */
.f3-icw{position:relative;width:48px;height:48px;border-radius:999px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.f3-icw svg{position:relative;z-index:1;width:24px;height:24px;fill:rgba(255,255,255,.65)}
.f3-fill{position:absolute;inset:0;border-radius:999px;background:var(--red);transform:translateY(100%)}

/* Left card: chips with labels */
.f3-chip{position:absolute;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateX(-50%)}
.f3-chip span{font-family:var(--font-inter);font-size:14px;line-height:20px;color:rgba(255,255,255,.65);white-space:nowrap}
.f3-chip-1{left:122.5px;top:12px}
.f3-chip-2{left:226.5px;top:12px}
.f3-chip-3{left:335.5px;top:13px}
.f3-chip-1 .f3-fill{animation:f3-fill-up 6s ease-in-out infinite}
.f3-chip-2 .f3-fill{animation:f3-fill-up 6s ease-in-out 2s infinite}
.f3-chip-3 .f3-fill{animation:f3-fill-up 6s ease-in-out 4s infinite}

/* Left card: connector lines (exact paths from DOM) */
.f3-lnA{position:absolute;left:125px;top:119px;width:103px;height:51px}
.f3-lnA-red{opacity:0;animation:f3-dash 6s ease-in-out infinite}
.f3-lnB{position:absolute;left:227px;top:119px;width:99px;height:19px}
.f3-caret{position:absolute;left:226px;top:120px;width:3px;height:17px}

/* Left card: keyword table (absolute grid as in original) */
.f3-table{position:absolute;left:32px;top:181px;width:390px;height:114px;overflow:hidden;font-family:var(--font-inter);font-size:16px;font-weight:400;line-height:28px}
.f3-tr{position:absolute;left:0;right:0;height:28px;color:rgba(255,255,255,.65)}
.f3-tr--head{top:0;color:#fff}
.f3-tr--1{top:57px}
.f3-tr--2{top:86px}
.f3-tr span{position:absolute;top:0;white-space:nowrap}
.f3-c1{left:0}
.f3-c2{left:155px}
.f3-c3{left:258px}
.f3-c4{left:341px}
.f3-tr--head .f3-c2{left:183px}

/* Fake input bar (both cards) */
.f3-input{position:absolute;left:44px;right:44px;bottom:48px;height:64px;border-radius:8px;display:flex;align-items:center;padding:0 64px 0 24px;background:linear-gradient(270deg,rgba(1,5,4,.4) 0%,rgba(4,1,2,.8) 49.6%,rgba(4,1,2,.4) 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -1px 0 0 rgba(255,219,223,.12),0 0 0 1px rgba(255,255,255,.06)}
.f3-input>span{font-family:var(--font-inter);font-size:18px;line-height:28px;font-weight:300;color:var(--muted-2)}
.f3-input-btn{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:4px;background:rgba(46,42,40,.2);box-shadow:0 -1px 0 0 rgba(255,219,223,.2);display:flex;align-items:center;justify-content:center}
.f3-input-btn svg{width:24px;height:24px;fill:#fff}

/* Right card: app-icon cluster + connectors */
.f3-node{position:absolute}
.f3-n1{left:203px;top:17px}
.f3-n2{left:116px;top:41px}
.f3-n3{left:30px;top:80px}
.f3-n4{left:289px;top:41px}
.f3-n5{left:375px;top:80px}
.f3-n1 .f3-fill{animation:f3-fill-up 4s ease-in-out infinite}
.f3-lines{position:absolute;left:54px;top:78px;width:346px;height:114px}
.f3-lbig{position:absolute;left:.5px;top:60px;width:345px;height:24px}
.f3-lsm{position:absolute;left:87px;top:22px;width:172px;height:25px}
.f3-lver{position:absolute;left:170.5px;top:.5px;width:3px;height:113px}
.f3-pulse{position:absolute;left:171.5px;top:114px;width:1px;height:24px;background:var(--red-2);transform:scaleY(0);transform-origin:top center;animation:f3-line-pulse 4s ease-in-out infinite}

/* Divider */
.f3-divider{width:100%;height:1px;opacity:.2;background:linear-gradient(90deg,rgba(195,180,252,0) 0%,rgba(255,255,255,.5) 53.125%,rgba(195,180,252,0) 100%)}

/* Bottom feature columns */
.f3-features{display:flex;justify-content:center;gap:64px;width:100%}
.f3-feature{display:flex;flex-direction:column;gap:24px;flex:1;min-width:0}
.f3-fchip{width:40px;height:40px;padding:1px;border-radius:999px;background:linear-gradient(225deg,rgb(105,94,98) 0%,rgb(4,1,2) 100%)}
.f3-fchip-in{width:38px;height:38px;padding:7px;border-radius:999px;background:linear-gradient(180deg,rgb(47,41,43) 0%,rgb(4,1,2) 100%);display:flex}
.f3-fchip svg{width:24px;height:24px;fill:rgba(255,255,255,.75)}
.f3-fbody{display:flex;flex-direction:column;gap:8px}
.f3-fbody h4{margin:0;font-family:var(--font);font-size:24px;line-height:32px;font-weight:500;color:#fff}
.f3-fbody p{margin:0;font-family:var(--font);font-size:16px;line-height:24px;font-weight:400;color:var(--muted)}

/* Continuous animations */
@keyframes f3-fill-up{
  0%,45%{transform:translateY(100%)}
  55%,70%{transform:translateY(0)}
  80%,100%{transform:translateY(-100%)}
}
@keyframes f3-dash{
  0%,45%{opacity:0}
  55%,70%{opacity:1}
  80%,100%{opacity:0}
}
@keyframes f3-line-pulse{
  0%,40%{transform:scaleY(0);opacity:1}
  55%{transform:scaleY(1);opacity:1}
  70%,100%{transform:scaleY(1);opacity:0}
}

/* Scroll reveal (shell adds .in via IntersectionObserver) */
.f3-section .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.f3-section .rv.in{opacity:1;transform:none}

/* Tablet: stack the two big cards */
@media (max-width:1199px){
  .f3-cards{flex-direction:column;align-items:center}
  .f3-card{flex:none;width:100%;max-width:596px}
}

/* Mobile */
@media (max-width:809px){
  .f3-section{padding:48px 0}
  .f3-container{gap:48px;padding:0 16px}
  .f3-h2{font-size:32px;line-height:40px}
  .f3-cards{gap:16px}
  .f3-card{height:340px}
  .f3-board{top:24px;bottom:24px;left:16px;right:16px}
  .f3-scene{transform:translateX(-50%) scale(.72)}
  .f3-input{left:16px;right:16px;bottom:24px}
  .f3-features{flex-direction:column;gap:48px}
  .f3-feature{flex:none;width:100%}
  .f3-fbody h4{font-size:20px;line-height:28px}
}
/* ============ feature4 ============ */
/* ============ Features 4 — "AI Conversation Partner" ============ */
.f4-section{position:relative;display:flex;flex-direction:column;align-items:center;padding:96px 0 96px;overflow:hidden}

/* --- background layers --- */
.f4-bg{position:absolute;inset:0;pointer-events:none}
.f4-glow{position:absolute;top:486px;left:50%;transform:translateX(-50%);width:600px;height:272px;border-radius:999px;background:rgba(13,147,135,.96);filter:blur(160px);opacity:0;transition:opacity 1.4s ease .2s}
.f4-glow.in{opacity:1}
.f4-grain{position:absolute;top:340px;left:0;right:0;height:676px;border-radius:999px 999px 0 0;overflow:hidden;opacity:0;transition:opacity 1.4s ease .2s}
.f4-grain.in{opacity:.06}
.f4-grain img{display:block;width:100%;height:100%;object-fit:fill;border-radius:inherit}
.f4-mask{position:absolute;inset:0;background:radial-gradient(35.1% 41% at 50% 59.2%,rgba(4,1,2,.3) 0%,rgb(4,1,2) 100%)}

.f4-container{position:relative;z-index:1;width:100%;max-width:1280px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;align-items:center;gap:64px}

/* --- header --- */
.f4-header{display:flex;flex-direction:column;align-items:center;max-width:768px;text-align:center}
.f4-pill{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2)}
.f4-pill-ic{width:16px;height:16px;fill:#fff;flex-shrink:0}
.f4-pill-label{margin:0;font:400 14px/20px var(--font);color:#fff}
.f4-title{margin:12px 0 0;font:500 48px/56px var(--font);color:#fff}
.f4-sub{margin:16px 0 0;max-width:560px;font:400 16px/24px var(--font);color:rgba(255,255,255,.55)}

/* --- grid --- */
.f4-features{display:flex;flex-direction:column;gap:24px;width:100%}
.f4-row{display:grid;gap:24px}
.f4-row--3{grid-template-columns:repeat(3,1fr)}
.f4-row--2{grid-template-columns:repeat(2,1fr)}

/* --- card shell --- */
.f4-card{position:relative;background:rgba(4,1,2,.64);border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1);overflow:hidden}
.f4-mock{position:relative;height:260px}
.f4-board{position:absolute;inset:24px;background:rgba(40,46,45,.2);border-radius:8px;box-shadow:0 -1px 0 0 rgba(255,230,219,.12)}
.f4-board--clip{overflow:hidden}
.f4-row--2 .f4-board{left:64px;right:64px}
.f4-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:32px}
.f4-h4{margin:0;font:500 24px/32px var(--font);color:#fff}
.f4-desc{margin:0;font:400 16px/24px var(--font);color:rgba(255,255,255,.55)}
.f4-desc--med{font-weight:500}

/* --- Link / Text / File chips (cards 1 & 5) --- */
.f4-chip{position:absolute;top:12px;width:36px;display:flex;flex-direction:column;align-items:center}
.f4-chip-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:10px;background:rgba(255,255,255,.06);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.f4-chip-ic svg{width:16px;height:16px;fill:rgba(255,255,255,.65)}
.f4-chip p{margin:12px 0 0;font:400 12px/12px var(--font-inter);color:rgba(255,255,255,.4);text-align:center}
.f4-c5 .f4-chip p{color:rgba(255,255,255,.65)}
.f4-c1 .f4-chip--a{left:31%}
.f4-c1 .f4-chip--b{left:50%}
.f4-c1 .f4-chip--c{left:70%}
.f4-c5 .f4-chip--a{left:32%}
.f4-c5 .f4-chip--b{left:50%}
.f4-c5 .f4-chip--c{left:68%}

/* --- card 1: chat message block with EN/JP language cycle --- */
.f4-chatmsg{position:absolute;left:20px;right:20px;top:93px;height:60px;background:rgba(255,255,255,.03);border-radius:8px;overflow:hidden}
.f4-chatmsg-track{display:flex;flex-direction:column;gap:12px;padding:12px 16px;animation:f4-cycle 9s ease-in-out infinite}
.f4-chatmsg-track p{margin:0;height:36px;font:400 12px/18px var(--font-inter);color:rgba(255,255,255,.55)}
@keyframes f4-cycle{0%,40%{transform:translateY(0)}50%,90%{transform:translateY(-48px)}100%{transform:translateY(0)}}

/* --- floating input (all cards) --- */
.f4-float{position:absolute;left:12px;right:12px;top:156px;height:64px;border-radius:8px;background:linear-gradient(270deg,rgba(1,5,4,.4) 0%,rgba(4,1,2,.8) 49.6063%,rgba(4,1,2,.4) 100%);box-shadow:0 -1px 0 0 rgba(255,219,223,.12),0 0 0 1px rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden}
.f4-float--r32{border-radius:32px}
.f4-float--pill{border-radius:999px}
.f4-row--2 .f4-float{left:32px;right:32px}
.f4-c4 .f4-float{top:98px}
.f4-c5 .f4-float{top:152px}
.f4-float-text{position:absolute;left:24px;top:50%;transform:translateY(-50%);margin:0;font:300 18px/28px var(--font-inter);color:rgba(255,255,255,.4);white-space:nowrap}
.f4-send{position:absolute;right:12px;top:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(46,42,40,.2);border-radius:4px;box-shadow:0 -1px 0 0 rgba(255,219,223,.2)}
.f4-send svg{width:24px;height:24px;fill:#fff}

/* --- card 2: skeleton chat + secure pill --- */
.f4-skel{width:214px;height:60px;padding:11px 16px;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.03);border-radius:8px;overflow:hidden}
.f4-skel i{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.06)}
.f4-skel i:nth-child(1){width:187px}
.f4-skel i:nth-child(2){width:161px}
.f4-skel i:nth-child(3){width:90px}
.f4-skelpos-a{position:absolute;left:103px;top:-5px}
.f4-skelpos-c{position:absolute;left:103px;top:141px}
.f4-withuser{position:absolute;width:255px;height:60px}
.f4-wu-b{left:23px;top:68px}
.f4-wu-d{left:23px;top:214px}
.f4-withuser img{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:60px;background:rgba(255,255,255,.03)}
.f4-withuser .f4-skel{position:absolute;left:41px;top:0}
.f4-secure-ic{position:absolute;left:12px;top:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(46,42,40,.2);border-radius:999px;box-shadow:0 -1px 0 0 rgba(255,219,223,.2)}
.f4-secure-ic svg{width:24px;height:24px;fill:var(--teal-2)}
.f4-c2 .f4-float-text{left:66px;color:var(--teal-2)}

/* --- card 3: bot personalization form --- */
.f4-tabs{position:absolute;left:19px;top:16px;display:flex;align-items:center;gap:16px;white-space:nowrap}
.f4-tab{margin:0;font:400 12px/12px var(--font-inter);color:rgba(255,255,255,.4)}
.f4-tab--active{padding:8px 16px;background:rgba(255,255,255,.06);border-radius:999px;color:#fff}
.f4-upload{position:absolute;left:19px;right:19px;top:68px;height:89px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border-radius:8px}
.f4-upload svg{width:24px;height:24px;fill:rgba(255,255,255,.3)}
.f4-avchip{position:absolute;left:290px;top:136px;display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;background:rgba(4,1,2,.64);border-radius:10px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transform:rotate(-12deg);animation:f4-drag 6s ease-in-out infinite alternate}
.f4-avchip img{display:block;width:24px;height:24px;border-radius:8px}
.f4-avchip p{margin:0;font:500 14px/20px var(--font);color:#fff}
.f4-hand{position:absolute;left:59px;top:20px;width:24px;height:24px;transform:translateX(-50%)}
.f4-hand-main{position:absolute;left:4px;top:6px;width:13px;height:11px}
.f4-hand-lines{position:absolute;left:10px;top:11px;width:4px;height:3px}
@keyframes f4-drag{0%{transform:rotate(-12deg) translate(0,0)}100%{transform:rotate(-6deg) translate(-22px,-8px)}}

/* --- card 4: memojis + language bubbles --- */
.f4-memoji{position:absolute;width:80px;height:80px;border-radius:60px}
.f4-m1{left:calc(23.0769% - 40px);bottom:-20px}
.f4-m2{left:calc(72.4359% - 40px);top:calc(72.6415% - 40px)}
.f4-m3{left:calc(48.2906% - 40px);top:8px}
.f4-bubble{position:absolute;padding:8px 16px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden;white-space:nowrap}
.f4-bubble p{margin:0;font:400 12px/12px var(--font-inter);color:#fff}
.f4-bub1{top:34px;left:35%}
.f4-bub2{top:85%;left:81%}
.f4-bub3{top:85%;left:34%}
.f4-translate{position:absolute;left:24px;top:20px;width:24px;height:24px}
.f4-translate svg{width:24px;height:24px;fill:rgba(255,255,255,.4)}
.f4-c4 .f4-float-text{left:58px}

/* --- card 5: brand voice flow --- */
.f4-bracket{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:172px;height:17px;display:block}
.f4-vline{position:absolute;left:50%;top:93px;width:1px;height:26px;background:rgba(255,255,255,.1)}
.f4-cvbtn{position:absolute;left:50%;top:103px;transform:translateX(-50%);padding:1px;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.1) 100%);overflow:hidden}
.f4-cvbtn-in{padding:7px 19px;border-radius:7px;background:rgb(12,9,10)}
.f4-cvbtn-in p{margin:0;font:400 16px/24px var(--font-inter);color:#fff;white-space:nowrap}
.f4-voice{position:absolute;top:50%;transform:translateY(-50%);margin:0;font:400 14px/20px var(--font-inter);color:rgba(255,255,255,.4);white-space:nowrap}
.f4-voice--a{left:22px}
.f4-voice--b{left:150px}

/* --- scroll reveal (page shell adds .in) --- */
.f4-header.rv,.f4-card.rv{opacity:0;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.f4-header.rv{transform:translateY(40px)}
.f4-card.f4-rv-l.rv{transform:translateX(-96px)}
.f4-card.f4-rv-r.rv{transform:translateX(96px)}
.f4-card.f4-rv-u.rv{transform:translateY(96px)}
.f4-header.rv.in,.f4-card.rv.in{opacity:1;transform:none}
.f4-card.rv .f4-board{opacity:0;transition:opacity .8s ease .25s}
.f4-card.rv.in .f4-board{opacity:1}
.f4-card.rv .f4-float{opacity:0;transform:translateY(24px) scale(.92);transition:opacity .7s cubic-bezier(.22,1,.36,1) .45s,transform .7s cubic-bezier(.22,1,.36,1) .45s}
.f4-card.rv.in .f4-float{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .f4-chatmsg-track,.f4-avchip{animation:none}
  .f4-header.rv,.f4-card.rv,.f4-card.rv .f4-board,.f4-card.rv .f4-float{opacity:1;transform:none;transition:none}
  .f4-avchip{transform:rotate(-12deg)}
}

/* --- mobile --- */
@media (max-width:809px){
  .f4-section{padding:48px 0 96px}
  .f4-container{padding:0 20px;gap:48px}
  .f4-title{font-size:32px;line-height:40px}
  .f4-row--3,.f4-row--2{grid-template-columns:1fr}
  .f4-row--2 .f4-board{left:24px;right:24px}
  .f4-row--2 .f4-float{left:12px;right:12px}
  .f4-c4 .f4-float{top:120px}
  .f4-body{padding:24px}
  .f4-h4{font-size:20px;line-height:28px}
  .f4-glow{width:360px;filter:blur(120px)}
  .f4-avchip{left:auto;right:16px}
  .f4-tabs{gap:12px}
}
/* ============ testimonials ============ */
/* ===== Testimonials (tst-) ===== */
.tst-section{background:#0c090a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:96px 0;overflow:hidden;position:relative;width:100%}
.tst-inner{display:flex;flex-direction:column;align-items:center;gap:64px;width:100%}

/* Header */
.tst-header{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:768px;margin:0 auto;padding:0 40px}
.tst-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2);color:var(--fg)}
.tst-pill-icon{width:16px;height:16px;flex-shrink:0;fill:currentColor;display:block}
.tst-pill-label{margin:0;font-size:14px;line-height:20px;font-weight:400;color:var(--fg)}
.tst-title{margin:0;font-size:48px;line-height:56px;font-weight:500;color:var(--fg);text-align:center;letter-spacing:0}

/* Marquee */
.tst-rows{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;overflow:hidden}
.tst-marquee{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 12.5%,rgba(0,0,0,1) 87.5%,rgba(0,0,0,0) 100%)}
.tst-track{display:flex;flex:none;min-width:100%;animation:tst-scroll 54.3s linear infinite}
.tst-marquee:hover .tst-track{animation-play-state:paused}
.tst-set{display:flex;align-items:center;gap:20px;flex:none;margin:0;padding:0 20px 0 0;list-style:none}
@keyframes tst-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tst-track{animation:none}}

/* Card */
.tst-card{display:flex;flex-direction:column;align-items:flex-start;gap:24px;flex:none;width:360px;padding:24px;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 0 rgba(255,255,255,.1);overflow:hidden;position:relative;cursor:pointer;transition:background .3s ease}
.tst-card:hover{background:var(--card-2)}
.tst-card-head{display:flex;justify-content:space-between;align-items:center;width:100%}
.tst-person{display:flex;align-items:center;gap:10px}
.tst-avatar{width:40px;height:40px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;line-height:1;letter-spacing:.3px;color:#ff8fa3;text-transform:uppercase;background:linear-gradient(145deg,#332a2d,#191214);box-shadow:inset 0 1px 0 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08);-webkit-user-select:none;user-select:none}
.tst-id{display:flex;flex-direction:column;justify-content:center;gap:0}
.tst-name{margin:0;font-size:16px;line-height:24px;font-weight:500;color:var(--fg);white-space:nowrap}
.tst-handle{margin:0;font-size:14px;line-height:20px;font-weight:400;color:var(--muted-2);white-space:nowrap}
.tst-x{display:flex;align-items:center;justify-content:center;flex:none;padding:8px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2);color:var(--red-2);cursor:pointer;transition:box-shadow .3s ease}
.tst-x:hover{box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.16),inset 0 1px 0 0 rgba(255,255,255,.3)}
.tst-x svg{width:20px;height:20px;display:block;fill:currentColor;flex-shrink:0}
.tst-quote{margin:0;font-size:14px;line-height:20px;font-weight:400;color:var(--muted);width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;height:60px}

/* Mobile */
@media (max-width:809px){
  .tst-section{padding:64px 0}
  .tst-inner{gap:48px}
  .tst-header{max-width:343px;padding:0 16px}
  .tst-title{font-size:36px;line-height:44px}
  .tst-rows{gap:16px}
}
/* ============ pricing ============ */
/* ===== Pricing (pr-) ===== */
.pr-section{position:relative;width:100%;padding:96px 0 96px;overflow:hidden}

/* Background: red glow + grain texture + radial vignette mask (exact Framer values) */
.pr-bg{position:absolute;inset:0;pointer-events:none}
.pr-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:920px;height:460px;border-radius:999px;background:rgba(223,29,72,.9);filter:blur(180px)}
.pr-grain{position:absolute;top:0;left:0;right:0;height:676px;border-radius:999px 999px 0 0;overflow:hidden;opacity:.06}
.pr-grain img{display:block;width:100%;height:100%;object-fit:fill;border-radius:inherit}
.pr-mask{position:absolute;inset:0;background:radial-gradient(35.1% 41% at 50% 50%,rgba(4,1,2,.3) 0%,#040102 100%)}

.pr-container{position:relative;max-width:1280px;width:100%;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;align-items:center;gap:64px}

/* Header */
.pr-header{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:768px;width:100%}
.pr-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2)}
.pr-pill-icon{width:16px;height:16px;flex-shrink:0;color:#fff}
.pr-pill-icon svg{display:block;width:100%;height:100%}
.pr-pill-text{margin:0;font-size:14px;line-height:20px;font-weight:400;color:#fff}
.pr-title{margin:0;font-size:48px;line-height:56px;font-weight:500;color:#fff;text-align:center}

/* Grid */
.pr-grid{display:flex;align-items:stretch;justify-content:center;gap:24px;width:100%}

/* Card */
.pr-card{position:relative;flex:1 1 0;display:flex;flex-direction:column;gap:16px;padding:8px;border-radius:8px;overflow:hidden;background:rgba(4,1,2,.64);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1)}
.pr-card--team{box-shadow:0 0 0 1px rgba(255,72,109,.1),0 -1px 0 0 rgba(252,164,174,.2)}
.pr-card-bgfx{position:absolute;inset:0;background:linear-gradient(rgba(156,141,146,0) 0%,rgba(4,1,2,0) 23.784%);pointer-events:none}
.pr-card--team .pr-card-bgfx{background:linear-gradient(rgba(223,29,72,0) 0%,rgba(4,1,2,0) 23.784%)}
.pr-card-grain{position:absolute;top:0;bottom:0;left:0;right:-957px;opacity:.02;pointer-events:none}
.pr-card-grain img{display:block;width:100%;height:100%;object-fit:fill}

/* Card head */
.pr-card-head{position:relative;display:flex;flex-direction:column;gap:20px;width:100%;padding:24px 24px 16px}
.pr-plan{margin:0;font-size:16px;line-height:24px;font-weight:400;color:#fff}
.pr-price-block{display:flex;flex-direction:column;gap:4px}
.pr-price-row{display:flex;flex-direction:row;align-items:flex-start;gap:12px}
.pr-price{margin:0;font-size:48px;line-height:56px;font-weight:500;color:#fff}
.pr-price-old{margin:0;font-size:36px;line-height:44px;font-weight:400;color:rgba(255,255,255,.4);text-decoration:line-through}
.pr-month{margin:0;font-size:14px;line-height:20px;font-weight:400;color:rgba(255,255,255,.4)}

/* Special Plan panel */
.pr-panel{position:relative;display:flex;flex-direction:column;gap:24px;width:100%;padding:24px;border-radius:8px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px #040102,inset 0 0 0 1px rgba(255,255,255,.06)}
.pr-panel-content{display:flex;flex-direction:column;gap:20px;width:100%}
.pr-panel-title{margin:0;font-size:14px;line-height:20px;font-weight:500;color:#fff}
.pr-table{display:flex;flex-direction:column;gap:12px;width:100%}
.pr-row{display:flex;justify-content:space-between;align-items:center;width:100%}
.pr-cell{margin:0;font-size:14px;line-height:20px;font-weight:400;color:#fff}
.pr-cell--muted{color:rgba(255,255,255,.4)}
.pr-hr{width:100%;height:1px;background:rgba(255,255,255,.1)}

/* Buttons */
.pr-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 20px;border-radius:999px;overflow:hidden;text-decoration:none;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(192deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.03) 100%) rgba(255,255,255,.03)}
.pr-btn::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:999px;pointer-events:none;z-index:2}
.pr-btn-stroke{position:absolute;inset:0;border-radius:999px;background:linear-gradient(225deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.05) 61.113%)}
.pr-btn-fill{position:absolute;inset:1px;border-radius:999px;background:linear-gradient(207deg,#2f292b -70.344%,#040102 100%);transition:filter .25s ease}
.pr-btn-label{position:relative;z-index:1;font-size:16px;line-height:24px;font-weight:500;color:#fff}
.pr-btn:hover .pr-btn-fill{filter:brightness(1.7)}
.pr-btn--primary{background:linear-gradient(192deg,#f23f5d 0%,#bc123c 76.011%);transition:filter .25s ease}
.pr-btn--primary::after{border-color:rgba(252,164,174,.2)}
.pr-btn--primary:hover{filter:brightness(1.12)}

/* Included features */
.pr-feats{position:relative;display:flex;flex-direction:column;gap:24px;width:100%;padding:24px}
.pr-feats-head{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%}
.pr-feats-title{margin:0;font-size:14px;line-height:20px;font-weight:500;color:#fff;white-space:nowrap}
.pr-feats-line{flex:1 1 0;height:1px;background:rgba(255,255,255,.06)}
.pr-feat-list{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.pr-feat{display:flex;flex-direction:row;align-items:center;gap:8px}
.pr-check{width:12px;height:12px;flex-shrink:0;color:rgba(255,255,255,.55)}
.pr-check svg{display:block;width:100%;height:100%}
.pr-card--team .pr-check{color:#ff486d}
.pr-feat-text{margin:0;font-size:14px;line-height:20px;font-weight:400;color:rgba(255,255,255,.55)}

/* Scroll reveal (IO adds .in) — original: fade + translateY(96px), cards staggered */
.pr-header.rv,.pr-card.rv{opacity:0;transform:translateY(96px);transition:opacity .9s cubic-bezier(.27,.65,.3,.9),transform .9s cubic-bezier(.27,.65,.3,.9)}
.pr-header.rv.in,.pr-card.rv.in{opacity:1;transform:none}
.pr-grid .pr-card:nth-child(2){transition-delay:.15s}
.pr-grid .pr-card:nth-child(3){transition-delay:.3s}

/* Mobile (Framer 810px variant) */
@media (max-width:809px){
  .pr-section{padding:96px 0 48px}
  .pr-container{gap:48px;padding:0 20px}
  /* CTA-Abstand mobil: zentral in der CTA-Sektion geregelt (siehe .pr-cta unter den CTA-Basisregeln) */
  .pr-title{font-size:32px;line-height:40px}
  .pr-grid{flex-direction:column;gap:16px}
  .pr-card{flex:none;width:100%}
  .pr-price{font-size:40px;line-height:48px}
  .pr-price-old{font-size:28px;line-height:36px}
  .pr-mask{background:radial-gradient(75% 13.1% at 50% 11%,rgba(4,1,2,.3) 0%,#040102 100%)}
  .pr-glow{top:160px}
}
/* ============ integrations ============ */
/* ============ Integrations section (prefix: int-) ============ */
.int-section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Background layers (glow + grain arch + radial mask) --- */
.int-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.int-glow {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 272px;
  border-radius: 999px;
  background-color: rgba(255, 91, 0, 0.64);
  filter: blur(160px);
}
.int-glow.rv { opacity: 0; transition: opacity 1.1s ease 0.1s; }
.int-glow.rv.in { opacity: 1; transform: translate(-50%, -50%); }
.int-grain {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 338px);
  height: 676px;
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  overflow: hidden;
  background: url(../nexusai/Xpzfsf8xnvP7kCVZxZVAoTvMZyY.png) center / 100% 100% no-repeat;
}
.int-grain.rv { opacity: 0; transition: opacity 1.1s ease; transform: none; }
.int-grain.rv.in { opacity: 0.06; transform: none; }
.int-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(35.1% 50% at 50% 48.3%, rgba(4, 1, 2, 0.3) 0%, rgb(4, 1, 2) 100%);
}

/* --- Container --- */
.int-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

/* --- Header --- */
.int-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 768px;
}
.int-header.rv {
  opacity: 0;
  transform: translateY(96px);
  transition: opacity 0.9s cubic-bezier(0.27, 0.65, 0.3, 0.95), transform 0.9s cubic-bezier(0.27, 0.65, 0.3, 0.95);
}
.int-header.rv.in { opacity: 1; transform: none; }
.int-head-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.int-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: inset 0px 1px 4px 1px rgba(255, 255, 255, 0.08), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
}
.int-pill-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: var(--fg);
}
.int-pill-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--fg);
}
.int-title {
  margin: 0;
  font-size: 48px;
  line-height: 56px;
  font-weight: 500;
  text-align: center;
  color: var(--fg);
}
.int-desc {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--muted);
}

/* --- Grid --- */
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 24px;
  width: 100%;
}
.int-grid.rv {
  opacity: 0;
  transform: translateY(96px);
  transition: opacity 0.9s cubic-bezier(0.27, 0.65, 0.3, 0.95) 0.1s, transform 0.9s cubic-bezier(0.27, 0.65, 0.3, 0.95) 0.1s;
}
.int-grid.rv.in { opacity: 1; transform: none; }

/* --- Card --- */
.int-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(4, 1, 2, 0.64);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px -1px 0px 0px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  cursor: pointer;
}
.int-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(156, 141, 146, 0.14) 0%, rgba(4, 1, 2, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.int-card:hover .int-card-bg { opacity: 1; }
.int-card-grain {
  position: absolute;
  inset: 0;
  background: url(../nexusai/tkinRsw25GywUCpLVOM3BXjqQ.png) left top / cover no-repeat;
  opacity: 0.02;
  pointer-events: none;
}
.int-card-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}
.int-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 8px;
  border-radius: 999px;
  box-shadow: inset 0px 1px 4px 1px rgba(255, 255, 255, 0.08), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
}
.int-logo {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: cover;
}
.int-card-name {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--fg);
}
.int-arrow {
  position: relative;
  flex: none;
  width: 32px;
  align-self: stretch;
}
.int-arrow svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  fill: rgb(105, 94, 98);
  opacity: 0;
  transform: translate(-16px, 16px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.int-card:hover .int-arrow svg {
  opacity: 1;
  transform: translate(0, 0);
}
.int-card-desc {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--muted);
}

/* --- Tablet + mobile (original collapses to 1 column below 1280) --- */
@media (max-width: 1279px) {
  .int-section { padding: 48px 0; }
  .int-container { gap: 48px; padding: 0 16px; }
  .int-grid { grid-template-columns: repeat(1, minmax(200px, 1fr)); gap: 16px; }
  .int-glow { top: 28%; }
}
@media (max-width: 809px) {
  .int-title { font-size: 34px; line-height: 40px; }
}
/* ============ footer ============ */
/* ============ FAQ + Newsletter + Footer (prefix: ft-) ============ */

/* ---------- FAQ ---------- */
.ft-faq{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:100%;
  padding:96px 0 200px;
  background:linear-gradient(180deg,#040102 0%,#0c090a 100%);
  border-radius:0 0 64px 64px;
  overflow:hidden;
}
.ft-faq-wrap{
  width:100%;max-width:1280px;margin:0 auto;padding:0 32px;
  display:flex;flex-direction:column;align-items:center;gap:64px;
}
.ft-faq-content{
  position:relative;
  display:flex;flex-direction:row;align-items:flex-start;gap:8px;
  width:100%;padding:8px;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1);
}
.ft-faq-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.ft-faq-glow{
  position:absolute;top:61%;left:25%;
  width:600px;height:272px;
  transform:translate(-50%,-50%);
  background:rgba(188,18,60,.96);
  border-radius:999px;
  filter:blur(160px);
}
.ft-faq-grain{
  position:absolute;left:0;right:0;top:calc(50% - 338px);height:676px;
  opacity:.06;
  border-radius:999px 999px 0 0;
  background:url(../nexusai/Xpzfsf8xnvP7kCVZxZVAoTvMZyY.png) center/cover;
}
.ft-faq-mask{
  position:absolute;inset:0;
  background:radial-gradient(43.4% 100% at 0% 100%,rgba(4,1,2,.3) 0%,#040102 100%);
}
.ft-faq-header{
  position:relative;flex:1 0 0;width:1px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:32px;
}
.ft-faq-h2{
  margin:0;width:100%;
  font-family:var(--font);font-size:48px;line-height:56px;font-weight:500;
  color:var(--fg);text-align:left;
}

/* accordion */
.ft-acc-group{
  position:relative;flex:1 0 0;width:1px;
  display:flex;flex-direction:column;gap:20px;
  background:rgba(255,255,255,.04);
  border-radius:4px;padding:24px;
}
.ft-acc{width:100%;}
.ft-acc-summary{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  width:100%;margin:0;padding:0;
  background:none;border:none;outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;text-align:left;
}
.ft-acc-summary:focus-visible{
  outline:2px solid var(--red);outline-offset:6px;border-radius:4px;
}
.ft-acc-q{
  flex:1 0 0;width:1px;margin:0;
  font-family:var(--font);font-size:16px;line-height:24px;font-weight:400;
  color:var(--fg);
}
.ft-acc-icon{
  flex:none;width:20px;height:20px;display:block;
  transition:transform .3s ease;
}
.ft-acc-icon svg{display:block;width:100%;height:100%;fill:var(--ink);transition:fill .25s ease;}
.ft-acc-summary:hover .ft-acc-icon svg{fill:var(--fg);}
.ft-acc.is-open .ft-acc-icon{transform:rotate(45deg);}
/* JS-driven accordion (only one panel open at a time). The body's grid row track
   animates 0fr -> 1fr (collapsed -> natural content height) with the site's signature
   easing; the inner wrapper clips the overflow and the paragraph fades + slides in. */
.ft-acc-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1);
}
.ft-acc.is-open .ft-acc-body{grid-template-rows:1fr;}
.ft-acc-body-inner{overflow:hidden;min-height:0;}
.ft-acc-body p{
  margin:0;padding-top:16px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1);
  font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;
  color:var(--muted);
}
.ft-acc.is-open .ft-acc-body p{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .ft-acc-body,.ft-acc-body p,.ft-acc-icon{transition:none;}
}
.ft-acc-divider{width:100%;height:1px;background:var(--line);}

/* ---------- Newsletter ---------- */
.ft-news{position:relative;width:100%;height:80px;}
.ft-news-bg{
  position:absolute;top:0;left:0;right:0;bottom:-254px;
  overflow:hidden;pointer-events:none;
}
.ft-news-glow{
  position:absolute;top:-320px;left:50%;
  width:256px;height:116px;
  transform:translate(-50%,-50%);
  background:var(--red);
  border-radius:999px;
  filter:blur(160px);
}
.ft-news-grain{
  position:absolute;inset:-64px 0 -171px;
  opacity:.06;border-radius:999px 999px 0 0;
  background:url(../nexusai/Xpzfsf8xnvP7kCVZxZVAoTvMZyY.png) center/cover;
}
.ft-news-mask{
  position:absolute;inset:0;
  background:radial-gradient(50% 100% at 50% 0%,rgba(4,1,2,.3) 0%,#040102 100%);
}
.ft-news-container{
  position:absolute;top:-72px;left:50%;
  width:100%;max-width:1280px;padding:0 32px;
}
.ft-news-panel{
  width:100%;padding:4px;border-radius:8px;
  display:flex;
  background:rgba(255,255,255,0);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.ft-news-inner{
  flex:1 0 0;width:1px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:64px;
  padding:32px;border-radius:4px;overflow:hidden;
  background:#0c090a;
}
.ft-news-header{flex:1 0 0;width:1px;display:flex;flex-direction:column;gap:12px;}
.ft-news-h4{
  margin:0;width:100%;
  font-family:var(--font);font-size:24px;line-height:32px;font-weight:500;
  color:var(--fg);
}
.ft-news-desc{
  margin:0;width:100%;
  font-family:var(--font);font-size:16px;line-height:24px;font-weight:400;
  color:var(--muted);
}
.ft-news-formwrap{flex:none;width:40%;}
.ft-news-form{position:relative;display:flex;width:100%;}
.ft-news-input{
  appearance:none;-webkit-appearance:none;
  width:100%;border:none;outline:none;
  padding:15px 115px 15px 15px;border-radius:8px;
  font-family:-apple-system,BlinkMacSystemFont,var(--font-inter);
  font-size:17px;line-height:1em;font-weight:400;
  background:rgba(4,1,2,.32);color:var(--fg);
  box-shadow:inset 0 0 0 0 #f23f5d,inset 0 0 0 1px rgba(255,255,255,.1);
  transition:box-shadow .2s ease;
}
.ft-news-input::placeholder{color:var(--muted-2);}
.ft-news-input:focus{box-shadow:inset 0 0 0 1px #f23f5d,inset 0 0 0 1px rgba(255,255,255,.1);}
.ft-news-submit{
  appearance:none;-webkit-appearance:none;
  position:absolute;top:4px;right:4px;bottom:4px;
  width:100px;border:none;outline:none;cursor:pointer;
  padding:0 15px;border-radius:4px;z-index:1;
  font-family:var(--font);font-size:14px;line-height:1em;font-weight:500;
  background:var(--red);color:#fff;
  transition:background .2s ease;
}
.ft-news-submit:hover{background:#f23f5d;}

/* ---------- Footer ---------- */
.ft-footer{
  position:relative;z-index:1; /* lift above .ft-news-bg, which bleeds 254px down into the footer */
  width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding:128px 0 32px;
  overflow:hidden;
}
.ft-foot-container{
  width:100%;max-width:1280px;padding:0 32px;
  display:flex;flex-direction:column;align-items:center;gap:64px;
}
.ft-foot-nav{
  width:100%;
  display:flex;flex-direction:row;align-items:flex-start;gap:64px;
}
.ft-foot-col{
  flex:1 0 0;width:1px;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
}
.ft-foot-brand{min-width:400px;}
.ft-foot-logo{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  text-decoration:none;
}
.ft-foot-logomark{flex:none;width:32px;height:32px;display:block;}
.ft-foot-logotext{
  font-family:var(--font);font-size:20px;line-height:24px;font-weight:600;
  color:var(--fg);white-space:pre;
}
.ft-foot-tagline{
  margin:0;max-width:320px;
  font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;
  color:var(--muted);
}
.ft-foot-colhead{
  margin:0;
  font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;
  color:var(--fg);
}
.ft-foot-links{display:flex;flex-direction:column;gap:16px;}
.ft-foot-links a{
  font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;
  color:var(--muted);text-decoration:none;
  transition:color .2s ease;
}
.ft-foot-links a:hover{color:var(--fg);}
.ft-foot-bottom{
  width:100%;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  padding:32px 0 0;
}
.ft-foot-copy{
  margin:0;
  font-family:var(--font);font-size:14px;line-height:20px;font-weight:400;
  color:var(--muted);
}
.ft-foot-social{display:flex;flex-direction:row;align-items:center;gap:20px;}
.ft-soc{
  display:flex;align-items:center;justify-content:center;
  padding:8px;border-radius:999px;overflow:hidden;
  box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2);
}
.ft-soc-wrap{display:block;width:20px;height:20px;overflow:hidden;position:relative;}
.ft-soc-stack{
  display:flex;flex-direction:column;
  transform:translateY(-20px);
  transition:transform .3s ease;
}
.ft-soc:hover .ft-soc-stack{transform:translateY(0);}
.ft-soc-stack svg{flex:none;display:block;width:20px;height:20px;}
.ft-soc-hot path{fill:var(--red-2);}
.ft-soc-base path{fill:var(--muted);}

/* ---------- Scroll reveal (page shell adds .in) ---------- */
.ft-faq-content.rv,
.ft-foot-col.rv{
  opacity:0;transform:translateY(96px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.ft-foot-col.ft-d2.rv{transition-delay:.1s;}
.ft-foot-col.ft-d3.rv{transition-delay:.2s;}
.ft-foot-col.ft-d4.rv{transition-delay:.3s;}
.ft-foot-col.rv{transform:translateY(48px);}
.ft-faq-content.rv.in,
.ft-foot-col.rv.in{opacity:1;transform:none;}
.ft-news-container.rv{
  opacity:0;transform:translateX(-50%) translateY(96px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.ft-news-container.rv.in{opacity:1;transform:translateX(-50%);}
.ft-faq-glow{opacity:0;transition:opacity 1.2s ease .3s;}
.ft-faq-content.rv.in .ft-faq-glow{opacity:1;}

/* ---------- Mobile ---------- */
@media (max-width:809px){
  .ft-faq{border-radius:0 0 24px 24px;padding:48px 0 218px;}
  .ft-faq-wrap{gap:48px;padding:0 16px;}
  .ft-faq-content{flex-direction:column;}
  .ft-faq-header{flex:none;width:100%;padding:24px;}
  .ft-faq-h2{font-size:36px;line-height:44px;}
  .ft-acc-group{flex:none;width:100%;}
  .ft-faq-mask{background:radial-gradient(50% 29.8% at 31.7% 83%,rgba(4,1,2,.3) 0%,#040102 100%);}

  .ft-news{height:auto;}
  .ft-news-container{position:relative;top:auto;left:auto;margin-top:-123px;padding:0 16px;}
  .ft-news-container.rv{transform:translateY(96px);}
  .ft-news-container.rv.in{transform:none;}
  .ft-news-inner{flex-direction:column;gap:32px;}
  .ft-news-header{flex:none;width:100%;}
  .ft-news-formwrap{width:100%;}
  .ft-news-mask{background:radial-gradient(50% 61.1% at 50% 0%,rgba(4,1,2,.3) 0%,#040102 100%);}

  .ft-footer{padding:48px 0 32px;}
  .ft-foot-container{gap:48px;padding:0 16px;}
  .ft-foot-nav{display:grid;grid-template-columns:repeat(2,minmax(96px,1fr));gap:48px;}
  .ft-foot-col{flex:none;width:100%;min-width:0;}
  .ft-foot-brand{grid-column:span 2;}
  .ft-foot-bottom{flex-direction:column;align-items:flex-start;gap:32px;}
}

/* ============ Web-Focus Abo additions ============ */
.cmp-section,.about-section,.team-section{position:relative;width:100%;padding:96px 0;overflow:hidden}
.cmp-container,.about-container,.team-container{width:100%;max-width:1280px;margin:0 auto;padding:0 32px}
.cmp-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:0 auto 64px;max-width:720px}
.cmp-eyebrow,.about-eyebrow{margin:0;font:500 14px/20px var(--font);letter-spacing:.06em;color:#f97084}
.cmp-title{margin:0;font:500 48px/56px var(--font);color:#fff}
.cmp-desc{margin:0;font:400 16px/24px var(--font);color:var(--muted)}
.cmp-pill,.team-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;border-radius:999px;box-shadow:inset 0 1px 4px 1px rgba(255,255,255,.08),inset 0 1px 0 0 rgba(255,255,255,.2)}
.cmp-pill svg,.team-pill svg{width:16px;height:16px;fill:#fff;flex-shrink:0}
.cmp-pill span,.team-pill span{font:400 14px/20px var(--font);color:#fff;white-space:nowrap}
.cmp-scroll{width:100%;overflow-x:auto;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1)}
.cmp-table{display:flex;flex-direction:column;min-width:720px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.02)}
.cmp-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr}
.cmp-row+.cmp-row{border-top:1px solid var(--line)}
.cmp-cell{padding:16px 18px;font:400 15px/22px var(--font);color:rgba(255,255,255,.82);display:flex;align-items:center}
.cmp-cell--label{color:var(--muted);font-weight:500}
.cmp-col--hl{background:rgba(242,63,93,.07);color:#fff}
.cmp-row--head .cmp-cell{align-items:flex-start;flex-direction:column;gap:4px;padding-top:22px;padding-bottom:22px}
.cmp-head{font:500 18px/24px var(--font);color:#fff}
.cmp-colname{font:500 18px/24px var(--font);color:#fff}
.cmp-tag{font:400 13px/16px var(--font);color:var(--muted)}
.cmp-head.cmp-col--hl{position:relative}
.cmp-name-row{display:flex;align-items:center;gap:10px}
.cmp-badge{flex:none;padding:3px 10px;border-radius:999px;font:500 11px/14px var(--font);color:#fff;background:linear-gradient(192deg,#f23f5d,#bc123c)}
.cmp-foot{margin:48px auto 0;max-width:760px;text-align:center;font:400 15px/24px var(--font);color:var(--muted)}
.cmp-cta,.steps-cta,.pr-cta,.about-cta{display:flex;justify-content:center;margin-top:36px}
/* Einheitlicher Abstand Inhalt -> CTA-Button: ueberall netto 48px (Desktop & Mobile), im Browser gemessen.
   Block-Parents (Vergleich/Team) direkt; Flex-Parents (Ablauf/Ergebnisse/Preise) addieren ihren
   Container-Gap, daher margin-top so gesetzt, dass netto 48px herauskommt. Mobile-Abweichungen direkt darunter. */
.cmp-cta{margin-top:48px}                  /* Vergleich: Block-Parent */
.team-section .steps-cta{margin-top:48px}  /* Team: Block-Parent */
.f3-section .steps-cta{margin-top:-16px}   /* Ablauf: Flex-Gap 64 -> netto 48 */
.f4-section .steps-cta{margin-top:20px}    /* Ergebnisse: Flex-Gap 28 -> netto 48 */
.pr-cta{margin-top:-16px}                  /* Preise: Flex-Gap 64 -> netto 48 */
.about-cta{justify-content:flex-start;margin-top:28px}
@media (max-width:809px){
  /* Mobile: kleinere Flex-Gaps -> margin-top angepasst, Ergebnis bleibt netto 48px (Vergleich/Team brauchen keine Abweichung) */
  .f3-section .steps-cta{margin-top:0}     /* Flex-Gap 48 -> netto 48 */
  .f4-section .steps-cta{margin-top:28px}  /* Flex-Gap 20 -> netto 48 */
  .pr-cta{margin-top:0}                    /* Flex-Gap 48 -> netto 48 */
}

/* steps (prozess) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;width:100%}
.step{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:8px;background:rgba(4,1,2,.64);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1);overflow:hidden}
.step-num{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font:500 18px/1 var(--font);color:rgba(255,255,255,.75);border:1px solid transparent;background:linear-gradient(180deg,rgb(47,41,43) 0%,rgb(4,1,2) 100%) padding-box,linear-gradient(225deg,rgb(105,94,98) 0%,rgb(4,1,2) 100%) border-box}
.step-title{margin:0;font:500 22px/28px var(--font);color:#fff}
.step-desc{margin:0;font:400 15px/24px var(--font);color:var(--muted)}

/* cases */
.cases{display:flex;flex-direction:column;gap:28px;width:100%}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-card{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:8px;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1)}
.case-branche{font:500 12px/16px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.case-client{margin:0;font:500 22px/28px var(--font);color:#fff}
.case-metric{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-ba{display:flex;flex-direction:column;gap:2px}
.case-ba-label{font:400 12px/16px var(--font);color:var(--muted-2)}
.case-before{font:400 16px/22px var(--font);color:var(--muted)}
.case-after{font:600 18px/24px var(--font);color:#ff8aa0}
.case-arrow{font:500 18px/1 var(--font);color:#f23f5d}
.case-result{margin:0;font:400 15px/23px var(--font);color:var(--muted)}
.case-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case-stat{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:28px;border-radius:8px;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1)}
.case-stat-val{font:500 36px/42px var(--font);color:#fff}
.case-stat-label{font:400 14px/20px var(--font);color:var(--muted)}

/* team (wer dahintersteht) */
.team-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:0 auto 64px;max-width:680px}
.team-eyebrow{margin:0;font:500 14px/20px var(--font);letter-spacing:.06em;color:#f97084}
.team-h2{margin:0;font:500 48px/56px var(--font);color:#fff}
.team-desc{margin:0;font:400 16px/24px var(--font);color:var(--muted)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.team-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;border-radius:8px;overflow:hidden;background:rgba(4,1,2,.64);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1)}
.team-photo{width:104px;height:104px;border-radius:999px;object-fit:cover;margin-bottom:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 0 5px rgba(242,63,93,.10);background:rgba(255,255,255,.04)}
.team-name{margin:0;font:500 20px/26px var(--font);color:#fff}
.team-role{margin:4px 0 0;font:500 14px/20px var(--font);color:#ff8aa0}
.team-tag{margin:8px 0 0;font:400 14px/21px var(--font);color:var(--muted)}
.team-social{margin-top:16px;display:flex;justify-content:center;gap:10px}

/* testimonial duration pill */
.tst-since{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font:500 12px/16px var(--font);color:#ff8aa0;background:rgba(242,63,93,.12);white-space:nowrap}
.tst-since-ic{width:13px;height:13px;flex:none;fill:currentColor;display:block}

/* pricing additions */
.pr-subnote{margin:14px auto 0;max-width:620px;text-align:center;font:400 15px/23px var(--font);color:var(--muted)}
.pr-risk{margin:-16px auto 0;max-width:760px;text-align:center;font:400 14px/22px var(--font);color:var(--muted)} /* .pr-container liefert 64px via flex-gap -> effektiv 48px zwischen Cards und Text, wie beim Button */
@media (max-width:809px){.pr-risk{margin-top:0}} /* mobiler Flex-Gap 48 -> netto 48 (nach Basisregel platziert, sonst gewinnt die Kaskade falsch) */

/* inclusions icons */
.int-incl-ic{width:22px;height:22px;fill:#fff}
.int-card--incl{cursor:default}

/* contact form */
.ct-form{display:flex;flex-direction:column;gap:12px;width:100%}
.ct-input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:#fff;font:400 16px/22px var(--font);outline:none}
.ct-input::placeholder{color:var(--muted-2)}
.ct-input:focus{border-color:rgba(255,72,109,.5);box-shadow:0 0 0 3px rgba(242,63,93,.12)}
.ct-textarea{resize:vertical;min-height:96px}
.ct-submit{width:100%;padding:15px 20px;border:0;border-radius:12px;cursor:pointer;color:#fff;font:500 16px/20px var(--font);background:linear-gradient(192deg,#f23f5d,#bc123c)}
.ct-submit:hover{filter:brightness(1.06)}
.ct-rr{margin:16px 0 0;text-align:center;font:400 13px/20px var(--font);color:var(--muted)}
.ct-meta{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font:400 14px/20px var(--font);color:var(--muted)}
.ct-meta a{color:#fff;text-decoration:none}
.ct-meta a:hover{color:#ff8aa0}

@media (max-width:980px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .case-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  .cmp-title,.team-h2{font-size:34px;line-height:40px}
  .team-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .case-stats{grid-template-columns:1fr}
}

/* ============ Mobile optimisation (added) ============
   Consolidated mobile overrides. Placed last so they win source-order over the
   earlier 980px/680px blocks where breakpoints overlap. The hero text block and
   the late-added "Abo" sections (vergleich/cases/team) had no 809px treatment. */
@media (max-width:809px){
  /* --- Hero text --- */
  .hero-section{padding:64px 0 32px}
  .hero-container{padding:0 20px;gap:40px}
  .hero-title{font-size:32px;line-height:38px;overflow-wrap:break-word;hyphens:auto}
  .hero-desc{font-size:15px;line-height:23px}
  .hero-buttons{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .hero-buttons .hero-btn-label{white-space:normal;text-align:center}

  /* Primary CTAs become full-width tap targets */
  .hero-buttons .hero-btn,.cmp-cta .hero-btn,.steps-cta .hero-btn{width:100%;justify-content:center}

  /* --- Hero browser mockup foot: keep the contact line on one row --- */
  .app-web-foot-r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* --- Hero browser mockup CTAs: side-by-side they get squeezed inside the
         narrow frame and wrap, so the fixed-height pill text spilled out.
         Stack them and keep each on a single line. --- */
  .app-web-hero-actions{flex-direction:column;align-items:flex-start;gap:12px}
  .app-web-btn,.app-web-btn-2{white-space:nowrap}

  /* --- Vergleich: reflow the 4-column table into per-criterion cards.
         Each value cell shows its column name (Baukasten / Klassische Agentur /
         Web Focus Abo) via the data-col attribute, so the comparison stays
         readable without horizontal scrolling. --- */
  .cmp-section{padding:56px 0}
  .cmp-container{padding:0 20px}
  .cmp-title{font-size:34px;line-height:40px}
  .cmp-scroll{overflow:visible;box-shadow:none;border-radius:0}
  .cmp-table{min-width:0;background:transparent;border-radius:0;overflow:visible;gap:14px}
  .cmp-row--head{display:none}
  .cmp-row{grid-template-columns:1fr;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.02);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 -1px 0 0 rgba(255,255,255,.1)}
  .cmp-row+.cmp-row{border-top:0}
  .cmp-cell{display:block;align-items:stretch;padding:11px 16px}
  .cmp-cell--label{padding:13px 16px 9px;font-weight:600;color:#fff;background:rgba(255,255,255,.025);border-bottom:1px solid var(--line)}
  .cmp-cell[data-col]{border-top:1px solid var(--line)}
  .cmp-cell[data-col]::before{content:attr(data-col);display:block;margin-bottom:3px;font:500 11px/14px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2)}
  .cmp-col--hl{background:rgba(242,63,93,.08);color:#fff}
  .cmp-col--hl::before{color:#ff8aa0}
  .cmp-foot{font-size:14px;line-height:22px}

  /* --- Referenzen / case studies: stack the Vorher -> Nachher metric --- */
  .cmp-section,.team-section{overflow:hidden}
  .case-card{padding:20px}
  .cases{gap:20px}
  .case-metric{flex-direction:column;align-items:stretch;gap:10px}
  .case-metric .case-ba{min-width:0}
  .case-arrow{align-self:center;transform:rotate(90deg)}
  .case-stats{grid-template-columns:1fr}
  .case-stat{padding:22px}

  /* --- Team gutter + heading consistency in the 681-809 band --- */
  .team-section{padding:56px 0}
  .team-container{padding:0 20px}
  .team-h2{font-size:34px;line-height:40px}

  /* --- Testimonials: shrink the card so it reads as a scrolling row, not a slab --- */
  .tst-card{width:300px;padding:20px;gap:20px}
  .tst-card-head{flex-wrap:nowrap;align-items:center;gap:8px}
  .tst-person{min-width:0;flex:1 1 auto}
  .tst-id{min-width:0;max-width:100%}
  .tst-name,.tst-handle{overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* --- FAQ / newsletter / footer polish --- */
  .ft-acc-group{padding:16px}
  .ft-news-inner{padding:28px 20px}
  .ft-foot-nav{gap:32px 24px}
  /* desktop forces the brand column to min-width:400px (line ~1622); on phones that
     overflows the viewport and is the main cause of the horizontal "black bar" / zoom. */
  .ft-foot-brand{min-width:0}
}

/* Feature 2 inclusions: two columns are too tight for long German labels on phones */
@media (max-width:480px){
  .f2-incl{grid-template-columns:1fr;gap:14px}
}

/* Small phones: extra heading step-downs */
@media (max-width:430px){
  .cmp-title{font-size:28px;line-height:34px}
  .ft-faq-h2{font-size:31px;line-height:39px}
}

/* Narrowest phones (<=380px): give long words full width */
@media (max-width:380px){
  .hero-badge{max-width:100%}
  .hero-badge-text{white-space:normal}
  .ft-foot-nav{grid-template-columns:1fr;gap:36px}
  .ft-foot-brand{grid-column:auto}
  .app-web-card-title{font-size:13px}
  .app-web-card-icon{width:30px;height:30px}
}