/* ============================================================
   THE BRANDSMITHS — assets/css/style.css
   Production CSS — Static layout + hover/transitions only
   JS animations (GSAP/Lenis) handled separately in app.js
   ============================================================ */


/* ============================================================
   1. RESET MINIMAL
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth; /* overridden by Lenis at runtime */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: #F7F7F5;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
  line-height: 1.1;
}

svg {
  display: block;
}


/* ============================================================
   2. FONT LOADING
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap');


/* ============================================================
   3. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
  /* Backgrounds */
  --color-bg-hero:         #0A0A0A;
  --color-bg-dark:         #1A1A1A;
  --color-bg-dark-card:    #252525;
  --color-bg-light:        #FFFFFF;
  --color-bg-gray:         #F3F4F6;
  --color-bg-gray-hover:   #E5E7EB;

  /* Borders */
  --color-border-light:         #E5E7EB;
  --color-border-dark:          rgba(255, 255, 255, 0.10);
  --color-border-dark-active:   rgba(255, 255, 255, 0.20);

  /* Text */
  --color-text-primary:    #1A1A1A;
  --color-text-white:      #FFFFFF;
  --color-text-muted:      #9CA3AF;
  --color-text-body:       #4B5563;
  --color-text-body-dark:  #D1D5DB;

  /* Accent */
  --color-hover-gold:      #EAB308;
  --color-accent-dark-gold:#D4A017;
  --color-accent-teal:     #0D9488;

  /* Typography */
  --font-display: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Layout */
  --container:        1200px;
  --container-wide:   1400px;
  --container-narrow:  900px;
  --gutter:           clamp(16px, 3vw, 48px);
  --section-padding:  clamp(64px, 10vw, 160px);

  /* Radii */
  --border-radius:     12px;
  --border-radius-lg:  16px;
  --border-radius-pill:999px;

  /* Transitions */
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-color:  color 0.4s ease;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

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

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   5. TYPOGRAPHY
   ============================================================ */

/* Section label — "+ What we do" */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: 24px;
}

.section-label::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
}

.section-label--white {
  color: rgba(255, 255, 255, 0.6);
}

.section-label--white::before {
  color: rgba(255, 255, 255, 0.6);
}

/* Section title */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Dual-tone typography */
.dual-tone .muted {
  color: var(--color-text-muted);
  font-weight: 400;
}

.dual-tone .emphasis {
  color: var(--color-text-primary);
  font-weight: 800;
}

/* Dark section dual-tone overrides */
.section--dark .dual-tone .muted,
.section--hero .dual-tone .muted,
.hero .dual-tone .muted {
  color: rgba(255, 255, 255, 0.45);
}

.section--dark .dual-tone .emphasis,
.section--hero .dual-tone .emphasis,
.hero .dual-tone .emphasis {
  color: var(--color-text-white);
}

/* Blur-reveal title class */
.blur-reveal {
  font-family: var(--font-display);
  font-size: clamp(40px, 12vw, 160px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Body text helpers */
.text-muted   { color: var(--color-text-muted); }
.text-body    { color: var(--color-text-body); }
.text-white   { color: var(--color-text-white); }
.text-gold    { color: var(--color-hover-gold); }

.text-sm  { font-size: 14px; }
.text-lg  { font-size: clamp(18px, 2vw, 22px); }


/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  cursor: pointer;
  border: none;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-hover-gold);
  outline-offset: 3px;
}

/* Primary — dark fill */
.btn--primary {
  background: var(--color-text-primary);
  color: var(--color-text-white);
  padding: 15px 32px;
  border-radius: var(--border-radius-pill);
}

.btn--primary:hover {
  background: var(--color-hover-gold);
  color: var(--color-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.3);
}

/* Outline — on dark backgrounds */
.btn--outline {
  background: transparent;
  color: var(--color-text-white);
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--border-radius-pill);
}

.btn--outline:hover {
  background: var(--color-text-white);
  color: var(--color-text-primary);
  border-color: var(--color-text-white);
}

/* Outline dark — on light backgrounds */
.btn--outline-dark {
  background: transparent;
  color: var(--color-text-primary);
  padding: 14px 28px;
  border: 1px solid var(--color-text-primary);
  border-radius: var(--border-radius-pill);
}

.btn--outline-dark:hover {
  background: var(--color-text-primary);
  color: var(--color-text-white);
}

/* Gold fill */
.btn--gold {
  background: var(--color-hover-gold);
  color: var(--color-text-primary);
  padding: 15px 32px;
  border-radius: var(--border-radius-pill);
}

.btn--gold:hover {
  background: var(--color-accent-dark-gold);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35);
}

/* Text link */
.btn--link {
  color: var(--color-text-primary);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-color);
}

.btn--link:hover {
  color: var(--color-hover-gold);
}

/* Text link on dark */
.btn--link-white {
  color: var(--color-text-white);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-color);
}

.btn--link-white:hover {
  color: var(--color-hover-gold);
}

/* Arrow CTA — "Discover more ↗" */
.btn--arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
  padding-bottom: 2px;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.btn--arrow:hover {
  color: var(--color-hover-gold);
  border-color: var(--color-hover-gold);
}


/* ============================================================
   7. CUSTOM CURSOR
   ============================================================ */
.custom-cursor {
  width: 10px;
  height: 10px;
  background: #1A1A1A;
  border-radius: 50%;
  position: fixed;
  top: -5px;
  left: -5px;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  will-change: transform;
  transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease;
}

.custom-cursor--hover {
  width: 28px;
  height: 28px;
  top: -14px;
  left: -14px;
}

@media (hover: none) {
  .custom-cursor { display: none; }
}


/* ============================================================
   8. HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--gutter);
  transition: background-color var(--transition-slow),
              color var(--transition-slow),
              padding var(--transition-slow),
              box-shadow var(--transition-slow);
}

.header--transparent {
  background: transparent;
  color: var(--color-text-white);
}

.header--solid {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-primary);
  box-shadow: 0 1px 0 var(--color-border-light);
  padding-block: 16px;
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.header__logo:hover { opacity: 0.8; }

.header__logo img,
.header__logo svg {
  height: 36px;
  width: auto;
}

.header__logo-wordmark {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  line-height: 1;
}

/* Desktop nav */
.header__nav {
  display: none;
}

.header__nav a {
  font-size: 15px;
  font-weight: 500;
  color: currentColor;
  text-decoration: none;
  transition: var(--transition-color);
  position: relative;
  padding-bottom: 2px;
}

.header__nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-hover-gold);
  transition: width var(--transition-base);
}

.header__nav a:hover { color: var(--color-hover-gold); }
.header__nav a:hover::after { width: 100%; }

/* CTA button in header */
.header__cta {
  display: none;
}

/* Hamburger */
.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  color: currentColor;
  flex-shrink: 0;
  transition: color var(--transition-base);
}

.header__hamburger:hover { color: var(--color-hover-gold); }

.header__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.header__hamburger.is-active span:nth-child(1) {
  transform: translateY(8.25px) rotate(45deg);
}

.header__hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__hamburger.is-active span:nth-child(3) {
  transform: translateY(-8.25px) rotate(-45deg);
}

/* Responsive header */
@media (min-width: 1024px) {
  .header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 36px;
  }

  .header__cta {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: 24px;
  }

  .header__hamburger {
    display: none;
  }
}


/* ============================================================
   9. OFF-CANVAS NAVIGATION
   ============================================================ */
.off-canvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.off-canvas-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.off-canvas {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 90vw);
  height: 100dvh;
  background: var(--color-bg-hero);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  padding: 40px 36px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.off-canvas.is-active {
  transform: translateX(0);
}

/* Close button */
.off-canvas__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark-active);
  color: var(--color-text-white);
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base);
  font-size: 18px;
}

.off-canvas__close:hover {
  border-color: var(--color-hover-gold);
  color: var(--color-hover-gold);
}

/* Logo in off-canvas */
.off-canvas__logo {
  height: 32px;
  width: auto;
}

/* Nav links */
.off-canvas__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.off-canvas__nav a {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  color: var(--color-text-white);
  line-height: 1.2;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition-color), border-color var(--transition-base);
}

.off-canvas__nav a::after {
  content: '↗';
  font-size: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.off-canvas__nav a:hover {
  color: var(--color-hover-gold);
  border-color: var(--color-border-dark-active);
}

.off-canvas__nav a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Contact info in off-canvas */
.off-canvas__contact {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-dark);
}

.off-canvas__contact p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.off-canvas__contact a {
  color: var(--color-text-white);
  transition: var(--transition-color);
}

.off-canvas__contact a:hover { color: var(--color-hover-gold); }

/* Social icons in off-canvas */
.off-canvas__social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.off-canvas__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark-active);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-white);
  font-size: 14px;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.off-canvas__social a:hover {
  border-color: var(--color-hover-gold);
  color: var(--color-hover-gold);
}


/* ============================================================
   10. HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-bg-hero);
  color: var(--color-text-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-x: hidden;
}

/* Background image / WebGL canvas container */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.5) brightness(0.65);
}

/* WebGL canvas overlay — pointer-events off so mouse hits container */
#hero-ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Subtle gradient overlay */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.3) 0%,
    rgba(10, 10, 10, 0.1) 50%,
    rgba(10, 10, 10, 0.7) 100%
  );
  z-index: 2;
}

/* All content sits above overlay */
.hero__content {
  position: absolute;
  bottom: 60px;
  left: var(--container-padding, 40px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(80px, 8vh, 120px);
  max-width: 55%;
}

/* Eyebrow label — absolut, top sub header, stânga */
.hero__label {
  position: absolute;
  top: 120px;
  left: var(--gutter);
  z-index: 3;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
  pointer-events: none;
}

/* Main headline */
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 110px);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  margin: 0 0 clamp(24px, 3vw, 40px) 0;
  max-width: 90vw;
}

.hero__headline .muted {
  display: block;
  font-size: 0.75em;
  font-weight: 800;
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: -0.04em;
}

.hero__headline .emphasis {
  display: block;
  font-size: 1em;
  font-weight: 900;
  line-height: 0.9;
  color: #FFFFFF;
  letter-spacing: -0.04em;
}

/* Subhero text */
.hero__subhero {
  font-size: clamp(15px, 1.8vw, 20px);
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: 40px;
}

/* Right-side floating content (desktop overlay) */
.hero__aside {
  position: absolute;
  right: 22vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 260px;
}

.hero__aside-tagline {
  text-align: left;
  font-size: clamp(15px, 1.6vw, 19px);
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

/* Floating video thumbnail card */
.hero__video-card {
  width: 220px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.hero__video-card:hover {
  transform: scale(1.03);
  border-color: rgba(255, 255, 255, 0.3);
}

.hero__video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.hero__video-caption {
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__video-caption::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 14px no-repeat;
  flex-shrink: 0;
}

/* CTAs row */
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Bottom services bar */
.hero__bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: auto;
}

.hero__bar-item {
  padding: 20px var(--gutter);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: color var(--transition-base);
}

.hero__bar-item:last-child { border-right: none; }

.hero__bar-item:hover { color: rgba(255, 255, 255, 0.95); }

.hero__bar-item .num {
  color: var(--color-hover-gold);
  margin-right: 8px;
}

.hero__bar-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
}

.hero__bar-item:hover .hero__bar-value {
  color: var(--color-hover-gold);
}

@media (min-width: 768px) {
  .hero__bar {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero__aside {
    display: flex;
  }
}

@media (max-width: 767px) {
  .hero__aside { display: none; }

  .hero__headline {
    font-size: clamp(32px, 7vw, 48px);
    overflow-x: hidden;
  }
}


/* ============================================================
   11. VIDEO LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.lightbox.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__inner {
  position: relative;
  width: min(900px, 92vw);
  aspect-ratio: 16 / 9;
}

.lightbox__inner video,
.lightbox__inner iframe {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

.lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.lightbox__close:hover {
  border-color: var(--color-hover-gold);
  color: var(--color-hover-gold);
}


/* ============================================================
   12. SECTION — WHAT WE DO
   ============================================================ */
.what-we-do {
  background: var(--color-bg-light);
  padding-block: var(--section-padding);
}

.what-we-do__layout {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
}

.what-we-do__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.what-we-do__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.what-we-do__text {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--color-text-body);
  line-height: 1.7;
  max-width: 500px;
}

@media (min-width: 768px) {
  .what-we-do__layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}


/* ============================================================
   13. COUNTER CARDS
   ============================================================ */
.counters {
  padding-block: var(--section-padding);
  background: var(--color-bg-light);
}

.counters__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  overflow-x: hidden;
}

.counter-card {
  background: var(--color-bg-gray);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  border-bottom: 1px solid var(--color-border-light);
  transition: background var(--transition-base);
}

.counter-card:last-child { border-bottom: none; }
.counter-card:hover { background: var(--color-bg-gray-hover); }

.counter-card__index {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.counter-card__number {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 80px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.counter-card__title {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.counter-card__text {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.6;
  max-width: 280px;
}

/* Partner logos inside counter card */
.counter-card__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.counter-card__logos img {
  height: 24px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity var(--transition-base);
}

.counter-card__logos img:hover { opacity: 1; }

@media (min-width: 768px) {
  .counters__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .counter-card {
    border-bottom: none;
    border-right: 1px solid var(--color-border-light);
  }

  .counter-card:last-child { border-right: none; }
}

@media (max-width: 767px) {
  .counters__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   14. PORTFOLIO GRID
   ============================================================ */
.portfolio-section {
  padding-block: var(--section-padding);
  background: var(--color-bg-light);
  position: relative;
  z-index: 2;
}

.portfolio-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 56px);
  flex-wrap: wrap;
  gap: 16px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: hidden;
}

.portfolio-card {
  position: relative;
  overflow: visible;
}

.portfolio-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.portfolio-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.portfolio-card__year {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.portfolio-card__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-bg-gray);
}

.portfolio-card:nth-child(odd) .portfolio-card__image {
  aspect-ratio: 4 / 3;
}

.portfolio-card:nth-child(even) .portfolio-card__image {
  aspect-ratio: 16 / 9;
}

.portfolio-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-card__image:hover img {
  transform: scale(1.05);
}

/* Hover overlay */
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  transition: background var(--transition-slow);
}

