/* ============================================
   V2 — Overrides & new components
   Mona Sans Variable (Lando Norris style)
   ============================================ */

/* ---- Font overrides ---- */
/* Font vars moved to theme.css — Mona Sans Variable */

/* ---- Grain / noise overlay ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ---- Lando color alternation in headings ---- */
.heading--hero .text-accent,
.heading--section .text-accent,
.portfolio-panel__line--accent {
  color: var(--lime-off);
}

.text-white {
  color: var(--text-on-dark);
}

.text-grey {
  color: var(--grey-muted);
}

/* ---- Hero: MASSIVE viewport-filling (Lando style) ---- */
.heading--hero {
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -0.125rem;
  text-transform: uppercase;
  font-size: clamp(4rem, 3rem + 8vw, 10rem);
  line-height: 0.886;
}

.heading--section {
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -0.06rem;
  text-transform: uppercase;
}

/* Ghost text more visible — targets individual letters */
.ghost__letter {
  opacity: 0.07 !important;
  font-size: clamp(7rem, 5rem + 16vw, 26rem);
  font-variation-settings: "wght" 700, "wdth" 75;
  line-height: 0.85;
}

/* Hero glow stronger */
.hero__glow {
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(210,255,0,0.08) 0%, transparent 65%);
}

/* ---- Nav top padding for body ---- */
body {
  padding-top: 0; /* hero is full-height, nav overlays it */
}


/* ============================================
   NAV — Sticky header
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-4) 0;
  transition: background var(--duration-fast) var(--ease-lando),
              backdrop-filter var(--duration-fast) var(--ease-lando),
              padding var(--duration-fast) var(--ease-lando);
}

.nav--scrolled {
  background: rgba(10, 10, 10, 0.95);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--accent-dim);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  line-height: 1;
}

.nav__links {
  display: flex;
  gap: var(--space-8);
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--duration-fast) var(--ease-lando);
}

.nav__link:hover {
  color: var(--accent);
}

.btn--sm {
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-xs);
}

/* ---- CTA visibility ---- */
.nav__cta-desktop { display: inline-flex; }
.nav__cta-menu { display: none; }

/* ---- Hamburger button ---- */
.nav__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3);
  min-width: 44px;
  min-height: 44px;
  color: var(--text-on-dark);
  z-index: 1001;
}

.nav__hamburger svg {
  display: block;
}

@media (max-width: 640px) {
  /* Mobile layout: logo left, hamburger right */
  .nav__cta-desktop { display: none; }
  .nav__cta-menu { display: inline-flex; margin-top: var(--space-6); }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .nav__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-on-dark);
    color: var(--bg-dark);
    border-radius: var(--radius-card);
    min-width: 48px;
    min-height: 48px;
  }

  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-lando),
                visibility var(--duration-fast) var(--ease-lando);
    z-index: 1000;
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
}


/* ============================================
   STATS — Big numbers section
   ============================================ */

.stats-section {
  padding-block: var(--space-16);
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: center;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

/* Vertical dividers between stats */
.stats__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--space-4));
  top: 10%;
  height: 80%;
  width: 1px;
  background: var(--accent-dim);
}

.stats__number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  font-variation-settings: "wght" 750, "wdth" 93;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.125rem;
}

.stats__unit {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
  font-variation-settings: "wght" 700, "wdth" 93;
  color: var(--accent);
  line-height: 1;
  vertical-align: baseline;
}

.stats__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--space-2);
}

@media (max-width: 900px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }

  .stats__item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .stats__number {
    font-size: var(--text-3xl);
  }

  .stats__unit {
    font-size: var(--text-2xl);
  }
}


/* ============================================
   DECOR-SCRIPT — Ghost display decorations
   ============================================ */

.decor-script {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(10rem, 8rem + 12vw, 24rem);
  font-variation-settings: "wght" 700, "wdth" 75;
  color: var(--accent);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  line-height: 0.85;
  white-space: nowrap;
  z-index: 0;
  text-transform: uppercase;
  animation: decorFloat 8s ease-in-out infinite;
}

