/* === 1. DESIGN TOKENS === */
:root {
  --bg:           #F8F5F0;
  --surface:      #FFFFFF;
  --glass:        rgba(255, 255, 255, 0.55);
  --border:       rgba(0, 0, 0, 0.055);
  --border-warm:  rgba(180, 155, 135, 0.18);

  --text:         #1C1410;
  --text-muted:   #8C7D74;
  --text-subtle:  #BFB3AB;

  --accent:       #E8651A;
  --accent-soft:  #F09060;
  --accent-pale:  #FAEADE;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Inter', sans-serif;

  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-card: 32px;
  --radius-pill: 999px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;

  --shadow-card:  0 2px 12px rgba(0,0,0,0.05), 0 12px 40px rgba(0,0,0,0.06);
  --shadow-float: 0 24px 80px rgba(0,0,0,0.08);
  --shadow-sm:    0 1px 6px rgba(0,0,0,0.05);

  --nav-h: 76px;
}

/* === 2. DARK MODE === */
[data-theme="dark"] {
  --bg:          #0F0D0B;
  --surface:     #1C1916;
  --glass:       rgba(28, 25, 22, 0.75);
  --border:      rgba(255, 255, 255, 0.065);
  --border-warm: rgba(255, 220, 180, 0.07);
  --text:        #EDE8E0;
  --text-muted:  #7A6E68;
  --text-subtle: #3D3530;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.25), 0 12px 40px rgba(0,0,0,0.3);
  --shadow-float:0 24px 80px rgba(0,0,0,0.4);
  --shadow-sm:   0 1px 6px rgba(0,0,0,0.2);
}
[data-theme="dark"] .hero-orb  { opacity: 0.38; }
[data-theme="dark"] .hero-orb-2 { opacity: 0.2; }
[data-theme="dark"] .site-nav.nav-scrolled .nav-island {
  background: rgba(18, 16, 14, 0.80);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .site-nav.island-mode .nav-island {
  background: rgba(18, 16, 14, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .nav-mobile { background: rgba(15, 13, 11, 0.97); }
[data-theme="dark"] .btn-primary { background: var(--text); color: var(--bg); }
[data-theme="dark"] .about-card { background: var(--surface); }
[data-theme="dark"] .stats-grid { background: var(--border); }
[data-theme="dark"] .stat-card  { background: var(--surface); }
[data-theme="dark"] .spotify-section { background: var(--surface); }
[data-theme="dark"] .scroll-progress { background: var(--accent); }
[data-theme="dark"] .featured-card-visual { background: #14110E; }
[data-theme="dark"] .project-card-thumb { background: #14110E; }
[data-theme="dark"] .page-hero-inner h1 { color: var(--text); }

/* === 3. SMOOTH THEME TRANSITIONS === */
body,
.nav-island,
.link-card,
.about-card,
.stat-card,
.featured-card,
.skill-badge,
.tech-badge,
.spotify-section,
.project-card,
.demo-modal-window,
.browser-chrome,
.browser-url-bar,
.nav-mobile {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease;
}

/* === 4. RESET + BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: none; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* === 5. TYPOGRAPHY === */
h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-3);
}

.section-headline {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--text);
  margin-bottom: var(--space-8);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.text-center { text-align: center; }

/* === 6. LAYOUT === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-8); }
.section { padding: var(--space-32) 0; }
@media (min-width: 900px) { .section { padding: 11rem 0; } }
.section--surface { background: var(--surface); }

/* === 7. CUSTOM CURSOR === */

/* Kill the native cursor everywhere */
*, *::before, *::after { cursor: none !important; }

.cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 100000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--text);
  top: 0; left: 0;
  opacity: 0;
  transition: background-color 0.2s, opacity 0.3s ease;
  will-change: left, top;
}
/* Ring is kept in HTML for backwards compat but completely hidden */
.cursor-ring { display: none !important; }

/* ── Cursor blob ────────────────────────────────────────────── */
.cursor-label {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  top: 0; left: 0;
  width: 80px; height: 80px;
  background: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  color: var(--bg);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.25s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease;
  will-change: transform, opacity, left, top;
  overflow: hidden;
}
[data-theme="dark"] .cursor-label { background: var(--text); color: var(--bg); }
.cursor-label--accent { background: var(--accent) !important; color: #fff !important; }
.cursor-label svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* Blob active: scales in, dot hides */
body.cursor-blob-active .cursor-label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
body.cursor-blob-active .cursor-dot { opacity: 0 !important; }

/* Touch / stylus: restore native cursor, hide custom elements */
@media (pointer: coarse) {
  *, *::before, *::after { cursor: auto !important; }
  button, a, [role="button"] { cursor: pointer !important; }
  .cursor-dot, .cursor-ring, .cursor-label { display: none !important; }
}

/* === 8. SCROLL PROGRESS === */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1.5px;
  width: 0%;
  background: var(--accent);
  z-index: 10000;
  transition: width 50ms linear;
}

/* === 9. NAVIGATION === */
/* ─── NAVIGATION: DYNAMIC ISLAND ───────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 10px 16px 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}

.nav-island {
  width: 100%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  pointer-events: all;
  will-change: border-radius, max-width, transform;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    backdrop-filter 0.4s ease,
    max-width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    padding 0.4s ease;
}

.site-nav.nav-scrolled .nav-island {
  background: rgba(248, 245, 240, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.site-nav.island-mode .nav-island {
  max-width: 620px;
  height: 52px;
  padding: 0 18px;
  border-radius: 100px;
  background: rgba(248, 245, 240, 0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nav-logo {
  display: flex;
  align-items: center;
  transition: opacity var(--dur-fast);
  flex-shrink: 0;
}
.nav-logo:hover { opacity: 0.65; }

.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--dur-fast), transform 0.4s cubic-bezier(0.22,1,0.36,1);
  will-change: transform, height;
}
.site-nav.island-mode .nav-logo-img { height: 34px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  transition: gap 0.4s ease;
}
.site-nav.island-mode .nav-links { gap: var(--space-4); }

.nav-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  transition: color var(--dur-fast);
}
.nav-link:hover, .nav-link.active { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.theme-toggle:hover { background: var(--border); color: var(--text); transform: rotate(15deg); }
.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
  padding: 4px;
}
.nav-toggle span {
  display: block; height: 1px;
  background: var(--text); border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile {
  position: fixed;
  inset: 0;
  background: rgba(248, 245, 240, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav-mobile.open { opacity: 1; pointer-events: all; }
.nav-mobile-link {
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  transition: color var(--dur-fast);
}
.nav-mobile-link:hover { color: var(--text); }

/* === 10. BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring),
              background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast), box-shadow var(--dur-base);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }

.btn-primary {
  background: var(--text);
  color: #F8F5F0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.18); opacity: 0.9; }

.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(28, 20, 16, 0.18);
  color: var(--text);
}
[data-theme="dark"] .btn-outline { border-color: rgba(237,232,224,0.18); }
.btn-outline:hover { background: rgba(28,20,16,0.04); border-color: rgba(28,20,16,0.3); }
[data-theme="dark"] .btn-outline:hover { background: rgba(237,232,224,0.06); border-color: rgba(237,232,224,0.3); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 13px 20px;
}
.btn-ghost:hover { color: var(--text); opacity: 1; }

/* === 11. HERO === */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Orbs: no CSS transform so JS can set transform freely */
.hero-orb {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 50%, #E8651A 0%, #F09060 28%, transparent 68%);
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  right: -100px;
  top: calc(50% - 350px);
  will-change: transform;
  animation: orb-breathe 8s ease-in-out infinite alternate;
}
.hero-orb-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #F09060 0%, transparent 70%);
  filter: blur(70px);
  opacity: 0.12;
  pointer-events: none;
  left: -80px;
  bottom: 10%;
  will-change: transform;
  animation: orb-breathe 12s ease-in-out infinite alternate-reverse;
}
@keyframes orb-breathe {
  from { opacity: 0.22; }
  to   { opacity: 0.32; }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: var(--nav-h);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}
.hero-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--text);
}
.hero-name em {
  font-style: italic;
  color: var(--accent);
}

.hero-tagline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  color: var(--text-muted);
  min-height: 1.8em;
}
.hero-tagline .typed-cursor { color: var(--accent); }

.hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.hero-scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  z-index: 1;
}
.hero-scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--accent-soft));
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--accent) 50%, transparent 100%);
  animation: scroll-drip 1.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes scroll-drip {
  0%   { top: -100%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.hero-scroll span {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--text-subtle);
  text-transform: uppercase;
  animation: scroll-text-pulse 3s ease-in-out infinite;
}
@keyframes scroll-text-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* === 12. STATS SECTION === */
.stats-section {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.stat-card {
  background: none;
  border: none;
  box-shadow: none;
  border-right: 1px solid var(--border);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
}
.stat-card:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-number.stat-text {
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { border-right: none; border-bottom: 1px solid var(--border); padding: var(--space-6) 0; }
  .stat-card:last-child { border-bottom: none; }
}

/* === 13. ABOUT SECTION === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-16);
  align-items: center;
}
.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4/5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
.about-card-orb {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #F09060 0%, transparent 70%);
  filter: blur(50px);
  opacity: 0.18;
  bottom: -40px; right: -40px;
  pointer-events: none;
}
/* 3D logo card */
.about-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.about-logo-float {
  animation: float-logo 4s ease-in-out infinite;
}
.about-logo-float.tilt-active { animation-play-state: paused; }
@keyframes float-logo {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
.about-logo-3d {
  width: 140px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(232,101,26,0.32));
  transition: filter 0.4s;
  will-change: transform;
}
.about-card:hover .about-logo-3d {
  filter: drop-shadow(0 18px 44px rgba(232,101,26,0.52));
}
.about-card-glare {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.12) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}
.about-card:hover .about-card-glare { opacity: 1; }
.about-card-badge {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 400;
}
.about-card-badge span { font-size: 1.1rem; font-weight: 300; margin-right: 4px; }

.about-text { display: flex; flex-direction: column; }
.about-bio {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
  max-width: 65ch;
}
.about-bio strong { color: var(--text); font-weight: 400; }
.about-bio em { font-style: italic; }

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.skill-badge {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--surface);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.skill-badge:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* === 13b. SERVICES SECTION === */
.services-section { background: transparent; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(232,101,26,0.2);
}
.service-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: background var(--dur-fast);
}
[data-theme="dark"] .service-icon { background: rgba(232,101,26,0.1); }
.service-card:hover .service-icon { background: var(--accent); color: white; }
.service-card h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.service-card p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}
.service-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
}
.service-card-wide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (max-width: 600px) {
  .service-card--wide { flex-direction: column; align-items: flex-start; }
}

/* === 14. FEATURED PROJECTS === */
.featured-section { background: transparent; }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.featured-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
@media (hover: hover) and (pointer: fine) {
  .featured-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-float);
  }
}
.featured-card-visual {
  height: 280px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.featured-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity 0.6s ease;
}
.featured-card-thumb.loaded { opacity: 1; }
.featured-card:hover .featured-card-thumb { transform: scale(1.03); }

.featured-card-orb {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #E8651A 0%, #F09060 30%, transparent 70%);
  filter: blur(55px);
  opacity: 0.22;
  transition: opacity var(--dur-slow), transform var(--dur-slow) var(--ease-out);
}
.featured-card:hover .featured-card-orb {
  opacity: 0.35;
  transform: scale(1.1);
}
.featured-card-name {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-subtle);
  position: relative;
  transition: color var(--dur-base);
}
.featured-card:hover .featured-card-name { color: var(--text-muted); }
.featured-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.featured-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.featured-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.featured-more {
  text-align: center;
  padding-top: var(--space-4);
}

/* === 15. CONNECT / LINKS SECTION === */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}
.link-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base),
              border-color var(--dur-base);
}
.link-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(232, 101, 26, 0.10),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .link-card:hover::before { opacity: 1; }
}
.link-card > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: rgba(0,0,0,0.1);
  }
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .link-card:hover { border-color: rgba(255,255,255,0.12); }
}

.link-card-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.link-card:hover .link-card-icon { background: var(--accent-pale); color: var(--accent); }
[data-theme="dark"] .link-card:hover .link-card-icon { background: rgba(232,101,26,0.12); color: var(--accent); }

.link-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.link-card-label { font-size: 0.9rem; font-weight: 500; color: var(--text); }
.link-card-desc {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-card-arrow {
  flex-shrink: 0;
  color: var(--text-subtle);
  transition: color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.link-card:hover .link-card-arrow { color: var(--text); transform: translate(2px, -2px); }

/* === 16. SPOTIFY === */
.spotify-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.spotify-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.spotify-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1DB954;
  animation: pulse 2.5s ease-in-out infinite;
}
.spotify-label span { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
.spotify-embed-wrap iframe { border-radius: 12px; }

/* === 17. FOOTER === */
.site-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--space-16);
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  align-items: start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.footer-logo-link { display: inline-flex; }
.footer-logo {
  height: 52px;
  width: auto;
}
.footer-logo-dark { display: none; }
[data-theme="dark"] .footer-logo-light { display: none; }
[data-theme="dark"] .footer-logo-dark  { display: block; }
.footer-tagline {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.65;
}
.footer-clock-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.footer-clock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.55);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.footer-clock-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.footer-clock {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-2);
}
.footer-col-link {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: color var(--dur-fast);
}
.footer-col-link:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-copy, .footer-built {
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--text-subtle);
}
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* === 18. PAGE HERO (projekte) === */
.page-hero {
  padding: calc(var(--nav-h) + var(--space-16)) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}
.page-hero-orb {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, #F09060 0%, transparent 70%);
  filter: blur(100px);
  opacity: 0.15;
  top: -100px; right: -100px;
  pointer-events: none;
  animation: orb-breathe 10s ease-in-out infinite alternate;
}
[data-theme="dark"] .page-hero-orb { opacity: 0.22; }
.page-hero-inner h1 {
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 0.95;
  margin-bottom: var(--space-6);
}
.page-hero-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 420px;
}

/* === 19. PROJECTS GRID === */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }

.project-card-thumb {
  height: 160px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.project-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity 0.6s ease;
}
.project-thumb-img.loaded { opacity: 1; }
.project-card:hover .project-thumb-img { transform: scale(1.04); }

.project-card-thumb-orb {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #F09060 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.2;
  pointer-events: none;
  transition: opacity var(--dur-slow), transform var(--dur-slow) var(--ease-out);
}
.project-card:hover .project-card-thumb-orb { opacity: 0.35; transform: scale(1.15); }
.project-card-thumb-icon {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
  position: relative;
}
.project-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.project-year {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-subtle);
  letter-spacing: 0.05em;
}
.project-status {
  font-size: 0.7rem;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-subtle);
}
.project-status--live { color: #3A8A4E; border-color: rgba(58,138,78,0.2); background: rgba(58,138,78,0.06); }
[data-theme="dark"] .project-status--live { background: rgba(58,138,78,0.1); }
.project-card-body h3 {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
}
.project-tagline { font-size: 0.85rem; font-weight: 300; color: var(--text-muted); }
.project-description { font-size: 0.82rem; font-weight: 300; color: var(--text-subtle); line-height: 1.6; }
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.tech-badge {
  font-size: 0.72rem;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.project-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

/* === 20. DEMO MODAL === */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.demo-modal.open { opacity: 1; pointer-events: all; }
.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 16, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.demo-modal-window {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  height: min(80vh, 700px);
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(12px);
  transition: transform var(--dur-slow) var(--ease-out);
}
.demo-modal.open .demo-modal-window { transform: scale(1) translateY(0); }
.browser-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.traffic-lights { display: flex; gap: 7px; }
.traffic-light { width: 12px; height: 12px; border-radius: 50%; }
.traffic-light--close { background: #FF5F57; }
.traffic-light--min   { background: #FEBC2E; }
.traffic-light--max   { background: #28C840; }
.browser-url-bar {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-close-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.modal-close-btn:hover { background: var(--border); color: var(--text); }
.demo-iframe { flex: 1; border: none; width: 100%; background: white; }

/* === 21. 404 === */
.error-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.error-orb {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, #F09060 0%, transparent 70%);
  filter: blur(100px);
  opacity: 0.15;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: orb-breathe 8s ease-in-out infinite alternate;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(7rem, 20vw, 14rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-6);
  opacity: 0.08;
  position: relative;
}
.error-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.error-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.03em;
}
.error-msg {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.65;
}

/* === 13b. FEATURED EMOJI === */
.featured-emoji {
  font-size: 3.8rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-spring);
  user-select: none;
}
.featured-card:hover .featured-emoji {
  transform: scale(1.18) rotate(-6deg);
}

/* === 13c. TOOLS GRID === */
.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px 6px 10px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--surface);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.tool-badge:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
}
.tool-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* === 16. TIMELINE / CV === */
.timeline {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}
.timeline-line-progress {
  position: absolute;
  left: 3px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--accent);
  transform-origin: top center;
  transform: scaleY(0);
  pointer-events: none;
}
.timeline-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -31px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: 1.5px solid var(--surface);
  transform: translateY(-50%);
  transition: background var(--dur-base);
  z-index: 1;
}
.timeline-item:first-child { border-top: 1px solid var(--border); }
.timeline-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 3px;
}
.timeline-year {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.timeline-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.timeline-content h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.timeline-content p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}

