:root {
  --bg-dark: #06101f;
  --bg-section: #071426;
  --bg-section-alt: #09172c;

  --text: #f5f7ff;
  --muted: #9eb0d1;
  --soft: #8193bd;

  --blue-light: #80bdff;
  --blue-mid: #397cff;
  --blue-strong: #1150df;

  --method-bg: #f1f6f8;
  --method-text: #0b1b38;
  --method-blue: #0a46bd;
  --method-soft-blue: #7cbcff;

  --line: rgba(255, 255, 255, 0.12);
}


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Manrope",
    Arial,
    sans-serif;

  background:
    var(--bg-dark);

  color:
    var(--text);

  overflow-x: hidden;
}

h1,
h2,
h3,
strong,
.method-number,
.method-word {
  font-family:
    "Space Grotesk",
    "Manrope",
    Arial,
    sans-serif;
}

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

img {
  display: block;
  max-width: 100%;
}


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

.hero {
  min-height: 100vh;

  padding:
    22px
    48px
    26px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 43%,
      rgba(106, 172, 255, 0.28),
      transparent 17%
    ),
    radial-gradient(
      circle at 78% 53%,
      rgba(30, 79, 255, 0.24),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #07162f 0%,
      #0b318c 100%
    );
}


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

.navbar {
  min-height: 70px;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 26px;

  position: relative;

  z-index: 20;
}

.nav-logo {
  position: relative;

  z-index: 30;
}

.nav-logo img {
  width: 150px;

  height: auto;
}

.nav-menu {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 38px;
}

.nav-menu a {
  font-size: 13px;

  font-weight: 600;

  color:
    rgba(
      244,
      247,
      255,
      0.84
    );

  transition:
    0.25s ease;
}

.nav-menu a:hover {
  color: #ffffff;
}

.nav-cta {
  min-height: 46px;

  padding:
    0
    23px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

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

  border-radius:
    999px;

  font-size:
    13px;

  font-weight:
    700;

  transition:
    0.25s ease;
}

.nav-cta:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.08
    );
}


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

.hero-main {
  flex: 1;

  display: grid;

  grid-template-columns:
    minmax(510px, 0.95fr)
    minmax(600px, 1.05fr);

  align-items: center;

  gap: 15px;
}


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

.hero-left {
  position: relative;

  z-index: 5;
}

.hero-kicker {
  display: inline-block;

  margin-bottom: 32px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing:
    3.5px;

  color:
    var(--blue-light);
}

.hero-left h1 {
  width: max-content;

  font-size:
    clamp(
      4.2rem,
      5.7vw,
      6.9rem
    );

  line-height: 0.9;

  letter-spacing:
    -0.065em;

  font-weight: 600;
}

.hero-title-line {
  display: block;

  white-space: nowrap;
}

.hero-title-white {
  color:
    #f5f7fb;
}

.hero-title-blue {
  margin-top:
    9px;

  background:
    linear-gradient(
      90deg,
      #dceeff,
      #7cb5ff 50%,
      #3471ff
    );

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}

.hero-description {
  margin-top:
    35px;

  font-size:
    17px;

  line-height:
    1.75;

  color:
    var(--muted);
}

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

  display:
    flex;

  gap:
    17px;

  flex-wrap:
    wrap;
}


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

.btn {
  min-height:
    57px;

  padding:
    0
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border-radius:
    999px;

  font-size:
    14px;

  font-weight:
    800;

  transition:
    0.25s ease;
}

.btn-solid {
  background:
    var(--blue-light);

  color:
    #09265c;
}

.btn-solid:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0
    14px
    35px
    rgba(
      93,
      166,
      255,
      0.23
    );
}

.btn-ghost {
  color:
    var(--blue-light);
}

.btn-ghost:hover {
  transform:
    translateX(5px);
}


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

.hero-right {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

  position:
    relative;
}


/* =====================================================
   HM 3D
===================================================== */

.hm-visual-wrap {
  position:
    relative;

  min-width:
    0;

  min-height:
    570px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  visibility:
    visible;

  opacity:
    1;

  overflow:
    visible;
}

.hm-glow {
  position:
    absolute;

  width:
    560px;

  height:
    560px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        118,
        182,
        255,
        0.52
      ),
      rgba(
        63,
        117,
        255,
        0.2
      ) 40%,
      transparent 72%
    );

  filter:
    blur(38px);

  pointer-events:
    none;
}

