/* ============================================================
   MATRIX — Sichtbarkeit & Automatisierung · Hamburg
   Luxury editorial system · near-black navy + champagne gold
   Fonts: Playfair Display · Inter · JetBrains Mono (AnimaContent DNA)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:        oklch(7% 0.016 165);
  --bg-2:      oklch(4.5% 0.016 165);
  --surface:   oklch(11% 0.018 165);
  --surface-2: oklch(13.5% 0.02 165);
  --surface-3: oklch(17% 0.022 165);
  --ink:       oklch(97% 0.01 160);
  --ink-dim:   oklch(76% 0.016 165);
  --ink-faint: oklch(56% 0.016 165);
  --line:      oklch(32% 0.02 165 / 0.55);
  --line-soft: oklch(32% 0.02 165 / 0.28);

  /* matrix green — the single accent */
  --accent:     oklch(80% 0.17 150);
  --accent-deep:oklch(68% 0.16 152);
  --accent-dim: oklch(80% 0.17 150 / 0.3);
  --accent-glow:oklch(80% 0.17 150 / 0.1);

  --display: 'Sora', system-ui, sans-serif; /* @kind font */
  --body:    'Plus Jakarta Sans', system-ui, sans-serif; /* @kind font */
  --mono:    'JetBrains Mono', ui-monospace, monospace; /* @kind font */

  --maxw: 1320px;
  --radius: 3px;
  --radius-lg: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  font-family:var(--body); background:var(--bg); color:var(--ink);
  line-height:1.7; font-weight:400; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.skip-link{ position:absolute; left:14px; top:-60px; z-index:9999; background:var(--accent); color:#04140c; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:12px 18px; border-radius:3px; transition:top .25s var(--ease); }
.skip-link:focus{ top:14px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* faint warm vignette — restrained, no spotlights */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 80% -10%, oklch(80% 0.17 150 / 0.06), transparent 60%),
    radial-gradient(1000px 900px at 50% 130%, oklch(20% 0.03 165 / 0.5), transparent 60%),
    var(--bg);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:36px; }
.sect{ padding-block:clamp(80px,12vw,168px); }
.sect-sm{ padding-block:clamp(56px,8vw,104px); }
section{ position:relative; }

.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.42em; text-transform:uppercase; color:var(--accent); display:inline-block; font-weight:500; }
.eyebrow{ color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:500; line-height:1.07; letter-spacing:-0.015em; color:var(--ink); }
h1{ font-size:clamp(2.9rem,7vw,6rem); font-weight:400; letter-spacing:-0.025em; }
h2{ font-size:clamp(2.1rem,4.6vw,3.9rem); font-weight:400; }
h3{ font-size:clamp(1.35rem,2.1vw,1.85rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--ink-dim); max-width:64ch; font-weight:300; line-height:1.65; }
/* italic serif gold accent (replaces gradient text) */
.grad{ font-style:italic; color:var(--accent); font-weight:400; -webkit-text-fill-color:currentColor; }
.muted{ color:var(--ink-dim); }