@keyframes decorFloat {
  0%, 100% { transform: translate(0, 0) rotate(var(--decor-rot, -6deg)); }
  33% { transform: translate(6px, -8px) rotate(var(--decor-rot, -6deg)); }
  66% { transform: translate(-4px, 5px) rotate(var(--decor-rot, -6deg)); }
}

#problem {
  overflow: hidden;
}

/* Problem section decoration */
#problem .decor-script {
  --decor-rot: -6deg;
  top: 5%;
  right: -5%;
}


/* Steps section decoration (light bg) */
.decor-script--light {
  color: var(--text-on-light);
  opacity: 0.03;
}

#jak-to-dziala .decor-script {
  --decor-rot: -4deg;
  top: 15%;
  right: -2%;
  animation-delay: -3s;
}

#jak-to-dziala {
  position: relative;
  overflow: hidden;
}

/* Ensure section content stays above */
#problem .container,
#jak-to-dziala .container {
  position: relative;
  z-index: 1;
}


/* ============================================
   PORTFOLIO — Editorial horizontal scroll (Lando Norris style)
   ============================================ */

/* Giant viewport-filling intro panel */
.portfolio-panel {
  padding-block: 0;
}

.portfolio-panel__hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  position: relative;
}

.portfolio-panel__hero .label {
  margin-bottom: var(--space-6);
}

.portfolio-panel__title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 4rem + 12vw, 18rem);
  font-variation-settings: "wght" 700, "wdth" 75;
  line-height: 0.85;
  letter-spacing: -0.125rem;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin: 0;
}

.portfolio-panel__line {
  display: block;
}

.portfolio-panel__line--accent {
  color: var(--accent);
}

.portfolio-panel__count {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-8);
}

/* CTA under portfolio */
.portfolio-premium-cta {
  text-align: center;
  padding-block: var(--space-10) var(--space-16);
  font-size: var(--text-base);
  color: var(--text-on-dark-muted);
}

.portfolio-premium-cta__link {
  color: var(--accent);
  font-weight: 700;
  transition: opacity var(--duration-fast) var(--ease-lando);
}

.portfolio-premium-cta__link:hover {
  opacity: 0.8;
}

/* ---- Editorial horizontal track ---- */
.portfolio-panel .portfolio {
  padding-block: var(--space-8) var(--space-16);
}

.portfolio-panel .portfolio__track {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-inline: var(--space-12);
  padding-top: 60px;
  min-height: 85vh;
  will-change: transform;
}

/* Column groups */
.hscroll-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.hscroll-col--wide {
  gap: var(--space-6);
}

.hscroll-col--neg {
  margin-top: -4vh;
}

/* Spacers between column groups */
.hscroll-spacer {
  flex-shrink: 0;
  width: clamp(80px, 9vw, 160px);
}

.hscroll-spacer--sm {
  width: clamp(60px, 7vw, 120px);
}

/* ---- Items ---- */
.hscroll-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.hscroll-item {
  transition: opacity var(--duration-fast) var(--ease-lando);
}

a.hscroll-item:hover {
  opacity: 0.85;
}

.hscroll-item--top {
  align-self: flex-start;
}

.hscroll-item--bottom {
  align-self: flex-end;
}

/* ---- Eyebrow labels (above images) ---- */
.hscroll-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-muted);
  margin-bottom: var(--space-3);
  position: relative;
  overflow: hidden;
}

/* Lime line-reveal bar (sweeps across on scroll) */
.hscroll-eyebrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform-origin: right center;
  transform: scaleX(0);
  z-index: 1;
  pointer-events: none;
}

.hscroll-eyebrow.is-revealed::after {
  animation: lineReveal 0.6s var(--ease-lando) forwards;
}

@keyframes lineReveal {
  0%   { transform-origin: left center;  transform: scaleX(0); }
  50%  { transform-origin: left center;  transform: scaleX(1); }
  51%  { transform-origin: right center; transform: scaleX(1); }
  100% { transform-origin: right center; transform: scaleX(0); }
}

/* Premium badge inline */
.hscroll-badge {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bg-dark);
  background: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius-btn);
  margin-left: var(--space-2);
  vertical-align: middle;
  line-height: 1.4;
}

