/* =========================================================
   AHRON LUCCAS — PORTFOLIO
   ========================================================= */

:root {
  --background: #080808;
  --surface: #0b0b0b;

  --text: #f4f4f4;
  --muted: #858585;

  --border:
    rgba(255, 255, 255, 0.12);

  --blue: #2f7cff;
}


/* =========================================================
   RESET
   ========================================================= */

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 100;

  width: 100%;

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

  padding:
    26px
    4vw;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 8, 8, 0.94),
      rgba(8, 8, 8, 0.58) 60%,
      transparent
    );

  backdrop-filter:
    blur(8px);
}

.logo {
  color: var(--text);

  text-decoration: none;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.nav-links {
  display: flex;

  gap: 36px;
}

.nav-links a {
  color: var(--muted);

  text-decoration: none;

  font-size: 13px;

  transition:
    color 0.3s ease;
}

.nav-links a:hover {
  color: var(--text);
}

.language-toggle {
  padding:
    9px
    14px;

  border:
    1px solid
    var(--border);

  border-radius: 999px;

  background: transparent;

  color: var(--text);

  cursor: pointer;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.language-toggle:hover {
  background: var(--text);

  color: var(--background);

  border-color: var(--text);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  width: 100%;
  max-width: 1700px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  align-items: center;

  gap:
    clamp(
      45px,
      5vw,
      90px
    );

  padding:
    125px
    5vw
    65px;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.hero-copy {
  position: relative;

  z-index: 2;

  max-width: 620px;

  animation:
    heroCopyIn
    1.35s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    both;
}

.hero-topline {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-bottom: 28px;

  font-size: 11px;

  letter-spacing: 0.12em;
}

.hero-role {
  color: var(--blue);

  font-weight: 700;
}

.availability {
  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--muted);
}

.availability i {
  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #65ff90;

  box-shadow:
    0 0 12px
    rgba(
      101,
      255,
      144,
      0.55
    );
}

.hero-name {
  font-size:
    clamp(
      60px,
      6.2vw,
      104px
    );

  line-height: 0.82;

  letter-spacing: -0.065em;

  font-weight: 700;
}

.hero-tagline {
  max-width: 440px;

  margin-top: 32px;

  color: #d6d6d6;

  font-size:
    clamp(
      18px,
      1.5vw,
      24px
    );

  line-height: 1.25;
}

.hero-categories {
  margin-top: 28px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 11px;

  color: var(--muted);

  font-size: 10px;

  letter-spacing: 0.13em;
}

.hero-categories i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--blue);
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {
  margin-top: 36px;

  display: flex;
  align-items: center;

  gap: 12px;
}

.button {
  min-height: 48px;

  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 22px;

  padding:
    0
    20px;

  border-radius: 999px;

  font-family: inherit;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.07em;

  cursor: pointer;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.button b {
  font-size: 15px;

  font-weight: 400;
}

.button-primary {
  border:
    1px solid
    var(--blue);

  background: var(--blue);

  color: #ffffff;
}

.button-primary:hover {
  transform:
    translateY(-3px);

  border-color: #ffffff;

  background: #ffffff;

  color: #050505;

  box-shadow:
    0 12px 35px
    rgba(
      47,
      124,
      255,
      0.15
    );
}

.button-secondary {
  border:
    1px solid
    var(--border);

  background: transparent;

  color: var(--text);
}

.button-secondary:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(
      255,
      255,
      255,
      0.4
    );

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
  position: relative;

  width: 100%;

  min-height: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  animation:
    heroVisualIn
    1.5s
    0.18s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    )
    both;
}

.hero .reel-placeholder {
  position: relative;

  width: 100%;
  max-width: 850px;

  margin-left: auto;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 72% 20%,
      rgba(
        47,
        124,
        255,
        0.26
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #151515,
      #090909 60%
    );

  box-shadow:
    0 35px 100px
    rgba(
      0,
      0,
      0,
      0.45
    );

  cursor: pointer;

  transition:
    transform 0.5s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    border-color 0.4s ease,
    box-shadow 0.5s ease;
}

.hero .reel-placeholder:hover {
  transform:
    translateY(-6px)
    scale(1.008);

  border-color:
    rgba(
      47,
      124,
      255,
      0.62
    );

  box-shadow:
    0 42px 110px
    rgba(
      0,
      0,
      0,
      0.58
    ),
    0 0 38px
    rgba(
      47,
      124,
      255,
      0.07
    );
}


/* =========================================================
   HERO BACKGROUND DETAILS
   ========================================================= */

.hero .reel-placeholder::before {
  content: "";

  position: absolute;

  z-index: 0;

  width: 430px;
  height: 430px;

  top: -220px;
  right: -120px;

  border-radius: 50%;

  background:
    rgba(
      47,
      124,
      255,
      0.2
    );

  filter:
    blur(90px);

  pointer-events: none;

  animation:
    reelGlow
    10s
    ease-in-out
    infinite
    alternate;
}

.hero .reel-placeholder::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(
        255,
        255,
        255,
        0.035
      )
      1px,
      transparent
      1px
    ),
    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.035
      )
      1px,
      transparent
      1px
    );

  background-size:
    55px
    55px;

  pointer-events: none;
}


/* =========================================================
   HERO SHOWREEL
   ========================================================= */

.hero-showreel {
  isolation: isolate;
}

.hero-showreel-stack {
  position: absolute;

  inset:
    72px
    55px
    60px;

  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;
}


/* CARD */

.hero-showreel-card {
  position: absolute;

  height: 66%;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 17px;

  background: #111111;

  box-shadow:
    0 24px 55px
    rgba(
      0,
      0,
      0,
      0.48
    );

  transform-origin: center;

  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.hero-showreel-card video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform:
    scale(1.015);
}

.hero-showreel-card::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(
        0,
        0,
        0,
        0.02
      ),
      rgba(
        0,
        0,
        0,
        0.16
      )
    );
}


/* MAIN */

.hero-showreel-card-main {
  z-index: 3;

  height: 78%;

  border-color:
    rgba(
      255,
      255,
      255,
      0.24
    );

  box-shadow:
    0 30px 70px
    rgba(
      0,
      0,
      0,
      0.58
    );

  animation:
    heroReelMainFloat
    7s
    ease-in-out
    infinite
    alternate;
}


/* LEFT */

.hero-showreel-card-left {
  z-index: 1;

  height: 63%;

  filter:
    brightness(0.72)
    saturate(0.82);

  animation:
    heroReelLeftFloat
    8.5s
    ease-in-out
    infinite
    alternate;
}


/* RIGHT */

.hero-showreel-card-right {
  z-index: 2;

  height: 65%;

  filter:
    brightness(0.78)
    saturate(0.86);

  animation:
    heroReelRightFloat
    9s
    ease-in-out
    infinite
    alternate;
}


/* LABEL */

.hero-showreel-label {
  position: absolute;

  top: 26px;
  left: 28px;

  z-index: 4;

  display: flex;

  flex-direction: column;

  pointer-events: none;
}

.hero-showreel-label span {
  margin-bottom: 5px;

  color: var(--blue);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.18em;
}

.hero-showreel-label strong {
  color: var(--text);

  font-size:
    clamp(
      19px,
      1.7vw,
      28px
    );

  line-height: 1;

  letter-spacing: -0.045em;
}


/* FOOTER */

.reel-footer {
  position: absolute;

  left: 28px;
  right: 28px;
  bottom: 26px;

  z-index: 4;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: 0.12em;

  pointer-events: none;
}


/* SHOWREEL HOVER */

.hero-showreel:hover
.hero-showreel-card {
  border-color:
    rgba(
      255,
      255,
      255,
      0.22
    );
}

.hero-showreel:hover
.hero-showreel-card-main {
  border-color:
    rgba(
      47,
      124,
      255,
      0.65
    );

  box-shadow:
    0 34px 80px
    rgba(
      0,
      0,
      0,
      0.62
    ),
    0 0 35px
    rgba(
      47,
      124,
      255,
      0.08
    );
}


/* =========================================================
   SELECTED REELS
   ========================================================= */

.reels-section {
  position: relative;

  padding:
    58px
    5vw
    120px;

  background:
    linear-gradient(
      180deg,
      #080808 0%,
      #0a0a0a 8%,
      #0b0b0b 22%,
      #0b0b0b 100%
    );
}

.reels-heading {
  width: 100%;
  max-width: 1040px;

  margin:
    0 auto 40px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;

  gap: 48px;
}

.section-kicker {
  display: block;

  margin-bottom: 12px;

  color: var(--blue);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.16em;
}

.reels-heading h2 {
  font-size:
    clamp(
      42px,
      4vw,
      62px
    );

  line-height: 0.95;

  letter-spacing: -0.055em;
}

.reels-heading p {
  justify-self: end;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.5;

  text-align: right;

  white-space: nowrap;

  padding-bottom: 4px;
}


/* =========================================================
   REELS GRID
   ========================================================= */

.reels-grid {
  width: 100%;
  max-width: 1040px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      230px
    );

  justify-content:
    space-between;

  gap:
    42px
    0;
}

.reel-card {
  width: 100%;
  max-width: 230px;

  min-width: 0;
}

.reel-card[data-video] {
  cursor: pointer;
}


/* MEDIA */

.reel-media {
  position: relative;

  width: 100%;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius: 15px;

  background: #111111;

  box-shadow:
    0 20px 45px
    rgba(
      0,
      0,
      0,
      0.2
    );

  transition:
    transform 0.4s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    border-color 0.35s ease,
    box-shadow 0.4s ease;
}

.reel-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform:
    scale(1.01);

  transition:
    transform 0.6s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.reel-card:hover
.reel-media {
  transform:
    translateY(-5px)
    scale(1.008);

  border-color:
    rgba(
      47,
      124,
      255,
      0.55
    );

  box-shadow:
    0 26px 55px
    rgba(
      0,
      0,
      0,
      0.35
    ),
    0 0 18px
    rgba(
      47,
      124,
      255,
      0.05
    );
}

.reel-card:hover
.reel-video {
  transform:
    scale(1.03);
}


/* PLACEHOLDERS */

.reel-media.reel-placeholder {
  background: #111111;
}

.medical-placeholder {
  background:
    radial-gradient(
      circle at 65% 25%,
      rgba(
        47,
        124,
        255,
        0.32
      ),
      transparent 42%
    ),
    #101010 !important;
}

.talking-placeholder {
  background:
    linear-gradient(
      155deg,
      #181818,
      #090909 70%
    ) !important;
}

.irl-placeholder {
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(
        47,
        124,
        255,
        0.22
      ),
      transparent 40%
    ),
    #111111 !important;
}

.gaming-placeholder {
  background:
    linear-gradient(
      155deg,
      #080808,
      #102143
    ) !important;
}

.event-placeholder {
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(
        47,
        124,
        255,
        0.3
      ),
      transparent 40%
    ),
    #0b0b0b !important;
}


/* CARD OVERLAYS */

.reel-card .reel-number {
  position: absolute;

  top: 14px;
  left: 14px;

  z-index: 3;

  color:
    rgba(
      255,
      255,
      255,
      0.52
    );

  font-size: 9px;

  letter-spacing: 0.12em;
}

.reel-play {
  position: absolute;

  right: 12px;
  bottom: 12px;

  z-index: 3;

  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      0.42
    );

  backdrop-filter:
    blur(10px);

  color: #ffffff;

  font-size: 10px;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    opacity 0.3s ease;
}

.reel-card:hover
.reel-play {
  transform:
    scale(1.08);

  background: var(--blue);
}

.reel-card:has(.reel-video):hover
.reel-play {
  opacity: 0;
}


/* INFO */

.reel-info {
  margin-top: 11px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 10px;
}

.reel-category {
  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.reel-info h3 {
  font-size: 17px;

  line-height: 1.15;

  letter-spacing: -0.03em;

  font-weight: 500;
}

.reel-arrow {
  color: var(--muted);

  font-size: 17px;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.reel-card:hover
.reel-arrow {
  color: var(--blue);

  transform:
    translate(
      3px,
      -3px
    );
}


/* =========================================================
   STATS / CREDIBILITY
   ========================================================= */

.stats-section {
  padding:
    105px
    5vw
    120px;

  background:
    linear-gradient(
      180deg,
      #0b0b0b 0%,
      #090909 100%
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);
}

.stats-shell {
  width: 100%;
  max-width: 1040px;

  margin: 0 auto;
}

.stats-heading {
  margin-bottom: 42px;
}

.stats-heading h2 {
  max-width: 700px;

  font-size:
    clamp(
      40px,
      4vw,
      62px
    );

  line-height: 0.96;

  letter-spacing: -0.055em;
}

.stats-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;
}

.stat-card {
  min-height: 190px;

  padding: 26px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.01)
    );

  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    background 0.35s ease;
}

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

  border-color:
    rgba(47, 124, 255, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(47, 124, 255, 0.07),
      rgba(255, 255, 255, 0.015)
    );
}

.stat-card strong {
  color: var(--text);

  font-size:
    clamp(
      42px,
      4.5vw,
      68px
    );

  line-height: 0.9;

  letter-spacing: -0.06em;
}

.stat-card span {
  max-width: 220px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.5;
}

.stat-card:nth-child(1) {
  transition-delay: 0.04s;
}

.stat-card:nth-child(2) {
  transition-delay: 0.09s;
}

