/* =====================================================================
   feinschliff — Design System & Stylesheet
   Brand: coral #FD6B74  ·  teal #1782AA  ·  ink #141319  ·  paper #FAF7F2
   Display: Bebas Neue  ·  Text: Space Grotesk
   ===================================================================== */

/* -------- Design Tokens -------- */
:root {
  /* Brand */
  --coral:        #FD6B74;
  --coral-600:    #F0505E;
  --coral-300:    #FF9AA0;
  --coral-100:    #FFE1E2;
  --teal:         #1782AA;
  --teal-700:     #0D6E93;
  --teal-400:     #3A9EC4;
  --teal-100:     #D6EEF6;

  /* Ink / Paper neutrals */
  --ink:          #141319;
  --ink-800:      #1C1B24;
  --ink-700:      #2A2833;
  --paper:        #FAF7F2;
  --paper-2:      #F2ECE3;
  --line:         rgba(20,19,25,.10);
  --line-dark:    rgba(255,255,255,.12);
  --muted:        #6B6675;
  --muted-dark:   rgba(255,255,255,.62);
  --white:        #FFFFFF;

  /* Signature gradients */
  --grad-brand:   linear-gradient(120deg, var(--coral) 0%, #FF8A6B 42%, var(--teal-400) 100%);
  --grad-teal:    linear-gradient(135deg, var(--teal-700), var(--teal-400));
  --grad-coral:   linear-gradient(135deg, var(--coral-600), var(--coral-300));

  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-text:    'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-script:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --fs-hero:  clamp(3.4rem, 13vw, 12rem);
  --fs-h1:    clamp(2.6rem, 7vw, 6rem);
  --fs-h2:    clamp(2rem, 5vw, 4rem);
  --fs-h3:    clamp(1.35rem, 2.6vw, 2rem);
  --fs-lead:  clamp(1.05rem, 1.6vw, 1.4rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.875rem;

  /* Spacing */
  --sp-section: clamp(5rem, 11vw, 10rem);
  --container:  1240px;
  --gutter:     clamp(1.25rem, 5vw, 4rem);

  /* Radii & shadow */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --shadow-sm: 0 2px 12px rgba(20,19,25,.06);
  --shadow:    0 18px 50px -18px rgba(20,19,25,.20);
  --shadow-lg: 0 40px 90px -30px rgba(20,19,25,.30);
  --shadow-coral: 0 24px 60px -20px rgba(253,107,116,.55);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* -------- Reset -------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--coral); color: #fff; }

/* -------- Layout primitives -------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--dark {
  background-color: var(--ink); color: #fff;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size: 30px 30px;
}
.section--dark .muted { color: var(--muted-dark); }

/* Section header */
.kicker {
  display: inline-flex; align-items: center; gap: .5ch;
  font-family: var(--font-mono); font-weight: 500; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--coral-600);
}
.kicker::before { content:"["; opacity:.7; }
.kicker::after  { content:"]"; opacity:.7; }
.section--dark .kicker { color: var(--coral-300); }

.eyebrow-lg { display:block; }

h1,h2,h3,h4 { line-height: 1.02; font-weight: 500; letter-spacing: -.01em; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .005em; line-height: .92; text-transform: uppercase; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-family: var(--font-text); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.section--dark .lead { color: var(--muted-dark); }
.muted { color: var(--muted); }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .h2 { margin-top: 1rem; }
.section-head .lead { margin-top: 1.25rem; }

.text-coral { color: var(--coral); }
.text-teal { color: var(--teal); }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------- Buttons -------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.6rem; border-radius: 100px;
  background: var(--bg); color: var(--fg);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease);
  will-change: transform;
}
.btn__label { position: relative; z-index: 2; }
.btn .arrow { position: relative; z-index: 2; transition: transform .45s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn::after {
  content:""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: var(--grad-brand); transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { box-shadow: var(--shadow-coral); }
.btn--coral { --bg: var(--coral); --fg: #fff; }
.btn--coral::after { background: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: #fff; border-color: var(--ink); }
.section--dark .btn--ghost { --fg:#fff; border-color: var(--line-dark); }
.section--dark .btn--ghost::after { background: #fff; }
.section--dark .btn--ghost:hover { color: var(--ink); }
.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }

.textlink {
  display:inline-flex; align-items:center; gap:.45rem; font-weight:600;
  background-image: linear-gradient(var(--coral),var(--coral));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .4s var(--ease);
}
.textlink:hover { background-size: 100% 2px; }

/* -------- Custom cursor -------- */
.cursor-dot, .cursor-ring { position: fixed; top:0; left:0; pointer-events:none; z-index: 9999; border-radius: 50%; mix-blend-mode: difference; }
.cursor-dot { width: 7px; height: 7px; background:#fff; transform: translate(-50%,-50%); }
.cursor-ring { width: 42px; height: 42px; border: 1.5px solid rgba(255,255,255,.6); transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s; }
.cursor-ring.is-hover { width: 68px; height: 68px; background: rgba(253,107,116,.18); border-color: transparent; }
@media (hover: none), (pointer: coarse) { .cursor-dot,.cursor-ring{ display:none; } }

/* -------- Navigation -------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(250,247,242,.82); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line); padding-block: .8rem;
}
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; z-index: 2; }
.nav__logo { height: 55px; width: auto; display: block; transition: height .4s var(--ease); }
.nav.is-stuck .nav__logo { height: 45px; }
.brandmark { width: 20px; height: 34px; color: var(--coral); flex: none; }
.brandmark svg { width:100%; height:100%; display:block; }
.brand-word { font-family: var(--font-display); font-size: 1.85rem; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: var(--ink); }
.nav__links { display: flex; align-items: center; gap: 2.2rem; }
.nav__links a { font-weight: 500; font-size: .95rem; position: relative; padding-block: .3rem; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display:flex; align-items:center; gap: 1rem; }
.nav__burger { display:none; width: 46px; height: 46px; border-radius: 50%; border:1.5px solid var(--line); align-items:center; justify-content:center; }
.nav__burger span { display:block; width:18px; height:2px; background: var(--ink); position: relative; transition: .3s; }
.nav__burger span::before,.nav__burger span::after { content:""; position:absolute; left:0; width:18px; height:2px; background: var(--ink); transition:.3s; }
.nav__burger span::before { top:-6px; } .nav__burger span::after { top:6px; }

/* mobile menu */
.mobile-menu { position: fixed; inset:0; z-index: 850; background: var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:center; padding: var(--gutter); gap: .5rem; transform: translateY(-100%); transition: transform .6s var(--ease); }
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(2.2rem,10vw,4rem); text-transform: uppercase; line-height: 1.05; color:#fff; }
.mobile-menu a:hover { color: var(--coral-300); }
.mobile-menu .mm-foot { margin-top: 2rem; font-family: var(--font-text); font-size: .95rem; color: var(--muted-dark); }
body.menu-open { overflow: hidden; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 7rem; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; will-change: transform; }
.blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .82; will-change: transform; }
.blob--1 { width: 46vw; height: 46vw; background: radial-gradient(circle at 30% 30%, var(--coral), transparent 70%); top: -8vw; right: -6vw; animation: drift-1 26s var(--ease) infinite alternate; }
.blob--2 { width: 40vw; height: 40vw; background: radial-gradient(circle at 40% 40%, var(--teal-400), transparent 68%); bottom: -12vw; left: -8vw; opacity:.68; animation: drift-2 34s var(--ease) infinite alternate; }
.blob--3 { width: 26vw; height: 26vw; background: radial-gradient(circle at 50% 50%, #FF8A6B, transparent 70%); top: 30%; left: 40%; opacity:.5; animation: drift-3 22s var(--ease) infinite alternate; }
@keyframes drift-1 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-9vw,7vh) scale(1.12);} 100%{transform:translate(-16vw,2vh) scale(.94);} }
@keyframes drift-2 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(10vw,-8vh) scale(1.1);} 100%{transform:translate(18vw,-2vh) scale(.9);} }
@keyframes drift-3 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-8vw,-9vh) scale(1.18);} 100%{transform:translate(6vw,7vh) scale(.9);} }