/* ---- Image containers (no card chrome, pure images) ---- */
.hscroll-img {
  overflow: hidden;
  border-radius: var(--radius-card);
  position: relative;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.hscroll-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transition: transform var(--duration-slow) var(--ease-lando);
}

a.hscroll-item:hover .hscroll-img img {
  transform: scale(1.04);
}

/* Size variants — editorial rhythm */
.hscroll-img--portrait {
  width: clamp(260px, 22vw, 380px);
  aspect-ratio: 3 / 4;
}

.hscroll-img--portrait-sm {
  width: clamp(220px, 18vw, 320px);
  aspect-ratio: 3 / 4;
}

.hscroll-img--landscape {
  width: clamp(300px, 28vw, 440px);
  aspect-ratio: 4 / 3;
}

.hscroll-img--landscape-lg {
  width: clamp(360px, 34vw, 540px);
  aspect-ratio: 16 / 10;
}

.hscroll-img--sm-monitor {
  width: clamp(240px, 20vw, 340px);
  aspect-ratio: 16 / 10;
}

.hscroll-img--hero {
  width: clamp(400px, 45vw, 720px);
  aspect-ratio: 16 / 10;
}

/* ---- Text callout (woven into scroll) ---- */
.hscroll-item--callout {
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-4);
}

.hscroll-callout {
  max-width: clamp(280px, 30vw, 480px);
}

.hscroll-callout__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.75rem);
  font-variation-settings: "wght" 500, "wdth" 93;
  font-style: italic;
  color: var(--text-on-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hscroll-callout__accent {
  color: var(--lime-off);
  font-style: italic;
}

.hscroll-callout__sig {
  width: 100px;
  height: 32px;
  margin-top: var(--space-4);
  opacity: 0.5;
}

/* ---- Pill counter (like Lando's checkered flag) ---- */
.hscroll-pill {
  display: inline-flex;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-btn);
  overflow: hidden;
  margin-top: var(--space-4);
}

.hscroll-pill__box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
}

.hscroll-pill__box--num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variation-settings: "wght" 700, "wdth" 93;
  color: var(--text-on-dark);
  letter-spacing: -0.02em;
}

.hscroll-pill__box--icon {
  border-left: 1px solid var(--accent-dim);
  color: var(--accent);
}

/* ---- Mobile: flatten to single-row scroll ---- */
@media (max-width: 640px) {
  .portfolio-panel__hero {
    min-height: 50vh;
  }

  .portfolio-panel__title {
    font-size: clamp(3rem, 2.5rem + 6vw, 7rem);
  }

  .portfolio-panel .portfolio__track {
    min-height: auto;
    gap: var(--space-6);
    padding-inline: var(--space-4);
    padding-top: 100px;
    align-items: center;
  }

  .hscroll-col {
    gap: var(--space-24);
    justify-content: center;
  }

  .hscroll-item--top {
    align-self: center;
  }

  .hscroll-item--bottom {
    align-self: center;
  }

  .hscroll-col--neg {
    margin-top: 0;
  }

  .hscroll-spacer {
    width: var(--space-2);
  }

  .hscroll-spacer--sm {
    width: var(--space-2);
  }

  .hscroll-img--portrait,
  .hscroll-img--portrait-sm,
  .hscroll-img--landscape,
  .hscroll-img--landscape-lg,
  .hscroll-img--sm-monitor,
  .hscroll-img--hero {
    width: clamp(200px, 65vw, 280px);
    aspect-ratio: 16 / 10;
  }

  .hscroll-callout {
    max-width: 220px;
  }

  .hscroll-callout__text {
    font-size: var(--text-base);
  }

  .hscroll-item--callout {
    padding-bottom: 0;
  }
}


/* ============================================
   FOOTER — Lando Norris style merged CTA + footer
   ============================================ */

.footer {
  position: relative;
  padding-block: var(--space-24) var(--space-6);
}

/* Lime gradient bottom edge */
.footer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 30%,
    var(--accent) 70%,
    transparent 100%
  );
  opacity: 0.6;
}

/* Big statement */
.footer__statement {
  text-align: center;
  padding-bottom: var(--space-16);
}

.footer__big-text {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 8vw, 12rem);
  font-variation-settings: "wght" 750, "wdth" 93;
  line-height: 0.886;
  letter-spacing: -0.125rem;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin: 0;
}

