/* ==========================================================================
   codlab-wow.css — Identity Layer (v=1)
   Splash + serif italic display + handwriting marginalia + film grain +
   stat strip + bento + magnetic CTA + scroll-reveal.
   Loads AFTER codlab-dark.css. Overrides only when needed.
   ========================================================================== */

/* === Font faces === */
@font-face {
  font-family: 'Rumelaz Gekinsa';
  src: url('../fonts/wow/RumelazGekinsa-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rumelaz Gekinsa';
  src: url('../fonts/wow/RumelazGekinsa-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Casual Human';
  src: url('../fonts/wow/CasualHuman.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Monoblock';
  src: url('../fonts/wow/Monoblock-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Monoblock';
  src: url('../fonts/wow/Monoblock-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* === Tokens === */
:root {
  --wow-serif: 'Rumelaz Gekinsa', 'Editorial New', 'Tiempos Headline', Georgia, serif;
  --wow-hand: 'Casual Human', 'Caveat Brush', cursive;
  --wow-mono: 'Monoblock', 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --wow-aqua: #ea7a24;
  --wow-aqua-glow: rgba(234,122,36,0.45);
  --wow-aqua-deep: #b45412;
  --wow-amber: #ea7a24;
  --wow-amber-glow: rgba(234,122,36,0.45);
  --wow-ink: #0a0d12;
  --wow-ink-2: #14181f;
  --wow-paper: #f6f7f9;
  --wow-line: rgba(255,255,255,0.12);
}

/* === Film grain overlay — kills the AI-template feel === */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: wowGrain 8s steps(6) infinite;
}
@keyframes wowGrain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-8px,4px); }
  40%  { transform: translate(6px,-6px); }
  60%  { transform: translate(-4px,8px); }
  80%  { transform: translate(8px,2px); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: 0.025; }
}

/* === Hero typography upgrade === */
.h1-wow {
  font-family: var(--wow-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.018em;
  line-height: 1.04;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  color: #ffffff;
}
.h1-wow .accent { color: var(--wow-aqua); position: relative; display: inline-block; }
.h1-wow .accent::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -0.05em;
  height: 0.5em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 32' fill='none' stroke='%23ea7a24' stroke-width='3' stroke-linecap='round'><path d='M5,22 Q150,5 300,16 T595,12' opacity='0.85'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--wow-aqua-glow));
  animation: wowDrawUnder 1.6s 0.4s cubic-bezier(.5,0,.2,1) backwards;
}
@keyframes wowDrawUnder {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Highlight (yellow gradient) — pull-quote emphasis */
.wow-highlight {
  background: linear-gradient(115deg, transparent 0%, transparent 8%, rgba(234,122,36,0.35) 8%, rgba(234,122,36,0.35) 92%, transparent 92%);
  padding: 0 .12em;
}

/* Mono kicker uppercase */
.wow-kicker {
  font-family: var(--wow-mono);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--wow-aqua);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.wow-kicker::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--wow-aqua);
}

/* Marginalia — handwriting rotated annotation */
.wow-marginalia {
  font-family: var(--wow-hand);
  font-size: 1.08rem;
  color: var(--wow-aqua);
  display: inline-block;
  transform: rotate(-1.6deg);
  line-height: 1.2;
}
.wow-marginalia::before {
  content: "↳ ";
  opacity: 0.7;
  margin-right: 4px;
}

/* === Splash component — WOW cinematic v2 (2026-05-10) === */
#wow-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050608;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 500ms cubic-bezier(.4,0,.2,1), visibility 500ms ease, transform 500ms ease;
}
html.has-wow-splash #wow-splash { display: flex; }
#wow-splash.is-out { opacity: 0; visibility: hidden; transform: scale(1.04); }
html.has-wow-splash,
html.has-wow-splash body { overflow: hidden; }
html.has-wow-splash body > *:not(#wow-splash):not(script):not(style) { visibility: hidden; }

/* Aurora — 3 orb fluttuanti in lenta rotazione */
.wow-splash-aurora {
  position: absolute; inset: -20%;
  z-index: 0; pointer-events: none;
  filter: blur(70px); opacity: 0.55;
  animation: wowAuroraSpin 24s linear infinite;
}
.wow-splash-aurora .orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.wow-splash-aurora .orb-1 {
  width: 60%; height: 60%; top: -10%; right: -5%;
  background: radial-gradient(circle, rgba(234,122,36,0.7), transparent 60%);
  animation: wowOrbDrift 14s ease-in-out infinite alternate;
}
.wow-splash-aurora .orb-2 {
  width: 50%; height: 50%; bottom: -10%; left: -5%;
  background: radial-gradient(circle, rgba(180,84,18,0.55), transparent 60%);
  animation: wowOrbDrift 18s ease-in-out -6s infinite alternate-reverse;
}
.wow-splash-aurora .orb-3 {
  width: 45%; height: 45%; top: 30%; left: 35%;
  background: radial-gradient(circle, rgba(253,186,116,0.4), transparent 60%);
  animation: wowOrbDrift 16s ease-in-out -3s infinite alternate;
}
@keyframes wowAuroraSpin { to { transform: rotate(360deg); } }
@keyframes wowOrbDrift { to { transform: translate(-40px, 30px) scale(1.08); } }

/* Architectural grid overlay */
#wow-splash::before {
  content: ""; position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

/* Crosshair architectural lines */
.wow-splash-crosshair { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wow-splash-crosshair .line { position: absolute; opacity: 0; }
.wow-splash-crosshair .line-h {
  top: 50%; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,122,36,0.4), transparent);
  transform-origin: center;
  animation: wowCrosshairH 1200ms 200ms cubic-bezier(.2,.8,.2,1) forwards;
}
.wow-splash-crosshair .line-v {
  top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(234,122,36,0.4), transparent);
  animation: wowCrosshairV 1200ms 200ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes wowCrosshairH { from { opacity: 0; transform: scaleX(0); } to { opacity: 0.5; transform: scaleX(1); } }
