:root {
    --ink: #09121e;
    --ink-2: #0e1b2c;
    --paper: #f8f1df;
    --paper-soft: rgba(248, 241, 223, 0.76);
    --muted: #b9c2c2;
    --line: rgba(255, 255, 255, 0.12);
    --gold: #f4b860;
    --copper: #ef7b45;
    --mint: #2dd4bf;
    --blue: #6aa6ff;
    --panel: rgba(10, 24, 39, 0.72);
    --panel-strong: rgba(13, 31, 50, 0.88);
    --shadow: 0 30px 100px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(45, 212, 191, 0.18), transparent 30vw),
        radial-gradient(circle at 84% 0%, rgba(244, 184, 96, 0.18), transparent 28vw),
        radial-gradient(circle at 70% 86%, rgba(239, 123, 69, 0.18), transparent 34vw),
        linear-gradient(145deg, #07101c 0%, #0c1929 46%, #10100c 100%);
    color: var(--paper);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    content: "";
    opacity: 0.34;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

body::after {
    position: fixed;
    inset: auto -15vw -40vh auto;
    z-index: -1;
    width: 52vw;
    height: 52vw;
    min-width: 460px;
    min-height: 460px;
    pointer-events: none;
    content: "";
    border-radius: 999px;
    background: conic-gradient(from 190deg, rgba(244, 184, 96, 0.24), rgba(45, 212, 191, 0.22), transparent, rgba(239, 123, 69, 0.20));
    filter: blur(42px);
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

main {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.72fr);
    gap: clamp(2rem, 5vw, 5rem);
    min-height: calc(100vh - 88px);
    align-items: center;
    padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 7vw, 6rem);
}

.hero-copy {
    position: relative;
}

.hero-copy::before {
    position: absolute;
    top: -64px;
    left: -54px;
    width: 132px;
    height: 132px;
    content: "";
    border: 1px solid rgba(244, 184, 96, 0.28);
    border-radius: 42px;
    transform: rotate(18deg);
}

.eyebrow {
    margin: 0 0 0.85rem;
    color: var(--mint);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2 {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-weight: 700;
    letter-spacing: -0.055em;
}

/*
   Headings sit inside grid columns roughly half the viewport wide, so vw-based
   sizing has to stay well below the column's share of the viewport or the text
   breaks to one or two words per line.
*/
h1 {
    max-width: 880px;
    margin-bottom: 1.35rem;
    font-size: clamp(2.9rem, 4.15vw, 4.9rem);
    line-height: 0.94;
}

/*
   FocusOnNavigate in Routes.razor gives the h1 tabindex="-1" and focuses it on
   navigation so screen readers land on the page title. That also draws the
   browser's focus ring, which Safari traces around the heading's line boxes and
   so renders as a ragged, stepped box. The heading is not interactive and
   tabindex="-1" keeps it out of the tab order, so hiding the ring costs no
   keyboard accessibility while keeping the screen-reader benefit.
*/
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

h2 {
    font-size: clamp(1.8rem, 2.7vw, 2.9rem);
    line-height: 1.04;
}

h3 {
    color: var(--paper);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero-lede,
.section-intro p,
.method-copy p,
.contact-section p,
.profile-card li {
    color: var(--paper-soft);
    font-size: clamp(1.03rem, 1.65vw, 1.2rem);
    line-height: 1.72;
}

.hero-lede {
    max-width: 760px;
    margin-bottom: 2rem;
}

.hero-actions,
.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.primary-link,
.secondary-link {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.primary-link {
    padding: 0 1.4rem;
    color: #10100c;
    background: linear-gradient(135deg, var(--gold), #ffdd8c);
    box-shadow: 0 18px 48px rgba(244, 184, 96, 0.24);
}

.secondary-link {
    padding: 0 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--paper);
    background: rgba(255, 255, 255, 0.05);
}

.primary-link:hover,
.secondary-link:hover,
.primary-link:focus-visible,
.secondary-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 760px;
    margin-top: 2.4rem;
}

.proof-strip div {
    padding: 1.05rem;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.045);
}

.proof-strip strong,
.proof-strip span {
    display: block;
}

.proof-strip strong {
    color: var(--gold);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.95rem;
    letter-spacing: -0.04em;
}

.proof-strip span {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

.hero-console {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 42px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(7, 16, 28, 0.74);
    box-shadow: var(--shadow);
}

.hero-console::before {
    position: absolute;
    inset: -40% -35% auto auto;
    width: 78%;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.30), transparent 68%);
}

