/* ═══════════════════════════════════════════════════════════════
   Timber Flow – Landingpage Styles
   Brand-compliant with Brandguide (Inter, #29672d, #2e150e, #c6c6c6, #f5f5f5)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --tf-green: #29672d;
  --tf-green-light: #4a9f52;
  --tf-green-dark: #1f4f23;
  --tf-brown: #2e150e;
  --tf-gray-dk: #646363;
  --tf-gray-xdk: #2a2a2a;
  --tf-gray-lt: #c6c6c6;
  --tf-bg: #f5f5f5;
  --tf-purple: #663166;
  --tf-blue: #323265;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 72px;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tf-brown);
  overflow-x: hidden;
}

/* Disable native anchor jump for pinned sections */
section[id] { scroll-margin-top: var(--nav-h); }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

#site-nav .nav-inner {
  border-radius: 999px;
  margin-top: 14px;
  padding: 0 12px 0 20px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(198, 198, 198, 0.35);
  box-shadow: 0 1px 3px rgba(46, 21, 14, 0.04);
  transition: all 0.3s var(--ease-smooth);
}

#site-nav.scrolled .nav-inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px -12px rgba(46, 21, 14, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--tf-green);
  color: #fff;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 6px 16px -4px rgba(41, 103, 45, 0.35);
}
.btn-primary:hover {
  background: var(--tf-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(41, 103, 45, 0.45);
}

.btn-primary-light {
  background: #fff;
  color: var(--tf-brown);
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.25);
}
.btn-primary-light:hover {
  background: var(--tf-green);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--tf-brown);
  border: 1.5px solid rgba(198, 198, 198, 0.7);
  background: transparent;
  transition: all 0.3s var(--ease-smooth);
}
.btn-ghost:hover {
  border-color: var(--tf-brown);
  background: var(--tf-brown);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost-light {
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  /* Slightly darker, more solid bg so the button is always readable,
     even if the circle hasn't fully grown behind it yet. */
  background: rgba(20, 30, 18, 0.35);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: all 0.3s var(--ease-smooth);
}
.btn-ghost-light:hover {
  background: rgba(20, 30, 18, 0.55);
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--tf-brown);
  color: #fff;
  transition: all 0.3s var(--ease-smooth);
}
.btn-secondary:hover {
  background: #4a2016;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   HERO – Visby-Style Scroll Choreography (GSAP-pinned)
   ───────────────────────────────────────────────────────────────
   The .hero-stage is pinned by GSAP ScrollTrigger (pin:true). The
   user scrolls a distance equal to +200% of the viewport height,
   and during that scroll the stage stays visually fixed while the
   timeline morphs its contents. After the pin ends, the document
   continues naturally into the next section.

   Scroll-progress → timeline phases:
     0.00 – 0.08  Hold opening frame (circle small, screenshot tilted below)
     0.08 – 0.45  Screenshot glides up and flattens (rotateX 34°→0°)
     0.35 – 0.85  Circle scales up to cover the viewport diagonally
     0.85 – 1.00  Hold final full-bleed image, prepare exit
   ═══════════════════════════════════════════════════════════════ */

.hero-section {
  position: relative;
  background: #fff;
  /* The pin length is now controlled by GSAP (see initHero),
     so no tall-height hack here. The stage itself is 100dvh. */
}

.hero-stage {
  position: relative;
  height: 100dvh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

/* ── The Circle ───────────────────────────────── */
.hero-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62vmin, 640px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform, border-radius;
  z-index: 1;
}

.hero-circle-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  /* No shadow, no outline, no blur – a clean hard-edged circle
     as per product decision. Everything that rendered outside the
     image bounds previously was read as "grey edge / background not
     filled". */
  box-shadow: none;
  will-change: border-radius;
}

.hero-circle-image {
  position: absolute;
  /* Image exactly fills the circle. No oversize is needed because the
     container is 1:1 and object-fit:cover already crops the landscape
     photo to a square without any gap. Oversizing actually introduced
     vertical offset issues combined with the parallax transform. */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-circle-overlay {
  position: absolute;
  inset: 0;
  /* Strong centered dimmer so the text plate has rich contrast
     without looking like a flat black rectangle. */
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%,
      rgba(15, 25, 16, 0.70) 0%,
      rgba(22, 45, 25, 0.55) 40%,
      rgba(30, 55, 28, 0.35) 75%,
      rgba(30, 55, 28, 0.25) 100%);
}

/* ── Hero Content (inside circle) ─────────────────
   The text block is an independent layer, horizontally centered
   inside the stage. It sits OVER the circle, with a solid
   tinted backplate that guarantees legibility no matter what
   is behind it. */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10;
  /* Give the content clear breathing room from the fixed nav (~86px)
     AND from the screenshot at the bottom. */
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 38vh;
  will-change: opacity, transform;
  pointer-events: none;
}
.hero-content > * { pointer-events: auto; }