.hm-ring {
  position:
    absolute;

  border-radius:
    50%;

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

  pointer-events:
    none;
}

.hm-ring-one {
  width:
    480px;

  height:
    480px;
}

.hm-ring-two {
  width:
    590px;

  height:
    590px;

  opacity:
    0.55;
}

.hm-3d-image {
  position:
    relative;

  z-index:
    5;

  display:
    block;

  width:
    720px;

  max-width:
    112%;

  height:
    auto;

  object-fit:
    contain;

  visibility:
    visible;

  opacity:
    1;

  animation:
    hmFloat
    5s
    ease-in-out
    infinite;

  filter:
    drop-shadow(
      0
      26px
      34px
      rgba(
        0,
        5,
        28,
        0.42
      )
    )
    drop-shadow(
      0
      0
      30px
      rgba(
        125,
        185,
        255,
        0.18
      )
    );
}

@keyframes hmFloat {

  0% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-14px)
      rotate(0.7deg);
  }

  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

}


/* =====================================================
   CLIENTES
===================================================== */

.clients-rail {
  height:
    555px;

  display:
    flex;

  flex-direction:
    column;

  position:
    relative;

  z-index:
    8;
}

.clients-title {
  margin-bottom:
    13px;

  text-align:
    center;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.25;

  letter-spacing:
    2.4px;

  color:
    var(--blue-light);
}