@keyframes wowCrosshairV { from { opacity: 0; transform: scaleY(0); } to { opacity: 0.5; transform: scaleY(1); } }

/* Particle field — 14 dot in profondità */
.wow-splash-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wow-splash-particles span {
  position: absolute; width: 3px; height: 3px;
  border-radius: 50%; background: var(--wow-amber);
  box-shadow: 0 0 6px rgba(234,122,36,0.6); opacity: 0;
  animation: wowParticleFloat 6s ease-in-out infinite, wowParticleFadeIn 800ms 600ms forwards;
}
.wow-splash-particles span:nth-child(1)  { top: 12%; left:  8%; animation-delay: 0s, 800ms; }
.wow-splash-particles span:nth-child(2)  { top: 25%; left: 88%; animation-delay: -1s, 900ms; width:2px; height:2px; }
.wow-splash-particles span:nth-child(3)  { top: 70%; left: 12%; animation-delay: -2s, 700ms; width:4px; height:4px; }
.wow-splash-particles span:nth-child(4)  { top: 85%; left: 78%; animation-delay: -3s, 1000ms; }
.wow-splash-particles span:nth-child(5)  { top: 18%; left: 45%; animation-delay: -4s, 1100ms; width:2px; height:2px; }
.wow-splash-particles span:nth-child(6)  { top: 82%; left: 32%; animation-delay: -5s, 1200ms; }
.wow-splash-particles span:nth-child(7)  { top: 48%; left: 92%; animation-delay: -1.5s, 1300ms; width:2px; height:2px; }
.wow-splash-particles span:nth-child(8)  { top: 60%; left:  5%; animation-delay: -2.5s, 950ms; }
.wow-splash-particles span:nth-child(9)  { top: 8%;  left: 65%; animation-delay: -3.5s, 1400ms; width:4px; height:4px; }
.wow-splash-particles span:nth-child(10) { top: 92%; left: 55%; animation-delay: -4.5s, 850ms; width:2px; height:2px; }
.wow-splash-particles span:nth-child(11) { top: 38%; left: 22%; animation-delay: -0.5s, 1100ms; }
.wow-splash-particles span:nth-child(12) { top: 55%; left: 70%; animation-delay: -2.2s, 1250ms; width:2px; height:2px; }
.wow-splash-particles span:nth-child(13) { top: 30%; left: 18%; animation-delay: -3.8s, 1350ms; }
.wow-splash-particles span:nth-child(14) { top: 75%; left: 85%; animation-delay: -1.2s, 1450ms; width:2px; height:2px; }
@keyframes wowParticleFloat {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(8px, -10px); }
  50%      { transform: translate(-6px, 4px); }
  75%      { transform: translate(4px, 8px); }
}
@keyframes wowParticleFadeIn { to { opacity: 0.5; } }