.hero-content-inner {
  width: min(56vmin, 560px);
  max-width: 90%;
  text-align: center;
}

/* Solid tinted backplate for the headline + subline.
   This replaces fragile text-shadows; works even when the
   circle shrinks behind the text. */
.hero-textplate {
  position: relative;
  padding: 28px 28px 30px;
  border-radius: 28px;
  background: linear-gradient(180deg,
    rgba(18, 34, 20, 0.72) 0%,
    rgba(24, 46, 26, 0.68) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 30px 60px -24px rgba(0, 0, 0, 0.45);
}

.hero-eyebrow {
  color: #fff;
  background: rgba(41, 103, 45, 0.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35);
}

.hero-headline {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: #fff;
}
/* No gradient text – flat color for impeccable-style compliance.
   The brand accent is communicated through the ".accent" span. */
.hero-headline .accent {
  color: #8de39a;
}

/* Sub-claim – the "Digitale Holzlogistik vom Polter bis ins Werk"
   line sits between headline and subline and is slightly more
   prominent than the body subline without competing with the H1. */
.hero-subclaim {
  color: #fff;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.hero-subline {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
}

/* ── App Screenshot (foreground, perspective) ──
   Initially visible in the starting frame: rotated 34° (3D tilt)
   and positioned low inside the stage so both circle AND screenshot
   are visible at once (like the reference Visby layout).
   Note: the animation will simultaneously flatten the tilt AND
   raise the screenshot in lock-step with the circle expansion. */
.hero-screenshot {
  position: absolute;
  left: 50%;
  bottom: -14vh;
  transform: translateX(-50%);
  width: min(72vw, 900px);
  z-index: 20;
  perspective: 2000px;
  will-change: transform, bottom;
}

.hero-screenshot-inner {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 60px 120px -30px rgba(46, 21, 14, 0.55),
    0 20px 40px -10px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: rotateX(34deg) scale(0.92);
  transform-origin: center top;
  will-change: transform;
  background: #1f2830;
}

.hero-screenshot-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-screenshot-caption {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-smooth) 0.2s;
  white-space: nowrap;
  z-index: 2;
}

/* ── Scroll Hint ─────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  will-change: opacity;
  color: var(--tf-gray-dk);
}
.hero-scroll-hint .hero-scroll-label {
  color: rgba(46, 21, 14, 0.55);
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(46, 21, 14, 0.5), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.5); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS – Scroll reveal
   ═══════════════════════════════════════════════════════════════ */

.animate-on-scroll,
.animate-fade-left,
.animate-fade-right {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  transition-delay: var(--stagger, 0s);
  will-change: opacity, transform;
}
.animate-on-scroll { transform: translateY(40px); }
.animate-fade-left { transform: translateX(-40px); }
.animate-fade-right { transform: translateX(40px); }

.animate-on-scroll.is-visible,
.animate-fade-left.is-visible,
.animate-fade-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-fade-left,
  .animate-fade-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.pain-card {
  transition: all 0.3s var(--ease-smooth);
}
.pain-card:hover {
  transform: translateY(-4px);
  border-color: var(--tf-green);
  background: #fff;
  box-shadow: 0 12px 30px -10px rgba(41, 103, 45, 0.12);
}

.feature-card {
  transition: all 0.4s var(--ease-smooth);
  box-shadow: 0 2px 8px rgba(46, 21, 14, 0.03);
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -12px rgba(41, 103, 45, 0.18);
  border-color: rgba(41, 103, 45, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL-VIDEO SECTIONS
   ═══════════════════════════════════════════════════════════════ */

.scroll-video-section {
  position: relative;
  background: #000;
}

.scroll-video-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.scroll-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.scroll-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, rgba(46,21,14,0.3) 0%, transparent 30%, transparent 70%, rgba(46,21,14,0.5) 100%);
  z-index: 1;
}

.scroll-video-texts {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 24px;
}

.scroll-video-text {
  text-align: center;
  max-width: 900px;
  color: #fff;
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s var(--ease-smooth), transform 0.8s var(--ease-smooth);
  transform: translateY(24px);
  pointer-events: none;
}
.scroll-video-text.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-video-text .eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a5e3b0;
  margin-bottom: 16px;
}

.scroll-video-text .headline {
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}
.scroll-video-text .headline .accent {
  color: #7dd98a;
}

/* Scroll hint at bottom of scroll-video sections */
.scroll-video-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 44px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: scroll-hint-fade 0.8s var(--ease-smooth) 0.6s backwards;
}

.scroll-video-hint-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.scroll-video-hint-mouse {
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.scroll-video-hint-mouse::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 2.5px;
  height: 7px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll-hint-wheel 1.8s ease-in-out infinite;
}

