/* ═══════════════════════════════════════════════════════════
   BOGDAN PORTFOLIO v4 — STYLES
   Dark, bold, modern — Reels/TikTok production aesthetic
   ═══════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@font-face {
  font-family: 'Resist';
  src: url('fonts/ResistSansDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Tighten tracking to -2px via font-variation-settings not supported; emulate via letter-spacing */
  letter-spacing: -0.0625em;
}
@font-face {
  font-family: 'Resist';
  src: url('fonts/ResistSansDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  letter-spacing: -0.0625em;
}
@font-face {
  font-family: 'Resist';
  src: url('fonts/ResistSansDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  letter-spacing: -0.0625em;
}

/* ── DESIGN TOKENS ── */
:root {
  --bg: #121212;
  --bg2: #1A1A1A;
  --bg3: #212121;
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.16);

  --white: #F5F5F5;
  --white-dim: #A8A8A8;

  --red: #E82200;
  --red-dim: rgba(232,34,0,0.15);
  --yellow: #FFC700;
  --yellow-dim: rgba(255,199,0,0.15);

  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(0.33,1,0.68,1);

  --font: 'Resist', system-ui, -apple-system, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ── LENIS SMOOTH SCROLL ──
   Lenis hijacks native scrolling; we disable browser smooth-scroll,
   let the body become the actual scrollable container, and let the
   JS in script.js drive the rAF loop. The .lenis-stopped class is
   added by the lib when a modal/lightbox opens. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

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

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* ── GLOWING BLOBS ── */
.blob-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
  mix-blend-mode: screen;
  will-change: transform;
}
.blob-1 {
  width: 600px;
  height: 600px;
  background: var(--red);
  top: -200px;
  left: -200px;
  animation: blobFloat1 12s ease-in-out infinite alternate;
}
.blob-2 {
  width: 500px;
  height: 500px;
  background: var(--yellow);
  top: 30%;
  right: -150px;
  animation: blobFloat2 15s ease-in-out infinite alternate;
}
.blob-3 {
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.3);
  bottom: 10%;
  left: 20%;
  animation: blobFloat3 10s ease-in-out infinite alternate;
}
.blob-4 {
  width: 350px;
  height: 350px;
  background: var(--red);
  bottom: -100px;
  right: 20%;
  animation: blobFloat4 14s ease-in-out infinite alternate;
}
.blob-5 {
  width: 300px;
  height: 300px;
  background: rgba(255,199,0,0.4);
  top: 60%;
  left: 50%;
  animation: blobFloat5 11s ease-in-out infinite alternate;
}
.blob-6 {
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,0.2);
  top: 20%;
  left: 30%;
  animation: blobFloat6 13s ease-in-out infinite alternate;
}
@keyframes blobFloat1 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px,60px) scale(1.1); } }
@keyframes blobFloat2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px,80px) scale(0.95); } }
@keyframes blobFloat3 { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,-50px) scale(1.05); } }
@keyframes blobFloat4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px,-40px) scale(1.08); } }
@keyframes blobFloat5 { from { transform: translate(0,0) scale(1); } to { transform: translate(50px,70px) scale(0.92); } }
@keyframes blobFloat6 { from { transform: translate(0,0) scale(1); } to { transform: translate(-40px,60px) scale(1.02); } }

/* GPU-friendly: animate opacity instead of border-radius on each frame.
   The "breathing" effect comes from the existing scale keyframes above. */
.blob { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none !important; }
}

/* ── CURSOR ── */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
}
.cursor-dot {
  width: 4px;
  height: 4px;
  background: var(--white);
}
.cursor-ring {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--red);
  opacity: 0;
  transition: width 0.2s, height 0.2s, opacity 0.2s, border-color 0.2s;
}
.cursor-ring.hover {
  width: 30px;
  height: 30px;
  border-color: var(--yellow);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── LAYOUT ── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}
section {
  padding: 120px 0;
  position: relative;
  z-index: 1;
}
.reveal {
  opacity: 0;
  transform: translateY(32px);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Wipe reveal — clip-path bottom-to-top (pattern 6.2 #3) */
.wipe-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.wipe-reveal.visible {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .wipe-reveal { clip-path: none; }
}

/* Glitch flash on hover (pattern 6.2 #4) */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  animation: none;
  white-space: pre-line;
}
.glitch::before {
  color: var(--red);
  clip-path: inset(0 0 60% 0);
  transform: translateX(-1px);
}
.glitch::after {
  color: var(--yellow);
  clip-path: inset(60% 0 0 0);
  transform: translateX(1px);
}
/* One-shot flash on first viewport entry (adds .in-view by JS observer) */
.glitch.in-view::before,
.glitch.in-view::after {
  animation: glitchFlash 0.55s steps(3, end) 1;
  animation-fill-mode: forwards;
}
@keyframes glitchFlash {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; transform: translate(-1.5px, 0.5px); }
  30%  { opacity: 1; transform: translate(1.5px, -0.5px); }
  50%  { opacity: 1; transform: translate(-1px, 1px); }
  70%  { opacity: 1; transform: translate(1px, -0.5px); }
  100% { opacity: 0; transform: translate(0, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .glitch:hover::before,
  .glitch:hover::after {
    opacity: 1;
    animation: glitchFlash 0.22s steps(2, end) 1;
    animation-fill-mode: forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { display: none; }
  .glitch.in-view::before, .glitch.in-view::after { animation: none; opacity: 0; }
}

/* ── TYPOGRAPHY ── */
.section-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--yellow);
}
.section-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.0625em;
  color: var(--white);
  margin-bottom: 48px;
}
.section-title em {
  font-style: normal;
  color: var(--red);
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: background 0.4s, padding 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(18,18,18,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 0;
  border-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.nav-logo {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  text-transform: lowercase;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-line { display: block; }
.nav-logo-line--first { color: var(--white); font-weight: 500; }
.nav-logo-line--second { color: var(--red); font-weight: 500; }
.nav-logo-sub {
  display: block;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 4px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
}
.nav-link {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  transition: color 0.25s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--white); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang-btn {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--white-dim);
  transition: all 0.2s;
}
.lang-btn:hover { color: var(--white); }
.lang-btn.active { border-color: var(--red); color: var(--red); }
.lang-divider { width: 1px; height: 12px; background: var(--border2); }
.nav-cta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 20px;
  border: 1px solid var(--red);
  color: var(--red);
  background: transparent;
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--red); color: var(--white); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 200; /* sit above mobile menu background so the X is visible */
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
/* X: middle stripe fades, top and bottom rotate around the center */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 150;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 32px;
  font-weight: 400;
  color: var(--white);
}
.close-btn {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 28px;
  background: none;
  border: none;
  color: var(--white-dim);
  cursor: pointer;
}
.mobile-lang {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.mobile-lang-btn {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--border2);
  color: var(--white-dim);
  background: transparent;
  cursor: pointer;
}
.mobile-lang-btn.active { border-color: var(--red); color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg) 0%, #1a1215 50%, var(--bg) 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(232,34,0,0.06) 0%, transparent 60%),
              radial-gradient(ellipse 50% 80% at 10% 80%, rgba(255,199,0,0.03) 0%, transparent 50%);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  width: 100%;
  align-items: center;
  padding: 140px 48px 120px;
  max-width: 1440px;
  margin: 0 auto;
}
.hero-left { display: flex; align-items: center; }
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 28px;
  opacity: 0;
}
.hero-tag::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--yellow);
}
/* Blinking "live" dot — placed at the start of the hero tag. Pulses
   softly to draw attention to the availability line. */