.stat-card:nth-child(3) {
  transition-delay: 0.14s;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-section {
  padding:
    110px
    5vw
    125px;

  background:
    linear-gradient(
      180deg,
      #090909 0%,
      #080808 100%
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);
}

.about-shell {
  width: 100%;
  max-width: 1040px;

  margin: 0 auto;
}

.about-heading {
  max-width: 780px;

  margin-bottom: 52px;
}

.about-heading h2 {
  font-size:
    clamp(
      42px,
      4vw,
      64px
    );

  line-height: 0.96;

  letter-spacing: -0.055em;
}

.about-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 410px);

  align-items: stretch;

  gap: 54px;
}

.about-copy {
  display: flex;
  flex-direction: column;

  justify-content: center;
}

.about-lead {
  max-width: 600px;

  color: var(--text);

  font-size:
    clamp(
      22px,
      2vw,
      31px
    );

  line-height: 1.25;

  letter-spacing: -0.025em;
}

.about-text {
  max-width: 590px;

  margin-top: 24px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.7;
}

.about-points {
  margin-top: 38px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.about-point {
  min-height: 58px;

  display: grid;

  grid-template-columns:
    42px
    1fr;

  align-items: center;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}

.about-point span {
  color: var(--blue);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.14em;
}

.about-point p {
  color: #d9d9d9;

  font-size: 13px;

  letter-spacing: 0.01em;
}

.about-visual {
  min-width: 0;
}

.about-portrait-slot {
  position: relative;

  width: 100%;
  min-height: 480px;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 30px;

  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 78% 18%,
      rgba(47, 124, 255, 0.28),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #151515,
      #090909 68%
    );

  box-shadow:
    0 30px 85px
    rgba(0, 0, 0, 0.35);
}

.about-portrait-slot::after {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  pointer-events: none;
}

.about-portrait-kicker,
.about-portrait-slot strong,
.about-portrait-footer {
  position: relative;

  z-index: 2;
}

.about-portrait-kicker {
  margin-bottom: 12px;

  color: var(--blue);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.18em;
}

.about-portrait-slot strong {
  font-size:
    clamp(
      48px,
      4.5vw,
      72px
    );

  line-height: 0.86;

  letter-spacing: -0.06em;
}

.about-portrait-footer {
  position: absolute;

  left: 30px;
  right: 30px;
  bottom: 28px;

  display: flex;
  justify-content: space-between;

  gap: 16px;

  color: var(--muted);

  font-size: 8px;

  letter-spacing: 0.12em;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.scroll-reveal {
  opacity: 0;

  transform:
    translateY(55px)
    scale(0.985);

  transition:
    opacity 0.9s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    ),
    transform 0.9s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.scroll-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

.reel-card:nth-child(1) {
  transition-delay: 0.04s;
}

.reel-card:nth-child(2) {
  transition-delay: 0.09s;
}

.reel-card:nth-child(3) {
  transition-delay: 0.14s;
}

.reel-card:nth-child(4) {
  transition-delay: 0.19s;
}

.reel-card:nth-child(5) {
  transition-delay: 0.08s;
}

.reel-card:nth-child(6) {
  transition-delay: 0.13s;
}


/* =========================================================
   VIDEO MODAL
   ========================================================= */

.video-modal {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 28px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.video-modal.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.video-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.82
    );

  backdrop-filter:
    blur(18px);
}

.video-modal-dialog {
  position: relative;

  z-index: 2;

  width: min(
    92vw,
    980px
  );

  max-height: 92vh;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 24px;

  background:
    rgba(
      12,
      12,
      12,
      0.96
    );

  box-shadow:
    0 40px 120px
    rgba(
      0,
      0,
      0,
      0.7
    );

  transform:
    translateY(25px)
    scale(0.97);

  transition:
    transform 0.4s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.video-modal.is-open
.video-modal-dialog {
  transform:
    translateY(0)
    scale(1);
}

.video-modal-actions {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 5;

  display: flex;
  align-items: center;

  gap: 10px;
}


.video-modal-language {
  height: 42px;

  padding:
    0
    16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 999px;

  background:
    rgba(0, 0, 0, 0.55);

  color: #ffffff;

  font-family: inherit;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.video-modal-language:hover {
  transform:
    translateY(-1px);

  background: #ffffff;

  color: #080808;

  border-color: #ffffff;
}


.video-modal-close {
  position: static;

  width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.55);

  color: #ffffff;

  font-size: 24px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.video-modal-close:hover {
  transform:
    scale(1.06);

  background: var(--blue);
}

.video-modal-content {
  display: grid;

  grid-template-columns:
    minmax(
      300px,
      430px
    )
    1fr;

  align-items: center;

  gap: 42px;

  padding:
    34px;
}

.video-modal-player {
  width: 100%;

  max-height: 82vh;

  aspect-ratio: 9 / 16;

  overflow: hidden;

  border-radius: 18px;

  background: #000000;

  box-shadow:
    0 30px 80px
    rgba(
      0,
      0,
      0,
      0.5
    );
}

.video-modal-player video {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  background: #000000;
}

.video-modal-info {
  width: 100%;

  align-self: center;

  display: flex;
  flex-direction: column;

  padding:
    30px
    28px
    30px
    0;
}

.video-modal-category {
  display: block;

  margin-bottom: 12px;

  color: var(--blue);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.18em;
}


.video-modal-info h2 {
  max-width: 430px;

  font-size:
    clamp(
      38px,
      4vw,
      58px
    );

  line-height: 0.92;

  letter-spacing: -0.055em;

  margin-bottom: 24px;
}


.video-modal-description {
  max-width: 430px;

  color: #a7a7a7;

  font-size: 15px;

  line-height: 1.65;

  margin-bottom: 34px;
}


.video-modal-services {
  display: flex;
  flex-direction: column;

  gap: 12px;

  margin-bottom: 28px;
}


.video-modal-focus {
  display: flex;
  flex-direction: column;

  gap: 10px;

  margin-bottom: 28px;
}


.video-modal-focus-text {
  color: #d8d8d8;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.12em;
}


.video-modal-info h2 {
  min-height: 1.85em;
}


.video-modal-description {
  min-height: 3.3em;
}


.video-modal-label {
  color: var(--muted);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.18em;
}


.video-modal-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}


.video-modal-tag {
  display: inline-flex;

  align-items: center;

  min-height: 32px;

  padding:
    0
    12px;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.035);

  color: #d8d8d8;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.06em;

  white-space: nowrap;
}


