/*
Theme Name: Matrixe Blog
Theme URI: https://www.matrixe.de/blog/
Author: Matrixe
Author URI: https://www.matrixe.de/
Description: Lightweight, fast blog theme for Matrixe — editorial design with pastel hero, amber accent, card grid, category archives and clean single-post typography. No jQuery, no page builder, deferred scripts.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matrixe-blog
Tags: blog, custom-colors, featured-images, translation-ready
*/

/* ============================================================
   MATRIXE — Design System v2 (Direction A · Electric Lime)
   Single shared stylesheet for all pages.
   Order:
     1. Tokens & resets
     2. Layout primitives
     3. Typography
     4. Buttons & utilities
     5. Navigation
     6. Hero (shared shell + page-specific visuals)
     7. Sections (sec-head, intro, cases, process, why, services...)
     8. CTA + Footer
     9. Modals / tweaks panel
    10. Motion / reveal utilities
    11. Responsive overrides
   ============================================================ */


/* ============== 1. TOKENS & RESETS ============== */
:root{
  /* core palette — Direction A: Electric Lime */
  --bg:        #f4f4ee;
  --bg-2:      #ebebde;
  --bg-3:      #e0e0d0;
  --ink:       #0d0d0c;
  --ink-2:     #2a2a26;
  --ink-3:     #6b6b62;
  --line:      rgba(13,13,12,.10);
  --line-2:    rgba(13,13,12,.18);

  --accent:        #F7B731;
  --accent-deep:   #a8e021;
  --accent-ink:    #0d0d0c;
  --accent-glow:   rgba(247, 183, 49, 1);

  /* type */
  --ff-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --ff-display: 'Inter Tight', 'Inter', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* sizing */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --maxw:      1400px;
  --pad:       clamp(20px, 3vw, 40px);

  /* motion */
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:     .35s;

  /* z */
  --z-nav: 50;
  --z-overlay: 80;
  --z-tweak: 100;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

body{
  font-family:var(--ff-sans);
  font-size:16px;line-height:1.55;letter-spacing:-.005em;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv11';
  overflow-x:hidden;
}

/* grain overlay */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:var(--grain-op,.04);mix-blend-mode:multiply;
  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.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ambient lime glow — global page accent */
body::after{
  content:'';position:fixed;
  right:-15%;top:-10%;width:55vw;height:60vh;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
  filter:blur(80px);opacity:.55;pointer-events:none;z-index:0;
  animation:ambient 14s ease-in-out infinite alternate;
}
@keyframes ambient{
  0%   {transform:translate(0,0) scale(1)}
  100% {transform:translate(-40px,30px) scale(1.1)}
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}


/* ============== 2. LAYOUT PRIMITIVES ============== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}

main{position:relative;z-index:2}

section{padding:clamp(72px, 10vw, 120px) 0;position:relative;border-bottom:1px solid var(--line)}
section.flush{padding:0;border-bottom:none}
section.compact{padding:clamp(24px, 7vw, 30px) 0}

.sec-head{
  display:grid;grid-template-columns:200px 1fr;gap:48px;
  margin-bottom:64px;align-items:start;
}
.sec-head .label{padding-top:8px}
.sec-head h2{
  font-family:var(--ff-display);
  font-size:clamp(36px, 5.2vw, 68px);
  font-weight:400;letter-spacing:-.04em;line-height:1;
  max-width:20ch;
}
.sec-head h2 em{font-style:italic;font-weight:300;color:var(--ink-3)}
.sec-head p{color:var(--ink-2);max-width:60ch;margin:24px 0 0;font-size:16px;line-height:1.50}


/* ============== 3. TYPOGRAPHY ============== */
h1,h2,h3,h4,h5,h6{font-family:var(--ff-display);font-weight:500;letter-spacing:-.025em;line-height:1.05}
.mono{font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.eye{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  padding:6px 12px 6px 10px;border-radius:99px;background:rgba(13,13,12,.05);
  width:fit-content
}
.eye::before{content:'';width:6px;height:6px;border-radius:99px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.eye-light{color:rgba(255,255,255,.75);background:rgba(255,255,255,.08)}

/* big rotating heading */
h1.hero-title, .hero-title{
  font-family:var(--ff-display);
  font-size:clamp(56px, 6.0vw, 140px);
  font-weight:400;letter-spacing:-.05em;line-height:1.1;
}
.hero-title em{
  font-style:normal;font-weight:300;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title .mark{
  display:inline-block;
  background:var(--accent);color:var(--accent-ink);
  padding:0 .12em;border-radius:12px;
  box-shadow:0 0 0 6px var(--accent-glow);
  position:relative;
}

/* ============== 4. BUTTONS & UTILITIES ============== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 24px;border-radius:99px;
  font-family:var(--ff-display);font-size:15px;font-weight:500;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:color .35s var(--ease-out),
             border-color .35s var(--ease-out),
             box-shadow .35s var(--ease-out),
             transform .18s var(--ease-out);
  position:relative;overflow:hidden;isolation:isolate;
  white-space:nowrap;
}
/* Sweep-fill pseudo: a color panel that slides in from the left on hover.
   Sits behind the text (z-index:-1 thanks to isolation). Modern, predictable,
   feels deliberate — used by Stripe, Linear, Vercel-class sites. */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  transform:translateX(-101%);
  transition:transform .45s var(--ease-out);
}
.btn:hover::before{transform:translateX(0)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
/* Subtle press feedback (no lift, just a tactile micro-scale) */
.btn:active{transform:scale(.97)}

/* PRIMARY — dark base, lime sweeps in */
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary::before{background:var(--accent)}
.btn-primary:hover{
  color:var(--accent-ink);
  box-shadow:0 12px 32px -10px var(--accent-glow), 0 0 0 4px rgba(201,255,59,.16);
}

/* ACCENT — lime base, dark sweeps in (text flips to lime so it stays readable) */
.btn-accent{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px -10px var(--accent-glow)}
.btn-accent::before{background:var(--ink)}
.btn-accent:hover{
  color:var(--accent);
  box-shadow:0 14px 36px -10px rgba(13,13,12,.45);
}

/* GHOST — outline base, ink sweeps in */
.btn-ghost{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--bg);box-shadow:0 8px 24px -10px rgba(13,13,12,.35)}

[data-magnetic]{will-change:transform}

/* tag chips */
.tag{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:99px;border:1px solid var(--line-2);
  display:inline-flex;align-items:center;gap:6px;
}
/* ============== 5. NAVIGATION ============== */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease-out),
             border-color .35s var(--ease-out),
             transform .4s var(--ease-out),
             backdrop-filter .35s var(--ease-out);
  will-change:transform;
}
/* Default scrolled state — light pages (cream solid) */
nav.top.scrolled{
  background:color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
/* Push main content down so the fixed nav doesn't overlap top of hero */
body{padding-top:0}
body[data-page="index"] .hero-home{padding-top:clamp(96px,10vw,140px)}
.hero{padding-top:clamp(120px,11vw,150px)}

.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:20px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-display);font-weight:600;font-size:18px;letter-spacing:-.02em;
  text-decoration:none;
}
/* Brand logo image (replaces inline M square) */
.brand-logo{
  height:30px;
  width:auto;
  display:block;
  transition:filter .35s var(--ease-out), opacity .25s ease;
}
/* Logo hover: stable position (a brand mark should never wobble), soft lime
   drop-shadow that fades in. Premium, calm, doesn't compete with the click. */
.brand:hover .brand-logo{
  filter:drop-shadow(0 0 10px var(--accent-glow));
}
.brand:active .brand-logo{opacity:.85}
/* Footer brand logo can be slightly larger */
footer .brand-logo{height:40px}
/* Mobile: shrink logo slightly so it fits the tighter floating nav */
@media(max-width:560px){
  .brand-logo{height:26px}
}
.nav-links{display:flex;gap:10px;align-items:center}
.nav-links > a,
.nav-item > a{
  padding:8px 25px;border-radius:100px;font-size:14px;color:var(--ink-2);
  transition:color .2s, background .2s;
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  text-decoration:none;
}
.nav-links > a:hover,
.nav-item > a:hover{color:var(--ink)}
.nav-links > a.active,
.nav-item > a.active{color:var(--ink);background:rgba(13,13,12,.07)}
.nav-links > a.active::before,
.nav-item > a.active::before{
  content:'';position:absolute;left:50%;bottom:-2px;width:5px;height:5px;
  border-radius:99px;background:var(--accent);transform:translateX(-50%);
  box-shadow:0 0 6px var(--accent-glow);
}

/* ===== Dropdown menu ===== */
.nav-item{position:relative}
.nav-item > a .caret{
  width:9px;height:6px;opacity:.55;
  transition:transform .25s var(--ease-out), opacity .2s;
}
.nav-item.has-dropdown:hover > a .caret,
.nav-item.has-dropdown:focus-within > a .caret{transform:rotate(180deg);opacity:1}

/* invisible bridge so cursor doesn't lose hover when moving down to panel */
.nav-item.has-dropdown::after{
  content:'';position:absolute;top:100%;left:0;right:0;height:14px;
  display:block;
}

.nav-dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translate(-50%, 8px);
  min-width:260px;max-width:300px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:14px;padding:6px;
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility .25s;
  box-shadow:
    0 30px 80px -20px rgba(13,13,12,.22),
    0 8px 24px -8px rgba(13,13,12,.12);
  z-index:60;
}

/* ───── 2-column mega-menu variant ───── */
.nav-dropdown.nav-dropdown-mega{
  min-width:560px;max-width:640px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:10px;
}
.nav-dropdown-mega .dd-col{
  display:flex;flex-direction:column;gap:1px;
  padding:6px 4px;
}
.nav-dropdown-mega .dd-col + .dd-col{
  border-left:1px solid var(--line);
  padding-left:10px;margin-left:4px;
}
.nav-dropdown-mega .dd-col-label{
  font-family:var(--ff-mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;
  padding:4px 12px 8px;margin:0;
}
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown:focus-within .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%, 0);
}

/* Dropdown items — single-line row with icon on left */
.dd-main, .dd-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink);
  transition:background .2s, color .2s;
  position:relative;
}
.dd-main{
  background:rgba(13,13,12,.04);
  margin-bottom:4px;
}
.dd-main::after{
  content:'→';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--ff-mono);color:var(--ink-3);font-size:14px;line-height:1;
  transition:transform .25s var(--ease-out), color .2s;
}
.dd-main:hover::after{transform:translate(3px,-50%);color:var(--accent)}

.dd-main:hover,
.dd-item:hover{background:var(--ink);color:var(--bg)}
.dd-main:hover .dd-ic,
.dd-item:hover .dd-ic{background:var(--accent);color:var(--accent-ink)}
/* Brand-colored icons keep their bg on hover */
.dd-main:hover .dd-ic.dd-ic-brand,
.dd-item:hover .dd-ic.dd-ic-brand{background:inherit}

.dd-ic{
  width:32px;height:32px;border-radius:8px;
  background:rgba(13,13,12,.06);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0;
  transition:background .25s, color .25s;
}
.dd-ic svg{width:15px;height:15px;display:block}
.dd-ic.dd-ic-brand{background:#fff;color:inherit}
.dd-ic.dd-ic-brand svg{width:18px;height:18px}

.dd-main .dd-ic{background:var(--ink);color:var(--accent)}
.dd-main:hover .dd-ic{background:var(--accent);color:var(--accent-ink)}

.dd-title{
  font-family:var(--ff-display);font-size:14px;font-weight:500;
  letter-spacing:-.005em;line-height:1.2;
}


.nav-right{display:flex;align-items:center;gap:10px}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:99px;
  background:var(--ink);color:var(--bg);
  font-size:14px;font-weight:500;
  transition:background .25s var(--ease-out),
             color .25s var(--ease-out),
             box-shadow .35s var(--ease-out),
             transform .18s var(--ease-out);
  /* Faint accent halo at rest — gets stronger on hover */
  box-shadow:0 0 0 0 transparent;
}
/* Stable position (no translateY lift), color shift + glowing halo + tiny
   tactile scale. Stays predictable for the click — Fitts' Law respected. */
.nav-cta:hover{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 24px -8px var(--accent-glow), 0 0 0 4px rgba(201,255,59,.18);
  transform:scale(1.025);
}
.nav-cta:active{transform:scale(.98)}
.nav-cta .dot{
  width:8px;height:8px;border-radius:99px;background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;box-shadow:0 0 6px var(--accent-glow);
}
.nav-cta:hover .dot{background:var(--ink);box-shadow:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}}

.nav-burger{
  display:none;width:42px;height:42px;border-radius:99px;
  border:1px solid var(--line-2);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:background .2s;
}
.nav-burger:hover{background:rgba(13,13,12,.05)}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s, opacity .3s}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.nav-mobile{
  position:fixed;inset:64px 0 0;z-index:49;
  background:var(--bg);
  padding:32px var(--pad);
  display:none;flex-direction:column;gap:0;
  transform:translateY(-100%);transition:transform .4s var(--ease-out);
  overflow-y:auto;
}
.nav-mobile.open{transform:translateY(0)}
.nav-mobile > a{
  font-family:var(--ff-display);font-size:30px;font-weight:400;letter-spacing:-.025em;
  padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);
  text-decoration:none;
}
.nav-mobile > a.mobile-cta{
  margin-top:24px;border-bottom:none;
  padding:18px 24px;border-radius:99px;background:var(--ink);color:var(--accent);
  font-size:18px;text-align:center;
}

/* Mobile accordion groups */
.nav-m-group{padding:0;border-bottom:1px solid var(--line)}
.nav-m-group summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  font-family:var(--ff-display);font-size:30px;font-weight:400;letter-spacing:-.025em;color:var(--ink);
}
.nav-m-group summary::-webkit-details-marker{display:none}
.nav-m-group summary .caret{
  width:18px;height:12px;color:var(--ink-3);
  transition:transform .25s var(--ease-out);flex-shrink:0;
}
.nav-m-group[open] summary .caret{transform:rotate(180deg);color:var(--ink)}
.nav-m-sub{
  display:flex;flex-direction:column;
  padding:4px 0 16px 18px;
}
.nav-m-sub a{
  font-family:var(--ff-display);font-size:18px;font-weight:400;letter-spacing:-.015em;
  padding:8px 0;color:var(--ink-2);text-decoration:none;
  transition:color .2s, padding .2s;
}
.nav-m-sub a:hover{color:var(--ink);padding-left:6px}

/* ═══════════════════════════════════════════════════════════════════
   ⚠️ LEGACY: Dark-nav variant removed in favor of the unified glass nav.
   The new global nav (light frosted glass · floating with 24px gutter ·
   rounded · dark text · clean Apple/Figma hover) is defined further down
   in the "GLOBAL NAV — Variant D Glass Nav" section.
   ═══════════════════════════════════════════════════════════════════ */
/* Mobile menu — full dark */
.nav-mobile{background:var(--ink);color:var(--bg)}
.nav-mobile > a{color:var(--bg);border-bottom-color:rgba(255,255,255,.1)}
.nav-m-group{border-bottom-color:rgba(255,255,255,.1)}
.nav-m-group summary{color:var(--bg)}
.nav-m-group summary .caret{color:rgba(255,255,255,.4)}
.nav-m-group[open] summary .caret{color:#fff}
.nav-m-sub a{color:rgba(255,255,255,.65)}
.nav-m-sub a:hover{color:#fff}
.nav-mobile > a.mobile-cta{background:var(--accent);color:var(--accent-ink)}


/* ============== 6. HERO ============== */
.hero{padding:clamp(140px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);border-bottom:1px solid var(--line);position:relative}

.hero-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:48px;gap:16px;flex-wrap:wrap;
}
.hero-crumbs{display:flex;gap:8px;align-items:center}
.hero-crumbs .sep{font-family:var(--ff-mono);opacity:.45}
.hero-crumbs .here{color:var(--ink)}

.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:end}

.hero-lead{
  font-size:16px;line-height:1.65;color:var(--ink-2);
  max-width:70ch;margin-top:28px;
}
.hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:80px;padding-top:32px;border-top:1px solid var(--line);
}
.stat .n{
  font-family:var(--ff-display);font-size:clamp(32px, 3.6vw, 46px);
  font-weight:400;letter-spacing:-.03em;line-height:1;
}
.stat .n.accent{color:var(--accent-ink);background:var(--accent);padding:0 8px;border-radius:6px;display:inline-block;line-height:1.1}
.stat .l{color:var(--ink-3);font-size:13px;margin-top:10px;line-height:1.4}

/* ============== HERO — DARK theme (applied GLOBALLY to all inner pages) ============== */
.hero{
  background:var(--ink);color:var(--bg);
  border-bottom:none;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;
  right:-15%;top:-25%;width:55vw;height:80vh;
  background:radial-gradient(circle, var(--accent) 0%, transparent 60%);
  filter:blur(110px);opacity:.32;pointer-events:none;
}
.hero::after{
  content:'';position:absolute;
  left:-12%;bottom:-35%;width:45vw;height:60vh;
  background:radial-gradient(circle, var(--accent) 0%, transparent 65%);
  filter:blur(100px);opacity:.18;pointer-events:none;
}
.hero > .wrap{position:relative;z-index:2}

/* hero meta + crumbs */
.hero .hero-meta{color:rgba(255,255,255,.5)}
.hero .hero-crumbs .here{color:var(--bg)}
.hero .hero-crumbs .sep{color:rgba(255,255,255,.35)}

/* eye label on dark */
.hero .eye{color:rgba(255,255,255,.78);background:rgba(255,255,255,.06)}
.hero .eye::before{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}

/* hero title em — invert gradient for dark bg */
.hero h1.hero-title em,
.hero .hero-title em{
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* lead + stats on dark */
.hero .hero-lead{color:rgba(255,255,255,.7)}
.hero .hero-stats{border-top-color:rgba(255,255,255,.1)}
.hero .stat .n{color:var(--bg)}
.hero .stat .l{color:rgba(255,255,255,.5)}

/* buttons inside hero on dark */
.hero .btn-primary{background:var(--accent);color:var(--accent-ink)}
.hero .btn-primary:hover{background:var(--bg);color:var(--ink);box-shadow:0 14px 32px -10px rgba(255,255,255,.18)}
.hero .btn-ghost{border-color:rgba(255,255,255,.3);color:var(--bg)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--bg)}

/* .hv hero frame sits as a floating cream card on dark */
.hero .hv{
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6), 0 0 60px -20px var(--accent-glow);
}

/* ════════════════════════════════════════════════════════════════════
   INNER PAGES — Variant B · Editorial Magazine Hero
   Re-skins .hero / .hero-ref / .hero-kontakt with home's pastel gradient
   and editorial typography. Applies to every page that has these classes
   (home uses .vd-stage so isn't affected).
   ════════════════════════════════════════════════════════════════════ */