.portfolio-card__image:hover .portfolio-card__overlay {
  background: rgba(10, 10, 10, 0.45);
}

.portfolio-card__overlay-text {
  color: white;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  display: flex;
  align-items: center;
  gap: 6px;
}

.portfolio-card__image:hover .portfolio-card__overlay-text {
  opacity: 1;
  transform: translateY(0);
}

/* WebGL ripple canvas per card */
.portfolio-card__image canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Category tag */
.portfolio-card__cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   15. PORTFOLIO — FILTER BAR (portfolio.php)
   ============================================================ */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.portfolio-filter-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-border-light);
  background: transparent;
  color: var(--color-text-body);
  cursor: pointer;
  transition: all var(--transition-base);
}

.portfolio-filter-btn:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.portfolio-filter-btn.is-active {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-text-white);
}

.portfolio-card.is-hidden {
  display: none;
}


/* ============================================================
   16. SERVICES SECTION (DARK)
   ============================================================ */
.services-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
  padding-block: var(--section-padding);
  position: relative;
  overflow-x: hidden;
  border-radius: 24px;
}

.services-dark__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.services-dark__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 120px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.88;
  color: var(--color-text-white);
  margin-bottom: 8px;
}

.services-dark__intro {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  margin-top: 20px;
}

.services-dark__header-cta {
  flex-shrink: 0;
  margin-top: clamp(8px, 1vw, 20px);
}

/* Services grid (above accordion) */
.services-dark__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(56px, 7vw, 96px);
  overflow-x: hidden;
}

@media (min-width: 640px) {
  .services-dark__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .services-dark__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .services-dark__grid { grid-template-columns: 1fr; }
}

.service-card {
  position: relative;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--color-bg-dark-card);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-border-dark-active);
  transform: translateY(-2px);
}

.service-card--featured {
  background: linear-gradient(140deg, rgba(234, 179, 8, 0.08), rgba(234, 179, 8, 0.02) 60%, transparent);
  border-color: rgba(234, 179, 8, 0.25);
}

.service-card__number {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-hover-gold);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-white);
}

.service-card__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  flex: 1;
}

.service-card__link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-white);
  text-transform: uppercase;
  transition: color var(--transition-base);
  margin-top: 4px;
}

.service-card__link:hover {
  color: var(--color-hover-gold);
}

/* Accordion */
.accordion-dark {
  border-top: 1px solid var(--color-border-dark-active);
}

.accordion-dark__item {
  border-bottom: 1px solid var(--color-border-dark-active);
  overflow: hidden;
}

.accordion-dark__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3.4vw, 40px) 0;
  color: var(--color-text-white);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-base);
}

.accordion-dark__trigger:hover {
  color: var(--color-hover-gold);
}

.accordion-dark__num {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  color: var(--color-text-muted);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  min-width: 48px;
}

.accordion-dark__name,
.accordion-dark__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  flex: 1;
  line-height: 1.2;
}

.accordion-dark__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark-active);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.4s var(--transition-base, ease), border-color var(--transition-base), color var(--transition-base);
  color: var(--color-text-white);
}

.accordion-dark__item.is-active .accordion-dark__icon {
  border-color: var(--color-hover-gold);
  color: var(--color-hover-gold);
}

/* Toggle horizontal line of the + icon (hides on open to make a - sign) */
.accordion-dark__item.is-active .accordion-dark__icon .accord-line-v {
  opacity: 0;
  transform-origin: center;
  transform: scaleY(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.accordion-dark__icon .accord-line-v {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Expanded content */
.accordion-dark__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-dark__item.is-active .accordion-dark__content {
  max-height: 600px;
}

.accordion-dark__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-bottom: 36px;
}

.accordion-dark__image,
.accordion-dark__img-wrap {
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.accordion-dark__image img,
.accordion-dark__img-wrap img,
.accordion-dark__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.accordion-dark__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-dark__list li {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--color-text-body-dark);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.accordion-dark__list li::before {
  content: '→';
  color: var(--color-hover-gold);
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

/* Pill tags */
.accordion-dark__pills,
.accordion-dark__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.accordion-dark__pill,
.accordion-dark__tags .pill-tag {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  padding: 7px 16px;
  border-radius: var(--border-radius-pill);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.accordion-dark__pill:hover,
.accordion-dark__tags .pill-tag:hover {
  background: rgba(234, 179, 8, 0.18);
  border-color: rgba(234, 179, 8, 0.45);
  color: var(--color-hover-gold);
}

@media (min-width: 1024px) {
  .accordion-dark__body {
    grid-template-columns: 1.2fr 1.5fr 1fr;
  }
}


/* ============================================================
   17. PARTNERS GRID
   ============================================================ */
.partners {
  padding-block: var(--section-padding);
  background: var(--color-bg-light);
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 40px;
  overflow-x: hidden;
}

.partner-logo {
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-light);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.partner-logo:hover {
  border-color: var(--color-text-muted);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.partner-logo img {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--transition-base), opacity var(--transition-base);
}

.partner-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@media (min-width: 768px) {
  .partners__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .partners__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 767px) {
  .partners__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   18. AWARDS
   ============================================================ */
.awards {
  padding-block: var(--section-padding);
  background: var(--color-bg-gray);
}

.awards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
  overflow-x: hidden;
}

.award-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: var(--color-bg-light);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border-light);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.award-item:hover {
  border-color: var(--color-hover-gold);
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.1);
}

.award-item__num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  min-width: 36px;
}

.award-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.award-item__title {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.award-item__year {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 3px;
}

@media (min-width: 768px) {
  .awards__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .awards__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .award-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .awards__grid {
    grid-template-columns: 1fr;
  }
}


/* ─── Awards section (homepage, table-row layout) ─── */
.awards-section {
  padding-block: var(--section-padding);
  background: var(--color-bg-gray);
}

.awards-section__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.awards-section__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 13vw, 200px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--color-text-primary);
  margin-top: 4px;
}

.awards-section__title-dot {
  color: var(--color-hover-gold);
}

.awards-section__tag {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 16px);
  color: var(--color-text-body);
  letter-spacing: 0.02em;
}

.awards-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  margin-top: 32px;
}

/* Override base .award-item card layout when inside .awards-grid (table-row look) */
.awards-grid .award-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 30px) clamp(8px, 1vw, 16px);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 0;
  text-align: left;
  transition: background var(--transition-base);
}

.awards-grid .award-item:hover {
  background: rgba(234, 179, 8, 0.05);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: none;
}

/* HTML order is icon, num, title, year — use CSS order to render num, icon, title, year */
.awards-grid .award-item__num {
  order: 1;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  min-width: 56px;
}

.awards-grid .award-item__icon {
  order: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text-primary);
  color: var(--color-bg-light);
  border-radius: 8px;
  flex-shrink: 0;
}

.awards-grid .award-item__icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-bg-light);
  stroke: var(--color-bg-light);
}

.awards-grid .award-item__title {
  order: 3;
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.awards-grid .award-item__year {
  order: 4;
  margin-left: auto;
  margin-top: 0;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .awards-grid .award-item {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .awards-grid .award-item__title {
    flex: 1 1 100%;
    order: 5;
    margin-top: 4px;
  }
}


/* ============================================================
   19. COUNTERS DARK (aggregate stats bar)
   ============================================================ */
.counters-dark {
  background: var(--color-bg-hero);
  color: var(--color-text-white);
  padding-block: var(--section-padding);
}

.counters-dark__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  text-align: center;
  overflow-x: hidden;
}

.counters-dark .counter__number {
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 120px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-text-white);
}

.counters-dark .counter__label {
  font-size: 15px;
  color: var(--color-text-muted);
  margin-top: 10px;
  font-weight: 400;
}

@media (min-width: 640px) {
  .counters-dark__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .counters-dark__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .counters-dark__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   20. FAQ ACCORDION
   ============================================================ */
.faq {
  background: var(--color-bg-light);
  padding-block: var(--section-padding);
}

.faq__list {
  max-width: var(--container-narrow);
  margin: 40px auto 0;
}

.faq__item {
  border-bottom: 1px solid var(--color-border-light);
}

.faq__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 600;
  color: var(--color-text-primary);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  transition: color var(--transition-base);
}

.faq__trigger:hover { color: var(--color-hover-gold); }

.faq__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-muted);
  transition: transform var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.faq__item.is-active .faq__icon {
  transform: rotate(45deg);
  border-color: var(--color-hover-gold);
  color: var(--color-hover-gold);
}

.faq__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq__item.is-active .faq__content {
  max-height: 500px;
}

.faq__answer {
  padding: 0 0 24px;
  color: var(--color-text-body);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.75;
  max-width: 680px;
}


/* ============================================================
   21. PROCESS / HOW WE WORK
   ============================================================ */
.process {
  background: var(--color-bg-light);
  padding-block: var(--section-padding);
}

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 48px;
  position: relative;
}

/* Vertical line connector */
.process__steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 48px;
  width: 1px;
  background: var(--color-border-light);
  z-index: 0;
}

.process__step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 0;
  position: relative;
  z-index: 1;
}

.process__step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-text-primary);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.process__step:hover .process__step-num {
  background: var(--color-hover-gold);
}

.process__step-content {
  padding-top: 8px;
}

.process__step-duration {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-hover-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.process__step-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.process__step-text {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 1.65;
  max-width: 460px;
}

@media (min-width: 768px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 48px;
  }

  .process__steps::before {
    display: none;
  }
}

@media (min-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Horizontal connector */
  .process__steps::before {
    display: block;
    left: 48px;
    right: 48px;
    top: 23px;
    bottom: auto;
    height: 1px;
    width: auto;
  }
}


/* ============================================================
   22. INDUSTRIES
   ============================================================ */
.industries {
  background: var(--color-bg-dark);
  color: var(--color-text-white);
  padding-block: var(--section-padding);
}

.industries__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 48px;
}

.industry-card {
  background: var(--color-bg-dark-card);
  border: 1px solid transparent;
  border-radius: var(--border-radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: background var(--transition-base), border-color var(--transition-base);
  cursor: default;
}

.industry-card:hover {
  background: var(--color-bg-hero);
  border-color: var(--color-hover-gold);
}

.industry-card__icon {
  font-size: 28px;
  flex-shrink: 0;
}

.industry-card__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--color-text-white);
  margin-bottom: 4px;
}

.industry-card__text {
  font-size: 14px;
  color: var(--color-text-body-dark);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .industries__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .industries__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   23. FOUNDERS / TEAM
   ============================================================ */
.founders {
  background: var(--color-bg-light);
  padding-block: var(--section-padding);
}

.founders__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.founders__photo-wrap {
  position: relative;
}

.founders__photo {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  filter: grayscale(25%);
  display: block;
}

.founders__badge {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--color-hover-gold);
  color: var(--color-text-primary);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.35);
}

.founders__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.founders__name {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.founders__role {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-teal);
  margin-bottom: -8px;
}

.founders__bio {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--color-text-body);
  line-height: 1.75;
}

@media (min-width: 1024px) {
  .founders__layout {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================================
   24. CASE STUDY FEATURED
   ============================================================ */
/* ============================================================
   CASE FEATURED — Castolin (Pixora-style: asimetric, expresiv)
   ============================================================ */
.case-featured {
  background: transparent;
  padding-block: clamp(80px, 10vw, 160px);
  color: var(--color-text-primary);
  overflow: hidden;
}

/* === HEADER === */
.case-featured__head {
  margin-bottom: clamp(56px, 7vw, 112px);
}

.case-featured__arrow {
  display: inline-block;
  margin-left: 8px;
  transform: translateY(1px);
}

.case-featured__head-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-top: clamp(20px, 3vw, 36px);
}

@media (min-width: 900px) {
  .case-featured__head-grid {
    grid-template-columns: 1.45fr 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.case-featured__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}

.case-featured__title-muted {
  display: block;
  color: rgba(26, 26, 26, 0.28);
}

.case-featured__title-emphasis {
  display: block;
  color: #1A1A1A;
}

.case-featured__title-accent {
  color: #EAB308;
}

.case-featured__intro {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: rgba(26, 26, 26, 0.7);
  margin: 0;
  max-width: 420px;
  padding-bottom: clamp(6px, 1vw, 14px);
}

.case-featured__intro strong {
  color: #1A1A1A;
  font-weight: 700;
}

/* === BODY === */
.case-featured__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(60px, 7vw, 100px);
  align-items: start;
}

@media (min-width: 1024px) {
  .case-featured__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(60px, 7vw, 120px);
  }
}

/* === VISUAL — imagine + watermark + badge floating === */
.case-featured__visual {
  position: relative;
  padding-top: clamp(30px, 4vw, 60px);
}

.case-featured__watermark {
  position: absolute;
  top: -0.5em;
  left: -0.08em;
  font-family: var(--font-display);
  font-size: clamp(130px, 19vw, 280px);
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.05);
  line-height: 0.85;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.case-featured__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #EFEFEC;
  box-shadow: 0 36px 72px -24px rgba(0, 0, 0, 0.22);
}

.case-featured__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.case-featured__figure:hover .case-featured__img {
  transform: scale(1.03);
}

.case-featured__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(26, 26, 26, 0.94);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}

.case-featured__caption-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}

.case-featured__caption-value {
  font-family: var(--font-body);
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 600;
}

/* Badge "8 ani" floating — magnetic + sticky (vezi initMagneticBadge în app.js) */
.case-featured__badge {
  --mx: 0px;
  --my: 0px;
  position: absolute;
  top: clamp(-10px, 0vw, 10px);
  right: clamp(-12px, -1vw, -20px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: clamp(110px, 12vw, 150px);
  height: clamp(110px, 12vw, 150px);
  padding: 14px;
  border-radius: 50%;
  background: #EAB308;
  color: #1A1A1A;
  text-align: center;
  translate: var(--mx) var(--my);
  rotate: -8deg;
  scale: 1;
  box-shadow: 0 18px 44px -10px rgba(234, 179, 8, 0.55);
  transition: rotate 0.6s cubic-bezier(0.22, 1.5, 0.36, 1),
              scale 0.5s ease,
              box-shadow 0.4s ease;
  cursor: pointer;
  will-change: translate, rotate, scale;
}

.case-featured__badge.is-stuck {
  rotate: 0deg;
  scale: 1.08;
  cursor: grabbing;
  box-shadow: 0 24px 60px -8px rgba(234, 179, 8, 0.7);
}

.case-featured__badge-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
}