.scroll-video-hint-arrow {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.75);
  animation: scroll-hint-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-hint-wheel {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}

@keyframes scroll-hint-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

@keyframes scroll-hint-fade {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Hide hint when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-video-hint-mouse::before,
  .scroll-video-hint-arrow {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LAPTOP SCROLL ANIMATION (Canvas Frame Sequencer)
   ═══════════════════════════════════════════════════════════════ */

.laptop-scroll-section {
  position: relative;
  background: #ffffff;
}

/* Sticky Container = exakt 100vh. Darunter: fixer Text-Block oben,
   darunter ein Canvas-Wrapper, dessen Größe so begrenzt ist, dass
   das komplette 16:9-Bild (inkl. aller explodierten Panels) jederzeit
   vollständig sichtbar bleibt – zwischen Nav-Höhe oben und Seitenende unten. */
.laptop-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  /* Abstand zur fixen Top-Nav (72px) + etwas Luft unten */
  padding: calc(var(--nav-h) + 16px) 0 24px;
}

/* Text oben – fester Höhenbereich, bleibt immer lesbar */
.laptop-scroll-text {
  position: relative;
  z-index: 2;
  padding: 0 24px;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  flex-shrink: 0;
}

.laptop-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tf-green);
  margin-bottom: 10px;
}

.laptop-headline {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tf-gray-xdk);
}
.laptop-headline .accent {
  display: block;
  color: var(--tf-green);
  margin-top: 4px;
}

.laptop-desc {
  margin: 12px auto 0;
  max-width: 620px;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.55;
  color: var(--tf-gray-dk);
}

/* Canvas-Wrapper: nimmt den verbleibenden Platz, zentriert das Canvas.
   Das Canvas selbst ist in width/height limitiert, damit 16:9 garantiert
   komplett passt – auch auf ultrabreiten oder kurzen Viewports. */
.laptop-canvas-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin-top: clamp(16px, 2vh, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.laptop-canvas {
  display: block;
  /* 16:9 garantiert → nie Letterboxing im Canvas selbst.
     Canvas ist so groß wie möglich, aber passt immer komplett in die verfügbare
     Wrapper-Größe (Breite × Höhe). Browser rechnet aspect-ratio + beide max-*. */
  aspect-ratio: 16 / 9;
  max-width: min(100%, 1280px);
  max-height: 100%;
  width: auto;
  height: auto;
  /* Sehr sanfte Verblendung nur am äußersten Rand (letzte 6–8 %),
     damit der leichte Graustich des Quellvideos (244,253,253) verblendet wird,
     das Motiv selbst aber nirgends abgeschnitten wirkt. */
  -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%, #000 4%, #000 96%, transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%, #000 4%, #000 96%, transparent 100%
    );
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  mask-image: linear-gradient(
      to right,
      transparent 0%, #000 4%, #000 96%, transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%, #000 4%, #000 96%, transparent 100%
    );
}

/* Spacer steuert die Scrolllänge – je größer, desto länger läuft die Animation */
.laptop-scroll-spacer {
  height: 220vh;
}

@media (max-width: 768px) {
  .laptop-scroll-sticky {
    padding: calc(var(--nav-h) + 12px) 0 20px;
  }
  .laptop-headline {
    font-size: clamp(1.2rem, 5.2vw, 1.8rem);
  }
  .laptop-desc {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .laptop-canvas {
    /* Mobile: etwas schmalere Rand-Verblendung, damit Motiv maximal Platz hat */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%, #000 3%, #000 97%, transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%, #000 3%, #000 97%, transparent 100%
      );
    mask-image: linear-gradient(
        to right,
        transparent 0%, #000 3%, #000 97%, transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0%, #000 3%, #000 97%, transparent 100%
      );
  }
  .laptop-scroll-spacer {
    height: 180vh;
  }
}

