/* =========================================================
   HERO FINAL — full-bleed photography + coral typography
   Only the hero is changed here. Desktop and mobile share the
   same photographic background treatment.
   ========================================================= */

.hero{
  min-height:930px!important;
  padding:155px 48px 70px!important;
  display:flex!important;
  align-items:flex-end!important;
  position:relative!important;
  overflow:hidden!important;
  background-image:url('../img/hero_kalibrai_human_ai.png')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(181,225,230,.10) 0%,
      rgba(181,225,230,.055) 28%,
      rgba(243,230,214,.08) 52%,
      rgba(243,230,214,0) 72%
    );
}

.hero .site-wrap-contents{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  display:block!important;
}

.hero-copy{
  width:min(58%,820px)!important;
  max-width:820px!important;
  padding:0 0 30px!important;
}

.hero h1,
.hero h1 *{
  background:linear-gradient(100deg,#E1005A 0%,#F00062 38%,#C40026 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

.hero h1 em{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-style:normal!important;
}

.hero .kicker,
.hero .lede{
  color:#55463F!important;
}

.hero .kicker:before{
  background:#55463F!important;
}

.hero .hero-cta{
  color:#C40026!important;
  border-bottom-color:#C40026!important;
}

.hero-visual{
  display:none!important;
}

@media(max-width:900px){
  .hero{
    min-height:100svh!important;
    height:auto!important;
    padding:112px 18px 48px!important;
    display:block!important;
    background-size:cover!important;
    background-position:58% center!important;
  }

  .hero::before{
    background:linear-gradient(
      180deg,
      rgba(243,230,214,.34) 0%,
      rgba(243,230,214,.14) 46%,
      rgba(243,230,214,.04) 100%
    )!important;
  }

  .hero .site-wrap-contents{
    display:block!important;
    width:100%!important;
    max-width:none!important;
  }

  .hero-copy{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
  }

  .hero .kicker{
    margin:0 0 18px!important;
  }

  .hero h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 24px!important;
    padding:0!important;
    font-size:50px!important;
    line-height:.93!important;
    letter-spacing:-.055em!important;
  }

  .hero .lede{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 18px!important;
    font-size:16px!important;
    line-height:1.65!important;
  }

  .hero .hero-cta{
    margin:0!important;
    font-size:10px!important;
  }
}

@media(max-width:560px){
  .hero{
    padding:106px 18px 48px!important;
    background-position:58% center!important;
  }

  .hero h1{
    font-size:50px!important;
    line-height:.93!important;
  }
}

/* =========================================================
   FINAL FILM PALETTE — brand + CTA interaction
   ========================================================= */

/* Brand: warm ochre "kalibr" + established film pink/red "AI". */
.hero .brand .calibr,
.hero .brand-lockup .calibr{
  color:#8A6B4A!important;
}

.hero .brand .ai,
.hero .brand-lockup .ai{
  background:linear-gradient(100deg,#E1005A 0%,#F00062 38%,#C40026 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

/* Cyan is deliberately reserved for interaction. */
.hero .hero-cta,
.hero .hero-cta span{
  color:#C40026!important;
}

.hero .hero-cta:hover,
.hero .hero-cta:hover span{
  color:#79D9DF!important;
}

.hero .hero-cta:hover{
  border-bottom-color:#79D9DF!important;
}

@media(max-width:900px){
  .hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(181,225,230,.10) 0%,
        rgba(243,230,214,.12) 42%,
        rgba(243,230,214,.035) 100%
      )!important;
  }
}

/* =========================================================
   LOGO FIX — header brand is outside .hero
   ========================================================= */

header .brand .calibr,
.nav .brand .calibr{
  color:#8A6B4A!important;
  -webkit-text-fill-color:#8A6B4A!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
}

header .brand .ai,
.nav .brand .ai{
  color:#E1005A!important;
  -webkit-text-fill-color:#E1005A!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
}

header .brand .brand-mark,
.nav .brand .brand-mark{
  background:#E1005A!important;
}

/* =========================================================
   TYPOGRAPHY COLOR — #363433
   ========================================================= */

.hero .kicker,
.hero .lede,
.hero p,
.hero .hero-copy,
.hero .hero-copy p,
header .brand .calibr,
.nav .brand .calibr{
  color:#363433!important;
  -webkit-text-fill-color:#363433!important;
}

/* Remove the decorative dot/mark before the brand. */
header .brand:before,
header .brand:after,
.nav .brand:before,
.nav .brand:after{
  display:none!important;
  content:none!important;
}

header .brand .brand-mark,
.nav .brand .brand-mark{
  display:none!important;
}

/* =========================================================
   SECOND SECTION — TEXT HIERARCHY
   ========================================================= */

/* Running copy: white for maximum readability on the pink field. */
.section-2 p,
.section-two p,
.section-intro p,
.split-section p,
.content-section p{
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
}

/* Key insight: cyan accent. */
.section-2 .highlight,
.section-two .highlight,
.section-intro .highlight,
.split-section .highlight,
.content-section .highlight{
  color:#79D9DF!important;
  -webkit-text-fill-color:#79D9DF!important;
}

/* Secondary metadata remains dark graphite. */
.section-2 .meta,
.section-two .meta,
.section-intro .meta,
.split-section .meta,
.content-section .meta{
  color:#363433!important;
  -webkit-text-fill-color:#363433!important;
}

/* Explicit accent for the "O ganho..." statement. */
section:nth-of-type(2) .gain,
section:nth-of-type(2) .insight,
section:nth-of-type(2) .statement{
  color:#79D9DF!important;
  -webkit-text-fill-color:#79D9DF!important;
}


/* =========================================================
   KALIBRAI BRAND — UNIFIED TYPOGRAPHY
   Same visual lockup in the three brand occurrences:
   kalibr = bold / AI = light.
   Typography only. No layout reconstruction.
   ========================================================= */

header .brand,
.nav .brand,
.site-footer__mark,
.brand-v33__lockup {
  font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-style:normal!important;
  display:inline-flex;
  align-items:baseline;
  line-height:.88;
}

header .brand .brand-mark,
.nav .brand .brand-mark {
  display:none!important;
}

header .brand .calibr,
.nav .brand .calibr,
.site-footer__mark-base,
.brand-v33__kalibr {
  font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-weight:700!important;
  font-style:normal!important;
  letter-spacing:-.095em!important;
  color:#363433!important;
  -webkit-text-fill-color:#363433!important;
}

header .brand .ai,
.nav .brand .ai,
.site-footer__mark-ai,
.brand-v33__ai {
  font-family:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-weight:300!important;
  font-style:normal!important;
  letter-spacing:-.105em!important;
  color:#E1005A!important;
  -webkit-text-fill-color:#E1005A!important;
}

/* Appropriate scale only; proportions remain identical. */
header .brand .calibr,
.nav .brand .calibr { font-size:24px!important; }

header .brand .ai,
.nav .brand .ai { font-size:20px!important; }

.site-footer__mark { font-size:28px!important; }
.site-footer__mark-base { font-size:28px!important; }
.site-footer__mark-ai { font-size:23px!important; }

/* Keep the existing large identity lockup large; only its typography is unified. */
.brand-v33__kalibr {
  font-size:clamp(82px,11vw,164px)!important;
}
.brand-v33__ai {
  font-size:clamp(68px,8.4vw,126px)!important;
}


/* =========================================================
   MOBILE HERO IMAGE — dedicated portrait artwork
   Desktop remains untouched.
   The mobile asset is loaded only at the mobile breakpoint.
   ========================================================= */
@media (max-width:900px){
  .hero{
    background-image:url('../img/hero_kalibrai_human_ai_mobile.png')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center top!important;
  }
}

@media (max-width:560px){
  .hero{
    background-image:url('../img/hero_kalibrai_human_ai_mobile.png')!important;
    background-size:cover!important;
    background-position:center top!important;
  }
}