.case-featured__badge-text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.25;
  margin-top: 6px;
  max-width: 90px;
}

/* === ASIDE — narativ + stats + quote dark === */
.case-featured__aside {
  position: relative;
  padding-top: clamp(20px, 3vw, 40px);
}

.case-featured__copy { margin: 0; }

.case-featured__text {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
  color: rgba(26, 26, 26, 0.7);
  margin: 0 0 20px 0;
}

.case-featured__text:last-child { margin-bottom: 0; }

.case-featured__text strong {
  color: #1A1A1A;
  font-weight: 600;
}

/* Stats inline: 3.500 → 10K */
.case-featured__stats {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(36px, 4vw, 56px) 0;
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.case-featured__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.case-featured__stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: #1A1A1A;
}

.case-featured__stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.case-featured__stat-arrow {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 400;
  color: #EAB308;
  line-height: 1;
}

/* Service chips — în aside, sub stats; stacate orizontal cu wrap natural */
.case-featured__chips-wrap {
  margin: clamp(28px, 3vw, 40px) 0 0;
}

.case-featured__chips-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 14px 0;
}

.case-featured__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-featured__chips li {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1A1A1A;
  background: #FFFFFF;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.case-featured__chips li:hover {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #EAB308;
  transform: translateY(-2px);
}

/* Quote — dark card cu mark mare gold */
.case-featured__quote {
  position: relative;
  margin: clamp(28px, 3vw, 44px) 0;
  padding: clamp(32px, 3.5vw, 44px) clamp(28px, 3vw, 40px) clamp(28px, 3vw, 36px);
  background: #1A1A1A;
  color: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.case-featured__quote::before {
  content: '"';
  position: absolute;
  top: -32px;
  left: 18px;
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 160px;
  line-height: 1;
  color: #EAB308;
  font-weight: 700;
  pointer-events: none;
}

.case-featured__quote p {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 22px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 24px 0;
}

.case-featured__quote footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.case-featured__quote footer strong {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: #EAB308;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-featured__quote footer span {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  letter-spacing: 0.03em;
}

/* CTAs */
.case-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: clamp(28px, 3vw, 40px);
  align-items: center;
}

@media (max-width: 540px) {
  .case-featured__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}


/* ============================================================
   25. THE SMITHY SECTION
   ============================================================ */
.smithy {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-dark-card) 100%);
  color: var(--color-text-white);
  padding-block: var(--section-padding);
}

.smithy__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.smithy__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hover-gold);
  margin-bottom: 16px;
}

.smithy__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.smithy__text {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--color-text-body-dark);
  line-height: 1.75;
  margin-bottom: 36px;
}

.smithy__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.smithy__feature {
  padding: 20px 24px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.smithy__feature:hover {
  border-color: var(--color-hover-gold);
  background: rgba(234, 179, 8, 0.05);
}

.smithy__feature-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.smithy__feature-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-white);
  margin-bottom: 4px;
}

.smithy__feature-text {
  font-size: 13px;
  color: var(--color-text-body-dark);
  line-height: 1.55;
}

.smithy__screenshot {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-dark);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.smithy__screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .smithy__features { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .smithy__layout { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   26. CTA / CONTACT FORM SECTION
   ============================================================ */
.cta-final {
  background: linear-gradient(to bottom, var(--color-bg-hero), #111111);
  color: var(--color-text-white);
  padding-block: var(--section-padding);
}

.cta-final__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

.cta-final__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.cta-final__text {
  font-size: clamp(15px, 1.5vw, 17px);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.75;
  margin-bottom: 32px;
}

.cta-final__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cta-final__info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.cta-final__info-item a:hover { color: var(--color-hover-gold); }

.cta-final__info-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark-active);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

/* Contact form card */
.cta-final__form-wrap {
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  padding: clamp(28px, 4vw, 48px);
  color: var(--color-text-primary);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-primary);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-hover-gold);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* GDPR consent checkbox */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-hover-gold);
  cursor: pointer;
}

/* Form status messages */
.form-success,
.form-error {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 16px;
  display: none;
}

.form-success {
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.3);
  color: #0D9488;
}

.form-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #DC2626;
}

.form-success.is-visible,
.form-error.is-visible {
  display: block;
}

@media (min-width: 1024px) {
  .cta-final__layout { grid-template-columns: 1fr 1.3fr; }
}


/* ============================================================
   27. FOOTER — Pixora style
   ============================================================ */
.footer--pixora {
  background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
  color: #FFFFFF;
  padding-top: clamp(72px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}

/* ─── Main 3-column grid ─── */
.footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
@media (min-width: 768px) {
  .footer__main {
    /* Coloane balansate — lead puțin mai larg pentru tagline-ul display */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 4.5vw, 72px);
    /* stretch → toate coloanele au aceeași înălțime → socials se aliniază
       cu baseline-ul ultimului element din celelalte coloane */
    align-items: stretch;
  }
}

/* ─── LEAD column (tagline TOP + socials BOTTOM) ─── */
.footer__lead {
  display: flex;
  flex-direction: column;
  /* tagline sus, socials jos — alignment cu bottom-ul celorlalte coloane */
  justify-content: space-between;
  gap: clamp(28px, 3.5vw, 40px);
}
.footer__tagline {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0;
  max-width: 12ch;
}

.footer__socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer__social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__social:hover {
  border-color: #EAB308;
  background: rgba(234, 179, 8, 0.1);
  color: #EAB308;
  transform: translateY(-2px);
}

/* ─── Group columns (Quick Links + Contact) ─── */
.footer__group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer__group-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin: 0 0 6px;
}
.footer__group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EAB308;
  flex-shrink: 0;
}

/* ─── Quick Links pills ─── */
.footer__pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer__pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__pill:hover {
  background: #EAB308;
  border-color: #EAB308;
  color: #1A1A1A;
  transform: translateY(-2px);
}

/* ─── Contact list ─── */
.footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__contact-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer__contact-link:hover {
  color: #EAB308;
}
.footer__addr {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  font-style: normal;
  color: rgba(255, 255, 255, 0.55);
  margin: 8px 0 0;
}

/* ─── Brand watermark gigantic ─── */
.footer__brand-wrap {
  position: relative;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-block: clamp(24px, 4vw, 56px) clamp(4px, 1vw, 16px);
  pointer-events: none;
}
.footer__brand-text {
  font-family: var(--font-display);
  font-size: clamp(40px, 12vw, 280px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: #EAB308;
  display: block;
  text-align: center;
  user-select: none;
  overflow: hidden;
  word-break: break-word;
  text-shadow:
    0 0 10px rgba(234, 179, 8, 0.45),
    0 0 28px rgba(234, 179, 8, 0.35),
    0 0 64px rgba(234, 179, 8, 0.22),
    0 0 130px rgba(234, 179, 8, 0.15);
}
.footer__brand-dot {
  color: #FACC15;
}

@media (prefers-reduced-motion: no-preference) {
  .footer__brand-text {
    animation: footer-brand-pulse 8s ease-in-out infinite;
  }
}
@keyframes footer-brand-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.88; }
}

/* ─── Bottom bar (logo discret + copyright + legal) ─── */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: clamp(20px, 2.5vw, 28px);
}
.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vw, 20px);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    flex-wrap: wrap;
  }
}

.footer__mini-logo {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.footer__mini-logo:hover { opacity: 1; }
.footer__mini-logo img {
  display: block;
  height: 22px;
  width: auto;
}
.footer__mini-logo-fallback {
  display: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.footer__copyright a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}
.footer__copyright a:hover { color: #EAB308; }

.footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}
.footer__legal a {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer__legal a:hover { color: #EAB308; }


/* ============================================================
   28. SCROLL-TO-TOP BUTTON
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-hover-gold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), background var(--transition-base);
  border: none;
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.4);
}

.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--color-accent-dark-gold);
}


/* ============================================================
   29. PORTFOLIO TEMPLATE LAYOUTS (project.php)
   ============================================================ */

/* Shared project page styles */
.project-hero {
  padding-top: 120px;
  padding-bottom: 0;
  background: var(--color-bg-hero);
  color: var(--color-text-white);
}

.project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.project-meta__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-hover-gold);
}

.project-meta__sep {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.25);
}

.project-meta__year,
.project-meta__client {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.project-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  max-width: 900px;
}

/* --- Template 1: Hero Fullscreen + Gallery Grid --- */
.template-1 .t-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  margin-top: 48px;
}

.template-1 .t-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-block: clamp(40px, 5vw, 80px);
}

.template-1 .t-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.template-1 .t-gallery img:first-child {
  grid-column: span 2;
  aspect-ratio: 16 / 7;
}

/* --- Template 2: Split Screen + Timeline --- */
.template-2 .t-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: clamp(40px, 5vw, 80px);
}

.template-2 .t-split__image {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  width: 100%;
}

.template-2 .t-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.template-2 .t-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--color-border-light);
}

.template-2 .t-phase {
  display: flex;
  gap: 20px;
  padding-bottom: 32px;
  position: relative;
  z-index: 1;
}

.template-2 .t-phase__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-text-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.template-2 .t-phase__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-hover-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.template-2 .t-phase__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.template-2 .t-phase__text {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 1.65;
}

@media (min-width: 1024px) {
  .template-2 .t-split { grid-template-columns: 40% 60%; }
}

/* --- Template 3: Case Study (Challenge / Solution / Results) --- */
.template-3 .t-csr {
  padding-block: clamp(40px, 5vw, 80px);
}

.template-3 .t-csr__section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block: 48px;
  border-bottom: 1px solid var(--color-border-light);
}

.template-3 .t-csr__section:last-child { border-bottom: none; }

.template-3 .t-csr__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.template-3 .t-csr__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.template-3 .t-csr__text {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--color-text-body);
  line-height: 1.75;
}

.template-3 .t-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.template-3 .t-result {
  text-align: center;
  padding: 28px;
  background: var(--color-bg-gray);
  border-radius: var(--border-radius);
}

.template-3 .t-result__num {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.template-3 .t-result__label {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

@media (min-width: 768px) {
  .template-3 .t-csr__section { grid-template-columns: 240px 1fr; }
  .template-3 .t-results { grid-template-columns: repeat(4, 1fr); }
}

/* --- Template 4: Before / After --- */
.template-4 .t-ba {
  padding-block: clamp(40px, 5vw, 80px);
}

.template-4 .t-ba__compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.template-4 .t-ba__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
}

.template-4 .t-ba__panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.template-4 .t-ba__label {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 12px;
  border-radius: 999px;
}

.template-4 .t-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.template-4 .t-spec {
  padding: 20px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius);
}

.template-4 .t-spec__key {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.template-4 .t-spec__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

@media (min-width: 768px) {
  .template-4 .t-ba__compare { grid-template-columns: repeat(2, 1fr); }
  .template-4 .t-specs { grid-template-columns: repeat(4, 1fr); }
}

/* --- Template 5: Video First --- */
.template-5 .t-video {
  aspect-ratio: 16 / 9;
  background: var(--color-bg-hero);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-top: 48px;
  position: relative;
}

.template-5 .t-video video,
.template-5 .t-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-5 .t-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: clamp(40px, 5vw, 80px);
}

.template-5 .t-breakdown__item {
  padding: 28px;
  background: var(--color-bg-gray);
  border-radius: var(--border-radius);
}

.template-5 .t-breakdown__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.template-5 .t-breakdown__text {
  font-size: 15px;
  color: var(--color-text-body);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .template-5 .t-breakdown { grid-template-columns: repeat(3, 1fr); }
}

/* --- Template 6: Minimal Gallery (Masonry) --- */
.template-6 .t-masonry {
  columns: 1;
  gap: 16px;
  padding-block: clamp(40px, 5vw, 80px);
}

.template-6 .t-masonry img {
  width: 100%;
  margin-bottom: 16px;
  border-radius: var(--border-radius);
  display: block;
  break-inside: avoid;
  position: relative;
}

.template-6 .t-masonry-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.template-6 .t-masonry-item img {
  width: 100%;
  display: block;
  margin-bottom: 0;
  border-radius: 0;
  transition: transform 0.5s ease;
}

.template-6 .t-masonry-item:hover img {
  transform: scale(1.04);
}

.template-6 .t-masonry-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent);
  padding: 24px 20px 16px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.template-6 .t-masonry-item:hover .t-masonry-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) { .template-6 .t-masonry { columns: 2; } }
@media (min-width: 1200px) { .template-6 .t-masonry { columns: 3; } }

/* --- Template 7: Editorial / Magazine --- */
.template-7 .t-editorial {
  max-width: 840px;
  margin-inline: auto;
  padding-block: clamp(40px, 5vw, 80px);
}

.template-7 .t-editorial p {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.8;
  color: var(--color-text-body);
  margin-bottom: 28px;
}

.template-7 .t-editorial h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 48px 0 20px;
}

.template-7 .t-editorial-full {
  margin-inline: calc(var(--gutter) * -1);
  margin-block: 48px;
}

.template-7 .t-editorial-full img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.template-7 .t-editorial-caption {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 10px;
  font-style: italic;
}

.template-7 .t-editorial-pull {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-hover-gold);
  padding-left: 28px;
  margin-block: 40px;
}


/* ============================================================
   30. ABOUT PAGE
   ============================================================ */
.about-hero {
  padding-top: 140px;
  padding-bottom: clamp(64px, 8vw, 120px);
  background: var(--color-bg-hero);
  color: var(--color-text-white);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: 48px;
}

.team-card {
  background: var(--color-bg-gray);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.team-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(20%);
  transition: filter var(--transition-base);
  display: block;
}

.team-card:hover .team-card__photo { filter: grayscale(0); }