/* Splash inner content */
.wow-splash-inner {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 28px; max-width: 92vw; padding: 0 20px;
}

.wow-splash-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--wow-mono);
  font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  opacity: 0; animation: wowFadeIn 600ms 200ms forwards;
}
.wow-splash-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wow-amber);
  box-shadow: 0 0 14px var(--wow-amber-glow), 0 0 28px var(--wow-amber-glow);
  transform: scale(0);
  animation: wowDotPulse 500ms 200ms cubic-bezier(.6,-.2,.2,1.4) forwards,
             wowDotBreath 1.6s 700ms ease-in-out infinite;
}
@keyframes wowDotPulse { to { transform: scale(1); } }
@keyframes wowDotBreath {
  0%, 100% { box-shadow: 0 0 14px var(--wow-amber-glow), 0 0 28px var(--wow-amber-glow); }
  50%      { box-shadow: 0 0 22px var(--wow-amber-glow), 0 0 50px var(--wow-amber-glow); }
}

/* Logo with halo + shimmer */
.wow-splash-logo-wrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.wow-splash-halo {
  position: absolute; inset: -40% -20%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(234,122,36,0.45), transparent 60%);
  filter: blur(40px); opacity: 0;
  animation: wowHaloPulse 700ms 500ms ease-out forwards,
             wowHaloBreath 4s 1200ms ease-in-out infinite;
}
@keyframes wowHaloPulse { to { opacity: 1; } }
@keyframes wowHaloBreath { 50% { opacity: 0.7; transform: scale(1.06); } }
.wow-splash-logo-img {
  width: clamp(240px, 42vw, 480px); height: auto; display: block;
  opacity: 0; transform: scale(1.4);
  filter: drop-shadow(0 12px 40px rgba(234,122,36,0.55));
  animation: wowLogoSlam 1100ms 350ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes wowLogoSlam {
  0%   { opacity: 0; transform: scale(1.4); filter: drop-shadow(0 0 0 rgba(234,122,36,0)); }
  60%  { opacity: 1; filter: drop-shadow(0 18px 60px rgba(234,122,36,0.65)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 8px 24px rgba(234,122,36,0.3)); }
}
.wow-splash-shimmer {
  position: absolute; top: 0; bottom: 0; left: -50%; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  filter: blur(8px); pointer-events: none; opacity: 0;
  animation: wowShimmer 1800ms 1300ms cubic-bezier(.4,0,.4,1) forwards;
}
@keyframes wowShimmer {
  0%   { opacity: 0; left: -50%; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; left: 130%; }
}

/* Tagline typewriter (serif italic) */
.wow-splash-tagline {
  display: inline-flex; align-items: center;
  font-family: var(--wow-serif); font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.32rem);
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.005em; min-height: 1.4em;
  opacity: 0; animation: wowFadeIn 400ms 1500ms forwards;
}
.wow-splash-tagline .tw-text {
  display: inline-block; white-space: nowrap;
  overflow: hidden; width: 0;
  animation: wowTypewriter 1800ms 1700ms steps(46) forwards;
}
.wow-splash-tagline .tw-cursor {
  display: inline-block; width: 2px; height: 1.1em;
  background: var(--wow-amber); margin-left: 4px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--wow-amber-glow);
  animation: wowCursorBlink 600ms steps(2) infinite;
}
@keyframes wowTypewriter { to { width: 100%; } }
@keyframes wowCursorBlink { 50% { opacity: 0; } }
@media (max-width: 600px) {
  .wow-splash-tagline .tw-text {
    white-space: normal; width: auto;
    animation: wowFadeInScale 600ms 1700ms forwards;
  }
}
@keyframes wowFadeInScale {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Counter pills row */
.wow-splash-pills {
  display: inline-flex; align-items: center; gap: 24px;
  flex-wrap: wrap; justify-content: center; margin-top: 8px;
}
.wow-splash-pills .pill {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(8px);
  animation: wowPillIn 600ms calc(2400ms + var(--d, 0ms)) cubic-bezier(.2,.8,.2,1) forwards;
}
.wow-splash-pills .pill .num {
  font-family: var(--wow-serif); font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
  color: var(--wow-amber); font-variant-numeric: tabular-nums;
}
.wow-splash-pills .pill .num b { color: var(--wow-amber); font-weight: 400; }
.wow-splash-pills .pill .lbl {
  font-family: var(--wow-mono); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); white-space: nowrap;
}
.wow-splash-pills .sep {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2), transparent);
  opacity: 0; animation: wowFadeIn 400ms 2700ms forwards;
}
@keyframes wowPillIn { to { opacity: 1; transform: translateY(0); } }