/* Sehr niedrige Viewports (z.B. Laptop 13" mit Browser-Toolbar): Textgröße weiter reduzieren */
@media (max-height: 720px) and (min-width: 769px) {
  .laptop-headline {
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  }
  .laptop-desc {
    font-size: 0.88rem;
    margin-top: 8px;
  }
  .laptop-eyebrow {
    margin-bottom: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PROCESS STEPS
   ═══════════════════════════════════════════════════════════════ */

.process-step:last-child .w-px { display: none; }

/* ═══════════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════════ */

.pricing-card {
  background: #fff;
  border-color: rgba(198, 198, 198, 0.5);
  transition: all 0.4s var(--ease-smooth);
}
.pricing-card[data-accent="tf-green"] .pricing-tier { color: var(--tf-green); }
.pricing-card[data-accent="tf-purple"] .pricing-tier { color: var(--tf-purple); }
.pricing-card[data-accent="tf-blue"] .pricing-tier { color: var(--tf-blue); }

.pricing-card[data-accent="tf-green"] .pricing-category { color: var(--tf-green); }
.pricing-card[data-accent="tf-purple"] .pricing-category { color: var(--tf-purple); }
.pricing-card[data-accent="tf-blue"] .pricing-category { color: var(--tf-blue); }

.pricing-card[data-accent="tf-green"] .pricing-check { color: var(--tf-green); }
.pricing-card[data-accent="tf-purple"] .pricing-check { color: var(--tf-purple); }
.pricing-card[data-accent="tf-blue"] .pricing-check { color: var(--tf-blue); }

.pricing-cta {
  background: var(--tf-brown);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(46, 21, 14, 0.2);
}
.pricing-card[data-accent="tf-green"] .pricing-cta { background: var(--tf-green); box-shadow: 0 4px 14px -2px rgba(41,103,45,0.35); }
.pricing-card[data-accent="tf-purple"] .pricing-cta { background: var(--tf-purple); box-shadow: 0 4px 14px -2px rgba(102,49,102,0.35); }
.pricing-card[data-accent="tf-blue"] .pricing-cta { background: var(--tf-blue); box-shadow: 0 4px 14px -2px rgba(50,50,101,0.35); }
.pricing-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -16px rgba(46, 21, 14, 0.12);
}
.pricing-card[data-accent="tf-green"]:hover { border-color: var(--tf-green); }
.pricing-card[data-accent="tf-purple"]:hover { border-color: var(--tf-purple); }
.pricing-card[data-accent="tf-blue"]:hover { border-color: var(--tf-blue); }

.pricing-card.highlight {
  border-color: var(--tf-purple);
  box-shadow: 0 16px 40px -12px rgba(102, 49, 102, 0.2);
  position: relative;
}

.pricing-badge { background: var(--tf-purple); }
.pricing-card[data-accent="tf-green"] .pricing-badge { background: var(--tf-green); }
.pricing-card[data-accent="tf-purple"] .pricing-badge { background: var(--tf-purple); }
.pricing-card[data-accent="tf-blue"] .pricing-badge { background: var(--tf-blue); }

@media (min-width: 768px) {
  .pricing-card.highlight { transform: scale(1.04); }
  .pricing-card.highlight:hover { transform: scale(1.04) translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

.testimonial-track {
  position: relative;
  min-height: 280px;
}

.testimonial-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
  pointer-events: none;
  text-align: center;
}
.testimonial-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.quote-mark {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 100px;
  line-height: 1;
  color: var(--tf-green-light);
  opacity: 0.35;
  font-family: Georgia, serif;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  pointer-events: all;
  transition: all 0.3s var(--ease-smooth);
}
.carousel-btn:hover {
  background: var(--tf-green);
  border-color: var(--tf-green);
  transform: scale(1.06);
}

#testimonial-dots button {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
  border: 0;
  padding: 0;
}
#testimonial-dots button.active {
  background: var(--tf-green-light);
  width: 24px;
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

#video-lightbox {
  display: none;
}
#video-lightbox.is-open {
  display: flex;
  animation: lightboxIn 0.3s var(--ease-smooth) forwards;
}

.lightbox-backdrop {
  background: rgba(46, 21, 14, 0.85);
  backdrop-filter: blur(12px);
}

@keyframes lightboxIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.lightbox-open { overflow: hidden; }

.video-trigger { cursor: pointer; border: 0; background: none; padding: 0; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.footer-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.footer-list a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}
.footer-list a:hover { color: #fff; }

.footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.3s var(--ease-smooth);
}
.footer-chip:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #site-nav .nav-inner {
    margin-top: 10px;
    padding-left: 16px;
    padding-right: 8px;
  }

  .hero-circle {
    width: min(72vmin, 440px);
  }
  .hero-screenshot {
    width: min(82vw, 560px);
    bottom: -16vh;
  }
  .hero-content {
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 32vh;
    padding-left: 12px;
    padding-right: 12px;
  }
  .hero-content-inner {
    width: min(80vmin, 440px);
  }
  .hero-textplate {
    padding: 22px 20px 24px;
    border-radius: 22px;
  }
  .hero-headline {
    font-size: clamp(1.8rem, 7.5vw, 2.6rem);
  }
  .hero-subline {
    font-size: 0.92rem;
  }
  .scroll-video-text .headline {
    font-size: clamp(1.7rem, 8vw, 3rem);
  }
  .testimonial-slide .quote-mark { top: -10px; font-size: 60px; }
}

@media (max-width: 480px) {
  .hero-circle { width: 80vmin; }
  .hero-screenshot { width: 90vw; bottom: -18vh; }
  .hero-content-inner { width: 88vw; }
  .hero-content { padding-bottom: 28vh; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta > a { width: 100%; justify-content: center; }
  .hero-textplate { padding: 20px 18px 22px; }
}