/* ---------- buttons (editorial, mono uppercase) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-weight:500;
  font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; padding:17px 30px;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  border-radius:var(--radius); transition:transform .6s var(--ease), border-color .5s, background .5s, color .5s, box-shadow .6s; will-change:transform;
}
.btn svg{ width:15px; height:15px; transition:transform .5s var(--ease); }
.btn:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 24px 60px -22px var(--accent-glow); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
.btn-primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.btn-ghost{ background:transparent; }
.btn-lg{ padding:20px 38px; font-size:12px; }

/* ---------- nav — full-width editorial header ---------- */
.nav-shell{ position:fixed; top:0; left:0; right:0; z-index:120; padding:0; transition:background .5s var(--ease), border-color .5s, padding .5s var(--ease); border-bottom:1px solid transparent; }
.nav-shell.scrolled{ background:oklch(7% 0.012 255 / 0.82); backdrop-filter:blur(22px) saturate(140%); border-bottom-color:var(--line); }
.nav{ display:flex; align-items:center; gap:22px; max-width:var(--maxw); margin-inline:auto; padding:26px 28px; transition:padding .5s var(--ease); }
.nav-shell.scrolled .nav{ padding:16px 28px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; font-size:1.55rem; letter-spacing:-0.02em; margin-right:auto; }
.brand .glyph{ width:26px; height:26px; flex:none; }
.brand-mark{ width:34px; height:34px; flex:none; filter:drop-shadow(0 2px 10px rgba(53,224,138,.32)); transition:transform .55s var(--ease); }
.brand:hover .brand-mark{ transform:scale(1.06); }
/* animated web-seal: web spins/draws in, legs extend, node pulses */
@media (prefers-reduced-motion: no-preference){
  html.has-js .brand-mark .ring{ stroke-dasharray:200; stroke-dashoffset:200; animation:mxDraw 1s var(--ease) both; }
  html.has-js .brand-mark .spoke{ stroke-dasharray:34; stroke-dashoffset:34; animation:mxDraw .5s var(--ease) .15s both; }
  html.has-js .brand-mark .web1{ stroke-dasharray:120; stroke-dashoffset:120; animation:mxDraw .7s var(--ease) .5s both; }
  html.has-js .brand-mark .web2{ stroke-dasharray:120; stroke-dashoffset:120; animation:mxDraw .7s var(--ease) .65s both; }
  html.has-js .brand-mark .web3{ stroke-dasharray:120; stroke-dashoffset:120; animation:mxDraw .7s var(--ease) .8s both; }
  html.has-js .brand-mark .leg{ stroke-dasharray:40; stroke-dashoffset:40; animation:mxDraw .45s var(--ease) 1s both; }
  html.has-js .brand-mark .body{ opacity:0; animation:mxFade .5s var(--ease) 1.2s both; }
  html.has-js .brand-mark .node{ transform-box:fill-box; transform-origin:center; opacity:0; animation:mxFade .4s var(--ease) 1.35s both, mxPulse 2.8s ease-in-out 1.75s infinite; }
}
@keyframes mxDraw{ to{ stroke-dashoffset:0; } }
@keyframes mxFade{ to{ opacity:1; } }
@keyframes mxPulse{ 0%,100%{ opacity:.7; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.25);} }
.brand-word{ font-family:var(--display); font-weight:700; font-size:1.4rem; letter-spacing:-0.01em; color:var(--ink); line-height:1; display:inline-flex; align-items:baseline; }
.brand-word b{ font-weight:800; color:var(--accent); }
.brand-word .xl{ font-size:1.16em; margin-left:-0.02em; }
.footer .brand-word{ font-size:1.55rem; }
.footer .brand-mark{ width:38px; height:38px; }
.nav-links{ display:flex; align-items:center; gap:12px; }
.nav-links a{ position:relative; font-family:var(--mono); font-size:10.5px; letter-spacing:0.10em; text-transform:uppercase; font-weight:400; color:var(--ink-dim); white-space:nowrap; padding:6px 0; transition:color .3s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{ color:var(--accent); }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-cta .btn{ padding:14px 22px; }
.nav-burger{ display:none; width:46px; height:46px; cursor:pointer; flex-direction:column; align-items:flex-end; justify-content:center; gap:7px; background:none; border:none; }
.nav-burger span{ display:block; height:1.5px; background:var(--ink); transition:transform .5s var(--ease), opacity .3s, width .4s, background .3s; }
.nav-burger span:nth-child(1){ width:24px; } .nav-burger span:nth-child(2){ width:16px; }
.nav-burger.open span{ background:var(--accent); }
.nav-burger.open span:nth-child(1){ width:24px; transform:translateY(8.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ width:24px; transform:translateY(-8.5px) rotate(-45deg); }

.drawer{ position:fixed; inset:0; z-index:115; background:var(--bg-2); display:flex; flex-direction:column; justify-content:center; gap:4px; padding:48px 36px; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer a{ font-family:var(--display); font-size:clamp(2rem,9vw,3.4rem); font-weight:400; color:var(--ink); padding:10px 0; transform:translateY(20px); opacity:0; transition:transform .6s var(--ease), opacity .6s, color .3s; }
.drawer a:hover{ color:var(--accent); font-style:italic; }
.drawer.open a{ transform:none; opacity:1; }
.drawer.open a:nth-child(1){ transition-delay:.06s; } .drawer.open a:nth-child(2){ transition-delay:.12s; }
.drawer.open a:nth-child(3){ transition-delay:.18s; } .drawer.open a:nth-child(4){ transition-delay:.24s; }
.drawer.open a:nth-child(5){ transition-delay:.3s; } .drawer.open a:nth-child(6){ transition-delay:.36s; }

/* ---------- cards ---------- */
.card{ position:relative; border:1px solid var(--line); background:var(--surface); padding:38px; border-radius:var(--radius); transition:transform .6s var(--ease), border-color .6s, background .6s; overflow:hidden; }
.card:hover{ border-color:var(--accent-dim); background:var(--surface-2); transform:translateY(-8px); }
.card .ic{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:24px; border:1px solid var(--line); border-radius:var(--radius); }
.card .ic svg{ width:22px; height:22px; stroke-width:1.4; }

.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.bento > *{ border-radius:0 !important; border:none !important; }
.bento .card:hover{ transform:none; background:var(--surface-2); z-index:2; }
.col-3{ grid-column:span 3; } .col-4{ grid-column:span 4; } .col-5{ grid-column:span 5; } .col-6{ grid-column:span 6; }
.col-7{ grid-column:span 7; } .col-8{ grid-column:span 8; } .col-12{ grid-column:span 12; }

.glass{ position:relative; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); transition:transform .3s var(--ease), border-color .5s; }

.chip{ display:inline-flex; align-items:center; gap:9px; padding:7px 13px; border:1px solid var(--line); background:transparent; font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); border-radius:var(--radius); }
.chip .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }

.stat-num{ font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,4.4vw,3.8rem); line-height:1; letter-spacing:-0.03em; color:var(--ink); }
.stat-num .unit{ color:var(--accent); font-style:italic; }

/* ---------- scroll reveal ---------- */
[data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  html.has-js [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
  html.has-js [data-reveal].in{ opacity:1; transform:none; }
}
[data-reveal][data-d="1"]{ transition-delay:.1s; } [data-reveal][data-d="2"]{ transition-delay:.2s; }
[data-reveal][data-d="3"]{ transition-delay:.3s; } [data-reveal][data-d="4"]{ transition-delay:.4s; }
[data-reveal][data-d="5"]{ transition-delay:.5s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:80px 40px; margin-top:0; background:var(--bg-2); }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:48px; }
.footer h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer ul a{ color:var(--ink-dim); font-size:14.5px; transition:color .3s, padding-left .3s; }
.footer ul a:hover{ color:var(--accent); padding-left:5px; }
.footer-brand p{ color:var(--ink-dim); font-size:14.5px; max-width:36ch; margin-top:20px; font-weight:300; line-height:1.7; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:64px; padding-top:30px; border-top:1px solid var(--line-soft); color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:0.05em; }
.ph{ color:var(--accent); font-style:italic; font-family:var(--display); font-size:1.05em; }

/* ---------- section heading ---------- */
.head{ max-width:780px; margin-bottom:64px; }
.head h2{ margin-top:22px; }
.head .lead{ margin-top:24px; }
.center{ text-align:center; margin-inline:auto; }