/* === 17. ANFRAGE SECTION === */
.anfrage-section { background: transparent; }
.anfrage-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-16) var(--space-12);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.anfrage-orb {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, #E8651A 0%, #F09060 40%, transparent 70%);
  filter: blur(90px);
  opacity: 0.1;
  top: -150px; right: -150px;
  pointer-events: none;
}
[data-theme="dark"] .anfrage-orb { opacity: 0.2; }
.anfrage-content {
  position: relative;
  max-width: 580px;
}
.anfrage-content .section-label { margin-bottom: var(--space-3); }
.anfrage-content h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.anfrage-content > p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-6);
}
.anfrage-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-8);
}
.anfrage-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
}
.anfrage-feature svg { color: var(--accent); flex-shrink: 0; }
.anfrage-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* === 18. MARQUEE === */
.marquee-section {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.marquee-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee-fade--left  { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.marquee-fade--right { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.marquee-wrap { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 28px;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  cursor: default;
  transition: color var(--dur-fast);
}
.marquee-item:hover { color: var(--text); }
.marquee-item::after {
  content: '·';
  padding-left: 28px;
  color: var(--accent);
  opacity: 0.5;
}
.marquee-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* === 19. TERMINAL === */
.terminal-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-10);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.82rem;
  box-shadow: var(--shadow-card);
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.terminal-dot--red    { background: #FF5F57; }
.terminal-dot--yellow { background: #FFBD2E; }
.terminal-dot--green  { background: #28C840; }
.terminal-title {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-subtle);
  letter-spacing: 0.03em;
}
.terminal-body {
  padding: var(--space-4) var(--space-6);
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.terminal-line {
  display: flex;
  gap: 6px;
  line-height: 1.6;
  flex-wrap: wrap;
}
.term-prompt { color: var(--accent); font-weight: 500; flex-shrink: 0; }
.term-muted  { color: var(--text-muted); }
.term-accent { color: var(--accent); }
.term-error  { color: #ef4444; }
.term-cmd    { color: var(--text); }
.terminal-body a { color: var(--accent); text-decoration: underline; }
.terminal-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px 12px;
  border-top: 1px solid var(--border);
}
.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--text);
  caret-color: var(--accent);
}
.terminal-input::placeholder { color: var(--text-subtle); }

/* === 20. THUMB SHIMMER === */
@keyframes thumb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.project-card-thumb::before,
.featured-card-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(232,101,26,0.07) 50%, transparent 100%);
  background-size: 300% 100%;
  animation: thumb-shimmer 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.project-card-thumb:has(.project-thumb-img.loaded)::before,
.featured-card-visual:has(.featured-card-thumb.loaded)::before {
  display: none;
}

/* === 22. GSAP REVEAL CLASSES === */
/* Smaller translate distances → animations give orientation without shouting */
.reveal-up   { opacity: 0; transform: translateY(16px); }
.reveal-left { opacity: 0; transform: translateX(-16px); }
.stagger-parent > * { opacity: 0; transform: translateY(10px); }

/* === 24. HERO GRAIN === */
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grain-shift 8s steps(2) infinite;
}
@keyframes grain-shift {
  0%  { background-position: 0 0; }
  25% { background-position: -64px -64px; }
  50% { background-position: 128px -32px; }
  75% { background-position: -32px 128px; }
  100%{ background-position: 0 0; }
}

/* === 25. PROJECT CASE STUDY FIELDS === */
.project-case-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--space-2) 0;
}
.project-case-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.project-case-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.project-case-text {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
}
.project-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.project-metric-chip {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-pale);
  color: var(--accent);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .project-metric-chip {
  background: rgba(232,101,26,0.1);
  color: var(--accent-soft);
}
.project-highlight {
  font-size: 0.8rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.6;
  padding: 8px 14px;
  background: var(--accent-pale);
  border-radius: var(--radius-sm);
}
[data-theme="dark"] .project-highlight { background: rgba(232,101,26,0.08); }
.project-card-thumb-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.8rem;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.4s var(--ease-spring);
}
.project-card:hover .project-card-thumb-emoji {
  transform: translate(-50%, -55%) scale(1.15) rotate(-5deg);
}
.project-thumb-img.loaded ~ .project-card-thumb-emoji { opacity: 0; }

/* === 26. NOW TEASER (homepage) === */
.now-teaser-section { padding-top: 0; }
.now-teaser-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.now-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.now-teaser-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.now-teaser-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    160px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(232, 101, 26, 0.09),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .now-teaser-card:hover::before { opacity: 1; }
  .now-teaser-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
}
.now-teaser-card > * { position: relative; z-index: 1; }
.now-teaser-card--accent { border-color: rgba(232,101,26,0.18); }
.now-teaser-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.now-teaser-card--accent .now-teaser-label { color: var(--accent-soft); }
.now-teaser-value {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.35;
}

/* === 27. ABOUT PAGE === */
.about-page-intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-12);
  align-items: start;
}
.about-page-avatar {
  display: flex;
  justify-content: center;
}
.about-page-avatar-inner {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.about-page-avatar-orb {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, #F09060 0%, transparent 70%);
  opacity: 0.2;
  pointer-events: none;
}
.about-page-initials {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  position: relative;
}
.about-page-contact-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

/* Story card */
.story-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-10) var(--space-10) var(--space-8);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  max-width: 780px;
}
.story-card-quote {
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 300;
  color: var(--accent);
  opacity: 0.12;
  line-height: 0.6;
  position: absolute;
  top: 24px;
  left: 32px;
  pointer-events: none;
  user-select: none;
}
.story-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.story-card-body p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
}
.story-card-body strong { color: var(--text); font-weight: 500; }
.story-card-body em { font-style: italic; }
.story-card-kicker {
  font-size: 0.9rem !important;
  color: var(--text-subtle) !important;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.story-card-emoji {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.6;
}

/* Now section (about page) */
.now-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.now-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.now-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.now-card--accent { border-color: rgba(232,101,26,0.2); }
.now-card-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.now-card--accent .now-card-label { color: var(--accent-soft); }
.now-card-value {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.now-card-sub {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.65;
}
.now-card-icon {
  font-size: 1.8rem;
  margin-top: auto;
  padding-top: var(--space-4);
  line-height: 1;
}

/* Road to R8 */
.r8-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
}
.r8-card-orb {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, #E8651A 0%, #F09060 40%, transparent 70%);
  filter: blur(80px);
  opacity: 0.1;
  top: -150px; right: -100px;
  pointer-events: none;
}
[data-theme="dark"] .r8-card-orb { opacity: 0.18; }
.r8-card-content { position: relative; }
.r8-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.r8-card-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin: var(--space-2) 0 var(--space-3);
}
.r8-card-sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 480px;
}
.r8-badge {
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 100px;
}
.r8-badge-percent {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.r8-badge-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.r8-progress-wrap {
  margin-bottom: var(--space-6);
}
.r8-progress-bar {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.r8-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #E8651A, #F09060);
  position: relative;
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
}
.r8-progress-glow {
  position: absolute;
  right: -2px; top: -3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #F09060;
  box-shadow: 0 0 10px 4px rgba(240,144,96,0.4);
  animation: pulse 2.5s ease-in-out infinite;
}
.r8-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.r8-label-start, .r8-label-mid, .r8-label-end {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-subtle);
}
.r8-label-end { color: var(--accent); font-weight: 500; }
.r8-card-note {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--text-subtle);
  font-style: italic;
}

/* Instagram card */
.about-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.insta-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.insta-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.insta-card-handle {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}
.insta-card-desc {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}
.insta-card-btn { align-self: flex-start; margin-top: var(--space-2); }

/* Contact list */
.about-contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.about-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
a.about-contact-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
  border-color: rgba(0,0,0,0.1);
}
[data-theme="dark"] a.about-contact-item:hover { border-color: rgba(255,255,255,0.12); }
.about-contact-item--static { opacity: 0.7; }
.about-contact-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
a.about-contact-item:hover .about-contact-icon { background: var(--accent-pale); color: var(--accent); }
[data-theme="dark"] a.about-contact-item:hover .about-contact-icon { background: rgba(232,101,26,0.12); color: var(--accent); }
.about-contact-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about-contact-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.about-contact-value {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text);
}

/* === 28. WEBBUILDING PAGE === */
.wb-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.wb-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.wb-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(232,101,26,0.2); }
.wb-feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: background var(--dur-fast);
}
[data-theme="dark"] .wb-feature-icon { background: rgba(232,101,26,0.1); }
.wb-feature-card:hover .wb-feature-icon { background: var(--accent); color: white; }
.wb-feature-card h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wb-feature-card p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Comparison grid */
.wb-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.wb-compare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.wb-compare-card--good { border-color: rgba(58,138,78,0.2); }
.wb-compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.wb-compare-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wb-compare-badge {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(58,138,78,0.1);
  color: #3A8A4E;
}
.wb-compare-list { display: flex; flex-direction: column; gap: var(--space-3); }
.wb-compare-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.5;
}
.wb-compare-item::before {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 0.8rem;
}
.wb-compare-item--yes::before { content: '✓'; color: #3A8A4E; }
.wb-compare-item--no::before  { content: '✕'; color: #ef4444; opacity: 0.7; }

/* Hosting card */
.wb-hosting-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-12);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: start;
  position: relative;
  overflow: hidden;
}
.wb-hosting-orb {
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, #F09060 0%, transparent 70%);
  filter: blur(80px);
  opacity: 0.1;
  top: -80px; right: 200px;
  pointer-events: none;
}
[data-theme="dark"] .wb-hosting-orb { opacity: 0.15; }
.wb-hosting-content { position: relative; }
.wb-hosting-content h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: var(--space-3) 0 var(--space-4);
}
.wb-hosting-content p {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}
.wb-hosting-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.wb-pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg);
}
.wb-hosting-price { position: relative; }
.wb-price-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 140px;
  text-align: center;
}
.wb-price-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.wb-price-value {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
}
.wb-price-note {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--text-subtle);
}