.team-card__info {
  padding: 20px 22px;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.team-card__role {
  font-size: 13px;
  color: var(--color-accent-teal);
  font-weight: 600;
}

.team-card__bio {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.6;
  margin-top: 10px;
}

@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   31. CONTACT PAGE
   ============================================================ */
.contact-page {
  padding-top: 140px;
  padding-bottom: var(--section-padding);
  background: var(--color-bg-light);
}

.contact-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.contact-map {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border-light);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (min-width: 1024px) {
  .contact-page__layout { grid-template-columns: 1fr 1fr; }
  .contact-map { aspect-ratio: auto; min-height: 500px; }
}


/* ============================================================
   32. SERVICES PAGE
   ============================================================ */
.services-page__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: var(--section-padding);
  border-bottom: 1px solid var(--color-border-light);
}

.services-page__item:last-child { border-bottom: none; }

.services-page__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  width: 100%;
}

.services-page__num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.services-page__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--color-text-primary);
}

.services-page__text {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--color-text-body);
  line-height: 1.75;
  margin-bottom: 28px;
}

.services-page__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.services-page__tag {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-body);
  background: var(--color-bg-gray);
  transition: all var(--transition-base);
}

.services-page__tag:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
  background: transparent;
}

@media (min-width: 1024px) {
  .services-page__item { grid-template-columns: 1fr 1fr; }
  .services-page__item:nth-child(even) .services-page__image {
    order: 2;
  }
  .services-page__item:nth-child(even) .services-page__body {
    order: 1;
  }
}


/* ============================================================
   33. PAIN POINTS / WHY US SECTION
   ============================================================ */
.pain-points {
  background: transparent;
  padding-block: var(--section-padding);
}

.pain-points__header {
  display: block;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.pain-points__header-left .section-label { margin-bottom: 16px; }

.pain-points__header-left .section-title {
  font-size: clamp(36px, 5vw, 68px);
  max-width: 100%;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.pain-points__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 480px;
  margin-left: auto;
  padding-left: 0;
}

.pain-points__header-right p {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--color-text-body);
  line-height: 1.65;
  margin: 0;
}

.pain-points__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .pain-points__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .pain-points__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .pain-points__grid { grid-template-columns: 1fr; }
}

.pain-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  background: #FFFFFF;
  border: none;
  border-right: 1px solid #E5E7EB;
  border-radius: 0;
  padding: 28px 30px;
  transition: border-color var(--transition-base), transform var(--transition-base);
  cursor: default;
}

.pain-card:hover {
  border-color: #EAB308;
  transform: translateY(-2px);
}

.pain-card:hover .pain-card__title {
  color: #EAB308;
  transition: color 0.3s ease;
}

.pain-card:last-child {
  border-right: none;
}

.pain-card__icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.pain-card__number {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--color-text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}

.pain-card__title {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  line-height: 1.2;
}

.pain-card__text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.pain-points__bridge {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.02em;
  margin-top: clamp(48px, 6vw, 96px);
  line-height: 1.15;
  color: var(--color-text-primary);
}

.pain-points__bridge em {
  font-style: normal;
  color: var(--color-hover-gold);
}


/* ============================================================
   34. INSIGHTS / BLOG SECTION
   ============================================================ */
.insights {
  background: var(--color-bg-gray);
  padding-block: var(--section-padding);
}

.insights__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 48px;
}

.insight-card {
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  transition: box-shadow var(--transition-base);
}

.insight-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.insight-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.insight-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.insight-card:hover .insight-card__image img {
  transform: scale(1.04);
}

.insight-card__body {
  padding: 28px 24px;
}

.insight-card__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: 10px;
}

.insight-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.insight-card__excerpt {
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.65;
  margin-bottom: 20px;
}

.insight-card__date {
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .insights__grid { grid-template-columns: repeat(2, 1fr); }
  .insight-card { grid-template-columns: 40% 60%; }
  .insight-card__image { aspect-ratio: auto; }
}

@media (min-width: 1024px) {
  .insights__grid { grid-template-columns: repeat(3, 1fr); }
  .insight-card { grid-template-columns: 1fr; }
  .insight-card__image { aspect-ratio: 16 / 10; }
}


/* ============================================================
   35. JS UTILITY CLASSES
   ============================================================ */

/* Elements that GSAP will animate — hidden by default */
.animate-up,
.animate-left,
.animate-right,
.animate-fade {
  visibility: hidden;
}

/* blur-reveal: GSAP controls opacity/filter */
.blur-reveal-init {
  opacity: 0;
  filter: blur(20px);
}

/* Generic toggle */
.is-active    { /* class toggled by JS */ }
.is-visible   { opacity: 1 !important; pointer-events: auto !important; }
.is-hidden    { display: none !important; }

/* Counter values — no special initial state, GSAP handles */
.counter-value {
  display: inline;
}


/* ============================================================
   36. ADMIN PANEL NOTICE
   ============================================================ */
/* Admin CSS is intentionally excluded from this file.
   Admin panel styles live in admin/assets/admin.css         */


/* ============================================================
   37. PRINT STYLES
   ============================================================ */
@media print {
  .header,
  .footer,
  .custom-cursor,
  .scroll-top,
  .off-canvas,
  .off-canvas-overlay,
  .lightbox,
  .hero__bar {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #555;
  }

  .hero {
    min-height: auto;
    padding-top: 24pt;
    background: #fff;
    color: #000;
  }

  .hero__headline {
    font-size: 36pt;
    color: #000;
  }

  img { max-width: 100%; }

  .section-title,
  .blur-reveal {
    font-size: 24pt;
  }

  @page {
    margin: 2cm;
  }
}


/* ============================================================
   38. RESPONSIVE — MOBILE OVERRIDES
   ============================================================ */
@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-6 {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .counters-dark__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-featured__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-featured__stat:last-child {
    grid-column: span 2;
    border-right: none;
  }

  .partners__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .awards__grid {
    grid-template-columns: 1fr;
  }

  .template-3 .t-results {
    grid-template-columns: repeat(2, 1fr);
  }

  .scroll-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   39. 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;
  }

  .animate-up,
  .animate-left,
  .animate-right,
  .animate-fade {
    visibility: visible;
  }

  .blur-reveal-init {
    opacity: 1;
    filter: none;
  }
}

/* ============================================================
   40. PATCH — fixes discrepante header.php / index.php vs CSS
   ============================================================ */

/* 1. header__inner wrapper — CSS original pune flex pe .header,
      dar header.php are un div.header__inner in plus.
      Resetam flexul pe .header si il mutam pe .header__inner */
.header {
  display: block;
  padding: 0;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  transition: padding var(--transition-slow);
  width: 100%;
}

.header--solid .header__inner {
  padding-block: 14px;
}

/* 2. Logo swap white/dark in functie de starea headerului */
.header__logo-img--white { display: block; }
.header__logo-img--dark  { display: none;  }

.header--solid .header__logo-img--white { display: none;  }
.header--solid .header__logo-img--dark  { display: block; }

.header__logo-fallback {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: currentColor;
}

/* 3. Hero overlay — index.php foloseste .hero__bg-overlay,
      CSS-ul original are .hero__overlay */
.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.25) 0%,
    rgba(10, 10, 10, 0.05) 40%,
    rgba(10, 10, 10, 0.65) 100%
  );
  z-index: 2;
}

/* 4. Off-canvas — footer.php JS foloseste is-open/is-visible,
      CSS-ul original foloseste is-active */
.off-canvas.is-open         { transform: translateX(0); }
.off-canvas-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 5. Hero section min-height fix */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--color-bg-hero);
  color: var(--color-text-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Logo text fallback — vizibil mereu dacă SVG lipsește,
   culoare via currentColor (alb pe transparent, dark pe solid) */
.header__logo-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: currentColor;
  line-height: 1;
  white-space: nowrap;
}

/* Când SVG există, ascunde textul */
.header__logo-picture + .header__logo-text {
  display: none;
}

/* Dacă SVG poza e broken (picture ascuns), textul e vizibil automat */
.header__logo-picture[style*="display:none"] + .header__logo-text {
  display: block;
}

/* Forțează text vizibil dacă nu există deloc SVG-uri uploadate */
.header__logo-img[src=""] ~ .header__logo-text,
.header__logo-img:not([src]) ~ .header__logo-text {
  display: block;
}

/* Logo text — mereu vizibil, culoare via currentColor */
.header__logo-text {
  display: block !important;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: currentColor;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--transition-slow);
}

/* SVG images — pozitionate absolut, suprapuse pe text când există */
.header__logo { position: relative; display: flex; align-items: center; }
.header__logo-img--white,
.header__logo-img--dark {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 36px; width: auto;
}

/* ── PATCH 3 ── nav orizontal + logo unic + no hero overlay ── */

/* Nav list orizontal (lipsea display:flex pe ul) */
.header__nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Logo: ascunde textul implicit, SVG primar */
.header__logo-text { display: none !important; }
.header__logo-text.show { display: block !important; }

/* Logo images — static, nu absolute */
.header__logo-img--white,
.header__logo-img--dark {
  position: static;
  transform: none;
  height: 36px;
  width: auto;
  display: block;
}
.header__logo-img--dark { display: none; }
.header--solid .header__logo-img--white { display: none; }
.header--solid .header__logo-img--dark  { display: block; }

/* Elimină overlay hero */
.hero__bg-overlay,
.hero__overlay { display: none !important; }

/* ── HEADER LAYOUT FIX ──
   flex:1 pe nav îl face să ocupe spațiul din mijloc, justify-content:center
   centrează link-urile. margin-left:0 anulează orice override anterior. */
@media (min-width: 1024px) {
  .header__nav {
    margin-left: 0;
  }
}

/* CTA ascuns pe hero (transparent) — apare la scroll când header devine solid */
.header--transparent .header__cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.header--solid .header__cta {
  opacity: 1;
  pointer-events: auto;
}

/* Imagine hero mai luminoasă fără overlay */
.hero__bg img {
  filter: saturate(0.55) brightness(0.80);
}

/* ═══════════════════════════════════════════════════════════════════
   PROMPT 5 PATCH — Pagini interioare + 7 template-uri portfolio
   Append to: assets/css/style.css
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────
   PAGE HERO (shared across interior pages)
────────────────────────────────────── */
.page-hero { padding-block: var(--section-padding); background: var(--color-bg-light); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 100px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin-block: 1.5rem 0;
}
.page-hero--about .page-hero__title { max-width: 900px; }
.page-hero__lead {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-text-muted);
  max-width: 640px;
  margin-top: 1.5rem;
  line-height: 1.7;
}
.page-hero__image-wrap {
  margin-top: 4rem;
  border-radius: 16px;
  overflow: hidden;
  max-height: 60vh;
}
.page-hero__image-wrap img {
  width: 100%;
  height: 60vh;
  object-fit: cover;
  display: block;
}

/* ──────────────────────────────────────
   ABOUT — MANIFEST
────────────────────────────────────── */
.about-manifest { background: var(--color-bg-light); }
.about-manifest__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 4rem;
  align-items: start;
}
.about-manifest__body p {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.8;
  color: var(--color-text-primary);
  margin-bottom: 1.25rem;
}
.about-manifest__body .text-large {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--color-text-primary);
}
.about-manifest__body strong { color: var(--color-text-primary); }
.about-manifest__body em { font-style: italic; }
@media (max-width: 767px) {
  .about-manifest__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ──────────────────────────────────────
   STATS LIGHT
────────────────────────────────────── */
.stats-light { background: var(--color-bg-gray); }
.stats-light__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #e5e7eb;
}
.stat-card {
  background: var(--color-bg-gray);
  padding: 3rem 2.5rem;
  animation-delay: var(--delay, 0s);
}
.stat-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.stat-card__number {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-primary);
}
.stat-card__suffix { font-size: 0.6em; color: var(--color-text-primary); }
.stat-card__index { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.1em; }
.stat-card__title { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }
.stat-card__desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 767px) {
  .stats-light__grid { grid-template-columns: 1fr; gap: 1px; }
}

/* ──────────────────────────────────────
   FOUNDERS
────────────────────────────────────── */
.founders { background: var(--color-bg-gray); }
.founders__header { margin-bottom: 4rem; }
.founders__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
.founder-card { animation-delay: var(--delay, 0s); }
.founder-card__photo-wrap {
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  background: #e5e7eb;
  position: relative;
  margin-bottom: 1.5rem;
}
.founder-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-card__photo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px; font-weight: 900; color: rgba(0,0,0,0.1);
}
.founder-card.no-photo .founder-card__photo { display: none; }
.founder-card__name { font-size: 22px; font-weight: 700; margin-bottom: 0.25rem; }
.founder-card__role { font-size: 14px; color: var(--color-text-muted); margin-bottom: 1rem; }
.founder-card__bio { font-size: 16px; line-height: 1.7; color: var(--color-text-primary); }
.team-extended {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.team-extended__label { font-size: 13px; color: var(--color-text-muted); letter-spacing: 0.1em; }
.team-extended__avatars { display: flex; gap: -8px; }
.team-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #d1d5db; border: 2px solid #fff;
  margin-left: -8px;
}
.team-avatar:first-child { margin-left: 0; }
.team-avatar--more {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
  background: #f3f4f6;
}
.team-extended__note { font-size: 14px; color: var(--color-text-muted); flex: 1; }
@media (max-width: 767px) {
  .founders__grid { grid-template-columns: 1fr; }
  .team-extended { flex-direction: column; align-items: flex-start; }
}

/* ──────────────────────────────────────
   PHILOSOPHY
────────────────────────────────────── */
.philosophy { background: var(--color-bg-light); }
.philosophy__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  margin-block: 1rem 2rem;
}
.philosophy__body p { font-size: 17px; line-height: 1.8; margin-bottom: 1.25rem; }
.philosophy__quote {
  border-left: 4px solid var(--color-hover-gold);
  padding-left: 2rem;
  margin-block: 2.5rem;
}
.philosophy__quote p {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-primary);
}
.philosophy__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 14px;
  color: var(--color-text-muted);
  font-style: normal;
}