.footer__big-line {
  display: block;
}

/* Alternating colors: white → grey → lime-off */
.footer__big-line:nth-child(2) {
  color: var(--grey-muted);
}

.footer__big-line--accent {
  color: var(--lime-off);
}

.footer__subtitle {
  font-size: var(--text-lg);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-6);
  line-height: 1.5;
}

/* Two-column nav */
.footer__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-12);
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid var(--accent-dim);
  margin-bottom: var(--space-6);
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-col--right {
  text-align: right;
  align-items: flex-end;
}

.footer__nav-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-2);
}

.footer__nav-link {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variation-settings: "wght" 660, "wdth" 93;
  text-transform: uppercase;
  letter-spacing: -0.0625rem;
  color: var(--text-on-dark);
  transition: color var(--duration-fast) var(--ease-lando);
  line-height: 1.3;
}

.footer__nav-link:hover {
  color: var(--accent);
}

.footer__nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-base);
}

/* Bottom bar */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

.footer__link {
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  transition: color var(--duration-fast) var(--ease-lando);
}

.footer__link:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .footer {
    padding-block: var(--space-16) var(--space-6);
  }

  .footer__big-text {
    font-size: clamp(2.5rem, 2rem + 6vw, 5rem);
  }

  .footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__nav-cta {
    grid-column: 1 / -1;
    order: -1;
    padding-bottom: var(--space-4);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer__big-text {
    font-size: clamp(2rem, 1.5rem + 5vw, 3.5rem);
  }

  .footer__nav-link {
    font-size: var(--text-base);
  }
}


/* ============================================
   V2 — Mona Sans Variable overrides
   ============================================ */

/* Display elements: variable font settings */
.compare__heading,
.step__title,
.portfolio__title,
.footer__logo,
.marquee__item {
  font-variation-settings: "wght" 750, "wdth" 93;
}

.step__number,
.pricing__current {
  font-variation-settings: "wght" 700, "wdth" 75;
}

/* Buttons: semi-bold with tight tracking */
.btn {
  font-variation-settings: "wght" 660, "wdth" 93;
  letter-spacing: 0.02em;
}

/* Label stays DM Sans for contrast */
.label {
  font-family: var(--font-body);
}

/* Marquee items larger */
.marquee__item {
  font-size: var(--text-2xl);
  font-variation-settings: "wght" 750, "wdth" 93;
  letter-spacing: -0.02em;
}

/* Step numbers */
.step__number {
  font-variation-settings: "wght" 700, "wdth" 75;
  letter-spacing: -0.02em;
}

/* FAQ question */
.faq__question {
  font-variation-settings: "wght" 660, "wdth" 93;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Pricing current */
.pricing__current {
  font-variation-settings: "wght" 700, "wdth" 75;
  letter-spacing: -0.125rem;
}

/* Feature title */
.feature__title {
  font-variation-settings: "wght" 660, "wdth" 93;
}


/* ============================================
   V2 — Visual depth enhancements
   ============================================ */

/* Light sections: subtle top/bottom inset shadows for depth */
.section--light {
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.06), inset 0 -1px 0 rgba(0,0,0,0.06);
}

/* Compare cards: stronger visual contrast */
.compare__old {
  background: rgba(255,255,255,0.02);
}

.compare__new {
  background: rgba(210,255,0,0.08);
  box-shadow: 0 0 40px rgba(210,255,0,0.06);
}