/* === 23. RESPONSIVE === */
@media (max-width: 1024px) {
  .wb-features-grid { grid-template-columns: repeat(2, 1fr); }
  .now-grid { grid-template-columns: repeat(2, 1fr); }
  .now-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .featured-grid { grid-template-columns: 1fr; }
  .wb-hosting-card { grid-template-columns: 1fr; }
  .wb-hosting-price { display: flex; justify-content: flex-start; }
  .r8-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .about-bottom-grid { grid-template-columns: 1fr; }
  .about-page-intro { grid-template-columns: 1fr; }
  .about-page-avatar { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .container { padding: 0 var(--space-6); }
  .section { padding: var(--space-16) 0; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-card { aspect-ratio: 5/3; }
  .about-card-photo { object-position: center center; }
  .links-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero-name { font-size: clamp(4rem, 16vw, 7rem); }
  .hero-orb { width: 400px; height: 400px; top: calc(50% - 200px); right: -150px; }
  .page-hero-inner h1 { font-size: clamp(3rem, 12vw, 5rem); }
  .projects-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .demo-modal { padding: 0; }
  .demo-modal-window { border-radius: 0; height: 100svh; max-width: 100%; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .footer-brand { grid-column: 1 / -1; }
  .wb-features-grid { grid-template-columns: 1fr; }
  .wb-compare-grid { grid-template-columns: 1fr; }
  .now-grid { grid-template-columns: 1fr; }
  .now-teaser-grid { grid-template-columns: 1fr; }
  .now-teaser-header { flex-direction: column; align-items: flex-start; }
  .terminal-widget { max-width: 100%; overflow-x: hidden; }
}
@media (max-width: 480px) {
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .featured-card-actions { flex-direction: column; align-items: flex-start; }
  .anfrage-card { padding: var(--space-10) var(--space-6); }
  .timeline-item { grid-template-columns: 1fr; gap: var(--space-3); }
  .anfrage-actions { flex-direction: column; align-items: flex-start; }
  .footer-main { grid-template-columns: 1fr; gap: var(--space-8); }
  .story-card { padding: var(--space-8) var(--space-6); }
  .r8-card { padding: var(--space-8) var(--space-6); }
  .about-page-contact-row { flex-direction: column; align-items: flex-start; }
  .stats-grid { grid-template-columns: 1fr; }
  .wb-hosting-card { padding: var(--space-8) var(--space-6); }
  .skill-bento { grid-template-columns: 1fr 1fr; }
  .skill-chip--wide { grid-column: span 2; }
  .logbuch-entry { grid-template-columns: 1fr; gap: var(--space-2); }
  .logbuch-meta { flex-direction: row; align-items: center; gap: var(--space-3); }
  /* Nav: tighten on very small screens */
  .site-nav { padding: 6px var(--space-4) 0; }
  .nav-logo-img { height: 40px; }
  .site-nav.island-mode .nav-logo-img { height: 30px; }
  /* Link cards: prevent overflow */
  .link-card { min-width: 0; max-width: 100%; }
  .link-card-desc { white-space: normal; }
  /* About contact items */
  .about-contact-item { min-width: 0; max-width: 100%; }
}

/* === NEW: HERO CANVAS === */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
  mix-blend-mode: screen;
}
[data-theme="dark"] .hero-canvas { opacity: 1.0; mix-blend-mode: screen; }

/* === NEW: SKILL BENTO === */
.skill-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--space-6);
}
.skill-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-base);
  will-change: transform;
  cursor: default;
}
.skill-chip:hover { border-color: rgba(232,101,26,0.3); box-shadow: 0 4px 20px rgba(232,101,26,0.08); }
.skill-chip--wide { grid-column: span 2; }
.skill-chip--accent {
  background: linear-gradient(135deg, var(--accent-pale) 0%, var(--surface) 100%);
  border-color: rgba(232,101,26,0.2);
}
.skill-chip--stat {
  background: var(--accent-pale);
  border-color: rgba(232,101,26,0.22);
  align-items: flex-start;
}
.skill-chip--stat-dark {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .skill-chip--stat { background: rgba(232,101,26,0.12); }
[data-theme="dark"] .skill-chip--accent { background: rgba(232,101,26,0.08); }

.skill-chip-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.skill-chip-icon { width: 18px; height: 18px; flex-shrink: 0; }
.skill-chip-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.skill-chip-years {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(232,101,26,0.12);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: auto;
}
.skill-chip-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.35;
  font-style: italic;
}
.skill-chip-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.skill-chip-stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
}
.skill-chip--bug {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.skill-chip-bug-a {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
}
.skill-chip-bug-sep {
  font-size: 0.78rem;
  color: var(--accent);
  flex-shrink: 0;
}
.skill-chip-bug-b {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* === NEW: ABOUT PAGE PHOTO === */
.about-page-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* === NEW: R8 CAR IMAGE IN ABOUT === */
.r8-car-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 340px;
  height: 340px;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.13;
  pointer-events: none;
  border-radius: 0 0 var(--radius-card) 0;
  filter: grayscale(0.3);
  transition: opacity 0.6s ease;
}
.r8-card:hover .r8-car-bg { opacity: 0.22; }
[data-theme="dark"] .r8-car-bg { opacity: 0.08; }
[data-theme="dark"] .r8-card:hover .r8-car-bg { opacity: 0.18; }

/* === NEW: BUILDING BANNER === */
.building-banner {
  position: relative;
  z-index: 110;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 9px var(--space-8);
  font-size: 0.78rem;
  font-weight: 400;
  overflow: hidden;
  transition: opacity 0.28s ease, max-height 0.28s ease;
}
[data-theme="dark"] .building-banner { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); }
.building-banner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: banner-pulse 2s ease-in-out infinite;
}
@keyframes banner-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.building-banner-text { flex: 1; min-width: 0; }
.building-banner-link {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--dur-fast);
}
.building-banner-link:hover { opacity: 0.7; }
.building-banner-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  cursor: none;
  transition: opacity var(--dur-fast);
  flex-shrink: 0;
}
.building-banner-close:hover { opacity: 1; }
.banner-hiding { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
@media (max-width: 640px) {
  .building-banner { padding: 9px var(--space-6); gap: var(--space-3); }
  .building-banner-text { font-size: 0.72rem; }
}

/* === NEW: ABOUT CARD PHOTO (homepage) === */
.about-card--photo {
  overflow: hidden;
  display: block;
  padding: 0;
}
.about-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: calc(var(--radius-card) - 1px);
  transition: transform 0.6s var(--ease-out);
}
.about-card--photo:hover .about-card-photo { transform: scale(1.03); }
.about-card-photo-caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* === NEW: SPOTIFY INLINE (under about) === */
.spotify-inline {
  padding: var(--space-4) 0 var(--space-2);
}
.spotify-inline-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-6);
  overflow: hidden;
}
.spotify-inline-inner .spotify-label { flex-shrink: 0; white-space: nowrap; }
.spotify-inline-inner .spotify-embed-wrap { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .spotify-inline-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* === NEW: DISCORD COPY BUTTON === */
.about-contact-item--copy {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.about-contact-item--copy:hover {
  border-color: rgba(114,137,218,0.5);
  background: rgba(114,137,218,0.05);
}
.copy-hint {
  font-size: 0.68em;
  color: var(--text-subtle);
  font-style: italic;
}

/* === WÖRDLE BANNER === */
.wordle-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding: var(--space-8);
  background: #0d1110;
  border: 1px solid rgba(83,141,78,0.18);
  border-radius: var(--radius-card);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.wordle-banner:hover {
  border-color: rgba(83,141,78,0.45);
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(83,141,78,0.1);
}
.wordle-banner-glow {
  position: absolute;
  right: -60px;
  top: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(83,141,78,0.13) 0%, transparent 65%);
  pointer-events: none;
}
.wordle-banner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
.wordle-banner-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #538d4e;
}
.wordle-banner-ping {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #538d4e;
  flex-shrink: 0;
  animation: wbPing 2.5s ease-in-out infinite;
}
@keyframes wbPing {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.wordle-banner-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.wordle-banner-desc {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
  line-height: 1.5;
}
.wordle-banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: #538d4e;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  margin-top: var(--space-2);
  transition: background 0.2s ease, transform 0.2s ease;
}
.wordle-banner:hover .wordle-banner-btn {
  background: #6aaf65;
  transform: translateX(3px);
}
.wordle-banner-visual {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.wb-grid {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  gap: 5px;
}
.wb-tile {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  border-radius: 5px;
  color: #fff;
  transition: transform 0.25s var(--ease-spring);
}
.wordle-banner:hover .wb-tile--correct,
.wordle-banner:hover .wb-tile--present,
.wordle-banner:hover .wb-tile--absent {
  transform: scale(1.06);
}
.wb-tile--correct { background: #538d4e; }
.wb-tile--present { background: #b59f3b; }
.wb-tile--absent  { background: #3a3a3c; }
.wb-tile--empty   { background: transparent; border: 1.5px solid rgba(255,255,255,0.08); }
@media (max-width: 640px) {
  .wordle-banner { gap: var(--space-4); }
  .wordle-banner-visual { display: none; }
  .wordle-banner-title { font-size: 2rem; }
}

/* === NEW: SOUND TOGGLE BUTTON === */
.sound-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.sound-toggle:hover { background: var(--border); color: var(--text); }
.sound-toggle .sound-icon-on  { display: none; }
.sound-toggle .sound-icon-off { display: block; }
.sound-toggle.sound-on .sound-icon-on  { display: block; }
.sound-toggle.sound-on .sound-icon-off { display: none; }
.sound-toggle.sound-on { color: var(--accent); }
.sound-toggle.sound-on:hover { color: var(--accent); }

/* === NEW: LOGBUCH SECTION === */
.logbuch-list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
}
.logbuch-entry {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-8);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.logbuch-entry:first-child { border-top: 1px solid var(--border); }
.logbuch-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 3px;
}
.logbuch-date {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.logbuch-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  width: fit-content;
}
.logbuch-tag--wip   { background: rgba(232,101,26,0.12); color: var(--accent); }
.logbuch-tag--fail  { background: rgba(239,68,68,0.12);  color: #dc2626; }
.logbuch-tag--done  { background: rgba(34,197,94,0.12);  color: #16a34a; }
.logbuch-content {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
}
.logbuch-content strong { font-weight: 500; color: var(--text); }
.logbuch-content code {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 0.8em;
  background: var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent);
}
[data-theme="dark"] .logbuch-tag--wip  { background: rgba(232,101,26,0.15); }
[data-theme="dark"] .logbuch-tag--fail { background: rgba(239,68,68,0.15); color: #f87171; }
[data-theme="dark"] .logbuch-tag--done { background: rgba(34,197,94,0.15); color: #4ade80; }

/* Will-change for spring physics elements */
.project-card, .link-card, .now-card, .service-card,
.story-card, .now-teaser-card, .wb-feature-card {
  will-change: transform;
}
/* skill-chip: only CSS hover, no spring physics to avoid grid shift */
.skill-chip { will-change: auto; }

/* Nav links: allow transform for Apple spring effect */
.nav-links .nav-link { display: inline-block; }

/* === WEBSITE CTA POPUP === */
.website-cta-popup {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-float);
  max-width: 268px;
  width: calc(100vw - 48px);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.website-cta-popup.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.website-cta-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  border: 1px solid var(--border);
}
.website-cta-close:hover { background: var(--accent-pale); color: var(--accent); border-color: rgba(232,101,26,0.3); }
.website-cta-icon { font-size: 1.4rem; margin-bottom: var(--space-2); line-height: 1; }
.website-cta-question {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
  padding-right: var(--space-6);
}
.website-cta-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.website-cta-btn { width: 100%; justify-content: center; font-size: 0.82rem; }
@media (max-width: 480px) {
  .website-cta-popup { bottom: 16px; right: 12px; width: calc(100vw - 24px); max-width: 100%; }
}

/* === RESPONSIVE: SKILL BENTO === */
@media (max-width: 900px) {
  .skill-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .r8-car-bg { width: 200px; height: 200px; opacity: 0.07; }
}

/* === POSTER SECTION === */
.poster-section { padding-top: 0; }
.poster-wrap {
  display: flex;
  justify-content: center;
}
.poster-img {
  max-width: 340px;
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  display: block;
}
@media (max-width: 480px) {
  .poster-img { max-width: 280px; }
}

/* === CONTACT FORM === */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}
.contact-form-wrap { }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.88rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  resize: none;
}
.contact-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,101,26,0.12);
}
.contact-textarea { resize: vertical; min-height: 120px; }
.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.contact-feedback {
  font-size: 0.82rem;
  flex: 1;
  min-width: 0;
}
.contact-feedback.success { color: #4ade80; }
.contact-feedback.error { color: #f87171; }
.contact-submit { flex-shrink: 0; }
.contact-submit:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-row { grid-template-columns: 1fr; }
}

/* === PROJECT DETAIL PAGE === */
.detail-back {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  margin-bottom: var(--space-4);
  transition: color var(--dur-fast);
}
.detail-back:hover { color: var(--text); }

.detail-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.detail-hero-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.detail-hero-emoji {
  font-size: 3rem;
  line-height: 1;
  flex-shrink: 0;
}
.detail-hero-title h1 { margin: 0; }

.detail-case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.detail-case-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
}
.detail-case-block .section-label { margin-bottom: var(--space-3); }
.detail-case-text {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.detail-body-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: start;
}
.detail-description {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}
.detail-highlight {
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  margin: var(--space-4) 0 0;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  background: var(--accent-pale);
  border-radius: 0 8px 8px 0;
}