@media (max-width:1080px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
/* nav hides earlier than the 920px content breakpoint below — the 11 links +
   CTA need more room than that; verified via scrollWidth vs clientWidth. */
@media (max-width:1080px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width:920px){
  .bento{ grid-template-columns:1fr; }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{ grid-column:span 12; }
  .wrap{ padding-inline:24px; } .nav{ padding:22px 24px; }
}
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:36px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100dvh; display:flex; align-items:center; overflow:hidden; }
/* always-on animated backdrop — hero never looks empty, even without WebGL */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg::before{ content:""; position:absolute; inset:-25%; filter:blur(26px);
  background:
    radial-gradient(38% 48% at 22% 32%, oklch(80% 0.17 150 / 0.12), transparent 60%),
    radial-gradient(34% 44% at 78% 62%, oklch(58% 0.075 255 / 0.16), transparent 60%),
    radial-gradient(46% 50% at 60% 18%, oklch(80% 0.17 150 / 0.07), transparent 60%);
  animation:meshdrift 24s ease-in-out infinite alternate; }
@keyframes meshdrift{ from{ transform:translate(-3%,-2%) scale(1); } to{ transform:translate(4%,3%) scale(1.12); } }
.hero-bg::after{ content:""; position:absolute; inset:0; opacity:0.5;
  background-image:radial-gradient(oklch(80% 0.17 150 / 0.22) 1px, transparent 1.5px); background-size:44px 44px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 46%, #000, transparent 76%); mask-image:radial-gradient(72% 72% at 50% 46%, #000, transparent 76%);
  animation:gridpan 44s linear infinite; }
@keyframes gridpan{ to{ background-position:44px 44px; } }
@media (prefers-reduced-motion: reduce){ .hero-bg::before,.hero-bg::after{ animation:none; } }
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero-veil{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 85% at 50% 46%, oklch(7% 0.012 255 / 0.35) 18%, transparent 48%, oklch(7% 0.012 255 / 0.5) 78%, var(--bg) 100%); }
.hero .wrap{ position:relative; z-index:3; padding-top:130px; padding-bottom:70px; }
.hero-inner{ max-width:920px; margin-inline:auto; text-align:center; }
.hero .kicker{ display:inline-block; }
.hero h1{ margin:30px 0 0; }
.hero .lead{ margin:32px auto 0; font-size:clamp(1.1rem,1.6vw,1.4rem); }
.hero-cta{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; justify-content:center; }
.hero-meta{ display:flex; gap:56px; margin-top:64px; flex-wrap:wrap; justify-content:center; }
.hero-meta .m{ text-align:center; }
.hero-meta .m b{ font-family:var(--display); font-size:2rem; font-weight:400; letter-spacing:-0.02em; display:block; }
.hero-meta .m span{ font-size:11px; color:var(--ink-faint); font-family:var(--mono); letter-spacing:0.16em; text-transform:uppercase; margin-top:6px; display:block; }
.scroll-hint{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-faint); font-family:var(--mono); font-size:9.5px; letter-spacing:0.3em; text-transform:uppercase; }
.scroll-hint .mouse{ width:20px; height:32px; border:1px solid var(--line); border-radius:11px; position:relative; }
.scroll-hint .mouse::after{ content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:2.5px; height:6px; border-radius:3px; background:var(--accent); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ opacity:0; transform:translate(-50%,0); } 30%,70%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,11px); } }

/* marquee */
.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block:26px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:scrollx 40s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--ink-faint); white-space:nowrap; font-weight:400; }
.marquee-track span[aria-hidden]{ font-style:normal; color:var(--accent); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* result trio */
.result-card{ position:relative; padding:42px 38px; min-height:320px; display:flex; flex-direction:column; }
.result-card .num{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.3em; }
.result-card h3{ margin:20px 0 14px; font-size:1.9rem; }
.result-card p{ color:var(--ink-dim); font-size:15px; font-weight:300; }
.result-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:28px; }
.result-card .glow-orb{ display:none; }

/* process */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.step{ position:relative; padding:38px 26px; background:var(--bg); }
.step .si{ font-family:var(--display); font-size:2.4rem; color:var(--accent); font-style:italic; line-height:1; }
.step h4{ font-family:var(--display); font-size:1.25rem; font-weight:500; margin:18px 0 10px; }
.step p{ font-size:13.5px; color:var(--ink-dim); font-weight:300; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }

/* förder */
.foerder{ position:relative; border:1px solid var(--line); background:var(--surface); padding:clamp(40px,5vw,72px); border-radius:var(--radius); }
.foerder-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:54px; align-items:center; }
.foerder-list{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.foerder-prog{ display:flex; gap:20px; align-items:flex-start; padding:24px; background:var(--bg); transition:background .4s; }
.foerder-prog:hover{ background:var(--surface-2); }
.foerder-prog .pct{ font-family:var(--display); font-weight:400; font-size:2rem; color:var(--accent); flex:none; min-width:80px; font-style:italic; }
.foerder-prog h4{ font-family:var(--display); font-size:1.1rem; font-weight:500; margin-bottom:5px; }
.foerder-prog p{ font-size:13px; color:var(--ink-dim); font-weight:300; }
@media (max-width:860px){ .foerder-grid{ grid-template-columns:1fr; gap:36px; } }

/* faq */
.faq{ max-width:880px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 4px; cursor:pointer; font-family:var(--display); font-size:1.3rem; font-weight:500; transition:color .3s; }
.faq-q:hover{ color:var(--accent); }
.faq-q .pm{ width:18px; height:18px; flex:none; position:relative; }
.faq-q .pm::before, .faq-q .pm::after{ content:""; position:absolute; background:var(--accent); transition:transform .4s var(--ease), opacity .3s; }
.faq-q .pm::before{ width:100%; height:1px; top:50%; left:0; }
.faq-q .pm::after{ width:1px; height:100%; left:50%; top:0; }
.faq-item.open .faq-q .pm::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.faq-a p{ padding:0 4px 30px; color:var(--ink-dim); max-width:70ch; font-weight:300; }

/* cta banner */
.cta-banner{ position:relative; border:1px solid var(--line); background:var(--surface); padding:clamp(52px,7vw,96px); text-align:center; border-radius:var(--radius); overflow:hidden; }
.cta-banner::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 130% at 50% -10%, oklch(80% 0.17 150 / 0.07), transparent 60%); pointer-events:none; }
.cta-banner h2{ position:relative; margin-bottom:24px; font-size:clamp(2.4rem,5vw,4.2rem); }
.cta-banner .lead{ position:relative; margin:0 auto 38px; }
.cta-banner .hero-cta{ justify-content:center; }