/* Feature cards on light: subtle shadow for depth */
.feature {
  background: var(--bg-light);
  border-color: rgba(40,44,32,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.feature:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}




/* Pricing card: bigger price */
.pricing__current {
  font-size: clamp(3rem, 2.5rem + 3.5vw, 5.5rem);
}

/* Marquee: accent border stronger */
.marquee {
  border-color: var(--accent);
  border-width: 1px;
}

/* ---- Image marquee ---- */
.marquee--img {
  padding-block: var(--space-4);
}

.marquee--img .marquee__track {
  gap: var(--space-4);
  animation-duration: 40s;
}

.marquee__slide {
  flex-shrink: 0;
  width: clamp(200px, 25vw, 320px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  transition: border-color var(--duration-fast) var(--ease-lando);
}

.marquee__slide:hover {
  border-color: var(--accent);
}

.marquee__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

@media (max-width: 640px) {
  .marquee__slide {
    width: 180px;
  }
}

/* Stats section: subtle glow behind */
.stats-section {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(210,255,0,0.03) 0%, transparent 70%),
    var(--bg-dark);
}


/* ============================================
   CUSTOM CURSOR — Desktop only
   ============================================ */

@media (pointer: fine) {
  body {
    cursor: none;
  }

  a, button, summary, [role="button"] {
    cursor: none;
  }
}

.cursor-dot,
.cursor-follow {
  display: none;
}

@media (pointer: fine) {
  .cursor-dot {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.15s ease, height 0.15s ease, background 0.15s ease;
  }

  .cursor-follow {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  }

  /* Hover state — expand */
  .cursor-dot.is-hover {
    width: 14px;
    height: 14px;
    background: rgba(210, 255, 0, 0.6);
  }

  .cursor-follow.is-hover {
    width: 52px;
    height: 52px;
    opacity: 0.3;
  }
}


/* ============================================
   TESTIMONIALS — Masonry wall (Trigger.dev style)
   ============================================ */

.testimonials-section {
  border-top: 1px solid var(--accent-dim);
}

.testimonials__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.testimonials__header .heading--section {
  margin-bottom: 0;
}

/* Masonry via CSS columns */
.testimonials {
  column-count: 3;
  column-gap: var(--space-6);
}

.testimonials__card {
  break-inside: avoid;
  margin-bottom: var(--space-6);
  padding: var(--space-8);
  background: linear-gradient(160deg, rgba(26, 29, 22, 0.8) 0%, rgba(10, 10, 10, 0.6) 100%);
  border: 1px solid rgba(210, 255, 0, 0.06);
  border-radius: var(--radius-card);
  transition: border-color var(--duration-fast) var(--ease-lando),
              transform var(--duration-fast) var(--ease-lando);
}

.testimonials__card:hover {
  border-color: rgba(210, 255, 0, 0.15);
  transform: translateY(-2px);
}

/* Featured card — accent glow */
.testimonials__card--featured {
  border-color: rgba(210, 255, 0, 0.15);
  background: linear-gradient(160deg, rgba(210, 255, 0, 0.06) 0%, rgba(10, 10, 10, 0.6) 100%);
  box-shadow: 0 0 40px rgba(210, 255, 0, 0.04);
}

.testimonials__card--featured:hover {
  border-color: rgba(210, 255, 0, 0.25);
  box-shadow: 0 0 60px rgba(210, 255, 0, 0.06);
}

.testimonials__quote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-on-dark);
  line-height: 1.65;
  margin-bottom: var(--space-6);
  position: relative;
}

/* Subtle opening quote mark */
.testimonials__quote::before {
  content: '\201C';
  position: absolute;
  top: -0.35em;
  left: -0.05em;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-variation-settings: "wght" 700, "wdth" 75;
  color: var(--accent);
  opacity: 0.2;
  line-height: 1;
  pointer-events: none;
}

.testimonials__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonials__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--bg-dark);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-variation-settings: "wght" 700, "wdth" 93;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonials__card--featured .testimonials__avatar {
  background: var(--accent-dim);
}

.testimonials__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variation-settings: "wght" 660, "wdth" 93;
  color: var(--text-on-dark);
  letter-spacing: -0.01em;
}

.testimonials__role {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-on-dark-muted);
  letter-spacing: 0.02em;
}

/* Fade-out gradient at bottom — "there's more" effect */
.testimonials__fade {
  height: 120px;
  margin-top: calc(-1 * 120px);
  background: linear-gradient(to bottom, transparent, var(--bg-dark));
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
  .testimonials {
    column-count: 2;
  }
}

@media (max-width: 640px) {
  .testimonials {
    column-count: 1;
  }

  .testimonials__card {
    padding: var(--space-6);
  }

  .testimonials__header {
    margin-bottom: var(--space-8);
  }

  .testimonials__fade {
    height: 80px;
    margin-top: -80px;
  }
}