.video-modal-format {
  margin-top: auto;

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.14em;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes heroCopyIn {

  from {
    opacity: 0;

    transform:
      translateY(55px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

@keyframes heroVisualIn {

  from {
    opacity: 0;

    transform:
      translateX(80px)
      scale(0.94);
  }

  to {
    opacity: 1;

    transform:
      translateX(0)
      scale(1);
  }

}

@keyframes reelGlow {

  from {
    transform:
      translate(0, 0)
      scale(1);
  }

  to {
    transform:
      translate(
        -100px,
        120px
      )
      scale(1.35);
  }

}

@keyframes heroReelMainFloat {

  from {
    transform:
      translateY(-4px)
      scale(1);
  }

  to {
    transform:
      translateY(5px)
      scale(1.008);
  }

}

@keyframes heroReelLeftFloat {

  from {
    transform:
      translateX(-82%)
      translateY(5px)
      rotate(-6deg);
  }

  to {
    transform:
      translateX(-86%)
      translateY(-4px)
      rotate(-7deg);
  }

}

@keyframes heroReelRightFloat {

  from {
    transform:
      translateX(82%)
      translateY(-4px)
      rotate(6deg);
  }

  to {
    transform:
      translateX(86%)
      translateY(5px)
      rotate(7deg);
  }

}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media (max-width: 1100px) {

  .reels-grid {
    max-width: 690px;

    grid-template-columns:
      repeat(
        3,
        210px
      );

    justify-content: center;

    gap:
      38px
      30px;
  }

  .reel-card {
    max-width: 210px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .navbar {
    padding:
      22px
      20px;
  }

  .nav-links {
    display: none;
  }


  .hero {
    grid-template-columns: 1fr;

    gap: 55px;

    padding:
      130px
      20px
      70px;
  }

  .hero-copy {
    max-width: 100%;
  }

  .hero-topline {
    gap: 12px;

    margin-bottom: 26px;
  }

  .hero-name {
    font-size:
      clamp(
        60px,
        19vw,
        96px
      );
  }

  .hero-tagline {
    margin-top: 24px;
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .hero-visual {
    min-height: 0;
  }

  .hero .reel-placeholder {
    margin-left: 0;

    aspect-ratio: 4 / 3;

    border-radius: 15px;
  }

  .hero-showreel-stack {
    inset:
      62px
      35px
      52px;
  }

  .hero-showreel-card-main {
    height: 74%;
  }

  .hero-showreel-card-left {
    height: 60%;
  }

  .hero-showreel-card-right {
    height: 62%;
  }


  .reels-section {
    padding:
      75px
      20px
      110px;
  }

  .reels-heading {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 20px;

    margin-bottom: 42px;
  }

  .reels-heading p {
    width: 100%;
    max-width: 520px;

    justify-self: start;

    text-align: left;

    white-space: normal;

    padding-bottom: 0;
  }

  .reels-grid {
    max-width: 500px;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          190px
        )
      );

    justify-content: center;

    gap:
      36px
      22px;
  }

  .reel-card {
    max-width: 190px;
  }


  .about-section {
    padding:
      90px
      20px
      105px;
  }

  .about-heading {
    margin-bottom: 38px;
  }

  .about-grid {
    grid-template-columns: 1fr;

    gap: 36px;
  }

  .about-copy {
    max-width: 680px;
  }

  .about-portrait-slot {
    min-height: 390px;
  }


  .video-modal-content {
    grid-template-columns: 1fr;

    justify-items: center;

    gap: 24px;

    padding:
      26px;
  }

  .video-modal-player {
    width: min(
      72vw,
      360px
    );
  }

  .video-modal-info {
    width: 100%;

    padding-bottom: 0;
  }


  .stats-section {
    padding:
      85px
      20px
      100px;
  }

  .stats-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .stat-card {
    min-height: 150px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .hero {
    gap: 42px;

    padding:
      118px
      16px
      58px;
  }

  .hero-name {
    font-size:
      clamp(
        56px,
        19vw,
        82px
      );
  }

  .hero-tagline {
    max-width: 330px;

    font-size: 18px;

    line-height: 1.3;
  }

  .hero-categories {
    max-width: 320px;

    gap:
      9px
      10px;

    line-height: 1.7;
  }

  .hero-actions {
    gap: 10px;
  }

  .button {
    min-height: 46px;

    padding:
      0
      16px;

    gap: 18px;
  }

  .hero .reel-placeholder {
    width: 100%;
    max-width: 100%;

    aspect-ratio: 4 / 3;

    border-radius: 14px;
  }

  .hero-showreel-stack {
    inset:
      55px
      18px
      48px;
  }

  .hero-showreel-card-main {
    height: 72%;
  }

  .hero-showreel-card-left {
    height: 57%;
  }

  .hero-showreel-card-right {
    height: 59%;
  }

  .hero-showreel-label {
    top: 18px;
    left: 18px;
  }

  .hero-showreel-label strong {
    font-size: 19px;
  }

  .reel-footer {
    left: 18px;
    right: 18px;
    bottom: 18px;

    gap: 12px;

    font-size: 8px;
  }


  .reels-section {
    padding:
      64px
      16px
      90px;
  }

  .section-kicker {
    font-size: 9px;

    letter-spacing: 0.14em;
  }

  .reels-heading {
    gap: 16px;

    margin-bottom: 34px;
  }

  .reels-heading h2 {
    font-size:
      clamp(
        38px,
        12vw,
        50px
      );
  }

  .reels-heading p {
    max-width: 340px;

    font-size: 13px;

    line-height: 1.5;
  }

  .reels-grid {
    width: 100%;
    max-width: 380px;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    justify-content: center;

    gap:
      30px
      12px;
  }

  .reel-card {
    width: 100%;
    max-width: none;
  }

  .reel-media {
    border-radius: 12px;
  }

  .reel-info {
    margin-top: 9px;

    gap: 8px;
  }

  .reel-category {
    margin-bottom: 4px;

    font-size: 7px;
  }

  .reel-info h3 {
    font-size: 14px;

    line-height: 1.15;
  }

  .reel-arrow {
    font-size: 15px;
  }

  .reel-play {
    width: 32px;
    height: 32px;

    right: 10px;
    bottom: 10px;
  }


  .stats-section {
    padding:
      70px
      16px
      85px;
  }

  .stats-heading {
    margin-bottom: 30px;
  }

  .stats-heading h2 {
    font-size:
      clamp(
        36px,
        11vw,
        48px
      );
  }

  .stat-card {
    min-height: 132px;

    padding: 22px;
  }

  .stat-card strong {
    font-size: 46px;
  }


  .about-section {
    padding:
      78px
      16px
      90px;
  }

  .about-heading {
    margin-bottom: 32px;
  }

  .about-heading h2 {
    font-size:
      clamp(
        38px,
        12vw,
        50px
      );
  }

  .about-lead {
    font-size: 22px;
  }

  .about-text {
    font-size: 14px;
  }

  .about-points {
    margin-top: 30px;
  }

  .about-portrait-slot {
    min-height: 330px;

    padding: 22px;

    border-radius: 16px;
  }

  .about-portrait-footer {
    left: 22px;
    right: 22px;
    bottom: 20px;
  }


  .video-modal {
    padding: 12px;
  }

  .video-modal-dialog {
    width: 100%;

    border-radius: 18px;
  }

  .video-modal-content {
    padding:
      18px;

    gap: 18px;
  }

  .video-modal-player {
    width: min(
      72vw,
      300px
    );
  }

    .video-modal-actions {
    top: 10px;
    right: 10px;

    gap: 8px;
  }

  .video-modal-language {
    height: 38px;

    padding:
      0
      13px;

    font-size: 10px;
  }

  .video-modal-close {
    width: 38px;
    height: 38px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/* =========================================================
   ANCHORS
   ========================================================= */

#work,
#about,
#contact {
  scroll-margin-top: 90px;
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

body,
body * {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

img,
video {
  -webkit-user-drag: none;
}

/* =========================================================
   ABOUT — PORTRAIT IMAGE
   ========================================================= */

.about-portrait-slot {
  justify-content: flex-start;
  background: #0d0d0d;
}

.about-portrait-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.01);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-portrait-slot:hover .about-portrait-image {
  transform: scale(1.035);
}

.about-portrait-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.02) 40%,
      rgba(0, 0, 0, 0.76) 100%
    );
  pointer-events: none;
}

.about-portrait-kicker {
  position: absolute;
  top: 28px;
  left: 30px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
  color: #ffffff;
}

.about-portrait-slot > strong {
  display: none;
}

.about-portrait-footer {
  z-index: 3;
  color: rgba(255, 255, 255, 0.74);
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {
  padding: 110px 5vw 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(47, 124, 255, 0.13),
      transparent 30%
    ),
    #080808;
}

.contact-shell {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.contact-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: 42px;
  margin-bottom: 46px;
}

.contact-heading .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: -20px;
}

.contact-heading h2 {
  max-width: 670px;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

.contact-heading p {
  justify-self: end;
  max-width: 390px;
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  text-align: right;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.contact-card {
  min-height: 190px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.01)
    );
  color: var(--text);
  text-decoration: none;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.contact-card:hover {
  transform: translateY(-5px);
  border-color: rgba(47, 124, 255, 0.55);
  background:
    linear-gradient(
      145deg,
      rgba(47, 124, 255, 0.10),
      rgba(255, 255, 255, 0.015)
    );
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.contact-card-copy {
  min-width: 0;
}

.contact-platform {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.contact-card strong {
  display: block;
  max-width: 220px;
  color: var(--text);
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.contact-card small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.contact-arrow {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 20px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.contact-card:hover .contact-arrow {
  color: var(--blue);
  transform: translate(3px, -3px);
}

.contact-card:nth-child(1) {
  transition-delay: 0.04s;
}

.contact-card:nth-child(2) {
  transition-delay: 0.09s;
}

.contact-card:nth-child(3) {
  transition-delay: 0.14s;
}

.contact-bottom {
  margin-top: 74px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.13em;
}

@media (max-width: 900px) {
  .contact-section {
    padding: 90px 20px 36px;
  }

  .contact-heading {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 38px;
  }

  .contact-heading .section-kicker {
    grid-column: auto;
    margin-bottom: 0;
  }

  .contact-heading p {
    justify-self: start;
    max-width: 520px;
    text-align: left;
  }

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

  .contact-card {
    min-height: 140px;
  }
}

@media (max-width: 520px) {
  .about-portrait-kicker {
    top: 18px;
    left: 18px;
  }

  .about-portrait-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }

  .contact-section {
    padding: 78px 16px 30px;
  }

  .contact-heading {
    margin-bottom: 30px;
  }

  .contact-heading h2 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .contact-heading p {
    font-size: 13px;
  }

  .contact-card {
    min-height: 128px;
    padding: 20px;
    border-radius: 15px;
  }

  .contact-card strong {
    font-size: 19px;
  }

  .contact-bottom {
    margin-top: 52px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* =========================================================
   V5 — INTERACTIVE VISUAL SYSTEM
   ========================================================= */

:root {
  --mouse-x: 50vw;
  --mouse-y: 32vh;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  --portrait-shift: 0px;
}

body {
  position: relative;
  background: #050607;
}

main {
  position: relative;
  z-index: 1;
}

.ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(
      circle 520px at var(--mouse-x) var(--mouse-y),
      rgba(47, 124, 255, 0.11),
      transparent 68%
    ),
    radial-gradient(
      circle at 84% 16%,
      rgba(28, 78, 162, 0.08),
      transparent 30%
    ),
    linear-gradient(180deg, #070809 0%, #050607 100%);
}

.ambient-background::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.18;
  will-change: transform;
}

.ambient-orb-one {
  width: 540px;
  height: 540px;
  top: 8%;
  right: -180px;
  background: rgba(47, 124, 255, 0.44);
  animation: ambientFloatOne 17s ease-in-out infinite alternate;
}

.ambient-orb-two {
  width: 430px;
  height: 430px;
  top: 46%;
  left: -180px;
  background: rgba(32, 89, 184, 0.28);
  animation: ambientFloatTwo 21s ease-in-out infinite alternate;
}

.ambient-orb-three {
  width: 360px;
  height: 360px;
  bottom: -120px;
  right: 18%;
  background: rgba(47, 124, 255, 0.20);
  animation: ambientFloatThree 19s ease-in-out infinite alternate;
}

@keyframes ambientFloatOne {
  from { transform: translate3d(0, -40px, 0) scale(0.92); }
  to { transform: translate3d(-150px, 120px, 0) scale(1.12); }
}

@keyframes ambientFloatTwo {
  from { transform: translate3d(-40px, 0, 0) scale(1); }
  to { transform: translate3d(170px, -80px, 0) scale(1.18); }
}

@keyframes ambientFloatThree {
  from { transform: translate3d(0, 0, 0) scale(0.9); }
  to { transform: translate3d(110px, -120px, 0) scale(1.15); }
}

/* Keep sections transparent enough for the ambient layer to breathe. */
.reels-section,
.stats-section,
.about-section,
.contact-section {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.reels-section::after,
.stats-section::after,
.about-section::after,
.contact-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.reels-section::after {
  background:
    radial-gradient(circle at 72% 12%, rgba(47,124,255,0.055), transparent 28%),
    linear-gradient(180deg, rgba(7,8,9,0.48), rgba(5,6,7,0.2));
}

.stats-section::after {
  background:
    radial-gradient(circle at 20% 56%, rgba(47,124,255,0.075), transparent 30%),
    linear-gradient(180deg, rgba(5,6,7,0.18), rgba(5,6,7,0.42));
}

.about-section::after {
  background:
    radial-gradient(circle at 78% 48%, rgba(47,124,255,0.06), transparent 28%),
    linear-gradient(180deg, rgba(5,6,7,0.28), rgba(5,6,7,0.18));
}

.contact-section::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(47,124,255,0.11), transparent 28%),
    linear-gradient(180deg, rgba(5,6,7,0.12), rgba(5,6,7,0.46));
}

/* =========================================================
   V5 — NAVIGATION STATE
   ========================================================= */

.nav-links a {
  position: relative;
  padding: 8px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--blue);
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(47,124,255,0.55);
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
}

.nav-links a.is-active {
  color: var(--text);
}

.nav-links a.is-active::after {
  width: 18px;
}

.navbar.is-scrolled {
  background: rgba(6, 7, 8, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
}

/* =========================================================
   V5 — HERO ENERGY
   ========================================================= */

.hero {
  min-height: min(760px, 88vh);
}

.hero::before {
  content: "";
  position: absolute;
  left: 2vw;
  top: 26%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(47,124,255,0.08);
  filter: blur(90px);
  pointer-events: none;
}

.hero-name {
  background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 72%, #b9c4d8 150%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 24px 80px rgba(0,0,0,0.26);
}

.hero-showreel-stack {
  transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0);
  transition: transform 0.22s ease-out;
  will-change: transform;
}

.hero-showreel::before {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.hero-showreel:hover::before {
  opacity: 1;
  transform: scale(1.15);
}

.hero .reel-placeholder {
  box-shadow:
    0 35px 100px rgba(0,0,0,0.45),
    0 0 0 1px rgba(47,124,255,0.025) inset;
}

.button-primary {
  position: relative;
  overflow: hidden;
}

.button-primary::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -35%;
  width: 32%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: rotate(18deg) translateX(-220%);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.button-primary:hover::after {
  transform: rotate(18deg) translateX(520%);
}

/* =========================================================
   V5 — MARQUEE TRANSITION
   ========================================================= */

.motion-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(8,9,11,0.62);
  backdrop-filter: blur(10px);
}

.motion-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: motionMarquee 24s linear infinite;
  will-change: transform;
}

.motion-marquee span {
  padding: 16px 18px;
  color: rgba(255,255,255,0.38);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  white-space: nowrap;
}

.motion-marquee:hover .motion-marquee-track {
  animation-play-state: paused;
}

@keyframes motionMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   V5 — SELECTED REELS
   ========================================================= */

.reels-section {
  overflow: hidden;
  padding-top: 82px;
}

.reels-section::before {
  content: "WORK";
  position: absolute;
  z-index: -1;
  top: 30px;
  right: -20px;
  color: rgba(255,255,255,0.018);
  font-size: clamp(120px, 18vw, 320px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.reels-heading {
  position: relative;
}

.reels-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(47,124,255,0.6), rgba(255,255,255,0.06) 35%, transparent 85%);
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1);
}

.reels-heading.is-visible::after {
  transform: scaleX(1);
}

.reel-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

.reel-media {
  transform-style: preserve-3d;
  will-change: transform;
}

.reel-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(47,124,255,0.13) 52%, transparent 70%);
  transform: translateX(-60%);
  transition: opacity 0.35s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}

.reel-card:hover .reel-media {
  transform:
    perspective(900px)
    rotateX(var(--tilt-y))
    rotateY(var(--tilt-x))
    translateY(-8px)
    scale(1.012);
  box-shadow:
    0 34px 72px rgba(0,0,0,0.46),
    0 0 30px rgba(47,124,255,0.08);
}

.reel-card:hover .reel-media::before {
  opacity: 1;
  transform: translateX(60%);
}

.reel-info {
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}

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

.reel-card:hover .reel-category {
  text-shadow: 0 0 18px rgba(47,124,255,0.6);
}

@media (min-width: 1101px) {
  .reel-card:nth-child(2),
  .reel-card:nth-child(4),
  .reel-card:nth-child(6) {
    margin-top: 28px;
  }
}

/* =========================================================
   V5 — STATS EDITORIAL REDESIGN
   ========================================================= */

.stats-section {
  overflow: hidden;
  padding: 120px 5vw 130px;
}

.stats-shell {
  position: relative;
  max-width: 1120px;
}

.stats-shell::before {
  content: "";
  position: absolute;
  top: 170px;
  left: -110px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(47,124,255,0.09);
  filter: blur(110px);
  pointer-events: none;
}

.stats-heading {
  margin-bottom: 58px;
}

.stats-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: 50px;
}

.stats-heading h2 {
  max-width: 720px;
  font-size: clamp(46px, 5vw, 78px);
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.stats-heading-row > p {
  justify-self: end;
  max-width: 380px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  text-align: right;
}

.stats-editorial {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 28px;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(255,255,255,0.09);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.stat-primary {
  position: relative;
  min-height: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 32px 30px 0;
}

.stat-primary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 24px;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, rgba(47,124,255,0.85), transparent);
  box-shadow: 0 0 18px rgba(47,124,255,0.22);
}

.stat-eyebrow {
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.stat-primary strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: auto 0 28px;
  color: var(--text);
  font-size: clamp(120px, 14vw, 210px);
  line-height: 0.72;
  letter-spacing: -0.085em;
  text-shadow: 0 22px 80px rgba(0,0,0,0.38);
}

.stat-primary p {
  max-width: 380px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.stats-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  border-left: 1px solid rgba(255,255,255,0.09);
}

.stat-row {
  min-height: 205px;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 1fr;
  align-items: center;
  gap: 26px;
  padding: 28px 0 28px 32px;
}

.stat-row + .stat-row {
  border-top: 1px solid rgba(255,255,255,0.09);
}

.stat-row strong {
  color: var(--text);
  font-size: clamp(54px, 5vw, 82px);
  line-height: 0.86;
  letter-spacing: -0.065em;
}

.stat-worldwide strong {
  max-width: 230px;
  color: #dfe8f8;
  font-size: clamp(34px, 3vw, 50px);
  line-height: 0.88;
  overflow-wrap: anywhere;
}

.stat-row div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-row p {
  max-width: 250px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.stats-pulse {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.46);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.stats-pulse > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(47,124,255,0.45);
  animation: statsPulse 2.4s ease-out infinite;
}

@keyframes statsPulse {
  0% { box-shadow: 0 0 0 0 rgba(47,124,255,0.45); }
  75%, 100% { box-shadow: 0 0 0 12px rgba(47,124,255,0); }
}

/* =========================================================
   V5 — ABOUT MOTION
   ========================================================= */

.about-portrait-slot {
  transform: translateZ(0);
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.5s ease;
}

.about-portrait-slot:hover {
  transform: translateY(-7px) rotate(0.35deg);
  border-color: rgba(47,124,255,0.42);
  box-shadow: 0 38px 100px rgba(0,0,0,0.46), 0 0 38px rgba(47,124,255,0.07);
}

.about-portrait-image {
  transform: translate3d(0, var(--portrait-shift), 0) scale(1.06);
}

.about-portrait-slot:hover .about-portrait-image {
  transform: translate3d(0, var(--portrait-shift), 0) scale(1.09);
}

.about-point {
  position: relative;
  overflow: hidden;
  transition: padding-left 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
}

.about-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 999px;
  background: var(--blue);
  transform: translateY(-50%);
  box-shadow: 0 0 14px rgba(47,124,255,0.5);
  transition: height 0.3s ease;
}