/* ──────────────────────────────────────
   TIMELINE SECTION (about page)
────────────────────────────────────── */
.timeline-section { background: var(--color-bg-dark); }
.timeline-section__header { margin-bottom: 4rem; }
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  background: rgba(255,255,255,0.05);
  list-style: none;
  padding: 0;
  margin: 0;
}
.timeline__item {
  padding: 2rem;
  background: var(--color-bg-dark);
  animation-delay: var(--delay, 0s);
  transition: background 0.3s ease;
}
.timeline__item:hover { background: #252525; }
.timeline__year {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-hover-gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.75rem;
}
.timeline__text { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; }

/* ──────────────────────────────────────
   PROCESS DETAIL (cum-lucram)
────────────────────────────────────── */
/* Process section — spațiu mai mare deasupra (consistent cu celelalte secțiuni) */
.process-section {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
}
.process-section .section-label { margin-bottom: clamp(20px, 2.5vw, 32px); }

/* Stats band — Pixora-style halftone bg + scroll-linked counters */
.stats-band {
  --mx: -200px;
  --my: -200px;
  --spot-opacity: 0;
  position: relative;
  margin: clamp(48px, 6vw, 80px) calc(-1 * clamp(20px, 3vw, 40px));
  padding: clamp(56px, 7vw, 88px) clamp(24px, 4vw, 56px);
  overflow: hidden;
  border-radius: 16px;
}

/* Sparse pattern — vizibil mereu, peste tot (grid 18px, dots subțiri) */
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26, 26, 26, 0.3) 1px, transparent 1.4px);
  background-size: 18px 18px;
  pointer-events: none;
}

/* Layer cu dots GROȘI pe ACELAȘI grid (18px) — masked la cursor (spotlight).
   Punctele se suprapun perfect peste cele din ::before → vizual îngroșare,
   nu dublare/decalaj. Falloff radial smooth pe rază 140px. */
.stats-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26, 26, 26, 0.7) 2.2px, transparent 2.7px);
  background-size: 18px 18px;
  background-position: 0 0; /* aliniere identică cu ::before */
  pointer-events: none;
  opacity: var(--spot-opacity);
  transition: opacity 0.4s ease;
  -webkit-mask-image: radial-gradient(
    circle 140px at var(--mx) var(--my),
    #000 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
          mask-image: radial-gradient(
    circle 140px at var(--mx) var(--my),
    #000 0%,
    rgba(0, 0, 0, 0.85) 25%,
    rgba(0, 0, 0, 0.3) 70%,
    transparent 100%
  );
}

.stats-band__items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
}
@media (min-width: 768px) {
  .stats-band__items { grid-template-columns: repeat(4, 1fr); }
}

.stats-band__item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.stats-band__value {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #1A1A1A;
  display: inline-block;
  font-variant-numeric: tabular-nums; /* cifrele nu se „mișcă" la incrementare */
}
.stats-band__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  line-height: 1.4;
}

/* Process steps — pe homepage (Pixora cards light theme, scopat sub .process-section
   ca să nu calce pe layout-ul vechi din cum-lucram.php) */
.process-section .process-steps {
  list-style: none;
  padding: 0;
  margin: clamp(48px, 6vw, 80px) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px)  { .process-section .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-section .process-steps { grid-template-columns: repeat(4, 1fr); } }

.process-section .process-step {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  animation-delay: var(--delay, 0s);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.45s ease;
}
.process-section .process-step:hover {
  transform: translateY(-4px);
  border-color: #1A1A1A;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.12);
}

.process-section .process-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(56px, 7vw, 96px); /* breathing room Pixora */
}
.process-section .process-step__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #EAB308;
}
.process-section .process-step__icon {
  display: inline-flex;
  color: #1A1A1A;
  transition: color 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-section .process-step__icon svg {
  width: clamp(28px, 2.5vw, 36px);
  height: clamp(28px, 2.5vw, 36px);
}
.process-section .process-step:hover .process-step__icon {
  color: #EAB308;
  transform: scale(1.1);
}

.process-section .process-step__duration {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin: 0 0 10px;
}
.process-section .process-step__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0 0 12px;
}
.process-section .process-step__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.process-section .process-step__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.7);
  transition: color 0.3s ease;
}
.process-section .process-step:hover .process-step__cta { color: #EAB308; }
.process-section .process-step__cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-section .process-step:hover .process-step__cta-arrow {
  transform: rotate(-45deg);
}

.process-section__cta {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
}

/* ──────────────────────────────────────
   INDUSTRIES — Pixora dark cards cu poze background
────────────────────────────────────── */
.industries-section {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
  border-radius: 24px;
  overflow: hidden;
}
.industries-section .section-label { margin-bottom: clamp(28px, 3.5vw, 48px); }

.industries-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  margin-bottom: clamp(64px, 8vw, 100px);
}
@media (min-width: 1024px) {
  .industries-section__head {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(48px, 6vw, 96px);
  }
}
.industries-section__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 100px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin: 0;
}
.industries-section__title-line { display: block; }
.industries-section__intro {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 460px;
}
@media (min-width: 1024px) {
  .industries-section__intro { padding-bottom: clamp(8px, 1vw, 16px); }
}

.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px)  { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }

.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  min-height: clamp(280px, 28vw, 380px);
  padding: clamp(24px, 2.5vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
  background: #1A1A1A;
  cursor: pointer;
  animation-delay: var(--delay, 0s);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}
.industry-card:hover {
  transform: translateY(-4px);
  border-color: rgba(234, 179, 8, 0.5);
  box-shadow: 0 18px 40px -12px rgba(234, 179, 8, 0.18);
}
.industry-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.industry-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.4) brightness(0.7);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
}
.industry-card:hover .industry-card__img {
  transform: scale(1.06);
  filter: grayscale(0) brightness(0.85);
}
.industry-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.85) 100%);
  transition: background 0.4s ease;
}
.industry-card:hover .industry-card__overlay {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.1) 0%, rgba(10, 10, 10, 0.75) 100%);
}
.industry-card__media.no-img {
  background: linear-gradient(135deg, #1F1F1F 0%, #0A0A0A 100%);
}
.industry-card__content {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  text-align: left;
}
.industry-card__icon {
  display: inline-flex;
  font-size: 28px;
  margin-bottom: 16px;
  color: #EAB308;
  transition: transform 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
  text-align: left;
}
.industry-card:hover .industry-card__icon {
  transform: scale(1.15) rotate(-6deg);
}
.industry-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #FFFFFF;
  text-align: left;
}
.industry-card__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
  text-align: left;
}
.industry-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}
.industry-card:hover .industry-card__cta { color: #EAB308; }
.industry-card__cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.industry-card:hover .industry-card__cta-arrow {
  transform: translateX(4px);
}

/* ──────────────────────────────────────
   FOUNDERS — Pixora composition, light, big photo + bio + stats
────────────────────────────────────── */
.founders-section {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
}
.founders-section .section-label { margin-bottom: clamp(28px, 3.5vw, 48px); }

.founders-section__head {
  margin-bottom: clamp(48px, 6vw, 80px);
}
.founders-section__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 100px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #1A1A1A;
  margin: 0;
  max-width: 14ch;
}
.founders-section__title-line { display: block; }

.founders-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 1024px) {
  .founders-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 88px);
  }
}

.founder-card {
  display: flex;
  flex-direction: column;
}
.founder-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: clamp(20px, 2.5vw, 28px);
}
.founder-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.founder-card__img-wrap:hover .founder-card__img {
  transform: scale(1.04);
}
.founder-card__img-wrap.no-img::before {
  content: 'Foto';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 60px;
  color: rgba(0, 0, 0, 0.08);
}

.founder-card__badge {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: clamp(85px, 9vw, 110px);
  height: clamp(85px, 9vw, 110px);
  border-radius: 50%;
  background: #EAB308;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #1A1A1A;
  transform: rotate(-6deg);
  transition: transform 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.founder-card__img-wrap:hover .founder-card__badge {
  transform: rotate(0deg) scale(1.08);
}
.founder-card__badge-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  line-height: 1;
}
.founder-card__badge-text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
  max-width: 80%;
  line-height: 1.2;
}

.founder-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.founder-card__role {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin: 0;
}
.founder-card__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  margin: 0;
}
.founder-card__bio {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.65);
  margin: 8px 0 0;
}
.founder-card__highlight {
  color: #1A1A1A;
  font-weight: 500;
}

.founders-section__story {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}
.founders-section__story-lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #1A1A1A;
  margin: 0;
}
.founders-section__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  padding-block: clamp(20px, 2.5vw, 28px);
  border-block: 1px solid #E5E7EB;
}
.founders-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.founders-stat__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #EAB308;
}
.founders-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
}
.founders-section__story-text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(26, 26, 26, 0.65);
  margin: 0;
}
.founders-section__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 26, 26, 0.35);
  padding-bottom: 4px;
  align-self: flex-start;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.founders-section__link:hover {
  color: #EAB308;
  border-bottom-color: #EAB308;
}
.founders-section__link-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.founders-section__link:hover .founders-section__link-arrow {
  transform: translate(3px, -3px);
}

/* ══════════════════════════════════════════════════════════
   FOUNDERS DUO — Ionuț & Luisa side-by-side / mobile tabs
══════════════════════════════════════════════════════════ */

/* ─── Tab indicators (mobile only) ─── */
.founders-tabs {
  display: none;
  position: relative;
  gap: 8px;
  margin-bottom: clamp(24px, 4vw, 36px);
  padding: 6px;
  background: rgba(26, 26, 26, 0.04);
  border-radius: 999px;
  width: fit-content;
}

.founders-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(26, 26, 26, 0.55);
  transition: color 0.4s ease;
  border-radius: 999px;
}

.founders-tab.is-active {
  color: #FFFFFF;
}

.founders-tab__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.founders-tab.is-active .founders-tab__dot {
  background: #EAB308;
  opacity: 1;
}

.founders-tab__label {
  position: relative;
  z-index: 2;
}

.founders-tabs__indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  bottom: 6px;
  width: calc(50% - 6px);
  background: #1A1A1A;
  border-radius: 999px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

/* ─── Duo layout (desktop side-by-side) ─── */
.founders-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(48px, 6vw, 80px);
  position: relative;
}

@media (min-width: 768px) {
  .founders-duo {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
  }
}

/* ─── Founder Card (new duo version) ─── */
.founders-duo .founder-card {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background: #1A1A1A;
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.founders-duo .founder-card.is-active {
  opacity: 1;
  transform: translateX(0);
}

.founders-duo .founder-card[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .founders-duo .founder-card[hidden] {
    display: block;
  }
  .founders-duo .founder-card {
    opacity: 1;
    transform: none;
  }
}

/* ─── Media (photo) with ripple container ─── */
.founders-duo .founder-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #1A1A1A;
  background-size: cover;
  background-position: center top;
  cursor: pointer;
  isolation: isolate;
}

.founders-duo .founder-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: unset;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease,
              opacity 0.5s ease;
  z-index: 1;
}

.founders-duo .founder-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.75) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* ─── Nameplate (always visible, bottom of photo) ─── */
.founders-duo .founder-card__nameplate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: clamp(20px, 3vw, 36px);
  color: #FFFFFF;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.founders-duo .founder-card__nameplate .founder-card__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.founders-duo .founder-card__nameplate .founder-card__role {
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ─── Bio overlay (hover desktop, always on mobile) ─── */
.founders-duo .founder-card__bio-overlay {
  position: absolute;
  inset: 0;
  top: 0;
  z-index: 5;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.85) 35%,
    rgba(0, 0, 0, 0) 65%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 3vw, 40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.founders-duo .founder-card__bio-content {
  width: 100%;
  position: relative;
  z-index: 2;
  padding: clamp(16px, 3vw, 32px);
  margin-top: auto;
  transform: translateY(12px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover state — desktop only */
@media (hover: hover) and (min-width: 768px) {
  .founders-duo .founder-card:hover .founder-card__img {
    transform: scale(1.05);
    filter: blur(2px) brightness(0.7);
  }
  .founders-duo .founder-card:hover .founder-card__media-overlay {
    opacity: 0.4;
  }
  .founders-duo .founder-card:hover .founder-card__nameplate {
    opacity: 0;
    transform: translateY(20px);
  }
  .founders-duo .founder-card:hover .founder-card__bio-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .founders-duo .founder-card:hover .founder-card__bio-content {
    transform: translateY(0);
  }
}

/* ─── Bio content typography ─── */
.founders-duo .founder-card__role-small {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EAB308;
  margin: 0 0 12px;
}

.founders-duo .founder-card__bio-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 14px;
}

.founders-duo .founder-card__bio-text {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 20px;
}

/* ─── LinkedIn pill button (outline) ─── */
.founders-duo .founder-card__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              transform 0.3s ease;
}

.founders-duo .founder-card__linkedin:hover {
  background: #EAB308;
  border-color: #EAB308;
  color: #1A1A1A;
  transform: translateY(-1px);
}

.founders-duo .founder-card__linkedin svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.founders-duo .founder-card__linkedin:hover svg {
  transform: scale(1.1);
}

/* ─── Mobile: tabs visible + bio always on ─── */
@media (max-width: 767px) {
  .founders-tabs {
    display: inline-flex;
  }

  .founders-duo .founder-card__bio-overlay {
    position: relative;
    inset: auto;
    background: #1A1A1A;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    pointer-events: auto;
    padding: clamp(20px, 5vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .founders-duo .founder-card__bio-content {
    transform: none;
  }

  .founders-duo .founder-card__media {
    aspect-ratio: 3 / 4;
  }

  /* Nameplate JOS, nu sus — text peste imagine */
  .founders-duo .founder-card__nameplate {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(20px, 5vw, 32px);
  }

  /* Acelaşi gradient unificat pe mobile — dens jos, transparent sus */
  .founders-duo .founder-card__media-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.75) 40%,
      rgba(0, 0, 0, 0) 70%
    );
  }
}

/* ─── Ripple container (WebGL displacement, used by ripple.js) ─── */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-container canvas.ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  display: block;
}

/* Img ascuns după ce WebGL preia (rămâne în DOM pentru SEO/a11y) */
.ripple-container.ripple-active > img {
  opacity: 0;
}


/* ──────────────────────────────────────
   INSIGHTS — Pixora asymmetric grid (featured + 3 small)
────────────────────────────────────── */
.insights-section {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
}
.insights-section .section-label { margin-bottom: clamp(28px, 3.5vw, 48px); }