.clients-viewport {
  position:
    relative;

  flex:
    1;

  padding:
    10px;

  overflow:
    hidden;

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

  border-radius:
    26px;

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

.clients-viewport::before,
.clients-viewport::after {
  content:
    "";

  position:
    absolute;

  z-index:
    10;

  left:
    0;

  width:
    100%;

  height:
    70px;

  pointer-events:
    none;
}

.clients-viewport::before {
  top:
    0;

  background:
    linear-gradient(
      180deg,
      rgba(
        13,
        47,
        137,
        1
      ),
      rgba(
        13,
        47,
        137,
        0
      )
    );
}

.clients-viewport::after {
  bottom:
    0;

  background:
    linear-gradient(
      0deg,
      rgba(
        13,
        47,
        137,
        1
      ),
      rgba(
        13,
        47,
        137,
        0
      )
    );
}

.clients-track {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  animation:
    clientsVertical
    14s
    linear
    infinite;
}

.clients-viewport:hover
.clients-track {
  animation-play-state:
    paused;
}

@keyframes clientsVertical {

  from {
    transform:
      translateY(0);
  }

  to {
    transform:
      translateY(-50%);
  }

}

.client-card {
  flex:
    0 0 112px;

  width:
    100%;

  height:
    112px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    20px;

  background:
    #fff;
}

.client-card img {
  width:
    100%;

  height:
    100%;
}

.legend-card {
  padding:
    18px
    12px;
}

.legend-card img {
  object-fit:
    contain;
}

.rafs-card img,
.espetinho-card img {
  object-fit:
    cover;
}


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

.hero-bottom {
  padding-top:
    24px;

  display:
    grid;

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

  align-items:
    center;

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

.hero-bottom-label,
.hero-bottom-right span,
.hero-bottom-center span {
  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    2px;

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

.hero-bottom-center {
  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    12px;
}

.hero-bottom-right {
  display:
    flex;

  justify-content:
    flex-end;
}


/* =====================================================
   MÉTODO
===================================================== */

.method {
  background:
    var(--method-bg);

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

.method-intro {
  padding:
    110px
    4vw
    90px;

  display:
    grid;

  grid-template-columns:
    1.25fr
    0.75fr;

  gap:
    80px;

  align-items:
    end;
}

.method-eyebrow {
  display:
    inline-block;

  margin-bottom:
    28px;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    3px;

  color:
    var(--method-blue);
}

.method-intro h2 {
  max-width:
    850px;

  font-size:
    clamp(
      3.8rem,
      5.8vw,
      6.7rem
    );

  line-height:
    0.93;

  letter-spacing:
    -0.065em;

  font-weight:
    500;
}

.method-intro h2 span {
  display:
    block;

  color:
    var(--method-blue);
}

.method-intro-copy {
  max-width:
    480px;

  font-size:
    17px;

  line-height:
    1.85;

  color:
    #526077;
}

.method-scroll-shell {
  position:
    relative;

  height:
    300vh;
}

.method-sticky {
  position:
    sticky;

  top:
    0;

  height:
    100vh;

  padding:
    50px
    4vw;

  display:
    grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  gap:
    80px;

  align-items:
    center;

  overflow:
    hidden;

  background:
    var(--method-bg);
}

.method-left {
  min-width:
    0;
}

.method-small-title {
  display:
    block;

  margin-bottom:
    40px;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    2.5px;

  color:
    var(--method-blue);
}

.method-number-box {
  min-height:
    145px;

  display:
    flex;

  align-items:
    flex-end;
}

.method-number {
  font-size:
    clamp(
      7rem,
      11vw,
      11rem
    );

  line-height:
    0.72;

  letter-spacing:
    -0.09em;

  font-weight:
    400;

  color:
    var(--method-soft-blue);
}

.method-word {
  margin-top:
    40px;

  font-size:
    clamp(
      3.8rem,
      6vw,
      6.6rem
    );

  line-height:
    0.88;

  letter-spacing:
    -0.07em;

  font-weight:
    600;

  color:
    var(--method-blue);
}

.method-progress {
  margin-top:
    65px;

  display:
    grid;

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

  gap:
    16px;
}

.method-progress-item span {
  display:
    block;

  width:
    100%;

  height:
    3px;

  margin-bottom:
    13px;

  background:
    #c9e1f8;

  transition:
    background
    0.3s ease;
}

.method-progress-item.active span,
.method-progress-item.completed span {
  background:
    var(--method-blue);
}

.method-progress-item p {
  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

  color:
    #34435e;
}

.method-footnote {
  margin-top:
    33px;

  font-size:
    13px;

  color:
    #66748a;
}

.method-right {
  min-width:
    0;

  padding-top:
    30px;
}

.method-meta {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    40px;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1.8px;

  color:
    var(--method-blue);
}

.method-step-title {
  max-width:
    620px;

  font-size:
    clamp(
      2.8rem,
      4vw,
      4.7rem
    );

  line-height:
    0.98;

  letter-spacing:
    -0.055em;

  font-weight:
    600;

  color:
    var(--method-blue);
}

.method-step-description {
  max-width:
    650px;

  margin-top:
    30px;

  font-size:
    17px;

  line-height:
    1.8;

  color:
    #536178;
}

.method-next {
  margin-top:
    38px;

  display:
    flex;

  gap:
    14px;

  font-size:
    13px;

  font-weight:
    700;

  color:
    var(--method-blue);
}

.method-divider {
  width:
    100%;

  height:
    1px;

  margin-top:
    90px;

  background:
    #bedcf7;
}

.method-number,
.method-word,
.method-step-title,
.method-step-description,
.method-meta span,
.method-next {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.method-fade {
  opacity:
    0;

  transform:
    translateY(12px);
}

.method-mobile {
  display:
    none;
}


/* =====================================================
   SEÇÕES
===================================================== */

.section {
  padding:
    115px
    48px;

  background:
    var(--bg-section);

  border-bottom:
    1px
    solid
    var(--line);
}

.section-tag {
  display:
    inline-block;

  margin-bottom:
    17px;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    3px;

  color:
    var(--blue-light);
}

.section-top {
  margin-bottom:
    54px;
}

.section-top h2,
.services-heading h2 {
  max-width:
    1000px;

  font-size:
    clamp(
      3.2rem,
      5.5vw,
      5.7rem
    );

  line-height:
    0.92;

  letter-spacing:
    -0.065em;

  font-weight:
    500;
}

.section-top h2 span,
.services-heading h2 span {
  display:
    block;

  color:
    #7187bc;
}


/* =====================================================
   SERVIÇOS
===================================================== */

.services {
  background:
    linear-gradient(
      180deg,
      #071426 0%,
      #081a39 100%
    );
}

.services-heading {
  margin-bottom:
    65px;

  display:
    grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap:
    60px;

  align-items:
    end;
}

.services-heading > p {
  font-size:
    16px;

  line-height:
    1.8;

  color:
    var(--muted);
}

.services-grid {
  display:
    grid;

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

  gap:
    18px;
}

.service-box {
  min-height:
    390px;

  padding:
    27px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

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

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.06
      ),
      rgba(
        255,
        255,
        255,
        0.025
      )
    );

  transition:
    0.3s ease;
}

.service-box:hover {
  transform:
    translateY(-7px);

  border-color:
    rgba(
      125,
      186,
      255,
      0.35
    );
}

.service-box-blue {
  background:
    linear-gradient(
      145deg,
      rgba(
        36,
        93,
        236,
        0.34
      ),
      rgba(
        16,
        39,
        94,
        0.38
      )
    );
}

.service-box-dark {
  background:
    linear-gradient(
      145deg,
      #040d1d,
      #0a1a37
    );
}

.service-box-top {
  display:
    flex;

  justify-content:
    space-between;
}

.service-icon {
  width:
    49px;

  height:
    49px;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    rgba(
      125,
      186,
      255,
      0.28
    );

  border-radius:
    15px;

  color:
    var(--blue-light);

  font-size:
    23px;
}

.service-box-number {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2px;

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

.service-box-content {
  margin-top:
    auto;

  margin-bottom:
    38px;
}

.service-box-content h3 {
  margin-bottom:
    15px;

  font-size:
    clamp(
      1.9rem,
      2.7vw,
      2.8rem
    );

  line-height:
    0.98;

  letter-spacing:
    -0.045em;

  font-weight:
    600;
}

.service-box-content p {
  font-size:
    14px;

  line-height:
    1.75;

  color:
    var(--muted);
}

.service-box-bottom {
  padding-top:
    18px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    15px;

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

.service-box-bottom > span {
  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.7px;

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

.service-box-bottom a {
  font-size:
    11px;

  font-weight:
    700;

  color:
    var(--blue-light);
}


/* =====================================================
   PORTFÓLIO
===================================================== */

.portfolio-section {
  padding:
    120px
    48px
    110px;

  overflow:
    hidden;

  background:
    linear-gradient(
      180deg,
      #050d1c 0%,
      #071832 55%,
      #061121 100%
    );

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

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

.portfolio-heading {
  margin-bottom:
    70px;

  display:
    grid;

  grid-template-columns:
    1.25fr
    0.75fr;

  gap:
    70px;

  align-items:
    end;
}

.portfolio-eyebrow {
  display:
    inline-block;

  margin-bottom:
    18px;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    3px;

  color:
    var(--blue-light);
}

.portfolio-heading h2 {
  max-width:
    850px;

  font-size:
    clamp(
      3.5rem,
      5.8vw,
      6.2rem
    );

  line-height:
    0.91;

  letter-spacing:
    -0.065em;

  font-weight:
    500;
}

.portfolio-heading h2 span {
  display:
    block;

  color:
    #7690c8;
}

.portfolio-heading-copy {
  max-width:
    430px;

  padding-bottom:
    7px;
}

.portfolio-heading-copy p {
  margin-bottom:
    30px;

  font-size:
    17px;

  line-height:
    1.75;

  color:
    var(--muted);
}

.portfolio-heading-copy span {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2.5px;

  color:
    var(--blue-light);
}


/* =====================================================
   CASE GRID
===================================================== */

.cases-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(360px, 0.6fr);

  grid-template-rows:
    340px
    340px;

  gap:
    18px;
}

.case-card {
  position:
    relative;

  min-width:
    0;

  overflow:
    hidden;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    30px;

  isolation:
    isolate;

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

.case-card:hover {
  transform:
    translateY(-6px);

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

  box-shadow:
    0
    28px
    70px
    rgba(
      0,
      4,
      20,
      0.24
    );
}

.case-legend {
  grid-row:
    1 /
    span 2;

  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(
        81,
        129,
        255,
        0.25
      ),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #07101f 0%,
      #0a1a35 52%,
      #060b14 100%
    );
}

.case-rafs {
  background:
    radial-gradient(
      circle at 82% 23%,
      rgba(
        206,
        56,
        35,
        0.21
      ),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #120d0d,
      #25110f
    );
}

.case-espetinho {
  background:
    radial-gradient(
      circle at 82% 22%,
      rgba(
        255,
        255,
        255,
        0.07
      ),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #050607,
      #11151b
    );
}

.case-top {
  position:
    relative;

  z-index:
    5;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}

.case-top > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}

.case-number {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2px;

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

.case-type {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2px;

  color:
    var(--blue-light);
}

.case-open {
  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    50%;

  font-size:
    20px;

  color:
    #fff;

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

.case-card:hover
.case-open {
  transform:
    rotate(45deg);

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

.case-visual {
  position:
    absolute;

  z-index:
    1;

  pointer-events:
    none;
}

.case-legend-visual {
  width:
    60%;

  height:
    62%;

  right:
    -2%;

  top:
    13%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}

.case-legend-visual img {
  position:
    relative;

  z-index:
    3;

  width:
    60%;

  max-height:
    120px;

  object-fit:
    contain;

  filter:
    brightness(0)
    invert(1);

  transition:
    transform
    0.5s ease;
}

.case-legend:hover
.case-legend-visual img {
  transform:
    scale(1.07)
    rotate(-1deg);
}

.case-bg-grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    0.1;

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

  background-size:
    54px
    54px;
}

.case-orbit {
  position:
    absolute;

  border:
    1px
    solid
    rgba(
      128,
      189,
      255,
      0.13
    );

  border-radius:
    50%;
}

.orbit-one {
  width:
    330px;

  height:
    330px;
}

.orbit-two {
  width:
    440px;

  height:
    440px;
}

.case-rafs-visual {
  width:
    118px;

  height:
    118px;

  right:
    28px;

  top:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}

.rafs-disc {
  width:
    108px;

  height:
    108px;

  overflow:
    hidden;

  border-radius:
    24px;

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

  box-shadow:
    0
    15px
    35px
    rgba(
      0,
      0,
      0,
      0.27
    );
}

.rafs-disc img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.case-espetinho-visual {
  width:
    118px;

  height:
    118px;

  right:
    28px;

  top:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}

.espetinho-frame {
  width:
    108px;

  height:
    108px;

  overflow:
    hidden;

  border-radius:
    22px;

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

  transform:
    rotate(-3deg);
}

.espetinho-frame img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.case-content {
  position:
    relative;

  z-index:
    5;

  max-width:
    470px;

  margin-top:
    auto;
}

.case-content h3 {
  margin-bottom:
    14px;

  font-size:
    clamp(
      2.6rem,
      4vw,
      5rem
    );

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

  font-weight:
    600;
}

.case-rafs
.case-content,
.case-espetinho
.case-content {
  max-width:
    240px;

  padding-right:
    6px;
}

.case-rafs
.case-content h3,
.case-espetinho
.case-content h3 {
  font-size:
    clamp(
      2rem,
      2.6vw,
      2.75rem
    );

  line-height:
    0.93;

  max-width:
    220px;
}

.case-content p {
  max-width:
    400px;

  margin-bottom:
    22px;

  font-size:
    14px;

  line-height:
    1.65;

  color:
    var(--muted);
}

.case-rafs
.case-content p,
.case-espetinho
.case-content p {
  max-width:
    230px;

  font-size:
    13px;

  line-height:
    1.55;

  margin-bottom:
    18px;
}

.case-tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}

.case-tags span {
  padding:
    7px
    10px;

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

  border-radius:
    999px;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1.2px;

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

.portfolio-bottom {
  margin-top:
    70px;

  padding-top:
    35px;

  display:
    grid;

  grid-template-columns:
    0.65fr
    1.35fr;

  gap:
    70px;

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

.portfolio-bottom span {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    2.5px;

  color:
    var(--blue-light);
}

.portfolio-bottom strong {
  max-width:
    700px;

  font-size:
    clamp(
      2rem,
      3.6vw,
      4.3rem
    );

  line-height:
    1;

  letter-spacing:
    -0.05em;

  font-weight:
    500;

  color:
    #dce8ff;
}


/* =====================================================
   NOVO MANIFESTO HM
===================================================== */

.statement {
  min-height:
    100vh;

  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    90px
    48px
    40px;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(
        38,
        97,
        235,
        0.2
      ),
      transparent 32%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(
        105,
        170,
        255,
        0.09
      ),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #07152a 0%,
      #050c18 100%
    );

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

.statement-background {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;
}

.statement-background::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    0.12;

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

  background-size:
    80px
    80px;

  mask-image:
    radial-gradient(
      circle at center,
      black 0%,
      transparent 75%
    );
}

.statement-glow {
  position:
    absolute;

  left:
    50%;

  top:
    47%;

  width:
    700px;

  height:
    700px;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        62,
        127,
        255,
        0.24
      ) 0%,
      rgba(
        30,
        74,
        184,
        0.09
      ) 43%,
      transparent 72%
    );

  filter:
    blur(30px);
}

.statement-ring {
  position:
    absolute;

  left:
    50%;

  top:
    47%;

  border-radius:
    50%;

  border:
    1px
    solid
    rgba(
      128,
      189,
      255,
      0.08
    );

  transform:
    translate(
      -50%,
      -50%
    );
}

.statement-ring-one {
  width:
    430px;

  height:
    430px;
}

.statement-ring-two {
  width:
    620px;

  height:
    620px;
}

.statement-ring-three {
  width:
    820px;

  height:
    820px;
}

.statement-inner {
  position:
    relative;

  z-index:
    5;

  width:
    min(
      1280px,
      100%
    );

  min-height:
    calc(
      100vh - 130px
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}

.statement-brand {
  margin-bottom:
    25px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    8px;
}

.statement-logo-3d {
  width:
    230px;

  max-height:
    145px;

  object-fit:
    contain;

  animation:
    statementFloat
    5.5s
    ease-in-out
    infinite;

  filter:
    drop-shadow(
      0
      18px
      34px
      rgba(
        0,
        0,
        0,
        0.32
      )
    )
    drop-shadow(
      0
      0
      25px
      rgba(
        89,
        151,
        255,
        0.18
      )
    );
}

.statement-brand > span {
  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    4px;

  color:
    var(--blue-light);
}

@keyframes statementFloat {

  0% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-10px);
  }

  100% {
    transform:
      translateY(0);
  }

}

.statement-copy {
  max-width:
    1100px;
}

.statement-eyebrow {
  display:
    block;

  margin-bottom:
    26px;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    3px;

  color:
    rgba(
      128,
      189,
      255,
      0.76
    );
}

.statement-copy h2 {
  font-size:
    clamp(
      4rem,
      6.2vw,
      7.2rem
    );

  line-height:
    0.9;

  letter-spacing:
    -0.065em;

  font-weight:
    500;
}

.statement-line-main {
  display:
    block;

  color:
    #f3f6ff;
}

.statement-line-impact {
  display:
    block;

  margin-top:
    16px;

  font-size:
    1.1em;

  background:
    linear-gradient(
      90deg,
      #f3f8ff 5%,
      #86bdff 45%,
      #4f7dff 100%
    );

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}

.statement-copy p {
  max-width:
    720px;

  margin:
    38px
    auto
    0;

  font-size:
    16px;

  line-height:
    1.8;

  color:
    var(--muted);
}

.statement-footer {
  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  padding-top:
    22px;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    15px;

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

.statement-footer span {
  position:
    relative;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    2.4px;

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

.statement-footer span:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    -8px;

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    var(--blue-light);

  transform:
    translateY(-50%);
}


/* =====================================================
   CONTATO
===================================================== */

.contact {
  background:
    linear-gradient(
      180deg,
      #08162b 0%,
      #071324 100%
    );
}

.contact-box {
  max-width:
    650px;
}

.contact-box p {
  margin-bottom:
    30px;

  font-size:
    18px;

  line-height:
    1.8;

  color:
    var(--muted);
}


/* =====================================================
   FOOTER
===================================================== */

.footer {
  padding:
    52px
    48px
    30px;

  background:
    #050d19;
}

.footer-top {
  padding-bottom:
    32px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    20px;

  border-bottom:
    1px
    solid
    var(--line);
}

.footer-top img {
  width:
    175px;
}

.footer-top p {
  text-align:
    right;

  font-size:
    14px;

  line-height:
    1.65;

  color:
    var(--muted);
}

.footer-bottom {
  padding-top:
    23px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  font-size:
    12px;

  color:
    var(--soft);
}


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

@media (max-width: 1150px) {

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

  .hero-left h1 {
    width:
      auto;
  }

  .hero-title-line {
    white-space:
      normal;
  }

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

  .hm-visual-wrap {
    min-height:
      430px;

    display:
      flex;

    visibility:
      visible;

    opacity:
      1;
  }

  .hm-3d-image {
    display:
      block;

    width:
      min(
        650px,
        95%
      );

    visibility:
      visible;

    opacity:
      1;
  }

  .clients-rail {
    height:
      auto;
  }

  .clients-title {
    text-align:
      left;
  }

  .clients-viewport {
    height:
      155px;
  }

  .clients-track {
    flex-direction:
      row;

    width:
      max-content;

    animation:
      clientsHorizontal
      16s
      linear
      infinite;
  }

  @keyframes clientsHorizontal {

    from {
      transform:
        translateX(0);
    }

    to {
      transform:
        translateX(-50%);
    }

  }

  .client-card {
    flex:
      0 0 210px;

    width:
      210px;
  }

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

    gap:
      12px;
  }

  .hero-bottom-center,
  .hero-bottom-right {
    justify-content:
      flex-start;
  }

  .services-heading {
    grid-template-columns:
      1fr;
  }

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

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

    gap:
      35px;
  }

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

    grid-template-rows:
      auto;
  }

  .case-legend {
    grid-row:
      auto;

    min-height:
      580px;
  }

  .case-rafs,
  .case-espetinho {
    min-height:
      420px;
  }

  .case-rafs
  .case-content,
  .case-espetinho
  .case-content {
    max-width:
      60%;
  }

  .portfolio-bottom {
    grid-template-columns:
      1fr;

    gap:
      25px;
  }

  .statement-copy h2 {
    font-size:
      clamp(
        3.8rem,
        8vw,
        6rem
      );
  }

}


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

@media (max-width: 820px) {

  .hero,
  .section,
  .footer,
  .portfolio-section {
    padding-left:
      22px;

    padding-right:
      22px;
  }


  /* NAV */

  .navbar {
    grid-template-columns:
      1fr
      auto;

    min-height:
      62px;
  }

  .nav-menu {
    display:
      none;
  }

  .nav-logo img {
    width:
      125px;
  }

  .nav-cta {
    min-height:
      40px;

    padding:
      0
      13px;

    font-size:
      10px;
  }


  /* HERO */

  .hero {
    min-height:
      auto;

    padding-top:
      16px;

    padding-bottom:
      28px;
  }

  .hero-main {
    display:
      flex;

    flex-direction:
      column;

    width:
      100%;

    gap:
      0;

    padding-top:
      38px;
  }

  .hero-left {
    width:
      100%;
  }

  .hero-kicker {
    margin-bottom:
      22px;

    font-size:
      9px;

    letter-spacing:
      2.7px;
  }

  .hero-left h1 {
    width:
      100%;

    font-size:
      clamp(
        3rem,
        13vw,
        4.7rem
      );

    line-height:
      0.92;
  }

  .hero-title-line {
    white-space:
      normal;
  }

  .hero-description {
    margin-top:
      25px;

    font-size:
      15px;

    line-height:
      1.65;
  }

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

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;
  }

  .btn {
    width:
      100%;

    min-height:
      52px;
  }


  /* HM MOBILE */

  .hero-right {
    display:
      flex !important;

    flex-direction:
      column;

    width:
      100%;

    min-width:
      0;

    visibility:
      visible !important;

    opacity:
      1 !important;

    margin-top:
      20px;
  }

  .hm-visual-wrap {
    display:
      flex !important;

    visibility:
      visible !important;

    opacity:
      1 !important;

    width:
      100%;

    height:
      310px;

    min-height:
      310px;

    max-height:
      310px;

    margin:
      0
      auto
      18px;
  }

  .hm-glow {
    width:
      310px;

    height:
      310px;

    left:
      50%;

    top:
      50%;

    transform:
      translate(
        -50%,
        -50%
      );
  }

  .hm-ring-one {
    width:
      255px;

    height:
      255px;

    left:
      50%;

    top:
      50%;

    transform:
      translate(
        -50%,
        -50%
      );
  }

  .hm-ring-two {
    width:
      320px;

    height:
      320px;

    left:
      50%;

    top:
      50%;

    transform:
      translate(
        -50%,
        -50%
      );
  }

  .hm-3d-image {
    display:
      block !important;

    visibility:
      visible !important;

    opacity:
      1 !important;

    width:
      88vw;

    max-width:
      390px;

    min-width:
      250px;

    max-height:
      250px;
  }


  /* CLIENTES */

  .clients-rail {
    width:
      100%;

    height:
      auto;

    margin-top:
      6px;
  }

  .clients-title {
    margin-bottom:
      12px;

    text-align:
      left;

    font-size:
      8px;

    letter-spacing:
      2px;
  }

  .clients-viewport {
    width:
      100%;

    height:
      132px;

    min-height:
      132px;

    padding:
      8px;
  }

  .clients-viewport::before,
  .clients-viewport::after {
    display:
      none;
  }

  .clients-track {
    display:
      flex;

    flex-direction:
      row;

    width:
      max-content;

    gap:
      10px;

    animation:
      clientsHorizontalMobile
      16s
      linear
      infinite;
  }

  @keyframes clientsHorizontalMobile {

    from {
      transform:
        translateX(0);
    }

    to {
      transform:
        translateX(-50%);
    }

  }

  .client-card {
    flex:
      0 0 165px;

    width:
      165px;

    height:
      112px;
  }


  /* METHOD MOBILE */

  .method-intro {
    padding:
      80px
      22px
      55px;

    grid-template-columns:
      1fr;

    gap:
      35px;
  }

  .method-intro h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );
  }

  .method-scroll-shell {
    display:
      none;
  }

  .method-mobile {
    display:
      grid;

    gap:
      15px;

    padding:
      0
      22px
      85px;
  }

  .method-mobile article {
    padding:
      28px
      24px;

    border:
      1px
      solid
      #d4e2ef;

    border-radius:
      24px;

    background:
      #fff;
  }

  .method-mobile article > span {
    display:
      block;

    margin-bottom:
      32px;

    font-size:
      10px;

    font-weight:
      800;

    letter-spacing:
      2px;

    color:
      var(--method-blue);
  }

  .method-mobile strong {
    display:
      block;

    margin-bottom:
      35px;

    font-size:
      3.5rem;

    line-height:
      0.9;

    color:
      var(--method-soft-blue);
  }

  .method-mobile h3 {
    margin-bottom:
      18px;

    font-size:
      1.9rem;

    color:
      var(--method-blue);
  }

  .method-mobile p {
    font-size:
      15px;

    line-height:
      1.75;

    color:
      #536178;
  }


  /* SERVICES */

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

    gap:
      30px;
  }

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

  .service-box {
    min-height:
      340px;
  }


  /* PORTFOLIO */

  .portfolio-section {
    padding-top:
      90px;

    padding-bottom:
      90px;
  }

  .portfolio-heading {
    margin-bottom:
      45px;
  }

  .portfolio-heading h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );
  }

  .case-card {
    padding:
      24px;

    border-radius:
      24px;
  }

  .case-legend {
    min-height:
      540px;
  }

  .case-rafs,
  .case-espetinho {
    min-height:
      440px;
  }

  .case-legend-visual {
    width:
      95%;

    height:
      45%;

    top:
      19%;

    right:
      -5%;
  }

  .case-rafs
  .case-content,
  .case-espetinho
  .case-content {
    max-width:
      100%;
  }


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

  .statement {
    min-height:
      auto;

    padding:
      90px
      22px
      34px;
  }

  .statement-inner {
    min-height:
      720px;

    justify-content:
      center;
  }

  .statement-brand {
    margin-bottom:
      20px;
  }

  .statement-logo-3d {
    width:
      180px;

    max-height:
      115px;
  }

  .statement-brand > span {
    font-size:
      8px;

    letter-spacing:
      3px;
  }

  .statement-eyebrow {
    margin-bottom:
      20px;

    font-size:
      8px;

    letter-spacing:
      2px;
  }

  .statement-copy h2 {
    font-size:
      clamp(
        3rem,
        13vw,
        4.8rem
      );

    line-height:
      0.92;
  }

  .statement-line-impact {
    margin-top:
      12px;
  }

  .statement-copy p {
    margin-top:
      28px;

    font-size:
      14px;

    line-height:
      1.7;
  }

  .statement-glow {
    width:
      420px;

    height:
      420px;
  }

  .statement-ring-one {
    width:
      260px;

    height:
      260px;
  }

  .statement-ring-two {
    width:
      390px;

    height:
      390px;
  }

  .statement-ring-three {
    width:
      540px;

    height:
      540px;
  }

  .statement-footer {
    grid-template-columns:
      repeat(
        2,
        1fr
      );

    gap:
      15px;

    row-gap:
      18px;
  }

  .statement-footer span {
    font-size:
      8px;
  }

  .statement-footer span::after {
    display:
      none;
  }


  /* FOOTER */

  .footer-top,
  .footer-bottom {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .footer-top p {
    text-align:
      left;
  }

}


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

@media (max-width: 430px) {

  .hero {
    padding-left:
      18px;

    padding-right:
      18px;
  }

  .nav-logo img {
    width:
      112px;
  }

  .nav-cta {
    padding:
      0
      11px;

    font-size:
      9px;
  }

  .hero-left h1 {
    font-size:
      clamp(
        2.8rem,
        12.5vw,
        4rem
      );
  }

  .hm-visual-wrap {
    height:
      285px;

    min-height:
      285px;

    max-height:
      285px;
  }

  .hm-3d-image {
    width:
      92vw;

    max-width:
      355px;

    min-width:
      235px;

    max-height:
      225px;
  }

  .statement-copy h2 {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      );
  }

  .statement-logo-3d {
    width:
      155px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  html {
    scroll-behavior:
      auto;
  }

  .hm-3d-image,
  .clients-track,
  .statement-logo-3d {
    animation:
      none;
  }

  .case-card,
  .case-open,
  .case-visual img {
    transition:
      none;
  }

}