/* Bottom signature with hairlines */
.wow-splash-signature {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--wow-mono); font-size: 0.62rem;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  opacity: 0; animation: wowFadeIn 600ms 2900ms forwards;
}
.wow-splash-signature .line-thin {
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,122,36,0.5), transparent);
}

/* Skip pill with kbd hint */
.wow-splash-skip {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wow-mono); font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 14px 8px 8px; border-radius: 24px;
  cursor: pointer; opacity: 0;
  animation: wowFadeIn 500ms 3300ms forwards;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.wow-splash-skip .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 2px 6px;
  background: rgba(234,122,36,0.15);
  border: 1px solid rgba(234,122,36,0.4);
  border-radius: 4px; font-size: 0.58rem;
  letter-spacing: 0.06em; color: var(--wow-amber);
  text-transform: lowercase;
}
.wow-splash-skip:hover {
  color: #fff;
  border-color: var(--wow-amber);
  background: rgba(234,122,36,0.08);
}

@keyframes wowFadeIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #wow-splash { transition: opacity 200ms ease; }
  #wow-splash *,
  .wow-splash-aurora, .wow-splash-aurora .orb,
  .wow-splash-particles span,
  .wow-splash-crosshair .line,
  .wow-splash-halo, .wow-splash-logo-img, .wow-splash-shimmer,
  .wow-splash-tagline .tw-text, .wow-splash-tagline .tw-cursor,
  .wow-splash-pills .pill, .wow-splash-pills .sep,
  .wow-splash-signature, .wow-splash-skip,
  .wow-splash-eyebrow .dot {
    animation: none !important; opacity: 1 !important;
    transform: none !important; width: auto !important;
  }
}

