:root {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2.3rem, 1.4rem + 4vw, 4.8rem);
      --text-3xl: clamp(3rem, 1.3rem + 6vw, 6.5rem);
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
      --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
      --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
      --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px;
      --font-body: 'Satoshi', Inter, sans-serif;
      --font-display: 'Clash Display', 'Satoshi', sans-serif;
      --color-bg: #0a0a0b;
      --color-surface: #121214;
      --color-surface-2: #17171b;
      --color-surface-offset: #202026;
      --color-border: rgba(255,255,255,0.11);
      --color-divider: rgba(255,255,255,0.08);
      --color-text: #f2f1ee;
      --color-text-muted: #bab8b3;
      --color-text-faint: #8d8a84;
      --color-text-inverse: #101011;
      --color-gold: #d4a64a;
      --color-orange: #f07a22;
      --color-silver: #c7ccd2;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.22);
      --shadow-md: 0 8px 20px rgba(0,0,0,0.28);
      --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
      --content-default: 1160px;
      --transition: 180ms cubic-bezier(0.16,1,0.3,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100dvh;
      background:
        radial-gradient(circle at top right, rgba(212,166,74,0.18), transparent 30%),
        radial-gradient(circle at 15% 20%, rgba(240,122,34,0.15), transparent 25%),
        linear-gradient(180deg, #09090a 0%, #101012 45%, #0c0c0d 100%);
      color: var(--color-text);
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.6;
    }
    img, svg { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
    :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

    .skip-link {
      position: absolute; left: var(--space-4); top: -100px; z-index: 999;
      background: var(--color-gold); color: var(--color-text-inverse); padding: var(--space-3) var(--space-4); border-radius: var(--radius-full);
    }
    .skip-link:focus { top: var(--space-4); }
    .container { width: min(calc(100% - 2rem), var(--content-default)); margin-inline: auto; }
    .section { padding: clamp(var(--space-12), 8vw, var(--space-24)) 0; position: relative; }
    .section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(212,166,74,0.06) 0%, transparent 70%); pointer-events: none; z-index: -1; }
    #about::before { left: 20%; top: 10%; }
    #services::before { left: 80%; top: 20%; }
    #work::before { left: 30%; top: 40%; }
    #contact::before { left: 50%; top: 50%; width: 500px; height: 500px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
      border: 1px solid rgba(212,166,74,0.24); border-radius: var(--radius-full);
      color: var(--color-gold); background: rgba(212,166,74,0.08); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: var(--space-3);
    }
    .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold), var(--color-orange)); }
    h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.03em; }
    h1 { font-size: var(--text-3xl); max-width: 16ch; }
    h2 { font-size: var(--text-2xl); max-width: 20ch; text-align: center; }
    h3 { font-size: var(--text-lg); }
    p { color: var(--color-text-muted); max-width: 68ch; }

    .header {
      position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px);
      background: rgba(10,10,11,0.78); border-bottom: 1px solid var(--color-divider);
    }
    .header-inner {
      min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    }
    .brand { display: flex; align-items: center; gap: var(--space-3); }
    .brand-mark {
      width: 44px; height: 44px; border-radius: 10px; object-fit: contain;
    }
    .brand-name { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
    .brand-sub { font-size: var(--text-xs); color: var(--color-text-faint); }
    .nav { display: flex; align-items: center; gap: var(--space-6); }
    .nav a { font-size: var(--text-sm); color: var(--color-text-muted); transition: all var(--transition); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); }
    .nav a:hover { color: #1a1a1a; background: linear-gradient(135deg, var(--color-gold), #f0c874 58%, var(--color-orange)); box-shadow: 0 4px 16px rgba(212,166,74,0.3), inset 0 1px 0 rgba(255,255,255,0.25); font-weight: 600; }
    .nav a.active { color: #1a1a1a; background: linear-gradient(135deg, var(--color-gold), #f0c874 58%, var(--color-orange)); box-shadow: 0 4px 16px rgba(212,166,74,0.3), inset 0 1px 0 rgba(255,255,255,0.25); font-weight: 600; }

    .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center; }
    .btn {
      min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
      transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      font-size: var(--text-sm); font-weight: 700;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { border: 1px solid var(--color-gold); background: linear-gradient(135deg, var(--color-gold), #f0c874 58%, var(--color-orange)); color: #1a1a1a; font-weight: 600; box-shadow: 0 4px 16px rgba(212,166,74,0.25); }
    .btn-primary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.2); }
    .btn-secondary { border: 1px solid var(--color-gold); background: linear-gradient(135deg, var(--color-gold), #f0c874 58%, var(--color-orange)); color: #1a1a1a; font-weight: 600; box-shadow: 0 4px 16px rgba(212,166,74,0.25); }
    .btn-secondary:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.2); }
    .btn-whatsapp { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-gold); background: linear-gradient(135deg, var(--color-gold), #f0c874 58%, var(--color-orange)); color: #1a1a1a; font-weight: 600; box-shadow: 0 4px 16px rgba(212,166,74,0.25); }
    .btn-whatsapp:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: #fff; backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.2); }

    .hero { padding: clamp(var(--space-16), 10vw, 8rem) 0 var(--space-16); }
    .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); text-align: center; justify-items: center; }
    .hero-copy { display: grid; gap: var(--space-6); justify-items: center; }
    .hero-copy p { font-size: var(--text-lg); max-width: 42ch; text-align: center; }
    .hero-proof { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-top: var(--space-2); }
    .stat strong { display: block; font-size: var(--text-xl); font-family: var(--font-display); color: var(--color-text); }
    .stat span { font-size: var(--text-sm); color: var(--color-text-muted); }

    .hero-visual {
      position: relative; min-height: 580px; border-radius: 30px; overflow: hidden;
      background:
        radial-gradient(circle at 50% 30%, rgba(212,166,74,0.15), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(240,122,34,0.1), transparent 40%),
        linear-gradient(180deg, #121214 0%, #0a0a0c 100%);
      box-shadow: var(--shadow-lg);
      display: grid; place-items: center;
    }
    .logo-reveal {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5);
    }
    .animated-logo {
      width: clamp(180px, 45vw, 280px); height: auto;
      filter: drop-shadow(0 0 40px rgba(212,166,74,0.4));
      border-radius: 16px;
    }
    .tagline {
      font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-gold);
      letter-spacing: 0.04em;
    }
    .camera-ui {
      position: absolute; inset: 0; padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between;
      background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent 32%, rgba(0,0,0,0.36));
    }
    .camera-top, .camera-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
    .pill {
      display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-full); background: rgba(10,10,11,0.6); border: 1px solid rgba(255,255,255,0.08); font-size: var(--text-xs);
    }
    .record-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-orange); box-shadow: 0 0 16px rgba(240,122,34,0.8); }
    .focus-box { width: 132px; height: 132px; border: 1px solid rgba(255,255,255,0.78); border-radius: 18px; place-self: center; box-shadow: 0 0 0 1px rgba(212,166,74,0.28) inset; }
    .floating-card {
      position: absolute; padding: var(--space-4); border-radius: 20px; backdrop-filter: blur(12px);
      background: rgba(18,18,20,0.82); border: 1px solid rgba(255,255,255,0.09); box-shadow: var(--shadow-md);
    }
    .floating-card.top { top: 26px; left: 24px; }
    .floating-card.bottom { right: 24px; bottom: 22px; }
    .floating-card strong { display: block; font-size: var(--text-sm); color: var(--color-text); }
    .floating-card span { font-size: var(--text-xs); color: var(--color-text-muted); }

    .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .card {
      padding: var(--space-6); border-radius: 24px;
      background: rgba(255,255,255,0.025); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-sm);
    }
    .service-icon {
      width: 54px; height: 54px; border-radius: 16px; margin-bottom: var(--space-4);
      background: linear-gradient(135deg, rgba(212,166,74,0.22), rgba(240,122,34,0.16)); display: grid; place-items: center; color: var(--color-gold);
    }
    .card p { margin-top: var(--space-3); }

    .about-grid, .split, .testimonial { display: grid; gap: var(--space-8); align-items: center; }
    .about-grid { grid-template-columns: 0.92fr 1.08fr; }
    .split { grid-template-columns: 0.95fr 1.05fr; align-items: start; }
    .feature-panel {
      padding: var(--space-8); border-radius: 28px;
      background: rgba(255,255,255,0.035); backdrop-filter: blur(12px);
      border: 1px solid rgba(212,166,74,0.12);
    }
    .feature-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
    .feature-item {
      display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
      padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider);
    }
    .feature-item:last-child { border-bottom: 0; padding-bottom: 0; }
    .feature-bullet {
      width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px;
      background: rgba(199,204,210,0.12); color: var(--color-silver); font-size: var(--text-sm); font-weight: 700;
    }

    .showcase {
      display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5);
    }
    .showcase-main, .showcase-stack > article {
      position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--color-border);
      min-height: 320px; background-size: cover; background-position: center;
    }
    .showcase-main { min-height: 520px; background-image: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.58)), url('https://picsum.photos/seed/motionforge-brand-visuals/1200/900'); }
    .showcase-stack { display: grid; gap: var(--space-5); }
    .showcase-stack article:nth-child(1) { background-image: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.6)), url('https://picsum.photos/seed/motionforge-product-shoot/900/700'); }
    .showcase-stack article:nth-child(2) { background-image: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.6)), url('https://picsum.photos/seed/motionforge-social-reel/900/700'); }
    .overlay-copy { position: absolute; inset: auto 0 0 0; padding: var(--space-6); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.68)); }

    .testimonial {
      grid-template-columns: 1.1fr 0.9fr; padding: var(--space-8); border-radius: 30px; border: 1px solid var(--color-border);
      background: linear-gradient(135deg, rgba(199,204,210,0.06), rgba(240,122,34,0.06));
    }
    blockquote { font-size: var(--text-lg); color: var(--color-text); max-width: 28ch; }
    .client { color: var(--color-text-muted); margin-top: var(--space-4); }
    .testimonial-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
    .metric { padding: var(--space-5); border-radius: 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
    .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-gold); }
    .metric span { color: var(--color-text-muted); font-size: var(--text-sm); }

    .contact-box {
      padding: clamp(var(--space-8), 5vw, var(--space-12)); border-radius: 32px; text-align: center;
      background: radial-gradient(circle at top, rgba(212,166,74,0.2), transparent 35%), linear-gradient(180deg, rgba(24,24,27,0.96), rgba(13,13,15,0.96));
      border: 1px solid rgba(212,166,74,0.18); box-shadow: var(--shadow-lg);
    }
    .contact-box .eyebrow { margin-bottom: var(--space-1); }
    .contact-box p { margin: var(--space-4) auto var(--space-6); }