.about-point:hover {
  padding-left: 12px;
  background: linear-gradient(90deg, rgba(47,124,255,0.055), transparent 55%);
}

.about-point:hover::before {
  height: 48%;
}

/* =========================================================
   V5 — CONTACT / SOCIAL LOGOS
   ========================================================= */

.contact-grid {
  gap: 14px;
}

.contact-card {
  --brand: 47, 124, 255;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  background: linear-gradient(145deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
}

.contact-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(var(--brand), 0.12);
  filter: blur(45px);
  opacity: 0.25;
  transform: scale(0.7);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}

.contact-whatsapp { --brand: 37, 211, 102; }
.contact-instagram { --brand: 228, 64, 95; }
.contact-discord { --brand: 88, 101, 242; }

.contact-icon {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease, border-color 0.35s ease;
}

.contact-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  opacity: 0.75;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}

.contact-card-copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
}

.contact-arrow {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.contact-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--brand), 0.55);
  background: linear-gradient(145deg, rgba(var(--brand),0.065), rgba(255,255,255,0.012));
  box-shadow: 0 30px 75px rgba(0,0,0,0.34), 0 0 36px rgba(var(--brand),0.06);
}

.contact-card:hover::before {
  opacity: 1;
  transform: scale(1.25);
}

.contact-card:hover .contact-icon {
  transform: rotate(-4deg) scale(1.08);
  border-color: rgba(var(--brand),0.45);
  background: rgba(var(--brand),0.08);
}

.contact-card:hover .contact-icon img {
  opacity: 1;
  transform: scale(1.08);
}

.contact-card:hover .contact-platform,
.contact-card:hover .contact-arrow {
  color: rgb(var(--brand));
}

/* =========================================================
   V5 — RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 1100px) {
  .hero {
    min-height: auto;
  }

  .stats-heading-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stats-heading-row > p {
    justify-self: start;
    max-width: 560px;
    text-align: left;
  }

  .stats-editorial {
    grid-template-columns: 1fr;
  }

  .stat-primary {
    min-height: 330px;
  }

  .stats-side {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.09);
  }
}

@media (max-width: 900px) {
  .motion-marquee span {
    padding: 14px 16px;
    font-size: 9px;
  }

  .stats-section {
    padding: 92px 20px 105px;
  }

  .stats-heading {
    margin-bottom: 42px;
  }

  .stats-heading h2 {
    font-size: clamp(44px, 10vw, 68px);
  }

  .stat-primary strong {
    font-size: clamp(100px, 24vw, 150px);
  }

  .stat-row {
    grid-template-columns: minmax(130px, 0.6fr) 1fr;
    padding-left: 0;
  }

  .contact-card {
    min-height: 170px;
  }
}

@media (max-width: 520px) {
  .ambient-orb {
    filter: blur(80px);
    opacity: 0.14;
  }

  .motion-marquee span {
    letter-spacing: 0.16em;
  }

  .reels-section::before {
    top: 44px;
    font-size: 120px;
  }

  .stats-section {
    padding: 80px 16px 88px;
  }

  .stats-heading-row > p {
    font-size: 13px;
  }

  .stats-editorial {
    gap: 12px;
  }

  .stat-primary {
    min-height: 270px;
    padding: 22px 0 24px;
  }

  .stat-primary strong {
    margin-bottom: 22px;
    font-size: clamp(88px, 28vw, 124px);
  }

  .stats-side {
    display: block;
  }

  .stat-row {
    min-height: 170px;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 0;
  }

  .stat-row strong {
    font-size: 58px;
  }

  .stat-worldwide strong {
    font-size: 38px;
  }

  .stats-pulse {
    align-items: flex-start;
    line-height: 1.45;
  }

  .contact-card {
    min-height: 165px;
  }

  .contact-icon {
    width: 44px;
    height: 44px;
  }

  .contact-icon img {
    width: 21px;
    height: 21px;
  }
}

/* =========================================================
   V6 — POSITIONING + HIERARCHY REFINEMENT
   ========================================================= */

/* HERO */
.hero-topline {
  align-items: center;
  gap: 18px;
}

.hero-role {
  max-width: 360px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.11em;
}

.hero-tagline {
  max-width: 560px;
  font-size: clamp(20px, 1.65vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.hero-categories {
  margin-top: 25px;
}

/* =========================================================
   V6 — TRULY SEAMLESS MARQUEE
   Two identical groups guarantee a continuous loop.
   ========================================================= */

.motion-marquee {
  overflow: hidden;
}

.motion-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: motionMarqueeV6 22s linear infinite;
  will-change: transform;
}

.motion-marquee-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.motion-marquee span {
  flex: 0 0 auto;
  padding: 16px 24px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.20em;
  white-space: nowrap;
}

.motion-marquee:hover .motion-marquee-track {
  animation-play-state: running;
}

@keyframes motionMarqueeV6 {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   V6 — SECTION 02 / EVOLUTION
   ========================================================= */

.stats-section {
  padding: 104px 5vw 112px;
}

.stats-shell {
  max-width: 1080px;
}

.stats-heading {
  margin-bottom: 46px;
}

.stats-heading-row {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 56px;
}

.stats-heading h2 {
  max-width: 690px;
  font-size: clamp(43px, 4.55vw, 68px);
  line-height: 0.93;
  letter-spacing: -0.06em;
}

.stats-heading-row > p {
  max-width: 390px;
  font-size: 13px;
  line-height: 1.68;
}

.stats-editorial {
  grid-template-columns: minmax(0, 1.05fr) minmax(370px, 0.95fr);
  gap: 34px;
  padding: 22px 0 24px;
}

.stat-primary {
  min-height: 350px;
  padding: 26px 38px 26px 0;
}

.stat-primary strong {
  margin: auto 0 24px;
  font-size: clamp(102px, 11.2vw, 168px);
  line-height: 0.76;
}

.stat-primary p {
  max-width: 410px;
  font-size: 13px;
}

.stats-side {
  grid-template-rows: 1fr 1fr;
}

.stat-row {
  min-height: 175px;
  grid-template-columns: minmax(155px, 0.72fr) 1fr;
  gap: 30px;
  padding: 26px 0 26px 32px;
}

.stat-row strong {
  font-size: clamp(50px, 4.45vw, 70px);
}

.stat-worldwide strong {
  max-width: 220px;
  font-size: clamp(30px, 2.65vw, 42px);
  line-height: 0.9;
  overflow-wrap: normal;
}

.stat-row p {
  max-width: 270px;
  font-size: 12px;
  line-height: 1.6;
}

/* =========================================================
   V6 — ABOUT / CONCRETE POSITIONING
   ========================================================= */

.about-section {
  padding: 102px 5vw 118px;
}

.about-shell {
  max-width: 1080px;
}

.about-heading {
  max-width: 880px;
  margin-bottom: 44px;
}

.about-heading h2 {
  max-width: 820px;
  font-size: clamp(44px, 4.6vw, 70px);
  line-height: 0.94;
}

.about-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  gap: 62px;
}

.about-lead {
  max-width: 640px;
  font-size: clamp(20px, 1.65vw, 27px);
  line-height: 1.38;
}

.about-text {
  max-width: 620px;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.75;
}

.about-points {
  margin-top: 32px;
}

.about-point {
  min-height: 82px;
  grid-template-columns: 42px 1fr;
  align-items: center;
  padding: 13px 0;
}

.about-point > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.about-point strong {
  color: #f0f0f0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.about-point p {
  max-width: 520px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0;
}

.about-portrait-slot {
  min-height: 520px;
}

.about-portrait-image {
  object-position: 50% 42%;
  transform: translate3d(0, var(--portrait-shift), 0) scale(1.015);
}

.about-portrait-slot:hover .about-portrait-image {
  transform: translate3d(0, var(--portrait-shift), 0) scale(1.045);
}

/* =========================================================
   V6 — CONTACT CTA
   ========================================================= */

.contact-heading h2 {
  max-width: 650px;
}

.contact-heading p {
  max-width: 320px;
  font-size: 13px;
}

/* =========================================================
   V6 — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .hero-role {
    max-width: 320px;
  }

  .stats-heading-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stats-heading-row > p {
    justify-self: start;
    max-width: 600px;
    text-align: left;
  }

  .stats-editorial {
    grid-template-columns: 1fr;
  }

  .stat-primary {
    min-height: 310px;
  }

  .about-grid {
    gap: 42px;
  }
}

@media (max-width: 900px) {
  .hero-role {
    max-width: none;
  }

  .motion-marquee span {
    padding: 14px 18px;
    font-size: 9px;
  }

  .stats-section {
    padding: 88px 20px 100px;
  }

  .stats-heading h2 {
    font-size: clamp(42px, 9.5vw, 64px);
  }

  .stat-primary strong {
    font-size: clamp(94px, 22vw, 142px);
  }

  .about-section {
    padding: 88px 20px 102px;
  }

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

  .about-copy {
    order: 1;
  }

  .about-visual {
    order: 2;
    max-width: 520px;
  }
}

@media (max-width: 520px) {
  .hero-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .hero-tagline {
    max-width: 360px;
  }

  .motion-marquee span {
    padding: 13px 15px;
    letter-spacing: 0.15em;
  }

  .stats-section {
    padding: 76px 16px 84px;
  }

  .stats-heading {
    margin-bottom: 34px;
  }

  .stats-heading h2 {
    font-size: clamp(40px, 12vw, 52px);
  }

  .stats-heading-row > p {
    font-size: 13px;
  }

  .stat-primary {
    min-height: 245px;
  }

  .stat-primary strong {
    font-size: clamp(82px, 27vw, 116px);
  }

  .stat-row {
    min-height: 155px;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0;
  }

  .stat-worldwide strong {
    font-size: 34px;
  }

  .about-section {
    padding: 76px 16px 88px;
  }

  .about-heading {
    margin-bottom: 34px;
  }

  .about-heading h2 {
    font-size: clamp(38px, 11.5vw, 50px);
  }

  .about-lead {
    font-size: 19px;
  }

  .about-point {
    min-height: 88px;
    grid-template-columns: 34px 1fr;
  }

  .about-portrait-slot {
    min-height: 470px;
  }
}

/* =========================================================
   V7 — HERO / MARQUEE / REELS / EXPERIENCE / ABOUT
   ========================================================= */

/* HERO — 3 independent looping reels */
.hero-showreel-stack {
  overflow: visible;
}

.hero-showreel-card {
  cursor: pointer;
  scale: 1;
  opacity: 1;
  transition:
    scale 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.38s ease,
    filter 0.38s ease,
    border-color 0.35s ease,
    box-shadow 0.42s ease;
  will-change: transform, scale, opacity;
}

.hero-showreel-card-main {
  animation:
    heroV7MainIn 0.8s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroReelMainFloat 7s 1.05s ease-in-out infinite alternate;
}

.hero-showreel-card-left {
  animation:
    heroV7LeftIn 0.92s 0.34s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroReelLeftFloat 8.5s 1.3s ease-in-out infinite alternate;
}

.hero-showreel-card-right {
  animation:
    heroV7RightIn 0.92s 0.34s cubic-bezier(0.16, 1, 0.3, 1) both,
    heroReelRightFloat 9s 1.3s ease-in-out infinite alternate;
}

.hero-showreel-stack:has(.hero-showreel-card:hover)
.hero-showreel-card:not(:hover) {
  opacity: 0.42;
  filter: brightness(0.5) saturate(0.7);
  scale: 0.96;
}

.hero-showreel-card:hover,
.hero-showreel-card:focus-visible {
  z-index: 8;
  scale: 1.10;
  opacity: 1;
  filter: brightness(1.02) saturate(1.03);
  border-color: rgba(47, 124, 255, 0.8);
  box-shadow:
    0 38px 90px rgba(0, 0, 0, 0.68),
    0 0 44px rgba(47, 124, 255, 0.13);
  outline: none;
}

.hero-showreel-card video {
  pointer-events: none;
}

@keyframes heroV7MainIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroV7LeftIn {
  from {
    opacity: 0;
    transform: translateX(0) translateY(8px) rotate(0deg) scale(0.84);
  }
  to {
    opacity: 1;
    transform: translateX(-82%) translateY(5px) rotate(-6deg) scale(1);
  }
}

@keyframes heroV7RightIn {
  from {
    opacity: 0;
    transform: translateX(0) translateY(8px) rotate(0deg) scale(0.84);
  }
  to {
    opacity: 1;
    transform: translateX(82%) translateY(-4px) rotate(6deg) scale(1);
  }
}

/* MARQUEE — every group is wider than the viewport, so there is no visual reset */
.motion-marquee-track {
  display: flex;
  width: max-content;
  min-width: max-content;
  animation: motionMarqueeV7 34s linear infinite;
  transform: translate3d(0, 0, 0);
}

.motion-marquee-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: max-content;
}

