.hero {
    --studio: #080e1c;
    --ice: #8fd5ff;
    position: relative;
    overflow: hidden;
    padding: 132px 0 48px;
    color: #fff;
    background: var(--studio);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 80% 35%, #123354 0%, transparent 55%),
        radial-gradient(ellipse at 0% 100%, #0c213b 0%, transparent 50%);
}

.hero .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 36px;
    max-width: 1400px;
}

.hero-content { position: relative; z-index: 2; }
.hero-badge, .hero-signature, .showcase-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.hero-badge { display: flex; align-items: center; gap: 10px; color: var(--ice); margin-bottom: 28px; }
.hero-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ice);
    box-shadow: 0 0 18px #54b9ff;
}
.hero h1 {
    font-size: clamp(2.75rem, 4.7vw, 4.5rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.055em;
    margin-bottom: 26px;
    text-wrap: balance;
}
.hero h1 span { color: var(--ice); }
.hero-description { max-width: 450px; color: #b7c5d8; font-size: 17px; line-height: 1.75; margin-bottom: 32px; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.hero .btn-hero-primary { background: #fff; color: #0b2340; padding: 14px 24px; }
.hero .btn-hero-primary:hover { background: #d9efff; transform: translateY(-2px); }
.hero .btn-hero-secondary { color: #fff; background: #ffffff08; border: 1px solid #ffffff30; padding: 14px 24px; }
.hero .btn-hero-secondary:hover { background: #ffffff15; }
.hero-subtext { color: #94a6bc; font-size: 12px; }
.hero-subtext i { color: var(--ice); margin-right: 5px; }
.hero-signature { margin-top: 52px; color: #8598b2; font-size: 9px; letter-spacing: 0.14em; }
.hero-signature strong { display: block; color: #cfdae8; font-size: 11px; font-weight: 500; margin-top: 6px; }

.product-showcase {
    position: relative;
    min-width: 0;
    border: 1px solid #8acfff24;
    border-radius: 24px;
    background: var(--studio);
    box-shadow: 0 32px 100px #0004;
    overflow: hidden;
}
.showcase-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 28px 0; }
.showcase-eyebrow { color: #9eb6cf; font-size: 10px; }
.showcase-edition { color: #8fd5ff; font-size: 10px; letter-spacing: 0.12em; }
.showcase-stage { position: relative; height: clamp(320px, 29vw, 440px); isolation: isolate; }
.showcase-stage::before {
    content: "";
    position: absolute;
    inset: 12% 0 0;
    background: radial-gradient(ellipse at center, #174b7755, transparent 64%);
    pointer-events: none;
}
.showcase-stage::after {
    content: "";
    position: absolute;
    bottom: 8%;
    left: 18%;
    width: 64%;
    height: 10%;
    border-radius: 50%;
    background: #0008;
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}
.showcase-orbit {
    position: absolute;
    width: 86%;
    height: 30%;
    left: 7%;
    bottom: 3%;
    border: 1px solid #72c7ff28;
    border-radius: 50%;
    transform: rotate(-12deg);
    pointer-events: none;
}
.showcase-orbit::after {
    content: "";
    position: absolute;
    inset: 15%;
    border: 1px solid #72c7ff15;
    border-radius: inherit;
}
.showcase-poster, .showcase-stage model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; }
.showcase-poster { object-fit: contain; }
.showcase-stage model-viewer {
    opacity: 0;
    visibility: hidden;
    background: transparent;
    cursor: grab;
    touch-action: pan-y;
    --progress-bar-color: #8fd5ff;
}
.product-showcase.is-ready model-viewer { opacity: 1; visibility: visible; }
.product-showcase.is-ready .showcase-poster { visibility: hidden; }
.product-showcase.is-dragging model-viewer { cursor: grabbing; }
.showcase-caption { position: relative; padding: 4px 28px 22px; min-height: 94px; }
.showcase-caption h2 { color: #eef5ff; font-size: 20px; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 4px; }
.showcase-caption p { color: #9aafc8; font-size: 13px; }
.showcase-caption [hidden] { display: none; }
.showcase-status { color: #9aafc8; font-size: 12px; padding: 24px 28px; min-height: 121px; }
.showcase-status[hidden], .showcase-controls[hidden] { display: none; }
.showcase-controls { border-top: 1px solid #ffffff12; padding: 18px 24px 20px; }
.showcase-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.showcase-chapters button {
    color: #9aafc8;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 8px 0;
}
.showcase-chapters button span { color: #567089; margin-right: 6px; font-size: 10px; }
.showcase-chapters button[aria-pressed="true"] { color: #e7f5ff; }
.showcase-chapters button[aria-pressed="true"] span { color: var(--ice); }
.showcase-transport { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.showcase-toggle {
    flex-shrink: 0;
    min-width: 82px;
    min-height: 36px;
    padding: 6px 12px;
    background: #ffffff08;
    border: 1px solid #ffffff25;
    border-radius: 999px;
    font: inherit;
    font-size: 11px;
    color: #e7f5ff;
    cursor: pointer;
}
.showcase-transport input { width: 100%; min-width: 0; height: 24px; accent-color: #8fd5ff; cursor: ew-resize; }
.showcase-controls button:focus-visible, .showcase-controls input:focus-visible { outline: 2px solid #8fd5ff; outline-offset: 4px; }
.showcase-hint { color: #8298b1; font-size: 10px; white-space: nowrap; }
.hero-footer {
    position: relative;
    max-width: 1352px;
    margin: 56px auto 0;
    padding: 24px 0 0;
    border-top: 1px solid #ffffff14;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #94a6bc;
    font-size: 11px;
    letter-spacing: 0.08em;
}
.hero-footer span { display: flex; align-items: center; gap: 10px; }
.hero-footer i { color: var(--ice); }

@media (min-width: 1600px) {
    .hero { padding-top: 200px; padding-bottom: 80px; }
}
@media (max-width: 1100px) {
    .hero { padding-top: 140px; }
    .hero .container { gap: 24px; }
    .hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.5rem); }
    .showcase-hint { display: none; }
    .hero-footer { margin-inline: 24px; }
}
@media (max-width: 760px) {
    .hero { padding: 124px 0 36px; }
    .hero .container { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 580px; }
    .hero h1 { font-size: clamp(2.7rem, 9vw, 3.75rem); max-width: 520px; }
    .hero-badge { font-size: 10px; margin-bottom: 22px; }
    .hero-description { font-size: 16px; margin-bottom: 24px; }
    .hero-signature { margin-top: 28px; }
    .showcase-stage { height: 360px; }
    .showcase-header { padding: 20px 20px 0; }
    .showcase-caption { padding-inline: 20px; }
    .showcase-controls { padding-inline: 20px; }
    .hero-footer { margin-top: 32px; flex-wrap: wrap; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero *, .hero *::before, .hero *::after { transition: none !important; animation: none !important; }
}