/* Base: pastel gradient bg + dark text + extra top padding for floating glass nav */
.hero,
.hero-ref,
.hero-kontakt{
  background:
    radial-gradient(ellipse 60% 40% at 10% 10%,#fcd5b3 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 20%,#cfe3d6 0%,transparent 60%),
    radial-gradient(ellipse 50% 30% at 70% 90%,#cfd9e5 0%,transparent 60%),
    #f4ecdf !important;
  color:var(--ink) !important;
  padding:160px 0 80px !important;
  border-bottom:none !important;overflow:hidden;
  position:relative;
}
/* Kill the lime ambient blob glows from the legacy dark .hero theme */
.hero::before, .hero::after,
.hero-ref::before, .hero-ref::after,
.hero-kontakt::before, .hero-kontakt::after{display:none !important}

/* ───── Crumb / meta strip ───── */
.hero .hero-meta,
.hero-ref .hero-meta,
.hero-kontakt .hero-meta{color:var(--ink-3) !important;margin-bottom:48px}
.hero .hero-crumbs .here,
.hero-ref .hero-crumbs .here,
.hero-kontakt .hero-crumbs .here{color:var(--ink) !important}
.hero .hero-crumbs .sep,
.hero-ref .hero-crumbs .sep,
.hero-kontakt .hero-crumbs .sep{color:rgba(13,13,12,.35) !important}

/* ───── Eye / eyebrow chip — frosted white pill ───── */
.hero .eye,
.hero-ref .eye,
.hero-kontakt .eye{
  color:var(--ink-3) !important;
  background:rgba(255,255,255,.5) !important;
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero .eye::before,
.hero-ref .eye::before,
.hero-kontakt .eye::before{
  background:var(--ink) !important;box-shadow:none !important;
}

/* ───── H1 — editorial type with serif italic em + lime mark ───── */
.hero h1.hero-title,
.hero .hero-title,
.hero-ref h1,
.hero-kontakt h1{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(48px,6.4vw,96px);letter-spacing:-.04em;line-height:.95;
  color:var(--ink) !important;
  max-width:none;
  margin-top:0;
}
.hero h1.hero-title em,
.hero .hero-title em,
.hero-ref h1 em,
.hero-kontakt h1 em{
  font-family:'Fraunces','Cormorant Garamond',Georgia,serif !important;
  font-style:italic !important;font-weight:400 !important;
  display:inline !important;            /* keep em mid-sentence — no orphan punctuation on its own line */
  letter-spacing:-.02em;
  color:#1a1a18 !important;
  /* Reset gradient text-clip from the dark theme override */
  background:none !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
}
.hero h1.hero-title .mark,
.hero .hero-title .mark,
.hero-ref h1 .mark,
.hero-kontakt h1 .mark{
  background:linear-gradient(180deg,transparent 65%,var(--accent) 65%) !important;
  display:inline !important;            /* not inline-block — let the highlight wrap naturally */
  padding:0 6px !important;
  border-radius:0 !important;
  box-shadow:none !important;           /* kill the lime halo from the legacy block style */
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

/* ───── Lead text ───── */
.hero .hero-lead,
.hero-ref .hero-lead,
.hero-kontakt .hero-lead{
  color:var(--ink-2) !important;
  font-size:16.5px;line-height:1.65;
  max-width:60ch;margin-top:24px;
}

/* ───── Action buttons ───── */
.hero .btn-primary,
.hero-ref .btn-primary,
.hero-kontakt .btn-primary{
  background:var(--ink) !important;color:#fff !important;
  border:none !important;
  box-shadow:0 6px 18px -6px rgba(13,13,12,.30);
}
.hero .btn-primary:hover,
.hero-ref .btn-primary:hover,
.hero-kontakt .btn-primary:hover{
  background:var(--accent) !important;color:var(--ink) !important;
  box-shadow:0 12px 28px -8px rgba(201,255,59,.40);
}
.hero .btn-ghost,
.hero-ref .btn-ghost,
.hero-kontakt .btn-ghost{
  border:1px solid var(--ink) !important;color:var(--ink) !important;
  background:transparent !important;
}
.hero .btn-ghost:hover,
.hero-ref .btn-ghost:hover,
.hero-kontakt .btn-ghost:hover{
  background:var(--ink) !important;color:#fff !important;
}

/* ───── hero-ref / hero-kontakt: single-column layout (no right visual) ───── */
.hero-ref .hv,
.hero-kontakt .hv{display:none !important}
.hero-ref .hero-grid,
.hero-kontakt .hero-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:36px !important;
  align-items:start !important;
}

/* ════════════════════════════════════════════════════════════════════
   .hero (most inner pages) — Variant B 2-column editorial layout
   Row 1 (thin):   eye chip on left, right empty
   Row 2 onward:   H1 (left, spans rows 2-4) aligned with the
                   right column stack: visual → lead → buttons
   Both columns START AT THE SAME TOP LEVEL inside row 2.
   ════════════════════════════════════════════════════════════════════ */
.hero .hero-grid{
  display:grid !important;
  grid-template-columns:1fr 0.5fr !important;
  grid-template-areas:
    "eye    ."
    "title  visual"
    "title  lead"
    "title  actions" !important;
  column-gap:56px !important;
  row-gap:14px !important;             /* tighter — visual → lead → buttons sit close */
  align-items:start !important;
}
/* Make the LEFT wrapper transparent — its children flow as grid items */
.hero .hero-grid > div:first-child{display:contents}

/* LEFT col — eye chip top, then BIG editorial H1 (Variant B preview scale) */
.hero .hero-grid .eye{
  grid-area:eye;
  align-self:start;justify-self:start;
  margin-bottom:8px !important;
}
.hero .hero-grid h1.hero-title{
  grid-area:title;
  align-self:start;
  margin:0 !important;
  font-size:clamp(56px,7vw,108px) !important;
  line-height:.92 !important;
  letter-spacing:-.04em !important;
}

/* RIGHT col — DARK FEATURE STAT CARD (matches home's .vd-card.feat) */
.hero .hero-grid .vb-feat-card{
  grid-area:visual;
  align-self:start;
  background:rgba(13,13,12,.92);
  color:#fff;
  border-radius:22px;
  padding:26px 28px;
  display:flex;flex-direction:column;
  gap:14px;
  box-shadow:
    0 16px 48px -16px rgba(13,13,12,.30),
    0 4px 14px -6px rgba(13,13,12,.10);
  /* Opt out of GSAP's autoAlpha reveal — the card needs to read as solid dark
     from the first paint. CSS !important wins against GSAP's inline styles. */
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.hero .hero-grid .vb-feat-card .label{
  font-family:var(--ff-mono);font-size:11px;font-weight:400;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.10em;
  margin:0;
}
.hero .hero-grid .vb-feat-card .v{
  font-family:var(--ff-display);
  font-size:clamp(40px,4vw,56px);
  font-weight:500;letter-spacing:-.025em;line-height:1;
  color:#fff;margin:0;
}
.hero .hero-grid .vb-feat-card .v small{
  font-family:var(--ff-mono);font-size:13px;font-weight:400;
  color:rgba(255,255,255,.55);margin-left:8px;
  letter-spacing:.04em;text-transform:none;
}
.hero .hero-grid .vb-feat-card .desc{
  font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.78);margin:0;
}

/* Legacy .hv — re-skin if any inner page still uses it
   (most pages now use .vb-feat-card; this is just a safety net) */
.hero .hero-grid .hv{
  grid-area:visual;
  align-self:start;
  margin:0 !important;
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7) !important;
  border-radius:18px !important;
  box-shadow:0 16px 48px -16px rgba(13,13,12,.10) !important;
  aspect-ratio:auto !important;
  min-height:0 !important;
  max-height:300px;overflow:hidden;
}
.hero .hero-grid .hv .hv-bar,
.hero .hero-grid .hv .hv-foot{
  border-color:rgba(13,13,12,.08) !important;
  padding:10px 14px !important;
}

/* RIGHT col — lead paragraph below visual (with breathing room) */
.hero .hero-grid .hero-lead{
  grid-area:lead;
  align-self:start;
  margin:24px 0 0 !important;        /* extra space between dark card and lead */
  max-width:none !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
}

/* RIGHT col — action buttons just below lead */
.hero .hero-grid .hero-actions{
  grid-area:actions;
  align-self:start;
  margin:6px 0 0 !important;
  flex-wrap:wrap;gap:10px;
}
.hero .hero-grid .hero-actions .btn{
  font-size:13px;padding:11px 16px;
}

/* ───── Stats strip — Variant B "vb-meta" mono style ───── */
.hero .hero-stats,
.hero-ref .hero-stats,
.hero-kontakt .hero-stats{
  display:flex !important;
  justify-content:space-between;flex-wrap:wrap;gap:24px;
  margin-top:56px !important;padding-top:32px !important;
  border-top:1px solid rgba(13,13,12,.10) !important;
}
.hero .hero-stats .stat,
.hero-ref .hero-stats .stat,
.hero-kontakt .hero-stats .stat{
  display:flex;flex-direction:column;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase;
}
.hero .hero-stats .stat .l,
.hero-ref .hero-stats .stat .l,
.hero-kontakt .hero-stats .stat .l{
  color:var(--ink-3) !important;
  font-size:11px;font-family:var(--ff-mono);
  letter-spacing:.08em;text-transform:uppercase;
  order:1;margin:0 0 8px;line-height:1.3;
}
.hero .hero-stats .stat .n,
.hero-ref .hero-stats .stat .n,
.hero-kontakt .hero-stats .stat .n{
  font-family:var(--ff-display);font-size:clamp(22px,2vw,28px);font-weight:500 !important;
  letter-spacing:-.01em;line-height:1.1;
  color:var(--ink) !important;text-transform:none;
  order:2;margin:0;
}

/* ───── Responsive ───── */
@media(max-width:900px){
  .hero,
  .hero-ref,
  .hero-kontakt{padding:140px 0 60px !important}
  /* Collapse the 2-col editorial layout into a single stacked column.
     IMPORTANT: must also clear grid-template-areas — leaving the 2-col area
     definitions in place would phantom-anchor children that use grid-area. */
  .hero .hero-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    grid-template-areas:none !important;
    column-gap:0 !important;
    row-gap:24px !important;
  }
  /* Force ALL hero children (including .vb-feat-card with grid-area:visual)
     into a single column, source-order stacked */
  .hero .hero-grid .eye,
  .hero .hero-grid h1.hero-title,
  .hero .hero-grid .hv,
  .hero .hero-grid .hero-lead,
  .hero .hero-grid .hero-actions,
  .hero .hero-grid .vb-feat-card{
    grid-column:1 !important;
    grid-row:auto !important;
    grid-area:auto !important;
  }
  .hero-ref .hero-grid,
  .hero-kontakt .hero-grid{gap:28px !important}
  .hero .hero-stats,
  .hero-ref .hero-stats,
  .hero-kontakt .hero-stats{
    flex-direction:column;align-items:flex-start;gap:16px;
  }

  /* Tighten H1 + reset feat-card sizing for stacked single column */
  .hero .hero-grid h1.hero-title{
    font-size:clamp(40px,8vw,68px) !important;
    margin-bottom:8px !important;
  }
  .hero .hero-grid .vb-feat-card{
    width:100%;max-width:100%;
    padding:22px 24px !important;
  }
  .hero .hero-grid .vb-feat-card .v{
    font-size:clamp(36px,8vw,48px) !important;
  }
  .hero .hero-grid .vb-feat-card .desc{
    font-size:13px !important;
  }
}

/* ───── Phone tightening (≤560) ───── */
@media (max-width:560px){
  .hero,
  .hero-ref,
  .hero-kontakt{padding:120px 0 48px !important}
  .hero > .wrap,
  .hero-ref > .wrap,
  .hero-kontakt > .wrap{padding-left:18px !important;padding-right:18px !important}
  .hero .hero-grid h1.hero-title{
    font-size:clamp(34px,9vw,52px) !important;
    line-height:1.05 !important;
  }
  .hero .hero-grid .hero-lead{font-size:14px !important}
  .hero .hero-grid .hero-actions{flex-wrap:wrap;gap:8px !important}
  .hero .hero-grid .hero-actions .btn{
    flex:1 1 100%;
    text-align:center;
    justify-content:center;
  }
  .hero .hero-grid .vb-feat-card{padding:20px 22px !important}
  .hero .hero-grid .vb-feat-card .v{font-size:clamp(32px,9vw,44px) !important}
}

/* hero visual frame (shared shell for all hv variants) */
.hv{
  position:relative;aspect-ratio:5/4;border-radius:var(--radius);
  overflow:hidden;background:var(--bg);border:1px solid var(--line);
  display:grid;grid-template-rows:auto 1fr auto;
  box-shadow:0 30px 80px -30px rgba(13,13,12,.18);
}
.hv-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.hv-bar .url{
  flex:1;margin:0 12px;padding:6px 10px;border-radius:99px;
  background:var(--bg-2);color:var(--ink-2);font-size:10px;text-align:left;
}
.hv-dots{display:flex;gap:6px}
.hv-dots span{width:9px;height:9px;border-radius:99px;background:var(--line-2)}
.hv-dots span:last-child{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}
.hv-foot{
  padding:14px 18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;
  font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
}

/* — Variant: design canvas (Webdesign) — */
.hv-canvas{
  position:relative;padding:24px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg);
}
.hv-panel{
  position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  display:flex;flex-direction:column;gap:8px;padding:14px;
  box-shadow:0 4px 0 var(--line);
  will-change:transform;
}
.hv-panel .pt{height:10px;border-radius:4px;background:var(--ink)}
.hv-panel .pl{height:6px;border-radius:4px;background:var(--line-2)}
.hv-panel.p1{left:24px;top:24px;width:46%}
.hv-panel.p2{right:24px;top:96px;width:42%;background:var(--ink);color:var(--bg);box-shadow:0 4px 0 rgba(0,0,0,.15)}
.hv-panel.p2 .pt{background:var(--accent)}
.hv-panel.p2 .pl{background:rgba(255,255,255,.2)}
.hv-panel.p3{left:24px;bottom:84px;width:48%;background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 var(--accent-deep)}
.hv-panel.p3 .pt{background:var(--accent-ink)}
.hv-panel.p3 .pl{background:rgba(13,13,12,.3)}

/* ============== 7. SECTIONS ============== */

/* INTRO */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.intro-grid p{color:var(--ink-2);font-size:15px;line-height:1.50}
.intro-pull{
  font-family:var(--ff-display);font-size:clamp(24px, 2.6vw, 34px);
  font-weight:400;letter-spacing:-.025em;color:var(--ink);line-height:1.2;
  padding-left:28px;border-left:3px solid var(--accent);
}

.intro-meta{display:flex;gap:24px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.intro-meta > div{flex:1}

/* KPI BAR */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kpi-cell{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:12px;min-height:170px;transition:background .25s}
.kpi-cell:hover{background:var(--bg-2)}
.kpi-cell .mono{color:var(--ink-3)}
.kpi-cell .big{font-family:var(--ff-display);font-size:56px;font-weight:300;letter-spacing:-.04em;line-height:.95}
.kpi-cell .trend{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--accent-ink);background:var(--accent);padding:3px 10px;border-radius:99px;width:fit-content;font-weight:500;letter-spacing:.02em;font-family:var(--ff-mono)}
.kpi-cell p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.5}


/* SERVICES — 4-card grid (Webdesign) */
.svc-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.svc-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--bg);
  display:flex;flex-direction:column;gap:18px;min-height:440px;
  transition:transform .35s var(--ease-out), background .25s, border-color .25s;
  position:relative;overflow:hidden;
}
.svc-card:hover{transform:translateY(-6px);background:var(--bg-2);border-color:var(--line-2)}
.svc-card:hover .svc-arr{background:var(--accent);color:var(--accent-ink);transform:translate(4px,-4px) rotate(0deg);border-color:var(--accent)}
.svc-card.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.svc-card.dark:hover{background:#1a1a18}
.svc-card.dark p{color:rgba(255,255,255,.65)}
.svc-card.dark .svc-ph{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
.svc-ph{
  aspect-ratio:5/3;border-radius:10px;border:1px dashed var(--line-2);
  background:repeating-linear-gradient(135deg, var(--bg-2) 0 10px, var(--bg) 10px 20px);
  display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
  position:relative;overflow:hidden;
}
/* When a service-card thumb has a real image, drop the dashed-pattern placeholder */
.svc-ph:has(img){background:none;border:none}
.svc-ph img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .55s var(--ease-out);
}
.svc-card:hover .svc-ph img{transform:scale(1.04)}
.svc-top{display:flex;justify-content:space-between;align-items:center}
.svc-num{font-family:var(--ff-mono);font-size:11px;opacity:.6;letter-spacing:.08em}
.svc-arr{
  width:36px;height:36px;border-radius:99px;
  border:1px solid currentColor;
  display:grid;place-items:center;
  transition:all .3s var(--ease-out);
}
.svc-arr svg{width:13px;height:13px}
.svc-card h3{font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.svc-card p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.svc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.svc-tag{font-family:var(--ff-mono);font-size:10px;padding:4px 9px;border-radius:99px;border:1px solid currentColor;letter-spacing:.06em;text-transform:uppercase;opacity:.7}

/* SERVICES — row list (Webentwicklung, SEO) */
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:90px 1.4fr 1.4fr;
  gap:32px;padding:40px 0;border-bottom:1px solid var(--line);align-items:start;
  transition:background .25s, padding .25s;cursor:default;position:relative;
}
.svc-row::before{
  content:'';position:absolute;left:0;top:0;width:0;height:1px;
  background:var(--accent);transition:width .5s var(--ease-out);
}
.svc-row:hover{background:rgba(13,13,12,.025);padding-left:16px;padding-right:16px}
.svc-row:hover::before{width:100%}
.svc-row .svc-num{padding-top:8px;font-size:12px}
.svc-row .svc-title{font-family:var(--ff-display);font-weight:500;font-size:clamp(24px, 2.8vw, 36px);letter-spacing:-.025em;line-height:1.05}
.svc-row .svc-title small{display:block;font-size:13px;font-family:var(--ff-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:400;margin-top:12px}
.svc-row .svc-desc{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:56ch}

/* SERVICES — 2-card with items (Meta Ads) */
.svc-cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-cards-2 .svc-card{min-height:auto}
.svc-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.svc-items li{position:relative;padding:14px 0 14px 22px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.svc-items li:first-child{border-top:none}
.svc-items li::before{content:'';position:absolute;left:0;top:20px;width:8px;height:8px;border-radius:2px;background:var(--ink)}
.svc-card.dark .svc-items li{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.1)}
.svc-card.dark .svc-items li::before{background:var(--accent)}

/* CAMPAIGNS / PLATFORMS (Google Ads / Meta) */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cmp{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--bg);display:flex;flex-direction:column;gap:18px;min-height:340px;position:relative;transition:transform .35s var(--ease-out), background .25s}
.cmp:hover{transform:translateY(-6px);background:var(--bg-2)}
.cmp.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cmp.dark:hover{background:#1a1a18}
.cmp.dark p{color:rgba(255,255,255,.65)}
.cmp-top{display:flex;justify-content:space-between;align-items:center}
.cmp-num{font-family:var(--ff-mono);font-size:11px;opacity:.6;letter-spacing:.08em}
.cmp-ic{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.cmp-ic svg{width:16px;height:16px}
.cmp h3{font-size:23px;font-weight:500;letter-spacing:-.02em}
.cmp p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.cmp-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.cmp.dark .cmp-tags{border-color:rgba(255,255,255,.12)}
.cmp-tag{font-family:var(--ff-mono);font-size:10px;padding:4px 9px;border-radius:99px;border:1px solid currentColor;opacity:.65;letter-spacing:.06em;text-transform:uppercase}

/* PLATFORMS (Meta Ads) */
.plats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.plat{padding:36px 28px;background:var(--bg);display:flex;flex-direction:column;gap:14px;min-height:340px;position:relative;transition:background .25s}
.plat:hover{background:var(--bg-2)}
.plat-ic{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line)}
.plat-ic svg{width:20px;height:20px}
.plat .nm{font-family:var(--ff-display);font-size:23px;font-weight:500;letter-spacing:-.02em}
.plat .tag{font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;border:none;padding:0}
.plat p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55}
.plat.hi{background:var(--accent);color:var(--accent-ink)}
.plat.hi:hover{background:var(--accent-deep)}
.plat.hi .plat-ic{background:var(--ink);border-color:var(--ink);color:var(--accent)}
.plat.hi .tag{color:rgba(13,13,12,.7)}
.plat.hi p{color:rgba(13,13,12,.78)}

/* CASES */
.cases{display:flex;flex-direction:column;gap:32px}
.cases.grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;flex-direction:initial}
.case{
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  transition:background .25s, border-color .25s, transform .35s var(--ease-out);
}
.case:hover{transform:translateY(-4px);background:var(--bg-2);border-color:var(--line-2)}
.case.flip{direction:rtl}
.case.flip > *{direction:ltr}
.case.dark{background:var(--ink);color:var(--bg);border-color:var(--ink);min-height:440px}
.case.dark:hover{background:#1a1a18}
.case.dark p{color:rgba(255,255,255,.7)}
.case-ph{
  aspect-ratio:16/10;border-radius:12px;border:1px dashed var(--line-2);
  background:repeating-linear-gradient(45deg, var(--bg-2) 0 12px, var(--bg) 12px 24px);
  display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
  overflow:hidden;                  /* clip nested <img> to the rounded corners */
}
.case.dark .case-ph{
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px);
  border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.55);
}
/* When a real screenshot is dropped in, fill the slot and drop the
   dashed-placeholder treatment so the image stands on its own. */
