/* Responsive port of the original make_promo.py design (Oct 15).
   All geometry is scaled from its 1920px canvas; no flattened banner image. */
.hc-hero {
    --hc-u: calc((100vw - 3rem) / 1920);
    position: relative;
    container-type: inline-size;
    isolation: isolate;
    height: min(78svh, 46rem);
    min-height: 26rem;
    color: #e6f2ff;
    background: #020308;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
@supports (width: 1cqw) { .hc-hero { --hc-u: calc(100cqw / 1920); } }
.hc-hero:focus-visible { outline: 3px solid #35b6ff; outline-offset: 4px; }
.hc-vignette, .hc-shade { position: absolute; inset: 0; pointer-events: none; }
/* A self-contained midnight studio, distinct from the page's soft mesh. */
.hc-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 76% 46%, rgba(35,115,192,.24), transparent 58%), linear-gradient(120deg, #07101d 12%, #101f35 55%, #07111f); }
.hc-backdrop::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(145,190,232,.17) .8px, transparent .8px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent 15%, #000 75%); -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 75%); }
.hc-backdrop::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 44%, rgba(78,166,255,.08) 44.1%, rgba(78,166,255,.025) 58%, transparent 58.1%); transform: translateX(0); transition: transform .8s ease; }
.hc-copy { position: absolute; z-index: 4; left: calc(130 * var(--hc-u)); top: 0; bottom: 0; width: calc(820 * var(--hc-u)); display: flex; flex-direction: column; justify-content: center; gap: calc(30 * var(--hc-u)); }
.hc-logo { height: calc(74 * var(--hc-u)); width: auto; align-self: flex-start; margin-bottom: calc(-6 * var(--hc-u)); filter: drop-shadow(0 10px 26px rgba(21,103,245,.45)); }
.hc-title { display: inline-block; align-self: flex-start; white-space: nowrap; margin: 0; padding-right: .06em; font-size: calc(128 * var(--hc-u)); font-weight: 900; letter-spacing: -.045em; line-height: 1.02; background: linear-gradient(180deg, #fff, #d6ecff 55%, #6cc4ff); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
.hc-cta { align-self: flex-start; }
.hc-stage { position: absolute; z-index: 2; right: calc(-90 * var(--hc-u)); top: 50%; width: calc(1120 * var(--hc-u)); height: calc(900 * var(--hc-u)); transform: translateY(-50%); perspective: calc(2200 * var(--hc-u)); filter: brightness(.88) saturate(.95); pointer-events: none; }
.hc-cards { display: grid; grid-template-columns: repeat(3, calc(330 * var(--hc-u))); gap: calc(30 * var(--hc-u)); transform: rotateY(-22deg) rotateX(10deg) rotateZ(-4deg) translate(calc(40 * var(--hc-u)), calc(70 * var(--hc-u))); transform-style: preserve-3d; }
.hc-card { position: relative; height: calc(380 * var(--hc-u)); overflow: hidden; border-radius: calc(30 * var(--hc-u)); border: 1px solid rgba(255,255,255,.14); background: #0b1224; box-shadow: 0 40px 80px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(53,182,255,.08), 0 30px 90px -30px rgba(21,103,245,.55); transform: translateZ(calc(var(--hc-i) * 6 * var(--hc-u))) translateY(calc(var(--hc-offset) * var(--hc-u))); }
.hc-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(calc(3 * var(--hc-u))) brightness(.72) saturate(1.15); }
.hc-shade { background: linear-gradient(180deg, rgba(8,13,28,.05), rgba(8,13,28,.2) 45%, rgba(8,13,28,.92) 78%); }
.hc-badges { position: absolute; left: 0; right: 0; top: calc(74 * var(--hc-u)); display: flex; flex-wrap: nowrap; justify-content: center; gap: calc(10 * var(--hc-u)); padding: 0 calc(16 * var(--hc-u)); }
.hc-badge { display: grid; flex: 0 0 auto; place-items: center; width: calc(58 * var(--hc-u)); height: calc(58 * var(--hc-u)); border-radius: calc(16 * var(--hc-u)); background: rgba(10,16,34,.6); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); }
.hc-badge img { width: calc(36 * var(--hc-u)); height: calc(36 * var(--hc-u)); object-fit: contain; }
.hc-badge i { font-size: calc(29 * var(--hc-u)); }
.hc-badge--large { width: calc(104 * var(--hc-u)); height: calc(104 * var(--hc-u)); border-radius: calc(28 * var(--hc-u)); }
.hc-badge--large i { font-size: calc(56 * var(--hc-u)); }
.hc-badge--wide { width: auto; height: calc(80 * var(--hc-u)); padding: 0 calc(22 * var(--hc-u)); border-radius: calc(22 * var(--hc-u)); }
.hc-badge--wide img { width: auto; height: calc(48 * var(--hc-u)); }
.hc-foot { position: absolute; left: calc(26 * var(--hc-u)); right: calc(26 * var(--hc-u)); bottom: calc(30 * var(--hc-u)); display: grid; gap: calc(12 * var(--hc-u)); }
.hc-line { width: 62%; height: calc(14 * var(--hc-u)); border-radius: 99px; background: rgba(255,255,255,.85); }
.hc-line--blue { width: 38%; height: calc(12 * var(--hc-u)); background: linear-gradient(90deg, #35b6ff, #1567f5); }
.hc-vignette { z-index: 3; background: linear-gradient(90deg, rgba(2,3,8,0) 40%, rgba(2,3,8,.35)); }
@media (min-width: 641px) and (max-width: 1024px) {
    .hc-hero { height: clamp(26rem, 56.25vw, 36rem); }
}
@media (max-width: 640px) {
    .hc-hero { --hc-u: .42px; height: 28rem; min-height: 0; }
    .hc-copy { left: 1.5rem; top: 2rem; bottom: auto; width: calc(100% - 3rem); justify-content: flex-start; gap: 1.15rem; }
    .hc-logo { height: 2.3rem; margin-bottom: 0; }
    .hc-title { font-size: clamp(2.3rem, 10.5vw, 4rem); }
    .hc-stage { top: auto; bottom: -8rem; right: -8rem; transform: none; }
}
/* Keyboard focus gets the same invitation; touch stays still. */
.hc-cards { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.hc-card { transition: border-color .5s ease; }
.hc-stage { transition: filter .6s ease; }
@media (hover: hover) and (pointer: fine) {
    .hc-hero:hover .hc-cards { transform: rotateY(-17deg) rotateX(7deg) rotateZ(-2deg) translate(calc(28 * var(--hc-u)), calc(52 * var(--hc-u))); }
    .hc-hero:hover .hc-stage { filter: brightness(1) saturate(1.05); }
    .hc-hero:hover .hc-card { border-color: rgba(110,188,255,.42); }
    .hc-hero:hover .hc-backdrop::after { transform: translateX(3%); }
    .hc-hero:hover .hc-cta { transform: translateY(-2px); }
}
.hc-hero:focus-visible .hc-cta { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .hc-cards, .hc-card, .hc-stage, .hc-backdrop::after, .hc-cta { transition: none; }
    .hc-hero:hover .hc-cards { transform: rotateY(-22deg) rotateX(10deg) rotateZ(-4deg) translate(calc(40 * var(--hc-u)), calc(70 * var(--hc-u))); }
    .hc-hero:hover .hc-backdrop::after, .hc-hero:hover .hc-cta { transform: none; }
}