.motion-marquee span {
  flex: 0 0 auto;
  padding: 16px 22px;
}

.motion-marquee:hover .motion-marquee-track {
  animation-play-state: running;
}

@keyframes motionMarqueeV7 {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* REELS — 8 slots, still 4 x 2 on desktop */
.business-placeholder {
  background:
    radial-gradient(circle at 72% 22%, rgba(47, 124, 255, 0.26), transparent 40%),
    linear-gradient(150deg, #131820, #08090b 72%) !important;
}

.creator-placeholder {
  background:
    radial-gradient(circle at 30% 24%, rgba(47, 124, 255, 0.19), transparent 38%),
    linear-gradient(155deg, #171717, #090909 72%) !important;
}

@media (min-width: 1101px) {
  .reel-card:nth-child(8) {
    margin-top: 28px;
  }
}

/* EXPERIENCE — cleaner hierarchy, four useful blocks */
.stats-section {
  padding: 104px 5vw 118px;
}

.stats-heading {
  margin-bottom: 46px;
}

.stats-heading-row {
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  align-items: end;
  gap: clamp(44px, 7vw, 110px);
}

.stats-heading h2 {
  max-width: 690px;
  font-size: clamp(48px, 4.5vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.stats-heading-row > p {
  max-width: 410px;
  font-size: 14px;
  line-height: 1.65;
}

.stats-editorial {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0;
  padding: 0;
}

.stat-primary {
  min-height: 430px;
  padding: 34px 42px 32px 0;
  justify-content: flex-start;
}

.stat-primary strong {
  margin: auto 0 30px;
  font-size: clamp(112px, 11.5vw, 178px);
}

.stat-primary p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  text-transform: none;
}

.stats-side {
  grid-template-rows: repeat(3, 1fr);
}

.stat-row {
  min-height: 143px;
  grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 1fr);
  gap: 30px;
  padding: 26px 0 26px 34px;
}

.stat-row strong,
.stat-worldwide strong {
  max-width: 260px;
  color: var(--text);
  font-size: clamp(28px, 2.45vw, 42px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  overflow-wrap: normal;
}

.stat-row:first-child strong {
  font-size: clamp(34px, 3.1vw, 50px);
}

.stat-row p {
  max-width: 275px;
  font-size: 12px;
  line-height: 1.55;
}

/* ABOUT — stronger but calmer hierarchy */
.about-heading {
  margin-bottom: 46px;
}

.about-heading h2 {
  max-width: 850px;
  font-size: clamp(48px, 4.9vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.058em;
}

.about-lead {
  max-width: 690px;
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.22;
}

.about-text {
  max-width: 680px;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 1100px) {
  .stats-heading-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stats-heading-row > p {
    justify-self: start;
    max-width: 620px;
    text-align: left;
  }

  .stats-editorial {
    grid-template-columns: 1fr;
  }

  .stats-side {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .stat-row {
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .hero-showreel-card:hover,
  .hero-showreel-card:focus-visible {
    scale: 1.04;
  }

  .stats-heading h2,
  .about-heading h2 {
    font-size: clamp(42px, 9vw, 64px);
  }

  .stat-primary {
    min-height: 320px;
  }

  .stat-row {
    grid-template-columns: minmax(160px, 0.75fr) 1fr;
  }
}

@media (max-width: 520px) {
  .motion-marquee-track {
    animation-duration: 28s;
  }

  .stats-heading h2,
  .about-heading h2 {
    font-size: clamp(38px, 11.3vw, 50px);
  }

  .stat-primary {
    min-height: 250px;
    padding-right: 0;
  }

  .stat-row {
    min-height: 150px;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }

  .stat-row strong,
  .stat-row:first-child strong {
    max-width: none;
    font-size: 34px;
  }
}

/* =========================================================
   V8 — HIERARCHY + HERO REELS
   ========================================================= */

/* HERO NAME — equal visual width on both lines */
.hero-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  line-height: 0.78;
}

.hero-name-line {
  display: block;
  width: max-content;
  transform-origin: left center;
}

.hero-name-line-top {
  transform: scaleX(1.105);
}

.hero-name-line-bottom {
  margin-top: 0.04em;
}

/* HERO — actual 3-card reveal from center */
.hero-showreel-stack {
  position: absolute;
  inset: 64px 52px 58px;
  overflow: visible;
}

.hero-showreel-card,
.hero-showreel-card-main,
.hero-showreel-card-left,
.hero-showreel-card-right {
  top: 50%;
  left: 50%;
  animation: none !important;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translateX(0)
    rotate(0deg)
    scale(0.84);
  transition:
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.46s ease,
    filter 0.38s ease,
    border-color 0.34s ease,
    box-shadow 0.42s ease;
  will-change: transform, opacity, filter;
}

.hero-showreel-card-main {
  z-index: 4;
  height: 80%;
}

.hero-showreel-card-left {
  z-index: 2;
  height: 66%;
}

.hero-showreel-card-right {
  z-index: 3;
  height: 68%;
}

.hero-showreel-card-main.is-entered {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translateX(0)
    rotate(0deg)
    scale(1);
}

.hero-showreel-card-left.is-entered {
  opacity: 0.78;
  transform:
    translate(-50%, -50%)
    translateX(-92%)
    rotate(-7deg)
    scale(0.92);
}

.hero-showreel-card-right.is-entered {
  opacity: 0.84;
  transform:
    translate(-50%, -50%)
    translateX(92%)
    rotate(7deg)
    scale(0.94);
}

.hero-showreel-stack.has-hover
.hero-showreel-card:not(.is-hovered) {
  opacity: 0.26;
  filter: brightness(0.48) saturate(0.72);
}

.hero-showreel-card-main.is-hovered {
  z-index: 10;
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translateX(0)
    rotate(0deg)
    scale(1.13);
}

.hero-showreel-card-left.is-hovered {
  z-index: 10;
  opacity: 1;
  filter: brightness(1.02) saturate(1.03);
  transform:
    translate(-50%, -50%)
    translateX(-72%)
    rotate(-3deg)
    scale(1.12);
}

.hero-showreel-card-right.is-hovered {
  z-index: 10;
  opacity: 1;
  filter: brightness(1.02) saturate(1.03);
  transform:
    translate(-50%, -50%)
    translateX(72%)
    rotate(3deg)
    scale(1.12);
}

.hero-showreel-card.is-hovered {
  border-color: rgba(47, 124, 255, 0.82);
  box-shadow:
    0 42px 95px rgba(0, 0, 0, 0.72),
    0 0 42px rgba(47, 124, 255, 0.13);
}

/* SECTION 02 — more balanced visual hierarchy */
.stats-section {
  padding: 92px 5vw 104px;
}

.stats-shell {
  max-width: 1120px;
}

.stats-heading {
  margin-bottom: 38px;
}

.stats-heading-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.65fr);
  align-items: end;
  gap: clamp(42px, 6vw, 90px);
}

.stats-heading h2 {
  max-width: 610px;
  font-size: clamp(46px, 3.75vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.052em;
}

.stats-heading-row > p {
  max-width: 390px;
  font-size: 14px;
  line-height: 1.62;
}

.stats-editorial {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 0;
}

.stat-primary {
  min-height: 340px;
  padding: 30px 40px 26px 0;
}

.stat-primary strong {
  margin: auto 0 24px;
  font-size: clamp(96px, 8.4vw, 132px);
  line-height: 0.8;
}

.stat-primary p {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.5;
}

.stats-side {
  grid-template-rows: repeat(3, minmax(108px, auto));
}

.stat-row {
  min-height: 118px;
  grid-template-columns: minmax(170px, 0.85fr) minmax(210px, 1fr);
  align-items: center;
  gap: 26px;
  padding: 24px 0 24px 30px;
}

.stat-row strong,
.stat-row:first-child strong {
  max-width: 230px;
  font-size: clamp(27px, 2.25vw, 36px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.stat-row .stat-eyebrow {
  margin-bottom: 8px;
}

.stat-row p {
  max-width: 270px;
  font-size: 12px;
  line-height: 1.52;
}

/* SECTION 03 — same hierarchy language as section 02 */
.about-section {
  padding: 92px 5vw 108px;
}

.about-shell {
  max-width: 1120px;
}

.about-heading {
  max-width: 760px;
  margin-bottom: 36px;
}

.about-heading h2 {
  max-width: 740px;
  font-size: clamp(46px, 3.95vw, 62px);
  line-height: 0.95;
  letter-spacing: -0.052em;
}

.about-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(46px, 6vw, 78px);
}

.about-lead {
  max-width: 610px;
  font-size: clamp(22px, 1.6vw, 27px);
  line-height: 1.34;
}

.about-text {
  max-width: 610px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.7;
}

.about-points {
  max-width: 620px;
  margin-top: 28px;
}

.about-point {
  min-height: 70px;
  padding: 10px 0;
}

.about-point strong {
  font-size: 10px;
}

.about-point p {
  font-size: 12px;
  line-height: 1.5;
}

.about-portrait-slot {
  min-height: 480px;
}

@media (max-width: 1100px) {
  .hero-name-line-top {
    transform: scaleX(1.075);
  }

  .stats-heading-row,
  .about-grid {
    grid-template-columns: 1fr;
  }

  .stats-heading-row {
    gap: 18px;
  }

  .stats-heading-row > p {
    justify-self: start;
    text-align: left;
  }

  .about-grid {
    gap: 36px;
  }

  .about-visual {
    max-width: 430px;
  }
}

@media (max-width: 900px) {
  .hero-showreel-stack {
    inset: 58px 34px 52px;
  }

  .hero-showreel-card-main {
    height: 76%;
  }

  .hero-showreel-card-left {
    height: 62%;
  }

  .hero-showreel-card-right {
    height: 64%;
  }

  .hero-showreel-card-left.is-entered {
    transform: translate(-50%, -50%) translateX(-84%) rotate(-6deg) scale(0.9);
  }

  .hero-showreel-card-right.is-entered {
    transform: translate(-50%, -50%) translateX(84%) rotate(6deg) scale(0.92);
  }

  .hero-showreel-card-left.is-hovered {
    transform: translate(-50%, -50%) translateX(-67%) rotate(-3deg) scale(1.07);
  }

  .hero-showreel-card-right.is-hovered {
    transform: translate(-50%, -50%) translateX(67%) rotate(3deg) scale(1.07);
  }

  .stats-heading h2,
  .about-heading h2 {
    font-size: clamp(42px, 8vw, 56px);
  }
}

@media (max-width: 520px) {
  .hero-name-line-top {
    transform: scaleX(1.04);
  }

  .hero-showreel-card-left.is-entered {
    transform: translate(-50%, -50%) translateX(-72%) rotate(-5deg) scale(0.86);
  }

  .hero-showreel-card-right.is-entered {
    transform: translate(-50%, -50%) translateX(72%) rotate(5deg) scale(0.88);
  }

  .stats-section,
  .about-section {
    padding-top: 72px;
    padding-bottom: 82px;
  }

  .stats-heading h2,
  .about-heading h2 {
    font-size: clamp(38px, 10.6vw, 48px);
  }

  .stat-primary {
    min-height: 260px;
  }

  .stat-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .about-portrait-slot {
    min-height: 430px;
  }
}

/* =========================================================
   V9 — HERO INTERACTION + ALIGNMENT + SECTION HIERARCHY
   ========================================================= */

/* Exact visual alignment for AHRON / LUCCAS is calculated in JS. */
.hero-copy {
  --hero-name-width: 520px;
  --hero-top-scale: 1;
}

.hero-name {
  width: min(var(--hero-name-width), 100%);
  max-width: 100%;
  align-items: flex-start;
  overflow: visible;
}

.hero-name-line {
  display: block;
  transform-origin: left center;
}

.hero-name-line-top {
  transform: scaleX(var(--hero-top-scale));
}

.hero-name-line-bottom {
  transform: none;
}

.hero-tagline {
  width: min(var(--hero-name-width), 100%);
  max-width: none;
  text-wrap: pretty;
}

/* The stack itself stays transparent to the mouse; each Reel is interactive. */
.hero-showreel-stack {
  pointer-events: none;
}

.hero-showreel-card {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}

.hero-showreel-card:focus-visible {
  border-color: rgba(47, 124, 255, 0.95);
  box-shadow:
    0 42px 95px rgba(0, 0, 0, 0.72),
    0 0 0 2px rgba(47, 124, 255, 0.32),
    0 0 42px rgba(47, 124, 255, 0.16);
}

.hero-reel-action {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 8;
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.68);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition:
    opacity 0.28s ease,
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.28s ease;
}

.hero-showreel-card.is-hovered .hero-reel-action,
.hero-showreel-card:focus-visible .hero-reel-action {
  opacity: 1;
  transform: translate(-50%, 0);
  background: rgba(47, 124, 255, 0.88);
}

/* Make selection noticeably stronger and keep the other two present. */
.hero-showreel-stack.has-hover .hero-showreel-card:not(.is-hovered) {
  opacity: 0.38;
  filter: brightness(0.55) saturate(0.72);
  transform-origin: center center;
}

.hero-showreel-card-main.is-hovered {
  transform:
    translate(-50%, -50%)
    translateX(0)
    rotate(0deg)
    scale(1.16);
}

.hero-showreel-card-left.is-hovered {
  transform:
    translate(-50%, -50%)
    translateX(-68%)
    rotate(-2deg)
    scale(1.17);
}

.hero-showreel-card-right.is-hovered {
  transform:
    translate(-50%, -50%)
    translateX(68%)
    rotate(2deg)
    scale(1.17);
}

/* Section titles: same hierarchy, cleaner line breaks and consistent alignment. */
.stats-shell,
.about-shell {
  max-width: 1140px;
}

.stats-heading,
.about-heading {
  width: 100%;
}

.stats-heading-row {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: end;
  gap: clamp(44px, 5.5vw, 82px);
}

.stats-heading h2,
.about-heading h2 {
  max-width: 760px;
  font-size: clamp(46px, 3.75vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.stats-heading-row > p {
  max-width: 370px;
  padding-bottom: 4px;
  text-wrap: pretty;
}

.about-heading {
  max-width: 820px;
  margin-bottom: 42px;
}

.about-heading h2 {
  max-width: 800px;
}

.about-grid {
  align-items: center;
}

@media (max-width: 1100px) {
  .stats-heading-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stats-heading-row > p {
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 900px) {
  .hero-showreel-card-main.is-hovered {
    transform: translate(-50%, -50%) scale(1.1);
  }

  .hero-showreel-card-left.is-hovered {
    transform: translate(-50%, -50%) translateX(-62%) rotate(-2deg) scale(1.1);
  }

  .hero-showreel-card-right.is-hovered {
    transform: translate(-50%, -50%) translateX(62%) rotate(2deg) scale(1.1);
  }
}

@media (max-width: 520px) {
  .hero-reel-action {
    display: none;
  }

  .stats-heading h2,
  .about-heading h2 {
    font-size: clamp(38px, 10.2vw, 48px);
  }
}


/* =========================================================
   V9 — SECTION 02 / 20M+ ALIGNMENT FIX
   ========================================================= */

.stats-editorial {
  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  align-items: stretch;
}


.stat-primary {
  min-height: 390px;

  padding:
    28px
    46px
    28px
    0;

  justify-content: center;
}


.stat-primary .stat-eyebrow {
  margin-bottom: 42px;
}


.stat-primary strong {
  margin:
    0
    0
    26px;

  font-size:
    clamp(
      122px,
      11.25vw,
      185px
    );

  line-height: 0.72;
}


.stat-primary p {
  max-width: 430px;

  font-size: 16px;
  line-height: 1.45;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );
}


.stat-primary::after {
  bottom: 76px;

  width: 82%;
}


.stats-side {
  align-self: stretch;
}


.stat-row {
  min-height: 130px;

  padding:
    22px
    0
    22px
    34px;
}

/* HERO — AJUSTE VISUAL DO NOME */

.hero-name-line-top {
  margin-left: 35px !important;
}

/* HERO — AJUSTE VISUAL DO LUCCAS */

.hero-name-line-bottom {
  margin-left: 17px !important;
}

/* HERO — TAMANHO DO LUCCAS */

.hero-name-line-bottom {
  transform: scaleX(0.95) !important;
  transform-origin: left center !important;
}

/* =========================================================
   MOBILE FINAL — 390/430px
   NÃO ALTERA O DESKTOP
   ========================================================= */

@media (max-width: 520px) {

  /* =======================================================
     NAVBAR
     ======================================================= */

  .navbar {
    padding:
      18px
      18px;
  }

  .logo {
    font-size: 13px;
  }

  .language-toggle {
    min-width: 48px;
    height: 40px;

    padding:
      0
      13px;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .hero {
    gap: 34px;

    padding:
      108px
      20px
      54px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-topline {
    gap: 9px;

    margin-bottom: 25px;
  }

  .hero-role {
    font-size: 10px;

    line-height: 1.4;
  }

  .availability {
    font-size: 10px;
  }


  /* No mobile, AHRON e LUCCAS começam no mesmo eixo */

  .hero-name-line-top {
    margin-left: 0 !important;

    transform:
      none !important;
  }

  .hero-name-line-bottom {
    margin-left: 0 !important;

    transform:
      scaleX(0.95) !important;

    transform-origin:
      left center !important;
  }

  .hero-name {
    width: 100%;

    font-size:
      clamp(
        58px,
        18.5vw,
        72px
      );

    line-height: 0.79;
  }

  .hero-tagline {
    width: 100%;

    max-width: 345px;

    margin-top: 29px;

    font-size: 18px;

    line-height: 1.35;
  }

  .hero-categories {
    margin-top: 24px;

    gap:
      9px
      10px;

    font-size: 9px;

    line-height: 1.7;
  }

  .hero-actions {
    margin-top: 30px;

    gap: 10px;
  }

  .button {
    min-height: 45px;

    padding:
      0
      16px;

    font-size: 10px;
  }


  /* =======================================================
     HERO SHOWREEL
     ======================================================= */

  .hero .reel-placeholder {
    aspect-ratio:
      4 / 3;

    border-radius: 16px;
  }

  .hero-showreel-stack {
    inset:
      57px
      22px
      47px;
  }

  .hero-showreel-card-main {
    height: 73%;
  }

  .hero-showreel-card-left {
    height: 58%;
  }

  .hero-showreel-card-right {
    height: 60%;
  }

  .hero-showreel-card-left.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(-72%)
      rotate(-5deg)
      scale(0.86);
  }

  .hero-showreel-card-right.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(72%)
      rotate(5deg)
      scale(0.88);
  }

  .hero-showreel-label {
    top: 19px;
    left: 20px;
  }

  .hero-showreel-label strong {
    font-size: 18px;
  }

  .reel-footer {
    left: 20px;
    right: 20px;
    bottom: 17px;

    font-size: 7px;
  }


  /* =======================================================
     MARQUEE
     ======================================================= */

  .motion-marquee span {
    padding:
      12px
      16px;

    font-size: 8px;

    letter-spacing: 0.16em;
  }


  /* =======================================================
     REELS
     ======================================================= */

  .reels-section {
    padding:
      68px
      18px
      72px;
  }

  .reels-heading {
    gap: 15px;

    margin-bottom: 28px;
  }

  .reels-heading h2 {
    max-width: 340px;

    font-size:
      clamp(
        40px,
        11.5vw,
        47px
      );

    line-height: 0.98;
  }

  .reels-heading p {
    max-width: 335px;

    font-size: 13px;

    line-height: 1.55;
  }

  .reels-grid {
    width: 100%;

    max-width: none;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      28px
      14px;
  }

  .reel-card {
    width: 100%;

    max-width: none;
  }

  .reel-media {
    border-radius: 13px;
  }

  .reel-info {
    margin-top: 9px;

    gap: 6px;
  }

  .reel-category {
    margin-bottom: 5px;

    font-size: 7px;
  }

  .reel-info h3 {
    font-size: 13px;

    line-height: 1.18;
  }

  .reel-arrow {
    font-size: 13px;
  }

  .reel-play {
    width: 34px;
    height: 34px;

    right: 9px;
    bottom: 9px;
  }


  /* =======================================================
     SECTION 02 — EXPERIENCE
     ======================================================= */

  .stats-section {
    padding:
      68px
      22px
      72px;
  }

  .stats-heading {
    margin-bottom: 34px;
  }

  .stats-heading-row {
    display: block;
  }

  .stats-heading h2 {
    max-width: 340px;

    font-size:
      clamp(
        39px,
        10.7vw,
        46px
      );

    line-height: 0.98;
  }

  .stats-heading-row > p {
    max-width: 340px;

    margin-top: 26px;

    font-size: 14px;

    line-height: 1.65;

    text-align: left;
  }


  /* ESTA É A CORREÇÃO PRINCIPAL */

  .stats-editorial {
    display: block;

    min-height: 0;

    padding: 0;

    border-top:
      1px solid
      rgba(
        255,
        255,
        255,
        0.09
      );
  }


  .stat-primary {
    min-height: 0;

    padding:
      30px
      0
      32px;

    display: block;
  }

  .stat-primary .stat-eyebrow {
    display: block;

    margin-bottom: 34px;
  }

  .stat-primary strong {
    display: block;

    margin:
      0
      0
      20px;

    font-size:
      clamp(
        100px,
        29vw,
        122px
      );

    line-height: 0.78;
  }

  .stat-primary p {
    width: fit-content;

    max-width: 275px;

    margin: 0;

    font-size: 15px;

    line-height: 1.5;
  }

  .stat-primary::after {
    left: 0;
    bottom: 17px;

    width: 275px;
  }


  .stats-side {
    display: block;

    border-top:
      1px solid
      rgba(
        255,
        255,
        255,
        0.09
      );

    border-left: 0;
  }

  .stat-row {
    min-height: 0;

    display: block;

    padding:
      25px
      0;

    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.08
      );
  }

  .stat-row strong,
  .stat-row:first-child strong {
    display: block;

    max-width: 100%;

    margin-bottom: 16px;

    font-size: 31px;

    line-height: 0.95;
  }

  .stat-row .stat-eyebrow {
    display: block;

    margin-bottom: 8px;
  }

  .stat-row p {
    max-width: 320px;

    font-size: 13px;

    line-height: 1.55;
  }


  /* =======================================================
     SECTION 03 — ABOUT
     ======================================================= */

  .about-section {
    padding:
      68px
      22px
      56px;
  }

  .about-heading {
    margin-bottom: 34px;
  }

  .about-heading h2 {
    max-width: 350px;

    font-size:
      clamp(
        39px,
        10.6vw,
        46px
      );

    line-height: 0.98;
  }

  .about-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 28px;
  }

  .about-copy {
    width: 100%;
  }

  .about-lead {
    max-width: 350px;

    font-size: 20px;

    line-height: 1.42;
  }

  .about-text {
    max-width: 350px;

    margin-top: 22px;

    font-size: 13px;

    line-height: 1.7;
  }

  .about-points {
    margin-top: 28px;
  }

  .about-point {
    min-height: 0;

    grid-template-columns:
      30px
      1fr;

    padding:
      17px
      0;
  }

  .about-point strong {
    font-size: 10px;
  }

  .about-point p {
    margin-top: 5px;

    font-size: 12px;

    line-height: 1.55;
  }

  .about-visual {
    width: 100%;

    max-width: none;

    margin: 0;
  }

  .about-portrait-slot {
    width: 100%;

    min-height: 0;

    aspect-ratio:
      4 / 5;

    padding: 20px;

    border-radius: 17px;
  }

  .about-portrait-image {
    object-position:
      50%
      42%;
  }

  .about-portrait-kicker {
    top: 18px;
    left: 18px;
  }

  .about-portrait-footer {
    left: 20px;
    right: 20px;
    bottom: 18px;

    gap: 5px;

    font-size: 7px;
  }


  /* =======================================================
     CONTACT
     ======================================================= */

  .contact-section {
    padding:
      68px
      20px
      28px;
  }

  .contact-heading {
    margin-bottom: 32px;

    gap: 18px;
  }

  .contact-heading h2 {
    max-width: 350px;

    font-size:
      clamp(
        39px,
        10.6vw,
        47px
      );

    line-height: 0.98;
  }

  .contact-heading p {
    max-width: 320px;

    font-size: 13px;

    line-height: 1.55;
  }

  .contact-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .contact-card {
    min-height: 150px;

    padding: 18px;

    border-radius: 16px;

    grid-template-columns:
      1fr
      auto;

    grid-template-rows:
      auto
      1fr
      auto;
  }

  .contact-icon {
    width: 42px;
    height: 42px;

    border-radius: 12px;
  }

  .contact-icon img {
    width: 20px;
    height: 20px;
  }

  .contact-card-copy strong {
    font-size: 18px;
  }

  .contact-card-copy small {
    font-size: 11px;
  }

  .contact-bottom {
    margin-top: 38px;

    gap: 7px;

    font-size: 8px;
  }


  /* =======================================================
     VIDEO MODAL — MOBILE
     ======================================================= */

  .video-modal {
    padding: 8px;
  }

  .video-modal-dialog {
    width: 100%;

    max-height:
      calc(
        100dvh - 16px
      );

    overflow-y: auto;

    border-radius: 18px;
  }

  .video-modal-content {
    display: flex;

    flex-direction: column;

    gap: 22px;

    padding:
      60px
      16px
      20px;
  }

  .video-modal-player {
    width:
      min(
        68vw,
        250px
      );

    max-height: none;

    flex-shrink: 0;
  }

  .video-modal-info {
    width: 100%;

    padding: 0;
  }

  .video-modal-category {
    margin-bottom: 9px;
  }

  .video-modal-info h2 {
    min-height: 0;

    margin-bottom: 16px;

    font-size: 34px;

    line-height: 0.96;
  }

  .video-modal-description {
    min-height: 0;

    margin-bottom: 22px;

    font-size: 13px;

    line-height: 1.6;
  }

  .video-modal-services,
  .video-modal-focus {
    margin-bottom: 22px;
  }

  .video-modal-tag {
    min-height: 30px;

    padding:
      0
      10px;

    font-size: 8px;
  }

  .video-modal-format {
    margin-top: 3px;
  }

  .video-modal-actions {
    top: 10px;
    right: 10px;

    gap: 7px;
  }

  .video-modal-language,
  .video-modal-close {
    height: 38px;
  }

  .video-modal-close {
    width: 38px;
  }

}

/* =========================================================
   MOBILE FINAL V2 — HERO / STATS / CONTACT
   ========================================================= */

@media (max-width: 520px) {

  /* =======================================================
     NAVBAR
     ======================================================= */

  .navbar {
    padding: 16px 18px;
  }

  .logo {
    font-size: 12px;
  }

  .language-toggle {
    min-width: 46px;
    height: 38px;
    padding: 0 12px;
  }


  /* =======================================================
     HERO — MAIS COMPACTO
     ======================================================= */

  .hero {
    gap: 28px;

    padding:
      94px
      20px
      44px;
  }

  .hero-topline {
    gap: 7px;
    margin-bottom: 20px;
  }

  .hero-role {
    font-size: 9px;
    line-height: 1.35;
  }

  .availability {
    font-size: 9px;
  }

  .availability i {
    width: 6px;
    height: 6px;
  }


  /* NOME */

  .hero-name {
    width: 100%;

    font-size:
      clamp(
        52px,
        15.5vw,
        61px
      );

    line-height: 0.80;
  }

  .hero-name-line-top {
    margin-left: 0 !important;
    transform: none !important;
  }

  .hero-name-line-bottom {
    margin-left: 0 !important;

    transform:
      scaleX(0.95) !important;

    transform-origin:
      left center !important;
  }


  /* FRASE */

  .hero-tagline {
    max-width: 315px;

    margin-top: 24px;

    font-size: 16px;
    line-height: 1.35;
  }


  /* CATEGORIAS */

  .hero-categories {
    max-width: 330px;

    margin-top: 20px;

    gap:
      7px
      8px;

    font-size: 8px;

    letter-spacing: 0.11em;
  }


  /* BOTÕES */

  .hero-actions {
    margin-top: 25px;

    gap: 8px;

    flex-wrap: nowrap;
  }

  .button {
    min-height: 42px;

    padding:
      0
      14px;

    gap: 13px;

    font-size: 9px;
  }


  /* =======================================================
     SHOWREEL MOBILE — MAIS FORTE E MENOS ESTRANHO
     ======================================================= */

  .hero .reel-placeholder {
    aspect-ratio: 1.10 / 1;

    border-radius: 17px;
  }

  .hero-showreel-stack {
    inset:
      56px
      24px
      45px;
  }


  /* CENTRAL */

  .hero-showreel-card-main {
    height: 82%;
  }


  /* LATERAIS */

  .hero-showreel-card-left {
    height: 68%;
  }

  .hero-showreel-card-right {
    height: 70%;
  }


  .hero-showreel-card-left.is-entered {
    opacity: 0.60;

    transform:
      translate(-50%, -50%)
      translateX(-62%)
      rotate(-5deg)
      scale(0.88);
  }

  .hero-showreel-card-right.is-entered {
    opacity: 0.68;

    transform:
      translate(-50%, -50%)
      translateX(62%)
      rotate(5deg)
      scale(0.90);
  }


  /* SEM HOVER ESTRANHO NO CELULAR */

  .hero-showreel-card:hover,
  .hero-showreel-card:focus-visible {
    scale: 1;
  }


  .hero-showreel-label {
    top: 18px;
    left: 18px;
  }

  .hero-showreel-label span {
    font-size: 7px;
  }

  .hero-showreel-label strong {
    font-size: 17px;
  }

  .reel-footer {
    left: 18px;
    right: 18px;
    bottom: 16px;

    font-size: 6px;
  }


  /* =======================================================
     SECTION 02 — EXPERIENCE
     ======================================================= */

  .stats-section {
    padding:
      64px
      24px
      68px;
  }

  .stats-heading {
    margin-bottom: 30px;
  }

  .stats-heading-row {
    display: block;
  }


  .stats-heading h2 {
    max-width: 310px;

    font-size:
      clamp(
        37px,
        10vw,
        43px
      );

    line-height: 0.98;
  }


  .stats-heading-row > p {
    max-width: 320px;

    margin-top: 22px;

    font-size: 13px;
    line-height: 1.6;
  }


  /* 20M */

  .stats-editorial {
    display: block;

    padding: 0;

    border-top:
      1px solid
      rgba(255,255,255,0.08);
  }

  .stat-primary {
    min-height: 0;

    padding:
      28px
      0
      30px;

    display: block;
  }

  .stat-primary .stat-eyebrow {
    margin-bottom: 25px;
  }

  .stat-primary strong {
    margin:
      0
      0
      16px;

    font-size:
      clamp(
        90px,
        25vw,
        102px
      );

    line-height: 0.8;
  }

  .stat-primary p {
    max-width: 250px;

    font-size: 13px;
    line-height: 1.45;
  }

  .stat-primary::after {
    left: 0;
    bottom: 16px;

    width: 250px;
  }


  /* LINHAS À DIREITA VIRAM CARDS COMPACTOS */

  .stats-side {
    display: block;

    border-top:
      1px solid
      rgba(255,255,255,0.08);

    border-left: 0;
  }

  .stat-row {
    display: grid;

    grid-template-columns:
      125px
      1fr;

    align-items: center;

    gap: 18px;

    min-height: 0;

    padding:
      22px
      0;
  }

  .stat-row strong,
  .stat-row:first-child strong {
    max-width: 125px;

    margin: 0;

    font-size: 24px;
    line-height: 0.95;
  }

  .stat-row .stat-eyebrow {
    margin-bottom: 6px;

    font-size: 7px;
  }

  .stat-row p {
    max-width: none;

    font-size: 11px;
    line-height: 1.5;
  }


  /* =======================================================
     CONTACT — CARDS MENORES
     ======================================================= */

  .contact-section {
    padding:
      62px
      20px
      25px;
  }

  .contact-heading {
    margin-bottom: 26px;
  }

  .contact-heading h2 {
    max-width: 330px;

    font-size:
      clamp(
        37px,
        10vw,
        44px
      );

    line-height: 0.98;
  }

  .contact-heading p {
    margin-top: 4px;

    font-size: 12px;
  }


  .contact-grid {
    gap: 9px;
  }


  .contact-card {
    min-height: 112px;

    padding: 15px;

    border-radius: 14px;

    grid-template-columns:
      auto
      1fr
      auto;

    grid-template-rows: 1fr;

    align-items: center;

    gap: 14px;
  }


  .contact-icon {
    grid-column: 1;
    grid-row: 1;

    width: 38px;
    height: 38px;

    border-radius: 11px;
  }


  .contact-icon img {
    width: 18px;
    height: 18px;
  }


  .contact-card-copy {
    grid-column: 2;
    grid-row: 1;

    align-self: center;
  }


  .contact-platform {
    margin-bottom: 5px;

    font-size: 7px;
  }


  .contact-card-copy strong {
    display: block;

    font-size: 16px;

    line-height: 1.15;
  }


  .contact-card-copy small {
    display: block;

    margin-top: 6px;

    font-size: 10px;
  }


  .contact-arrow {
    grid-column: 3;
    grid-row: 1;

    align-self: center;

    font-size: 15px;
  }


  .contact-bottom {
    margin-top: 32px;
  }


  /* =======================================================
     ÂNCORAS — NÃO ESCONDER TÍTULO ATRÁS DA NAVBAR
     ======================================================= */

  #work,
  #about,
  #contact {
    scroll-margin-top: 76px;
  }

}

/* MOBILE — SHOWREEL MAIS ABERTO E VISÍVEL */

@media (max-width: 520px) {

  .hero-showreel-stack {
    inset:
      54px
      0
      42px;
  }

  .hero-showreel-card-main {
    height: 90%;
  }

  .hero-showreel-card-left {
    height: 72%;
  }

  .hero-showreel-card-right {
    height: 72%;
  }

  .hero-showreel-card-left.is-entered {
    opacity: 0.90;

    transform:
      translate(-50%, -50%)
      translateX(-108%)
      rotate(-4deg)
      scale(1.1);
  }

  .hero-showreel-card-right.is-entered {
    opacity: 0.90;

    transform:
      translate(-50%, -50%)
      translateX(108%)
      rotate(5deg)
      scale(1.1);
  }

  .hero-showreel-card-main.is-entered {
    transform:
      translate(-50%, -50%)
      scale(1.02);
  }

}
/* =========================================================
   TABLET FINAL — 521px até 900px
   ========================================================= */

@media (min-width: 521px) and (max-width: 900px) {

  /* =======================================================
     NAVBAR
     ======================================================= */

  .navbar {
    padding: 20px 28px;
  }

  .nav-links {
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 28px;
  }

  .nav-links a {
    font-size: 11px;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .hero {
    max-width: 760px;

    gap: 48px;

    padding:
      130px
      42px
      70px;
  }

  .hero-copy {
    max-width: 590px;
  }

  .hero-name {
    font-size:
      clamp(
        76px,
        12vw,
        96px
      );
  }

  .hero-tagline {
    max-width: 500px;
  }

  .hero .reel-placeholder {
    width: 100%;
    max-width: 680px;

    margin:
      0
      auto;

    aspect-ratio:
      16 / 10;
  }


  /* =======================================================
     REELS — 3 POR LINHA
     ======================================================= */

  .reels-section {
    padding:
      76px
      42px
      90px;
  }

  .reels-heading {
    max-width: 680px;
    margin-bottom: 34px;
  }

  .reels-grid {
    width: 100%;
    max-width: 680px;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    justify-content: stretch;

    gap:
      34px
      18px;
  }

  .reel-card {
    width: 100%;
    max-width: none;
  }

  .reel-info h3 {
    font-size: 14px;
  }


  /* =======================================================
     SECTION 02 — EXPERIENCE
     ======================================================= */

  .stats-section {
    padding:
      82px
      42px
      88px;
  }

  .stats-shell {
    max-width: 680px;
  }

  .stats-heading {
    margin-bottom: 34px;
  }

  .stats-heading-row {
    display: block;
  }

  .stats-heading h2 {
    max-width: 620px;

    font-size:
      clamp(
        46px,
        7vw,
        58px
      );

    line-height: 0.96;
  }

  .stats-heading-row > p {
    max-width: 480px;

    margin-top: 22px;

    font-size: 13px;
    text-align: left;
  }


  /* 20M+ EM BLOCO PRÓPRIO */

  .stats-editorial {
    display: block;

    padding: 0;

    border-top:
      1px solid
      rgba(255,255,255,0.09);
  }

  .stat-primary {
    min-height: 260px;

    padding:
      30px
      0
      30px;

    justify-content: center;
  }

  .stat-primary .stat-eyebrow {
    margin-bottom: 28px;
  }

  .stat-primary strong {
    margin:
      0
      0
      20px;

    font-size:
      clamp(
        118px,
        18vw,
        150px
      );

    line-height: 0.78;
  }

  .stat-primary p {
    max-width: 340px;

    font-size: 14px;
  }

  .stat-primary::after {
    left: 0;
    bottom: 17px;

    width: 340px;
  }


  /* 3 INFORMAÇÕES EM COLUNAS */

  .stats-side {
    display: grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    border-left: 0;

    border-top:
      1px solid
      rgba(255,255,255,0.09);
  }

  .stat-row {
    display: block;

    min-height: 175px;

    padding:
      26px
      18px;

    border-bottom:
      0;
  }

  .stat-row + .stat-row {
    border-left:
      1px solid
      rgba(255,255,255,0.08);
  }

  .stat-row strong,
  .stat-row:first-child strong {
    display: block;

    max-width: none;

    margin-bottom: 22px;

    font-size:
      clamp(
        24px,
        3.5vw,
        30px
      );

    line-height: 0.94;
  }

  .stat-row .stat-eyebrow {
    margin-bottom: 8px;

    font-size: 7px;
  }

  .stat-row p {
    max-width: 180px;

    font-size: 10px;
    line-height: 1.5;
  }


  /* =======================================================
     ABOUT
     ======================================================= */

  .about-section {
    padding:
      82px
      42px
      90px;
  }

  .about-shell {
    max-width: 680px;
  }

  .about-heading h2 {
    max-width: 620px;

    font-size:
      clamp(
        46px,
        7vw,
        58px
      );
  }

  .about-grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }

  .about-copy {
    max-width: 620px;
  }

  .about-visual {
    width: 100%;

    max-width: 500px;

    margin:
      0
      auto;
  }

  .about-portrait-slot {
    min-height: 560px;
  }


  /* =======================================================
     CONTACT
     ======================================================= */

  .contact-section {
    padding:
      82px
      42px
      40px;
  }

  .contact-shell {
    max-width: 680px;
  }

  .contact-heading {
    margin-bottom: 34px;
  }

  .contact-heading h2 {
    max-width: 650px;

    font-size:
      clamp(
        44px,
        6.5vw,
        56px
      );
  }

  .contact-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 10px;
  }

  .contact-card {
    min-height: 180px;

    padding: 18px;
  }

  .contact-icon {
    width: 42px;
    height: 42px;
  }

  .contact-icon img {
    width: 20px;
    height: 20px;
  }

  .contact-card-copy strong {
    font-size: 15px;
  }

  .contact-card-copy small {
    font-size: 9px;
  }

}

/* =========================================================
   TABLET — SPACING ENTRE SEÇÕES + SHOWREEL MAIOR
   ========================================================= */

@media (min-width: 521px) and (max-width: 900px) {

  /* =======================================================
     MENOS ESPAÇO ENTRE 02 → 03
     ======================================================= */

  .stats-section {
    padding-bottom: 58px;
  }

  .about-section {
    padding-top: 58px;
  }

  /* também reduz espaço morto depois dos blocos da seção 02 */
  .stats-editorial {
    margin-bottom: 0;
  }


  /* =======================================================
     SHOWREEL MAIOR
     ======================================================= */

  .hero .reel-placeholder {
    width: 100%;
    max-width: 720px;

    aspect-ratio: 16 / 9.4;
  }

  .hero-showreel-stack {
    inset:
      50px
      26px
      42px;
  }

  .hero-showreel-card-main {
    height: 92%;
  }

  .hero-showreel-card-left {
    height: 72%;
  }

  .hero-showreel-card-right {
    height: 74%;
  }

  .hero-showreel-card-left.is-entered {
    transform:
      translate(-75%, -50%)
      translateX(-88%)
      rotate(-5deg)
      scale(1.09);
  }

  .hero-showreel-card-right.is-entered {
    transform:
      translate(-25%, -50%)
      translateX(88%)
      rotate(5deg)
      scale(1.09);
  }

}

/* =========================================================
   MOBILE + TABLET — CENTRALIZAÇÃO FINAL
   + SHOWREEL SIMÉTRICO
   ========================================================= */

@media (max-width: 900px) {

  /* =========================
     HERO
     ========================= */

  .hero-copy {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .hero-topline {
    justify-content: center;
    align-items: center;
  }

  .availability {
    justify-content: center;
  }

  .hero-name {
    margin-left: auto;
    margin-right: auto;

    align-items: center;
  }

  .hero-name-line-top,
  .hero-name-line-bottom {
    margin-left: 0 !important;

    transform-origin: center center !important;
  }

  .hero-tagline {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .hero-categories {
    justify-content: center;

    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    margin-left: auto;
    margin-right: auto;
  }

  .hero .reel-placeholder {
    margin-left: auto;
    margin-right: auto;
  }


  /* =========================
     REELS
     ========================= */

  .reels-heading {
    justify-items: center;

    text-align: center;
  }

  .reels-heading p {
    justify-self: center;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .section-kicker {
    text-align: center;
  }


  /* =========================
     SECTION 02
     ========================= */

  .stats-heading {
    text-align: center;
  }

  .stats-heading h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .stats-heading-row > p {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .stat-primary {
    text-align: center;
  }

  .stat-primary .stat-eyebrow {
    text-align: center;
  }

  .stat-primary p {
    margin-left: auto;
    margin-right: auto;
  }

  .stat-primary::after {
    left: 50%;

    transform: translateX(-50%);
  }

  .stat-row {
    text-align: center;
  }

  .stat-row strong,
  .stat-row p {
    margin-left: auto;
    margin-right: auto;
  }


  /* =========================
     ABOUT
     ========================= */

  .about-heading {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .about-heading h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .about-lead,
  .about-text {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

  .about-visual {
    margin-left: auto;
    margin-right: auto;
  }


  /* =========================
     CONTACT
     ========================= */

  .contact-heading {
    justify-items: center;

    text-align: center;
  }

  .contact-heading h2,
  .contact-heading p {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

}


/* =========================================================
   MOBILE — SHOWREEL SIMÉTRICO
   ========================================================= */

@media (max-width: 520px) {

  .hero-topline {
    align-items: center;
  }

  .hero-showreel-card-left,
  .hero-showreel-card-right {
    height: 72%;

    opacity: 0.90;

    filter:
      brightness(0.86)
      saturate(0.90);
  }

  .hero-showreel-card-left.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(-108%)
      rotate(-4deg)
      scale(1.1);
  }

  .hero-showreel-card-right.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(108%)
      rotate(4deg)
      scale(1.1);
  }

}


/* =========================================================
   TABLET — SHOWREEL SIMÉTRICO
   ========================================================= */

@media (min-width: 521px) and (max-width: 900px) {

  .hero-showreel-card-left,
  .hero-showreel-card-right {
    height: 73%;

    opacity: 0.88;

    filter:
      brightness(0.84)
      saturate(0.90);
  }

  .hero-showreel-card-left.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(-98%)
      rotate(-4deg)
      scale(1.09);
  }

  .hero-showreel-card-right.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(98%)
      rotate(4deg)
      scale(1.09);
  }

}

/* =========================================================
   TABLET — ESPAÇO 02 → 03
   ========================================================= */

@media (min-width: 521px) and (max-width: 900px) {

  .stats-section {
    padding-bottom: 28px !important;
  }

  .about-section {
    padding-top: 34px !important;
  }

}

/* =========================================================
   MODAL — AJUSTE FINAL MOBILE + TABLET
   ========================================================= */


/* TABLET — vídeo e informações lado a lado */

@media (min-width: 521px) and (max-width: 900px) {

  .video-modal {
    padding: 12px;
  }

  .video-modal-dialog {
    width: calc(100vw - 24px);
    max-width: 740px;

    max-height: calc(100dvh - 24px);

    overflow-y: auto;

    border-radius: 20px;
  }

  .video-modal-content {
    display: grid;

    grid-template-columns:
      minmax(250px, 300px)
      minmax(0, 1fr);

    align-items: center;

    gap: 30px;

    padding:
      28px
      28px;
  }

  .video-modal-player {
    width: 100%;
    max-width: 300px;

    max-height: none;
  }

  .video-modal-info {
    width: 100%;

    padding:
      50px
      0
      20px;
  }

  .video-modal-info h2 {
    min-height: 0;

    margin-bottom: 18px;

    font-size: 38px;

    line-height: 0.94;
  }

  .video-modal-description {
    min-height: 0;

    margin-bottom: 24px;

    font-size: 13px;

    line-height: 1.6;
  }

  .video-modal-services,
  .video-modal-focus {
    margin-bottom: 22px;
  }

  .video-modal-tags {
    gap: 6px;
  }

  .video-modal-tag {
    min-height: 29px;

    padding:
      0
      9px;

    font-size: 8px;
  }

  .video-modal-format {
    margin-top: 0;
  }

  .video-modal-actions {
    top: 14px;
    right: 14px;
  }

}


/* MOBILE — manter botões sempre acessíveis */

@media (max-width: 520px) {

  .video-modal-dialog {
    position: relative;
  }

  .video-modal-actions {
    position: sticky;

    top: 8px;
    right: auto;

    width: max-content;

    margin:
      8px
      8px
      -46px
      auto;

    z-index: 30;
  }

  .video-modal-content {
    padding-top: 58px;
  }

}

/* =========================================================
   DESKTOP — SHOWREEL MAIS ABERTO E VISÍVEL
   ========================================================= */

@media (min-width: 901px) {

  .hero-showreel-card-left,
  .hero-showreel-card-right {
    opacity: 0.95;

    filter:
      brightness(0.88)
      saturate(0.92);
  }

  .hero-showreel-card-left.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(-104%)
      rotate(-4deg)
      scale(1.02);
  }

  .hero-showreel-card-right.is-entered {
    transform:
      translate(-50%, -50%)
      translateX(104%)
      rotate(4deg)
      scale(1.02);
  }

}


/* =========================================================
   MOBILE / TABLET — LEGIBILIDADE + TOUCH UX
   ========================================================= */

@media (max-width: 900px) {

  /* ---------------------------------------------------------
     REMOVE SENSAÇÃO DE SELEÇÃO / TOQUE
     --------------------------------------------------------- */

  * {
    -webkit-tap-highlight-color: transparent;
  }

  a,
  button,
  .reel-card,
  .contact-card,
  .hero-showreel-card,
  .language-toggle,
  .nav-link {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  a:focus,
  button:focus {
    outline: none;
  }


  /* ---------------------------------------------------------
     NAV — MOSTRAR LINKS NO TOUCH
     --------------------------------------------------------- */

  .nav-links {
    display: flex !important;
    align-items: center;
    gap: 14px;
  }

  .nav-links a {
    display: inline-flex !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
    opacity: 0.78;
  }


  /* ---------------------------------------------------------
     TEXTOS PEQUENOS — AUMENTO GERAL
     --------------------------------------------------------- */

  .hero-role {
    font-size: 12px !important;
    line-height: 1.3;
  }

  .hero-availability {
    font-size: 11px !important;
    line-height: 1.3;
  }

  .hero-categories {
    font-size: 11px !important;
    line-height: 1.5;
  }

  .hero-showreel-eyebrow,
  .hero-showreel-label,
  .section-kicker,
  .reel-category,
  .about-point-label,
  .contact-card-label {
    font-size: 10px !important;
    line-height: 1.4;
  }

  .motion-marquee,
  .motion-marquee span {
    font-size: 9px !important;
  }

  .reel-card-title {
    font-size: 13px !important;
    line-height: 1.25;
  }

  .section-description,
  .about-copy,
  .contact-subtitle {
    font-size: 13px !important;
    line-height: 1.6;
  }

  .contact-card h3 {
    font-size: 16px !important;
  }

  .contact-card p,
  .contact-card-handle {
    font-size: 11px !important;
  }

}


/* =========================================================
   MOBILE — 520px E MENOR
   ========================================================= */

@media (max-width: 520px) {

  /* Navbar */
  .site-nav,
  .navbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav-brand,
  .logo {
    font-size: 14px !important;
  }

  .nav-links {
    gap: 11px !important;
  }

  .nav-links a {
    font-size: 10px !important;
  }


  /* Hero */
  .hero-role {
    font-size: 12px !important;
  }

  .hero-availability {
    font-size: 11px !important;
  }

  .hero-tagline {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  .hero-categories {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }


  /* Botão único do Hero */
  .hero-actions {
    justify-content: center;
  }


  /* Showreel */
  .hero-showreel-eyebrow {
    font-size: 10px !important;
  }

  .hero-showreel-title {
    font-size: 20px !important;
  }


  /* Seções */
  .section-kicker {
    font-size: 10px !important;
  }

  .section-description {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }


  /* Selected Reels */
  .reel-category {
    font-size: 9px !important;
  }

  .reel-card-title {
    font-size: 13px !important;
  }


  /* About */
  .about-point-label {
    font-size: 10px !important;
  }


  /* Contact */
  .contact-card-label {
    font-size: 9px !important;
  }

  .contact-card h3 {
    font-size: 15px !important;
  }

  .contact-card p,
  .contact-card-handle {
    font-size: 11px !important;
  }

}

/* =========================================================
   MOBILE V2 — TIPOGRAFIA / HIERARQUIA
   ========================================================= */

@media (max-width: 520px) {

  /* =======================================================
     NAVEGAÇÃO
     ======================================================= */

  .nav-brand,
  .logo {
    font-size: 16px !important;
    letter-spacing: .07em !important;
  }

  .nav-links {
    gap: 18px !important;
  }

  .nav-links a {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .language-toggle {
    font-size: 16px !important;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .hero-role {
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: .07em !important;
  }

  .hero-availability {
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
  }

  .hero-tagline {
    max-width: 520px !important;

    font-size: 22px !important;
    line-height: 1.32 !important;

    text-wrap: balance;
  }

  .hero-categories {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .06em !important;
  }

  .button {
    font-size: 13px !important;
  }


  /* =======================================================
     SHOWREEL
     ======================================================= */

  .hero-showreel-eyebrow,
  .hero-showreel-label {
    font-size: 11px !important;
  }

  .hero-showreel-title {
    font-size: 23px !important;
  }


  /* =======================================================
     TÍTULOS DAS SEÇÕES
     ======================================================= */

  .section-kicker {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .10em !important;
  }

  #work h2,
  #about h2,
  #contact h2,
  .evolution-section h2,
  .evolution h2 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: 40px !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;

    text-wrap: balance;
  }


  /* =======================================================
     DESCRIÇÕES DE SEÇÃO
     ======================================================= */

  .section-description,
  .contact-subtitle {
    max-width: 560px !important;

    font-size: 16px !important;
    line-height: 1.55 !important;

    text-wrap: balance;
  }


  /* =======================================================
     SELECTED REELS
     ======================================================= */

  .reel-category {
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: .08em !important;
  }

  .reel-card-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     EVOLUTION
     ======================================================= */

  .stat-count-primary {
    font-size: clamp(88px, 26vw, 118px) !important;
    line-height: .86 !important;
  }

  .stat-label,
  .stat-caption {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }


  /* =======================================================
     ABOUT
     ======================================================= */

  .about-copy,
  .about-copy p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .about-lead {
    font-size: 21px !important;
    line-height: 1.48 !important;
  }

  .about-point-label {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
  }

  .about-point p,
  .about-point-description {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }


  /* =======================================================
     CONTACT
     ======================================================= */

  #contact h2 {
    font-size: 39px !important;
    line-height: .98 !important;
    max-width: 570px !important;

    text-wrap: balance;
  }

  .contact-subtitle {
    font-size: 16px !important;
  }

  .contact-card-label {
    font-size: 12px !important;
    letter-spacing: .10em !important;
  }

  .contact-card h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .contact-card p,
  .contact-card-handle {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }


  /* =======================================================
     MARQUEE
     ======================================================= */

  .motion-marquee,
  .motion-marquee span {
    font-size: 11px !important;
    letter-spacing: .10em !important;
  }

}