.insights-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
@media (min-width: 768px) {
  .insights-section__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 4vw, 64px);
  }
}
.insights-section__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 84px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #1A1A1A;
  margin: 0;
}
.insights-section__title-line { display: block; }
.insights-section__all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 26, 26, 0.35);
  padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.insights-section__all-link:hover {
  color: #EAB308;
  border-bottom-color: #EAB308;
}
.insights-section__all-link-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.insights-section__all-link:hover .insights-section__all-link-arrow {
  transform: translate(3px, -3px);
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 1024px) {
  .insights-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 18px;
  }
}

.insight-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  animation-delay: var(--delay, 0s);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.45s ease;
}
.insight-card:hover {
  transform: translateY(-4px);
  border-color: #1A1A1A;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.12);
}

.insight-card--featured .insight-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
}
.insight-card--featured .insight-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-card--featured:hover .insight-card__img {
  transform: scale(1.05);
}
.insight-card--featured .insight-card__img-wrap.no-img::before {
  content: 'Insight';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  color: rgba(0, 0, 0, 0.06);
}
.insight-card--featured .insight-card__body {
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.insight-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin-bottom: 16px;
}
.insight-card__category {
  color: #EAB308;
}
.insight-card__sep {
  opacity: 0.5;
}
.insight-card--featured .insight-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1A1A1A;
  margin: 0 0 14px;
}
.insight-card__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.65);
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}
.insight-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(26, 26, 26, 0.7);
  transition: color 0.3s ease;
}
.insight-card--featured:hover .insight-card__cta { color: #EAB308; }
.insight-card__cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-card--featured:hover .insight-card__cta-arrow {
  transform: rotate(-45deg);
}

.insights-secondary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.insight-card--small {
  flex-direction: row;
  align-items: center;
  padding: clamp(18px, 2vw, 24px);
  gap: clamp(14px, 1.6vw, 22px);
}
.insight-card__small-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #EAB308;
  flex-shrink: 0;
  width: clamp(40px, 4vw, 56px);
}
.insight-card__small-body {
  flex: 1;
  min-width: 0;
}
.insight-card--small .insight-card__category {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.insight-card--small .insight-card__title {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1A1A1A;
  margin: 0;
}
.insight-card__small-arrow {
  flex-shrink: 0;
  font-size: 20px;
  color: rgba(26, 26, 26, 0.4);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.insight-card--small:hover .insight-card__small-arrow {
  color: #EAB308;
  transform: rotate(-45deg);
}

/* ──────────────────────────────────────
   FAQ — two-column Pixora (title left + accordion right) + sleek items
────────────────────────────────────── */
.faq-section {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
}
.faq-section .section-label { margin-bottom: clamp(28px, 3.5vw, 48px); }

.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

.faq-section__head {
  position: sticky;
  top: 100px;
}
@media (max-width: 1023px) {
  .faq-section__head { position: static; }
}
.faq-section__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #1A1A1A;
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}
.faq-section__title-line { display: block; }
.faq-section__intro {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.65);
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.faq-section__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 26, 26, 0.35);
  padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.faq-section__contact-link:hover {
  color: #EAB308;
  border-bottom-color: #EAB308;
}
.faq-section__contact-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-section__contact-link:hover .faq-section__contact-arrow {
  transform: translate(3px, -3px);
}

/* Sleek accordion items */
.faq-section .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #E5E7EB;
}
.faq-section .faq__item {
  border-bottom: 1px solid #E5E7EB;
  transition: background 0.3s ease;
}
.faq-section .faq__item:hover,
.faq-section .faq__item:has(.faq__trigger[aria-expanded="true"]) {
  background: rgba(234, 179, 8, 0.04);
}
.faq-section .faq__trigger {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px) clamp(14px, 1.8vw, 24px);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #1A1A1A;
  transition: color 0.3s ease;
}
.faq-section .faq__num {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #EAB308;
  flex-shrink: 0;
  min-width: 28px;
}
.faq-section .faq__question {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.faq-section .faq__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(26, 26, 26, 0.15);
  color: #1A1A1A;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-section .faq__trigger:hover .faq__icon {
  border-color: #EAB308;
  color: #EAB308;
}
.faq-section .faq__trigger[aria-expanded="true"] .faq__icon {
  background: #EAB308;
  border-color: #EAB308;
  color: #1A1A1A;
  transform: rotate(135deg);
}
.faq-section .faq__content {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-section .faq__answer {
  padding: 0 clamp(14px, 1.8vw, 24px) clamp(20px, 2.5vw, 28px) clamp(42px, 4.2vw, 60px);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(26, 26, 26, 0.7);
}
.faq-section .faq__answer p { margin: 0; }

/* ──────────────────────────────────────
   CTA FINAL — Pixora composition + corner-rounded dark gradient
────────────────────────────────────── */
.cta-final {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
  border-radius: 24px 24px 0 0;
  overflow: hidden;
}
.cta-final .section-label { margin-bottom: clamp(28px, 3.5vw, 48px); }

.cta-final__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
@media (min-width: 1024px) {
  .cta-final__head {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(48px, 6vw, 96px);
  }
}
.cta-final__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 110px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin: 0;
}
.cta-final__title-line { display: block; }
.cta-final__intro {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 460px;
}
@media (min-width: 1024px) {
  .cta-final__intro { padding-bottom: clamp(8px, 1vw, 16px); }
}

/* ──────────────────────────────────────
   CTA Final — Formular rapid (3 câmpuri) Pixora-style
────────────────────────────────────── */
.cta-final .cta-final__form-wrap {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  padding: clamp(28px, 3.5vw, 44px);
  color: #1A1A1A;
}
.cta-final__form-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #EAB308;
  background: rgba(234, 179, 8, 0.1);
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.cta-final__form-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #1A1A1A;
  margin: 0 0 10px;
}
.cta-final__form-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 clamp(24px, 3vw, 32px);
}

.quick-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.quick-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .quick-form__row { grid-template-columns: repeat(2, 1fr); }
}
.quick-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quick-form__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
}
.quick-form__label span {
  color: #EAB308;
  margin-left: 2px;
}
.quick-form__input {
  width: 100%;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #1A1A1A;
  background: #F7F7F5;
  border: 1.5px solid transparent;
  border-radius: 12px;
  outline: none;
  transition: background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
}
.quick-form__input::placeholder {
  color: rgba(26, 26, 26, 0.35);
}
.quick-form__input:hover {
  background: #F0F0EE;
}
.quick-form__input:focus {
  background: #FFFFFF;
  border-color: #EAB308;
  box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.15);
}
.quick-form__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}

.quick-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(26, 26, 26, 0.6);
  margin-top: 4px;
}
.quick-form__consent a {
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 26, 0.25);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.quick-form__consent a:hover {
  color: #EAB308;
  text-decoration-color: #EAB308;
}
.quick-form__checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #EAB308;
  cursor: pointer;
}

.quick-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 24px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  background: #EAB308;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
  box-shadow: 0 8px 20px -6px rgba(234, 179, 8, 0.45);
}
.quick-form__submit:hover {
  background: #1A1A1A;
  color: #EAB308;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.3);
}
.quick-form__submit:active {
  transform: translateY(0);
}
.quick-form__submit-arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.quick-form__submit:hover .quick-form__submit-arrow {
  transform: translateX(4px);
}

/* ──────────────────────────────────────
   CTA Final — Body grid (form + alternatives)
────────────────────────────────────── */
.cta-final__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: start;
}
@media (min-width: 1024px) {
  .cta-final__body {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 56px);
  }
}

/* ──────────────────────────────────────
   CTA Final — Alternatives column (Pixora dark cards)
────────────────────────────────────── */
.cta-final__alternatives {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 28px);
  color: #FFFFFF;
}
.cta-final__alt-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #EAB308;
  background: rgba(234, 179, 8, 0.12);
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0;
  align-self: flex-start;
}
.cta-final__alt-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: -8px 0 4px;
}

.cta-final__channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.4s ease;
}
.contact-channel:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(234, 179, 8, 0.5);
  box-shadow: 0 14px 32px -12px rgba(234, 179, 8, 0.25);
}
.contact-channel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.contact-channel:hover .contact-channel__icon {
  background: #EAB308;
  color: #1A1A1A;
  transform: scale(1.05);
}
.contact-channel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.contact-channel__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.contact-channel__value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  /* truncate dacă email-ul e prea lung pe mobile */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-channel__arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-channel:hover .contact-channel__arrow {
  color: #EAB308;
  transform: translate(3px, -3px);
}

/* Highlight variant — pentru Calendly (cardul cel mai important) */
.contact-channel--highlight {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.3);
}
.contact-channel--highlight .contact-channel__icon {
  background: #EAB308;
  color: #1A1A1A;
}
.contact-channel--highlight:hover {
  background: rgba(234, 179, 8, 0.12);
  border-color: #EAB308;
}

/* Reassurance — chip-uri cu checkmark */
.cta-final__reassurance {
  list-style: none;
  margin: clamp(12px, 1.5vw, 20px) 0 0;
  padding: clamp(20px, 2.5vw, 28px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-final__reassurance li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.cta-final__reassurance li strong {
  color: #FFFFFF;
  font-weight: 600;
}
.cta-final__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(234, 179, 8, 0.15);
  color: #EAB308;
  margin-top: 1px;
}

/* Stilurile vechi (pentru cum-lucram.php) rămân mai jos */
.process-steps { list-style: none; padding: 0; margin: 3rem 0 0; }
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid #e5e7eb;
  animation-delay: var(--delay, 0s);
}
.process-step__num {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 900;
  color: #e5e7eb;
  line-height: 1;
  align-self: start;
}
.process-step__meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.process-step__title { font-size: 22px; font-weight: 700; }
.process-step__duration {
  font-size: 13px;
  color: var(--color-text-muted);
  background: #f3f4f6;
  padding: 0.2em 0.7em;
  border-radius: 999px;
}
.process-step__desc { font-size: 16px; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 1rem; }
.process-step__output {
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 0.75rem 1rem;
  background: #f3f4f6;
  border-radius: 8px;
}
.process-step__output-label { font-weight: 700; margin-right: 0.5rem; }
@media (max-width: 767px) {
  .process-step { grid-template-columns: 1fr; }
  .process-step__num { font-size: 40px; }
}

/* ──────────────────────────────────────
   SMITHY DETAIL (cum-lucram)
────────────────────────────────────── */
.smithy-detail { background: var(--color-bg-dark); }
.smithy-detail__header { margin-bottom: 4rem; }
.smithy-detail__intro {
  font-size: clamp(16px, 2vw, 18px);
  color: rgba(255,255,255,0.65);
  max-width: 700px;
  line-height: 1.7;
  margin-top: 1.5rem;
}
.smithy-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.05);
  margin-bottom: 4rem;
}
.smithy-feature {
  padding: 2.5rem;
  background: var(--color-bg-dark);
  animation-delay: var(--delay, 0s);
  transition: background 0.3s ease;
}
.smithy-feature:hover { background: #252525; }
.smithy-feature__icon {
  color: var(--color-hover-gold);
  margin-bottom: 1rem;
}
.smithy-feature__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.smithy-feature__desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.smithy-mockup { max-width: 900px; margin: 0 auto; }
.smithy-mockup__browser {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.smithy-mockup__bar {
  background: #2a2a2a;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.smithy-mockup__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.smithy-mockup__url {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-left: auto;
}
.smithy-mockup__screen { background: #111; aspect-ratio: 16/9; }
.smithy-mockup__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  font-size: 14px;
}
@media (max-width: 767px) {
  .smithy-features-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────
   WORKFLOW (cum-lucram)
────────────────────────────────────── */
.workflow { background: var(--color-bg-light); }
.workflow__header { margin-bottom: 3rem; }
.workflow__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.workflow__item { animation-delay: var(--delay, 0s); }
.workflow__item-title { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }
.workflow__item p { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 767px) { .workflow__items { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────
   COLLAB MODELS (servicii)
────────────────────────────────────── */
.collab-models { background: var(--color-bg-light); }
.collab-models__header { margin-bottom: 3rem; }
.collab-models__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.collab-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2.5rem;
  background: var(--color-bg-gray);
  animation-delay: var(--delay, 0s);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.collab-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.collab-card--dark {
  background: var(--color-bg-dark);
  border-color: transparent;
  color: #fff;
}
.collab-card__header { margin-bottom: 1.5rem; }
.collab-card__num { font-size: 12px; letter-spacing: 0.15em; color: var(--color-text-muted); }
.collab-card--dark .collab-card__num { color: rgba(255,255,255,0.5); }
.collab-card__title { font-size: 22px; font-weight: 800; margin-block: 0.5rem; }
.collab-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-hover-gold);
}
.collab-card__best {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.collab-card--dark .collab-card__best { color: rgba(255,255,255,0.5); }
.collab-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.collab-card__list li { font-size: 15px; padding-left: 1.25rem; position: relative; line-height: 1.4; }
.collab-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-hover-gold);
  font-size: 12px;
}
.collab-card__footer { border-top: 1px solid rgba(0,0,0,0.08); padding-top: 1.25rem; }
.collab-card--dark .collab-card__footer { border-color: rgba(255,255,255,0.1); }
.collab-card__meta { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.collab-card--dark .collab-card__meta { color: rgba(255,255,255,0.5); }
.collab-card__meta strong { color: var(--color-text-primary); }
.collab-card--dark .collab-card__meta strong { color: #fff; }
@media (max-width: 1023px) { .collab-models__grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────
   DECISION TREE (servicii)
────────────────────────────────────── */
.decision-tree { background: var(--color-bg-gray); }
.decision-tree__header { margin-bottom: 2.5rem; }
.decision-items { display: flex; flex-direction: column; gap: 1px; }
.decision-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
  background: #fff;
  animation-delay: var(--delay, 0s);
}
.decision-item__trigger {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 17px; flex: 1;
  color: var(--color-text-muted);
}
.decision-item__trigger svg { flex-shrink: 0; color: var(--color-accent-teal); }
.decision-item__answer { font-size: 17px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
@media (max-width: 767px) {
  .decision-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ──────────────────────────────────────
   CAPABILITIES ACCORDION (servicii)
────────────────────────────────────── */
.capabilities { background: var(--color-bg-dark); }
.capabilities__header { margin-bottom: 3rem; }
.capabilities__accordion { margin-top: 0; }

/* ──────────────────────────────────────
   PORTFOLIO LISTING
────────────────────────────────────── */
.portfolio-listing { background: var(--color-bg-light); }
.portfolio-filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.filter-btn {
  padding: 0.4em 1.2em;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--color-text-muted);
  font-family: var(--font-display);
}
.filter-btn:hover, .filter-btn.is-active {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: #fff;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.portfolio-card {
  animation-delay: var(--delay, 0s);
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: opacity 0.35s ease,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease,
              border-color 0.3s ease;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.14);
  border-color: #D1D5DB;
}
.portfolio-card__link { display: block; text-decoration: none; color: inherit; position: relative; }
.portfolio-card__img-wrap {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #f3f4f6;
  position: relative;
}
.portfolio-card--tall .portfolio-card__img-wrap { aspect-ratio: 3/4; }
.portfolio-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  translate: var(--px) var(--py);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate, transform;
}
.portfolio-card:hover .portfolio-card__img { transform: scale(1.06); }
.portfolio-card__img-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 60px; font-weight: 900;
  color: rgba(0,0,0,0.06);
  pointer-events: none;
}
.portfolio-card.no-img .portfolio-card__img { display: none; }
.portfolio-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  border-radius: 10px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 22px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }
.portfolio-card__overlay-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease,
              background 0.3s ease,
              border-color 0.3s ease;
}
.portfolio-card:hover .portfolio-card__overlay-label {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.08s;
}
.portfolio-card__overlay-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-card:hover .portfolio-card__overlay-arrow {
  transform: rotate(-45deg);
}