.case-ph img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:top center;          /* anchor to the hero/top of the screenshot */
  border-radius:inherit;
}
.case-ph:has(img){
  border:0;background:var(--bg-2);
  padding:0;
}
.case.dark .case-ph:has(img){background:rgba(255,255,255,.04)}

/* ════════════════════════════════════════════════════════════════════
   Tabbed Switcher Showcase (Layout G) — webdesign.html Referenzen section
   Dark stage · single big preview area · thumbnail tabs to switch projects
   Linear / Vercel docs / Figma plugins vibe. Self-contained .ts-* classes.
   ════════════════════════════════════════════════════════════════════ */

/* Section breaks out as a dark island in the middle of the cream page */
.cases-tab-stage{
  background:#0a0a09;color:#fff;
  position:relative;overflow:hidden;
  margin:48px 0;padding:96px 0 64px !important;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cases-tab-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(201,255,59,.10) 0%,transparent 60%);
}
.cases-tab-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(201,255,59,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(201,255,59,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 50% at 50% 50%,#000 0%,transparent 80%);
}
.cases-tab-stage > .wrap{position:relative;z-index:2}

/* Section head: H2 + pager */
.cases-tab-stage .ts-head{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;
  margin-bottom:32px;
}
.ts-eye{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:6px 12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:99px;
  margin-bottom:18px;
}
.ts-pulse{
  display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
  animation:tsPulse 1.6s ease-in-out infinite;
}
@keyframes tsPulse{0%,100%{opacity:1}50%{opacity:.4}}
.cases-tab-stage .ts-head h2{
  font-family:var(--ff-display);font-weight:300;
  font-size:clamp(36px,4vw,56px);letter-spacing:-.035em;line-height:1.05;
  margin:0;color:#fff;max-width:22ch;
}
.cases-tab-stage .ts-head h2 em{
  font-family:'Fraunces','Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:400;color:var(--accent);
}
.ts-pager{
  font-family:var(--ff-mono);font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.1em;
}
.ts-pager strong{color:var(--accent);font-weight:500}

/* Big stage area: holds the active project panel.
   scroll-margin-top gives the smooth scroll a clean offset under the floating nav. */
.ts-stage{
  position:relative;margin-bottom:32px;
  scroll-margin-top:90px;
}
.ts-screen{
  display:none;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(24px) saturate(1.2);
  -webkit-backdrop-filter:blur(24px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;overflow:hidden;
  grid-template-columns:1.4fr .8fr;gap:0;min-height:520px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.6);
}
/* Smoother fade-in: longer easing curve, subtle slide + scale + image-zoom-in */
.ts-screen.is-active{
  display:grid;
  animation:tsFadeIn .65s cubic-bezier(.16,1,.3,1) both;
}
.ts-screen.is-active .ts-shot img{
  animation:tsShotIn 1.1s cubic-bezier(.16,1,.3,1) both;
}
.ts-screen.is-active .ts-body > *{
  animation:tsBodyIn .65s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(80ms + var(--i, 0) * 50ms);
}
.ts-screen.is-active .ts-body > :nth-child(1){--i:0}
.ts-screen.is-active .ts-body > :nth-child(2){--i:1}
.ts-screen.is-active .ts-body > :nth-child(3){--i:2}
.ts-screen.is-active .ts-body > :nth-child(4){--i:3}
.ts-screen.is-active .ts-body > :nth-child(5){--i:4}
@keyframes tsFadeIn{
  0%  {opacity:0;transform:translateY(10px) scale(.995)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes tsShotIn{
  0%  {transform:scale(1.04);opacity:.7}
  100%{transform:scale(1);opacity:1}
}
@keyframes tsBodyIn{
  0%  {opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
/* Respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  .ts-screen.is-active,
  .ts-screen.is-active .ts-shot img,
  .ts-screen.is-active .ts-body > *{animation:none}
}
.ts-shot{
  position:relative;aspect-ratio:auto;height:100%;min-height:520px;
  border-right:1px solid rgba(255,255,255,.06);overflow:hidden;
  background:rgba(255,255,255,.02);
}
.ts-shot img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
}
.ts-body{
  padding:48px;display:flex;flex-direction:column;gap:18px;justify-content:center;
}
.ts-num{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.ts-body h3{
  font-family:var(--ff-display);font-size:32px;font-weight:500;letter-spacing:-.025em;
  line-height:1.15;margin:0;color:#fff;
}
.ts-body h3 em{
  font-family:'Fraunces','Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:400;color:var(--accent);
}
.ts-body p{
  font-size:15px;color:rgba(255,255,255,.7);line-height:1.65;margin:0;max-width:38ch;
}
.ts-tags{display:flex;gap:6px;flex-wrap:wrap}
.ts-tags span{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.85);padding:4px 10px;border-radius:99px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
}
.ts-live{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  margin-top:6px;padding:14px 22px;border-radius:99px;
  background:var(--accent);color:var(--ink);
  font-family:var(--ff-display);font-size:14px;font-weight:500;
  text-decoration:none;
  transition:transform .25s var(--ease-out),box-shadow .35s var(--ease-out);
}
.ts-live:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -8px var(--accent-glow);
}
.ts-live svg{width:14px;height:14px}

/* Thumbnail tabs row — 3-up grid (handles 3 or 6 cases nicely) */
.ts-tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.ts-tab{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  padding:0;color:#fff;text-align:left;font-family:inherit;
  transition:
    border-color .35s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .4s var(--ease-out),
    background .35s var(--ease-out);
  position:relative;
}
.ts-tab:hover{
  border-color:rgba(255,255,255,.22);
  transform:translateY(-3px);
  background:rgba(255,255,255,.05);
}
.ts-tab:active{transform:translateY(-1px) scale(.99);transition-duration:.12s}
.ts-tab.is-active{
  border-color:var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 12px 32px -10px var(--accent-glow),
    0 0 24px -4px rgba(201,255,59,.15);
  background:rgba(201,255,59,.04);
}
.ts-tab .ts-thumb img{
  transition:transform .8s var(--ease-out),filter .35s var(--ease-out);
  filter:saturate(.85) brightness(.9);
}
.ts-tab:hover .ts-thumb img{
  transform:scale(1.04);
  filter:saturate(1) brightness(1);
}
.ts-tab.is-active .ts-thumb img{
  filter:saturate(1.05) brightness(1.05);
}
.ts-thumb{
  aspect-ratio:16/10;overflow:hidden;background:rgba(255,255,255,.04);
}
.ts-thumb img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
}
.ts-tab .ts-info{
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.ts-tab .ts-label{
  font-family:var(--ff-display);font-size:13.5px;font-weight:500;color:#fff;letter-spacing:-.01em;
}
.ts-tab .ts-num-sm{
  font-family:var(--ff-mono);font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.1em;
}
.ts-tab.is-active .ts-num-sm{color:var(--accent)}

/* Responsive */
@media(max-width:1100px){
  .ts-tabs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .cases-tab-stage{margin:32px 0;padding:64px 0 48px !important}
  .cases-tab-stage .ts-head{grid-template-columns:1fr;gap:18px}
  .ts-screen{grid-template-columns:1fr;min-height:auto}
  .ts-shot{min-height:auto;aspect-ratio:16/10;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .ts-body{padding:32px}
  .ts-body h3{font-size:24px}
  .ts-tabs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ts-tabs{grid-template-columns:1fr}
}
.case h3{font-size:clamp(22px, 2.4vw, 32px);letter-spacing:-.025em;line-height:1.1;margin-bottom:14px}
.case p{color:var(--ink-2);font-size:15px;max-width:44ch;margin-bottom:18px}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.case-metrics{display:flex;gap:28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.case.dark .case-metrics{border-color:rgba(255,255,255,.12)}
.case-metrics .m .v{font-family:var(--ff-display);font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.15;white-space:nowrap}
.case-metrics .m .v.accent{color:var(--accent-ink);background:var(--accent);padding:2px 10px;border-radius:7px;display:inline-block}
.case-metrics .m .k{font-size:11px;color:var(--ink-3);font-family:var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.case.dark .case-metrics .m .k{color:rgba(255,255,255,.5)}

/* EU-compliant disclaimer note below the cases block */
.cases-note{
  margin:32px 0 0;
  padding:14px 18px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-3);text-transform:none;
  background:rgba(13,13,12,.04);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:center;
  line-height:1.5;
}
.case-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding-top:18px;border-top:1px solid var(--line);color:var(--ink)}
.case.dark .case-link{color:var(--bg);border-color:rgba(255,255,255,.12)}
.case-link svg{width:14px;height:14px;transition:transform .3s var(--ease-out)}
.case-link:hover svg{transform:translateX(4px)}

/* WHY BAND (dark hero band) */
.why-band, .roas-band, .call-band{
  background:var(--ink);color:var(--bg);border-radius:var(--radius-lg);
  padding:clamp(36px, 5vw, 72px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  position:relative;overflow:hidden;
}
.why-band::before, .roas-band::before, .call-band::before{
  content:'';position:absolute;left:-80px;bottom:-80px;width:300px;height:300px;
  border-radius:99px;background:var(--accent);opacity:.18;filter:blur(60px);
}
.why-band h2, .roas-band h2{font-size:clamp(32px, 4.6vw, 56px);font-weight:400;letter-spacing:-.035em;line-height:1.05;max-width:20ch;font-family:var(--ff-display)}
.why-band h2 em, .roas-band h2 em{font-style:italic;font-weight:300;color:var(--accent)}
.why-band p, .roas-band p{font-size:16px;color:rgba(255,255,255,.72);max-width:52ch;margin-top:20px;line-height:1.55}
.why-band .btn, .roas-band .btn, .call-band .btn{margin-top:24px}

/* call-band specific */
.call-band h3{font-family:var(--ff-display);font-size:clamp(28px, 3.6vw, 44px);font-weight:400;letter-spacing:-.03em;line-height:1.05;max-width:22ch;position:relative;z-index:2}
.call-band h3 em{font-style:italic;font-weight:300;color:var(--accent)}
.call-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.call-list li{display:flex;gap:12px;align-items:start;font-size:15px;color:rgba(255,255,255,.85);padding:14px 0;border-top:1px solid rgba(255,255,255,.1)}
.call-list li:first-child{border-top:none;padding-top:0}
.call-list .tick{width:24px;height:24px;border-radius:99px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.call-list .tick svg{width:12px;height:12px}

.why-visual{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);padding:24px;
  background:rgba(255,255,255,.03);
  display:flex;flex-direction:column;justify-content:space-between;
}

/* rank chart inside dark band */
.rank-chart{display:flex;gap:8px;align-items:end;height:60%;padding:12px 0}
.rank-chart .bar{flex:1;background:rgba(255,255,255,.18);border-radius:4px 4px 0 0;position:relative;transition:background .3s, transform .3s var(--ease-out);transform-origin:bottom}
.rank-chart .bar:hover{transform:scaleY(1.05)}
.rank-chart .bar.hi{background:var(--accent);box-shadow:0 0 16px var(--accent-glow)}
.rank-chart .bar::after{content:attr(data-l);position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-family:var(--ff-mono);font-size:9px;color:rgba(255,255,255,.5);letter-spacing:.08em}
.why-visual .l-top{display:flex;justify-content:space-between;color:rgba(255,255,255,.6);font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.why-visual .l-bot{font-family:var(--ff-mono);font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase;margin-top:24px}

/* funnel inside ROAS band */
.funnel{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);padding:24px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.funnel-step{padding:12px 16px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:transform .3s var(--ease-out)}
.funnel-step:hover{transform:translateX(4px)}
.funnel-step .n{font-family:var(--ff-display);font-size:18px;font-weight:500;letter-spacing:-.02em;text-transform:none}
.fs1{background:rgba(255,255,255,.18);width:100%}
.fs2{background:rgba(255,255,255,.14);width:82%;align-self:flex-start}
.fs3{background:rgba(255,255,255,.10);width:62%;align-self:flex-start}
.fs4{background:var(--accent);color:var(--accent-ink);width:42%;align-self:flex-start;box-shadow:0 6px 20px -6px var(--accent-glow)}

/* PROCESS — grid stepper */
.proc{
  display:grid;grid-template-columns:repeat(6, 1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.proc.cols-5{grid-template-columns:repeat(5,1fr)}
.proc.cols-3{grid-template-columns:repeat(3,1fr)}
.pstep{
  padding:32px 24px 36px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:18px;min-height:280px;
  position:relative;transition:background .3s, transform .3s var(--ease-out);
}
.pstep:last-child{border-right:none}
.pstep:hover{background:var(--bg-2)}
.pstep .pn{
  font-family:var(--ff-display);font-size:54px;font-weight:300;letter-spacing:-.04em;
  color:var(--ink);line-height:1;
  display:flex;align-items:baseline;gap:6px;
}
.pstep .pn .slash{font-size:14px;color:var(--ink-3);font-weight:400}
.pstep h4{font-size:18px;font-weight:500;letter-spacing:-.01em}
.pstep p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}
.pstep .phase-ico, .pstep .dot{
  position:absolute;top:24px;right:22px;width:28px;height:28px;border-radius:99px;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);
}
.pstep .phase-ico svg{width:13px;height:13px}
.pstep .dot{width:10px;height:10px;border-radius:99px;background:var(--ink);border:none}
.pstep.hi{background:var(--accent);color:var(--accent-ink)}
.pstep.hi .pn{color:var(--accent-ink)}
.pstep.hi p{color:rgba(13,13,12,.85)}
.pstep.hi .phase-ico, .pstep.hi .dot{background:var(--accent-ink);color:var(--accent);border-color:rgba(0,0,0,.2)}
.pstep.hi .dot{background:var(--accent-ink)}

/* WHY GRID — 6 cards (Webdesign so-grid, others why-grid) */
.so-grid, .why-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.so, .why{
  background:var(--bg);padding:36px;min-height:240px;
  display:flex;flex-direction:column;gap:16px;
  transition:background .3s;
}
.so:hover, .why:hover{background:var(--bg-2)}
.so-top, .why-head{display:flex;justify-content:space-between;align-items:flex-start}
.so-big{font-family:var(--ff-display);font-size:64px;font-weight:300;letter-spacing:-.04em;line-height:.9;color:var(--ink)}
.so-ico, .why-head .ic{width:36px;height:36px;border-radius:8px;background:var(--ink);color:var(--accent);display:grid;place-items:center}
.so-ico svg, .why-head .ic svg{width:14px;height:14px}
.why-head .ic{background:var(--accent);color:var(--accent-ink)}
.so h4, .why h4{font-size:19px;font-weight:500;letter-spacing:-.015em}
.so p, .why p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55}
.why-head .n{font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3)}

/* PARTNERSHIP — 3 (Webdesign pt) */
.pt-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px}
.pt-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:36px;background:var(--bg);
  display:flex;flex-direction:column;gap:18px;min-height:280px;position:relative;
  transition:background .25s, transform .35s var(--ease-out);
}
.pt-card:hover{background:var(--bg-2);transform:translateY(-4px)}
.pt-card .pt-n{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);letter-spacing:.08em}
.pt-card h4{font-size:24px;font-weight:500;letter-spacing:-.02em}
.pt-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0}
.pt-card .spark{position:absolute;right:28px;top:28px;width:10px;height:10px;border-radius:99px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}

/* TECH STACK chips (Webentwicklung) */
.stack{display:flex;gap:10px;flex-wrap:wrap;padding:24px 0}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:99px;border:1px solid var(--line-2);
  font-size:14px;background:var(--bg);
  transition:transform .25s var(--ease-out), background .25s, border-color .25s;
}
.chip:hover{transform:translateY(-3px);background:var(--bg-2);border-color:var(--ink)}
.chip .sq{
  width:22px;height:22px;border-radius:6px;background:var(--ink);color:var(--accent);
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  display:grid;place-items:center;
}
.chip.emph{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.emph .sq{background:var(--accent);color:var(--accent-ink)}
.chip.emph:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.emph:hover .sq{background:var(--ink);color:var(--accent)}

/* WHY ROW — editorial 2-up (Meta Ads) */
.why-list{border-top:1px solid var(--line)}
.why-row{display:grid;grid-template-columns:100px 1.2fr 1.8fr;gap:40px;padding:40px 0;border-bottom:1px solid var(--line);align-items:start;transition:background .25s}
.why-row:hover{background:rgba(13,13,12,.025)}
.why-n{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);padding-top:8px;letter-spacing:.06em}
.why-title{font-family:var(--ff-display);font-weight:500;font-size:clamp(22px, 2.4vw, 32px);letter-spacing:-.025em;line-height:1.1}
.why-desc{color:var(--ink-2);font-size:15px;line-height:1.65;max-width:56ch}

/* CLIENTS strip (Meta Ads) */
.clients{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.client{background:var(--bg);padding:32px;display:flex;gap:18px;align-items:start;transition:background .25s}
.client:hover{background:var(--bg-2)}
.client .ic{width:38px;height:38px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;color:var(--ink)}
.client .ic svg{width:16px;height:16px}
.client h4{font-size:16px;font-weight:500;letter-spacing:-.01em;margin-bottom:4px}
.client p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0}

/* REVIEWS */
.rev-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px;flex-wrap:wrap}
.rev-score{display:flex;align-items:center;gap:18px}
.rev-score .big{font-family:var(--ff-display);font-size:64px;font-weight:400;letter-spacing:-.03em;line-height:1}
.rev-score .stars{display:flex;gap:2px}
.rev-score .stars svg{width:18px;height:18px;fill:var(--ink)}
.rev-score .src{font-size:13px;color:var(--ink-3);margin-top:6px}
.revs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.revs.cols-3{grid-template-columns:repeat(3,1fr)}
.rev{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--bg);display:flex;flex-direction:column;gap:22px;transition:background .25s, transform .35s var(--ease-out)}
.rev:hover{background:var(--bg-2);transform:translateY(-3px)}
.rev-top{display:flex;justify-content:space-between;align-items:start;color:var(--ink-3)}
.rev-top .stars{display:flex;gap:2px}
.rev-top .stars svg{width:13px;height:13px;fill:var(--ink)}
.rev q{font-family:var(--ff-display);font-size:18px;line-height:1.45;letter-spacing:-.015em;color:var(--ink);quotes:none}
.rev-author{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line);margin-top:auto}
.av{
  width:42px;height:42px;border-radius:99px;
  background:var(--bg-2);border:1px solid var(--line);
  display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:500;font-size:14px;color:var(--ink-2);
  flex-shrink:0;
  overflow:hidden;
}
/* Photo inside avatar circle — fills cleanly, crops if needed */
.av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av-lg{width:48px;height:48px;font-size:16px}
.rev-author .who{font-size:14px;font-weight:500}
.rev-author .biz{font-size:13px;color:var(--ink-3)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 2fr;gap:64px}
.faq-aside{position:sticky;top:90px;height:fit-content;padding:32px;border-radius:var(--radius);background:var(--ink);color:var(--bg);display:flex;flex-direction:column;gap:18px;overflow:hidden}
.faq-aside::before{content:'';position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:99px;background:var(--accent);opacity:.15;filter:blur(40px)}
.faq-aside h3{font-size:28px;font-weight:400;letter-spacing:-.02em;line-height:1.15;position:relative;z-index:2}
.faq-aside p{font-size:14px;opacity:.7;margin:0;position:relative;z-index:2}
.faq-aside .btn{align-self:flex-start;position:relative;z-index:2}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
details.q{border-bottom:1px solid var(--line);padding:22px 0}
details.q summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;align-items:start;
  font-family:var(--ff-display);font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--ink);
}
details.q summary::-webkit-details-marker{display:none}
details.q .plus{
  width:32px;height:32px;border-radius:99px;border:1px solid var(--line-2);
  display:grid;place-items:center;flex-shrink:0;
  transition:transform .3s var(--ease-out), background .3s, border-color .3s;color:var(--ink);
}
details.q[open] .plus{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px var(--accent-glow)}
details.q .plus svg{width:13px;height:13px}
details.q .a{padding-top:18px;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:70ch}


/* ============== 8. CTA + FOOTER ============== */
.cta-section{padding:clamp(56px, 7vw, 96px) 0;border-bottom:none}