/* === Stat strip — dark band ribbon under hero === */
.wow-stat-strip {
  background: linear-gradient(180deg, var(--wow-ink) 0%, var(--wow-ink-2) 100%);
  border-top: 1px solid rgba(234,122,36,0.18);
  border-bottom: 1px solid rgba(234,122,36,0.18);
  padding: 36px 0;
  position: relative;
  overflow: hidden;
}
.wow-stat-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, transparent 0%, rgba(234,122,36,0.04) 50%, transparent 100%);
  pointer-events: none;
}
.wow-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
  position: relative;
}
.wow-stat-grid > * + * {
  border-left: 1px solid rgba(255,255,255,0.08);
  padding-left: 24px;
}
.wow-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wow-stat-num {
  font-family: var(--wow-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wow-stat-num.is-aqua { color: var(--wow-aqua); font-style: italic; }
.wow-stat-label {
  font-family: var(--wow-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 720px) {
  .wow-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .wow-stat-grid > * + * { border-left: none; padding-left: 0; }
  .wow-stat-grid > *:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08); padding-right: 18px; }
}

/* === Bento grid asimmetrico — for service sections === */
.wow-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
}
.wow-bento-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f6f7f9 100%);
  border: 1px solid rgba(15,18,24,0.08);
  border-radius: 18px;
  padding: 28px;
  overflow: hidden;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms ease, border-color 400ms ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wow-bento-card:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 30px 60px -30px rgba(15,18,24,0.18);
  border-color: rgba(234,122,36,0.4);
}
.wow-bento-card.is-dark {
  background: linear-gradient(160deg, var(--wow-ink-2) 0%, var(--wow-ink) 100%);
  color: #fff;
  border-color: rgba(234,122,36,0.2);
}
.wow-bento-card.is-dark .wow-bento-title { color: #fff; }
.wow-bento-card.is-dark .wow-bento-text { color: rgba(255,255,255,0.72); }

/* Asymmetric layout */
.wow-bento-card.span-hero { grid-column: span 4; grid-row: span 2; }
.wow-bento-card.span-tall { grid-column: span 2; grid-row: span 2; }
.wow-bento-card.span-wide { grid-column: span 4; }
.wow-bento-card.span-square { grid-column: span 2; }

@media (max-width: 991px) {
  .wow-bento { grid-template-columns: repeat(2, 1fr); }
  .wow-bento-card.span-hero,
  .wow-bento-card.span-tall,
  .wow-bento-card.span-wide,
  .wow-bento-card.span-square { grid-column: span 2; grid-row: auto; }
}

.wow-bento-eyebrow {
  font-family: var(--wow-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wow-aqua);
  margin-bottom: 14px;
}
.wow-bento-title {
  font-family: var(--wow-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: #14181f;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.wow-bento-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #4b5563;
  margin-bottom: 0;
}
.wow-bento-cta {
  margin-top: 18px;
  font-family: var(--wow-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wow-aqua);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: gap 280ms ease, color 280ms ease;
}
.wow-bento-cta:hover { gap: 14px; color: var(--wow-aqua-deep); }
.wow-bento-card.is-dark .wow-bento-cta { color: var(--wow-aqua); }

/* Decorative orb in bento corner */
.wow-bento-card .wow-orb {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.wow-bento-card.is-dark .wow-orb {
  background: var(--wow-aqua);
  top: -60px; right: -60px;
  opacity: 0.3;
}
.wow-bento-card > * { position: relative; z-index: 1; }

/* === Magnetic CTA — subtle hover scale + glow === */
.wow-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50rem;
  font-family: var(--wow-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease, background-color 320ms ease;
  will-change: transform;
}
.wow-magnetic.is-primary {
  background: var(--wow-aqua);
  color: #fff;
  box-shadow: 0 12px 30px -12px var(--wow-aqua-glow);
}
.wow-magnetic.is-primary:hover {
  background: var(--wow-aqua-deep);
  box-shadow: 0 20px 50px -15px var(--wow-aqua-glow), 0 0 0 4px rgba(234,122,36,0.18);
}
.wow-magnetic.is-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.wow-magnetic.is-ghost:hover {
  border-color: var(--wow-aqua);
  background: rgba(234,122,36,0.08);
}
.wow-magnetic .arrow {
  display: inline-block;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.wow-magnetic:hover .arrow { transform: translateX(4px); }

/* === Scroll-reveal === */
[data-wow-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(.2,.8,.2,1), transform 800ms cubic-bezier(.2,.8,.2,1);
}
[data-wow-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-wow-reveal-delay="1"] { transition-delay: 80ms; }
[data-wow-reveal-delay="2"] { transition-delay: 160ms; }
[data-wow-reveal-delay="3"] { transition-delay: 240ms; }
[data-wow-reveal-delay="4"] { transition-delay: 320ms; }
[data-wow-reveal-delay="5"] { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
  [data-wow-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* === Service icon glow on hover (existing .service-icon) === */
.service-icon {
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
}
.service-icon:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 0 20px 40px -10px var(--wow-aqua-glow);
}

/* === Repositioning: hero subtitle treatment === */
.wow-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
}

/* === Trust line — used near CTA === */
.wow-trust {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--wow-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.wow-trust span { display: inline-flex; align-items: center; gap: 6px; }
.wow-trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wow-aqua);
  box-shadow: 0 0 8px var(--wow-aqua-glow);
}

/* === Cinematic vignette on hero (subtle) === */
.home-hero::after,
.hero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
}

/* ================================================================
   SECTION-LEVEL IDENTITY — propaga il WOW oltre il primo fold
   ================================================================ */

/* Section eyebrow — replaces "ECHTE KUNDEN, ECHTE WEBSITES" black mono
   Used in section headers across the site. */
.eyebrow-wow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wow-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--wow-aqua-deep);
  margin-bottom: 18px;
}
.eyebrow-wow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--wow-aqua);
}
.eyebrow-wow.is-light { color: var(--wow-aqua); }
.eyebrow-wow.is-light::before { background: var(--wow-aqua); }