.detail-metrics-col { display: flex; flex-direction: column; gap: var(--space-3); }
.detail-metrics-col .section-label { margin-bottom: var(--space-2); }
.detail-metric-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--accent);
  font-weight: 500;
}

.detail-preview-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.detail-preview-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.detail-preview-url {
  flex: 1;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--bg-card);
  border-radius: 6px;
  padding: 4px 10px;
}
.detail-preview-open {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: color var(--dur-fast);
}
.detail-preview-open:hover { color: var(--accent); }
.detail-preview-iframe {
  width: 100%;
  height: 520px;
  border: none;
  display: block;
}

.detail-other-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.detail-other-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  text-decoration: none;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.detail-other-card:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}
.detail-other-card .link-card-arrow { margin-left: auto; flex-shrink: 0; color: var(--text-muted); }
.detail-other-emoji { font-size: 1.6rem; flex-shrink: 0; }
.detail-other-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-other-title { font-size: 0.95rem; font-weight: 500; color: var(--text); }
.detail-other-tagline { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 860px) {
  .detail-case-grid { grid-template-columns: 1fr; }
  .detail-body-grid { grid-template-columns: 1fr; }
  .detail-metrics-col { flex-direction: row; flex-wrap: wrap; }
  .detail-metric-item { flex: 1; min-width: 120px; }
  .detail-preview-iframe { height: 380px; }
}
@media (max-width: 600px) {
  .detail-hero-emoji { font-size: 2rem; }
  .detail-preview-iframe { height: 280px; }
}

/* ===================================================================
   WEBBUILDING — NEW MARKETING COMPONENTS
   =================================================================== */

/* Trust Bar */
.wb-trust-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
}
.wb-trust-item {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.wb-trust-sep {
  color: var(--text-subtle);
  font-size: 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 600px) { .wb-trust-sep { display: none; } }

/* Process Steps */
.wb-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  position: relative;
}
.wb-process-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  transition: border-color var(--dur-base), transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--dur-base);
}
.wb-process-step:hover {
  border-color: rgba(232,101,26,0.3);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.wb-process-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--accent);
  opacity: 0.22;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: opacity 0.4s ease;
}
.wb-process-step:hover .wb-process-num { opacity: 0.65; }
.wb-process-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wb-process-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
}
@media (max-width: 860px) { .wb-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .wb-process-grid { grid-template-columns: 1fr; } }

/* Referenzen mini case-studies */
.wb-ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.wb-ref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-decoration: none;
  transition: border-color var(--dur-base), transform 0.38s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--dur-base);
}
.wb-ref-card:hover {
  border-color: rgba(232,101,26,0.3);
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}
.wb-ref-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.wb-ref-emoji { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.wb-ref-meta { display: flex; flex-direction: column; gap: 3px; }
.wb-ref-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.wb-ref-year {
  font-size: 0.7rem;
  color: var(--text-subtle);
}
.wb-ref-block { display: flex; flex-direction: column; gap: var(--space-2); }
.wb-ref-label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.wb-ref-text {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.62;
  font-weight: 300;
}
.wb-ref-result-text {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.62;
  font-weight: 400;
}
.wb-ref-link {
  font-size: 0.76rem;
  color: var(--accent);
  font-weight: 500;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--dur-fast);
}
.wb-ref-card:hover .wb-ref-link { opacity: 0.75; }
@media (max-width: 860px) { .wb-ref-grid { grid-template-columns: 1fr; } }

/* Pricing Tiers */
.wb-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.wb-pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.wb-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.wb-pricing-card--highlight {
  border-color: rgba(232,101,26,0.35);
  box-shadow: 0 0 0 1px rgba(232,101,26,0.12), var(--shadow-card);
}
.wb-pricing-card--highlight:hover { border-color: rgba(232,101,26,0.6); }
.wb-pricing-badge {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: var(--accent);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.wb-pricing-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.wb-pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.wb-pricing-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.wb-pricing-suffix {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}
.wb-pricing-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
}
.wb-pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.wb-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.wb-pricing-feature svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.wb-pricing-divider { height: 1px; background: var(--border); margin: var(--space-1) 0; }
@media (max-width: 860px) { .wb-pricing-grid { grid-template-columns: 1fr; } }