.cta{
  background:var(--ink);color:var(--bg);border-radius:var(--radius-lg);
  padding:clamp(36px, 5vw, 80px);
  display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:end;
  position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;right:-100px;top:-100px;width:380px;height:380px;
  border-radius:99px;background:var(--accent);opacity:.2;filter:blur(60px);
  animation:ambient 12s ease-in-out infinite alternate;
}
.cta::after{
  content:'';position:absolute;left:-100px;bottom:-100px;width:240px;height:240px;
  border-radius:99px;background:var(--accent);opacity:.1;filter:blur(50px);
}
.cta h2{font-family:var(--ff-display);font-size:clamp(40px, 5.6vw, 80px);font-weight:400;letter-spacing:-.04em;line-height:1;max-width:18ch;position:relative;z-index:2;margin-top:24px}
.cta h2 em{font-style:italic;font-weight:300;color:var(--accent)}
.cta-contact{display:flex;flex-direction:column;gap:14px;font-size:14px;position:relative;z-index:2}
.cta-contact .row{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.72)}
.cta-contact .row a{color:var(--bg)}
.cta-contact .row a:hover{color:var(--accent)}
.cta-contact .row svg{width:14px;height:14px}
.cta-contact .btn{margin-top:20px;align-self:flex-start}

.founder{display:flex;align-items:center;gap:14px;padding-top:24px;margin-top:24px;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:2}
.founder .av{background:var(--bg-2);color:var(--ink-2);border-color:transparent}
.founder .n{font-size:14px;font-weight:500}
.founder .r{font-size:12px;opacity:.6}

footer{padding:80px 0 40px;background:var(--bg);position:relative;z-index:2}

.foot-marquee{
  overflow:hidden;width:100%;display:flex;gap:40px;
  margin-bottom:64px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.foot-marquee .track{
  display:flex;gap:40px;flex-shrink:0;
  font-family:var(--ff-display);font-size:clamp(40px, 6vw, 80px);
  font-weight:300;letter-spacing:-.04em;color:var(--ink);
  white-space:nowrap;
  animation:marquee 35s linear infinite;
  align-items:center;
}
.foot-marquee .track span{display:inline-flex;align-items:center}
.foot-marquee .track span:nth-child(2n){color:var(--ink-3)}
@keyframes marquee{
  to{transform:translateX(-100%)}
}

.foot{display:grid;grid-template-columns:1.6fr repeat(3, 1fr);gap:48px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot h5{font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:18px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:14px;color:var(--ink-2);transition:color .2s, padding .2s}
.foot ul a:hover{color:var(--ink);padding-left:6px}
.foot .office{display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--ink-2);max-width:32ch}
.foot .office .brand{margin-bottom:6px;font-size:20px}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12px;color:var(--ink-3);gap:16px;flex-wrap:wrap}
.foot-bot .socials{display:flex;gap:6px}
.foot-bot .socials a{width:36px;height:36px;border-radius:99px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);transition:background .25s, color .25s, border-color .25s, transform .25s}
.foot-bot .socials a:hover{background:var(--ink);color:var(--accent);border-color:var(--ink);transform:translateY(-2px)}
.foot-bot .socials a svg{width:15px;height:15px}


/* ============== 9. TWEAKS PANEL ============== */
#tweaks{position:fixed;right:20px;bottom:20px;z-index:var(--z-tweak);display:none;background:var(--ink);color:var(--bg);border-radius:14px;padding:20px;width:280px;font-size:13px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
#tweaks.on{display:block;animation:tweakIn .3s var(--ease-out)}
@keyframes tweakIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#tweaks h6{margin:0 0 14px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;font-weight:500}
#tweaks .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#tweaks .swatches{display:flex;gap:6px}
#tweaks .sw{width:24px;height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .15s}
#tweaks .sw:hover{transform:scale(1.1)}
#tweaks .sw.active{outline:2px solid var(--accent);outline-offset:2px}
#tweaks .hint{font-family:var(--ff-mono);font-size:10px;opacity:.5;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);letter-spacing:.06em}


/* ============== 10. MOTION / REVEAL UTILITIES ==============
   Reveal animations are OPT-IN via <body class="js-ready"> added by main.js.
   This way, if JS fails to load (file://, blocker, etc.) all content stays visible.
*/
@media (prefers-reduced-motion: no-preference){
  body.js-ready [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
  body.js-ready [data-reveal].in{opacity:1;transform:none}
  body.js-ready [data-reveal-stagger] > *{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
  body.js-ready [data-reveal-stagger].in > *{opacity:1;transform:none}
  body.js-ready [data-reveal-stagger].in > *:nth-child(1){transition-delay:.05s}
  body.js-ready [data-reveal-stagger].in > *:nth-child(2){transition-delay:.12s}
  body.js-ready [data-reveal-stagger].in > *:nth-child(3){transition-delay:.19s}
  body.js-ready [data-reveal-stagger].in > *:nth-child(4){transition-delay:.26s}
  body.js-ready [data-reveal-stagger].in > *:nth-child(5){transition-delay:.33s}
  body.js-ready [data-reveal-stagger].in > *:nth-child(6){transition-delay:.40s}
}
@media (prefers-reduced-motion: reduce){
  body::after{animation:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}



/* ============================================================
   HOME PAGE — dark canvas hero & home-specific blocks
   ============================================================ */

/* kill the global ambient glow on dark home (hero has its own) */
body::after{display:none}

/* HERO — dark canvas */
.hero-home{
  background:var(--ink);color:var(--bg);
  min-height:90vh;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(80px,9vw,120px) 0 clamp(96px,10vw,140px);
  border-bottom:none;

  /* Right-offset that respects the .wrap edge (so absolute children
     like .hero-perf-card and .hero-trust don't escape past 1400px). */
  --hero-edge: max(clamp(20px, 3vw, 40px), calc((100vw - var(--maxw)) / 2 + clamp(20px, 3vw, 40px)));
}
.hero-home::before{
  content:'';position:absolute;
  right:-15%;top:-15%;width:70vw;height:90vh;
  background:radial-gradient(circle, var(--accent) 0%, transparent 60%);
  filter:blur(110px);opacity:.45;pointer-events:none;
  animation:ambient 16s ease-in-out infinite alternate;
}
.hero-home::after{
  content:'';position:absolute;
  left:-15%;bottom:-25%;width:55vw;height:70vh;
  background:radial-gradient(circle, var(--accent) 0%, transparent 65%);
  filter:blur(100px);opacity:.22;pointer-events:none;
}
.hero-home > .wrap{position:relative;z-index:2;width:100%}

.hero-home .hero-meta{color:rgba(255,255,255,.5);margin-bottom:20px}
.hero-home .hero-meta .here{color:var(--bg)}
.hero-home .eye{color:rgba(255,255,255,.78);background:rgba(255,255,255,.06)}
.hero-home .eye::before{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}

.hero-home h1{
  font-family:var(--ff-display);
  font-size:clamp(46px,6.0vw,140px);
  font-weight:600;letter-spacing:-.050em;line-height:1.3;
  max-width:14ch;margin-top:15px;
}
.hero-home h1 em{font-style:italic;font-weight:300;color:rgba(255,255,255,.42);display:block;margin-top:.06em}
.hero-home h1 .mark{
  background:var(--accent);color:var(--accent-ink);
  display:inline-block;padding:0 .14em;border-radius:10px;
  box-shadow:0 0 0 6px var(--accent-glow);
}

.hero-home .hero-lead{
color:rgba(255,255,255,.7);font-size:16px;line-height:1.65; max-width:70ch;margin-top:10px;
}
.hero-home .hero-actions{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}

/* On desktop reserve right column for the perf card */
@media(min-width:1181px){
  .hero-home > .wrap{padding-right:clamp(400px,30vw,460px)}
}
.hero-home .btn-primary{background:var(--accent);color:var(--accent-ink)}
.hero-home .btn-primary:hover{background:var(--bg);color:var(--ink);box-shadow:0 14px 32px -10px rgba(255,255,255,.18)}
.hero-home .btn-ghost{border-color:rgba(255,255,255,.3);color:var(--bg)}
.hero-home .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--bg)}

/* ===== Live Performance Card — floating right side of dark hero ===== */
.hero-perf-card{
  position:absolute;
  right:var(--hero-edge);
  top:50%;transform:translateY(-50%);
  width:clamp(320px,26vw,380px);
  padding:22px 22px 24px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  z-index:2;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.6),
    0 0 70px -20px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation:hpcFloat 6s ease-in-out infinite alternate;
}
@keyframes hpcFloat{
  0%{transform:translateY(calc(-50% - 6px))}
  100%{transform:translateY(calc(-50% + 6px))}
}

.hpc-head{display:flex;align-items:center;gap:10px}
.hpc-dot{
  width:8px;height:8px;border-radius:99px;background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
  animation:pulse 1.6s ease-in-out infinite;
}
.hpc-label{font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}

.hpc-stats{display:flex;flex-direction:column;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.hpc-stat{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.hpc-v{font-family:var(--ff-display);font-size:26px;font-weight:500;letter-spacing:-.025em;color:var(--bg);line-height:1;flex-shrink:0}
.hpc-v.accent{color:var(--accent-ink);background:var(--accent);padding:1px 8px;border-radius:6px;display:inline-block;line-height:1.15}
.hpc-k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:right;line-height:1.4}

.hpc-chart{display:flex;flex-direction:column;gap:10px}
.hpc-chart-label{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hpc-trend{color:var(--accent);font-weight:500}
.hpc-bars{display:flex;align-items:flex-end;gap:5px;height:54px}
.hpc-bars span{
  flex:1;background:rgba(255,255,255,.18);border-radius:3px 3px 0 0;
  transform-origin:bottom;animation:hpcBar 1.1s var(--ease-out) backwards;
}
.hpc-bars span.hi{background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.hpc-bars span:nth-child(1){animation-delay:.10s}
.hpc-bars span:nth-child(2){animation-delay:.18s}
.hpc-bars span:nth-child(3){animation-delay:.26s}
.hpc-bars span:nth-child(4){animation-delay:.34s}
.hpc-bars span:nth-child(5){animation-delay:.42s}
.hpc-bars span:nth-child(6){animation-delay:.50s}
.hpc-bars span:nth-child(7){animation-delay:.58s}
.hpc-bars span:nth-child(8){animation-delay:.66s}
@keyframes hpcBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media(max-width:1180px){
  .hero-perf-card{display:none}
}

/* ===== scroll cue — centered at bottom of dark hero ===== */
.hero-home-cue{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);z-index:3;
  pointer-events:none;
}
.hero-home-cue .line{
  width:1px;height:42px;
  background:linear-gradient(to bottom, transparent, var(--accent));
  animation:scrollCue 2s ease-in-out infinite;transform-origin:top;
}
@keyframes scrollCue{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(max-width:760px){
  .hero-home-cue{display:none}
}

/* ===== AI pill ===== */
.ai-pill{
  display:inline-flex;align-items:center;gap:14px;
  padding:8px 18px 8px 8px;border-radius:99px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
  font-size:13px;letter-spacing:-.005em;font-weight:500;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  width:fit-content;
}
.ai-pill .ai-icons{display:flex;align-items:center}
.ai-pill .ai-ic{
  width:28px;height:28px;border-radius:99px;
  display:grid;place-items:center;
  border:2px solid var(--ink);
  margin-left:-9px;color:#fff;
  position:relative;
}
.ai-pill .ai-ic:first-child{margin-left:0}
.ai-pill .ai-ic svg{width:14px;height:14px}
.ai-pill .ai-ic.claude{background:#cc785c;z-index:3}
.ai-pill .ai-ic.chatgpt{background:#10a37f;z-index:2}
.ai-pill .ai-ic.gemini{background:linear-gradient(135deg,#4285f4,#9b72cb 60%,#d96570);z-index:1}

/* ===== Hero trust cluster (Google Ads Cert + Reviews) — bottom-right, single row ===== */
.hero-trust{
  position:absolute;right:var(--hero-edge);bottom:clamp(28px,4vw,40px);
  display:flex;flex-direction:row;gap:12px;align-items:center;
  z-index:3;
}
.trust-badge{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 10px;border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--bg);text-decoration:none;
  transition:background .25s, border-color .25s, transform .25s;
}
.trust-badge:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}

.g-cert-mark{
  width:36px;height:36px;border-radius:9px;
  background:var(--bg);
  display:grid;place-items:center;flex-shrink:0;
}
.g-cert-mark svg{width:20px;height:20px}
.g-cert-text{display:flex;flex-direction:column;line-height:1.25;gap:1px}
.g-cert-text .top{font-family:var(--ff-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.g-cert-text .bot{font-size:13px;font-weight:500;color:var(--bg);font-family:var(--ff-display);letter-spacing:-.01em}

.g-rev-mark{
  width:36px;height:36px;border-radius:9px;
  background:var(--bg);
  display:grid;place-items:center;flex-shrink:0;
  font-family:var(--ff-display);font-weight:600;font-size:20px;
}
.g-rev-text{display:flex;flex-direction:column;line-height:1.2;gap:3px}
.g-rev-stars{color:#fbbc04;font-size:13px;letter-spacing:2px;line-height:1}
.g-rev-meta{font-size:11px;color:rgba(255,255,255,.65);font-family:var(--ff-mono);letter-spacing:.04em}
.g-rev-meta strong{color:var(--bg);font-weight:600;font-family:var(--ff-display);letter-spacing:-.005em;font-size:12px}

@media(max-width:760px){
  .hero-trust{position:static;flex-direction:row;flex-wrap:wrap;margin-top:36px;align-items:flex-start}
}

/* ============== CEO / FOUNDER SECTION ============== */
.ceo-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;
}
.ceo-image{position:relative}
.ceo-portrait{
  aspect-ratio:1/1;
  background:
    repeating-linear-gradient(45deg, var(--bg-2) 0 14px, var(--bg) 14px 28px);
  border:1px solid var(--line);border-radius:var(--radius);
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(13,13,12,.18);
}
.ceo-portrait::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%, var(--accent-glow), transparent 55%);
  opacity:.45;pointer-events:none;
}
.ceo-portrait::after{
  content:'';position:absolute;inset:24px;
  border:1px dashed var(--line-2);border-radius:calc(var(--radius) - 6px);
  pointer-events:none;
}
.ceo-portrait img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
.ceo-portrait .ph-label{
  position:relative;z-index:3;
  font-family:var(--ff-mono);font-size:11px;
  color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
}
.ceo-portrait .ph-tag{
  position:absolute;top:24px;left:24px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}

.ceo-content{display:flex;flex-direction:column;gap:24px}
.ceo-linkedin{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:99px;
  background:var(--ink);color:var(--bg);
  width:fit-content;
  font-family:var(--ff-display);font-size:14px;font-weight:500;letter-spacing:-.005em;
  transition:background .25s, color .25s, transform .25s;
}
.ceo-linkedin:hover{background:var(--accent);color:var(--accent-ink);transform:translateY(-2px)}
.ceo-linkedin svg{width:16px;height:16px}

.ceo-content p{
  font-size:17px;color:var(--ink-2);line-height:1.7;
  margin:0;max-width:58ch;
}
.ceo-content p strong{color:var(--ink);font-weight:500}
.ceo-content p em{font-style:italic;color:var(--ink);font-weight:400}

.ceo-signature{
  display:flex;align-items:end;justify-content:space-between;gap:24px;
  padding-top:28px;border-top:1px solid var(--line);
  margin-top:8px;flex-wrap:wrap;
}
.ceo-name{
  font-family:var(--ff-display);font-size:28px;font-weight:500;
  letter-spacing:-.025em;color:var(--ink);line-height:1;
}
.ceo-name small{
  display:block;font-size:13px;color:var(--ink-3);font-family:var(--ff-mono);
  letter-spacing:.08em;text-transform:uppercase;font-weight:400;margin-top:8px;
}
.ceo-meta{display:flex;flex-direction:column;gap:6px;text-align:right;font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.ceo-meta strong{color:var(--ink);font-family:var(--ff-display);font-weight:500;font-size:14px;letter-spacing:-.005em;text-transform:none}

@media(max-width:900px){
  .ceo-grid{grid-template-columns:1fr;gap:40px}
  .ceo-portrait{max-width:480px}
}

/* HOME services — 5-row list with each row linking to service page (legacy / inner pages) */
.svc-list a.svc-row{text-decoration:none;color:inherit;cursor:pointer}
.svc-list a.svc-row:hover .svc-arr{background:var(--accent);color:var(--accent-ink);transform:translate(4px,-4px);border-color:var(--accent)}

/* ============== SERVICES — BENTO GRID (Home page) ============== */
.svc-bento{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
}
.svc-bento-card{
  border:1px solid var(--line);border-radius:18px;background:var(--bg);
  padding:28px;display:flex;flex-direction:column;gap:18px;
  transition:transform .35s var(--ease-out), background .25s, border-color .25s;
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
}
.svc-bento-card:hover{transform:translateY(-4px);background:var(--bg-2);border-color:var(--line-2)}
.svc-bento-card:hover .svc-bento-arr{background:var(--accent);color:var(--accent-ink);transform:translate(4px,-4px);border-color:var(--accent)}

/* Featured card — big dark cell on the left, spans both rows */
.svc-bento-card.featured{
  grid-column:1;grid-row:1 / 3;min-height:460px;
  background:var(--ink);color:var(--bg);border-color:var(--ink);
  padding:36px;
}
.svc-bento-card.featured:hover{background:#1a1a18}
.svc-bento-card.featured .svc-bento-num,
.svc-bento-card.featured .svc-bento-meta{color:rgba(255,255,255,.55)}
.svc-bento-card.featured p{color:rgba(255,255,255,.7)}
.svc-bento-card.featured .svc-bento-arr{border-color:rgba(255,255,255,.2);color:var(--bg)}
.svc-bento-card.featured .svc-bento-metric{border-color:rgba(255,255,255,.1)}
.svc-bento-card.featured .svc-bento-metric .v{color:var(--bg)}
.svc-bento-card.featured .svc-bento-mock{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}

.svc-bento-top{display:flex;justify-content:space-between;align-items:center}
.svc-bento-num{
  font-family:var(--ff-mono);font-size:11px;
  color:var(--ink-3);letter-spacing:.08em;
}
.svc-bento-arr{
  width:38px;height:38px;border-radius:99px;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink);
  transition:all .3s var(--ease-out);flex-shrink:0;
}
.svc-bento-arr svg{width:14px;height:14px}

.svc-bento-card h3{
  font-family:var(--ff-display);font-size:26px;font-weight:500;
  letter-spacing:-.02em;line-height:1.1;margin:0;
}
.svc-bento-card.featured h3{font-size:38px;letter-spacing:-.03em}
.svc-bento-card p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.svc-bento-meta{
  font-family:var(--ff-mono);font-size:10px;
  color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;
}

.svc-bento-mock{
  aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line);
  background:var(--bg-2);
  display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;
  position:relative;overflow:hidden;
  margin-top:auto;
}
.svc-bento-mock::before{
  content:'';position:absolute;inset:18px;
  border:1px dashed currentColor;border-radius:6px;opacity:.25;
}

.svc-bento-metric{
  display:flex;align-items:baseline;gap:12px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--line);
}
.svc-bento-metric .v{
  font-family:var(--ff-display);font-size:28px;font-weight:500;
  letter-spacing:-.025em;color:var(--ink);line-height:1;
}
.svc-bento-metric .v.acc{color:var(--accent-ink);background:var(--accent);padding:1px 8px;border-radius:6px;display:inline-block;line-height:1.15}
.svc-bento-metric .k{
  font-family:var(--ff-mono);font-size:10px;
  color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;line-height:1.35;
}

/* Responsive */
@media(max-width:1100px){
  .svc-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .svc-bento-card.featured{grid-column:1 / -1;grid-row:1;min-height:auto}
}
@media(max-width:640px){
  .svc-bento{grid-template-columns:1fr}
  .svc-bento-card{padding:24px}
  .svc-bento-card.featured{padding:28px}
  .svc-bento-card.featured h3{font-size:30px}
}

/* HOME stats strip on light bg */
.home-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:0;
}
.home-stats .cell{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:10px;min-height:170px;transition:background .25s}
.home-stats .cell:hover{background:var(--bg-2)}
.home-stats .cell .n{font-family:var(--ff-display);font-size:clamp(40px,4.4vw,60px);font-weight:300;letter-spacing:-.04em;line-height:.95;color:var(--ink)}
.home-stats .cell .n .accent{color:var(--accent-ink);background:var(--accent);padding:0 8px;border-radius:6px;display:inline-block}
.home-stats .cell .l{font-size:13px;color:var(--ink-3);line-height:1.45}
.home-stats .cell .mono{color:var(--ink-3);margin-bottom:6px}

@media(max-width:720px){
  .home-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   RESOURCES / BLOG — 3-card grid with thumbnail + category + meta
   (inspired by digidop.com)
   ============================================================ */
.res-head{
  display:flex;justify-content:space-between;align-items:end;
  gap:32px;margin-bottom:56px;flex-wrap:wrap;
}
.res-head .left h2{
  font-family:var(--ff-display);
  font-size:clamp(36px,5.2vw,68px);
  font-weight:400;letter-spacing:-.04em;line-height:1;
  max-width:18ch;margin-top:18px;
}
.res-head .left h2 em{font-style:italic;font-weight:300;color:var(--ink-3)}
.res-head .left p{color:var(--ink-2);max-width:46ch;margin-top:18px;font-size:16px;line-height:1.55}
.res-head .right{display:flex;align-items:center;gap:14px}

.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.res-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);overflow:hidden;
  transition:transform .35s var(--ease-out), border-color .25s, background .25s;
  text-decoration:none;color:inherit;
  position:relative;
}
.res-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  background:var(--bg-2);
}
.res-card:hover .res-img{transform:scale(1.04)}
.res-card:hover .res-arr{background:var(--accent);color:var(--accent-ink);transform:translate(4px,-4px);border-color:var(--accent)}

.res-img-wrap{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
/* Real cover image (loaded from blog) — fills the slot, scales on hover */
.res-img-wrap img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.res-card:hover .res-img-wrap img{transform:scale(1.04)}
.res-img{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform .6s var(--ease-out);
}
/* per-card visual variations */
.res-img.var-1{
  background:
    repeating-linear-gradient(135deg, var(--bg) 0 12px, var(--bg-2) 12px 24px);
}
.res-img.var-2{
  background:
    radial-gradient(circle at 30% 30%, var(--accent-glow) 0%, transparent 55%),
    var(--ink);
  color:rgba(255,255,255,.55);
}
.res-img.var-2::before{
  content:'';position:absolute;inset:24px;border:1px dashed rgba(255,255,255,.2);border-radius:8px;
}
.res-img.var-3{
  background:var(--accent);color:var(--accent-ink);
}
.res-img.var-3::before{
  content:'';position:absolute;inset:24px;border:1px dashed rgba(13,13,12,.25);border-radius:8px;
}

/* tiny chart/visual marks inside the visuals */
.res-img-chart{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:6px;align-items:end;height:46%}
.res-img-chart .b{width:14px;background:currentColor;border-radius:3px 3px 0 0;opacity:.55}
.res-img-chart .b.hi{opacity:1;background:var(--accent)}
.res-img.var-2 .res-img-chart .b{background:rgba(255,255,255,.4)}
.res-img.var-2 .res-img-chart .b.hi{background:var(--accent);opacity:1}

.res-cat{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--ink);color:var(--bg);
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border-radius:99px;font-weight:500;
}
.res-cat.accent{background:var(--accent);color:var(--accent-ink)}
.res-cat.light{background:var(--bg);color:var(--ink);border:1px solid var(--line)}

.res-body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.res-meta{
  display:flex;gap:10px;align-items:center;
  font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase;
}
.res-meta .dot{width:3px;height:3px;border-radius:99px;background:var(--ink-3)}
.res-card h3{
  font-family:var(--ff-display);font-size:20px;font-weight:500;
  letter-spacing:-.02em;line-height:1.25;
  color:var(--ink);
}
.res-card p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}
.res-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
}
.res-link{
  font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-display);letter-spacing:-.005em;color:var(--ink);
}
.res-arr{
  width:36px;height:36px;border-radius:99px;
  border:1px solid var(--line-2);
  display:grid;place-items:center;
  transition:all .3s var(--ease-out);
  color:var(--ink);flex-shrink:0;
}
.res-arr svg{width:13px;height:13px}