.hero-tag::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 6px;
  order: -1;
  box-shadow: 0 0 0 0 rgba(232, 34, 0, 0.7);
  animation: heroBlink 1.6s ease-in-out infinite;
}
@keyframes heroBlink {
  0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 0 rgba(232, 34, 0, 0.6); }
  50%      { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 0 6px rgba(232, 34, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tag::after { animation: none; }
}
.hero-h1 {
  font-size: clamp(40px, 5.8vw, 76px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.0625em;
  color: var(--white);
  margin-bottom: 24px;
}
.hero-h1-line {
  display: block;
  overflow: hidden;
  /* The reveal mask clips the slide-in. line-height 1.05 is tall enough
     to contain Resist's ink box (ascent + descent ≈ 0.96em), so glyph
     tops and the descenders of g/y are never cropped, and long RU/SR
     lines wrap with uniform spacing (no per-line padding hack, no
     mid-word hyphenation). */
}
.hero-h1-line-text {
  display: block;
  will-change: transform, opacity;
}
/* overflow:hidden is only a reveal mask for the slide-in; with
   line-height 1.05 the line box already contains the font's ink, and
   the JS releases the mask after the slide. For reduced motion (and
   as a no-JS fallback) simply never clip. */
@media (prefers-reduced-motion: reduce) {
  .hero-h1-line { overflow: visible; }
}
.hero-h1-accent { color: var(--red); }
.hero-sub {
  font-size: 16px;
  color: var(--white-dim);
  max-width: 480px;
  line-height: 1.7;
  margin-bottom: 40px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-videographer {
  position: relative;
  display: inline-block;
  padding: 4px 16px;
  margin-top: 8px;
  margin-bottom: 24px;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--yellow);
  line-height: 1.2;
  will-change: transform;
  animation: cs2PlayReady 2.4s var(--ease-out) infinite;
}
.hero-videographer::before,
.hero-videographer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  opacity: 0;
  animation: cs2TargetLock 2.4s var(--ease-out) infinite;
}
.hero-videographer::before {
  left: 0;
  border-left: 1px solid currentColor;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.hero-videographer::after {
  right: 0;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  animation-delay: 0.08s;
}
@keyframes cs2PlayReady {
  0%, 54%, 100% { transform: scale(1); }
  62% { transform: scale(1.025); }
  72% { transform: scale(0.99); }
  82% { transform: scale(1); }
}
@keyframes cs2TargetLock {
  0%, 52%, 100% { opacity: 0; transform: translateX(-10px); }
  62%, 82% { opacity: 1; transform: translateX(0); }
  92% { opacity: 0; transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-videographer,
  .hero-videographer::after { animation: none; }
}

.hero-right {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero-video-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16/20;
  background: var(--bg3);
  border: 1px solid var(--border2);
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.hero-video-frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border2);
  pointer-events: none;
}
.hero-video-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(0,0,0,0.4);
  padding: 6px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-dim);
  transition: color 0.3s, border-color 0.3s;
}
.hero-arrow svg {
  width: 18px;
  height: 18px;
  animation: arrowBounce 1.6s ease-in-out infinite;
}
.hero-arrow:hover {
  color: var(--red);
  border-color: var(--red);
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-arrow svg { animation: none; }
}

/* Buttons */
.btn-primary {
  padding: 14px 32px;
  background: var(--red);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  display: inline-block;
  transition: background 0.25s, transform 0.2s;
}
.btn-primary:hover { background: #c91d00; transform: translateY(-1px); }
.btn-ghost {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s, gap 0.25s;
}
.btn-ghost:hover { color: var(--white); gap: 12px; }
.btn-ghost::after { content: '→'; font-size: 16px; }

/* ═══════════════════════════════════════════════════════════
   TICKER
   ═══════════════════════════════════════════════════════════ */
.ticker {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  overflow: hidden;
  background: var(--bg2);
  position: relative;
  z-index: 1;
}
.ticker-track {
  display: flex;
}
.ticker-inner {
  display: flex;
  gap: 48px;
  animation: ticker 28s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-dim);
  flex-shrink: 0;
}
.ticker-dot {
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════
   REELS SHOWCASE
   ═══════════════════════════════════════════════════════════ */
#reels-showcase {
  background: var(--bg);
  padding: 100px 0;
}
.reels-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}
.reels-videos .section-title { margin-bottom: 40px; }
.reels-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.reels-view-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border2);
  color: var(--white);
  background: transparent;
  transition: all 0.25s;
}
.reels-view-more:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}
.reels-card {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg3);
  border-radius: 4px;
}
.reels-card-thumb {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.reels-card-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,18,18,0.8) 100%);
  z-index: 1;
}
.reels-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reels-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--red-dim), var(--yellow-dim));
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}
.reels-card:hover .reels-card-overlay { opacity: 1; }
.reels-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s var(--ease);
  z-index: 3;
}
.reels-card-play::after {
  content: '';
  border-left: 12px solid var(--white);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.reels-card:hover .reels-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Reels stats */
.reels-stats {
  padding-left: 40px;
  border-left: 1px solid var(--border);
}
.reels-stats .section-label { margin-bottom: 8px; }
.reels-stat-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.reels-stat-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.reels-stat-num {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  color: var(--yellow);
  line-height: 1;
}
.reels-stat-plus, .reels-stat-percent, .reels-stat-x {
  font-size: 24px;
  font-weight: 500;
  color: var(--yellow);
}
.reels-stat-label {
  font-size: 13px;
  color: var(--white-dim);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   SELECTOR
   ═══════════════════════════════════════════════════════════ */
#selector {
  background: var(--bg2);
  padding: 100px 0;
}
#selector .section-title { margin-bottom: 48px; }
.selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 0;
}
.selector-card {
  background: var(--bg2);
  padding: 32px 24px;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s;
  position: relative;
  border: 2px solid transparent;
}
.selector-card:hover, .selector-card.active {
  background: var(--bg3);
  border-color: var(--red);
}
.selector-card.dimmed { opacity: 0.4; }
.selector-card-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--red);
}
.selector-card-icon svg { width: 20px; height: 20px; }
.selector-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.3;
}
.selector-card p {
  font-size: 12px;
  color: var(--white-dim);
  line-height: 1.5;
}
.selector-card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 16px;
  color: var(--white-dim);
  transition: transform 0.3s, color 0.3s;
}
.selector-card:hover .selector-card-arrow,
.selector-card.active .selector-card-arrow {
  transform: translate(4px, -4px);
  color: var(--red);
}