/* Kostenrechner */
.wb-calc-intro {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: var(--space-12);
  font-size: 1.05rem;
}
.wb-calc-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-10);
}
.wb-calc-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding-right: var(--space-8);
  border-right: 1px solid var(--border);
}
.wb-calc-row-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wb-calc-row-label strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
}
.wb-calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  cursor: pointer;
  outline: none;
}
.wb-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(232,101,26,0.35);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.wb-calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(232,101,26,0.45);
}
.wb-calc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(232,101,26,0.35);
}
.wb-calc-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
  padding: 0 2px;
}
.wb-calc-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}
.wb-calc-page-hint {
  font-size: 0.75rem;
  color: var(--accent);
  margin: var(--space-1) 0 0;
  font-weight: 500;
  min-height: 1.1em;
}
.wb-calc-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.wb-calc-step-btn {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wb-calc-step-btn:hover { background: var(--accent); color: #fff; transform: scale(1.08); }
.wb-calc-step-num {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.wb-calc-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.wb-calc-check-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-base), background var(--dur-base);
  user-select: none;
}
.wb-calc-check-row:has(input:checked) {
  border-color: var(--accent);
  background: rgba(232, 101, 26, 0.07);
}
.wb-calc-checkbox { display: none; }
.wb-calc-check-box {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border: 1.5px solid var(--text-muted);
  border-radius: 5px;
  position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.wb-calc-check-row:has(input:checked) .wb-calc-check-box {
  background: var(--accent);
  border-color: var(--accent);
}
.wb-calc-check-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.wb-calc-check-row:has(input:checked) .wb-calc-check-box::after { opacity: 1; }
.wb-calc-check-label {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 500;
}
.wb-calc-check-label small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.wb-calc-check-price {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.88rem;
  white-space: nowrap;
}
.wb-calc-check-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232,101,26,0.1);
  border: 1px solid rgba(232,101,26,0.25);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.wb-calc-free-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.wb-calc-free-note svg { color: var(--accent); flex-shrink: 0; }

/* Summary panel */
.wb-calc-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  background: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.wb-calc-summary-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wb-calc-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.wb-calc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: var(--space-1) 0;
}
.wb-calc-line:empty { display: none; }
.wb-calc-line--base {
  color: var(--text);
  font-weight: 500;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
}
.wb-calc-total-wrap {
  padding-top: var(--space-4);
  border-top: 2px solid var(--border);
}
.wb-calc-total-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.wb-calc-total-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
}
.wb-calc-disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
  padding: var(--space-3) var(--space-4);
  background: rgba(232,101,26,0.06);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
}
.wb-calc-cta {
  display: block;
  text-align: center;
  width: 100%;
}
.wb-calc-or {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}
.wb-calc-or a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .wb-calc-card {
    grid-template-columns: 1fr;
    padding: var(--space-8);
  }
  .wb-calc-options {
    padding-right: 0;
    border-right: none;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border);
  }
}

/* Testimonials */
.wb-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.wb-testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: border-color var(--dur-base), transform 0.38s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--dur-base);
}
.wb-testimonial-card:hover {
  border-color: rgba(232,101,26,0.2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.wb-testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--accent);
  font-size: 0.82rem;
}
.wb-testimonial-quote {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.72;
  font-weight: 300;
  font-style: italic;
  flex: 1;
}
.wb-testimonial-author {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wb-testimonial-name {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
}
.wb-testimonial-role {
  font-size: 0.7rem;
  color: var(--text-subtle);
}
@media (max-width: 860px) { .wb-testimonial-grid { grid-template-columns: 1fr; } }

/* FAQ Accordion */
.wb-faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.wb-faq-item { border-bottom: 1px solid var(--border); }
.wb-faq-item:last-child { border-bottom: none; }
.wb-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-6) var(--space-8);
  text-align: left;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.wb-faq-question:hover { color: var(--accent); background: rgba(232,101,26,0.03); }
.wb-faq-question[aria-expanded="true"] { color: var(--accent); }
.wb-faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.36s cubic-bezier(0.34,1.56,0.64,1), border-color var(--dur-fast), background var(--dur-fast);
}
.wb-faq-question:hover .wb-faq-icon { border-color: var(--accent); }
.wb-faq-question[aria-expanded="true"] .wb-faq-icon {
  transform: rotate(45deg);
  border-color: var(--accent);
  background: rgba(232,101,26,0.1);
}
.wb-faq-icon svg { color: var(--text-muted); transition: color var(--dur-fast); }
.wb-faq-question:hover .wb-faq-icon svg,
.wb-faq-question[aria-expanded="true"] .wb-faq-icon svg { color: var(--accent); }
.wb-faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
}
.wb-faq-answer-inner {
  padding: 0 var(--space-8) var(--space-6);
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.72;
  font-weight: 300;
}

/* Inquiry Form (webbuilding) */
.wb-inquiry-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
}
.wb-inquiry-orb {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, #E8651A, #F09060, transparent 70%);
  filter: blur(80px);
  opacity: 0.07;
  top: -110px; right: -90px;
  pointer-events: none;
}
[data-theme="dark"] .wb-inquiry-orb { opacity: 0.14; }
.wb-inquiry-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-12);
  align-items: start;
  position: relative;
}
.wb-inquiry-intro h2 {
  font-size: 1.9rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.wb-inquiry-intro p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.68;
  font-weight: 300;
  margin-bottom: var(--space-6);
}
.wb-inquiry-perks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.wb-inquiry-perk {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.wb-inquiry-perk svg { flex-shrink: 0; color: var(--accent); }
.wb-form-reply-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
  line-height: 1.5;
}
.wb-form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%238C7D74' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.wb-inquiry-email-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.wb-inquiry-email-icon-wrap {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
[data-theme="dark"] .wb-inquiry-email-icon-wrap { background: rgba(232,101,26,0.12); }
.wb-inquiry-email-heading {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wb-inquiry-email-addr {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,101,26,0.3);
  padding-bottom: 1px;
  transition: border-color var(--dur-fast);
}
.wb-inquiry-email-addr:hover { border-color: var(--accent); }
.wb-inquiry-email-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-weight: 300;
  margin-top: var(--space-1);
}
@media (max-width: 860px) {
  .wb-inquiry-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .wb-inquiry-section { padding: var(--space-8) var(--space-6); }
}
@media (max-width: 600px) {
  .wb-inquiry-section { padding: var(--space-6) var(--space-5); }
}

/* ── Process step icon badge ────────────────────────────────── */
.wb-process-icon-wrap {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(232,101,26,0.1);
  border: 1px solid rgba(232,101,26,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.wb-process-step:hover .wb-process-icon-wrap {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.08);
}
.wb-process-icon-wrap--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wb-process-step--final { border-color: rgba(232,101,26,0.2); }
[data-theme="dark"] .wb-process-icon-wrap { background: rgba(232,101,26,0.14); }

/* Connector arrows between steps (desktop only) */
@media (min-width: 861px) {
  .wb-process-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--text-subtle);
    pointer-events: none;
    z-index: 1;
  }
}

/* ── Testimonial avatar initials ────────────────────────────── */
.wb-testimonial-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--avatar-color, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--avatar-color, var(--accent)) 35%, transparent);
  color: var(--avatar-color, var(--accent));
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}
.wb-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.wb-testimonial-author > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Pricing top accent bar ─────────────────────────────────── */
.wb-pricing-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Fallback for older browsers that don't support color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .wb-testimonial-avatar {
    background: rgba(232,101,26,0.12);
    border-color: rgba(232,101,26,0.25);
    color: var(--accent);
  }
}

/* ═══════════════════════════════════════════════════════
   WEBBUILDING — AMBIENT MOTION & VISUAL POLISH
   ═══════════════════════════════════════════════════════ */

/* Webbuilding hero h1 */
.wb-hero-heading {
  color: var(--text);
}
.wb-hero-heading em {
  font-style: italic;
  color: var(--accent);
}

/* Floating animation for process SVG icons */
@keyframes icon-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
.wb-process-icon-wrap svg {
  animation: icon-float 3.6s ease-in-out infinite;
}
.wb-process-step:nth-child(2) .wb-process-icon-wrap svg { animation-delay: 0.7s; }
.wb-process-step:nth-child(3) .wb-process-icon-wrap svg { animation-delay: 1.4s; }
.wb-process-step:nth-child(4) .wb-process-icon-wrap svg { animation-delay: 2.1s; }

/* Animated shimmer on pricing topbar */
.wb-pricing-topbar {
  background: linear-gradient(90deg, var(--accent) 0%, #ffb347 25%, #ff8c1a 50%, #ffb347 75%, var(--accent) 100%);
  background-size: 300% 100%;
  animation: topbar-shimmer 4s linear infinite;
}
@keyframes topbar-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* Pulsing glow ring on highlighted pricing card */
@keyframes card-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,101,26,0), 0 2px 10px rgba(0,0,0,0.05); }
  50%       { box-shadow: 0 0 0 5px rgba(232,101,26,0.07), 0 4px 44px rgba(232,101,26,0.16); }
}
.wb-pricing-card--highlight {
  animation: card-glow-pulse 4s ease-in-out infinite;
}
.wb-pricing-card--highlight:hover {
  animation-play-state: paused;
}