/* H2 in serif italic editoriale — replaces Thicccboi sans bold */
.h2-wow {
  font-family: var(--wow-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: #14181f;
  margin-bottom: 1.2rem;
}
.h2-wow.is-light { color: #fff; }
.h2-wow .accent {
  color: var(--wow-aqua-deep);
  position: relative;
  display: inline-block;
}
.h2-wow.is-light .accent { color: var(--wow-aqua); }
.h2-wow .accent::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -0.05em;
  height: 0.4em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 32' fill='none' stroke='%23ea7a24' stroke-width='3' stroke-linecap='round'><path d='M5,22 Q150,5 300,16 T595,12' opacity='0.85'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* H3 lead-in editoriale */
.h3-wow {
  font-family: var(--wow-serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  color: #14181f;
  letter-spacing: -0.005em;
  margin-bottom: 0.6rem;
}
.h3-wow.is-italic { font-style: italic; }
.h3-wow.is-light { color: #fff; }

/* Section sub-paragraph */
.lead-wow {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.6;
  color: #4b5563;
  max-width: 60ch;
}
.lead-wow.is-light { color: rgba(255,255,255,0.78); }

/* Section spacing — replace Sandbox theme py-* with predictable rhythm */
.section-wow {
  padding: clamp(3.5rem, 6.5vw, 6rem) 0;
  position: relative;
}
.section-wow.is-dark {
  background: linear-gradient(180deg, var(--wow-ink-2) 0%, var(--wow-ink) 100%);
  color: #fff;
}
.section-wow.is-paper { background: var(--wow-paper); }
.section-wow.is-white { background: #fff; }

/* Section header block — eyebrow + H2 + lead, centered or left */
.section-head {
  margin-bottom: 3rem;
  max-width: 780px;
}
.section-head.is-centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.is-centered .eyebrow-wow,
.section-head.is-centered .lead-wow {
  margin-left: auto;
  margin-right: auto;
}

/* Pill/tag replacement — "WEBSEITE FLATRATE" no longer Bootstrap orange */
.tag-wow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50rem;
  background: rgba(234,122,36,0.1);
  border: 1px solid rgba(234,122,36,0.3);
  color: var(--wow-aqua-deep);
  font-family: var(--wow-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tag-wow.is-action {
  background: rgba(234,122,36,0.1);
  border-color: rgba(234,122,36,0.35);
  color: #b45412;
}
.tag-wow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wow-aqua);
  box-shadow: 0 0 6px var(--wow-aqua-glow);
}
.tag-wow.is-action .dot { background: var(--wow-amber); box-shadow: 0 0 6px var(--wow-amber-glow); }

/* Section divider — subtle horizontal mark with center dot, replaces hr */
.divider-wow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 3rem 0;
}
.divider-wow::before,
.divider-wow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(15,18,24,0.08);
}
.divider-wow span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wow-aqua);
  box-shadow: 0 0 6px var(--wow-aqua-glow);
}

/* Card baseline — for showcase grids, project cards, etc. */
.card-wow {
  background: #fff;
  border: 1px solid rgba(15,18,24,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1), box-shadow 480ms ease, border-color 320ms ease;
}
.card-wow:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(15,18,24,0.18);
  border-color: rgba(234,122,36,0.4);
}

/* Pricing card revamp — for the "70 €" hero on home + webservice */
.pricing-card-wow {
  background: linear-gradient(160deg, #fff 0%, #f6f7f9 100%);
  border: 1.5px solid rgba(234,122,36,0.4);
  border-radius: 22px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.pricing-card-wow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--wow-aqua) 0%, var(--wow-amber) 100%);
}
.pricing-card-wow .price {
  font-family: var(--wow-serif);
  font-size: clamp(3.2rem, 5vw, 4.4rem);
  line-height: 1;
  color: #14181f;
  letter-spacing: -0.02em;
}
.pricing-card-wow .price small {
  font-family: var(--wow-mono);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-left: 6px;
}
.pricing-card-wow .price-meta {
  font-family: var(--wow-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 8px;
}

/* === Footer redesign — coerent with WOW identity === */
footer[role="contentinfo"] {
  background: linear-gradient(180deg, #14181f 0%, var(--wow-ink) 100%) !important;
  color: rgba(255,255,255,0.6) !important;
  position: relative;
  border-top: none !important;
}
footer[role="contentinfo"]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--wow-amber) 50%, transparent 100%);
  opacity: 0.6;
}
footer[role="contentinfo"] .widget-title {
  font-family: var(--wow-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--wow-amber) !important;
  font-weight: 500 !important;
  margin-bottom: 1rem !important;
}
footer[role="contentinfo"] a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 220ms ease;
}
footer[role="contentinfo"] a:hover {
  color: var(--wow-amber) !important;
}
footer[role="contentinfo"] .widget p {
  color: rgba(255,255,255,0.55);
  font-size: 0.88rem;
  line-height: 1.6;
}
footer[role="contentinfo"] address {
  color: rgba(255,255,255,0.6) !important;
}
footer[role="contentinfo"] .nav.social a:hover {
  color: var(--wow-amber) !important;
}
footer[role="contentinfo"] .nav.social a:hover i {
  color: var(--wow-amber) !important;
}
footer[role="contentinfo"] hr {
  border-color: rgba(255,255,255,0.06) !important;
}
/* Make the contact info bar mono */
footer[role="contentinfo"] .border-t {
  border-color: rgba(255,255,255,0.06) !important;
}