/* Selector panel */
.selector-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
  background: var(--bg3);
  border-top: 1px solid var(--border);
}
.selector-panel.open { max-height: 200px; }
.selector-panel-inner {
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.selector-pitch {
  font-size: 16px;
  color: var(--white);
  max-width: 500px;
  line-height: 1.6;
}
.selector-panel-ctas {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO
   ═══════════════════════════════════════════════════════════ */
#work {
  background: var(--bg);
  /* Tighten the gap to the "Ready to start" CTA banner below: the base
     120px bottom padding stacked with #services' 80px top padding made
     the jump to the banner feel too wide. */
  padding-bottom: 72px;
}
.portfolio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
}
.portfolio-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--white-dim);
  transition: all 0.25s;
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.portfolio-wrap { position: relative; }

/* Collapsed items: hidden but keep grid layout */
.portfolio-item.pf-collapsed { display: none; }

/* Fade overlay over the bottom of the grid */
.portfolio-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10,10,10,0) 0%,
    rgba(10,10,10,0.6) 50%,
    rgba(10,10,10,0.95) 100%);
  transition: opacity 0.4s ease;
  z-index: 2;
}
.portfolio-fade.hide { opacity: 0; }

/* "Show more" button */
.portfolio-show-more {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 26px;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, opacity 0.4s ease, transform 0.4s ease;
}
.portfolio-show-more:hover { background: var(--red); color: var(--white); transform: translateX(-50%) translateY(-2px); }
.portfolio-show-more.hide { opacity: 0; pointer-events: none; }
.portfolio-show-more .show-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
/* Trilingual labels: stack all 3, show only active one */
.portfolio-show-more .show-more-labels {
  position: relative;
  display: inline-block;
  min-width: 130px;
  text-align: center;
}
.portfolio-show-more .show-more-label {
  display: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.portfolio-show-more .show-more-label.active {
  display: inline;
}
.portfolio-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg3);
  transition: opacity 0.35s, transform 0.35s;
}
.portfolio-item.hidden { display: none; }
.portfolio-thumb {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.portfolio-thumb[data-ratio="wide"] { aspect-ratio: 16/9; }
.portfolio-thumb[data-ratio="mid"] { aspect-ratio: 16/10; }
.portfolio-thumb[data-ratio="tall"] { aspect-ratio: 4/3; }

/* When the thumbnail image is loaded, hide the gradient fallback.
   Backward-compatible selector for any legacy markup that still
   uses the older video[poster] pattern. */
.pf-thumbnail-loaded ~ .pf-fallback,
.lk-thumb-img-loaded ~ .lk-fallback { display: none; }

.pf-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-fallback span {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.12);
  text-align: center;
  padding: 8px;
}
.pf-grad-1 { background: linear-gradient(135deg, #1a0d05 0%, #2d1808 50%, #1a0d05 100%); }
.pf-grad-2 { background: linear-gradient(135deg, #050d18 0%, #081428 50%, #050d18 100%); }
.pf-grad-3 { background: linear-gradient(135deg, #050d0a 0%, #081a0f 50%, #050d0a 100%); }
.pf-grad-4 { background: linear-gradient(135deg, #0d050d 0%, #180818 50%, #0d050d 100%); }
/* ── LAZY MEDIA STACK ─────────────────────────────────
   Cards now render only a static <img> thumbnail by default.
   A <video class="pf-preview"> is created on demand by JS
   when the user hovers a desktop card. The thumbnail stays
   visible behind it until the preview starts playing.
   ───────────────────────────────────────────────────── */

/* Static poster / WebP for the card. Always positioned absolute
   so the dynamically-injected <video> can layer on top. */
.pf-thumbnail,
.reels-card-thumb-img,
.lk-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: var(--bg3);
  transition: transform 0.7s var(--ease), opacity 0.3s ease;
}
.portfolio-item:hover .pf-thumbnail,
.reels-card:hover .reels-card-thumb-img,
.lk-card:hover .lk-thumb-img { transform: scale(1.04); }

/* Empty slot that JS fills with a <video class="pf-preview"> */
.pf-preview-slot,
.reels-card-preview-slot,
.lk-preview-slot {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* The <video> element itself — fades in once .is-playing is set */
.pf-preview,
.reels-card-preview,
.lk-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pf-preview.is-playing,
.reels-card-preview.is-playing,
.lk-preview.is-playing { opacity: 1; }
.pf-grad-5 { background: linear-gradient(135deg, #0d0d05 0%, #181508 50%, #0d0d05 100%); }
.pf-grad-6 { background: linear-gradient(135deg, #05050d 0%, #080818 50%, #05050d 100%); }
.pf-grad-7 { background: linear-gradient(135deg, #0d0d0d 0%, #181818 50%, #0d0d0d 100%); }

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 52px;
  height: 52px;
  border: 1.5px solid rgba(245,245,245,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s var(--ease);
  z-index: 3;
}
.play-icon::after {
  content: '';
  border-left: 14px solid var(--white);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}
.portfolio-item:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18,18,18,0.9) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  z-index: 2;
}
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}
.portfolio-overlay-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.portfolio-mini-case {
  font-size: 11px;
  color: var(--white-dim);
  margin-top: 6px;
  line-height: 1.4;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-inner {
  position: relative;
  width: 90vw;
  max-width: 1000px;
}
.lightbox-ratio {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.lightbox-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
/* Full-video player used by the two content sections only. Its frame is
   sized from the video's actual ratio (set in script.js after metadata
   loads), while its height always leaves room for the Close control. */
.lightbox.lightbox--content {
  padding: clamp(16px, 3vw, 40px);
  overscroll-behavior: contain;
}
.lightbox.lightbox--content .lightbox-inner {
  --lightbox-aspect: 1.7777778;
  width: min(92vw, calc((100svh - 8rem) * var(--lightbox-aspect)));
  max-width: 1400px;
}
.lightbox.lightbox--content .lightbox-ratio {
  width: 100%;
  height: auto;
  padding-bottom: 0;
  aspect-ratio: var(--lightbox-aspect);
  max-height: calc(100svh - 8rem);
  background: #000;
}
.lightbox.lightbox--content .lightbox-ratio iframe,
.lightbox.lightbox--content .lightbox-ratio video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Matches the "Book a shoot" nav-cta: red uppercase text, transparent
   background, 1px red border, hover fills red with white text. X icon
   sits to the left of the trilingual label, which only ever shows the
   label matching the currently active language. */
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  height: auto;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--red);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  z-index: 10;
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, transform 0.2s, border-color 0.25s;
  white-space: nowrap;
}
.lightbox-close:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  transform: translateY(-1px);
}
.lightbox-close .icon-close {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  color: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}
.lightbox-close .lang-label {
  display: none;
  line-height: 1;
}
.lightbox-close .lang-label.active {
  display: inline;
}
/* ───────────────────────────────────────────────────────
   Desktop-only: lift the Close button just above the video
   frame so it can't collide with Safari's native player
   controls (the volume popover sits at the frame's
   top-right corner). Mobile keeps the in-frame position.
   ─────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .lightbox-close {
    top: -2.5rem;
    right: 1rem;
  }
}
@media (max-width: 480px) {
  .lightbox.lightbox--content {
    padding: 12px;
  }
  .lightbox.lightbox--content .lightbox-inner {
    width: min(94vw, calc((100svh - 6.5rem) * var(--lightbox-aspect)));
  }
  .lightbox.lightbox--content .lightbox-ratio {
    max-height: calc(100svh - 6.5rem);
  }
}

/* ═══════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════ */
#process {
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
#process .section-title { margin-bottom: 72px; }
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  position: relative;
  z-index: 2;
}
.process-step {
  background: var(--bg2);
  padding: 36px 28px;
  position: relative;
  transition: background 0.3s;
  min-height: 200px;
}
.process-step:hover { background: var(--bg3); }
.process-step-num {
  font-size: 56px;
  font-weight: 500;
  color: var(--red);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 16px;
}
.process-step h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
}
.process-step p {
  font-size: 13px;
  color: var(--white-dim);
  line-height: 1.7;
}
.process-connector {
  display: none;
}
.process-line-svg {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════ */
#services {
  background: var(--bg);
  /* Symmetric, reduced vertical padding — banner gets equal
     breathing room above and below. Top is tighter so the CTA
     banner sits closer to the Selected work grid above it. */
  padding: 56px 0 80px;
}

/* CTA Banner — symmetric, snug spacing. The banner is the first
   element in #services; the section's own padding provides equal
   breathing room above and below. Banner itself adds no extra
   margin, so the "Ready to start" block feels compact. */
.services-cta-banner {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.services-cta-banner h3 {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
}
.services-cta-banner p {
  font-size: 14px;
  color: var(--white-dim);
  margin-top: 4px;
}

/* Packages grid */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 40px;
}
.pkg-card {
  background: var(--bg2);
  padding: 36px 28px;
  position: relative;
  transition: background 0.3s;
}
.pkg-card:hover { background: var(--bg3); }
.pkg-card.featured {
  background: var(--bg3);
  outline: 1px solid var(--red);
  outline-offset: -1px;
}
.pkg-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--yellow);
  padding: 3px 10px;
  margin-bottom: 20px;
}
.pkg-name {
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 8px;
}
.pkg-price {
  font-size: 42px;
  font-weight: 500;
  color: var(--red);
  line-height: 1;
  margin-bottom: 4px;
}
.pkg-price-custom {
  font-size: 28px;
  padding-top: 6px;
}
.pkg-from {
  display: block;
  font-size: 12px;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  font-weight: 400;
}
.pkg-amount-wrap {
  display: inline-flex;
  align-items: baseline;
}
.pkg-currency { font-size: 20px; vertical-align: super; }
.pkg-desc {
  font-size: 13px;
  color: var(--white-dim);
  margin-bottom: 24px;
  line-height: 1.6;
}
.pkg-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.pkg-features li {
  font-size: 13px;
  color: var(--white-dim);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}
.pkg-features li::before {
  content: '✓';
  font-size: 11px;
  color: var(--yellow);
  flex-shrink: 0;
  margin-top: 2px;
}
.pkg-btn {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border2);
  color: var(--white-dim);
  background: transparent;
  transition: all 0.25s;
}
.pkg-card.featured .pkg-btn {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}
.pkg-btn:hover {
  border-color: var(--red);
  color: var(--white);
  background: var(--red);
}

/* Monthly benefits */
.monthly-benefits {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 32px 40px;
  margin-bottom: 40px;
}
.monthly-benefits h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 24px;
}
.mb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mb-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--white-dim);
}
.mb-check {
  color: var(--yellow);
  font-size: 14px;
  flex-shrink: 0;
}

/* Language note */
.lang-note {
  margin-bottom: 48px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  background: var(--red-dim);
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-note-icon {
  font-size: 18px;
  color: var(--yellow);
  flex-shrink: 0;
}
.lang-note p {
  font-size: 13px;
  color: var(--white-dim);
  line-height: 1.6;
}

/* Services accordion */
.accordion-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  margin-bottom: 24px;
  color: var(--white);
}
.accordion-section-toggle h3 {
  flex: 1;
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}
.accordion-section-arrow {
  width: 24px;
  height: 24px;
  color: var(--red);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.accordion-section-arrow svg { width: 100%; height: 100%; }
.accordion-section-toggle[aria-expanded="true"] .accordion-section-arrow {
  transform: rotate(180deg);
}
.accordion-section-hint {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  flex-shrink: 0;
}
.services-accordion .accordion-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.services-accordion.open .accordion-list {
  max-height: 4000px;
}
.accordion-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 24px;
}
.accordion-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.faq-list .accordion-list,
#faq .accordion-list { max-height: none; transition: none; }
.accordion-item {
  background: var(--bg2);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.accordion-trigger:hover { background: var(--bg3); }
.accordion-num {
  font-size: 14px;
  color: var(--red);
  flex-shrink: 0;
  width: 24px;
}
.accordion-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}
.accordion-price {
  font-size: 13px;
  color: var(--white-dim);
  flex-shrink: 0;
}
.accordion-arrow {
  font-size: 20px;
  color: var(--white-dim);
  flex-shrink: 0;
  transition: transform 0.3s;
}
.accordion-item.open .accordion-arrow { transform: rotate(45deg); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.accordion-item.open .accordion-content { max-height: 400px; }
.accordion-content p {
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--white-dim);
  line-height: 1.7;
}
.service-list {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-list li {
  font-size: 13px;
  color: var(--white-dim);
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-list li::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--yellow);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   WHY PROFESSIONAL (inside Equipment)
   ═══════════════════════════════════════════════════════════ */
#equipment-why {
  background: var(--bg2);
  padding: 80px 0;
}
.why-pro-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.why-pro-text {
  font-size: 16px;
  color: var(--white-dim);
  line-height: 1.8;
  margin-bottom: 32px;
}
.why-pro-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.why-pro-list li {
  font-size: 14px;
  color: var(--white);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}
.why-pro-list li::before {
  content: '→';
  color: var(--red);
  flex-shrink: 0;
}

/* "You get more than just a video" — 6 deliverable cards */
.why-deliverables {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.why-deliverables-title {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 32px;
  line-height: 1.2;
  max-width: 720px;
}
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.deliverable-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 130px;
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.deliverable-card:hover {
  background: var(--bg3);
  border-color: var(--red);
  transform: translateY(-2px);
}
.deliverable-num {
  font-size: 24px;
  font-weight: 500;
  color: var(--red);
  opacity: 0.45;
  line-height: 1;
}
.deliverable-text {
  font-size: 15px;
  color: var(--white);
  line-height: 1.4;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   EQUIPMENT
   ═══════════════════════════════════════════════════════════ */
#equipment {
  background: var(--bg);
  padding: 100px 0;
}
.equipment-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}
.equipment-visual .section-label { justify-content: center; }
.equipment-visual .section-title { text-align: center; margin-bottom: 32px; }

/* 3D Camera */
.cam-scene {
  width: 220px;
  height: 220px;
  perspective: 500px;
  margin: 0 auto;
}
.cam-wrap {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: camRotate 12s linear infinite;
}
@keyframes camRotate {
  from { transform: rotateY(0deg) rotateX(8deg); }
  to { transform: rotateY(360deg) rotateX(8deg); }
}
.cam-3d {
  position: relative;
  width: 96px;
  height: 64px;
  transform-style: preserve-3d;
}
.cam-face {
  position: absolute;
  border: 1px solid rgba(232,34,0,0.4);
  background: rgba(232,34,0,0.03);
}
.cam-front { width: 96px; height: 64px; transform: translateZ(30px); }
.cam-back { width: 96px; height: 64px; transform: rotateY(180deg) translateZ(30px); }
.cam-left { width: 60px; height: 64px; transform: rotateY(-90deg) translateZ(48px); left: 18px; }
.cam-right { width: 60px; height: 64px; transform: rotateY(90deg) translateZ(48px); left: 18px; }
.cam-top { width: 96px; height: 60px; transform: rotateX(90deg) translateZ(32px); }
.cam-bottom { width: 96px; height: 60px; transform: rotateX(-90deg) translateZ(32px); }

.cam-lens {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 33px;
  top: 17px;
  transform-style: preserve-3d;
}
.cam-lens-front {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(232,34,0,0.7);
  background: rgba(232,34,0,0.05);
  transform: translateZ(48px);
}
.cam-lens-back {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(232,34,0,0.3);
  transform: translateZ(30px);
}
.cam-lens-ring1 {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(232,34,0,0.4);
  background: transparent;
  top: 2px;
  left: 2px;
  transform: translateZ(38px);
}
.cam-lens-ring2 {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(232,34,0,0.6);
  background: rgba(232,34,0,0.08);
  top: 6px;
  left: 6px;
  transform: translateZ(48px);
}
.cam-vf {
  position: absolute;
  width: 28px;
  height: 12px;
  left: 34px;
  top: -12px;
  transform-style: preserve-3d;
}
.cam-vf-top {
  position: absolute;
  width: 28px;
  height: 12px;
  border: 1px solid rgba(232,34,0,0.4);
  background: rgba(232,34,0,0.03);
  transform: rotateX(90deg) translateZ(6px);
  top: 0;
}
.cam-vf-front {
  position: absolute;
  width: 28px;
  height: 12px;
  border: 1px solid rgba(232,34,0,0.35);
  background: rgba(232,34,0,0.02);
  transform: translateZ(0);
}
.cam-cross {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(49px);
}
.cam-cross::before, .cam-cross::after {
  content: '';
  position: absolute;
  background: rgba(232,34,0,0.5);
}
.cam-cross::before { width: 10px; height: 1px; top: 0; left: -5px; }
.cam-cross::after { width: 1px; height: 10px; top: -5px; left: 0; }

.cam-glow {
  width: 120px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(232,34,0,0.2) 0%, transparent 70%);
  margin: 24px auto 0;
  filter: blur(8px);
}
.eq-sub {
  font-size: 13px;
  color: var(--white-dim);
  margin-top: 20px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Equipment list */
.eq-list { list-style: none; }
.eq-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.eq-item:first-child { border-top: 1px solid var(--border); }
.eq-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--red);
}
.eq-icon svg { width: 16px; height: 16px; }
.eq-name { font-size: 14px; color: var(--white); font-weight: 400; line-height: 1.3; }
.eq-desc { font-size: 12px; color: var(--white-dim); margin-top: 3px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   CONTENT SYSTEM
   ═══════════════════════════════════════════════════════════ */
#content-system {
  background: var(--bg2);
  padding: 100px 0;
}
#content-system .section-title { margin-bottom: 16px; }
.cs-subtitle {
  font-size: 14px;
  color: var(--white-dim);
  margin-bottom: 56px;
}
.cs-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.cs-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 22px;
  background: var(--bg3);
  border: 1px solid var(--border);
  min-width: 140px;
  min-height: 120px;
  flex: 1 1 140px;
}
.cs-node-icon {
  width: 40px;
  height: 40px;
  color: var(--red);
  flex-shrink: 0;
}
.cs-node-icon svg { width: 100%; height: 100%; }
.cs-node-label {
  font-size: 13px;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}
