/**
 * Block: new-alliance/hero
 * BEM + Design System tokens via theme.json custom properties
 */

.na-hero {
    position: relative;
    min-height: min(100vh, 900px);
    display: flex;
    align-items: center;
    padding-block: var(--wp--preset--spacing--stack-md, 64px);
    padding-inline: var(--wp--preset--spacing--gutter, 24px);
    overflow: hidden;
    background-color: var(--wp--preset--color--background, #131315);
}

.na-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 70% 40%, rgb(143 205 255 / 6%), transparent),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgb(90 218 207 / 4%), transparent);
    pointer-events: none;
}

.na-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
    width: 100%;
    max-width: var(--na-container-max, 1280px);
    margin-inline: auto;
}

.na-hero__content {
    min-width: 0;
    max-width: 48rem;
}

.na-hero__visual {
    margin: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.na-hero__visual-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

.na-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding: 4px 12px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary, #8fcdff);
    border: 1px solid rgb(143 205 255 / 20%);
    border-radius: 4px;
    background: rgb(143 205 255 / 5%);
}

.na-hero__eyebrow-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #8fcdff);
}

.na-hero__eyebrow-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #8fcdff);
    animation: na-hero-pulse 2s ease-out infinite;
}

@keyframes na-hero-pulse {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.na-hero__title {
    margin: 0 0 32px;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}

.na-hero__title-highlight {
    font-style: italic;
    color: var(--wp--preset--color--primary, #8fcdff);
}

.na-hero__description {
    margin: 0 0 40px;
    max-width: 36rem;
    padding-left: 24px;
    border-left: 2px solid rgb(143 205 255 / 30%);
    font-size: var(--wp--preset--font-size--body-lg, 18px);
    line-height: 1.6;
    color: var(--wp--preset--color--on-surface-variant, #bfc7d1);
}

.na-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

/* .na-hero__cta → padrão .na-btn em style.css */

.na-hero__metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--text-dim, #a1a1aa);
}

.na-hero__metric {
    margin: 0;
}

.na-hero__metric dd {
    margin: 0;
}

.na-hero__metrics-separator {
    color: rgb(143 205 255 / 40%);
}

@media (max-width: 768px) {
    .na-hero {
        min-height: auto;
        padding-inline: var(--na-margin-mobile, 16px);
    }

    .na-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .na-hero__visual {
        margin-inline: auto;
    }

    .na-hero__visual-image {
        max-width: min(100%, 22rem);
    }
}

@media (min-width: 960px) {
    .na-hero--has-visual .na-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .na-hero__eyebrow-pulse::before {
        animation: none;
    }
}
/* Gutters desktop — inner containers */
@media (min-width: 769px) {
    .na-mission__inner,
    .na-timeline__inner,
    .na-platform__inner,
    .na-stack__inner,
    .na-cases__inner {
        padding-inline: var(--na-gutter, 24px);
    }
}

/* Gutters mobile — padding na section (evita assimetria por overflow do alignfull) */
@media (max-width: 768px) {
    .na-landing-canvas > .alignfull:not(.na-hero) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: var(--na-margin-mobile, 16px);
    }

    .na-mission__inner,
    .na-timeline__inner,
    .na-platform__inner,
    .na-stack__inner,
    .na-cases__inner {
        padding-inline: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .na-mission__grid {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .na-mission__card {
        min-width: 0;
        padding: 20px 16px;
        overflow-wrap: anywhere;
    }
}

.na-mission {
    position: relative;
    padding-block: var(--wp--preset--spacing--stack-xl, 120px);
    background: var(--wp--preset--color--surface-deep, #050505);
}

.na-mission__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image:
        linear-gradient(rgb(143 205 255 / 8%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(143 205 255 / 8%) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.na-mission__inner {
    position: relative;
    max-width: var(--na-container-max, 1280px);
    margin-inline: auto;
}

.na-mission__header {
    max-width: 56rem;
    margin-bottom: 96px;
}

.na-mission__title {
    margin: 0 0 32px;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}

.na-mission__title-highlight {
    color: var(--wp--preset--color--primary, #8fcdff);
}

.na-mission__description {
    margin: 0;
    max-width: 42rem;
    font-size: var(--wp--preset--font-size--body-lg, 18px);
    line-height: 1.6;
    color: var(--wp--preset--color--on-surface-variant, #bfc7d1);
}

.na-mission__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .na-mission__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .na-mission__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.na-mission__card {
    padding: 24px;
    border: 1px solid rgb(137 146 155 / 10%);
    background: var(--wp--preset--color--surface-container-low, #1c1b1d);
    transition: border-color 0.2s ease;
}

.na-mission__card:hover {
    border-color: rgb(143 205 255 / 40%);
}

.na-mission__code {
    display: block;
    margin-bottom: 16px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: var(--wp--preset--color--primary, #8fcdff);
}

.na-mission__label {
    margin: 0;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}
.na-timeline { padding-block: var(--wp--preset--spacing--stack-xl, 120px); }
.na-timeline__inner { max-width: var(--na-container-max, 1280px); margin-inline: auto; }
.na-timeline__eyebrow { display: block; margin-bottom: 12px; font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace); font-size: 11px; color: var(--wp--preset--color--primary, #8fcdff); text-transform: uppercase; letter-spacing: 0.05em; }
.na-timeline__title { margin: 0 0 48px; font-family: var(--wp--preset--font-family--display, Geist, sans-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--wp--preset--color--on-surface, #e5e1e4); }
.na-timeline__track { display: grid; gap: 32px; grid-template-columns: 1fr; position: relative; }
@media (min-width: 1024px) { .na-timeline__track { grid-template-columns: repeat(4, 1fr); gap: 24px; } .na-timeline__step--offset { margin-top: 64px; } }
.na-timeline__badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border: 1px solid var(--wp--preset--color--primary, #8fcdff); border-radius: 50%; font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace); font-size: 12px; color: var(--wp--preset--color--primary, #8fcdff); background: var(--wp--preset--color--surface-deep, #050505); }
.na-timeline__step-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; color: var(--wp--preset--color--on-surface, #e5e1e4); }
.na-timeline__step-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--on-surface-variant, #bfc7d1); }
.na-platform {
    padding-block: var(--wp--preset--spacing--stack-xl, 120px);
    background: var(--wp--preset--color--surface-container-lowest, #0e0e10);
}

.na-platform__inner {
    display: grid;
    gap: 64px;
    max-width: var(--na-container-max, 1280px);
    margin-inline: auto;
    align-items: center;
}

@media (min-width: 1024px) {
    .na-platform__inner {
        grid-template-columns: 5fr 7fr;
    }
}

.na-platform__eyebrow {
    display: block;
    margin-bottom: 16px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: var(--wp--preset--color--primary, #8fcdff);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.na-platform__title {
    margin: 0 0 32px;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}

.na-platform__description {
    margin: 0 0 40px;
    font-size: var(--wp--preset--font-size--body-lg, 18px);
    line-height: 1.6;
    color: var(--wp--preset--color--on-surface-variant, #bfc7d1);
}

.na-platform__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 13px;
    color: var(--wp--preset--color--text-dim, #a1a1aa);
}

.na-platform__features li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.na-platform__features li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #8fcdff);
    flex-shrink: 0;
}

.na-platform__diagram {
    position: relative;
    padding: 32px;
    background: var(--wp--preset--color--surface-deep, #050505);
    border: 1px solid rgb(137 146 155 / 20%);
    border-radius: 12px;
    box-shadow: 0 24px 48px rgb(0 0 0 / 35%);
}

.na-platform__diagram-label {
    position: absolute;
    top: 16px;
    left: 24px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 10px;
    text-transform: uppercase;
    color: rgb(143 205 255 / 40%);
}

.na-platform__svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 200px;
    margin-top: 24px;
}
.na-stack {
    padding-block: var(--wp--preset--spacing--stack-xl, 120px);
}

.na-stack__inner {
    max-width: var(--na-container-max, 1280px);
    margin-inline: auto;
}

.na-stack__header {
    margin-bottom: 80px;
    text-align: center;
}

.na-stack__title {
    margin: 0 0 16px;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}

.na-stack__description {
    margin: 0 auto;
    max-width: 42rem;
    font-size: var(--wp--preset--font-size--body-md, 16px);
    line-height: 1.6;
    color: var(--wp--preset--color--on-surface-variant, #bfc7d1);
}

.na-stack__grid {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .na-stack__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.na-stack__card {
    padding: 32px;
    background: var(--wp--preset--color--surface-subtle, #16161a);
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.na-stack__card:hover {
    border-color: rgb(143 205 255 / 40%);
    background: rgb(143 205 255 / 2%);
}

.na-stack__category {
    display: block;
    margin-bottom: 24px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 11px;
    color: var(--wp--preset--color--primary, #8fcdff);
}

.na-stack__name {
    margin: 0 0 8px;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}

.na-stack__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--wp--preset--color--on-surface-variant, #bfc7d1);
}
.na-cases { padding-block: var(--wp--preset--spacing--stack-xl, 120px); background: var(--wp--preset--color--surface-deep, #050505); }
.na-cases__inner { max-width: var(--na-container-max, 1280px); margin-inline: auto; }
.na-cases__title { margin: 0 0 48px; font-family: var(--wp--preset--font-family--display, Geist, sans-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--wp--preset--color--on-surface, #e5e1e4); }
.na-cases__list { display: flex; flex-direction: column; gap: 64px; }
.na-cases__row { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgb(137 146 155 / 10%); }
@media (min-width: 1024px) { .na-cases__row { grid-template-columns: 5fr 7fr; align-items: center; } .na-cases__row--image-right .na-cases__media { order: 2; } .na-cases__row--image-right .na-cases__content { order: 1; } }
.na-cases__media { min-height: 400px; overflow: hidden; border-radius: 4px; position: relative; }
.na-cases__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(143 205 255 / 10%);
    mix-blend-mode: overlay;
    pointer-events: none;
}
.na-cases__image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s ease; }
.na-cases__row:hover .na-cases__image { filter: grayscale(0%); }
.na-cases__sector { display: inline-block; margin-bottom: 12px; font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace); font-size: 11px; color: var(--wp--preset--color--primary, #8fcdff); text-transform: uppercase; }
.na-cases__case-title { margin: 0 0 24px; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 600; color: var(--wp--preset--color--on-surface, #e5e1e4); }
.na-cases__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .na-cases__grid { grid-template-columns: repeat(3, 1fr); } }
.na-cases__label { display: block; margin-bottom: 8px; font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--text-dim, #a1a1aa); }
.na-cases__cell p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wp--preset--color--on-surface-variant, #bfc7d1); }
.na-cases__cell--highlight p { font-weight: 600; color: var(--wp--preset--color--primary, #8fcdff); }
.na-cta {
    padding-block: var(--wp--preset--spacing--stack-md, 64px);
    padding-inline: var(--na-margin-mobile, 16px);
}

@media (min-width: 769px) {
    .na-cta {
        padding-inline: var(--na-gutter, 24px);
    }
}

.na-cta__card {
    position: relative;
    max-width: var(--na-container-max, 1280px);
    margin-inline: auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--wp--preset--color--surface-subtle, #16161a);
    border: 1px solid rgb(143 205 255 / 10%);
    border-radius: 4px;
    overflow: hidden;
}

.na-cta__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgb(143 205 255 / 8%), transparent 60%);
    pointer-events: none;
}

.na-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin-inline: auto;
}

.na-cta__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-family: var(--wp--preset--font-family--mono, "JetBrains Mono", monospace);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary, #8fcdff);
}

.na-cta__title {
    margin: 0 0 24px;
    font-family: var(--wp--preset--font-family--display, Geist, sans-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--on-surface, #e5e1e4);
}

.na-cta__description {
    margin: 0 0 32px;
    font-size: var(--wp--preset--font-size--body-lg, 18px);
    line-height: 1.6;
    color: var(--wp--preset--color--on-surface-variant, #bfc7d1);
}

/* .na-cta__button → padrão .na-btn em style.css */

@media (max-width: 768px) {
    .na-cta__card {
        padding: 32px 20px;
    }

    .na-mission__header {
        margin-bottom: 48px;
    }

    .na-stack__header {
        margin-bottom: 40px;
    }

    .na-timeline {
        padding-block: var(--na-stack-md, 64px);
    }

    .na-mission,
    .na-platform,
    .na-stack,
    .na-cases {
        padding-block: var(--na-stack-md, 64px);
    }

    .na-cases__media {
        min-height: min(280px, 56vw);
    }

    .na-hero__metrics {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .na-hero__metrics-separator {
        display: none;
    }
}

.na-cta--secondary .na-cta__card {
    background: var(--wp--preset--color--surface-container, #201f21);
    border: 1px solid var(--wp--preset--color--border-muted, #232326);
}

.na-cta--secondary .na-cta__glow {
    opacity: 0.35;
}

.na-cta--secondary .na-cta__button {
    color: var(--wp--preset--color--on-surface, #e5e1e4);
    background: transparent;
    border-color: rgb(143 205 255 / 35%);
}