/* ─── Cursor parallax pe imagine (var-uri --px/--py setate din JS) ─── */
.portfolio-card__img-wrap {
  --px: 0px;
  --py: 0px;
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card, .portfolio-card__img, .portfolio-card__overlay-label,
  .portfolio-card__overlay-arrow {
    transition: none !important;
  }
  .portfolio-card__img { translate: 0 0; }
}
.portfolio-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 0 8px 0;
}
.portfolio-card__title { font-size: clamp(15px, 1.2vw, 18px); font-weight: 600; color: var(--color-text-primary); }
.portfolio-card__year { font-size: 13px; color: var(--color-text-muted); }
.portfolio-card__footer { display: flex; justify-content: space-between; align-items: center; }
.portfolio-card__cat {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.portfolio-card__metric { font-size: 13px; color: var(--color-accent-teal); font-weight: 600; }
.portfolio-empty { grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--color-text-muted); }
@media (max-width: 767px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────
   SMITHY SECTION — Pixora dark adaptation
────────────────────────────────────── */
.section--dark-gradient {
  background: linear-gradient(180deg, #0E0E0E 0%, #1A1A1A 55%, #0A0A0A 100%);
  color: #FFFFFF;
}
.smithy-section {
  padding-block: clamp(100px, 12vw, 180px) clamp(80px, 10vw, 140px);
  overflow: hidden;
  border-radius: 24px;
}
.smithy-section .section-label { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* Header: titlu mare stânga + intro dreapta (Pixora composition) */
.smithy-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 4.5vw, 64px);
  margin-bottom: clamp(80px, 10vw, 140px);
}
@media (min-width: 1024px) {
  .smithy-section__head {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(48px, 6vw, 96px);
  }
}

.smithy-section__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8.5vw, 140px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin: 0;
}
.smithy-section__title-line { display: block; }
.smithy-yellow { color: #EAB308; font-weight: inherit; }

.smithy-section__intro-block {
  max-width: 460px;
}
@media (min-width: 1024px) {
  .smithy-section__intro-block { max-width: none; padding-bottom: clamp(8px, 1vw, 16px); }
}
.smithy-section__intro {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 clamp(20px, 2.5vw, 28px);
}

.smithy-section__discover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color 0.3s ease, border-color 0.3s ease, padding-right 0.35s ease;
}
.smithy-section__discover:hover {
  color: #EAB308;
  border-bottom-color: #EAB308;
  padding-right: 4px;
}
.smithy-section__discover-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.smithy-section__discover:hover .smithy-section__discover-arrow {
  transform: translate(3px, -3px);
}

/* Cards grid — 1 → 2 → 4 columns */
.smithy-section .smithy-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px)  { .smithy-section .smithy-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .smithy-section .smithy-features { grid-template-columns: repeat(4, 1fr); } }

/* Card — override la regulile globale .smithy-feature din pagina /cum-lucram */
.smithy-section .smithy-feature {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  animation-delay: var(--delay, 0s);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.45s ease;
}
.smithy-section .smithy-feature:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(234, 179, 8, 0.55);
  box-shadow: 0 18px 40px -12px rgba(234, 179, 8, 0.22);
}

.smithy-section .smithy-feature__icon {
  display: inline-flex;
  color: #FFFFFF;
  margin-bottom: clamp(60px, 7vw, 100px); /* breathing room — Pixora pattern */
  transition: color 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.smithy-section .smithy-feature__icon svg {
  width: clamp(32px, 3vw, 40px);
  height: clamp(32px, 3vw, 40px);
}
.smithy-section .smithy-feature:hover .smithy-feature__icon {
  color: #EAB308;
  transform: scale(1.1);
}

.smithy-section .smithy-feature__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.smithy-section .smithy-feature__text {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}

.smithy-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}
.smithy-section .smithy-feature:hover .smithy-feature__cta { color: #EAB308; }
.smithy-feature__cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.smithy-section .smithy-feature:hover .smithy-feature__cta-arrow {
  transform: rotate(-45deg);
}

/* ──────────────────────────────────────
   COUNTERS — Bubble playground (Pixora-style)
────────────────────────────────────── */
.counters-section {
  background: transparent;
  padding-block: clamp(80px, 10vw, 140px) clamp(60px, 7vw, 100px);
}
.counters-section .section-label { margin-bottom: clamp(20px, 2.5vw, 28px); }

.bubble-stage {
  position: relative;
  width: 100%;
  height: clamp(480px, 55vw, 660px);
  margin-top: clamp(20px, 2.5vw, 32px);
  overflow: hidden;
  border-radius: 4px;
}

/* Title — over the playground, top-left, acts as obstacle */
.bubble-stage__title {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 72px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #1A1A1A;
  pointer-events: none;
  max-width: 92%;
}
.bubble-stage__title-line {
  display: block;
}
.title-yellow { color: #EAB308; }

/* Desktop: cele două party-uri din primul rând stau inline cu „." separator */
.title-part { display: inline; }
.title-part::after { content: '. '; }
.title-part:last-child::after { content: '.'; }
@media (max-width: 767px) {
  /* Mobile: fiecare part pe rândul lui, dar păstrăm „." la final */
  .title-part { display: block; }
  .title-part::after { content: '.'; }
}

/* Arena — coordinate system for bubble physics */
.bubble-stage__arena {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* bubbles set their own pointer-events */
}

/* Floor — two yellow lines of different thickness */
.bubble-stage__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
}
.bubble-stage__floor-thick,
.bubble-stage__floor-thin {
  display: block;
  width: 100%;
  background: #EAB308;
}
.bubble-stage__floor-thick { height: 5px; }
.bubble-stage__floor-thin  { height: 1px; margin-top: 3px; }

/* Bubble base — flat design (ca badge Castolin) */
.bubble {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  color: #1A1A1A;
  font-family: var(--font-display);
  user-select: none;
  cursor: grab;
  pointer-events: auto;
  opacity: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  translate: var(--tx, 0px) var(--ty, 0px);
  rotate: var(--rot, 0deg);
  will-change: translate, rotate;
  transition: scale 0.3s cubic-bezier(0.22, 1.4, 0.36, 1),
              box-shadow 0.4s ease,
              opacity 0.4s ease;
}
.bubble.is-spawned { opacity: 1; }
.bubble.is-stuck {
  cursor: grabbing;
  scale: 1.06;
  z-index: 10;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.25);
}

.bubble::before {
  content: attr(data-value);
  display: block;
  font-size: var(--num-size, 26px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  padding: 0 6px;
}
.bubble::after {
  content: attr(data-label);
  display: block;
  font-family: var(--font-body);
  font-size: var(--label-size, 9px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-top: 6px;
  opacity: 0.8;
  padding: 0 14%;
}

/* Sizes (desktop/tablet) — ~80% din varianta dublată */
.bubble[data-size="sm"] { width: clamp(145px, 15vw, 200px); height: clamp(145px, 15vw, 200px); --num-size: 32px; --label-size: 10px; }
.bubble[data-size="md"] { width: clamp(170px, 18vw, 230px); height: clamp(170px, 18vw, 230px); --num-size: 38px; --label-size: 11px; }
.bubble[data-size="lg"] { width: clamp(200px, 22vw, 270px); height: clamp(200px, 22vw, 270px); --num-size: 45px; --label-size: 12px; }
.bubble[data-size="xl"] { width: clamp(230px, 25vw, 310px); height: clamp(230px, 25vw, 310px); --num-size: 53px; --label-size: 14px; }

/* Mobile: playground compact */
@media (max-width: 767px) {
  .bubble-stage {
    height: min(58vh, 500px);
    aspect-ratio: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  .bubble[data-size="sm"] { width: 115px; height: 115px; --num-size: 26px; --label-size: 9px;  }
  .bubble[data-size="md"] { width: 135px; height: 135px; --num-size: 30px; --label-size: 10px; }
  .bubble[data-size="lg"] { width: 155px; height: 155px; --num-size: 35px; --label-size: 10px; }
  .bubble[data-size="xl"] { width: 175px; height: 175px; --num-size: 42px; --label-size: 11px; }
}

/* Culorile sunt setate inline din JS (paletă pastel random la fiecare load) */

@media (prefers-reduced-motion: reduce) {
  .bubble { transition: opacity 0.3s ease; }
}

/* ──────────────────────────────────────
   LOGO MARQUEE (Pixora-style, light section)
────────────────────────────────────── */
.logo-marquee {
  position: relative;
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 56px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logoMarquee 45s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}
.logo-marquee__group {
  display: flex;
  gap: 12px;
  padding-right: 12px;
  flex-shrink: 0;
}
.logo-marquee__item {
  flex-shrink: 0;
  width: clamp(170px, 16vw, 230px);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  transition: border-color 0.35s ease,
              background 0.35s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.logo-marquee__item:hover {
  border-color: #1A1A1A;
  background: #FFFFFF;
  transform: scale(1.06);
}
.logo-marquee__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.5;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.logo-marquee__item:hover .logo-marquee__img {
  filter: none;
  opacity: 1;
}
.logo-marquee__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(26, 26, 26, 0.5);
  text-align: center;
  transition: color 0.35s ease;
}
.logo-marquee__item:hover .logo-marquee__name {
  color: #1A1A1A;
}
@keyframes logoMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* ──────────────────────────────────────
   PROJECT PAGE
────────────────────────────────────── */
.project-page main { padding: 0; }
.project-nav { background: var(--color-bg-gray); }
.project-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
.project-nav__link { text-decoration: none; color: inherit; }
.project-nav__link--next { text-align: right; }
.project-nav__arrow { font-size: 24px; display: block; color: var(--color-text-muted); }
.project-nav__label { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }
.project-nav__title { font-size: 15px; font-weight: 600; }
.project-nav__all {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--color-text-muted); font-size: 13px;
  transition: color 0.3s ease;
}
.project-nav__all:hover { color: var(--color-text-primary); }
@media (max-width: 767px) {
  .project-nav__inner { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .project-nav__all { display: none; }
}

/* ──────────────────────────────────────
   CONTACT PAGE
────────────────────────────────────── */
.contact-section { background: var(--color-bg-light); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: start;
}
.contact-form-wrap__title { font-size: 28px; font-weight: 800; margin-bottom: 2rem; }
.form-flash {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 15px;
  line-height: 1.5;
}
.form-flash--success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.form-flash--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.form-flash ul { margin: 0.25rem 0 0 1.25rem; }
.form-row { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row--2col { flex-direction: row; }
.form-field { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; }
.form-field--checkbox { margin-bottom: 1.5rem; }
.form-label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.form-label span { color: #dc2626; }
.form-input {
  padding: 0.75rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-hover-gold);
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}
.form-input--textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-hover-gold); }
.form-checkbox-label a { color: var(--color-text-primary); }
.btn--full { width: 100%; justify-content: center; }
.contact-info { background: var(--color-bg-gray); border-radius: 16px; padding: 2rem; }
.contact-info__block { margin-bottom: 2rem; }
.contact-info__title { font-size: 16px; font-weight: 700; margin-bottom: 1rem; }
.contact-info__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-info__link {
  display: flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--color-text-primary);
  font-size: 15px;
  transition: color 0.3s ease;
}
.contact-info__link:hover { color: var(--color-hover-gold); }
.contact-info__address { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 14px; color: var(--color-text-muted); }
.contact-info__address svg { flex-shrink: 0; margin-top: 2px; }
.contact-info__address address { font-style: normal; line-height: 1.6; }
.contact-calendly { }
.contact-calendly__desc { font-size: 14px; color: var(--color-text-muted); margin-bottom: 1rem; line-height: 1.5; }
.contact-map { overflow: hidden; }
.contact-map__placeholder {
  background: #e5e7eb;
  height: 400px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--color-text-muted);
}
@media (max-width: 1023px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { order: -1; }
}
@media (max-width: 767px) {
  .form-row--2col { flex-direction: column; }
}

