:root {
    --blue: #061b78;
    --blue-deep: #020d43;
    --blue-bright: #064cc7;
    --cyan: #00c9f3;
    --red: #ed172c;
    --yellow: #ffc400;
    --ink: #07133f;
    --paper: #f5f7fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
button { font: inherit; }

.main-header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px clamp(24px, 6vw, 88px);
    position: relative;
    z-index: 20;
    color: white;
    background: #fff;
    border-bottom: 4px solid var(--red);
}
.main-brand { display: flex; align-items: center; gap: 12px; color: var(--blue); text-decoration: none; }
.main-brand img { width: 52px; height: 52px; object-fit: contain; }
.main-brand span { display: grid; line-height: 1; }
.main-brand strong { font-size: 22px; font-weight: 1000; letter-spacing: -.04em; }
.main-brand strong b { color: var(--red); }
.main-brand small { margin-top: 5px; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a { padding: 11px 13px; border-radius: 7px; text-decoration: none; color: #23315d; font-size: 12px; font-weight: 900; text-transform: uppercase; }
.main-nav a:hover { color: var(--blue); background: #eef2fc; }
.main-nav .nav-highlight { color: white; background: var(--blue); }
.menu-button { display: none; }

.site-hero {
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(340px, .9fr) minmax(480px, 1.1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 74px);
    padding: 64px clamp(24px, 6vw, 88px) 82px;
    position: relative;
    overflow: hidden;
    color: white;
    background: radial-gradient(circle at 78% 25%, #0b55ce 0, transparent 28%), linear-gradient(130deg, #020e4d 0%, #08288e 60%, #0448bd 100%);
}
.site-hero::after { content: ''; width: 60%; height: 28px; position: absolute; right: -8%; bottom: -12px; transform: rotate(-4deg); background: linear-gradient(to bottom, var(--red) 0 34%, white 34% 66%, var(--cyan) 66%); }
.hero-orbit { position: absolute; border: 1px solid rgba(0, 201, 243, .23); border-radius: 50%; pointer-events: none; }
.hero-orbit.one { width: 560px; height: 560px; right: -150px; top: -190px; }
.hero-orbit.two { width: 380px; height: 380px; left: -220px; bottom: -220px; }
.site-hero-copy, .hero-visual { position: relative; z-index: 2; }
.site-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--yellow); font-size: 11px; font-weight: 1000; letter-spacing: .17em; }
.site-kicker i { width: 28px; height: 3px; display: inline-block; background: currentColor; }
.site-kicker.dark { color: var(--red); }
.site-hero h1, .section-title h2, .support-cta h2, .instagram-cta h2, .bio-copy h2 { margin: 0; font-family: Impact, 'Arial Black', sans-serif; font-weight: 900; letter-spacing: -.025em; line-height: .94; text-transform: uppercase; }
.site-hero h1 { max-width: 660px; font-size: clamp(58px, 7.3vw, 110px); }
.hero-lead { max-width: 610px; margin: 24px 0 0; font-size: clamp(17px, 2vw, 22px); line-height: 1.5; color: #dce8ff; }
.site-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button-primary, .button-outline { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; border-radius: 8px; text-decoration: none; font-size: 13px; font-weight: 1000; }
.button-primary { color: #071342; background: var(--yellow); box-shadow: 0 7px 0 #e49c00; }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #e49c00; }
.button-outline { color: white; border: 1px solid rgba(255,255,255,.45); }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 38px; }
.hero-proof span { color: var(--yellow); font: 900 52px/1 Impact, sans-serif; text-shadow: 4px 4px 0 var(--red), 7px 7px 0 #041357; }
.hero-proof small { color: white; font-size: 9px; line-height: 1.35; font-weight: 900; letter-spacing: .16em; }
.hero-visual { display: grid; justify-items: center; }
.hero-image-frame { width: 100%; padding: 7px; border-radius: 22px; background: linear-gradient(135deg, var(--cyan), #044ee1 48%, var(--red)); box-shadow: 0 32px 70px rgba(0, 0, 0, .35); transform: rotate(-1deg); }
.hero-image-frame img { width: 100%; display: block; border-radius: 16px; }
.hero-caption { max-width: 84%; margin-top: -10px; padding: 14px 22px; border-radius: 12px; position: relative; color: white; background: #06145f; border: 2px solid var(--cyan); text-align: center; font-size: 12px; font-weight: 1000; line-height: 1.35; }

.quick-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: #020c3f; }
.quick-strip a { min-height: 105px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 20px clamp(20px, 4vw, 52px); color: white; border-right: 1px solid rgba(255,255,255,.13); text-decoration: none; }
.quick-strip a:hover { background: #09277f; }
.quick-strip b { color: var(--yellow); font: 900 28px Impact, sans-serif; }
.quick-strip span { font-size: 12px; font-weight: 1000; line-height: 1.3; }
.quick-strip i { color: var(--cyan); font-size: 22px; font-style: normal; }

.biography-section { max-width: 1240px; display: grid; grid-template-columns: minmax(310px, .82fr) minmax(440px, 1.18fr); align-items: center; gap: clamp(45px, 8vw, 110px); margin: auto; padding: 110px 32px; }
.bio-portrait-wrap { min-height: 590px; position: relative; overflow: hidden; border-radius: 26px; background: #092f9d; box-shadow: 0 30px 70px rgba(5, 22, 92, .22); }
.bio-portrait-wrap::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 42%, #061559 86%); z-index: 1; }
.bio-portrait-wrap img { width: 100%; height: 590px; display: block; object-fit: cover; object-position: 50% 7%; }
.bio-number { position: absolute; top: 24px; right: -5px; z-index: 2; color: rgba(255,196,0,.15); font: 900 95px/1 Impact, sans-serif; transform: rotate(90deg) translateX(70%); transform-origin: right top; }
.bio-portrait-wrap > span { position: absolute; left: 30px; right: 30px; bottom: 34px; z-index: 2; color: white; font: 900 clamp(26px, 3vw, 43px)/.98 Impact, sans-serif; }
.bio-portrait-wrap > span b { color: var(--cyan); }
.bio-copy h2 { max-width: 670px; color: var(--blue); font-size: clamp(48px, 5.5vw, 78px); }
.bio-copy > p:not(.site-kicker) { max-width: 720px; margin: 22px 0 0; color: #52607f; font-size: 16px; line-height: 1.75; }
.bio-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 34px; }
.bio-stats div { min-height: 98px; display: grid; align-content: center; padding: 15px; border: 1px solid #dce3f2; border-radius: 12px; background: white; }
.bio-stats strong { color: var(--blue); font: 900 30px/1 Impact, sans-serif; }
.bio-stats span { margin-top: 7px; color: #687492; font-size: 9px; font-weight: 900; line-height: 1.3; }
.text-link { display: inline-flex; gap: 12px; margin-top: 28px; color: var(--blue); font-size: 12px; font-weight: 1000; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 5px; }

.trajectory-section { padding: 105px clamp(24px, 7vw, 100px); color: white; background: linear-gradient(135deg, #020d43, #082689); }
.section-title { max-width: 1180px; margin: 0 auto 50px; }
.section-title h2 { font-size: clamp(52px, 6vw, 88px); }
.section-title h2 em { color: var(--cyan); font-style: normal; }
.trajectory-grid { max-width: 1180px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: auto; }
.trajectory-grid article { min-height: 300px; padding: 30px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; position: relative; overflow: hidden; background: rgba(255,255,255,.055); }
.trajectory-grid article::after { content: ''; width: 100px; height: 8px; position: absolute; left: 0; bottom: 0; background: linear-gradient(to right, var(--red), white, var(--cyan)); }
.trajectory-grid article > span { position: absolute; right: 20px; top: 14px; color: rgba(255,255,255,.09); font: 900 86px/1 Impact, sans-serif; }
.trajectory-grid small { color: var(--yellow); font-size: 10px; font-weight: 1000; letter-spacing: .15em; }
.trajectory-grid h3 { margin: 90px 0 15px; font: 900 31px/1 Impact, sans-serif; }
.trajectory-grid p { margin: 0; color: #c8d6f6; line-height: 1.65; }

.support-cta { min-height: 600px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; padding: 80px clamp(24px, 8vw, 120px); position: relative; overflow: hidden; color: white; background: linear-gradient(115deg, #07257d, #0649c1); }
.support-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 45%, rgba(0,205,255,.28), transparent 30%); }
.support-cta > div { position: relative; z-index: 1; }
.support-cta h2 { max-width: 720px; font-size: clamp(55px, 6.2vw, 94px); }
.support-cta > div > p:not(.site-kicker) { max-width: 680px; color: #d7e5ff; line-height: 1.65; }
.support-cta .button-primary { margin-top: 18px; }
.support-preview { height: 460px; display: grid; place-items: center; overflow: hidden; border-radius: 50% 50% 30px 30px; background: rgba(255,255,255,.1); border: 2px solid var(--cyan); }
.support-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.instagram-cta { padding: 80px 24px; text-align: center; color: var(--blue); background: white; }
.instagram-cta > span { color: var(--red); font-size: 11px; font-weight: 1000; letter-spacing: .18em; }
.instagram-cta h2 { margin-top: 14px; font-size: clamp(45px, 5vw, 72px); }
.instagram-cta a { display: inline-flex; gap: 18px; margin-top: 24px; padding: 14px 22px; border-radius: 7px; color: white; background: var(--blue); text-decoration: none; font-size: 12px; font-weight: 1000; }

.site-footer { min-height: 130px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 28px clamp(24px, 6vw, 88px); color: white; background: #020a34; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 42px; height: 42px; object-fit: contain; }
.footer-brand strong { font-size: 15px; }
.footer-brand b { color: var(--yellow); }
.site-footer > span { color: #9ba9d1; font-size: 11px; }
.site-footer nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
.site-footer nav a { color: white; font-size: 10px; text-decoration: none; text-transform: uppercase; font-weight: 900; }

@media (max-width: 960px) {
    .site-hero { grid-template-columns: 1fr; padding-top: 55px; }
    .site-hero-copy { max-width: 720px; }
    .hero-visual { max-width: 760px; }
    .biography-section { grid-template-columns: .85fr 1.15fr; gap: 40px; }
    .bio-stats { grid-template-columns: 1fr; }
    .support-cta { grid-template-columns: 1fr 360px; gap: 32px; }
}

@media (max-width: 820px) {
    .main-header { min-height: 72px; position: sticky; top: 0; }
    .main-brand img { width: 44px; height: 44px; }
    .main-brand strong { font-size: 18px; }
    .menu-button { width: 48px; height: 44px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 0; border-radius: 8px; color: var(--blue); background: #eef2fc; cursor: pointer; }
    .menu-button span { width: 20px; height: 2px; display: block; background: var(--blue); }
    .menu-button b { position: absolute; width: 1px; height: 1px; overflow: hidden; }
    .main-nav { display: none; position: absolute; left: 18px; right: 18px; top: calc(100% + 8px); padding: 10px; border-radius: 13px; background: white; box-shadow: 0 18px 50px rgba(2,13,67,.22); }
    .main-nav.is-open { display: grid; }
    .main-nav a { min-height: 45px; display: flex; align-items: center; }
    .quick-strip { grid-template-columns: 1fr; }
    .quick-strip a { min-height: 84px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .biography-section { grid-template-columns: 1fr; }
    .bio-portrait-wrap { max-width: 520px; }
    .bio-stats { grid-template-columns: repeat(3, 1fr); }
    .trajectory-grid { grid-template-columns: 1fr; }
    .trajectory-grid article { min-height: 240px; }
    .trajectory-grid h3 { margin-top: 65px; }
    .support-cta { grid-template-columns: 1fr; }
    .support-preview { width: min(100%, 500px); }
    .site-footer { grid-template-columns: 1fr; text-align: center; }
    .footer-brand, .site-footer nav { justify-content: center; }
}

@media (max-width: 560px) {
    .main-header { padding: 8px 16px; }
    .main-brand small { font-size: 7px; }
    .site-hero { min-height: auto; gap: 42px; padding: 48px 20px 70px; }
    .site-hero h1 { font-size: clamp(54px, 18vw, 76px); }
    .hero-lead { font-size: 16px; }
    .site-actions { display: grid; }
    .button-primary, .button-outline { width: 100%; min-height: 58px; }
    .hero-proof { margin-top: 30px; }
    .hero-proof span { font-size: 48px; }
    .hero-image-frame { padding: 4px; border-radius: 14px; }
    .hero-image-frame img { border-radius: 10px; }
    .hero-caption { max-width: 94%; font-size: 9px; }
    .biography-section { padding: 75px 20px; }
    .bio-portrait-wrap, .bio-portrait-wrap img { min-height: 510px; height: 510px; }
    .bio-copy h2 { font-size: 48px; }
    .bio-stats { grid-template-columns: 1fr; }
    .trajectory-section { padding: 75px 20px; }
    .section-title h2, .support-cta h2 { font-size: 50px; }
    .support-cta { padding: 70px 20px; }
    .support-preview { height: 390px; }
    .instagram-cta h2 { font-size: 44px; }
}