.console-topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.console-topline strong {
    color: var(--paper);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.portrait-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 390px;
    margin: 1.6rem 0 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 34px;
    background:
        radial-gradient(circle at 78% 12%, rgba(244, 184, 96, 0.20), transparent 38%),
        rgba(255, 255, 255, 0.06);
}

.portrait-card img {
    display: block;
    width: 100%;
    height: 440px;
    object-fit: cover;
    object-position: 50% 14%;
}

.portrait-overlay {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: rgba(7, 16, 28, 0.72);
    backdrop-filter: blur(18px);
}

.portrait-overlay span,
.portrait-overlay strong {
    display: block;
}

.portrait-overlay span {
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.portrait-overlay strong {
    margin-top: 0.25rem;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -0.05em;
}

.kpi-orbit {
    position: relative;
    display: grid;
    min-height: 340px;
    place-items: center;
    margin: 2rem 0;
}

.orbital-ring {
    position: absolute;
    width: min(82%, 320px);
    aspect-ratio: 1;
    border: 1px solid rgba(244, 184, 96, 0.28);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(244, 184, 96, 0.07), transparent 58%),
        conic-gradient(from 120deg, rgba(45, 212, 191, 0.7), rgba(244, 184, 96, 0.28), transparent, rgba(45, 212, 191, 0.7));
    mask: radial-gradient(circle, transparent 58%, black 59%);
    animation: slow-spin 18s linear infinite;
}

@keyframes slow-spin {
    to {
        transform: rotate(360deg);
    }
}

.kpi-core {
    position: relative;
    display: grid;
    width: 180px;
    height: 180px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(9, 18, 30, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 25px 70px rgba(0, 0, 0, 0.30);
}

.kpi-core span,
.kpi-core em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.kpi-core strong {
    margin: -0.7rem 0;
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: 4.4rem;
    line-height: 1;
    letter-spacing: -0.08em;
}

.kpi-chip {
    position: absolute;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: var(--paper);
    font-size: 0.8rem;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.chip-one {
    top: 42px;
    left: 24px;
    color: var(--gold);
}

.chip-two {
    right: 18px;
    bottom: 74px;
    color: var(--mint);
}

.chip-three {
    bottom: 34px;
    left: 38px;
    color: var(--blue);
}

.signal-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.9rem;
}

/*
   FlexCore styles these controls for a light background in component-scoped
   CSS, which Blazor compiles to `.fx-progress[b-…]`. That outranks a plain
   two-class selector and is loaded after this file, so the dark treatment below
   repeats the class purely to win on specificity. Overriding here rather than
   editing vendor/FlexCore keeps that control general-purpose for other hosts.
*/
.signal-stack .fx-progress.fx-progress,
.active-brief .fx-chart.fx-chart {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--paper);
}

.signal-stack .fx-progress.fx-progress {
    margin: 0;
    padding: 1rem;
}

.signal-stack .fx-progress-header.fx-progress-header {
    color: var(--paper);
    font-weight: 900;
}

.signal-stack .fx-progress-status.fx-progress-status,
.signal-stack .fx-progress-detail.fx-progress-detail {
    color: var(--muted);
}

/* The control defaults this to a monospace stack, which reads as raw terminal
   output next to the rest of the page. */
.signal-stack .fx-progress-detail.fx-progress-detail {
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
}

.signal-stack .fx-progress-track.fx-progress-track {
    background: rgba(255, 255, 255, 0.10);
}