.cs-arrow {
  width: 48px;
  min-height: 24px;
  color: var(--yellow);
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-arrow svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════ */
#about { background: var(--bg); }
/* Pull the red divider up under "Hello, I'm Bogdan": the default
   48px title margin + 16px divider margin read as a wide gap. */
#about .section-title { margin-bottom: 10px; }
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}
.about-photo-col { position: relative; }
.about-photo { position: relative; }
.about-photo-frame {
  aspect-ratio: 4/5;
  max-height: 540px;
  background: linear-gradient(160deg, #1a1515 0%, #0c0b0b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border2);
}
.about-photo-placeholder {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.12);
}
.about-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
/* Decorative offset frame — sits BESIDE the photo, not on top of it.
   The previous version overlapped the image and made the face look
   cropped. The frame is now a sibling, not a pseudo-element overlay. */
.about-photo-frame-accent {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  border: 1px solid var(--border2);
  pointer-events: none;
  z-index: -1;
}

/* About photo action buttons (Why me / For which tasks) */
.about-photo-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.about-info-btn {
  flex: 1 1 auto;
  padding: 12px 18px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.about-info-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}
.about-divider {
  width: 40px;
  height: 1px;
  background: var(--red);
  margin: 16px 0 20px;
}
.about-text {
  font-size: 15px;
  color: var(--white-dim);
  line-height: 1.7;
  margin-bottom: 12px;
}
.about-text strong { color: var(--white); font-weight: 500; }
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 24px;
}
.stat-item {
  background: var(--bg2);
  padding: 20px 16px;
  text-align: center;
}
.stat-num {
  font-size: 32px;
  font-weight: 500;
  color: var(--yellow);
  display: inline;
}
.stat-suffix {
  font-size: 22px;
  font-weight: 500;
  color: var(--yellow);
}
.stat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 4px;
}
.media-credits {
  font-size: 11px;
  color: var(--white-dim);
  margin-top: 24px;
  letter-spacing: 0.04em;
}
.about-langs { margin-top: 20px; }
.gear-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--white-dim);
}
.lang-bar {
  flex: 1;
  height: 2px;
  background: var(--border2);
  position: relative;
}
.lang-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  width: var(--fill-width, 100%);
}
.lang-name { min-width: 70px; }
.lang-level { min-width: 44px; text-align: right; font-size: 12px; }

