/* HOT2COLD 0.4 — cinematic hero and browsable catalogue. */
.h2c-showcase { position: relative; background: #05080e; overflow: hidden; isolation: isolate; touch-action: pan-y pinch-zoom; --slide-duration: 8000ms; }
.h2c-showcase:not(.is-enhanced) .h2c-showcase-controls, .h2c-parts-carousel:not(.is-enhanced) .h2c-parts-controls { display: none; }
.h2c-showcase-stage { position: relative; display: grid; min-height: 570px; height: clamp(570px, 40vw, 740px); }
.h2c-slide { grid-area: 1 / 1; position: relative; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .7s ease, visibility .7s; overflow: hidden; }
.h2c-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
.h2c-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 54%; }
.h2c-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #05080ef2 0%, #05080ed9 25%, #05080e63 52%, transparent 76%), linear-gradient(0deg, #05080e 0%, transparent 25%); pointer-events: none; }
.h2c-slide-content { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; }
.h2c-slide-copy { width: 59%; padding: 45px 0 75px; }
.h2c-slide-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: #d2d9e4; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.h2c-slide-kicker > span { width: 28px; height: 2px; background: #ef2635; box-shadow: 0 0 16px #ef263559; }
.h2c-slide h1, .h2c-slide h2 { margin: 0; color: #f4f7fb; font-size: clamp(46px, 4.4vw, 76px); line-height: 1.04; letter-spacing: -.055em; font-weight: 760; }
.h2c-slide h1 em, .h2c-slide h2 em { display: inline-block; font-style: normal; color: #63b2fc; background: linear-gradient(105deg, #e6eef7 0%, #a5cfff 20%, #42a1f4 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h2c-slide-description { max-width: 450px; margin: 26px 0 30px; color: #bdc6d3; font-size: 16px; line-height: 1.75; }
.h2c-slide-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.h2c-slide-actions .h2c-button { min-height: 52px; padding-inline: 23px; border-radius: 5px; font-size: 13px; }
.h2c-slide-link { display: inline-flex; align-items: center; min-height: 44px; gap: 14px; font-size: 13px; font-weight: 650; color: #e0e6ef; text-decoration: none; }
.h2c-slide-link:hover { color: #63b2fc; }
.h2c-slide-detail { position: absolute; right: 0; bottom: 26px; color: #aeb9c8; margin: 0; font-size: 10px; letter-spacing: .04em; text-align: right; }
.h2c-slide-detail span { display: block; font-size: 9px; font-weight: 650; letter-spacing: .2em; margin-bottom: 7px; color: #f3f5f8; }
.h2c-showcase-controls { display: flex; justify-content: space-between; gap: 40px; align-items: center; padding-block: 0 20px; min-height: 78px; }
.h2c-slide-selectors { display: flex; gap: 30px; flex: 1; max-width: 710px; }
.h2c-slide-selectors button { position: relative; min-height: 56px; display: flex; gap: 13px; align-items: center; flex: 1; padding: 13px 0 18px; background: none; color: #98a6b8; border: 0; border-bottom: 1px solid #ffffff26; text-align: left; font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.h2c-slide-selectors button > span { color: #748296; font-size: 10px; font-weight: 400; }
.h2c-slide-selectors button[aria-current="true"] { color: #f4f7fc; }
.h2c-slide-selectors button::after { position: absolute; content: ""; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, #ef2635, #438fe9); transform-origin: left; transform: scaleX(0); }
.h2c-slide-selectors button[aria-current="true"]::after { transform: scaleX(1); }
.is-playing .h2c-slide-selectors button[aria-current="true"]::after { animation: h2c-slide-progress var(--slide-duration) linear; }
@keyframes h2c-slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h2c-slide-tools { display: flex; align-items: center; gap: 8px; }
.h2c-slide-counter { color: #647184; font-size: 11px; letter-spacing: .12em; padding-right: 15px; white-space: nowrap; }
.h2c-slide-counter b { color: #e1e9f5; font-weight: 500; }
.h2c-circle-button { width: 44px; height: 44px; flex: 0 0 44px; display: inline-grid; place-items: center; background: #ffffff04; color: #dce7f5; border: 1px solid #ffffff29; border-radius: 50%; font-size: 19px; cursor: pointer; transition: border-color .2s, background .2s; }
.h2c-circle-button:hover { border-color: #54a8f3; background: #147fe122; }
.h2c-circle-button:disabled { opacity: .3; cursor: default; }
.h2c-pause-button { border-color: transparent; }
.h2c-pause-button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.h2c-pause-button .h2c-icon-play { display: none; }
.h2c-pause-button[data-paused="true"] .h2c-icon-pause { display: none; }
.h2c-pause-button[data-paused="true"] .h2c-icon-play { display: block; }
.h2c-confidence-strip { background: #0a101a; border-block: 1px solid #ffffff0d; }
.h2c-confidence-strip > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 23px; }
.h2c-confidence-strip p, .h2c-confidence-strip a { margin: 0; font-size: 11px; color: #aeb9ca; text-decoration: none; display: flex; align-items: center; gap: 9px; }
.h2c-confidence-strip strong { font-size: 24px; color: #f0f5fc; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.h2c-confidence-strip a:hover { color: #6bb7ff; }
.h2c-status-dot { height: 5px; width: 5px; background: #4ca7fa; border-radius: 50%; box-shadow: 0 0 12px #4ca7fa88; }
.h2c-confidence-strip + .h2c-finder { margin-top: 0; padding-top: 60px; }
.h2c-parts-carousel { position: relative; }
.h2c-parts-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 2px 24px; scroll-padding-inline: 2px; }
.h2c-parts-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.h2c-parts-card { position: relative; display: flex; flex-direction: column; flex: 0 0 calc((100% - 40px) / 3); min-width: 0; scroll-snap-align: start; text-decoration: none; border: 1px solid #ffffff19; background: #0c1420; border-radius: 10px; overflow: hidden; transition: border-color .25s, transform .25s; }
.h2c-parts-card:hover { border-color: #479fe8a1; transform: translateY(-4px); }
.h2c-parts-card:focus-visible { outline: 3px solid #6cbcff; outline-offset: -4px; }
.h2c-parts-card__image { display: block; position: relative; aspect-ratio: 1.55; overflow: hidden; background: #080c14; }
.h2c-parts-card__image img { width: 100%; height: 100%; object-fit: contain; }
.h2c-parts-card__body { padding: 24px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.h2c-parts-card h3 { color: #edf3fd; margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; max-width: 88%; }
.h2c-parts-card__count { color: #96abc2; font-size: 12px; }
.h2c-parts-card__arrow { position: absolute; right: 22px; bottom: 25px; font-size: 23px; color: #57adfb; }
.h2c-parts-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.h2c-parts-controls p { margin: 0; font-size: 11px; letter-spacing: .08em; color: #8f9fb4; }
.h2c-parts-controls > div { display: flex; gap: 8px; }
@media (min-width: 1800px) { .h2c-slide-image { object-position: center 58%; } }
@media (max-width: 1080px) { .h2c-slide-copy { width: 66%; } .h2c-slide h1, .h2c-slide h2 { font-size: clamp(42px, 5.8vw, 62px); } .h2c-showcase-controls { gap: 24px; } .h2c-slide-selectors { gap: 18px; } .h2c-slide-selectors button { font-size: 11px; gap: 8px; } .h2c-slide-counter { display: none; } .h2c-confidence-strip p:nth-child(2) { display: none; } }
@media (max-width: 720px) {
 .h2c-showcase-stage { height: 610px; min-height: 610px; }
 .h2c-slide-image { top: 244px; height: 340px; object-fit: cover; object-position: 67% center; }
 .h2c-slide::after { background: linear-gradient(180deg, #05080e 0%, #05080ef2 37%, #05080e00 57%, #05080e33 77%, #05080e 97%); }
 .h2c-slide-content { align-items: flex-start; }
 .h2c-slide-copy { width: 100%; padding: 32px 0 0; }
 .h2c-slide-kicker { font-size: 9px; margin-bottom: 18px; gap: 9px; letter-spacing: .12em; }
 .h2c-slide-kicker > span { width: 18px; }
 .h2c-slide h1, .h2c-slide h2 { font-size: clamp(35px, 7.8vw, 53px); line-height: 1.08; letter-spacing: -.055em; }
 .h2c-slide-description { font-size: 13px; line-height: 1.65; max-width: 370px; margin: 17px 0 20px; }
 .h2c-slide-actions { gap: 12px 20px; }
 .h2c-slide-actions .h2c-button { min-height: 46px; padding: 11px 16px; font-size: 11px; }
 .h2c-slide-link { font-size: 11px; gap: 8px; }
 .h2c-slide-detail { right: 0; left: 0; bottom: 12px; text-align: left; font-size: 9px; }
 .h2c-slide-detail span { font-size: 8px; margin-bottom: 3px; }
 .h2c-showcase-controls { gap: 16px; flex-wrap: wrap; padding-block: 0 18px; }
 .h2c-slide-selectors { width: 100%; flex: auto; gap: 16px; }
 .h2c-slide-selectors button { min-height: 52px; padding-bottom: 11px; font-size: 10px; gap: 6px; }
 .h2c-slide-selectors button > span { font-size: 8px; }
 .h2c-slide-tools { width: 100%; justify-content: flex-end; }
 .h2c-slide-counter { display: inline; margin-right: auto; }
 .h2c-confidence-strip > div { flex-wrap: wrap; gap: 13px; padding-block: 20px; }
 .h2c-confidence-strip p, .h2c-confidence-strip a { font-size: 10px; }
 .h2c-confidence-strip strong { font-size: 20px; }
 .h2c-confidence-strip + .h2c-finder { padding-top: 34px; }
 .h2c-parts-track { gap: 14px; }
 .h2c-parts-card { flex-basis: 84%; }
 .h2c-parts-card__body { padding: 20px; min-height: 120px; }
 .h2c-parts-card h3 { font-size: 17px; }
}
@media (max-width: 360px) { .h2c-slide-actions { gap: 8px 12px; } .h2c-slide-actions .h2c-button { padding-inline: 11px; font-size: 10px; } .h2c-slide-link { font-size: 10px; } .h2c-slide-selectors { gap: 10px; } .h2c-slide-selectors button { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .h2c-slide, .h2c-parts-card { transition: none; } .is-playing .h2c-slide-selectors button[aria-current="true"]::after { animation: none; } }