/* dotted raster overlay (dezenter Punktraster) */
.hero__grid {
  position: absolute; inset: -60px; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(20,19,25,.15) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 32%, transparent 78%);
  mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 32%, transparent 78%);
  animation: grid-pan 60s linear infinite;
}
@keyframes grid-pan { to { transform: translate(30px, 30px); } }

/* =====================================================================
   GLOBAL BACKGROUND SCENE — drifting orbs + dotted raster (whole page)
   ===================================================================== */
.bg-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-scene .orb { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
.orb--a { width: 52vmax; height: 52vmax; top: -20vmax; right: -14vmax; background: radial-gradient(circle at 35% 35%, rgba(253,107,116,.55), transparent 62%); animation: drift-1 30s var(--ease) infinite alternate; }
.orb--b { width: 46vmax; height: 46vmax; bottom: -22vmax; left: -14vmax; background: radial-gradient(circle at 60% 40%, rgba(58,158,196,.5), transparent 62%); animation: drift-2 38s var(--ease) infinite alternate; }
.orb--c { width: 34vmax; height: 34vmax; top: 40%; left: 40%; background: radial-gradient(circle at 50% 50%, rgba(255,138,107,.42), transparent 60%); animation: drift-3 26s var(--ease) infinite alternate; }
.bg-scene .bg-grid {
  position: absolute; inset: -60px;
  background-image: radial-gradient(rgba(20,19,25,.13) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 120% 120% at 50% 40%, #000 55%, transparent 96%);
  mask-image: radial-gradient(ellipse 120% 120% at 50% 40%, #000 55%, transparent 96%);
  animation: grid-pan 60s linear infinite;
}
.grain { position: absolute; inset: 0; z-index: 1; pointer-events:none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; }
.hero .container { position: relative; z-index: 2; }
.hero .container { max-width: 1320px; }
.hero__inner { display: block; }
.hero__copy { min-width: 0; max-width: 62rem; margin-inline: auto; }
.hero__eyebrow { margin-bottom: 1.1rem; padding-left: .12em; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to bottom, transparent, var(--paper));
  z-index: 1; pointer-events: none;
}
.hero__tagline {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: .95; margin: 0 0 .55rem;
}
.hero__title {
  font-size: clamp(2.6rem, 6.6vw, 6rem); line-height: .9; margin: 0;
  max-width: 16ch; letter-spacing: .002em; overflow-wrap: break-word;
}
.script {
  font-family: var(--font-script); font-style: italic; font-weight: 600;
  text-transform: none; letter-spacing: -.01em;
  font-size: 1.06em; line-height: 1.28;
  padding-inline: .09em .2em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { margin-top: 1.8rem; max-width: 46ch; }
.hero__actions { margin-top: 2.2rem; display:flex; flex-wrap:wrap; gap: 1rem; align-items:center; }
.hero__chips { margin-top: 2.4rem; display:flex; flex-wrap:wrap; gap: .7rem; }

/* Hero visual: pink logo card + accents */
.hero__visual { position: relative; }
.hero__logo-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); transform: rotate(2deg);
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, #FF828B 0%, #FD6B74 55%, #F0505E 100%);
  aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 15% 12%;
}
.hero__logo-card img { width: 100%; height: auto; display: block; }
.hero__badge { position: absolute; top: -34px; left: -30px; width: 112px; height: 112px; z-index: 3; }
.hero__badge svg { width: 100%; height: 100%; overflow: visible; animation: spin 22s linear infinite; }
.hero__badge text { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; fill: var(--ink); }
.hero__badge-core {
  position: absolute; inset: 33px; border-radius: 50%; background: var(--coral); color: var(--ink);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.7rem; line-height: 1;
  box-shadow: 0 10px 26px -12px rgba(253,107,116,.9);
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero__visual .fl {
  position: absolute; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 100px;
  box-shadow: 0 14px 34px -18px rgba(20,19,25,.45);
  font-size: .82rem; font-weight: 600; padding: .45rem .9rem; white-space: nowrap; z-index: 3;
}
.hero__visual .fl i { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 700; color: #fff; font-style: normal; }
.fl-a { top: 26%; left: -9%; animation: floaty 8s var(--ease) infinite alternate; }
.fl-a i { background: var(--teal); }
.fl-b { bottom: 9%; right: -6%; animation: floaty 10s var(--ease) 1s infinite alternate-reverse; }
.fl-b i { background: var(--coral); }
@keyframes floaty { from { transform: translateY(-8px); } to { transform: translateY(9px); } }
.chip { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border:1px solid var(--line); border-radius:100px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); font-size:.85rem; font-weight:500; }
.chip .dot { width:7px; height:7px; border-radius:50%; background: var(--coral); }
.scroll-cue { position:absolute; bottom: 1.8rem; left: var(--gutter); display:flex; align-items:center; gap:.6rem; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); z-index:2; }
.scroll-cue .bar { width: 1px; height: 34px; background: var(--ink); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content:""; position:absolute; inset:0; background: var(--coral); transform: translateY(-100%); animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue { 0%{ transform: translateY(-100%);} 50%{ transform: translateY(0);} 100%{ transform: translateY(100%);} }

/* -------- Marquee -------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.1rem; background: var(--paper-2); }
.section--dark .marquee, .marquee--dark { background: var(--ink-800); border-color: var(--line-dark); }
.marquee__track { display:flex; gap: 3rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display:inline-flex; align-items:center; gap: 1rem; font-family: var(--font-display); font-size: 1.9rem; letter-spacing:.03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.marquee--dark .marquee__item { color:#fff; }
.marquee__item .star { color: var(--coral); font-family: var(--font-text); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   INTRO / split statement
   ===================================================================== */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items: start; }
.split__lead .h2 { margin-top: 1rem; }
.split__body p + p { margin-top: 1.2rem; }
.split__body { padding-top: .5rem; }
.underline-word { position: relative; white-space: nowrap; }
.underline-word::after { content:""; position:absolute; left:0; bottom: .06em; width:100%; height:.14em; background: var(--coral); opacity:.35; border-radius:4px; }

/* =====================================================================
   PROCESS infographic (dark)
   ===================================================================== */
.process { position: relative; }
.process__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.5rem); position: relative; }
.process__line { position:absolute; top: 46px; left: 8%; right: 8%; height:2px; z-index:0; }
.process__line svg { width:100%; height: 4px; overflow: visible; }
.process__line path { stroke: url(#pg); stroke-width:2; fill:none; stroke-dasharray: 6 8; }
.pstep { position: relative; z-index:1; }
.pstep__num { font-family: var(--font-display); font-size: 5.5rem; line-height:.8; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28); }
.pstep__badge { width: 92px; height: 92px; border-radius: 24px; background: var(--ink-800); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; margin-bottom: 1.6rem; position: relative; }
.pstep__badge svg { width: 40px; height:40px; color: var(--coral); }
.pstep__badge::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .4s; }
.pstep:hover .pstep__badge::after { opacity:1; }
.pstep h3 { margin: .3rem 0 .7rem; color:#fff; }
.pstep p { color: var(--muted-dark); max-width: 34ch; }
.pstep__index { font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color: var(--coral-300); margin-bottom:1rem; display:block; }

/* =====================================================================
   SERVICES
   ===================================================================== */
.svc-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.svc {
  position: relative; padding: clamp(1.6rem,3vw,2.6rem); border-radius: var(--r-lg);
  background: var(--white); border:1px solid var(--line); overflow:hidden;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s;
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.svc__ico { width: 58px; height:58px; border-radius: 16px; background: var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom: 1.4rem; transition: background .4s, color .4s; color: var(--ink); }
.svc:hover .svc__ico { background: var(--grad-brand); color:#fff; }
.svc__ico svg { width: 28px; height:28px; }
.svc h3 { margin-bottom: .6rem; }
.svc p { color: var(--muted); max-width: 42ch; }
.svc__no { position:absolute; top: 1.6rem; right: 1.8rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--line); }
.svc--wide { grid-column: span 2; }

/* =====================================================================
   PRICING
   ===================================================================== */
.price-grid { display:grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 1.5rem; align-items: stretch; max-width: 960px; margin-inline: auto; }
.price--feature { padding: clamp(2rem,3.4vw,3.1rem); }
.price--feature .price__amount .num { font-size: clamp(3.6rem,7vw,5.6rem); }
.price--feature .price__name { font-size: 1.35rem; }
.price {
  display:flex; flex-direction:column; padding: clamp(1.6rem,2.5vw,2.4rem);
  border-radius: var(--r-lg); background: var(--white); border:1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price--feature { background: var(--ink); color:#fff; border-color: var(--ink); position:relative; overflow:hidden; }
.price--feature::before { content:""; position:absolute; top:-40%; right:-30%; width:70%; height:80%; background: radial-gradient(circle, rgba(253,107,116,.55), transparent 70%); filter: blur(30px); }
.price__tag { position:relative; z-index:1; display:inline-flex; align-self:flex-start; margin-bottom:1rem; padding:.4rem .8rem; border-radius:100px; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background: var(--grad-brand); color:#fff; }
.price__name { position:relative; z-index:1; font-weight:600; font-size:1.15rem; margin-bottom:.4rem; }
.price__desc { position:relative; z-index:1; font-size:.92rem; color: var(--muted); min-height: 2.6em; }
.price--feature .price__desc { color: rgba(255,255,255,.7); }
.price__amount { position:relative; z-index:1; display:flex; align-items:baseline; gap:.35rem; margin: 1.2rem 0 .3rem; }
.price__amount .num { font-family: var(--font-display); font-size: clamp(3rem,6vw,4.6rem); line-height:.85; }
.price__amount .cur { font-family: var(--font-display); font-size: 2rem; color: var(--coral); }
.price--feature .price__amount .cur { color: var(--coral-300); }
.price__per { position:relative; z-index:1; font-size:.85rem; color: var(--muted); margin-bottom: 1.4rem; }
.price--feature .price__per { color: rgba(255,255,255,.6); }
.price__list { position:relative; z-index:1; display:grid; gap:.7rem; margin: .4rem 0 1.6rem; }
.price__list li { display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; }
.price__list svg { width:18px; height:18px; flex:none; color: var(--coral); margin-top:.15rem; }
.price--feature .price__list svg { color: var(--coral-300); }
.price .btn { position:relative; z-index:1; margin-top:auto; width:100%; justify-content:center; }

/* changes / add-on band */
.addons { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 1.25rem; }
.addon { padding: 1.6rem; border-radius: var(--r); border:1px dashed var(--line); background: var(--paper); }
.addon h4 { font-weight:600; font-size:1rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; }
.addon .price-inline { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); }
.addon .price-inline .cur { color: var(--coral); }
.addon p { font-size:.88rem; color: var(--muted); margin-top:.5rem; }
.price-note { margin-top: 1.5rem; font-size:.9rem; color: var(--muted); display:flex; align-items:center; gap:.6rem; }
.price-note svg { width:18px;height:18px;color:var(--teal); flex:none; }

/* =====================================================================
   AUTOMATION band (teal)
   ===================================================================== */
.autom { background: var(--grad-teal); color:#fff; border-radius: var(--r-xl); padding: clamp(2.4rem,5vw,4.5rem); position:relative; overflow:hidden; }
.autom__grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; position:relative; z-index:1; }
.autom .kicker { color:#fff; } .autom .kicker::before { background:#fff; }
.autom h2 { color:#fff; margin:1rem 0 1.2rem; }
.autom p { color: rgba(255,255,255,.85); max-width: 42ch; }
.autom__list { display:grid; gap: .9rem; }
.autom__list li { display:flex; align-items:center; gap:1rem; padding: 1rem 1.2rem; background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius: var(--r); backdrop-filter: blur(4px); font-weight:500; transition: transform .4s var(--ease), background .4s; }
.autom__list li:hover { transform: translateX(6px); background: rgba(255,255,255,.2); }
.autom__list svg { width:22px;height:22px; flex:none; }
.autom__deco { position:absolute; inset:0; z-index:0; opacity:.5; background:
  radial-gradient(circle at 85% 20%, rgba(255,255,255,.25), transparent 40%),
  radial-gradient(circle at 10% 90%, rgba(253,107,116,.4), transparent 45%); }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { max-width: 860px; margin-inline:auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; text-align:left; padding: 1.5rem 0; font-weight:600; font-size: clamp(1.05rem,2vw,1.3rem); }
.faq__q .ico { flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; transition: .4s var(--ease); position:relative; }
.faq__q .ico::before,.faq__q .ico::after { content:""; position:absolute; background: var(--ink); border-radius:2px; transition:.4s var(--ease); }
.faq__q .ico::before { width:14px; height:2px; } .faq__q .ico::after { width:2px; height:14px; }
.faq__item.is-open .faq__q .ico { background: var(--coral); border-color: var(--coral); }
.faq__item.is-open .faq__q .ico::before,.faq__item.is-open .faq__q .ico::after { background:#fff; }
.faq__item.is-open .faq__q .ico::after { transform: rotate(90deg); opacity:0; }
.faq__a { overflow:hidden; height:0; transition: height .45s var(--ease); }
.faq__a-inner { padding: 0 0 1.6rem; color: var(--muted); max-width: 62ch; }

/* =====================================================================
   CONTACT / CTA (dark)
   ===================================================================== */
.contact__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; }
.contact__intro .h1 { margin: 1.2rem 0 1.4rem; }
.contact__details { display:grid; gap: 1rem; margin-top: 2.2rem; }
.contact__row { display:flex; align-items:center; gap: 1rem; }
.contact__row .ci { width:46px;height:46px;border-radius:14px; background: var(--ink-800); border:1px solid var(--line-dark); display:flex;align-items:center;justify-content:center; color: var(--coral-300); flex:none; }
.contact__row .ci svg { width:20px;height:20px; }
.contact__row a,.contact__row span { font-weight:500; }
.contact__row small { display:block; color: var(--muted-dark); font-weight:400; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }

.form { background: var(--ink-800); border:1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.6rem); }
.field { margin-bottom: 1.1rem; }
.field label { display:block; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-dark); margin-bottom:.5rem; }
.field input,.field textarea {
  width:100%; padding: .95rem 1.1rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border:1px solid var(--line-dark); color:#fff; font: inherit;
  transition: border-color .3s, background .3s;
}
.field input::placeholder,.field textarea::placeholder { color: rgba(255,255,255,.35); }
.field input:focus,.field textarea:focus { outline:none; border-color: var(--coral); background: rgba(255,255,255,.06); }
.field textarea { resize: vertical; min-height: 120px; }
.form .btn { width:100%; justify-content:center; margin-top:.4rem; }
.form__note { margin-top: 1rem; font-size:.8rem; color: var(--muted-dark); text-align:center; }
.form__success { display:none; text-align:center; padding: 1rem 0; color: var(--coral-300); font-weight:600; }
.form.is-sent .form__success { display:block; }
.form.is-sent .form__fields { display:none; }

/* map */
.map { margin-top: 2rem; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line-dark); position:relative; }
.map iframe { width:100%; height: 320px; border:0; display:block; filter: grayscale(.3) contrast(1.05); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background-color: var(--ink); color:#fff; padding-block: clamp(3.5rem,7vw,6rem) 2rem; position:relative; overflow:hidden;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.5px); background-size: 30px 30px; }
.footer__big { font-family: var(--font-display); font-size: clamp(4rem, 20vw, 18rem); line-height:.8; letter-spacing:.02em; text-transform:uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); margin-bottom: 2.5rem; }
.footer__top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 3rem; border-bottom:1px solid var(--line-dark); }
.footer__brand .brand-word { color:#fff; }
.footer__brand p { color: var(--muted-dark); max-width: 30ch; margin-top: 1rem; font-size:.95rem; }
.footer__col h5 { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--coral-300); margin-bottom:1.1rem; }
.footer__col a,.footer__col span { display:block; color: rgba(255,255,255,.78); padding-block:.35rem; font-size:.95rem; transition: color .3s, transform .3s; }
.footer__col a:hover { color:#fff; transform: translateX(4px); }
.footer__bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top: 1.8rem; color: var(--muted-dark); font-size:.85rem; }
.footer__bottom a:hover { color:#fff; }

/* =====================================================================
   Legal pages
   ===================================================================== */
.legal { padding-top: 9rem; }
.legal__head { border-bottom:1px solid var(--line); padding-bottom: 2rem; margin-bottom: 3rem; }
.legal__body { max-width: 820px; }
.legal__body h2 { font-family: var(--font-text); font-weight:600; font-size:1.4rem; margin: 2.5rem 0 .8rem; letter-spacing:-.01em; }
.legal__body h3 { font-family: var(--font-text); font-weight:600; font-size:1.1rem; margin: 1.6rem 0 .5rem; }
.legal__body p, .legal__body li { color: var(--muted); margin-bottom: .8rem; line-height:1.7; }
.legal__body ul { list-style: disc; padding-left: 1.4rem; }
.legal__body strong { color: var(--ink); font-weight:600; }
.legal__body a { color: var(--coral); }
.legal__meta { display:grid; grid-template-columns: minmax(0,250px) 1fr; gap:.7rem 2rem; margin:1.4rem 0; }
.legal__meta dt { font-weight:600; color: var(--ink); overflow-wrap:anywhere; }
.legal__meta dd { color: var(--muted); }
.back-link { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; margin-bottom:1.5rem; color: var(--coral); }

/* =====================================================================
   Reveal animations
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.line > span { transform: translateY(105%); transition: transform .9s var(--ease-out); }
.line.is-in > span, .is-in .line > span { transform: none; }
.line > span { transition-delay: calc(var(--i,0) * .09s); }

@media (prefers-reduced-motion: reduce) {
  .reveal,.line > span { opacity:1 !important; transform:none !important; }
  .blob,.marquee__track,.scroll-cue .bar::after { animation:none !important; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
  .split,.autom__grid,.contact__grid { grid-template-columns: 1fr; }
  .process__grid,.price-grid,.addons { grid-template-columns: 1fr; }
  .process__line { display:none; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc--wide { grid-column: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .nav__links { display:none; }
  .nav__cta .btn { display:none; }
  .nav__burger { display:flex; }
  .hero { min-height: auto; padding-top: 8rem; padding-bottom: 4rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero__visual { max-width: 460px; margin-top: 1rem; }
  .step { grid-template-columns: 1fr; gap: 1.4rem; }
  .step--flip .step__info { order: 1; }
  .step--flip .step__viz { order: 2; }
  .edit-grid { grid-template-columns: 1fr; }
  .edit-card--featured { order: -1; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
  .legal__meta { grid-template-columns: 1fr; gap:.15rem 0; }
  .legal__meta dt { margin-top:.7rem; }
  .hero__chips { gap:.5rem; }
  .scroll-cue { display:none; }
  .hero__badge { top: -24px; left: auto; right: -10px; width: 88px; height: 88px; }
  .hero__badge-core { inset: 26px; font-size: 1.4rem; }
  .hero__visual .fl-a { left: -2%; }
  .hero__visual .fl-b { right: -2%; }
  .compare-stage { aspect-ratio: 4 / 3; }
}

/* =====================================================================
   PROCESS — steps + vizzes (Finden / Bauen / Live gehen)
   ===================================================================== */
.steps { display:flex; flex-direction:column; gap: clamp(2.4rem, 5vw, 4rem); }
.step { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items:center; }
.step--flip .step__info { order:2; }
.step--flip .step__viz { order:1; }
.step__num { font-family: var(--font-mono); font-size:.8rem; letter-spacing:.14em; color: var(--coral-300); display:block; margin-bottom:.6rem; }
.step__info h3 { color:#fff; font-size: clamp(1.6rem,3vw,2.2rem); font-family: var(--font-text); font-weight:600; letter-spacing:-.02em; margin-bottom:.6rem; }
.step__info p { color: var(--muted-dark); max-width: 42ch; }
.step__viz {
  position:relative; min-height: 320px; border-radius: var(--r-lg);
  background: var(--white); border:1px solid var(--line); overflow:hidden;
  box-shadow: var(--shadow);
}

/* viz 1 — Finden: Quellen kreisen um die Klammer */
.viz-find { display:grid; place-items:center; min-height: 420px; }
.viz-core { font-family: var(--font-display); font-size: 4.6rem; color: var(--coral); line-height:1; z-index:2; }
.orbit { position:absolute; inset:0; margin:auto; border:1.5px dashed var(--line); border-radius:50%; }
.orbit--outer { width:min(84%,340px); aspect-ratio:1; animation: spin 26s linear infinite; }
.orbit--inner { width:min(52%,210px); aspect-ratio:1; animation: spin 18s linear infinite reverse; }
.orbit .vchip {
  position:absolute; top:50%; left:50%;
  font-family: var(--font-mono); font-size:.7rem; font-weight:500;
  background: var(--ink); color:#fff; padding:.32rem .75rem; border-radius:99px; white-space:nowrap;
}
.orbit--outer .vchip { animation: counterspin 26s linear infinite; }
.orbit--inner .vchip { animation: counterspin-rev 18s linear infinite; }
@keyframes counterspin {
  from { transform: translate(-50%,-50%) rotate(calc(var(--i)*120deg)) translateX(min(31vw,170px)) rotate(calc(var(--i)*-120deg)); }
  to   { transform: translate(-50%,-50%) rotate(calc(var(--i)*120deg)) translateX(min(31vw,170px)) rotate(calc(var(--i)*-120deg - 360deg)); }
}
@keyframes counterspin-rev {
  from { transform: translate(-50%,-50%) rotate(calc(var(--i)*180deg + 60deg)) translateX(min(19vw,105px)) rotate(calc(var(--i)*-180deg - 60deg)); }
  to   { transform: translate(-50%,-50%) rotate(calc(var(--i)*180deg + 60deg)) translateX(min(19vw,105px)) rotate(calc(var(--i)*-180deg - 60deg + 360deg)); }
}

/* viz 2 — Bauen: Blöcke setzen sich zusammen */
.viz-build { display:flex; flex-direction:column; justify-content:center; gap:1rem; padding: clamp(1.5rem,3vw,2.5rem); }
.build-canvas { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-rows: 34px; gap:10px; }
.bb { border-radius:8px; background: var(--paper-2); opacity:0; transform: translateY(14px); }
.bb-1 { grid-column: span 4; background: var(--ink); }
.bb-2 { grid-column: span 2; background: var(--coral); }
.bb-3 { grid-column: span 2; }
.bb-4 { grid-column: span 2; background: var(--teal-100); }
.bb-5 { grid-column: span 2; background: var(--coral-100); }
.bb-6 { grid-column: span 6; background: var(--ink-700); }
.is-in .bb { animation: bb-in .55s var(--ease) forwards; }
.is-in .bb-1 { animation-delay:.1s; } .is-in .bb-2 { animation-delay:.25s; }
.is-in .bb-3 { animation-delay:.4s; } .is-in .bb-4 { animation-delay:.55s; }
.is-in .bb-5 { animation-delay:.7s; } .is-in .bb-6 { animation-delay:.9s; }
@keyframes bb-in { to { opacity:1; transform:none; } }
.build-meta { display:flex; align-items:center; gap:.7rem; }
.swatch { width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.swatch--a { background: var(--coral); } .swatch--b { background: var(--ink); } .swatch--c { background: var(--teal); }
.type-spec { font-family: var(--font-display); font-size:1.6rem; margin-left:.4rem; }

/* viz 3 — Live gehen */
.viz-live { display:flex; flex-direction:column; justify-content:center; gap:1.1rem; padding: clamp(1.5rem,3vw,2.5rem); }
.live-bar { display:flex; align-items:center; gap:.3rem; background: var(--ink); color:#fff; border-radius:99px; font-family: var(--font-mono); font-size:.9rem; padding:.7rem 1.2rem; }
.live-lock { color: rgba(255,255,255,.55); }
.live-url { display:inline-block; overflow:hidden; white-space:nowrap; max-width:0; animation: type-url 6s steps(14) infinite; border-right:2px solid var(--coral); }
@keyframes type-url { 0%{max-width:0;} 35%,88%{max-width:14ch;} 100%{max-width:14ch;} }
.live-checks { display:flex; flex-direction:column; gap:.5rem; }
.live-checks li { padding-left:1.8rem; position:relative; color: var(--muted); }
.live-checks li::before { content:"✓"; position:absolute; left:.2rem; font-weight:700; color: var(--teal); }
.live-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:.55rem; font-family: var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--coral-600); border:1.5px solid var(--coral); border-radius:99px; padding:.4rem 1rem; }
.pulse { width:9px; height:9px; border-radius:50%; background: var(--coral-600); position:relative; }
.pulse::after { content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--coral); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0%{transform:scale(.5);opacity:1;} 100%{transform:scale(1.6);opacity:0;} }

/* =====================================================================
   VORHER / NACHHER compare slider
   ===================================================================== */
.compare { max-width: 900px; margin-inline:auto; }
.compare-stage { position:relative; aspect-ratio:16/10; border-radius: var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-lg); --pos:55%; cursor: ew-resize; touch-action: pan-y; }
.pane { position:absolute; inset:0; }
.pane .mock { position:absolute; inset:0; }
.pane--new { clip-path: inset(0 0 0 var(--pos)); }
.compare-tag { position:absolute; top:4%; font-family: var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .8rem; border-radius:99px; z-index:3; }
.compare-tag--old { left:4%; background:#3a3630; color:#ece4d2; }
.compare-tag--new { right:4%; background: var(--coral); color: var(--ink); }
.compare-handle { position:absolute; top:0; bottom:0; left: var(--pos); width:3px; margin-left:-1.5px; background: var(--coral); z-index:2; display:flex; align-items:center; justify-content:center; }
.compare-grip { position:absolute; width:52px; height:52px; border-radius:50%; background: var(--ink); color: var(--coral); border:2px solid var(--coral); display:grid; place-items:center; font-family: var(--font-mono); font-weight:700; font-size:.85rem; box-shadow:0 8px 24px rgba(20,19,25,.35); }
.compare-label { display:block; margin:.9rem 0 .3rem; font-family: var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); text-align:center; }
.compare-range { width:min(100%,420px); display:block; margin-inline:auto; accent-color: var(--coral-600); }

/* mock — alte Website */
.mock { padding:7% 8%; display:flex; flex-direction:column; gap:4.5%; }
.mock--old { background:#ece4d2; font-family:'Times New Roman', Georgia, serif; color:#3a3630; }
.mock--tall { padding:5% 6%; gap:3.5%; }
.mo-head { display:flex; align-items:center; justify-content:space-between; gap:4%; border-bottom:2px ridge #b8ab8e; padding-bottom:3.5%; }
.mo-logo { font-weight:700; font-style:italic; font-size:clamp(.7rem,1.5vw,1rem); color:#1a3f8b; text-decoration:underline; }
.mo-banner { background:#ffef9e; border:1px dashed #b3a24e; color:#6a5c1c; font-size:clamp(.55rem,1.1vw,.78rem); padding:2.5% 4%; white-space:nowrap; overflow:hidden; }
.mo-cols { display:flex; gap:6%; flex:1; }
.mo-col { flex:1; display:flex; flex-direction:column; gap:9%; }
.mo-col i { height:clamp(6px,1vw,10px); background:#cfc6ad; }
.mo-col i:nth-child(odd){ width:92%; } .mo-col i:nth-child(even){ width:78%; }
.mo-links { font-size:clamp(.55rem,1.1vw,.75rem); color:#1a3f8b; }
.mo-counter { align-self:flex-start; background:#000; color:#6cf46c; font-family: var(--font-mono); font-size:clamp(.5rem,1vw,.7rem); padding:1.5% 3%; letter-spacing:.1em; }
/* mock — neue Website */
.mock--new { background: var(--paper); }
.mn-head { display:flex; align-items:center; gap:4%; }
.mn-logo { width:10%; aspect-ratio:2.4; background: var(--coral); border-radius:3px; }
.mn-nav { display:flex; gap:7px; margin-left:auto; }
.mn-nav i { width:clamp(16px,2.6vw,30px); height:clamp(5px,.8vw,8px); background:#d8d4cc; border-radius:99px; }
.mn-cta { width:12%; aspect-ratio:3.2; background: var(--ink); border-radius:99px; }
.mn-hero { display:flex; flex-direction:column; gap:6%; justify-content:center; flex:1; }
.mn-h1 { width:72%; height:clamp(10px,1.8vw,18px); background: var(--ink); border-radius:4px; }
.mn-h1--short { width:46%; background: var(--coral); }
.mn-btn { width:22%; height:clamp(9px,1.5vw,15px); background: var(--ink); border-radius:99px; margin-top:2%; }
.mn-cards { display:flex; gap:5%; }
.mn-cards i { flex:1; aspect-ratio:1.35; background:#fff; border:1px solid var(--line); border-radius:8px; }
.mn-strip { display:flex; gap:5%; }
.mn-strip i { flex:1; height:clamp(8px,1.2vw,12px); background:#e2ded6; border-radius:99px; }

/* =====================================================================
   PRICING — edit-models picker
   ===================================================================== */
.edit-head { max-width: 720px; margin-bottom: 1.8rem; }
.edit-head .h3 { margin-bottom:.4rem; }
.picker { margin-top: 1.3rem; }
.picker-label { display:block; font-family: var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom:.6rem; }
.picker-btns { display:inline-flex; flex-wrap:wrap; gap:6px; background: var(--paper-2); border-radius:999px; padding:6px; }
.picker-btns button { border:0; background:transparent; font-family: var(--font-text); font-weight:600; font-size:.92rem; color: var(--ink); padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; transition: background .2s, color .2s; }
.picker-btns button:hover { background: rgba(20,19,25,.07); }
.picker-btns button[aria-pressed="true"] { background: var(--ink); color:#fff; }
.edit-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem,2vw,1.6rem); }
.edit-card { position:relative; background: var(--white); border:1.5px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem,2.5vw,2rem); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.edit-card--featured { border-color: var(--coral); }
.edit-card.is-picked { border-color: var(--ink); transform: translateY(-6px); box-shadow: var(--shadow); }
.edit-badge { position:absolute; top:-.85rem; left:1.2rem; background: var(--coral); color: var(--ink); font-size:.72rem; font-weight:600; font-family: var(--font-mono); letter-spacing:.05em; text-transform:uppercase; padding:.28rem .75rem; border-radius:99px; margin:0; }
.edit-kicker { font-family: var(--font-mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom:.5rem; }
.edit-price { font-size:1.15rem; margin-bottom:.8rem; }
.edit-price strong { font-family: var(--font-display); font-weight:400; letter-spacing:.01em; font-size:1.9rem; }
.edit-plus { color: var(--coral-600); font-weight:700; }
.edit-card > p:nth-of-type(3) { color: var(--muted); font-size:.98rem; }
.edit-fit { font-size:.9rem; font-weight:600; color: var(--coral-600); border-top:1px solid var(--line); padding-top:.8rem; margin-top:1rem; }

/* footer real logo */
.footer__logo { height: 34px; width:auto; margin-bottom: 1rem; }

/* form status */
.form-status { margin:.8rem 0 0; font-weight:600; min-height:1.2em; text-align:center; font-size:.9rem; }
.form-status.is-ok { color: var(--coral-300); }
.form-status.is-err { color: var(--coral-300); }

@media (prefers-reduced-motion: reduce) {
  .blob, .hero__grid, .orb, .bg-scene .bg-grid, .hero__badge svg, .orbit, .orbit .vchip, .live-url, .pulse::after,
  .fl-a, .fl-b, .is-in .bb { animation: none !important; }
  .bb { opacity:1 !important; transform:none !important; }
  .live-url { max-width:none; border-right:0; }
}