/* Skills tags */
.skills-tags { margin-top: 20px; }
.skills-group { margin-bottom: 16px; }
.skills-group-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 12px;
}
.skills-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tag {
  font-size: 11px;
  color: var(--white-dim);
  padding: 4px 10px;
  border: 1px solid var(--border2);
  transition: border-color 0.2s, color 0.2s;
}
.skill-tag:hover { border-color: var(--red); color: var(--red); }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
#testimonials { background: var(--bg2); padding: 100px 0; }
#testimonials .section-title { margin-bottom: 48px; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.testimonial-card {
  background: var(--bg);
  padding: 32px 28px;
  transition: background 0.3s, transform 0.4s var(--ease);
  transform-style: preserve-3d;
}
.testimonial-card:hover { background: var(--bg2); }
@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover { transform: perspective(800px) rotateY(-2deg) rotateX(1deg) translateZ(8px); }
  .pkg-card:hover { transform: perspective(800px) rotateY(-2deg) translateZ(6px); }
}
.pkg-card { transition: background 0.3s, transform 0.4s var(--ease); transform-style: preserve-3d; }
.testimonial-case {
  margin-bottom: 16px;
}
.testimonial-case-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  background: var(--yellow-dim);
  padding: 7px 12px;
  line-height: 1.4;
  border-radius: 2px;
  max-width: 100%;
}
.testimonial-quote {
  font-size: 56px;
  color: var(--red);
  line-height: 0.5;
  margin-bottom: 16px;
}
.testimonial-text {
  font-size: 15px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: normal;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.testimonial-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--yellow);
  border: 1px solid var(--border2);
  flex-shrink: 0;
}
.testimonial-name { font-size: 13px; color: var(--white); font-weight: 400; }
.testimonial-role { font-size: 11px; color: var(--white-dim); letter-spacing: 0.04em; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
#faq { background: var(--bg); }
#faq .section-title { margin-bottom: 48px; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  max-width: 800px;
}
.faq-item { background: var(--bg2); }
.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.faq-trigger:hover { background: var(--bg3); }
.faq-q {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}
.faq-icon {
  font-size: 20px;
  color: var(--red);
  flex-shrink: 0;
  transition: transform 0.3s;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-item.open .faq-content { max-height: 300px; }
.faq-content p {
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--white-dim);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════ */
#contact { background: var(--bg2); }
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}
.contact-title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}
.contact-title em {
  font-style: normal;
  color: var(--red);
}
.contact-desc {
  font-size: 14px;
  color: var(--white-dim);
  line-height: 1.8;
  margin-bottom: 16px;
}
.contact-best {
  font-size: 13px;
  color: var(--yellow);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
}
.contact-best strong { font-weight: 500; }
.contact-links { display: flex; flex-direction: column; gap: 0; }
.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--white-dim);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.25s;
}
.contact-link:hover { color: var(--white); }
.contact-link:hover .contact-link-arrow { opacity: 1; transform: translateX(4px); }
.contact-link-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
}
.contact-link-icon svg { width: 16px; height: 16px; }
.contact-link-label { flex: 1; }
.contact-link-arrow { opacity: 0; transition: opacity 0.25s, transform 0.25s; color: var(--yellow); }

