/* The hero is a three-plane scene: backdrop, HTML card, transparent foreground.
   Every plane shares one coordinate system; no approximate silhouette masks. */
.hero-editorial {
    padding: 0;
    overflow: hidden;
    background: linear-gradient(90deg, #cdcffa 0%, #c7c9fc 25%, #b8aff8 50%, #c093d8 75%, #9381b9 100%);
    border-bottom: 1px solid var(--border-color);
}
.hero-editorial .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: 0;
    aspect-ratio: 1983 / 793;
    padding: 0;
    gap: 0;
}
.hero-copy {
    position: relative;
    z-index: 5;
    padding: 25px 0 45px clamp(28px, 4vw, 80px);
}
.hero-editorial h1 {
    font-size: clamp(34px, 3.85vw, 69px);
    line-height: 1.07;
    letter-spacing: -.048em;
    margin: 18px 0 0;
    text-wrap: initial;
}
.title-rotation {
    display: block;
    color: #ff064d;
    height: 1.12em;
    font-size: .82em;
    white-space: nowrap;
}
.typing-caret {
    display: inline-block;
    width: 2px;
    height: .83em;
    margin-left: 4px;
    background: currentColor;
    animation: caretPulse 1s ease-in-out infinite;
}
.hero-version {
    display: inline-flex !important;
    padding: 7px 13px;
    border: 1px solid #ffffff60;
    border-radius: 30px;
    background: linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.34) 64%, rgba(255,255,255,.06));
    color: #33415f;
    font-size: clamp(11px, .9vw, 14px);
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
}
.hero-editorial .hero-sub {
    max-width: 46ch;
    margin-top: 18px;
    color: #34445f;
    font-size: clamp(13px, 1.15vw, 19px);
    line-height: 1.65;
}
.hero-editorial .hero-cta {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 24px;
}
.hero-editorial .hero-cta .btn {
    width: auto;
    padding: 13px 17px;
    gap: 8px;
    border-radius: 40px;
    font-size: clamp(11px, .95vw, 15px);
    white-space: nowrap;
}
.hero-cta svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hero-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    opacity: 1;
    color: #34445f;
    background: #ffffff30;
    border: 1px solid #34445f40;
    box-shadow: none;
}
.hero-video::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -2px;
    background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.08) 38%, rgba(255,255,255,.78) 50%, rgba(255,255,255,.08) 62%, transparent 78%);
    transform: translateX(-135%);
    transition: transform .68s cubic-bezier(.2, .7, .25, 1);
    pointer-events: none;
}
.hero-video > * {
    position: relative;
    z-index: 1;
}
.hero-video svg {
    transition: transform .28s cubic-bezier(.2, .7, .25, 1), filter .28s ease;
}
.hero-video:hover {
    color: #192945;
    background: #ffffff70;
    border-color: #ff4f7d80;
    box-shadow: 0 12px 28px #26344f1c, 0 0 0 3px #ff3d7012;
}
.hero-video:hover::before { transform: translateX(135%); }
.hero-video:hover svg {
    transform: scale(1.12);
    filter: drop-shadow(0 0 5px #ff3d7060);
}
.hero-video:focus-visible {
    border-color: #ff4f7da6;
    box-shadow: 0 0 0 4px #ff3d7024, 0 12px 28px #26344f1c;
}
.hero-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.scene-stage {
    position: absolute;
    inset: 0;
    container-type: inline-size;
}
.scene-background, .scene-cutout {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.scene-cutout {
    object-fit: contain;
    object-position: right bottom;
}
.scene-night { display: none; }
.scene-person { position: absolute; inset: 0; z-index: 10; }
.card-depth {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.shortcut-flight {
    position: absolute;
    top: 32%;
    left: 45.5%;
    width: 18.2%;
    transform: translate3d(var(--card-x, 0px), var(--card-y, 0px), 0);
    opacity: var(--card-opacity, 1);
    will-change: transform;
}
.shortcut-float {
    transform-origin: 50% 58%;
    animation: shortcutHover 5.8s ease-in-out 1.6s infinite alternate;
}
.shortcut-card {
    padding: .88cqw 1.15cqw;
    border: 1px solid #ffffffad;
    border-radius: 1.1cqw;
    background: #fffffff0;
    color: #173264;
    box-shadow: 0 12px 32px #42236512;
    backdrop-filter: blur(12px);
}
.shortcut-card > div {
    display: grid;
    grid-template-columns: 46% 1fr;
    align-items: center;
    gap: .6cqw;
    margin-bottom: .46cqw;
    font-size: .83cqw;
    white-space: nowrap;
}
.shortcut-card > div:last-child { margin-bottom: 0; }
.shortcut-card kbd {
    padding: .32cqw .18cqw;
    border-radius: .3cqw;
    background: linear-gradient(140deg, #355581, #193660);
    color: #fff;
    font: 600 .95em 'Inter', sans-serif;
    text-align: center;
    box-shadow: 0 2px 5px #112a5020;
}
.scene-arrow {
    position: absolute;
    z-index: 12;
    right: 8.4%;
    width: 5.6%;
    height: 18%;
    overflow: visible;
}
.scene-arrow path {
    stroke: white;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
/* Image entrances and button translations do not participate in scroll motion. */
.hero-enter .hero-version { animation: heroFade .75s .05s both; }
.hero-enter h1 { animation: heroFade .9s .12s both; }
.hero-enter .hero-sub { animation: heroFade .9s .24s both; }
.hero-enter .hero-cta .btn { animation: heroButtonIn .85s .34s both; }
.hero-enter .hero-cta .btn:last-child { animation-delay: .44s; }
.hero-enter .scene-background { animation: heroFade 1s both; }
.hero-enter .scene-cutout { animation: heroPersonIn 1.05s .1s cubic-bezier(.2, .72, .25, 1) both; }
.hero-enter .scene-arrow path { animation: drawArrow 1.6s .8s both; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroButtonIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroPersonIn { from { transform: translateX(22px); } to { transform: translateX(0); } }
@keyframes drawArrow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes caretPulse { 50% { opacity: 0; } }
@keyframes shortcutHover {
    from { transform: translate3d(0, -1px, 0) rotate(-4.4deg); }
    to { transform: translate3d(0, 3px, 0) rotate(-3.6deg); }
}
[data-theme="dark"] .hero-editorial { background: linear-gradient(90deg, #0a1333 0%, #0a143b 25%, #0f1034 50%, #150c34 75%, #0e0e2e 100%); }
[data-theme="dark"] .scene-day { display: none; }
[data-theme="dark"] .scene-night { display: block; }
[data-theme="dark"] .hero-version { background: linear-gradient(90deg,rgba(17,27,50,.66),rgba(17,27,50,.34) 64%,rgba(17,27,50,.05)); border-color: #ffffff18; color: #d5def0; }
[data-theme="dark"] .hero-sub { color: #d0d9ed; }
[data-theme="dark"] .hero-video { color: #d5def0; border-color: #c7d3f43d; background: #10182b40; }
[data-theme="dark"] .hero-video:hover,
[data-theme="dark"] .hero-video:focus-visible {
    color: #fff;
    border-color: #ff7599a8;
    background: #27304b9c;
    box-shadow: 0 12px 30px #0006, 0 0 0 3px #ff4f7d1f;
}
[data-theme="dark"] .shortcut-card {
    background: #141c32ef;
    border-color: #b798e647;
    color: #e3eaff;
    box-shadow: 0 14px 35px #05091655, 0 0 24px #ce5dbb18;
}
[data-theme="dark"] .shortcut-card kbd { background: #33496e; box-shadow: inset 0 1px #a9c5ee30; }
@media (min-width: 1800px) {
    .hero-copy { padding-left: max(80px, calc((100vw - 1640px) / 2)); }
}
@media (min-width: 981px) and (max-width: 1100px) {
    .hero-editorial .hero-grid { height: min(47.91vw, 900px); min-height: 0; aspect-ratio: auto; grid-template-columns: 40% 60%; }
    .scene-stage { left: 0; }
    .hero-copy { padding: 20px 0 26px 28px; }
    .landing-page .hero-copy { transform: translateY(54px); }
    .hero-editorial h1 { font-size: clamp(28px, 3.65vw, 40px); margin-top: 4px; }
    .hero-editorial .hero-sub { font-size: 12px; line-height: 1.45; margin-top: 6px; }
    .hero-editorial .hero-cta { gap: 8px; margin-top: 10px; }
    .hero-editorial .hero-cta .btn { font-size: 10px; padding: 11px; gap: 5px; }
    .hero-cta svg { width: 15px; height: 15px; }
}
@media (max-width: 980px) {
    .hero-editorial .hero-grid { display: flex; flex-direction: column; aspect-ratio: auto; }
    .hero-copy { width: 100%; padding: 24px 24px 20px; z-index: auto; }
    .hero-copy > .hero-version,.hero-copy > h1,.hero-copy > .hero-sub { position: relative; z-index: 5; }
    .hero-editorial .hero-cta { position: relative; z-index: auto; }
    .hero-editorial .hero-cta .btn-primary { position: relative; z-index: 5; }
    .hero-editorial .hero-cta .hero-video { position: relative; z-index: 2; }
    .hero-editorial h1 { max-width: 600px; font-size: clamp(31px, 7.9vw, 52px); margin-top: 12px; }
    .title-rotation { font-size: .87em; }
    .hero-editorial .hero-sub { max-width: 60ch; font-size: 13px; line-height: 1.55; margin-top: 12px; }
    .hero-editorial .hero-cta { margin-top: 18px; gap: 10px; }
    .hero-editorial .hero-cta .btn { font-size: 11px; padding: 12px; gap: 6px; }
    .hero-cta svg { width: 16px; height: 16px; }
    .hero-version { font-size: 11px; padding: 5px 11px; }
    .hero-scene { position: relative; inset: auto; width: 100%; aspect-ratio: 2.2; overflow: visible; }
    .scene-stage { left: -56.25%; }
    .shortcut-card { padding: .92cqw 1.15cqw; }
    .shortcut-card > div { font-size: .95cqw; gap: .7cqw; }
}
@media (max-width: 980px) and (max-height: 720px) {
    .hero-copy { padding-top: 16px; padding-bottom: 16px; }
    .hero-scene { aspect-ratio: 1.85; }
    .scene-stage { left: -35.135%; }
}
@media (max-width: 360px) {
    .hero-copy { padding: 14px 18px; }
    .hero-editorial h1 { font-size: 29px; }
    .hero-editorial .hero-sub { font-size: 12px; line-height: 1.45; }
    .hero-editorial .hero-cta { gap: 7px; margin-top: 12px; }
    .hero-editorial .hero-cta .btn { font-size: 10px; padding: 10px; gap: 4px; }
    .hero-cta svg { width: 13px; height: 13px; }
    .hero-scene { aspect-ratio: 2; }
    .scene-stage { left: -25%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-enter .hero-version, .hero-enter h1, .hero-enter .hero-sub,
    .hero-enter .hero-cta .btn, .hero-enter .scene-background,
    .hero-enter .scene-cutout, .hero-enter .scene-arrow path, .typing-caret { animation: none; }
    .shortcut-flight { will-change: auto; }
    .shortcut-float { animation: none; transform: rotate(-4deg); }
    .hero-video::before { display: none; }
    .hero-video:hover svg { transform: none; filter: none; }
}
/* Small-screen labels stay proportionate to the actual visible scene. */
@media (max-width: 980px) {
    .shortcut-flight { width: 20%; }
    .shortcut-float { animation-duration: 6.6s; }
    .shortcut-card > div { font-size: clamp(6.5px, 1.24cqw, 9px); margin-bottom: .28cqw; }
    .shortcut-card kbd { padding-block: .2cqw; }
}
.scene-cutout { filter: none; }
/* One continuous portrait backdrop spans the copy and the foreground on touch
   layouts. The lower stage reserves space only; it has no separate background. */
.hero-mobile-backdrop { display: none; }
.scene-person {
    transform: translate3d(0, calc(var(--person-rest-y, 0%) + var(--person-y, 0px)), 0) scale(var(--person-scale, 1));
    transform-origin: 75% 92%;
}

.scene-person::before {
    content: "";
    position: absolute;
    z-index: 0;
    right: 2%;
    bottom: 0;
    width: 58%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 58% 78%, rgba(2, 5, 18, .72) 0, rgba(4, 7, 22, .38) 36%, transparent 72%);
    filter: blur(9px);
    opacity: 0;
    pointer-events: none;
}

.scene-person .scene-cutout {
    z-index: 1;
}

[data-theme="dark"] .scene-person::before {
    opacity: .68;
}

.scene-annotation {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.scene-copy {
    display: block;
    top: 29%;
    right: 4.5%;
    width: 17%;
    color: #fff;
    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(16px, 1.65vw, 28px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.035em;
    text-align: center;
    text-shadow: 0 2px 10px #4014484d;
    transform: rotate(4deg);
}

@media (min-width: 1101px) {
    .hero-editorial .hero-grid {
        height: min(47.91vw, 900px);
        min-height: 0;
        aspect-ratio: auto;
    }
}

@media (min-width: 981px) {
    .scene-background {
        object-fit: cover;
        object-position: center bottom;
    }

    .scene-cutout {
        object-fit: contain;
        object-position: right bottom;
    }

    .scene-person {
        --person-rest-y: 0%;
    }

    .scene-copy {
        top: 40%;
        right: -1.5%;
        font-size: clamp(16.8px, 1.7325vw, 29.4px);
    }

    .scene-arrow { top: 50%; }
}

@media (min-width: 361px) and (max-width: 599px) {
    .hero-scene { aspect-ratio: 1.6; }
}
@media (min-width: 1101px) {
    .landing-page .hero-copy { transform: translateY(44px); }
}
@media (max-width: 980px) {
    .scene-stage { --person-rest-y: -32%; }
    .hero-mobile-backdrop { display: block; position: absolute; inset: 0; pointer-events: none; }
    .hero-mobile-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
    .scene-stage .scene-background { display: none; }
    .scene-copy {
        top: 3%;
        right: 0;
        width: 20.5%;
        font-size: clamp(11px, 3cqw, 17px);
    }
    .shortcut-flight { left: 56%; }
    .hero-enter .hero-mobile-backdrop { animation: heroFade 1s both; }
}
@media (max-width: 599px) {
    .scene-stage { --person-rest-y: -20%; }
    .hero-editorial .hero-cta { transform: translateY(-2vw); }
    .shortcut-flight { top: 0; left: 46%; }
    .scene-copy {
        top: 4%;
        right: 1%;
        width: 18%;
        text-align: right;
        transform: translateX(-8%) rotate(4deg);
    }
    .scene-arrow { top: 26%; }
}
@media (min-width: 600px) and (max-width: 980px) {
    .shortcut-flight { top: -4%; }
    .scene-arrow { top: 26%; }
    .scene-copy {
        top: 0;
        right: 1%;
        width: 18%;
        text-align: right;
    }
}
@media (min-width: 600px) and (max-width: 980px) and (orientation: portrait) {
    .shortcut-flight { top: -9%; }
    .scene-arrow {
        top: 22%;
        right: 4.4%;
    }
    .hero-editorial .hero-cta .btn-primary,
    .hero-editorial .hero-cta .hero-video { z-index: 4; }
}
@media (max-width: 360px) {
    .scene-stage { --person-rest-y: -17%; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-person { transform: translate3d(0, var(--person-rest-y, 0%), 0); will-change: auto; }
    .hero-enter .hero-mobile-backdrop { animation: none; }
}