/* ──────────────────────────────────────
   CTA DARK (shared)
────────────────────────────────────── */
.cta-dark { background: var(--color-bg-dark); }
.cta-dark__inner { max-width: 700px; margin: 0 auto; text-align: center; }
.cta-dark__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1rem;
}
.cta-dark__sub { font-size: 18px; color: rgba(255,255,255,0.6); margin-bottom: 2.5rem; line-height: 1.6; }

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 1 — Hero Fullscreen + Grid
───────────────────────────────────────────── */
.pt1-hero {
  position: relative;
  height: 90vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.pt1-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pt1-hero__bg--placeholder { background: var(--color-bg-dark); }
.pt1-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}
.pt1-hero__content { position: relative; z-index: 2; padding-bottom: 4rem; width: 100%; }
.pt1-hero__meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.pt1-hero__client { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 0.05em; }
.pt1-hero__sep { color: rgba(255,255,255,0.4); }
.pt1-hero__year, .pt1-hero__cat { font-size: 13px; color: rgba(255,255,255,0.5); }
.pt1-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 88px);
  font-weight: 900;
  line-height: 1.0;
  color: #fff;
  max-width: 900px;
}
.pt1-desc { background: var(--color-bg-light); }
.pt1-desc__body { font-size: clamp(16px, 2vw, 18px); line-height: 1.8; color: var(--color-text-muted); }
.pt1-gallery { background: var(--color-bg-gray); }
.pt1-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pt1-gallery__item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #e5e7eb;
  animation-delay: var(--delay, 0s);
}
.pt1-gallery__item--tall { aspect-ratio: 3/4; grid-row: span 2; }
.pt1-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.pt1-gallery__item:hover img { transform: scale(1.04); }
.pt1-gallery__placeholder {
  grid-column: 1/-1; text-align: center; padding: 4rem;
  color: var(--color-text-muted); font-size: 16px;
}
@media (max-width: 767px) { .pt1-gallery__grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 2 — Split Screen + Timeline
───────────────────────────────────────────── */
.pt2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}
.pt2-split__image {
  overflow: hidden;
  animation-delay: 0s;
}
.pt2-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pt2-split__image--placeholder { background: #e5e7eb; }
.pt2-split__text {
  padding: clamp(3rem, 8vw, 8rem) clamp(2rem, 5vw, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pt2-split__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.1;
  margin-block: 1rem 1.5rem;
}
.pt2-split__subtitle { font-size: 18px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 2rem; }
.pt2-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.pt2-specs__item dt { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.pt2-specs__item dd { font-size: 15px; font-weight: 600; }
.pt2-timeline { background: var(--color-bg-light); }
.pt2-timeline__list { list-style: none; padding: 2rem 0 0; margin: 0; }
.pt2-timeline__item {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 1.5rem; padding: 2rem 0;
  border-bottom: 1px solid #e5e7eb;
  animation-delay: var(--delay, 0s);
}
.pt2-timeline__num { font-family: var(--font-display); font-size: 36px; font-weight: 900; color: #e5e7eb; line-height: 1; }
.pt2-timeline__phase { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }
.pt2-timeline__text { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }
.pt2-gallery { background: var(--color-bg-gray); }
.pt2-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pt2-gallery__item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: #e5e7eb; }
.pt2-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .pt2-split { grid-template-columns: 1fr; }
  .pt2-split__image { height: 300px; }
  .pt2-gallery__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 3 — Case Study
───────────────────────────────────────────── */
.pt3-hero { padding-block: var(--section-padding) 0; }
.pt3-hero__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.pt3-hero__year { font-size: 14px; color: var(--color-text-muted); }
.pt3-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 90px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
}
.pt3-hero__image-wrap { border-radius: 0; overflow: hidden; }
.pt3-hero__image-wrap img { width: 100%; height: 55vh; object-fit: cover; display: block; }
.pt3-metrics { background: var(--color-bg-gray); }
.pt3-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #e5e7eb;
}
.pt3-metric {
  background: var(--color-bg-gray);
  padding: 2rem;
  text-align: center;
  animation-delay: var(--delay, 0s);
}
.pt3-metric__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.pt3-metric__label { font-size: 13px; color: var(--color-text-muted); text-align: center; }
.pt3-narrative { background: var(--color-bg-light); }
.pt3-narrative__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.pt3-block .section-label { margin-bottom: 1rem; display: block; }
.pt3-block__body { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.8; color: var(--color-text-muted); }
.pt3-quote-section { background: var(--color-bg-gray); }
.pt3-quote {
  border-left: 4px solid var(--color-hover-gold);
  padding-left: 2rem;
  margin: 0;
}
.pt3-quote p { font-size: clamp(20px, 3vw, 30px); font-weight: 600; font-style: italic; line-height: 1.4; margin-bottom: 1rem; }
.pt3-quote cite { font-size: 14px; color: var(--color-text-muted); font-style: normal; }
.pt3-quote cite strong { color: var(--color-text-primary); }
.pt3-video { background: var(--color-bg-dark); padding-block: var(--section-padding); }
.pt3-video__wrap video { width: 100%; border-radius: 12px; display: block; }
.pt3-gallery { background: var(--color-bg-dark); }
.pt3-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 2rem;
}
.pt3-gallery__item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: #252525; }
.pt3-gallery__item--wide { grid-column: span 2; aspect-ratio: 16/9; }
.pt3-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px) { .pt3-narrative__grid { grid-template-columns: 1fr; } .pt3-metrics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .pt3-gallery__grid { grid-template-columns: 1fr; } .pt3-gallery__item--wide { grid-column: 1; aspect-ratio: 4/3; } }

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 4 — Before/After
───────────────────────────────────────────── */
.pt4-header { background: var(--color-bg-light); }
.pt4-header__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  margin-block: 1.5rem;
}
.pt4-header__desc { font-size: 18px; color: var(--color-text-muted); line-height: 1.7; max-width: 680px; }
.pt4-ba-section { background: var(--color-bg-dark); padding-block: var(--section-padding); }
.pt4-ba {
  position: relative;
  aspect-ratio: 16/7;
  border-radius: 12px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  background: #111;
}
.pt4-ba__pane { position: absolute; inset: 0; }
.pt4-ba__pane--after { clip-path: inset(0 50% 0 0); }
.pt4-ba__pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt4-ba__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #e5e7eb; color: var(--color-text-muted); font-size: 16px;
}
.pt4-ba__placeholder--after { background: #d1d5db; }
.pt4-ba__label {
  position: absolute;
  top: 1rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.3em 0.8em;
  border-radius: 999px;
  z-index: 10;
}
.pt4-ba__pane--before .pt4-ba__label { left: 1rem; }
.pt4-ba__pane--after .pt4-ba__label { right: 1rem; }
.pt4-ba__divider {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 3px;
  background: #fff;
  z-index: 20;
  cursor: ew-resize;
  transform: translateX(-50%);
}
.pt4-ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.pt4-ba__hint { text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 1rem; }
.pt4-specs { background: var(--color-bg-gray); }
.pt4-specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.pt4-specs__item { animation-delay: var(--delay, 0s); }
.pt4-specs__item dt { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.pt4-specs__item dd { font-size: 18px; font-weight: 700; }
.pt4-gallery { background: var(--color-bg-light); }
.pt4-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 2rem; }
.pt4-gallery__item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.pt4-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .pt4-ba { aspect-ratio: 4/3; }
  .pt4-specs__grid { grid-template-columns: repeat(2, 1fr); }
  .pt4-gallery__grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 5 — Video First
───────────────────────────────────────────── */
.pt5-header { background: var(--color-bg-light); }
.pt5-header__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  line-height: 1.1;
  margin-block: 1.5rem;
}
.pt5-header__desc { font-size: 18px; color: var(--color-text-muted); line-height: 1.7; max-width: 700px; }
.pt5-video { background: #000; position: relative; }
.pt5-video__wrap { position: relative; aspect-ratio: 16/9; max-height: 90vh; }
.pt5-video__player { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt5-video__play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  transition: opacity 0.3s ease;
}
.pt5-video__play-btn:hover { opacity: 0.85; }
.pt5-video__poster { position: relative; max-height: 90vh; overflow: hidden; }
.pt5-video__poster img { width: 100%; height: 90vh; object-fit: cover; display: block; }
.pt5-video__no-video-label {
  position: absolute; bottom: 2rem; left: 2rem;
  background: rgba(0,0,0,0.7); color: #fff;
  padding: 0.5em 1em; border-radius: 999px; font-size: 13px;
}
.pt5-video__placeholder {
  aspect-ratio: 16/9;
  background: var(--color-bg-dark);
  display: flex; align-items: center; justify-content: center;
}
.pt5-video__placeholder-inner { text-align: center; color: rgba(255,255,255,0.2); }
.pt5-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-block: 4rem;
  border-bottom: 1px solid #e5e7eb;
  animation-delay: var(--delay, 0s);
}
.pt5-breakdown--flip { direction: rtl; }
.pt5-breakdown--flip > * { direction: ltr; }
.pt5-breakdown__num { font-family: var(--font-display); font-size: 80px; font-weight: 900; color: #e5e7eb; line-height: 1; }
.pt5-breakdown__title { font-size: 24px; font-weight: 700; margin-block: 0.5rem 1rem; }
.pt5-breakdown__body { font-size: 16px; color: var(--color-text-muted); line-height: 1.7; }
.pt5-breakdown__image { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #e5e7eb; }
.pt5-breakdown__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt5-breakdown__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 14px; }
.pt5-bts { background: var(--color-bg-gray); }
.pt5-bts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 2rem; }
.pt5-bts__item { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.pt5-bts__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .pt5-breakdown { grid-template-columns: 1fr; }
  .pt5-breakdown--flip { direction: ltr; }
  .pt5-bts__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 6 — Minimal Gallery
───────────────────────────────────────────── */
.pt6-header { background: var(--color-bg-light); }
.pt6-header__inner { max-width: 700px; }
.pt6-header__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.pt6-header__meta { display: flex; align-items: center; gap: 0.75rem; font-size: 14px; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.pt6-header__sep { opacity: 0.4; }
.pt6-header__desc { font-size: 17px; color: var(--color-text-muted); line-height: 1.7; }
.pt6-hero-image { overflow: hidden; max-height: 70vh; }
.pt6-hero-image img { width: 100%; height: 70vh; object-fit: cover; display: block; }
.pt6-gallery { background: var(--color-bg-light); }
.pt6-masonry {
  columns: 3;
  column-gap: 16px;
}
.pt6-masonry__item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  animation-delay: var(--delay, 0s);
}
.pt6-masonry__item img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.pt6-masonry__item:hover img { transform: scale(1.04); }
.pt6-masonry__caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #fff; padding: 0.5rem 0.75rem; font-size: 13px; transform: translateY(100%); transition: transform 0.3s ease; }
.pt6-masonry__item:hover .pt6-masonry__caption { transform: translateY(0); }
.pt6-masonry__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; padding: 1rem;
  opacity: 0; transition: opacity 0.3s ease;
  color: #fff; font-size: 14px;
}
.pt6-masonry__item:hover .pt6-masonry__overlay { opacity: 1; }
.pt6-credit { background: var(--color-bg-light); }
.pt6-credit__inner { display: flex; gap: 1rem; align-items: center; font-size: 14px; color: var(--color-text-muted); }
.pt6-credit__agency { font-weight: 700; color: var(--color-text-primary); }
.pt6-credit__sep { opacity: 0.4; }
@media (max-width: 767px) { .pt6-masonry { columns: 2; } }
@media (max-width: 480px) { .pt6-masonry { columns: 1; } }

/* ─────────────────────────────────────────────
   PORTFOLIO TEMPLATE 7 — Editorial Magazine
───────────────────────────────────────────── */
.pt7-hero { }
.pt7-hero__text { padding-block: var(--section-padding) 2rem; background: var(--color-bg-light); }
.pt7-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 100px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-top: 1.5rem;
}
.pt7-hero__image { overflow: hidden; }
.pt7-hero__image img { width: 100%; height: 60vh; object-fit: cover; display: block; }
.pt7-pullquote { background: var(--color-bg-light); }
.pt7-pullquote__text {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0;
}
.pt7-fullbleed { overflow: hidden; }
.pt7-fullbleed img { width: 100%; height: 70vh; object-fit: cover; display: block; }
.pt7-image-section { background: var(--color-bg-light); }
.pt7-image-section__wrap { border-radius: 12px; overflow: hidden; }
.pt7-image-section__wrap img { width: 100%; height: auto; display: block; }
.pt7-block { background: var(--color-bg-light); }
.pt7-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.pt7-block--flip .pt7-block__inner { direction: rtl; }
.pt7-block--flip .pt7-block__inner > * { direction: ltr; }
.pt7-block__heading { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); font-weight: 800; margin-bottom: 1.5rem; }
.pt7-block__body { font-size: 17px; line-height: 1.8; color: var(--color-text-muted); }
.pt7-block__quote {
  border-left: 4px solid var(--color-hover-gold);
  padding-left: 1.5rem;
  margin-top: 2rem;
  font-size: 18px;
  font-style: italic;
  color: var(--color-text-primary);
}
.pt7-block__image { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #e5e7eb; }
.pt7-block__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt7-colophon { background: var(--color-bg-gray); padding-block: 2rem; }
.pt7-colophon__inner { display: flex; gap: 1rem; align-items: center; font-size: 14px; color: var(--color-text-muted); }
.pt7-colophon__brand { font-weight: 700; color: var(--color-text-primary); }
@media (max-width: 767px) {
  .pt7-block__inner { grid-template-columns: 1fr; }
  .pt7-block--flip .pt7-block__inner { direction: ltr; }
  .pt7-pullquote__text { font-size: clamp(24px, 6vw, 36px); }
}

/* ═══════════════════════════════════════════════════
   BANDĂ MARQUEE (între FONDATORI și INSIGHTS)
═══════════════════════════════════════════════════ */
/* Containerul: transparent — fundalul galben e doar pe track + linii.
   overflow:hidden necesar pentru animația marquee orizontală. */
.marquee-band {
  background: transparent;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 10;
}

/* Banda principală cu textul — groasă, galbenă, text mare aproape de margini */
.marquee-band__track {
  background: #EAB308;
  display: flex;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
  padding: 10px 0;
}

.marquee-band:hover .marquee-band__track {
  animation-play-state: paused;
}

.marquee-band__content {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: 0;
  white-space: nowrap;
}

.marquee-band__content span:not(.marquee-band__sep) {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 1;
  padding: 0 32px;
}

.marquee-band__sep {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  background: rgba(255,255,255,0.6) !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0 !important;
}

/* Linii decorative — strips galbene cu gap între ele */
.marquee-band__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
}

.marquee-band__line {
  background: #EAB308;
  width: 100%;
}

/* Lines sub text — gros lângă bandă, din ce în ce mai subțiri spre exterior */
.marquee-band__lines .marquee-band__line:nth-child(1) { height: 10px; }
.marquee-band__lines .marquee-band__line:nth-child(2) { height: 6px; }
.marquee-band__lines .marquee-band__line:nth-child(3) { height: 3px; }

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-band__track { animation: none; }
}