.russian-block {
  margin-top: 48px;
  padding: 32px;
  border: 1px solid var(--border);
  background: var(--bg3);
}
.russian-block-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 10px;
}
.russian-block p {
  font-size: 14px;
  color: var(--white-dim);
  line-height: 1.75;
}
.russian-block-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.russian-btn {
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 1px solid var(--border2);
  color: var(--white-dim);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
}
.russian-btn:hover { border-color: var(--yellow); color: var(--yellow); }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.form-input, .form-select, .form-textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.25s;
  width: 100%;
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--red); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(168,168,168,0.35); }
.form-select option { background: var(--bg3); }
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.form-submit {
  padding: 16px 40px;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  transition: background 0.25s, transform 0.2s;
}
.form-submit:hover { background: #c91d00; transform: translateY(-1px); }
.form-note { font-size: 12px; color: var(--white-dim); }
.form-success, .form-error {
  padding: 16px;
  font-size: 14px;
  display: none;
}
.form-success {
  background: var(--yellow-dim);
  border: 1px solid var(--yellow);
  color: var(--yellow);
}
.form-error {
  background: rgba(226,75,74,0.08);
  border: 1px solid #E24B4A;
  color: #E24B4A;
}
.form-error a { color: #E24B4A; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 48px 0 36px;
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-logo { font-size: 18px; font-weight: 500; color: var(--white); display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; text-transform: lowercase; }
.footer-logo-line { display: block; }
.footer-logo-line--first { color: var(--white); font-weight: 500; }
.footer-logo-line--second { color: var(--red); font-weight: 500; }
.footer-logo-sub {
  font-size: 8px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--white-dim);
  margin-top: 4px;
  display: block;
  line-height: 1;
}
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-dim);
  transition: color 0.25s;
}
.footer-links a:hover { color: var(--yellow); }
.footer-copy { font-size: 12px; color: #b8b8b8; }
.footer-disclaimer {
  font-size: 11px;
  color: #b8b8b8;
  line-height: 1.5;
  max-width: 720px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-style: italic;
}
.footer-socials { display: flex; gap: 16px; }
.social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s;
}
.social-link:hover { border-color: var(--yellow); }
.social-link svg { width: 15px; height: 15px; stroke: var(--white-dim); fill: none; stroke-width: 1.5; }
.social-link:hover svg { stroke: var(--yellow); }