/* Feature card — spring hover + icon spin-scale */
.wb-feature-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.wb-feature-card:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 10px 44px rgba(232,101,26,0.11), 0 0 0 1px rgba(232,101,26,0.22);
  border-color: rgba(232,101,26,0.32);
}
.wb-feature-icon {
  transition: background 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.wb-feature-card:hover .wb-feature-icon {
  background: var(--accent);
  color: #fff;
  transform: scale(1.14) rotate(-6deg);
}

/* Ref card — spring lift + glow */
.wb-ref-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.wb-ref-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 44px rgba(0,0,0,0.1);
  border-color: rgba(232,101,26,0.32);
}

/* Testimonial card — subtle 3D tilt */
.wb-testimonial-card {
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.45s ease;
}
.wb-testimonial-card:hover {
  transform: translateY(-7px) perspective(700px) rotateX(3deg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.1);
}

/* Process step — spring lift */
.wb-process-step {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.wb-process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 36px rgba(0,0,0,0.09);
  border-color: rgba(232,101,26,0.28);
}

/* Trust bar item hover-lift */
.wb-trust-item {
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  cursor: default;
}
.wb-trust-item:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

/* Compare card hover */
.wb-compare-card {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
}
.wb-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(0,0,0,0.08);
}

/* Pill hover bounce */
.wb-pill {
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s ease;
  cursor: default;
}
.wb-pill:hover {
  background: rgba(232,101,26,0.12);
  border-color: rgba(232,101,26,0.35);
  color: var(--accent);
  transform: translateY(-2px) scale(1.04);
}

/* ═══════════════════════════════════════════════════════
   GLOBAL POLISH — Whitespace · Grain · Typography
   ═══════════════════════════════════════════════════════ */

/* More generous section breathing room on desktop */
@media (min-width: 900px) {
  .section { padding: 9rem 0; }
}

/* Section headlines: slightly more presence */
.section-headline {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.038em;
}

/* Page-hero h1 on inner pages: bigger */
.page-hero-inner h1 {
  font-size: clamp(3.5rem, 9vw, 8rem);
}

/* ── Grain texture on content cards ───────────────────── */
/* Ensure position + clip so grain stays within rounded corners */
.wb-feature-card,
.wb-testimonial-card,
.wb-ref-card,
.now-card,
.stat-card {
  position: relative;
  overflow: hidden;
}
/* wb-pricing-card already has position:relative — just add overflow */
.wb-pricing-card { overflow: hidden; }

/* The actual grain layer */
.wb-feature-card::after,
.wb-testimonial-card::after,
.wb-ref-card::after,
.wb-pricing-card::after,
.now-card::after,
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
[data-theme="dark"] .wb-feature-card::after,
[data-theme="dark"] .wb-testimonial-card::after,
[data-theme="dark"] .wb-ref-card::after,
[data-theme="dark"] .wb-pricing-card::after,
[data-theme="dark"] .now-card::after,
[data-theme="dark"] .stat-card::after { opacity: 0.055; }

/* Also: story-card, anfrage-card get subtle grain */
.story-card,
.anfrage-card,
.wb-hosting-card {
  position: relative;
  overflow: hidden;
}
.story-card::after,
.anfrage-card::after,
.wb-hosting-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
[data-theme="dark"] .story-card::after,
[data-theme="dark"] .anfrage-card::after,
[data-theme="dark"] .wb-hosting-card::after { opacity: 0.045; }

/* ── Cursor refinements — closer to pechschwarz style ─── */
/* Slightly smaller blob (80px) feels more like a cursor, less overlay */
.cursor-label {
  width: 80px; height: 80px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}
/* Dot stays small but crisp */
.cursor-dot {
  width: 8px; height: 8px;
  mix-blend-mode: difference;
  background: var(--text);
}
[data-theme="dark"] .cursor-dot { background: var(--text); }

/* mix-blend-mode:difference needs white as base color to invert correctly */
.cursor-dot { background: #fff; }

/* ── Featured card thumbnail ─── */
.featured-card-visual { position: relative; overflow: hidden; }
.featured-card-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}

/* ── Grain on featured-card + about-card ─── */
.featured-card,
.about-card { position: relative; overflow: hidden; }
.featured-card::after,
.about-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
[data-theme="dark"] .featured-card::after,
[data-theme="dark"] .about-card::after { opacity: 0.05; }

/* ── wb-ref-card preview image ─── */
.wb-ref-preview {
  width: calc(100% + calc(2 * var(--space-8)));
  height: 180px;
  overflow: hidden;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-6);
  flex-shrink: 0;
}
.wb-ref-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wb-ref-card:hover .wb-ref-preview-img { transform: scale(1.04); }

/* ── Raw Stack™ methodology block ─── */
.wb-method-section { text-align: center; }
.wb-method-block {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.wb-method-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.wb-method-name {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin: 0;
}
.wb-method-desc {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 560px;
}
.wb-method-pillars {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}
.wb-method-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 140px;
  transition: border-color 0.25s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wb-method-pillar:hover { border-color: var(--accent); transform: translateY(-4px); }
.wb-method-pillar-num {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}
.wb-method-pillar-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

/* ── Ergebnis section on projekt-detail ─── */
.detail-ergebnis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.detail-ergebnis-item {
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--border);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius-md);
}
@media (max-width: 700px) {
  .detail-ergebnis-grid { grid-template-columns: 1fr; }
}

/* ── Screenshot gallery on projekt-detail ─── */
.detail-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.detail-screenshot-img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.detail-screenshot-img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-float);
}
@media (max-width: 640px) {
  .detail-screenshot-grid { grid-template-columns: 1fr; }
}

/* === NOW-TEASER LINK CARDS === */
.now-teaser-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.now-teaser-card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.now-teaser-grid {
  grid-template-columns: repeat(3, 1fr);
}
.now-teaser-card--featured {
  grid-column: span 2;
  padding: var(--space-8);
  background: linear-gradient(135deg, rgba(83,141,78,0.08) 0%, transparent 60%);
  border-color: rgba(83,141,78,0.3);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  overflow: hidden;
}
.now-teaser-card--featured:hover { border-color: rgba(83,141,78,0.5); }
.now-teaser-featured-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.now-teaser-card--featured .now-teaser-label { color: #538d4e; }
.now-teaser-card--featured .now-teaser-value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
}
.now-teaser-featured-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.now-teaser-featured-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}
.now-teaser-card--featured:hover .now-teaser-featured-img {
  transform: scale(1.08) rotate(-3deg);
}
@media (max-width: 640px) {
  .now-teaser-card--featured { grid-column: span 1; }
  .now-teaser-card--featured .now-teaser-value { font-size: 1rem; }
  .now-teaser-featured-img { width: 64px; height: 64px; }
}

@keyframes wordlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83,141,78,0); }
  50%       { box-shadow: 0 0 0 6px rgba(83,141,78,0.18); }
}
.now-teaser-card--wordle {
  animation: wordlePulse 3s ease-in-out infinite;
}
.now-teaser-card--wordle:hover {
  animation: none;
}

/* ═══════════════════════════════════════════════════════════
   WEBBUILDING: BROWSER MOCKUP (hero visual)
═══════════════════════════════════════════════════════════ */
.wb-hero-mockup {
  max-width: 840px;
  margin: var(--space-16) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.7) inset,
    0 40px 100px rgba(28,20,16,0.14),
    0 8px 30px rgba(28,20,16,0.08);
  border: 1px solid var(--border-warm);
  background: var(--surface);
  animation: mockup-float 7s ease-in-out infinite;
}
[data-theme="dark"] .wb-hero-mockup {
  box-shadow: 0 40px 100px rgba(0,0,0,0.45), 0 8px 30px rgba(0,0,0,0.25);
}
@keyframes mockup-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.wb-mockup-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.wb-mockup-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wb-mockup-dot--red    { background: #FF5F57; }
.wb-mockup-dot--yellow { background: #FFBD2E; }
.wb-mockup-dot--green  { background: #28C840; }
.wb-mockup-url {
  flex: 1;
  background: var(--bg, #F5EEE8);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-align: center;
}
[data-theme="dark"] .wb-mockup-url { background: rgba(255,255,255,0.04); }
.wb-mockup-actions {
  display: flex;
  gap: 6px;
}
.wb-mockup-action-dot {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}
.wb-mockup-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.wb-mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: opacity 0.35s ease, transform 0.6s ease;
}
.wb-hero-mockup:hover .wb-mockup-img {
  transform: translateY(-3%);
}
.wb-mockup-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(28,20,16,0.6));
  display: flex;
  align-items: flex-end;
  padding: 20px;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
[data-theme="dark"] .wb-mockup-overlay {
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}
.wb-mockup-badge {
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 99px;
  letter-spacing: 0.01em;
  text-decoration: none;
  pointer-events: auto;
  transition: background 0.2s, color 0.2s;
}
.wb-mockup-badge:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   WEBBUILDING: TECH MARQUEE
═══════════════════════════════════════════════════════════ */
.wb-marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 13px 0;
  background: var(--surface);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.wb-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  animation: wb-marquee-scroll 36s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.wb-marquee-track span {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.wb-marquee-sep {
  color: var(--accent) !important;
  font-size: 0.9rem !important;
  opacity: 0.6;
}
@keyframes wb-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   WEBBUILDING: RESPONSIVE SHOWCASE SECTION
═══════════════════════════════════════════════════════════ */
.wb-showcase-section {}
.wb-showcase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.wb-showcase-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: var(--space-6);
}
.wb-showcase-text p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.wb-showcase-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wb-showcase-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(28,20,16,0.12);
  border: 1px solid var(--border-warm);
}
[data-theme="dark"] .wb-showcase-img-wrap {
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.wb-showcase-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 820px) {
  .wb-hero-mockup { margin-top: var(--space-10); }
  .wb-showcase-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .wb-mockup-screen { aspect-ratio: 16 / 9; }
}

/* ═══════════════════════════════════════════════════════════
   WEBBUILDING: INTERACTIVE TIMELINE
═══════════════════════════════════════════════════════════ */
.wb-timeline { margin-top: var(--space-12); }

.wb-timeline-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
}