.footer { padding: var(--space-8) 0 var(--space-10); color: var(--color-text-faint); font-size: var(--text-sm); }
.footer-inner { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--color-divider); padding-top: var(--space-5); }
.footer-contact { display: flex; gap: var(--space-4); align-items: center; }
    .footer-contact a { color: var(--color-text-muted); transition: color var(--transition); display: flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--text-sm); }
    .footer-contact a:hover { color: var(--color-gold); }

    [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms ease; }
    [data-reveal].visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 980px) {
      .hero-grid, .about-grid, .split, .showcase, .testimonial, .services-grid, .video-grid { grid-template-columns: 1fr; }
      .nav { display: none; }
      .hero-visual { min-height: 500px; }
    }
    @media (max-width: 640px) {
      .container { width: min(calc(100% - 1.2rem), var(--content-default)); }
      .card, .feature-panel, .testimonial, .contact-box { padding: var(--space-5); }
      .camera-frame { width: 92%; }
      .floating-card { position: static; margin: var(--space-4); }
      .testimonial-metrics { grid-template-columns: 1fr; }
      .hero-proof { gap: var(--space-4); }
      .video-showcase { grid-template-columns: 1fr; }
      .showcase-text { text-align: center; }
      .showcase-carousel { padding: 0 var(--space-6); min-height: 50vh; }
      .showcase-carousel .carousel-track { min-height: 50vh; }
      .video-slide { width: 85vw; max-height: 50vh; }
      .video-slide.prev { transform: translateX(-45%) scale(0.8); }
      .video-slide.next { transform: translateX(45%) scale(0.8); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      [data-reveal] { opacity: 1; transform: none; }
    }

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

.video-card {
  position: relative; aspect-ratio: 16/9; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface);
  cursor: pointer; transition: transform var(--transition);
}