/* ═══════════════════════════════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
  transition: transform 0.25s, box-shadow 0.25s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37,211,102,0.45); }
.wa-float svg { width: 24px; height: 24px; fill: white; }

/* ═══════════════════════════════════════════════════════════
   ABOUT MODALS (Why me / For which tasks)
   ═══════════════════════════════════════════════════════════ */
.about-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.about-modal.open { display: flex; }
.about-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-modal-box {
  position: relative;
  z-index: 1;
  background: var(--bg2);
  border: 1px solid var(--border2);
  padding: 40px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
}
.about-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 20px;
  cursor: pointer;
}
.about-modal-box h3 {
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 16px;
}
.about-modal-box p {
  font-size: 14px;
  color: var(--white-dim);
  line-height: 1.6;
  margin-bottom: 12px;
}
.about-modal-example {
  font-size: 13px;
  color: var(--yellow);
  letter-spacing: 0.04em;
  font-style: italic;
  margin-bottom: 12px;
}
.about-modal-note {
  font-size: 12px;
  color: var(--white-dim);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-style: italic;
}
.about-facts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.about-fact {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.about-fact-num {
  font-size: 24px;
  color: var(--red);
  opacity: 0.4;
  font-weight: 500;
  line-height: 1;
}
.about-fact-label {
  font-size: 16px;
  color: var(--white);
  font-weight: 500;
  margin-top: 4px;
}
.about-fact-sub {
  font-size: 12px;
  color: var(--white-dim);
  letter-spacing: 0.04em;
}
.about-tasks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.about-task {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 16px;
}
.about-task-head {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 6px;
}
.about-task-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 4px;
}
.about-task-sub {
  font-size: 12px;
  color: var(--white-dim);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .about-tasks { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE-FIRST
   ═══════════════════════════════════════════════════════════ */

/* Base: Mobile (360px+) */
@media (max-width: 767px) {
  section { padding: 80px 0; }
  .container { padding: 0 20px; }

  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-right { display: flex; gap: 12px; }
  .hamburger { display: flex; }
  .lang-switcher { gap: 0; }
  .lang-btn { padding: 4px 6px; font-size: 10px; }

  /* Hero — mobile: video becomes a vertical strip on the right side
     (full block height) with a left-to-right gradient fade so the
     headline + CTAs stay legible. */
  #hero { min-height: 100svh; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; padding: 100px 20px 80px; position: relative; }
  .hero-right {
    order: 0;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    max-height: none;
    pointer-events: none;
    z-index: 1;
  }
  .hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg) 0%, rgba(18,18,18,0.6) 35%, transparent 75%);
    z-index: 2;
  }
  .hero-video-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: 100%;
    border: none;
  }
  .hero-video { width: 100%; height: 100%; object-fit: cover; }
  .hero-video-frame { border: none; }
  .hero-left { position: relative; z-index: 3; }
  .hero-h1 { font-size: clamp(34px, 9vw, 48px); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-arrow { bottom: 16px; width: 38px; height: 38px; z-index: 3; }

  /* Reels Showcase */
  .reels-grid { grid-template-columns: 1fr; gap: 48px; }
  .reels-videos { order: 1; }
  .reels-stats { order: 2; padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 32px; }
  .reels-cards {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .reels-cards::-webkit-scrollbar { display: none; }
  .reels-card {
    flex: 0 0 60%;
    max-width: 220px;
    scroll-snap-align: start;
  }

  /* Selector */
  .selector-grid { grid-template-columns: 1fr; }
  .selector-panel-inner { flex-direction: column; align-items: flex-start; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-item { grid-column: span 1 !important; }

  /* Process */
  .process-steps { grid-template-columns: 1fr; }
  .process-step-num { font-size: 36px; }

  /* Services */
  .services-cta-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .packages-grid { grid-template-columns: 1fr; }
  .mb-grid { grid-template-columns: repeat(2, 1fr); }

  /* Equipment */
  .equipment-inner { grid-template-columns: 1fr; gap: 48px; }
  .why-pro-list { grid-template-columns: 1fr; }
  .deliverables-grid { grid-template-columns: repeat(2, 1fr); }

  /* Content System */
  .cs-flow { flex-direction: column; gap: 8px; }
  .cs-arrow { transform: rotate(90deg); }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-photo-col { order: -1; }
  .about-photo-frame { max-height: 300px; aspect-ratio: 4/3; }
  .about-stats { grid-template-columns: repeat(3, 1fr); }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { flex-wrap: wrap; }

  /* Admin panel */
  .admin-panel { width: 100%; right: -100%; }

  /* ───────────────────────────────────────────────────────
     MOBILE: portfolio metadata + preview
     The overlay is hover-only on desktop — on mobile we move
     the title/tag below the thumbnail and reveal the play
     icon permanently so the card reads as a tappable link.
     ─────────────────────────────────────────────────────── */
  .portfolio-thumb {
    position: relative;
    cursor: pointer;
  }
  .portfolio-overlay {
    position: static;
    opacity: 1;
    background: none;
    padding: 12px 4px 0;
    gap: 4px;
  }
  .portfolio-overlay-title {
    font-size: 14px;
    line-height: 1.3;
    color: var(--white);
  }
  .portfolio-overlay-tag {
    font-size: 9px;
    color: var(--yellow);
  }
  .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
    width: 44px;
    height: 44px;
    border-color: rgba(245,245,245,0.7);
  }
  .play-icon::after {
    border-left-width: 11px;
    border-top-width: 6px;
    border-bottom-width: 6px;
  }

  /* ───────────────────────────────────────────────────────
     MOBILE: mobile menu animation
     The .mobile-menu used to toggle `display: none → flex`
     with no transition. On mobile we render it off-screen
     (still display:flex for layout) and animate
     visibility/opacity through the `.open` class so each
     link fades + slides up.
     ─────────────────────────────────────────────────────── */
  .mobile-menu {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s var(--ease), visibility 0.32s;
    transform: translateY(0);
  }
  .mobile-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-menu a,
  .mobile-menu .mobile-lang,
  .mobile-menu .close-btn {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .mobile-menu.open a,
  .mobile-menu.open .mobile-lang,
  .mobile-menu.open .close-btn {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger the link/CTA entrances — use of-type so the
     close button (first child) doesn't shift the offset. */
  .mobile-menu.open a:nth-of-type(1) { transition-delay: 0.08s; }
  .mobile-menu.open a:nth-of-type(2) { transition-delay: 0.13s; }
  .mobile-menu.open a:nth-of-type(3) { transition-delay: 0.18s; }
  .mobile-menu.open a:nth-of-type(4) { transition-delay: 0.23s; }
  .mobile-menu.open a:nth-of-type(5) { transition-delay: 0.28s; }
  .mobile-menu.open a:nth-of-type(6) { transition-delay: 0.33s; }
  .mobile-menu.open a:nth-of-type(7) { transition-delay: 0.38s; }
  .mobile-menu.open .mobile-lang     { transition-delay: 0.45s; }
  .mobile-menu.open .close-btn       { transition-delay: 0.03s; }

  /* ───────────────────────────────────────────────────────
     MOBILE: footer links — all section links in ONE horizontal
     row. Seven 10px uppercase items fit 390–430px; if a tiny
     viewport overflows, allow a thin horizontal scroll instead
     of wrapping to a second row.
     ─────────────────────────────────────────────────────── */
  .footer-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .footer-links li { flex: 0 0 auto; }
  .footer-links a {
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  /* ───────────────────────────────────────────────────────
     MOBILE: language selector
     The .nav-right wrapper is right-aligned on desktop. On
     narrow viewports we want the lang-switcher centered
     between the logo and the hamburger.
     ─────────────────────────────────────────────────────── */
  .nav-inner {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .nav-right {
    margin-left: auto;
  }
  .lang-switcher {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-right: 6px;
  }
  .lang-btn { padding: 4px 8px; }

  /* Mobile footer logo — keep red word readable when
     stacked (logo colour is part of a different todo). */
  .footer-logo { font-size: 16px; }
  .footer-logo-sub { font-size: 7px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  section { padding: 100px 0; }

  .nav-links { gap: 24px; }
  .hamburger { display: none; }

  .hero-video-bg { width: 45%; }

  .reels-grid { grid-template-columns: 1fr; gap: 48px; }
  .reels-cards { grid-template-columns: repeat(3, 1fr); }

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

  .portfolio-grid { grid-template-columns: repeat(6, 1fr); }

  .process-steps { grid-template-columns: repeat(3, 1fr); }

  .packages-grid { grid-template-columns: repeat(3, 1fr); }
  .mb-grid { grid-template-columns: repeat(4, 1fr); }

  .equipment-inner { grid-template-columns: 1fr; gap: 48px; }

  .cs-flow { flex-wrap: wrap; justify-content: flex-start; }

  .about-grid { grid-template-columns: 1fr; gap: 48px; }

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

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

/* Desktop */
@media (min-width: 1024px) {
  .hamburger { display: none; }

  /* ───────────────────────────────────────────────────────
     DESKTOP HERO — fits the whole first screen
     Shrinks the grid padding + right-side video so the hero
     fully fits 1366×768 / 1440×900 / 1920×1080 without a
     scroll just to see the first block. The video gets the
     same treatment as mobile: no border/frame, a slight zoom
     and a soft left→right gradient fade.
     ─────────────────────────────────────────────────────── */
  .hero-grid {
    padding: clamp(64px, 8vh, 110px) 48px clamp(48px, 6vh, 88px);
  }
  .hero-h1 {
    font-size: clamp(40px, min(5.8vw, 7.5vh), 72px);
  }
  .hero-video-wrap {
    border: none;
    max-width: clamp(360px, 30vw, 480px);
    background: transparent;
  }
  .hero-video-frame { border: none; }
  /* T22: enlarge the video INSIDE the unchanged frame (scale > 1) and
     fade its left edge via a real opacity mask (not a grey overlay). */
  .hero-video {
    transform: scale(1.08);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 12%,
      #000 35%,
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 12%,
      #000 35%,
      #000 100%
    );
  }
  .hero-video-tag { z-index: 3; }

  .reels-cards { grid-template-columns: repeat(3, 1fr); }
  .selector-grid { grid-template-columns: repeat(4, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .packages-grid { grid-template-columns: repeat(3, 1fr); }
  .mb-grid { grid-template-columns: repeat(4, 1fr); }
  .equipment-inner { grid-template-columns: 5fr 7fr; }
  .cs-flow { flex-wrap: nowrap; }
  .about-grid { grid-template-columns: 5fr 7fr; }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 5fr 7fr; }
}

/* Large screens */
@media (min-width: 1280px) {
  .container { padding: 0 48px; }
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Temporary section disable (re-enable by removing .section-disabled class) */
section.section-disabled { display: none !important; }
a[href="#process"].nav-link,
a[href="#process"].menu-link { display: none !important; }
.nav-process-disabled { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   COOKIE NOTICE — implied consent, first visit only
   ═══════════════════════════════════════════════════════════ */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85; /* below wa-float (90), above page content */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(18,18,18,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border2);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--white);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), visibility 0.45s;
}
.cookie-notice--show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.cookie-notice--closing {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
}
.cookie-notice-text {
  margin: 0;
  text-align: center;
  max-width: 760px;
  color: var(--white);
}
.cookie-notice-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border2);
  border-radius: 50%;
  background: transparent;
  color: var(--white-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cookie-notice-close:hover,
.cookie-notice-close:focus-visible {
  color: var(--white);
  border-color: var(--red);
  background: var(--red-dim);
}
.cookie-notice-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 768px) {
  .cookie-notice {
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
  }
  .cookie-notice-text { max-width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-inner { animation: none; }
  .cam-wrap { animation: none; }
  .blob { animation: none !important; }
}


/* LOOKS moved to looks.html (standalone) */