/* ============================================================
   CONFIGURATOR
   ============================================================ */
.cfg-step{ margin-bottom:38px; }
.cfg-step.cfg-collapse{ overflow:hidden; transition:max-height .55s var(--ease), opacity .4s ease, margin-bottom .55s var(--ease); max-height:340px; opacity:1; }
.cfg-step.cfg-collapse.hidden{ max-height:0; opacity:0; margin-bottom:0; pointer-events:none; }
.cfg-step .cfg-label{ display:flex; align-items:baseline; gap:14px; margin-bottom:20px; font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-dim); }
.cfg-step .cfg-label b{ color:var(--accent); font-family:var(--display); font-style:italic; font-size:1.4rem; font-weight:400; }
.cfg-opts{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.cfg-opts.g3{ grid-template-columns:repeat(3,1fr); }
.cfg-opts.g2{ grid-template-columns:repeat(2,1fr); }
.cfg-opts.terms{ grid-template-columns:repeat(3,1fr); max-width:520px; }
.opt{ text-align:left; padding:26px; background:var(--bg); cursor:pointer; transition:background .4s; position:relative; color:var(--ink); font-family:var(--body); border:none; }
.opt:hover{ background:var(--surface-2); }
.opt.sel{ background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--accent); }
.opt .opt-ic{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:16px; border:1px solid var(--line); border-radius:var(--radius); }
.opt .opt-ic svg{ width:20px; height:20px; stroke-width:1.4; }
.opt b{ font-family:var(--display); font-weight:500; font-size:1.2rem; display:block; }
.opt span{ font-size:12.5px; color:var(--ink-dim); display:block; margin-top:6px; font-weight:300; }
.opt .opt-save{ position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:10px; color:var(--bg); background:var(--accent); padding:3px 9px; border-radius:var(--radius); font-weight:600; letter-spacing:0.05em; }
.opt.terms-opt{ text-align:center; padding:22px; }
.opt.terms-opt b{ font-size:1.9rem; font-style:italic; }
.opt .pop-flag{ position:absolute; top:14px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); }
@media (max-width:760px){ .cfg-opts.g3{ grid-template-columns:1fr; } }