.signal-stack .fx-progress-fill.fx-progress-fill {
    background: linear-gradient(90deg, var(--mint), var(--gold));
}

.section-grid,
.results-section,
.services-section,
.background-section,
.method-section,
.testimonials-section,
.credibility-section,
.documents-section,
.contact-section {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.section-grid {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.section-intro {
    position: sticky;
    top: 124px;
}

.edge-cards {
    display: grid;
    gap: 1rem;
}

.edge-card,
.result-card,
.service-card,
.active-brief,
.background-panel,
.background-list article,
.timeline article,
.testimonial-card,
.quote-card,
.profile-card,
.documents-section,
.document-list a,
.contact-section {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.edge-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 1.2rem;
    padding: clamp(1.15rem, 2.2vw, 1.8rem);
    border-radius: 32px;
}

.edge-card span {
    color: rgba(244, 184, 96, 0.6);
    font-family: "Newsreader", Georgia, serif;
    font-size: 3.2rem;
    letter-spacing: -0.08em;
}

.edge-card p,
.result-card p,
.service-card p,
.background-panel p,
.background-list p,
.timeline p,
.testimonial-card em,
.quote-card span {
    color: var(--muted);
    line-height: 1.7;
}

.section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(240px, 0.42fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.5rem;
}

.section-heading h2 {
    max-width: 820px;
}

.section-heading > p {
    color: var(--paper-soft);
    line-height: 1.7;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.result-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem;
    border-radius: 30px;
    background:
        radial-gradient(circle at 90% 0%, rgba(244, 184, 96, 0.13), transparent 38%),
        var(--panel);
}

.result-card span,
.background-list span,
.document-list span {
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.result-card strong {
    display: block;
    color: var(--gold);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 0.9;
    letter-spacing: -0.08em;
}

.service-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.service-card {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    border-radius: 30px;
    transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.service-card.active {
    border-color: rgba(45, 212, 191, 0.55);
    background: linear-gradient(145deg, rgba(45, 212, 191, 0.12), rgba(255, 255, 255, 0.055));
    transform: translateY(-4px);
}

.service-card span {
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.service-button {
    width: max-content;
    padding: 0.7rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: var(--paper);
    font-weight: 900;
    background: rgba(255, 255, 255, 0.07);
}

.service-card.active .service-button {
    color: #07101c;
    background: var(--mint);
}

.active-brief {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.62fr);
    gap: 2rem;
    align-items: center;
    margin-top: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 34px;
}

.active-brief p {
    color: var(--paper-soft);
    line-height: 1.72;
}

.active-brief .fx-chart {
    padding: 1rem;
}

.active-brief .fx-chart-title {
    color: var(--paper);
    font-weight: 900;
}

.active-brief .fx-chart-row-label,
.active-brief .fx-chart-row-value {
    color: var(--muted);
}

.active-brief .fx-chart-row-bar-container {
    background: rgba(255, 255, 255, 0.08);
}

.background-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.background-panel,
.background-list article {
    border-radius: 34px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.background-panel {
    background:
        radial-gradient(circle at 10% 0%, rgba(45, 212, 191, 0.16), transparent 42%),
        var(--panel-strong);
}

.background-list {
    display: grid;
    gap: 1rem;
}

.background-list article {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    align-items: start;
}

.method-section {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.timeline {
    position: relative;
    display: grid;
    gap: 1rem;
}

.timeline::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 28px;
    content: "";
    border-left: 1px dashed rgba(244, 184, 96, 0.30);
}

.timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    padding: 1.05rem;
    border-radius: 26px;
}

.timeline span {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 18px;
    color: var(--ink);
    font-weight: 900;
    background: var(--gold);
}

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

.testimonial-card {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.25rem, 3vw, 1.8rem);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--panel);
}

.testimonial-card p {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
}

.testimonial-card span,
.testimonial-card em {
    display: block;
}

.testimonial-card span {
    color: var(--gold);
    font-weight: 900;
}

.testimonial-card em {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-style: normal;
}

.credibility-section {
    display: grid;
    grid-template-columns: 0.72fr 1fr;
    gap: 1rem;
}

.quote-card,
.profile-card {
    border-radius: 36px;
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.quote-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at 90% 10%, rgba(239, 123, 69, 0.22), transparent 40%),
        var(--panel-strong);
}

.quote-card p {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.profile-card ul {
    display: grid;
    gap: 1rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.profile-card li {
    position: relative;
    padding-left: 1.7rem;
    font-size: 1rem;
}

.profile-card li::before {
    position: absolute;
    top: 0.72rem;
    left: 0;
    width: 9px;
    height: 9px;
    content: "";
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 7px rgba(45, 212, 191, 0.10);
}

.documents-section {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    border-radius: 40px;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    background:
        radial-gradient(circle at 96% 12%, rgba(45, 212, 191, 0.15), transparent 34%),
        var(--panel-strong);
}

.document-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.document-list a {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.15rem;
    border-radius: 28px;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.document-list a:hover,
.document-list a:focus-visible {
    border-color: rgba(244, 184, 96, 0.52);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.document-list strong {
    color: var(--paper);
    font-family: "Newsreader", Georgia, serif;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.06em;
}

.document-list em {
    color: var(--muted);
    font-size: 0.92rem;
    font-style: normal;
    line-height: 1.45;
}

.contact-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin: clamp(2rem, 5vw, 5rem) 0 clamp(3rem, 8vw, 7rem);
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border-radius: 40px;
    background:
        radial-gradient(circle at 12% 10%, rgba(45, 212, 191, 0.18), transparent 44%),
        linear-gradient(135deg, rgba(244, 184, 96, 0.14), rgba(255, 255, 255, 0.055));
}

.contact-section h2 {
    max-width: 780px;
}

.contact-section p {
    max-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/*
   These cards are two-column grids holding three children: a number badge, a
   heading, and a paragraph. Auto-placement puts the badge and the paragraph in
   the same narrow first column, squeezing the paragraph to one word per line.
   Pin the text to the second column wherever the two-column layout applies;
   below 640px both cards collapse to a single column and this must not run.
*/
@media (min-width: 641px) {
    .edge-card > h3,
    .edge-card > p,
    .timeline article > h3,
    .timeline article > p {
        grid-column: 2;
    }

    /* Let the badge span both text rows so neither row is padded out to the
       badge's height, which would strand the heading above the paragraph. */
    .edge-card > span,
    .timeline article > span {
        grid-row: 1 / span 2;
    }
}

@media (max-width: 980px) {
    .hero-section,
    .section-grid,
    .background-section,
    .method-section,
    .credibility-section,
    .active-brief,
    .documents-section,
    .contact-section {
        grid-template-columns: 1fr;
    }

    .hero-section {
        min-height: auto;
    }

    .hero-console {
        min-height: 560px;
    }

    .section-intro {
        position: static;
    }

    .service-matrix {
        grid-template-columns: 1fr;
    }

    .result-grid,
    .testimonial-grid,
    .document-list {
        grid-template-columns: 1fr;
    }

    .contact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    main {
        width: min(100% - 24px, 1180px);
    }

    h1 {
        font-size: clamp(3rem, 18vw, 4.8rem);
    }

    .proof-strip {
        grid-template-columns: 1fr;
    }

    .hero-console {
        min-height: 500px;
        border-radius: 30px;
    }

    .portrait-card img {
        height: 370px;
    }

    .kpi-orbit {
        min-height: 285px;
    }

    .kpi-core {
        width: 152px;
        height: 152px;
    }

    .kpi-core strong {
        font-size: 3.55rem;
    }

    .edge-card,
    .background-list article,
    .timeline article {
        grid-template-columns: 1fr;
    }

    .timeline::before {
        display: none;
    }

    .primary-link,
    .secondary-link {
        width: 100%;
    }
}