.video-card:hover { transform: translateY(-4px); }

.video-card video { 
  width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0;
}
.thumbnail { 
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; 
  background: var(--color-surface); display: block;
  z-index: 2;
}
.video-card:hover .thumbnail { opacity: 0.3; }
.play-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.6); opacity: 0; transition: opacity var(--transition);
}
.video-card:hover .play-overlay { opacity: 1; }
.play-icon { width: 64px; height: 64px; color: var(--color-gold); stroke-width: 1.5; }

.video-info {
  position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-6);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
}
.video-info h3 { color: var(--color-text); margin-bottom: var(--space-1); }
.video-info p { color: var(--color-text-muted); font-size: var(--text-xs); }

.video-expand {
  position: absolute; inset: 0; background: var(--color-bg); 
  padding: var(--space-8); display: none; z-index: 10;
}
.video-expand.active { display: flex; flex-direction: column; gap: var(--space-4); }
.video-expand video { flex: 1; border-radius: var(--radius-lg); }

.expand-close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: 24px; line-height: 1;
  display: none; z-index: 15; align-items: center; justify-content: center;
}
.video-card.expanded .expand-close { display: flex; }
.video-info, .play-overlay { transition: opacity var(--transition); }
.video-card.expanded .video-info,
.video-card.expanded .play-overlay { opacity: 0; pointer-events: none; }