.wb-timeline-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.2s ease;
}
.wb-timeline-tab:hover { background: var(--surface); }

.wb-timeline-tab-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.3s ease;
}
.wb-timeline-tab-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.wb-timeline-tab-bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wb-timeline-tab.is-active .wb-timeline-tab-num  { color: var(--accent); }
.wb-timeline-tab.is-active .wb-timeline-tab-name { color: var(--text); font-weight: 600; }
.wb-timeline-tab.is-active .wb-timeline-tab-bar  { transform: scaleX(1); }

.wb-timeline-body {
  padding: var(--space-10) 0 var(--space-2);
  min-height: 240px;
}

.wb-timeline-panel {
  display: none;
  grid-template-columns: 80px 1fr;
  gap: var(--space-8);
  align-items: flex-start;
}
.wb-timeline-panel.is-active {
  display: grid;
  animation: wb-tl-fadein 0.38s ease forwards;
}
@keyframes wb-tl-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wb-timeline-panel-icon {
  width: 80px;
  height: 80px;
  background: rgba(232,101,26,0.08);
  border: 1px solid rgba(232,101,26,0.18);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.wb-timeline-panel-icon--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .wb-timeline-panel-icon { background: rgba(232,101,26,0.12); }

.wb-timeline-panel-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.wb-timeline-panel-title {
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.wb-timeline-panel-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-5);
  max-width: 56ch;
}
.wb-timeline-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.wb-timeline-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.83rem;
  color: var(--text-muted);
}
.wb-timeline-checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(232,101,26,0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8651A' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  border: 1px solid rgba(232,101,26,0.25);
}
@media (max-width: 700px) {
  .wb-timeline-tabs  { grid-template-columns: repeat(2, 1fr); }
  .wb-timeline-panel { grid-template-columns: 1fr; }
  .wb-timeline-panel-icon { width: 56px; height: 56px; }
}

/* ─── Radio Box (Kontrollraum) ─────────────────────────── */
.wb-calc-radio-box {
  border-radius: 50% !important;
}
.wb-calc-radio-box::after {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #fff !important;
  background-image: none !important;
}
.wb-calc-check-group-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0 var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-1);
}

/* ─── Base Plan Items (Calculator) ────────────────────── */
.wb-calc-base-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  margin: 6px 0 12px;
  padding: 10px 12px;
  background: rgba(232,101,26,0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(232,101,26,0.1);
}
.wb-calc-base-items span {
  font-size: 0.71rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ─── Showcase Contain (mockup.png) ───────────────────── */
.wb-showcase-img-wrap--contain {
  overflow: visible;
  border: none;
  box-shadow: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wb-showcase-photo--contain {
  object-fit: contain !important;
  height: auto !important;
  max-height: 460px;
  width: 100%;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.12));
}
[data-theme="dark"] .wb-showcase-photo--contain {
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.35));
}

/* === PREFERS-REDUCED-MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-orb, .hero-orb-2 { animation: none !important; }
  .hero-tag-dot, .spotify-dot, .footer-clock-dot { animation: none !important; }
  .hero-scroll-line::after { animation: none !important; }
  .hero-scroll span { animation: none !important; opacity: 0.7; }
  .marquee-track, .wb-marquee-track { animation-play-state: paused !important; }
  .wb-hero-mockup { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   WEBBUILDING — VIBE EXPLORER
   ═══════════════════════════════════════════════════════ */
.wb-vibe-section {
  padding-bottom: 0;
}
.wb-vibe-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.wb-vibe-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-12);
  align-items: start;
}

/* Controls */
.wb-vibe-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.wb-vibe-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-base) cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.wb-vibe-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.wb-vibe-btn.is-active {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transform: translateX(12px);
}
.wb-vibe-btn.is-active::before {
  opacity: 0.05;
}
.wb-vibe-btn-icon {
  font-size: 1.5rem;
  z-index: 1;
}
.wb-vibe-btn-text {
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.wb-vibe-btn-text strong {
  display: block;
  font-family: var(--font-body); /* Matching site general font */
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 2px;
}
.wb-vibe-btn-text span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.wb-vibe-btn.is-active .wb-vibe-btn-text strong {
  color: var(--accent);
}

/* Preview Window */
.wb-vibe-preview-wrap {
  position: relative;
  height: 600px;
}
.wb-vibe-preview {
  width: 100%;
  height: 100%;
  border-radius: 40px; /* Stronger rounding as requested */
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
  z-index: 2;
}

.wb-vibe-mockup {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-12);
}

.wb-vibe-mockup-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wb-vibe-mockup-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.1);
}
.wb-vibe-mockup-bg img.active {
  opacity: 1;
  transform: scale(1);
}
.vibe-hidden-img {
  display: none;
}
.wb-vibe-mockup-bg .vibe-hidden-img.active {
  display: block;
}

.wb-vibe-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  z-index: 1;
  transition: background 1s ease;
}

.wb-vibe-mockup-content {
  position: relative;
  z-index: 2;
  max-width: 500px;
  color: #fff;
}

.wb-vibe-tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--vibe-accent, var(--accent));
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
  color: #fff;
}

.wb-vibe-title {
  font-family: var(--font-body); /* Matching site general font */
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: var(--space-6);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.wb-vibe-desc {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: var(--space-8);
  font-weight: 300;
}

.wb-vibe-cta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.wb-vibe-link {
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.wb-vibe-link:hover {
  border-bottom-color: currentColor;
}

/* Decorative Blobs */
.wb-vibe-decoration {
  position: absolute;
  inset: -20px;
  z-index: 1;
  pointer-events: none;
}
.wb-vibe-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.vibe-blob-1 {
  width: 300px; height: 300px;
  background: var(--vibe-accent, var(--accent));
  top: -50px; right: -50px;
  animation: float-blob 20s infinite alternate;
}
.vibe-blob-2 {
  width: 250px; height: 250px;
  background: var(--vibe-accent-2, var(--accent-soft));
  bottom: -50px; left: -50px;
  animation: float-blob 25s infinite alternate-reverse;
}

@keyframes float-blob {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, 40px) scale(1.1); }
  100% { transform: translate(-30px, 10px) scale(0.9); }
}

/* Vibe Themes */
.vibe-tech {
  --vibe-accent: #00f2ff;
  --vibe-accent-2: #7000ff;
}
.vibe-organic {
  --vibe-accent: #78a083;
  --vibe-accent-2: #c4a484;
}
.vibe-organic .wb-vibe-overlay {
  background: linear-gradient(to right, rgba(245, 245, 240, 0.9) 0%, rgba(245, 245, 240, 0.5) 60%, transparent 100%);
}
.vibe-organic .wb-vibe-mockup-content {
  color: #333;
}
.vibe-organic .wb-vibe-title {
  font-weight: 500;
}

.vibe-bold {
  --vibe-accent: #ff0055;
  --vibe-accent-2: #ffcc00;
}
.vibe-bold .wb-vibe-overlay {
  background: linear-gradient(135deg, rgba(20, 0, 0, 0.9) 0%, transparent 100%);
}

.vibe-minimal {
  --vibe-accent: #333;
  --vibe-accent-2: #999;
}
.vibe-minimal .wb-vibe-overlay {
  background: rgba(255, 255, 255, 0.85);
}
.vibe-minimal .wb-vibe-mockup-content {
  color: #000;
}
.vibe-minimal .wb-vibe-title {
  font-weight: 900;
  text-transform: uppercase;
}

/* Responsiveness */
@media (max-width: 1000px) {
  .wb-vibe-grid {
    grid-template-columns: 1fr;
  }
  .wb-vibe-controls {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-4);
    scrollbar-width: none;
  }
  .wb-vibe-controls::-webkit-scrollbar { display: none; }
  .wb-vibe-btn {
    width: auto;
    flex-shrink: 0;
  }
}