.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line); margin-top:56px; align-items:stretch; }
@media (max-width:980px){ .pkg-grid{ grid-template-columns:1fr; } }
.pkg{ position:relative; background:var(--bg); padding:40px 34px; transition:background .5s; display:flex; flex-direction:column; }
.pkg:hover{ background:var(--surface); }
.pkg.pop{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--accent-dim); }
.pkg-badge{ position:absolute; top:0; left:0; right:0; background:var(--accent); color:var(--bg); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.2em; padding:7px; text-transform:uppercase; text-align:center; }
.pkg.pop{ padding-top:54px; }
.pkg-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-faint); }
.pkg-name{ font-size:2.1rem; margin:10px 0 14px; font-weight:400; }
.pkg-pitch{ font-size:14px; color:var(--ink-dim); min-height:64px; font-weight:300; }
.pkg-pricewrap{ margin:24px 0; padding:24px 0; border-block:1px solid var(--line); }
.pkg-price{ font-family:var(--display); font-weight:400; font-size:3rem; line-height:1; letter-spacing:-0.03em; color:var(--ink); }
.pkg-price .cur{ font-size:1.4rem; vertical-align:top; color:var(--ink-dim); margin-right:4px; }
.pkg-price .dec{ font-size:1.6rem; }
.pkg-price .per{ font-size:0.95rem; color:var(--ink-faint); font-family:var(--mono); margin-left:8px; letter-spacing:0.05em; }
.pkg-sub{ font-size:13px; color:var(--ink-dim); margin-top:10px; font-weight:300; }
.pkg-sub s{ color:var(--ink-faint); }
.pkg-net{ font-size:10.5px; color:var(--ink-faint); margin-top:7px; font-family:var(--mono); letter-spacing:0.05em; }
.pkg-cta{ width:100%; justify-content:center; margin:6px 0 16px; }
.pkg-toggle{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; background:none; border:none; color:var(--ink-dim); font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; padding:10px; transition:color .3s; margin-top:auto; }
.pkg-toggle:hover{ color:var(--accent); }
.pkg-toggle svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.pkg-toggle.open svg{ transform:rotate(180deg); }
.pkg-features{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.pkg-features ul{ list-style:none; padding-top:12px; }
.feat{ border-top:1px solid var(--line-soft); }
.feat-head{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 2px; background:none; border:none; color:var(--ink); font-family:var(--body); font-size:14px; font-weight:400; text-align:left; cursor:pointer; transition:color .3s; }
.feat-head:hover{ color:var(--accent); }
.feat-check{ width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.feat-check svg{ width:13px; height:13px; stroke-width:2; }
.feat-caret{ width:14px; height:14px; margin-left:auto; color:var(--ink-faint); transition:transform .4s var(--ease); }
.feat.open .feat-caret{ transform:rotate(180deg); color:var(--accent); }
.feat-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.feat-body p{ padding:0 0 15px 30px; font-size:13px; color:var(--ink-dim); font-weight:300; }

/* ============================================================
   KI CHAT WIDGET
   ============================================================ */
.chat-fab{ position:fixed; bottom:28px; right:28px; z-index:130; width:60px; height:60px; border-radius:50%; border:1px solid var(--accent); cursor:pointer; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 50px -16px var(--accent-glow); transition:transform .5s var(--ease); }
.chat-fab:hover{ transform:scale(1.06); }
.chat-fab svg{ width:24px; height:24px; transition:opacity .3s, transform .3s; stroke-width:1.6; }
.chat-fab .ic-close{ position:absolute; opacity:0; transform:rotate(-90deg) scale(.5); }
.chat-fab.open .ic-chat{ opacity:0; transform:rotate(90deg) scale(.5); }
.chat-fab.open .ic-close{ opacity:1; transform:none; }
.chat-fab::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent); opacity:0.5; animation:ping 2.6s var(--ease) infinite; }
.chat-fab.open::after{ display:none; }
@keyframes ping{ 0%{ transform:scale(1); opacity:0.5; } 70%,100%{ transform:scale(1.45); opacity:0; } }
.chat-panel{ position:fixed; bottom:102px; right:28px; z-index:130; width:min(390px,calc(100vw - 40px)); border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 50px 100px -40px rgba(0,0,0,0.95); transform:translateY(24px) scale(.96); opacity:0; pointer-events:none; transform-origin:bottom right; transition:transform .5s var(--ease), opacity .4s; }
.chat-panel.open{ transform:none; opacity:1; pointer-events:auto; }
.chat-head{ display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line); }
.chat-head .avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; color:var(--bg); position:relative; }
.chat-head .avatar .on{ position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-2); }
.chat-head b{ font-family:var(--display); font-weight:600; font-size:15px; display:block; }
.chat-head span{ font-size:10px; color:var(--accent); font-family:var(--mono); letter-spacing:0.12em; text-transform:uppercase; }
.chat-close{ margin-left:auto; background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:24px; line-height:1; padding:4px; transition:color .3s; }
.chat-close:hover{ color:var(--ink); }
.chat-body{ padding:20px; max-height:350px; overflow-y:auto; display:flex; flex-direction:column; gap:13px; }
.chat-msg{ max-width:85%; padding:12px 16px; border-radius:var(--radius); font-size:14px; line-height:1.55; font-weight:300; animation:msgin .45s var(--ease); }
.chat-msg.bot{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); }
.chat-msg.user{ align-self:flex-end; background:var(--accent); color:var(--bg); font-weight:500; }
@keyframes msgin{ from{ opacity:0; transform:translateY(10px); } }
.chat-msg.typing{ display:flex; gap:5px; }
.chat-msg.typing span{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); animation:typed 1.2s infinite; }
.chat-msg.typing span:nth-child(2){ animation-delay:.2s; } .chat-msg.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes typed{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }
.chat-quick{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.chat-quick button{ text-align:left; padding:12px 16px; border:1px solid var(--accent-dim); background:transparent; color:var(--ink); font-family:var(--body); font-size:13.5px; font-weight:400; cursor:pointer; border-radius:var(--radius); transition:background .3s, transform .3s var(--ease); }
.chat-quick button:hover{ background:var(--surface-2); transform:translateX(3px); }

/* ---------- page hero (sub) ---------- */
.page-hero{ padding-top:180px; padding-bottom:30px; position:relative; }
.page-hero .lead{ margin-top:26px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.field{ display:flex; flex-direction:column; gap:9px; grid-column:1 / -1; }
.field.half{ grid-column:span 1; }
.field label{ font-size:11px; font-family:var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim); }
.field input, .field textarea{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; color:var(--ink); font-family:var(--body); font-size:15px; transition:border-color .3s, box-shadow .3s; width:100%; }
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input.invalid, .field textarea.invalid{ border-color:#d98b7a; box-shadow:0 0 0 1px #d98b7a; }
.seg{ display:flex; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.seg button{ flex:1; min-width:90px; padding:13px 12px; border:none; border-right:1px solid var(--line); background:var(--bg); color:var(--ink-dim); font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:background .3s, color .3s; }
.seg button:last-child{ border-right:none; }
.seg button:hover{ color:var(--ink); background:var(--surface); }
.seg button.sel{ background:var(--accent); color:var(--bg); font-weight:600; }
.form-success{ display:none; text-align:center; padding:16px 0; }
.form-success.show{ display:block; animation:msgin .5s var(--ease); }
form.sent .form-grid, form.sent > .btn, form.sent > .eyebrow{ display:none; }
.succ-ic{ width:62px; height:62px; border-radius:50%; margin:0 auto 20px; border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.succ-ic svg{ width:28px; height:28px; stroke-width:1.6; }
@media(max-width:560px){ .form-grid{ grid-template-columns:1fr; } .field.half{ grid-column:1 / -1; } }

/* ============================================================
   CINEMATIC INTRO  (black → light-shard → blast → matrix rain → MATRIXX → welcome)
   ============================================================ */
body.intro-lock{ overflow:hidden; }
#matrix-intro{ position:fixed; inset:0; z-index:9999; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:opacity .85s ease, transform 1s cubic-bezier(.7,0,.2,1); }
#matrix-intro.done{ opacity:0; transform:translateY(-7%) scale(1.03); pointer-events:none; }
#intro-canvas{ position:absolute; inset:0; }
#matrix-intro .intro-text{ position:relative; z-index:3; text-align:center; opacity:0; transition:opacity .4s ease; padding:20px; }
#matrix-intro .intro-text.show{ opacity:1; }
.intro-glitch{ position:relative; display:inline-block; font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,13vw,9.5rem); letter-spacing:.06em; line-height:1; color:#d6ffe4; text-shadow:0 0 45px rgba(53,224,138,.55), 0 0 14px rgba(200,255,222,.55); }
.intro-glitch::before, .intro-glitch::after{ content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; }
.intro-glitch.glitching{ animation:introJit .5s steps(3,end) infinite; }
.intro-glitch.glitching::before{ opacity:.45; color:#7bf4e4; left:1px; text-shadow:-1px 0 #7bf4e4; animation:introGl1 1.1s steps(5,end) infinite; }
.intro-glitch.glitching::after{ opacity:.45; color:#36d59a; left:-1px; text-shadow:1px 0 #36d59a; animation:introGl2 1.1s steps(5,end) infinite; }
.intro-glitch.resolved::before, .intro-glitch.resolved::after{ opacity:0; transition:opacity .25s; }
.intro-glitch.resolved{ animation:introBurst .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes introBurst{ 0%{ transform:scale(1.09); letter-spacing:.1em; text-shadow:0 0 70px rgba(224,255,236,.85), 0 0 30px rgba(53,224,138,.8); } 55%{ text-shadow:0 0 50px rgba(53,224,138,.6), 0 0 18px rgba(224,255,236,.6); }0px rgba(200,255,222,.7); } 100%{ transform:scale(1); letter-spacing:.06em; text-shadow:0 0 45px rgba(53,224,138,.55), 0 0 14px rgba(200,255,222,.55); } }
/* shockwave ring burst behind the title on resolve */
.intro-text::after{ content:""; position:absolute; left:50%; top:42%; width:40px; height:40px; border-radius:50%; transform:translate(-50%,-50%) scale(0); border:2px solid rgba(200,255,222,.8); opacity:0; pointer-events:none; }
.intro-text.burst::after{ animation:introShock 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes introShock{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:.85; border-width:3px; } 100%{ transform:translate(-50%,-50%) scale(26); opacity:0; border-width:0; } }
/* continuous gold shimmer on the resolved title */
.intro-glitch.resolved{ background:linear-gradient(105deg,#d6ffe4 30%,#eafff2 47%,#35e08a 55%,#d6ffe4 70%); background-size:240% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:introBurst .8s cubic-bezier(.16,1,.3,1) both, introShimmer 3.4s linear .8s infinite; }
@keyframes introShimmer{ to{ background-position:-240% 0; } }
@keyframes introJit{ 0%{transform:translate(0,0)} 25%{transform:translate(-1px,0.5px)} 50%{transform:translate(1px,-0.5px)} 75%{transform:translate(-0.5px,-1px)} 100%{transform:translate(0.5px,0.5px)} }
@keyframes introGl1{ 0%{clip-path:inset(8% 0 82% 0)} 20%{clip-path:inset(58% 0 22% 0)} 40%{clip-path:inset(32% 0 54% 0)} 60%{clip-path:inset(78% 0 6% 0)} 80%{clip-path:inset(4% 0 72% 0)} 100%{clip-path:inset(46% 0 36% 0)} }
@keyframes introGl2{ 0%{clip-path:inset(70% 0 14% 0)} 20%{clip-path:inset(14% 0 66% 0)} 40%{clip-path:inset(50% 0 30% 0)} 60%{clip-path:inset(24% 0 60% 0)} 80%{clip-path:inset(86% 0 2% 0)} 100%{clip-path:inset(34% 0 46% 0)} }
.intro-welcome{ margin-top:32px; font-family:var(--mono); font-size:clamp(.7rem,1.8vw,1rem); letter-spacing:.55em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s var(--ease); }
.intro-welcome.show{ opacity:1; transform:none; }

/* ============================================================
   SALES PSYCHOLOGY  (loss-aversion · social proof · authority · scarcity · guarantee)
   ============================================================ */
/* trust / authority strip */
.trust-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 38px; padding:30px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.trust-strip .ti{ display:flex; align-items:center; gap:10px; color:var(--ink-dim); font-size:14px; font-weight:500; }
.trust-strip .ti svg{ width:19px; height:19px; stroke:var(--accent); flex:none; }
/* loss aversion */
.loss-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.loss-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 30px 30px 64px; position:relative; }
.loss-card::before{ content:"✕"; position:absolute; left:26px; top:30px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:#ff6b6b; font-size:15px; border:1px solid rgba(255,107,107,.4); border-radius:50%; }
.loss-card.gain{ border-color:var(--accent-dim); background:linear-gradient(180deg, var(--accent-glow), transparent); }
.loss-card.gain::before{ content:"✓"; color:var(--accent); border-color:var(--accent-dim); }
.loss-card h4{ font-size:1.1rem; margin-bottom:8px; }
.loss-card p{ color:var(--ink-dim); font-size:14.5px; font-weight:300; line-height:1.55; }
/* social proof */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.proof-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; display:flex; flex-direction:column; gap:18px; }
.proof-stars{ display:flex; gap:3px; color:var(--accent); }
.proof-stars svg{ width:16px; height:16px; fill:var(--accent); }
.proof-quote{ font-family:var(--display); font-size:1.12rem; line-height:1.5; color:var(--ink); font-weight:500; text-wrap:pretty; }
.proof-by{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.proof-av{ width:42px; height:42px; border-radius:50%; flex:none; background:var(--surface-3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--accent); }
.proof-by b{ display:block; font-size:14px; }
.proof-by span{ display:block; font-size:12.5px; color:var(--ink-faint); }
.ph-badge{ display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-dim); border-radius:999px; padding:3px 9px; }
/* scarcity banner */
.scarcity{ display:flex; align-items:center; gap:16px; justify-content:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--accent-dim); border-radius:var(--radius-lg); padding:18px 28px; }
.scarcity .pulse{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:scpulse 2s var(--ease) infinite; flex:none; }
@keyframes scpulse{ 0%{ box-shadow:0 0 0 0 rgba(53,224,138,.5);} 70%{ box-shadow:0 0 0 11px rgba(53,224,138,0);} 100%{ box-shadow:0 0 0 0 rgba(53,224,138,0);} }
.scarcity p{ font-size:14.5px; color:var(--ink-dim); }
.scarcity b{ color:var(--ink); }
/* guarantee badges */
.guarantees{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:34px; }
.gbadge{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px; padding:11px 18px; font-size:13.5px; color:var(--ink-dim); }
.gbadge svg{ width:17px; height:17px; stroke:var(--accent); flex:none; }
@media(max-width:760px){ .loss-grid,.proof-grid{ grid-template-columns:1fr; } }
.intro-skip{ position:absolute; bottom:30px; right:34px; z-index:4; background:none; border:1px solid rgba(200,255,222,.25); color:rgba(200,255,222,.7); font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; padding:11px 18px; cursor:pointer; border-radius:2px; transition:all .3s; }
.intro-skip:hover{ border-color:var(--accent); color:var(--accent); }
.intro-replay{ position:fixed; left:24px; bottom:24px; z-index:120; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(10,14,22,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--ink-dim); border-radius:50%; cursor:pointer; transition:all .35s var(--ease); opacity:.5; }
.intro-replay:hover{ opacity:1; color:var(--accent); border-color:var(--accent); transform:scale(1.08); }
.intro-replay svg{ width:18px; height:18px; }
@media (max-width:640px){ .intro-replay{ left:16px; bottom:16px; } }
@media (prefers-reduced-motion: reduce){ .intro-glitch.glitching, .intro-glitch.glitching::before, .intro-glitch.glitching::after{ animation:none; } }

/* ============================================================
   CASE-STUDY CAROUSEL  (scroll-driven: cards slide L/R & stack)
   ============================================================ */
.cases{ position:relative; min-height:280vh; }
.cases-stage{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-block:40px; }
.cases-viewport{ position:relative; height:520px; max-width:1080px; width:100%; margin:30px auto 0; perspective:1600px; }
.case-card{ position:absolute; inset:0; margin:auto; width:min(100%,940px); height:500px; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-2); border:1px solid var(--line); display:grid; grid-template-columns:1.05fr .95fr; transition:transform .15s linear, opacity .15s linear; will-change:transform,opacity; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); }
.case-media{ position:relative; background:#000; overflow:hidden; }
.case-media .yt{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.case-media .yt-poster{ position:absolute; inset:0; cursor:pointer; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.case-media .yt-poster::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(8,20,14,.35), rgba(8,20,14,.1)); }
.yt-play{ position:relative; z-index:2; width:74px; height:74px; border-radius:50%; background:rgba(8,20,14,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1.5px solid var(--accent); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), background .35s; }
.yt-poster:hover .yt-play{ transform:scale(1.1); background:var(--accent); }
.yt-play svg{ width:26px; height:26px; fill:var(--accent); margin-left:3px; transition:fill .35s; }
.yt-poster:hover .yt-play svg{ fill:#04140c; }
.case-tag{ position:absolute; top:18px; left:18px; z-index:3; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); background:rgba(8,20,14,.6); border:1px solid var(--accent-dim); border-radius:999px; padding:6px 12px; }
.case-body{ padding:42px 40px; display:flex; flex-direction:column; }
.case-body .eyebrow{ color:var(--accent); }
.case-body h3{ font-size:clamp(1.5rem,2.4vw,2rem); margin:16px 0 14px; }
.case-body p{ color:var(--ink-dim); font-size:15px; line-height:1.65; font-weight:300; }
.case-metrics{ display:flex; gap:30px; margin-top:auto; padding-top:26px; }
.case-metrics .cm b{ font-family:var(--display); font-size:1.9rem; color:var(--accent); display:block; line-height:1; }
.case-metrics .cm span{ font-size:12px; color:var(--ink-faint); margin-top:6px; display:block; }
.cases-progress{ display:flex; gap:8px; justify-content:center; margin-top:30px; }
.cases-progress .dot{ width:30px; height:3px; border-radius:2px; background:var(--line); transition:background .3s; }
.cases-progress .dot.on{ background:var(--accent); }
.cases-hint{ text-align:center; color:var(--ink-faint); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-top:14px; }
@media(max-width:820px){ .case-card{ grid-template-columns:1fr; height:auto; min-height:520px; } .case-media{ min-height:200px; } .cases-viewport{ height:620px; } }

/* ============================================================
   CINEMATIC INTRO  (real Higgsfield render + push-in + brand)
   ============================================================ */
#matrix-intro .intro-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.05); }
#matrix-intro.playing .intro-photo{ animation:introPhotoFade 1.4s ease forwards, introPhotoPush 8s ease-out forwards; }
@keyframes introPhotoFade{ from{ opacity:0; } to{ opacity:.95; } }
@keyframes introPhotoPush{ from{ transform:scale(1.05); } to{ transform:scale(1.15); } }
#matrix-intro .intro-veil2{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(125% 95% at 50% 47%, transparent 36%, rgba(3,8,6,.5) 74%, rgba(3,8,6,.9) 100%); }
#matrix-intro .intro-brand{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px; transform:translateY(6vh); }
.intro-word{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,9vw,6rem); letter-spacing:-0.02em; line-height:1; color:#eafff2; display:inline-flex; align-items:baseline; opacity:0; transform:translateY(16px) scale(.96); text-shadow:0 0 55px rgba(53,224,138,.5), 0 0 18px rgba(214,255,228,.4); }
.intro-word b{ color:var(--accent); font-weight:800; }
.intro-word .xl{ font-size:1.14em; }
#matrix-intro.playing .intro-word{ animation:introUp 1s var(--ease) .5s forwards; }
.intro-welcome2{ margin-top:24px; font-family:var(--display); font-size:clamp(1.05rem,2.2vw,1.5rem); font-weight:600; color:#eafff2; opacity:0; transform:translateY(14px); display:flex; flex-direction:column; gap:10px; max-width:90vw; }
.intro-welcome2 span{ font-family:var(--mono); font-size:.6em; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); font-weight:400; }
#matrix-intro.playing .intro-welcome2{ animation:introUp 1.1s var(--ease) 1.5s forwards; }
@keyframes introUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  #matrix-intro .intro-photo{ opacity:.95; transform:none; animation:none; }
  .intro-word, .intro-welcome2{ opacity:1; transform:none; animation:none; }
}

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.gr-head{ display:flex; align-items:center; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }
.gr-logo{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:var(--ink); }
.gr-logo svg{ width:20px; height:20px; }
.gr-score{ display:flex; align-items:center; gap:10px; }
.gr-score b{ font-family:var(--display); font-size:1.5rem; }
.gr-stars{ display:flex; gap:2px; }
.gr-stars svg{ width:16px; height:16px; fill:#f5b400; }
.gr-count{ color:var(--ink-faint); font-size:13px; }
.gr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.gr-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:14px; }
.gr-top{ display:flex; align-items:center; gap:12px; }
.gr-av{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#04140c; }
.gr-top b{ display:block; font-size:14px; }
.gr-top span{ display:block; font-size:11.5px; color:var(--ink-faint); }
.gr-card .gr-stars{ }
.gr-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; font-weight:300; }
.gr-g{ margin-left:auto; width:20px; height:20px; opacity:.7; }
@media(max-width:820px){ .gr-grid{ grid-template-columns:1fr; } }

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.socials{ display:flex; gap:12px; margin-top:24px; }
.socials a{ width:40px; height:40px; border-radius:9px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-dim); transition:all .3s var(--ease); }
.socials a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-3px); background:var(--accent-glow); }
.socials a svg{ width:18px; height:18px; }
.nav-cta .socials{ margin:0; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-feature{ display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden; padding:0; border-radius:var(--radius-lg); transition:border-color .4s, transform .4s var(--ease); }
.blog-feature:hover{ border-color:var(--accent-dim); transform:translateY(-3px); }
.blog-feature-media{ position:relative; min-height:300px; }
.blog-feature-c{ padding:42px 40px; display:flex; flex-direction:column; justify-content:center; }
.blog-feature-c .eyebrow{ color:var(--accent); }
.blog-feature-c h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); margin:14px 0 14px; }
.blog-feature-c p{ color:var(--ink-dim); font-weight:300; line-height:1.65; font-size:15px; }
.blog-cat{ position:absolute; top:18px; left:18px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); background:rgba(8,20,14,.6); border:1px solid var(--accent-dim); border-radius:999px; padding:6px 12px; }
.blog-more{ color:var(--accent); font-weight:500; font-size:14px; margin-top:22px; display:inline-block; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.blog-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; transition:border-color .4s, transform .4s var(--ease); }
.blog-card:hover{ border-color:var(--accent-dim); transform:translateY(-4px); }
.blog-thumb{ position:relative; height:160px; }
.blog-c{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.blog-c h3{ font-size:1.18rem; line-height:1.3; margin-bottom:10px; }
.blog-c p{ color:var(--ink-dim); font-size:14px; font-weight:300; line-height:1.6; }
.blog-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:18px; color:var(--ink-faint); font-size:12.5px; }
.blog-meta .blog-more{ margin:0; }
.blog-cta{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-top:34px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 38px; }
.blog-sub{ display:flex; gap:10px; }
.blog-sub input{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); padding:0 16px; height:48px; min-width:240px; font-family:var(--body); font-size:14px; }
.blog-sub input:focus{ outline:none; border-color:var(--accent); }
@media(max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } .blog-feature{ grid-template-columns:1fr; } }
@media(max-width:620px){ .blog-grid{ grid-template-columns:1fr; } .blog-sub{ width:100%; } .blog-sub input{ min-width:0; flex:1; } }