.video-showcase {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-10); align-items: center;
}
.showcase-text { display: grid; gap: var(--space-4); }
.text-slide { display: none; gap: var(--space-3); }
.text-slide.active { display: grid; }
.text-slide h3 { font-size: var(--text-xl); color: var(--color-text); }
.text-slide p { font-size: var(--text-base); color: var(--color-text-muted); }

.showcase-carousel {
  position: relative;
  padding: 0 var(--space-12);
  min-height: 60vh;
}

.showcase-carousel .carousel-track {
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 60vh;
}

.video-slide {
  position: absolute;
  width: 70vw;
  max-width: 320px;
  aspect-ratio: 9/16;
  max-height: 60vh;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transition: all 600ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateX(0) scale(1);
  z-index: 1;
}

.video-slide.active {
  opacity: 1;
  z-index: 3;
  box-shadow: 0 25px 50px rgba(0,0,0,0.45);
}
.video-slide.prev {
  transform: translateX(-50%) scale(0.8);
  opacity: 0.55;
  z-index: 2;
}
.video-slide.next {
  transform: translateX(50%) scale(0.8);
  opacity: 0.55;
  z-index: 2;
}
.video-slide.prev-2,
.video-slide.next-2 {
  transform: translateX(-110%) scale(0.72);
  opacity: 0;
  z-index: 0;
}
.video-slide video { width: 100%; height: 100%; object-fit: cover; 
  opacity: 0.6;
  z-index: 1;
}
.video-slide.next-2 {
  transform: translateX(120%) scale(0.75);
  opacity: 0;
  z-index: 0;
}

.carousel-dots {
  display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-6);
}
.carousel-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-border); border: none; padding: 0;
  transition: background var(--transition), transform var(--transition);
}
.carousel-dots button.active {
  background: var(--color-gold); transform: scale(1.2);
}

.mute-btn {
  position: absolute; bottom: var(--space-4); right: var(--space-4); z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--transition);
}
.mute-btn:hover { background: rgba(0,0,0,0.8); }