.container {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto
}

.container--narrow {
    width: min(calc(100% - 40px), var(--container-narrow));
    margin-inline: auto
}

.section {
    padding: var(--space-9) 0
}

.section--navy {
    background: var(--ikg-navy-900);
    color: #fff
}

.grid {
    display: grid;
    gap: var(--space-5)
}

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

.grid--4 {
    grid-template-columns: repeat(4, 1fr)
}

.stack>*+* {
    margin-top: var(--space-4)
}

.ds-hero {
    padding: 90px 0 70px;
    background: radial-gradient(circle at 80% 10%, rgba(230, 201, 141, .34), transparent 28%), linear-gradient(135deg, #fff 0%, var(--ikg-offwhite) 58%, #edf2f7 100%);
    border-bottom: 1px solid var(--ikg-line)
}

.ds-hero h1 {
    font-size: var(--display-sm);
    max-width: 850px;
    margin-bottom: 20px
}

.ds-hero h1 span {
    color: var(--ikg-gold-500)
}

.ds-section-title {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 36px
}

.ds-section-title h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin: 0
}

.ds-section-title p {
    max-width: 560px;
    color: var(--ikg-text);
    margin: 0
}

.site-header {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    height: var(--header-h);
    transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition)
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 8px 30px rgba(7, 27, 53, .06);
    backdrop-filter: blur(18px)
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 260px
}

.brand__mark {
    position: relative;
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -.08em;
    line-height: 1;
    color: var(--ikg-navy-950)
}

.brand__mark i {
    position: absolute;
    width: 7px;
    height: 23px;
    background: var(--ikg-gold-500);
    left: 4px;
    top: -5px;
    transform: skew(-13deg);
    z-index: -1
}

.brand__descriptor {
    text-transform: uppercase;
    font-size: .56rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .03em
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    margin-left: auto
}

.site-nav a {
    font-size: .82rem;
    font-weight: 650;
    position: relative
}

.site-nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -8px;
    height: 1px;
    background: var(--ikg-gold-500);
    transition: right var(--transition)
}

.site-nav a:hover:after {
    right: 0
}

.site-header__cta {
    min-height: 44px;
    padding-inline: 18px;
    font-size: .76rem
}

.menu-toggle {
    display: none;
    margin-left: auto;
    border: 0;
    background: transparent;
    width: 44px;
    height: 44px;
    padding: 10px
}

.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--ikg-navy-900);
    margin: 6px 0
}

.hero {
    position: relative;
    min-height: 790px;
    padding: calc(var(--header-h) + 92px) 0 0;
    overflow: hidden;
    background: #f5f6f7
}

/* .hero__media {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 43%;
    background: url('../img/hero/hero2.png') center/cover no-repeat;
    filter: saturate(.78) contrast(.98)
} */

.hero__wash {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 36%, rgba(255, 255, 255, .54) 58%, rgba(246, 244, 239, .04) 78%), linear-gradient(0deg, rgba(246, 244, 239, .95) 0%, transparent 27%)
}

.hero__grid {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(340px, .72fr);
    gap: 7vw;
    align-items: center
}

.hero__content {
    max-width: 710px
}

.hero__eyebrow {
    margin-bottom: 20px
}

.hero__eyebrow b {
    font-weight: 400;
    margin: 0 5px;
    color: var(--ikg-gold-300)
}

.hero h1 {
    font-family: var(--font-sans);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: -.055em;
    font-size: clamp(3.1rem, 5.55vw, 6.15rem);
    line-height: .96;
    margin-bottom: 28px
}

.hero h1 span {
    font-weight: 430;
    color: var(--ikg-gold-500)
}

.hero__lead {
    max-width: 610px;
    font-size: 1.05rem;
    color: var(--ikg-navy-800);
    line-height: 1.8
}

.hero__actions {
    margin-top: 30px;
    align-items: center
}

.hero__video {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 750;
    line-height: 1.35
}