.res-cta-row{
  display:flex;justify-content:center;margin-top:56px;
  padding-top:36px;border-top:1px solid var(--line);
}

@media(max-width:1000px){
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .res-card:nth-child(3){display:none}
}
@media(max-width:640px){
  .res-grid{grid-template-columns:1fr}
  .res-card:nth-child(3){display:flex}
}

/* ============== 11. RESPONSIVE OVERRIDES ============== */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(3,1fr)}
  .so-grid, .why-grid{grid-template-columns:repeat(2,1fr)}
  .pt-grid, .cmp-grid{grid-template-columns:repeat(2,1fr)}
  .plats{grid-template-columns:repeat(2,1fr)}
  .revs.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .intro-grid{grid-template-columns:1fr;gap:32px}
  .case, .case.flip{grid-template-columns:1fr;gap:24px;direction:ltr}
  .why-band, .roas-band, .call-band{grid-template-columns:1fr;gap:36px}
  .cta{grid-template-columns:1fr;gap:36px}
  .faq{grid-template-columns:1fr;gap:32px}
  .faq-aside{position:static}
  .cases.grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-mobile{display:flex}
  /* CTA stays visible on tablet (480-860px) — moved hide rule to phone breakpoint */
  .sec-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  .pstep{min-height:220px}
}
@media (max-width:720px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .svc-grid, .pt-grid, .cmp-grid, .so-grid, .why-grid, .plats, .clients{grid-template-columns:1fr}
  .revs, .revs.cols-3{grid-template-columns:1fr}
  .proc{grid-template-columns:repeat(2,1fr)}
  .why-row{grid-template-columns:60px 1fr;gap:16px}
  .why-row .why-desc{grid-column:1 / -1}
  .svc-row{grid-template-columns:60px 1fr;gap:16px}
  .svc-row .svc-desc{grid-column:1 / -1}
  .svc-row:hover{padding-left:0;padding-right:0}
  .svc-cards-2{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:520px){
  .foot{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
}


/* ============================================================
   PAGE-SPECIFIC STYLES (extracted from inline <style> blocks)
   Each block is owned by its page; class names are unique
   per page so they don't conflict.
   ============================================================ */

/* ===== KONTAKT PAGE (kontakt.html) ===== */
/* ============== Compact dark hero (Kontakt-specific) ============== */
  .hero-kontakt{
    background:var(--ink);color:var(--bg);
    position:relative;overflow:hidden;border-bottom:none;
    padding:clamp(140px,14vw,180px) 0 clamp(56px,6vw,80px);
  }
  .hero-kontakt::before{
    content:'';position:absolute;
    right:-15%;top:-30%;width:55vw;height:80vh;
    background:radial-gradient(circle, var(--accent) 0%, transparent 60%);
    filter:blur(110px);opacity:.32;pointer-events:none;
  }
  .hero-kontakt::after{
    content:'';position:absolute;
    left:-10%;bottom:-40%;width:45vw;height:60vh;
    background:radial-gradient(circle, var(--accent) 0%, transparent 65%);
    filter:blur(100px);opacity:.18;pointer-events:none;
  }
  .hero-kontakt > .wrap{position:relative;z-index:2}
  .hero-kontakt .hero-meta{color:rgba(255,255,255,.5);margin-bottom:48px}
  .hero-kontakt .hero-meta .here{color:var(--bg)}
  .hero-kontakt .eye{color:rgba(255,255,255,.78);background:rgba(255,255,255,.06)}
  .hero-kontakt .eye::before{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
  .hero-kontakt h1{
    font-family:var(--ff-display);font-size:clamp(44px,6.4vw,88px);
    font-weight:400;letter-spacing:-.04em;line-height:.96;
    max-width:18ch;margin-top:20px;
  }
  .hero-kontakt h1 em{font-style:italic;font-weight:300;color:rgba(255,255,255,.45);display:block;margin-top:.05em}
  .hero-kontakt h1 .mark{background:var(--accent);color:var(--accent-ink);display:inline-block;padding:0 .14em;border-radius:10px;box-shadow:0 0 0 6px var(--accent-glow)}
  .hero-kontakt .hero-lead{color:rgba(255,255,255,.7);font-size:17px;max-width:58ch;margin-top:24px;line-height:1.6}
  .hero-kontakt .quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
  .hero-kontakt .quick-actions a{
    display:inline-flex;align-items:center;gap:9px;
    padding:10px 18px;border-radius:99px;
    font-family:var(--ff-display);font-size:14px;font-weight:500;letter-spacing:-.005em;
    text-decoration:none;
    transition:transform .2s, background .2s, border-color .2s;
  }
  .hero-kontakt .quick-actions a.qa-primary{background:var(--accent);color:var(--accent-ink)}
  .hero-kontakt .quick-actions a.qa-primary:hover{background:var(--bg);color:var(--ink);transform:translateY(-2px)}
  .hero-kontakt .quick-actions a.qa-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.12)}
  .hero-kontakt .quick-actions a.qa-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
  .hero-kontakt .quick-actions a svg{width:14px;height:14px}

  /* ============== Kontakt main section: 2-col grid (info + form) ============== */
  .kontakt-grid{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;
  }

  .kontakt-info{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}

  .info-card{
    padding:28px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--bg);display:flex;flex-direction:column;gap:18px;
    transition:background .25s, border-color .25s;
  }
  .info-card:hover{background:var(--bg-2)}
  .info-card.dark{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .info-card.dark:hover{background:#1a1a18}
  .info-card .ic-label{
    font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;
  }
  .info-card.dark .ic-label{color:rgba(255,255,255,.55)}
  .info-card .ic-label .dot{width:6px;height:6px;border-radius:99px;background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}
  .info-card h3{font-family:var(--ff-display);font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
  .info-card .info-row{display:flex;align-items:start;gap:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
  .info-card.dark .info-row{color:rgba(255,255,255,.85)}
  .info-card .info-row svg{width:17px;height:17px;flex-shrink:0;margin-top:2px;color:var(--ink-3)}
  .info-card.dark .info-row svg{color:rgba(255,255,255,.5)}
  .info-card .info-row a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s, border-color .2s}
  .info-card.dark .info-row a{border-bottom-color:rgba(255,255,255,.2)}
  .info-card .info-row a:hover{color:var(--accent);border-bottom-color:var(--accent)}

  .info-card .founder-mini{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);margin-top:6px}
  .info-card .founder-mini .av{
    width:46px;height:46px;border-radius:99px;
    background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);
    display:grid;place-items:center;
    font-family:var(--ff-display);font-weight:500;font-size:15px;flex-shrink:0;
  }
  .info-card .founder-mini .name{font-family:var(--ff-display);font-size:15px;font-weight:500;color:var(--bg)}
  .info-card .founder-mini .role{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}

  .info-socials{display:flex;gap:8px;flex-wrap:wrap}
  .info-socials a{
    width:38px;height:38px;border-radius:99px;border:1px solid var(--line);
    display:grid;place-items:center;color:var(--ink-2);
    transition:all .25s var(--ease-out);
  }
  .info-socials a:hover{background:var(--ink);color:var(--accent);border-color:var(--ink);transform:translateY(-2px)}
  .info-socials a svg{width:15px;height:15px}

  /* ============== Form ============== */
  .kontakt-form{
    padding:clamp(28px,3vw,40px);border:1px solid var(--line);border-radius:var(--radius);
    background:var(--bg);display:flex;flex-direction:column;gap:22px;
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .form-row.full{grid-template-columns:1fr}
  .form-group{display:flex;flex-direction:column;gap:8px}
  .form-group label{
    font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);font-weight:500;
  }
  .form-group label .req{color:var(--accent-deep);margin-left:3px;font-weight:600}
  .form-group input,
  .form-group select,
  .form-group textarea{
    font-family:var(--ff-sans);font-size:15px;color:var(--ink);
    padding:13px 16px;border:1px solid var(--line);border-radius:10px;
    background:var(--bg-2);
    transition:border-color .25s, background .25s, box-shadow .25s;
    width:100%;
    line-height:1.4;
  }
  .form-group input::placeholder,
  .form-group textarea::placeholder{color:var(--ink-3);opacity:.7}
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus{
    outline:none;border-color:var(--accent);background:var(--bg);
    box-shadow:0 0 0 4px var(--accent-glow);
  }
  .form-group textarea{resize:vertical;min-height:130px;font-family:inherit}
  .form-group select{
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b6b62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3l4 4 4-4'/></svg>");
    background-repeat:no-repeat;background-position:right 16px center;
    padding-right:40px;cursor:pointer;
  }

  /* Service pill checkboxes */
  .svc-checks{display:flex;flex-wrap:wrap;gap:8px}
  .svc-check{position:relative;cursor:pointer;user-select:none}
  .svc-check input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
  .svc-check span{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 16px;border-radius:99px;
    background:var(--bg-2);border:1px solid var(--line);
    font-family:var(--ff-display);font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);
    transition:all .25s;
  }
  .svc-check:hover span{border-color:var(--ink-3);color:var(--ink)}
  .svc-check input:checked + span{
    background:var(--ink);color:var(--bg);border-color:var(--ink);
    box-shadow:0 4px 12px -4px rgba(13,13,12,.25);
  }
  .svc-check input:checked + span::before{content:'✓';color:var(--accent);font-weight:600;font-size:13px}
  .svc-check input:focus-visible + span{box-shadow:0 0 0 4px var(--accent-glow)}

  /* Privacy / consent checkbox */
  .privacy-check{
    display:flex;align-items:start;gap:11px;cursor:pointer;
    font-size:13px;color:var(--ink-2);line-height:1.55;user-select:none;
  }
  .privacy-check input{
    appearance:none;-webkit-appearance:none;
    width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:4px;background:var(--bg);
    flex-shrink:0;cursor:pointer;margin-top:2px;
    transition:background .2s, border-color .2s;position:relative;
  }
  .privacy-check input:checked{background:var(--ink);border-color:var(--ink)}
  .privacy-check input:checked::after{
    content:'';position:absolute;top:2px;left:5px;width:5px;height:9px;
    border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg);
  }
  .privacy-check input:focus-visible{box-shadow:0 0 0 4px var(--accent-glow)}
  .privacy-check a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px;transition:text-decoration-color .2s}
  .privacy-check a:hover{text-decoration-color:var(--accent)}

  /* Submit button + form footer */
  .form-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding-top:8px;border-top:1px solid var(--line);margin-top:8px}
  .form-submit{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;border-radius:99px;
    background:var(--ink);color:var(--bg);
    font-family:var(--ff-display);font-weight:500;font-size:15px;letter-spacing:-.005em;
    border:none;cursor:pointer;
    transition:background .25s, color .25s, transform .2s, box-shadow .25s;
  }
  .form-submit:hover{background:var(--accent);color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 12px 32px -10px var(--accent-glow)}
  .form-submit svg{width:16px;height:16px;transition:transform .2s}
  .form-submit:hover svg{transform:translateX(3px)}
  .form-foot .response{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
  .form-foot .response .dot{width:6px;height:6px;border-radius:99px;background:var(--accent);box-shadow:0 0 6px var(--accent-glow);animation:pulse 1.6s ease-in-out infinite}

  /* Map card — real Google Maps embed with floating CTA pill */
  .map-card{
    aspect-ratio:21/9;
    border:1px solid var(--line);border-radius:var(--radius);
    position:relative;overflow:hidden;
    background:var(--bg-2);
    isolation:isolate;
  }
  .map-card iframe{
    position:absolute;inset:0;
    width:100%;height:100%;
    border:0;display:block;
  }

  /* Floating "Open in Maps" pill overlay (bottom-left of the map) */
  .map-cta{
    position:absolute;left:20px;bottom:20px;z-index:2;
    display:inline-flex;align-items:center;gap:14px;
    padding:12px 16px 12px 12px;
    background:var(--ink);color:var(--bg);
    border-radius:99px;
    font-family:var(--ff-display);font-weight:500;font-size:14px;
    text-decoration:none;
    box-shadow:0 16px 36px -10px rgba(13,13,12,.45),0 4px 12px -4px rgba(13,13,12,.25);
    transition:transform .25s ease, box-shadow .25s ease;
    max-width:calc(100% - 40px);
  }
  .map-cta:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 44px -12px rgba(13,13,12,.55),0 6px 14px -4px rgba(13,13,12,.3);
  }
  .map-cta .mc-pin{
    width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
    display:grid;place-items:center;flex:none;
  }
  .map-cta .mc-pin svg{width:18px;height:18px}
  .map-cta .mc-text{display:flex;flex-direction:column;gap:2px;line-height:1.2;min-width:0}
  .map-cta .mc-text strong{font-weight:500;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-cta .mc-text span{
    font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(245,245,243,.65);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .map-cta .mc-arrow{
    width:32px;height:32px;border-radius:50%;
    border:1px solid rgba(245,245,243,.18);
    display:grid;place-items:center;flex:none;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .map-cta .mc-arrow svg{width:14px;height:14px;color:var(--bg);transition:color .2s ease}
  .map-card:hover .mc-arrow{transform:translateX(3px);background:var(--accent);border-color:var(--accent)}
  .map-card:hover .mc-arrow svg{color:var(--accent-ink)}

  /* Phone tightening — taller aspect, stretch pill edge-to-edge */
  @media (max-width:560px){
    .map-card{aspect-ratio:4/3}
    .map-cta{
      left:12px;right:12px;bottom:12px;max-width:none;
      padding:10px 14px 10px 10px;gap:12px;
    }
    .map-cta .mc-pin{width:32px;height:32px}
    .map-cta .mc-pin svg{width:16px;height:16px}
    .map-cta .mc-text strong{font-size:13px}
    .map-cta .mc-text span{font-size:9px}
  }

  @media(max-width:980px){
    .kontakt-grid{grid-template-columns:1fr;gap:32px}
    .kontakt-info{position:static}
    .form-row{grid-template-columns:1fr}
  }
  @media(max-width:560px){
    .form-foot{flex-direction:column;align-items:stretch}
    .form-submit{justify-content:center}
  }


/* ===== REFERENZEN PAGE (referenzen.html) ===== */
/* ============== Compact dark hero (Referenzen-specific) ============== */
  .hero-ref{
    background:var(--ink);color:var(--bg);
    position:relative;overflow:hidden;border-bottom:none;
    padding:clamp(140px,14vw,180px) 0 clamp(56px,6vw,80px);
  }
  .hero-ref::before{
    content:'';position:absolute;
    right:-15%;top:-30%;width:55vw;height:80vh;
    background:radial-gradient(circle, var(--accent) 0%, transparent 60%);
    filter:blur(110px);opacity:.32;pointer-events:none;
  }
  .hero-ref::after{
    content:'';position:absolute;
    left:-10%;bottom:-40%;width:45vw;height:60vh;
    background:radial-gradient(circle, var(--accent) 0%, transparent 65%);
    filter:blur(100px);opacity:.18;pointer-events:none;
  }
  .hero-ref > .wrap{position:relative;z-index:2}
  .hero-ref .hero-meta{color:rgba(255,255,255,.5);margin-bottom:48px}
  .hero-ref .hero-meta .here{color:var(--bg)}
  .hero-ref .eye{color:rgba(255,255,255,.78);background:rgba(255,255,255,.06)}
  .hero-ref .eye::before{background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
  .hero-ref h1{
    font-family:var(--ff-display);font-size:clamp(44px,6.4vw,88px);
    font-weight:400;letter-spacing:-.04em;line-height:.96;
    max-width:18ch;margin-top:20px;
  }
  .hero-ref h1 em{font-style:italic;font-weight:300;color:rgba(255,255,255,.45);display:block;margin-top:.05em}
  .hero-ref h1 .mark{background:var(--accent);color:var(--accent-ink);display:inline-block;padding:0 .14em;border-radius:10px;box-shadow:0 0 0 6px var(--accent-glow)}
  .hero-ref .hero-lead{color:rgba(255,255,255,.7);font-size:17px;max-width:58ch;margin-top:24px;line-height:1.6}

  /* Quick anchors strip below hero */
  .ref-anchors{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;position:relative;z-index:2;
  }
  .ref-anchors a{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 16px;border-radius:99px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.85);
    font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    text-decoration:none;
    transition:background .2s, border-color .2s, transform .2s;
  }
  .ref-anchors a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
  .ref-anchors a .num{color:var(--accent);font-weight:600}

  /* ============== Compact reference cards (3-col grid) ============== */
  .ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .ref-card{
    background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;display:flex;flex-direction:column;gap:16px;
    transition:transform .35s var(--ease-out),background .25s,border-color .25s;
    text-decoration:none;color:inherit;position:relative;
  }
  .ref-card:hover{transform:translateY(-4px);background:var(--bg-2);border-color:var(--line-2)}
  .ref-card:hover .ref-arr{background:var(--accent);color:var(--accent-ink);transform:translate(3px,-3px);border-color:var(--accent)}
  .ref-thumb{
    aspect-ratio:16/10;border-radius:10px;
    background:repeating-linear-gradient(45deg,var(--bg-2) 0 12px,var(--bg) 12px 24px);
    border:1px dashed var(--line-2);
    display:grid;place-items:center;
    font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
    position:relative;overflow:hidden;
  }
  .ref-thumb.dark{
    background:repeating-linear-gradient(45deg,#1a1a18 0 12px,var(--ink) 12px 24px);
    border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.55);
  }
  .ref-thumb.lime{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent-deep);
  }
  .ref-tag{
    position:absolute;top:10px;left:10px;
    padding:4px 9px;border-radius:99px;
    font-family:var(--ff-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
    background:var(--ink);color:var(--bg);font-weight:500;
  }
  .ref-tag.accent{background:var(--accent);color:var(--accent-ink)}
  .ref-tag.new{background:var(--accent);color:var(--accent-ink)}
  .ref-tag.new::before{content:'●';color:var(--accent-ink);margin-right:4px}

  /* When a thumb has a real image, drop the dashed-pattern placeholder */
  .ref-thumb:has(img),
  .ref-big-thumb:has(img){background:none;border:none}
  .ref-thumb:has(img)::before,
  .ref-big-thumb:has(img)::before{display:none}
  .ref-thumb img,
  .ref-big-thumb img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;display:block;
    transition:transform .55s var(--ease-out);
  }
  .ref-card:hover .ref-thumb img,
  .ref-big-card:hover .ref-big-thumb img{transform:scale(1.04)}

  .ref-card .ref-body{display:flex;flex-direction:column;gap:8px}
  .ref-card h4{font-family:var(--ff-display);font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
  .ref-card .ref-desc{font-size:13.5px;color:var(--ink-2);line-height:1.55}
  .ref-card .ref-services{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
  .ref-card .ref-svc-tag{
    font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
    padding:3px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-3);
  }
  .ref-card .ref-foot{
    display:flex;justify-content:space-between;align-items:center;margin-top:auto;
    padding-top:14px;border-top:1px solid var(--line);
  }
  .ref-card .ref-url{
    font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;
    display:inline-flex;align-items:center;gap:5px;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ref-card .ref-url::before{content:'↗';color:var(--accent);font-size:11px;flex-shrink:0}
  .ref-arr{
    width:30px;height:30px;border-radius:99px;border:1px solid var(--line-2);
    display:grid;place-items:center;color:var(--ink);
    transition:all .3s var(--ease-out);flex-shrink:0;
  }
  .ref-arr svg{width:11px;height:11px}

  /* ============== Big reference cards (2-col, big images for Webdesign / Webentwicklung) ============== */
  .ref-big-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .ref-big-card{
    background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;
    transition:transform .35s var(--ease-out),border-color .25s;
    text-decoration:none;color:inherit;position:relative;
  }
  .ref-big-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
  .ref-big-card:hover .ref-arr{background:var(--accent);color:var(--accent-ink);transform:translate(4px,-4px);border-color:var(--accent)}
  .ref-big-thumb{
    aspect-ratio:16/10;
    background:
      linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%),
      repeating-linear-gradient(45deg,var(--bg-2) 0 16px,var(--bg) 16px 32px);
    border-bottom:1px solid var(--line);
    display:grid;place-items:center;
    font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;
    position:relative;overflow:hidden;
  }
  .ref-big-thumb::before{
    content:'';position:absolute;inset:24px;
    border:1px dashed var(--line-2);border-radius:8px;
  }
  .ref-big-thumb.dark{
    background:
      radial-gradient(circle at 70% 30%, var(--accent-glow), transparent 55%),
      var(--ink);
    color:rgba(255,255,255,.55);border-color:var(--ink);
  }
  .ref-big-thumb.dark::before{border-color:rgba(255,255,255,.18)}
  .ref-big-thumb.lime{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent-deep);
  }
  .ref-big-thumb.lime::before{border-color:rgba(13,13,12,.25)}
  .ref-big-tag{
    position:absolute;top:18px;left:18px;z-index:2;
    padding:6px 12px;border-radius:99px;
    font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
    background:var(--bg);color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.1);
  }
  .ref-big-tag.accent{background:var(--accent);color:var(--accent-ink)}
  .ref-big-card .body{padding:32px;display:flex;flex-direction:column;gap:16px;flex:1}
  .ref-big-card .body .meta{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
  .ref-big-card h3{font-family:var(--ff-display);font-size:26px;font-weight:500;letter-spacing:-.025em;line-height:1.15}
  .ref-big-card p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0}
  .ref-big-services{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
  .ref-big-services .tag{font-family:var(--ff-mono);font-size:10px;padding:4px 9px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
  .ref-big-foot{
    display:flex;justify-content:space-between;align-items:center;margin-top:auto;
    padding-top:18px;border-top:1px solid var(--line);
  }
  .ref-big-foot .url{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px}
  .ref-big-foot .url::before{content:'↗';color:var(--accent);font-size:13px}

  /* AEO badge — section header tag */
  .sec-head .new-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--accent);color:var(--accent-ink);
    font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
    padding:4px 9px;border-radius:99px;margin-left:10px;vertical-align:middle;
  }
  .sec-head .new-badge::before{content:'●';font-size:8px}

  @media(max-width:980px){
    .ref-grid{grid-template-columns:repeat(2,1fr)}
    .ref-big-grid{grid-template-columns:1fr;gap:20px}
  }
  @media(max-width:600px){
    .ref-grid{grid-template-columns:1fr}
    .ref-anchors{gap:6px}
    .ref-anchors a{font-size:10px;padding:7px 12px}
  }


/* ===== AGENTUR PAGE (agentur.html) ===== */
/* Page-specific: Team grid for team section */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .team-card{
    border:1px solid var(--line);border-radius:var(--radius);padding:32px;background:var(--bg);
    display:flex;flex-direction:column;gap:18px;transition:background .25s, border-color .25s, transform .35s var(--ease-out);
  }
  .team-card:hover{background:var(--bg-2);border-color:var(--line-2);transform:translateY(-4px)}
  .team-card.featured{background:var(--ink);color:var(--bg);border-color:var(--ink);grid-column:span 1}
  .team-card.featured:hover{background:#1a1a18}
  .team-card.featured .tc-role{color:rgba(255,255,255,.6)}
  .team-card.featured .tc-bio{color:rgba(255,255,255,.7)}
  .tc-portrait{
    width:84px;height:84px;border-radius:14px;
    background:repeating-linear-gradient(135deg,var(--bg-2) 0 10px,var(--bg) 10px 20px);
    border:1px dashed var(--line-2);
    display:grid;place-items:center;
    font-family:var(--ff-display);font-size:28px;font-weight:500;color:var(--ink-3);
  }
  .team-card.featured .tc-portrait{background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 8px,transparent 8px 16px);border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.5)}
  /* When the portrait holds a real photo, drop the dashed placeholder treatment */
  .tc-portrait:has(img){background:none;border:none;overflow:hidden;padding:0}
  .tc-portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
  .tc-name{font-family:var(--ff-display);font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
  .tc-role{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
  .tc-bio{font-size:14px;color:var(--ink-2);line-height:1.55;margin-top:6px}
  .tc-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-family:var(--ff-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;width:fit-content}

  /* Locations grid */
  .loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .loc-card{
    padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
    display:flex;flex-direction:column;gap:20px;transition:background .25s,border-color .25s, transform .35s var(--ease-out);
    position:relative;overflow:hidden;
  }
  .loc-card:hover{background:var(--bg-2);transform:translateY(-3px)}
  .loc-flag{width:36px;height:36px;border-radius:8px;background:var(--ink);color:var(--accent);display:grid;place-items:center;font-family:var(--ff-mono);font-weight:600;font-size:13px;letter-spacing:.04em}
  .loc-name{font-family:var(--ff-display);font-size:24px;font-weight:500;letter-spacing:-.02em}
  .loc-meta{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
  .loc-addr{font-size:15px;color:var(--ink-2);line-height:1.55}
  .loc-info{display:flex;gap:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);font-family:var(--ff-mono);letter-spacing:.05em}
  .loc-info strong{display:block;color:var(--ink);font-family:var(--ff-display);font-weight:500;font-size:14px;margin-top:3px;letter-spacing:-.005em;text-transform:none}

  /* Werte 2x2 grid (4 values look balanced as 2 columns instead of 3+1 orphan) */
  .werte-grid{grid-template-columns:repeat(2,1fr) !important}

  @media(max-width:900px){
    .team-grid{grid-template-columns:1fr 1fr}
    .loc-grid{grid-template-columns:1fr}
  }
  @media(max-width:600px){
    .team-grid{grid-template-columns:1fr}
    .werte-grid{grid-template-columns:1fr !important}
  }


/* ===== LOCAL SEO PAGE (local-seo-agentur.html) ===== */
/* Region map cards (4 region tiles in section 03) */
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.region-card{
  padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .35s var(--ease-out),background .25s,border-color .25s;
}
.region-card:hover{transform:translateY(-4px);background:var(--bg-2);border-color:var(--line-2)}
.region-card.featured{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.region-card.featured:hover{background:#1a1a18}
.region-flag{
  width:42px;height:42px;border-radius:10px;background:var(--bg-2);
  display:grid;place-items:center;font-size:18px;
  border:1px solid var(--line);
}
.region-card.featured .region-flag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.region-name{font-family:var(--ff-display);font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.region-meta{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.region-card.featured .region-meta{color:rgba(255,255,255,.5)}
.region-stat{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.region-card.featured .region-stat{border-top-color:rgba(255,255,255,.1)}
.region-stat .v{font-family:var(--ff-display);font-size:22px;font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.region-card.featured .region-stat .v{color:var(--bg)}
.region-stat .v.acc{color:var(--accent-ink);background:var(--accent);padding:0 7px;border-radius:5px}
.region-stat .k{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.region-card.featured .region-stat .k{color:rgba(255,255,255,.5)}

@media(max-width:900px){
  .region-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .region-grid{grid-template-columns:1fr}
}


/* ===== SEO FÜR ONLINE-SHOPS PAGE (seo-onlineshops.html) ===== */
/* Platform cards (Magento, Shopware, Shopify, WooCommerce) — 2x2 grid */
.platform-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.platform-card{
  padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  display:flex;gap:20px;align-items:flex-start;
  transition:transform .35s var(--ease-out),background .25s,border-color .25s;
  position:relative;overflow:hidden;
}
.platform-card:hover{transform:translateY(-3px);background:var(--bg-2);border-color:var(--line-2)}
.platform-logo{
  width:62px;height:62px;border-radius:14px;display:grid;place-items:center;
  flex-shrink:0;color:#fff;
}
.platform-logo svg{width:30px;height:30px}
.platform-logo.magento{background:#ee672f}
.platform-logo.shopware{background:#189eff}
.platform-logo.shopify{background:#95bf47}
.platform-logo.woo{background:#7f54b3}
.platform-info{flex:1;min-width:0}
.platform-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.platform-name{font-family:var(--ff-display);font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.platform-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:99px;background:var(--bg-2);
  font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;
}
.platform-desc{margin-top:14px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.platform-feats{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;
}
.platform-feats span{
  padding:4px 9px;border:1px solid var(--line);border-radius:99px;background:var(--bg);
  font-family:var(--ff-mono);font-size:10px;color:var(--ink-2);letter-spacing:.04em;
}

@media(max-width:900px){
  .platform-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .platform-card{flex-direction:column;gap:14px}
  .platform-logo{width:52px;height:52px}
  .platform-logo svg{width:26px;height:26px}
}


/* ===== LEGAL PAGES (impressum.html, datenschutz.html) ===== */
.legal-hero{
  background:var(--ink);color:var(--bg);
  padding:clamp(120px,15vw,180px) 0 clamp(60px,7vw,90px);
  border-bottom:1px solid var(--ink);
  position:relative;overflow:hidden;
}
.legal-hero::before{
  content:'';position:absolute;left:-10%;right:-10%;top:0;height:60%;
  background:radial-gradient(60% 80% at 50% 0%,var(--accent-glow) 0%,transparent 70%);
  pointer-events:none;opacity:.4;
}
.legal-hero .wrap{position:relative;z-index:1}
.legal-hero .eye{color:var(--accent)}
.legal-hero h1{
  font-family:var(--ff-display);
  font-size:clamp(40px,6vw,72px);
  font-weight:400;letter-spacing:-.035em;line-height:1.05;
  margin-top:18px;
}
.legal-hero h1 em{color:var(--accent);font-style:normal}
.legal-hero p{
  margin-top:18px;max-width:62ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.7);
}
.legal-hero .hero-crumbs{color:rgba(255,255,255,.5)}
.legal-hero .hero-crumbs .here{color:var(--accent)}

/* Content area — long-form legal text */
.legal{padding:clamp(48px,6vw,80px) 0}
.legal .wrap{max-width:920px}
.legal-grid{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
.legal-toc{
  position:sticky;top:96px;
  font-family:var(--ff-mono);font-size:12px;
  display:flex;flex-direction:column;gap:8px;
  padding:24px 0;border-top:1px solid var(--line);
}
.legal-toc-label{color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.legal-toc a{
  color:var(--ink-2);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.legal-toc a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.legal-content{font-size:16px;line-height:1.65;color:var(--ink-2)}
.legal-content h2{
  font-family:var(--ff-display);
  font-size:clamp(24px,3vw,32px);
  font-weight:500;letter-spacing:-.025em;line-height:1.2;
  color:var(--ink);
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line);
  scroll-margin-top:96px;
}
.legal-content h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-content h2 .num{
  display:inline-block;font-family:var(--ff-mono);font-size:13px;
  color:var(--ink-3);letter-spacing:.06em;margin-right:14px;font-weight:400;vertical-align:middle;
}
.legal-content h3{
  font-family:var(--ff-display);
  font-size:18px;font-weight:500;letter-spacing:-.015em;
  color:var(--ink);margin-top:32px;
}
.legal-content p{margin-top:14px}
.legal-content p:first-child{margin-top:18px}
.legal-content a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.legal-content a:hover{color:var(--accent-deep)}
.legal-content ul, .legal-content ol{margin-top:14px;padding-left:22px}
.legal-content li{margin-top:8px}
.legal-content strong{color:var(--ink);font-weight:600}
.legal-content .info-block{
  margin-top:18px;padding:20px 22px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  font-family:var(--ff-mono);font-size:13.5px;line-height:1.6;color:var(--ink);
}
.legal-content .info-block strong{display:block;font-family:var(--ff-display);font-size:16px;font-weight:500;margin-bottom:6px;letter-spacing:-.01em}
.legal-meta{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding-top:48px;margin-top:56px;border-top:1px solid var(--line);
}

@media(max-width:900px){
  .legal-grid{grid-template-columns:1fr;gap:32px}
  .legal-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
  .legal-toc-label{width:100%;margin-bottom:0}
}


/* ===== KONTAKT FORM — submit states (success/error/loading) ===== */
.kontakt-form .form-msg{
  display:none;
  padding:14px 18px;border-radius:10px;
  font-size:14px;line-height:1.5;
  margin-top:6px;
}
.kontakt-form .form-msg.show{display:block}
.kontakt-form .form-msg.ok{
  background:color-mix(in oklab, var(--accent) 16%, var(--bg));
  border:1px solid var(--accent);
  color:var(--ink);
}
.kontakt-form .form-msg.err{
  background:#fdecec;border:1px solid #e7a8a8;color:#7a1f1f;
}
.kontakt-form.submitting .form-submit{opacity:.6;pointer-events:none}
.kontakt-form .hp{
  position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;
  opacity:0 !important;pointer-events:none !important;
}


/* ===== 404 PAGE (404.html) ===== */
.page-404{
  min-height:100vh;
  background:var(--ink);color:var(--bg);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.page-404::before{
  /* Big lime glow behind the giant 404 */
  content:'';position:absolute;left:50%;top:50%;
  width:90vw;max-width:900px;aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--accent-glow) 0%,transparent 70%);
  opacity:.45;pointer-events:none;
}
.page-404::after{
  /* subtle grid texture */
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
}
.page-404 .wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:80px}
.page-404 .er-meta{
  display:flex;align-items:center;gap:14px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.page-404 .er-meta .dot{
  width:8px;height:8px;border-radius:99px;background:#ff5454;
  box-shadow:0 0 10px rgba(255,84,84,.7);
  animation:errPulse 1.6s ease-in-out infinite;
}
@keyframes errPulse{0%,100%{opacity:1}50%{opacity:.4}}
.er-num{
  font-family:var(--ff-display);
  font-size:clamp(140px,28vw,360px);
  font-weight:300;letter-spacing:-.06em;line-height:.85;
  margin:24px 0 6px;
  color:transparent;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(255,255,255,.1) 100%);
  -webkit-background-clip:text;background-clip:text;
  position:relative;
  display:inline-block;
}
.er-num::after{
  content:'404';position:absolute;inset:0;
  color:var(--accent);
  -webkit-text-stroke:1px var(--accent);
  background:none;-webkit-background-clip:initial;background-clip:initial;
  opacity:.18;transform:translate(8px,8px);
  pointer-events:none;
}
.er-title{
  font-family:var(--ff-display);
  font-size:clamp(34px,5vw,56px);
  font-weight:400;letter-spacing:-.03em;line-height:1.05;
  margin-top:18px;max-width:18ch;
}
.er-title em{color:var(--accent);font-style:normal}
.er-lead{
  margin-top:18px;max-width:58ch;
  font-size:17px;line-height:1.55;color:rgba(255,255,255,.7);
}
.er-actions{
  margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;
}
.er-actions .btn-primary{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
}
.er-actions .btn-ghost{
  border-color:rgba(255,255,255,.2);color:var(--bg);
}
.er-actions .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--accent)}

/* Quick links grid — popular destinations */
.er-links{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:920px;
}
.er-link{
  padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  background:rgba(255,255,255,.025);
  color:var(--bg);text-decoration:none;
  display:flex;flex-direction:column;gap:8px;
  transition:background .25s, border-color .25s, transform .35s var(--ease-out);
}
.er-link:hover{
  background:rgba(255,255,255,.06);border-color:var(--accent);
  transform:translateY(-2px);
}
.er-link .er-link-num{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.1em;color:var(--accent);
}
.er-link .er-link-title{
  font-family:var(--ff-display);font-size:17px;font-weight:500;letter-spacing:-.015em;
}
.er-link .er-link-desc{
  font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.55);
}

/* Footer-ish search line */
.er-foot{
  margin-top:auto;padding:24px 0;border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--ff-mono);font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.5);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.er-foot a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.er-foot a:hover{border-bottom-color:var(--accent)}

@media(max-width:780px){
  .er-links{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:460px){
  .er-links{grid-template-columns:1fr}
}


/* ===== HOME — Featured Google Ads Live Campaign Dashboard ===== */
/* Drops into .svc-bento-card.featured > .svc-bento-mock.gads-mock */
.svc-bento-mock.gads-mock{
  aspect-ratio:auto;min-height:280px;
  display:flex;flex-direction:column;
  padding:16px;gap:8px;
  align-items:stretch;justify-items:stretch;
  text-transform:none;letter-spacing:0;
  background:rgba(255,255,255,.04);
}
.gads-mock-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  padding:0 4px 10px;border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:4px;
}
.gads-mock-bar .live{
  display:inline-flex;align-items:center;gap:6px;color:var(--accent);
}
.gads-mock-bar .live .dot{
  width:6px;height:6px;border-radius:99px;background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  animation:gadsPulse 1.6s ease-in-out infinite;
}
@keyframes gadsPulse{0%,100%{opacity:1}50%{opacity:.35}}

.gads-row{
  display:grid;grid-template-columns:36px 1fr;gap:14px;
  padding:11px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  align-items:center;
  transition:background .3s, transform .35s var(--ease-out);
}
.gads-row:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}
.gads-row.hl{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.gads-icon{
  width:36px;height:36px;border-radius:9px;
  background:#fff;display:grid;place-items:center;flex-shrink:0;
}
.gads-icon svg{width:20px;height:20px}
.gads-row.hl .gads-icon{background:var(--accent-ink)}

.gads-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.gads-name{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-family:var(--ff-display);font-size:13.5px;font-weight:500;
  letter-spacing:-.005em;color:var(--bg);line-height:1.2;
}
.gads-row.hl .gads-name{color:var(--accent-ink)}
.gads-name .type{
  font-family:var(--ff-mono);font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.55);
  padding:2px 7px;border:1px solid rgba(255,255,255,.15);border-radius:99px;
  white-space:nowrap;
}
.gads-row.hl .gads-name .type{
  color:var(--accent-ink);border-color:rgba(13,13,12,.3);
  background:rgba(13,13,12,.06);
}
.gads-stats{
  display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:9.5px;
  color:rgba(255,255,255,.5);letter-spacing:.04em;text-transform:uppercase;
}
.gads-row.hl .gads-stats{color:rgba(13,13,12,.65)}
.gads-stats .sb{display:flex;gap:5px;align-items:baseline}
.gads-stats .sb b{
  font-family:var(--ff-display);font-weight:500;font-size:13px;
  color:var(--bg);letter-spacing:-.01em;
}
.gads-row.hl .gads-stats .sb b{color:var(--accent-ink)}
.gads-stats .sb b.up{color:var(--accent)}
.gads-row.hl .gads-stats .sb b.up{color:var(--accent-ink)}

@media(max-width:760px){
  .gads-stats{gap:10px}
  .gads-stats .sb b{font-size:12px}
  .svc-bento-mock.gads-mock{min-height:auto;padding:12px;gap:6px}
  .gads-row{padding:9px 10px;gap:10px}
}


/* Local SEO page Vorteile: 4 cards → 2×2 grid (avoids orphan card in 3-col) */
body[data-page="seo-local"] .why-grid{grid-template-columns:repeat(2,1fr)}


/* ════════════════════════════════════════════════════════════════════
   GLOBAL NAV — Variant D Glass Nav (applies to ALL pages)
   Light frosted glass · floating w/ 24px gutter · 18px radius
   Apple/Figma-style soft pill hovers · solid dark active pill
   Solid dark "Let's Talk" CTA with always-visible lime dot
   ════════════════════════════════════════════════════════════════════ */

body[data-page="index"]::after{display:none}  /* kill lime ambient blob on home */

/* 1. Glass nav — floats with 24px gutters, rounded, blurred */
nav.top{
  top:16px;left:24px;right:24px;
  border-radius:18px;
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 40px -16px rgba(0,0,0,.08);
}
nav.top.scrolled{
  background:rgba(255,255,255,.82) !important;
  border-bottom:1px solid rgba(255,255,255,.6);  /* keep rounded look on scroll */
  box-shadow:0 14px 44px -14px rgba(0,0,0,.14);
}
/* Constrain nav content to 1400px max + align edges with hero content frame.
   The clamp() compensates for nav.top's 24px gutter at narrow widths. */
.nav-inner{
  max-width:1400px;
  margin:0 auto;
  padding:10px clamp(24px, calc((100vw - 1352px) / 2), 48px);
}

/* ───── Brand ───── */
nav.top .brand{color:var(--ink)}
nav.top .brand:hover .brand-logo{
  filter:none;                                 /* no lime glow on light nav */
  transform:scale(1.04);
}
nav.top .brand-logo{transition:transform .25s var(--ease-out)}

/* ════════════════════════════════════════════════════════════════════
   2. Nav-link menu effects — Apple/Figma style
   Soft rounded pills · light hover wash · solid dark active pill
   ════════════════════════════════════════════════════════════════════ */
nav.top .nav-links > a,
nav.top .nav-item > a{
  color:var(--ink-2) !important;
  background:transparent !important;
  padding:8px 14px;
  border-radius:10px;
  font-size:14px;font-weight:500;
  box-shadow:none !important;
  transition:background .22s var(--ease-out), color .22s var(--ease-out);
}
nav.top .nav-links > a:hover,
nav.top .nav-item > a:hover{
  background:rgba(13,13,12,.06) !important;
  color:var(--ink) !important;
}
nav.top .nav-links > a.active,
nav.top .nav-item > a.active{
  background:var(--ink) !important;
  color:#fff !important;
  box-shadow:none !important;            /* flat — matches the flat hover pill so adjacent items align cleanly */
}
/* Suppress any legacy lime underline/dot decorations */
nav.top .nav-links > a::before,
nav.top .nav-links > a::after,
nav.top .nav-item > a::before,
nav.top .nav-item > a::after{
  display:none !important;content:none !important;animation:none !important;
}
/* Caret on dropdown triggers */
nav.top .nav-item > a .caret{color:var(--ink-3);opacity:.7}
nav.top .nav-item.has-dropdown:hover > a .caret,
nav.top .nav-item.has-dropdown:focus-within > a .caret{
  color:var(--ink);opacity:1;
}
/* When the trigger is the active page — caret must be WHITE on the dark pill,
   otherwise it disappears against the dark background (esp. on hover) */
nav.top .nav-item > a.active .caret,
nav.top .nav-item.has-dropdown:hover > a.active .caret,
nav.top .nav-item.has-dropdown:focus-within > a.active .caret{
  color:#fff !important;
  opacity:1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   3. Dropdown panel — frosted glass to match the nav
   ════════════════════════════════════════════════════════════════════ */
.nav-dropdown{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  box-shadow:
    0 24px 60px -16px rgba(13,13,12,.18),
    0 8px 22px -8px rgba(13,13,12,.10);
  padding:8px;
}
.dd-main, .dd-item{
  color:var(--ink);
  border-radius:11px;
  transition:background .22s var(--ease-out), color .22s, transform .22s var(--ease-out);
}
.dd-main{background:rgba(13,13,12,.04)}
.dd-main:hover, .dd-item:hover{
  background:rgba(13,13,12,.06);
  color:var(--ink);
  transform:translateX(3px);
}
/* Soft icon swap on hover (no full dark inversion) */
.dd-ic{background:rgba(13,13,12,.06);color:var(--ink)}
.dd-main .dd-ic{background:var(--ink);color:var(--accent)}
.dd-main:hover .dd-ic,
.dd-item:hover .dd-ic{background:var(--ink);color:var(--accent)}
.dd-main:hover::after{color:var(--ink)}

/* ════════════════════════════════════════════════════════════════════
   4. "Let's Talk" CTA — solid dark pill · always-visible lime dot
   ════════════════════════════════════════════════════════════════════ */
nav.top .nav-cta{
  background:var(--ink) !important;
  color:#fff !important;
  border:none !important;
  padding:10px 20px;
  font-size:13.5px;font-weight:500;
  box-shadow:0 6px 18px -6px rgba(13,13,12,.30) !important;
  transition:transform .2s var(--ease-out),
             background .2s var(--ease-out),
             box-shadow .25s var(--ease-out) !important;
}
nav.top .nav-cta:hover{
  background:#1a1a18 !important;
  color:#fff !important;
  transform:scale(1.04);
  box-shadow:0 12px 30px -8px rgba(13,13,12,.42) !important;
}
nav.top .nav-cta:active{transform:scale(.98)}
nav.top .nav-cta .dot{
  background:var(--accent) !important;
  box-shadow:0 0 8px var(--accent-glow) !important;
  width:7px;height:7px;
}
nav.top .nav-cta:hover .dot{
  background:var(--accent) !important;
  box-shadow:0 0 12px var(--accent-glow) !important;
}

/* ───── Burger (mobile) on light glass nav ───── */
.nav-burger{border-color:rgba(13,13,12,.15)}
.nav-burger span{background:var(--ink)}
.nav-burger:hover{background:rgba(13,13,12,.05)}

/* ════════════════════════════════════════════════════════════════════
   HOME PAGE — Variant D · Glass Bento · Light Pastel hero
   Hero-only rules below stay scoped to body[data-page="index"].
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   3. Hero — `.vd-*` classes copied verbatim from preview/header-hero-preview.html
   These class names don't exist anywhere else in the codebase, so there
   are NO specificity conflicts with the existing .hero-home rules.
   ════════════════════════════════════════════════════════════════════ */
.vd-stage{
  background:
    radial-gradient(ellipse 60% 40% at 10% 10%,#fcd5b3 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 20%,#cfe3d6 0%,transparent 60%),
    radial-gradient(ellipse 50% 30% at 70% 90%,#cfd9e5 0%,transparent 60%),
    #f4ecdf;
  color:var(--ink);position:relative;overflow:hidden;
  padding:0;min-height:820px;
}

.vd-hero{
  position:relative;z-index:2;padding:160px 48px 80px;
  display:grid;grid-template-columns:1fr 0.85fr;gap:48px;align-items:center;
  max-width:1400px;margin:0 auto;
}

/* LEFT */
.vd-text{display:block}
.vd-text .eye{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  padding:6px 16px 6px 6px;background:rgba(255,255,255,.5);border-radius:99px;border:1px solid rgba(255,255,255,.6);
  margin-bottom:28px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
/* AI tool icons — three overlapping chips inside the eyebrow pill */
.vd-text .eye-ai .ai-stack{
  display:inline-flex;align-items:center;
}
.vd-text .eye-ai .ai-ic{
  width:24px;height:24px;border-radius:7px;
  display:inline-grid;place-items:center;
  margin-left:-6px;                /* overlap to look like a brand stack */
  border:1.5px solid #fff;
  box-shadow:0 2px 6px rgba(13,13,12,.10);
  transition:transform .25s var(--ease-out);
}
.vd-text .eye-ai .ai-ic:first-child{margin-left:0}
.vd-text .eye-ai:hover .ai-ic{transform:translateY(-1px)}
.vd-text .eye-ai .ai-ic svg{width:14px;height:14px;display:block}
/* Brand colors */
.vd-text .eye-ai .ai-claude{background:#d97757;color:#fff}     /* Anthropic orange */
.vd-text .eye-ai .ai-chatgpt{background:#0d0d0c;color:#fff}    /* OpenAI black */
.vd-text .eye-ai .ai-gemini{
  background:linear-gradient(135deg,#4285f4 0%,#9b72cb 50%,#d96570 100%);
  color:#fff;
}
.vd-text .eye-ai .ai-gemini svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.vd-text h1{
  margin:0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(56px,7vw,108px);letter-spacing:-.04em;line-height:.95;
  max-width:none;     /* explicit so no inherited max-width can shrink it */
  color:var(--ink);
}
.vd-text h1 em{
  font-family:'Fraunces','Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:400;color:#1a1a18;
}
.vd-text p{margin:28px 0 0;max-width:48ch;font-size:17px;line-height:1.6;color:var(--ink-2)}
.vd-text .actions{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.vd-text .btn{
  display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:99px;
  font-family:var(--ff-display);font-size:15px;font-weight:500;
  text-decoration:none;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s;
}
.vd-text .btn-p{
  background:var(--ink);color:#fff;
  box-shadow:0 8px 24px -8px rgba(13,13,12,.3);
}
.vd-text .btn-p:hover{transform:translateY(-1px);box-shadow:0 12px 32px -8px rgba(13,13,12,.4)}
.vd-text .btn-g{
  background:rgba(255,255,255,.5);color:var(--ink);border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.vd-text .btn-g:hover{background:rgba(255,255,255,.8)}

/* ───── Trust pills (Google Ads certified · Google reviews)
       Pinned to bottom-right of the inner .vd-hero (1400px max-width)
       so they align to the bento's right edge, not the viewport ───── */
.vd-trust{
  position:absolute;
  right:48px;bottom:32px;
  z-index:3;
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:flex-end;
}
.vd-trust-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 8px;border-radius:99px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 6px 18px -10px rgba(13,13,12,.18);
  text-decoration:none;color:var(--ink);
  transition:transform .22s var(--ease-out),
             background .22s var(--ease-out),
             box-shadow .25s var(--ease-out);
}
.vd-trust-pill:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 24px -10px rgba(13,13,12,.22);
}
.vd-trust-ic{
  width:28px;height:28px;border-radius:50%;
  background:#fff;
  display:inline-grid;place-items:center;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(13,13,12,.06);
}
.vd-trust-ic svg{width:18px;height:18px;display:block}
.vd-trust-tx{display:inline-flex;flex-direction:column;line-height:1.1;gap:1px}
.vd-trust-tx strong{
  font-family:var(--ff-display);font-weight:600;font-size:13.5px;
  letter-spacing:-.005em;color:var(--ink);
  display:inline-flex;align-items:center;gap:5px;
}
.vd-trust-tx small{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;
}
.vd-trust-stars{
  color:#fbbc04;font-size:11.5px;letter-spacing:.5px;
  text-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* RIGHT */
.vd-bento{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:18px}
.vd-card{
  padding:24px;border-radius:22px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 16px 48px -16px rgba(0,0,0,.10);
}
.vd-card.feat{
  grid-column:1/-1;
  background:rgba(13,13,12,.92);color:#fff;border-color:transparent;
}
.vd-card .label{
  font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;
}
.vd-card.feat .label{color:rgba(255,255,255,.5)}
.vd-card .v{font-family:var(--ff-display);font-size:36px;font-weight:500;letter-spacing:-.025em;line-height:1}
.vd-card.feat .v{font-size:48px}
.vd-card .v small{font-family:var(--ff-mono);font-size:13px;font-weight:400;color:var(--ink-3);margin-left:6px}
.vd-card.feat .v small{color:rgba(255,255,255,.5)}
.vd-card .desc{margin-top:14px;font-size:13px;color:var(--ink-2);line-height:1.5}
.vd-card.feat .desc{color:rgba(255,255,255,.7)}
.vd-card.acc{background:var(--accent);border-color:var(--accent-deep)}
.vd-card.acc .v{color:var(--ink)}
.vd-card.acc .label{color:rgba(13,13,12,.65)}

/* Hide any leftover bits from the old dark hero */
body[data-page="index"] .hero-home,
body[data-page="index"] .hero-perf-card,
body[data-page="index"] .hero-home-cue,
body[data-page="index"] .hero-trust{display:none !important}

/* Responsive */
@media(max-width:900px){
  .vd-hero{grid-template-columns:1fr;padding:140px 24px 100px;gap:36px}
  .vd-bento{grid-template-columns:1fr 1fr}
  /* Drop trust pills back into normal flow under the bento */
  .vd-trust{
    position:static;
    right:auto;bottom:auto;
    margin:0 24px 32px;
    justify-content:flex-end;
  }
}
@media(max-width:560px){
  .vd-bento{grid-template-columns:1fr}
  .vd-trust{justify-content:flex-start;flex-direction:column;align-items:flex-start}
}

/* ════════════════════════════════════════════════════════════════════
   VARIANT B FINAL OVERRIDES — page-specific UI inside cream heroes
   These come at the END of the file so they win over the legacy
   page-specific dark-theme blocks (.hero-kontakt, .hero-ref).
   ════════════════════════════════════════════════════════════════════ */

/* Inline-styled secondary mono text in hero-meta — force dark on cream
   (overrides inline style="color:rgba(255,255,255,.5)") */
.hero .hero-meta > .mono,
.hero-ref .hero-meta > .mono,
.hero-kontakt .hero-meta > .mono{color:var(--ink-3) !important}

/* ───── KONTAKT — Quick-action buttons on cream ───── */
.hero-kontakt .quick-actions a.qa-primary{
  background:var(--ink) !important;
  color:#fff !important;
  box-shadow:0 6px 18px -6px rgba(13,13,12,.30);
}
.hero-kontakt .quick-actions a.qa-primary:hover{
  background:var(--accent) !important;
  color:var(--ink) !important;
  box-shadow:0 12px 28px -8px rgba(201,255,59,.40);
}
.hero-kontakt .quick-actions a.qa-ghost{
  background:rgba(255,255,255,.55) !important;
  color:var(--ink) !important;
  border:1px solid rgba(13,13,12,.12) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero-kontakt .quick-actions a.qa-ghost:hover{
  background:rgba(255,255,255,.85) !important;
  color:var(--ink) !important;
  border-color:rgba(13,13,12,.20) !important;
  transform:translateY(-2px);
}

/* ───── REFERENZEN — Anchor pills on cream ───── */
.hero-ref .ref-anchors a{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(13,13,12,.10) !important;
  color:var(--ink) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hero-ref .ref-anchors a:hover{
  background:rgba(255,255,255,.85) !important;
  border-color:rgba(13,13,12,.20) !important;
}
.hero-ref .ref-anchors a .num{color:var(--ink-3) !important;font-weight:600}

/* The .mark span on hero-ref / hero-kontakt was a lime block in the legacy
   theme; soften to the editorial underline-highlight (matches Variant B preview) */
.hero-ref h1 .mark,
.hero-kontakt h1 .mark{
  background:linear-gradient(180deg,transparent 65%,var(--accent) 65%) !important;
  display:inline !important;
  padding:0 6px !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

/* ════════════════════════════════════════════════════════════════════
   Stack Pill Cards (Layout B · DARK) — webentwicklung.html Referenzen
   Color-coded category dots make the tech stack scannable in 5 sec.
   Dark stage as a "tech island" in the middle of the cream page.
   ════════════════════════════════════════════════════════════════════ */

/* Category dot colours (also re-usable elsewhere if needed) */
.cat-dot{
  display:inline-block;width:8px;height:8px;border-radius:99px;
  flex-shrink:0;
}
.cat-dot.platform{background:#4eb8ff}   /* WordPress, Shopware, etc */
.cat-dot.cms     {background:#a259ff}   /* Sanity, Strapi, ACF */
.cat-dot.lang    {background:#ffa657}   /* PHP, TypeScript, etc */
.cat-dot.fw      {background:#34d399}   /* Next.js, Astro, Laravel */
.cat-dot.db      {background:#fbbc04}   /* MySQL, Postgres, MongoDB */
.cat-dot.host    {background:#999}      /* Vercel, Hetzner, etc */

/* Section: dark island with subtle glow + grid mask */
.cases-sp-stage{
  background:#0a0a09;color:#fff;
  position:relative;overflow:hidden;
  margin:48px 0;padding:96px 0 64px !important;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cases-sp-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(201,255,59,.10) 0%,transparent 60%);
}
.cases-sp-stage::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(201,255,59,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(201,255,59,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 50% at 50% 50%,#000 0%,transparent 80%);
}
.cases-sp-stage > .wrap{position:relative;z-index:2}

/* Section head */
.cases-sp-stage .sp-head{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;
  margin-bottom:36px;
}
.sp-eye{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:6px 12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:99px;
  margin-bottom:18px;
}
.sp-pulse{
  display:inline-block;width:7px;height:7px;border-radius:99px;
  background:var(--accent);box-shadow:0 0 8px var(--accent-glow);
  animation:spPulse 1.6s ease-in-out infinite;
}
@keyframes spPulse{0%,100%{opacity:1}50%{opacity:.4}}
.cases-sp-stage .sp-head h2{
  font-family:var(--ff-display);font-weight:300;
  font-size:clamp(36px,4vw,56px);letter-spacing:-.035em;line-height:1.05;
  margin:0 0 12px;color:#fff;max-width:22ch;
}
.cases-sp-stage .sp-head h2 em{
  font-family:'Fraunces','Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:400;color:var(--accent);
}
.cases-sp-stage .sp-head p{
  font-size:14.5px;color:rgba(255,255,255,.6);max-width:54ch;margin:0;line-height:1.6;
}
/* Color-dot legend on the right */
.sp-legend{
  display:flex;flex-wrap:wrap;gap:14px 18px;
  font-family:var(--ff-mono);font-size:10.5px;color:rgba(255,255,255,.6);
  letter-spacing:.06em;text-transform:uppercase;max-width:280px;
  padding:14px 18px;border:1px dashed rgba(255,255,255,.12);border-radius:10px;
}
.sp-legend span{display:inline-flex;align-items:center;gap:6px}

/* Card grid: fixed 2-col layout */
.cases-sp{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

/* Individual glass card */
.sp-card{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  text-decoration:none;color:inherit;
  transition:
    border-color .35s var(--ease-out),
    transform .4s var(--ease-out),
    box-shadow .4s var(--ease-out),
    background .35s var(--ease-out);
}
.sp-card:hover{
  border-color:rgba(255,255,255,.22);
  transform:translateY(-4px);
  background:rgba(255,255,255,.05);
  box-shadow:0 24px 48px -16px rgba(0,0,0,.5);
}
.sp-shot{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sp-shot img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s var(--ease-out),filter .35s;
  filter:saturate(.9) brightness(.95);
}
.sp-card:hover .sp-shot img{
  transform:scale(1.04);
  filter:saturate(1.05) brightness(1);
}
.sp-body{
  padding:24px 26px;display:flex;flex-direction:column;gap:12px;
}
.sp-num{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.sp-body h3{
  font-family:var(--ff-display);font-size:20px;font-weight:500;letter-spacing:-.02em;
  line-height:1.2;margin:0;color:#fff;
}
.sp-body > p{
  font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.55;margin:0;
}

/* Pills row — color-coded by category */
.sp-stack{
  display:flex;flex-wrap:wrap;gap:5px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.06);
  margin-top:auto;
}
.sp-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
  padding:4px 9px;border-radius:99px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition:background .25s,border-color .25s,transform .25s var(--ease-out);
}
.sp-card:hover .sp-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}

/* Footer */
.sp-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.06);
  margin-top:8px;
}
.sp-url{
  font-family:var(--ff-mono);font-size:10.5px;color:rgba(255,255,255,.55);letter-spacing:.04em;
}
.sp-arr{
  width:30px;height:30px;border-radius:99px;
  border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;
  font-size:14px;color:#fff;
  transition:all .3s var(--ease-out);
}
.sp-card:hover .sp-arr{
  background:var(--accent);color:var(--ink);border-color:var(--accent);
  transform:translate(2px,-2px);
}

/* Responsive */
@media(max-width:900px){
  .cases-sp-stage{margin:32px 0;padding:64px 0 48px !important}
  .cases-sp-stage .sp-head{grid-template-columns:1fr;gap:24px}
  .sp-legend{max-width:none}
  .cases-sp{grid-template-columns:1fr;gap:16px}
}


/* ════════════════════════════════════════════════════════════════════
   NAV — RESPONSIVE FIXES
   Comprehensive breakpoint pass so the floating glass nav looks right
   on every screen from 1920px down to 320px wide.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Tablet large (1024–1100px): tighten links so they don't crowd ─── */
@media (max-width:1100px) and (min-width:861px){
  .nav-links{gap:4px}
  .nav-links > a,
  .nav-item > a{padding:8px 14px;font-size:13.5px}
  .nav-cta{padding:9px 16px;font-size:13.5px}
  /* Mega-menu stays manageable in narrower viewports */
  .nav-dropdown.nav-dropdown-mega{min-width:480px;max-width:520px}
  .nav-dropdown-mega .dd-col{padding:6px 2px}
}

/* ─── Tablet (560–860px): burger view, but KEEP CTA visible ─── */
@media (max-width:860px){
  /* Floating nav: tighter side gutters so it fits narrow viewports */
  nav.top{left:16px;right:16px;top:14px;border-radius:16px}
  /* Slim nav-inner padding so brand+burger fit comfortably */
  .nav-inner{padding:8px clamp(12px,3vw,18px);gap:10px}
  /* Hide nav CTA across ALL burger-view sizes (tablet AND phone).
     Still accessible inside the mobile menu via `.mobile-cta` pill.
     Bulletproof against home-page override (`body[data-page="index"] ...`)
     which uses !important on background but NOT on display. */
  .nav-cta,
  nav.top .nav-cta,
  body[data-page="index"] nav.top .nav-cta{display:none !important}
  /* Mobile-menu slides down BELOW the floating nav (was overlapping at 64px) */
  .nav-mobile{
    inset:84px 14px auto 14px;
    border-radius:16px;
    padding:24px 28px 32px;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
    box-shadow:0 30px 60px -20px rgba(13,13,12,.25);
  }
}

/* ─── Phone (≤560px): tighten everything, hide CTA from nav (in mobile menu) ─── */
@media (max-width:560px){
  /* Floating nav even closer to edges */
  nav.top{left:10px;right:10px;top:10px;border-radius:14px}
  .nav-inner{padding:6px 12px}
  /* Hide CTA from nav on every page — bulletproof against the home-page
     override (`body[data-page="index"] nav.top .nav-cta` uses !important).
     Still accessible inside the mobile menu via `.mobile-cta`. */
  .nav-cta,
  nav.top .nav-cta,
  body[data-page="index"] nav.top .nav-cta{display:none !important}
  /* Smaller burger for compact nav */
  .nav-burger{width:38px;height:38px}
  .nav-burger span{width:16px}
  /* Mobile menu slides out from under the smaller nav */
  .nav-mobile{
    inset:70px 10px auto 10px;
    padding:20px 22px 28px;
    max-height:calc(100vh - 86px);
  }
  /* Reduce mobile-menu typography so it doesn't wrap awkwardly on small phones */
  .nav-mobile > a,
  .nav-m-group summary{font-size:22px;padding:12px 0}
  .nav-m-sub a{font-size:15px;padding:7px 0}
  .nav-mobile > a.mobile-cta{
    padding:14px 20px;font-size:15px;margin-top:18px;
  }
  .nav-m-group summary .caret{width:14px;height:10px}
}

/* ─── Tiny phones (≤380px): even tighter ─── */
@media (max-width:380px){
  nav.top{left:8px;right:8px;top:8px;border-radius:12px}
  .nav-inner{padding:5px 10px}
  .brand-logo{height:24px}
  .nav-burger{width:36px;height:36px}
  .nav-mobile{inset:64px 8px auto 8px;padding:18px 20px 24px}
  .nav-mobile > a,
  .nav-m-group summary{font-size:20px}
}

/* ─── Landscape phones (short viewports): ensure mobile menu scrolls cleanly ─── */
@media (max-width:860px) and (max-height:520px){
  .nav-mobile{
    max-height:calc(100vh - 90px);
    padding-top:18px;padding-bottom:24px;
  }
  .nav-mobile > a,
  .nav-m-group summary{font-size:20px;padding:10px 0}
}

/* ─── Reduce-motion users: disable mobile-menu slide animation ─── */
@media (prefers-reduced-motion:reduce){
  .nav-mobile{transition:none}
  .nav-burger span{transition:none}
}


/* ════════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE PASS (2026-05)
   Consolidated breakpoints for everything except the nav.
   Reads top-down: 1180 → 1100 → 900 → 720/560 → 380.
   Only fixes gaps the existing rules above didn't cover.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Tablet large (901–1180px) — bounded so it doesn't bleed to mobile ─── */
@media (min-width:901px) and (max-width:1180px){
  /* Inner-page editorial hero: tighten the 2-col gap so H1 doesn't squeeze */
  .hero .hero-grid{
    grid-template-columns:1fr 0.55fr !important;
    column-gap:clamp(28px,4vw,48px) !important;
  }
  .hero .hero-grid h1.hero-title{font-size:clamp(48px,6vw,84px) !important}

  /* Home — vd-hero columns tighten before the 900px stack */
  .vd-hero{grid-template-columns:1fr 0.9fr;gap:36px}

  /* CEO portrait shouldn't dominate at this size */
  .ceo-grid{gap:48px}
}

/* ─── Tablet (≤1100px) ─── */
@media (max-width:1100px){
  /* Section spacing shrinks slightly */
  .sec-head{margin-bottom:48px;gap:32px;grid-template-columns:160px 1fr}

  /* Home stats and KPI bars: 4 → 2 (matches existing 720 trend earlier) */
  .kpi{grid-template-columns:repeat(2,1fr)}

  /* Home bento — softens before the 1-col stack at 560 */
  .svc-bento{gap:14px}

  /* Hero-stats on dark hero pages: 4 → 2 cols */
  .hero-stats{grid-template-columns:repeat(2,1fr) !important}

  /* Cases.grid 2-col stays nice but tighten gap */
  .cases.grid{gap:20px}

  /* Tabbed switcher body padding shrink */
  .ts-body{padding:36px}
  .ts-shot{min-height:420px}
}

/* ─── Tablet small / large phone (≤900px) ─── */
@media (max-width:900px){
  /* Section padding noticeably tighter */
  section{padding:clamp(56px,8vw,80px) 0}

  /* Sec-head goes single column (existing rule covers ≤860; widen here for cleaner consistency) */
  .sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:36px}
  .sec-head h2{font-size:clamp(32px,5vw,52px)}

  /* Intro pull-quote shrinks */
  .intro-pull{font-size:clamp(20px,3vw,26px);padding-left:20px}
  .intro-meta{flex-direction:column;gap:18px}

  /* Hero-stats becomes single column / wraps cleanly (already in inner hero override) */

  /* CTA & call-bands: stack & shrink padding */
  .cta{padding:clamp(28px,5vw,48px);gap:28px;align-items:start}
  .cta h2{font-size:clamp(32px,5vw,52px);margin-top:12px}
  .why-band, .roas-band, .call-band{padding:clamp(28px,5vw,48px);gap:28px}

  /* Case cards padding & metrics gap */
  .case{padding:24px;gap:24px}
  .case-metrics{gap:18px;padding:14px 0}
  .case-metrics .m .v{font-size:18px}

  /* Process: 6/5-col always fall to 2-col at this width */
  .proc{grid-template-columns:repeat(2,1fr)}
  .proc.cols-3{grid-template-columns:repeat(2,1fr)}
  .proc.cols-5{grid-template-columns:repeat(2,1fr)}
  .pstep{padding:24px 20px 28px;min-height:200px}
  .pstep .pn{font-size:44px}

  /* Reviews head wraps cleanly */
  .rev-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:32px}
  .rev-score .big{font-size:48px}

  /* FAQ already stacks via 980 rule — tighten typography */
  details.q summary{font-size:18px;gap:16px}
  details.q .a{font-size:14.5px}

  /* Footer marquee text size */
  .foot-marquee .track{font-size:clamp(32px,7vw,56px);gap:28px}
  .foot-marquee{padding:24px 0;margin-bottom:48px}
  .foot-marquee .track{gap:28px}

  /* Why-row already stacks at 720 — improve at 900 too */
  .why-row{padding:28px 0;gap:20px}

  /* Tabbed switcher body padding */
  .ts-body{padding:28px}
  .ts-body h3{font-size:22px}
  .ts-body p{font-size:14px}

  /* Stack-pill cards: smaller padding */
  .sp-body{padding:20px 22px}

  /* Hero (inner pages) editorial 2-col grid is already collapsed at 900 by earlier rule */
  /* Hero quick-actions on Kontakt page wrap with smaller pills */
  .hero-kontakt .quick-actions a{font-size:13px;padding:9px 14px}

  /* Reference cards 3 → 2 (handled by the 980 rule above) — refine padding */
  .ref-card{padding:18px}

  /* CEO content typography softens */
  .ceo-content p{font-size:16px}
  .ceo-name{font-size:24px}

  /* Hero actions wrap & shrink */
  .hero-actions{gap:10px}
}

/* ─── Tablet small / large phone (≤860px) ─── */
@media (max-width:860px){
  /* Stats strip on inner hero pages: stack each stat as a row, no overflow */
  .hero .hero-stats,
  .hero-ref .hero-stats,
  .hero-kontakt .hero-stats{margin-top:40px !important;padding-top:24px !important}

  /* CTA-section + footer breathing room */
  .cta-section{padding:clamp(40px,6vw,72px) 0}
  footer{padding:64px 0 32px}

  /* Resources/blog grid spacing */
  .res-head{margin-bottom:36px;gap:18px}
}

/* ─── Phone (≤720px) ─── */
@media (max-width:720px){
  /* KPI cells stack to 1 col on phones */
  .kpi{grid-template-columns:1fr}
  .kpi-cell{padding:24px;min-height:140px}
  .kpi-cell .big{font-size:44px}

  /* Hero btn and stat scaling */
  .hero-actions .btn{padding:13px 18px;font-size:14px}

  /* CEO signature stacks */
  .ceo-signature{flex-direction:column;align-items:flex-start;gap:14px}
  .ceo-meta{text-align:left}

  /* Tabbed switcher tabs already 2 → 1 at 560; tighten padding here */
  .ts-tab .ts-info{padding:12px 14px}
  .ts-tab .ts-label{font-size:12.5px}

  /* Footer bottom flex wraps with the socials below */
  .foot-bot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ─── Phone (≤560px) ─── */
@media (max-width:560px){
  /* Inner-page hero typography tightens */
  .hero h1.hero-title,
  .hero .hero-title,
  .hero-ref h1,
  .hero-kontakt h1{font-size:clamp(36px,9vw,52px) !important;line-height:1 !important}
  .hero .hero-grid h1.hero-title{font-size:clamp(36px,9vw,56px) !important}
  .hero,
  .hero-ref,
  .hero-kontakt{padding:120px 0 48px !important}
  .hero .hero-meta,
  .hero-ref .hero-meta,
  .hero-kontakt .hero-meta{margin-bottom:28px !important}
  .hero-lead{font-size:15px !important}

  /* Home hero (dark / vd-stage) — tighter typography */
  .vd-text h1{font-size:clamp(40px,9.5vw,64px)}
  .vd-text p{font-size:15px;margin-top:20px}
  .vd-text .actions{margin-top:24px}
  .vd-text .btn{padding:13px 20px;font-size:14px}
  .vd-hero{padding:120px 20px 64px;gap:28px}
  .vd-card{padding:20px;border-radius:18px}
  .vd-card.feat .v{font-size:36px}
  .vd-card .v{font-size:28px}

  /* Home stats 2-col → 1 col on tiny */
  .home-stats{grid-template-columns:1fr}
  .home-stats .cell{min-height:auto;padding:24px}
  .home-stats .cell .n{font-size:36px}

  /* Section eye / paragraph */
  section{padding:clamp(48px,8vw,68px) 0}
  .sec-head h2{font-size:clamp(28px,7.5vw,40px)}
  .sec-head p{font-size:14.5px;margin-top:16px}

  /* CTA H2 shrinks aggressively */
  .cta h2{font-size:clamp(28px,7.5vw,42px);max-width:none}
  .cta-contact{font-size:13.5px}

  /* Why-band / call-band typography */
  .why-band h2, .roas-band h2, .call-band h3{font-size:clamp(26px,7vw,38px)}

  /* Case cards padding tightest, image gets full width */
  .case{padding:18px;gap:18px;border-radius:14px}
  .case h3{font-size:22px;line-height:1.15}
  .case p{font-size:14px}
  .case-metrics{gap:14px;flex-wrap:wrap}
  .case-metrics .m{flex:1 1 calc(50% - 14px);min-width:120px}

  /* Reviews shrink */
  .rev{padding:22px;gap:16px}
  .rev q{font-size:16px}
  .rev-score .big{font-size:40px}

  /* Process steps trimmer */
  .pstep{padding:20px 16px 22px;min-height:auto}
  .pstep .pn{font-size:36px}
  .pstep h4{font-size:16px}

  /* Footer marquee text size on phone */
  .foot-marquee .track{font-size:clamp(28px,9vw,44px);gap:20px}
  .foot-marquee{padding:18px 0;margin-bottom:36px;gap:20px}
  .foot h5{margin-bottom:12px}
  .foot{gap:28px}

  /* Service cards padding */
  .svc-card{padding:22px;min-height:auto}
  .svc-card h3{font-size:21px}

  /* SVC-row (list view) — already 2-col at 720, tighten further */
  .svc-row{padding:24px 0;gap:12px}
  .svc-row .svc-title{font-size:22px}
  .svc-row .svc-desc{font-size:14px}

  /* WHY grid tile padding */
  .so, .why{padding:24px;min-height:auto}
  .so-big{font-size:48px}

  /* Cmp / pt cards */
  .cmp, .pt-card{padding:24px;min-height:auto}

  /* Plats tiles */
  .plat{padding:26px 22px;min-height:auto}

  /* Tabbed switcher body further trimmed */
  .ts-body{padding:22px;gap:14px}
  .ts-body h3{font-size:20px}
  .ts-live{padding:11px 18px;font-size:13px}

  /* FAQ aside softens */
  .faq-aside{padding:24px;gap:14px}
  .faq-aside h3{font-size:22px}

  /* Resources hero strip */
  .res-head .left h2{font-size:clamp(28px,7vw,40px)}

  /* Home services bento featured h3 */
  .svc-bento-card.featured h3{font-size:26px}
  .svc-bento-card{padding:22px}

  /* Reference big-card body padding */
  .ref-big-card .body{padding:22px;gap:12px}
  .ref-big-card h3{font-size:22px}
  .ref-big-card p{font-size:14px}

  /* Trust pills on home — already column-stack from earlier rule */

  /* Tags chip downsize */
  .tag, .svc-tag, .cmp-tag, .ref-svc-tag{font-size:9.5px;padding:3px 8px}

  /* Hero buttons wrap full width on tiny */
  .hero .hero-grid .hero-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ─── Tiny phone (≤380px) ─── */
@media (max-width:380px){
  /* Aggressively trim padding on the smallest devices */
  :root{--pad:16px}
  section{padding:clamp(40px,8vw,56px) 0}

  /* Hero typography lowest tier */
  .hero h1.hero-title,
  .hero .hero-title,
  .hero-ref h1,
  .hero-kontakt h1,
  .hero .hero-grid h1.hero-title{font-size:clamp(30px,9vw,40px) !important}
  .vd-text h1{font-size:clamp(34px,9.5vw,46px)}

  /* Home bento + cards */
  .vd-card{padding:18px}
  .vd-card.feat .v{font-size:30px}

  /* Section heads */
  .sec-head h2{font-size:clamp(26px,8vw,34px)}

  /* CTA / why-band typography */
  .cta h2{font-size:clamp(24px,8vw,32px)}
  .why-band h2, .roas-band h2, .call-band h3{font-size:clamp(22px,7.5vw,30px)}

  /* Buttons */
  .btn{padding:13px 18px;font-size:14px}
  .hero-actions{gap:8px;width:100%}

  /* Reviews + case headings */
  .rev q{font-size:15px}
  .case h3{font-size:20px}

  /* Footer marquee tightest */
  .foot-marquee .track{font-size:32px;gap:16px}

  /* Forms — make form-row gap snug */
  .form-row{gap:12px}
  .kontakt-form{padding:22px}

  /* CEO portrait scaled */
  .ceo-portrait{max-width:none}

  /* Trust pill body */
  .vd-trust{margin:0 16px 24px}
}

/* ─── Short landscape phones — keep dark cases islands from being huge ─── */
@media (max-height:520px) and (max-width:900px){
  .cases-tab-stage,
  .cases-sp-stage{padding:48px 0 32px !important;margin:24px 0}
}


/* ════════════════════════════════════════════════════════════════════
   ABSOLUTE NAV OVERRIDE — last in source order, wins every cascade.
   On every burger-view size (≤860px):
   • HIDE the "Let's Talk" CTA pill from the floating nav
   • SHOW the brand logo + burger icon (force visibility)
   • Restore the light glass nav background (defeat any dark-state stuck)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* Force-hide every Let's Talk CTA selector variant */
  nav.top .nav-cta,
  nav .nav-cta,
  .nav-cta,
  body nav.top .nav-cta,
  body[data-page="index"] nav.top .nav-cta,
  body[data-page="index"] nav.top .nav-right .nav-cta{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Force-show the brand and burger so they always render */
  nav.top .brand,
  body nav.top .brand,
  body[data-page="index"] nav.top .brand{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  nav.top .nav-burger,
  body nav.top .nav-burger,
  body[data-page="index"] nav.top .nav-burger,
  [data-burger]{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* nav-right shrinks to just-burger so layout stays clean */
  nav.top .nav-right{gap:0}

  /* HARD-HIDE the mobile menu unless `.open` class is present. Belt-and-
     suspenders: even if `display:flex` from another rule keeps it on the page,
     these properties make sure it's off-screen, click-through, and visually gone. */
  .nav-mobile:not(.open){
    transform:translateY(-200%) !important;
    opacity:0 !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }

  /* When OPEN: container is visible, slid into view */
  .nav-mobile.open{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }

  /* Force every direct child to render top-to-bottom in source order */
  .nav-mobile.open > a,
  .nav-mobile.open > details{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    width:100%;
  }
  /* Details summaries must also render — flex layout with caret on the right */
  .nav-mobile.open > details > summary{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100%;
  }
}