/* === KI cards grid — fallback if Tailwind grid utilities not bundled === */
.ki-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .ki-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ki-cards-grid { grid-template-columns: 1fr; } }

/* === Cookie banner slim override — actual class is .codlab-cookie-banner === */
.codlab-cookie-banner {
  padding: 12px 20px !important;
  border-top: 1px solid rgba(234,122,36,0.25) !important;
  background: rgba(10,13,18,0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3) !important;
}
.codlab-cookie-banner .codlab-cookie-content,
.codlab-cookie-banner [class*="cookie-content"],
.codlab-cookie-banner > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  max-width: 1200px;
  margin: 0 auto;
}
.codlab-cookie-banner .codlab-cookie-text { min-width: 0; flex: 1; }
.codlab-cookie-banner .codlab-cookie-text h3 {
  display: none !important;
}
.codlab-cookie-banner .codlab-cookie-text p {
  font-family: var(--wow-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: rgba(255,255,255,0.78) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.codlab-cookie-banner .codlab-cookie-text a,
.codlab-cookie-banner .codlab-cookie-text .codlab-cookie-link {
  color: var(--wow-aqua) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.codlab-cookie-banner .codlab-cookie-actions {
  gap: 8px !important;
  flex-shrink: 0;
  display: flex !important;
}
.codlab-cookie-banner .codlab-btn-cookie {
  padding: 8px 16px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  font-family: var(--wow-mono) !important;
  text-transform: uppercase !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
  min-height: auto !important;
  line-height: 1 !important;
}
.codlab-cookie-banner .codlab-btn-cookie-accept,
.codlab-cookie-banner #codlabCookieAcceptAll {
  background: var(--wow-aqua) !important;
  color: #fff !important;
  border: 1px solid var(--wow-aqua) !important;
}
.codlab-cookie-banner .codlab-btn-cookie-accept:hover,
.codlab-cookie-banner #codlabCookieAcceptAll:hover {
  background: var(--wow-aqua-deep) !important;
}
.codlab-cookie-banner .codlab-btn-cookie-reject,
.codlab-cookie-banner .codlab-btn-cookie-settings,
.codlab-cookie-banner #codlabCookieReject,
.codlab-cookie-banner #codlabCookieSettings {
  background: transparent !important;
  color: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.codlab-cookie-banner .codlab-btn-cookie-reject:hover,
.codlab-cookie-banner .codlab-btn-cookie-settings:hover {
  border-color: var(--wow-aqua) !important;
  color: #fff !important;
  background: rgba(234,122,36,0.08) !important;
}
@media (max-width: 767.98px) {
  .codlab-cookie-banner { padding: 10px 14px !important; }
  .codlab-cookie-banner > div:first-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .codlab-cookie-banner .codlab-cookie-text p {
    white-space: normal !important;
    font-size: 0.66rem !important;
    max-height: 2.8em;
    overflow: hidden;
  }
  .codlab-cookie-banner .codlab-cookie-actions {
    justify-content: stretch !important;
    flex-wrap: wrap;
  }
  .codlab-cookie-banner .codlab-btn-cookie {
    flex: 1 1 30%;
    padding: 8px 10px !important;
    font-size: 0.62rem !important;
    min-width: 0;
  }
}