.hero__play {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ikg-gold-500);
    color: var(--ikg-gold-600);
    font-size: .7rem
}

.hero-pillars {
    display: grid;
    gap: 16px;
    justify-self: end;
    width: min(100%, 390px);
    transform: translateY(20px)
}

.hero-pillar {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: linear-gradient(135deg, rgba(7, 27, 53, .90), rgba(7, 27, 53, .70));
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(7, 27, 53, .20);
    backdrop-filter: blur(14px);
    transition: transform var(--transition), background var(--transition)
}

.hero-pillar:nth-child(2) {
    transform: translateX(24px)
}

.hero-pillar:nth-child(3) {
    transform: translateX(48px)
}

.hero-pillar:hover {
    background: rgba(7, 27, 53, .95);
    transform: translateX(-5px)
}

.hero-pillar:nth-child(2):hover {
    transform: translateX(19px)
}

.hero-pillar:nth-child(3):hover {
    transform: translateX(43px)
}

.hero-pillar__icon {
    color: var(--ikg-gold-300);
    font-size: 1.65rem;
    line-height: 1
}

.hero-pillar h2 {
    font-family: var(--font-sans);
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 6px
}

.hero-pillar p {
    font-size: .76rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .76);
    margin: 0
}

.hero__metrics {
    position: relative;
    z-index: 5;
    margin-top: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(7, 27, 53, .89);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(7, 27, 53, .22);
    backdrop-filter: blur(16px);
    overflow: hidden
}

.hero-metric {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    position: relative
}

.hero-metric:not(:last-child):after {
    content: "";
    position: absolute;
    right: 0;
    width: 1px;
    height: 48%;
    background: rgba(255, 255, 255, .18)
}

.hero-metric__icon {
    font-size: 1.65rem;
    color: var(--ikg-gold-300)
}

.hero-metric strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1
}

.hero-metric small {
    display: block;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .58rem;
    color: rgba(255, 255, 255, .74)
}

.hero__flow {
    position: absolute;
    z-index: 2;
    width: 55vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ikg-gold-300), transparent);
    opacity: .7;
    filter: drop-shadow(0 0 7px var(--ikg-gold-300));
    transform-origin: left
}

.hero__flow--one {
    right: -7vw;
    top: 48%;
    transform: rotate(-14deg)
}

.hero__flow--two {
    right: -10vw;
    top: 57%;
    transform: rotate(8deg)
}

.client-preview {
    background: #fff;
    padding: 35px 0 42px;
    border-bottom: 1px solid var(--ikg-line)
}

.client-preview__inner {
    text-align: center
}

.client-preview__inner>p {
    text-transform: uppercase;
    font-size: .65rem;
    letter-spacing: .08em;
    font-weight: 800
}

.client-placeholder {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    align-items: center;
    margin: 26px 0 14px
}

.client-placeholder span {
    font-size: .83rem;
    font-weight: 850;
    letter-spacing: .06em;
    color: #9aa2ab;
    filter: grayscale(1)
}

.client-preview small {
    font-size: .65rem;
    color: var(--ikg-muted)
}

.sprint-next {
    padding: 100px 0;
    background: var(--ikg-offwhite)
}

.sprint-next h2 {
    max-width: 850px;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    color: var(--ikg-navy-900)
}

.sprint-next>div>p:last-child {
    color: var(--ikg-text)
}


/* ==========================================================
   REVISÃO SPRINT 1.6 — HEADER / ALINHAMENTO
   ========================================================== */
.site-header{
  height:92px;
}
.site-header__inner{
  gap:32px;
}
.brand{
  min-width:300px;
  gap:15px;
}
.brand__mark{
  font-size:2.25rem;
}
.brand__descriptor{
  font-size:.64rem;
  line-height:1.28;
  letter-spacing:.035em;
}
.site-nav{
  gap:30px;
}
.site-nav a{
  font-size:.94rem;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.site-header__cta{
  min-height:48px;
  padding-inline:22px;
  font-size:.84rem;
  white-space:nowrap;
}