/* ============================================================
   CARD TILT + CURSOR GLOW + MICRO-MOTIONS
   ============================================================ */
.tiltable{ transform-style:preserve-3d; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; will-change:transform; }
.tiltable::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .45s var(--ease); background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--accent-glow), transparent 62%); z-index:0; }
.tiltable:hover::after{ opacity:1; }
.tiltable:hover{ border-color:var(--accent-dim); box-shadow:0 34px 80px -46px rgba(0,0,0,.85); }
.tiltable > *{ position:relative; z-index:1; }
/* thin top sheen that sweeps on hover */
.tiltable::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); z-index:2; border-radius:inherit; }
.tiltable:hover::before{ transform:scaleX(1); }

/* button shine sweep */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{ content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:left .6s var(--ease); }
.btn-primary:hover::after{ left:130%; }

/* kicker gets a tiny animated leading tick */
.kicker{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  html.has-js .grad{ background-size:220% 100%; animation:gradShift 7s linear infinite; }
}
@keyframes gradShift{ to{ background-position:220% 0; } }

/* count-up numbers + reveal already handled; add gentle float to hero meta */
@media (prefers-reduced-motion: no-preference){
  html.has-js .scroll-hint .mouse{ animation:mouseFloat 2.4s var(--ease) infinite; }
}
@keyframes mouseFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ============================================================
   IMAGE-INTEGRATIONS-PATTERN (Higgsfield-Sprint 2026-06-20)
   ============================================================ */

/* Service-Card Cover-Image (oben in Cards mit class="has-cover") */
.card.has-cover{ padding-top:0; }
.card-cover{
  margin:0 calc(var(--card-pad, 38px) * -1) 28px;
  aspect-ratio: 16/9;
  overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
  position:relative;
  background:var(--bg-2);
}
.card-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.card-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, var(--surface) 100%);
  pointer-events:none;
}
.card.has-cover:hover .card-cover img{ transform:scale(1.04); }

/* Page-Hero mit Hintergrundbild */
.page-hero.has-bg{ position:relative; overflow:hidden; isolation:isolate; }
.page-hero.has-bg::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  opacity:0.42;
  filter:saturate(0.85) contrast(1.05);
}
.page-hero.has-bg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 30%, transparent 70%, var(--bg) 100%);
}

/* Editorial Section mit großem Image */
.editorial-image{
  position:relative; margin:90px 0; aspect-ratio:21/9; overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
}
.editorial-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.editorial-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, var(--bg) 100%);
  pointer-events:none;
}
.editorial-image .editorial-caption{
  position:absolute; left:32px; bottom:28px; right:32px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--ink-dim);
}

/* Blog-Featured-Image (für blog.html cards mit Bildern) */
.blog-card.has-cover .blog-thumb{
  background-size:cover; background-position:center;
}
.blog-feature.has-cover .blog-thumb{
  background-size:cover; background-position:center; aspect-ratio:21/9;
}

/* Article-Hero in blog/*.html — Background-Image */
.article-hero{
  position:relative; padding:140px 0 60px; overflow:hidden; isolation:isolate;
}
.article-hero.has-bg::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  opacity:0.35;
}
.article-hero.has-bg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(7,13,10,0.6) 50%, var(--bg) 100%);
}