/* ==========================================================================
   ETG — Hero options (hero-options.html)
   Builds on main.css + theme-logo.css tokens (body.tg[data-theme="logo"]).
   ========================================================================== */

/* ---------- Showcase chrome ---------- */
.ho-intro { background: var(--navy-950); color: var(--on-dark); padding: 48px 0 40px; position: relative; }
.ho-intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); }
.ho-intro h1 { font: 800 clamp(30px, 4vw, 52px)/1 var(--f-display); font-stretch: 118%; text-transform: uppercase; }
.ho-intro p { color: var(--on-dark-2); max-width: 70ch; margin-top: 14px; }
.ho-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ho-jump a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 999px; border: 1px solid var(--line-dark); font-weight: 600; font-size: 14px; transition: background var(--t), border-color var(--t); }
.ho-jump a:hover { background: rgba(255,255,255,.06); border-color: var(--b2); }
.ho-jump b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 13px/1 var(--f-display); }
.ho-jump .rec { color: var(--brass); font: 600 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }

.opt-bar { background: var(--paper); border-block: 1px solid var(--line); padding: 26px 0; position: relative; z-index: 5; }
.opt-bar__in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.opt-bar__letter { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-d); color: #fff; font: 900 30px/1 var(--f-display); font-stretch: 120%; }
.opt-bar h2 { font: 800 24px/1.05 var(--f-display); font-stretch: 115%; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.opt-bar p { color: var(--ink-2); font-size: 15px; margin-top: 6px; max-width: 80ch; }
.opt-bar .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.opt-bar .chips span { font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--ink-2); }
.opt-bar .chips span.sw { padding-left: 6px; display: inline-flex; gap: 6px; align-items: center; }
.opt-bar .chips span.sw i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.badge-rec { font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; padding: 6px 9px; border-radius: 999px; background: var(--brass); color: var(--navy-900); }
.opt-bar__pick { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .opt-bar__in { grid-template-columns: auto 1fr; } .opt-bar__pick { grid-column: 1 / -1; } .opt-bar__letter { width: 48px; height: 48px; font-size: 22px; } }

/* ---------- Shared hero scaffolding ---------- */
.hx { position: relative; overflow: hidden; isolation: isolate; min-height: max(100vh, 780px); color: #fff; display: flex; flex-direction: column; --mx: 0; --my: 0; }
.hx .mz { transform: translate3d(calc(var(--mx) * var(--d, 10) * 1px), calc(var(--my) * var(--d, 10) * 1px), 0); transition: transform 700ms var(--ease); }
.hx-nav { position: relative; z-index: 20; }
.hx-nav__in { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.hx-brand { background: #fff; border-radius: 10px; padding: 4px 10px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
.hx-brand img { height: 42px; width: auto; }
.hx-nav ul { display: flex; gap: 6px; margin-left: auto; }
.hx-nav li a { display: inline-flex; align-items: center; padding: 10px 13px; border-radius: 6px; font-weight: 600; font-size: 15px; color: rgba(255,255,255,.92); transition: background var(--t); }
.hx-nav li a:hover { background: rgba(255,255,255,.1); }
.hx-nav .btn { min-height: 42px; }
@media (max-width: 1080px) { .hx-nav ul { display: none; } .hx-nav .btn { margin-left: auto; } }

.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 999px;
  font: 600 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pill .trophy { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brass); color: var(--navy-900); }
.pill .trophy .ico { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.pill .live { width: 7px; height: 7px; border-radius: 50%; background: #3ECF6E; animation: pulse 2s infinite; }

.hx-title { font-family: var(--f-display); font-weight: 800; line-height: .94; letter-spacing: -.02em; }
.hx-title .grad { background: var(--grad-b); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.hx-title .serif-i { color: var(--brass-200); }
.hx-lede { font-size: clamp(16px, 1.35vw, 19px); color: rgba(255,255,255,.82); max-width: 60ch; }
.hx-lede b { color: #fff; font-weight: 700; }
.hx-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--glass { --bg: rgba(255,255,255,.1); --fg: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.btn--glass:hover { --bg: rgba(255,255,255,.18); border-color: #fff; }
.btn--white { --bg: #fff; --fg: var(--navy-900); }
.btn--white:hover { --bg: var(--paper); }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 500 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .ico { width: 15px; height: 15px; color: var(--brass); }
.trust .ico.f { fill: currentColor; stroke: none; }
.contact-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-row a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-weight: 600; font-size: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--t), transform var(--t) var(--ease); }
.contact-row a:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.contact-row .ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #fff; color: var(--d1); }
.contact-row a:nth-child(2) .ico { color: #1FA855; }
.contact-row a:nth-child(3) .ico { color: var(--d3); }
.contact-row a:nth-child(4) .ico { color: var(--red); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(8%, -6%) scale(1.12); } 66% { transform: translate(-6%, 8%) scale(.92); } 100% { transform: translate(0,0) scale(1); } }
@keyframes shoot { 0% { transform: translate(0,0) rotate(-35deg); opacity: 0; } 8% { opacity: 1; } 30% { transform: translate(-520px, 360px) rotate(-35deg); opacity: 0; } 100% { opacity: 0; transform: translate(-520px, 360px) rotate(-35deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes dash { to { stroke-dashoffset: -40; } }

/* ==========================================================================
   A — ORBIT HORIZON (evolves the current elitetech-global.com hero)
   ========================================================================== */
.hx-a { --R: 900px; background: radial-gradient(1200px 600px at 50% 10%, #12306E 0%, transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(43,85,163,.6), transparent 60%), radial-gradient(900px 500px at 90% 5%, rgba(24,179,160,.35), transparent 60%), linear-gradient(180deg, #050C22 0%, #081534 100%); }
.hx-a__stars { position: absolute; inset: -20% 0 0; z-index: -3; opacity: .7;
  background-image: radial-gradient(1.4px 1.4px at 30px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 120px 90px, #cfe9ff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 200px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 260px 140px, #fff 50%, transparent 51%);
  background-size: 300px 180px; }
.shoot { position: absolute; top: 90px; right: 22%; width: 160px; height: 2px; z-index: -2; background: linear-gradient(90deg, #fff, transparent); border-radius: 2px; animation: shoot 7s ease-in 1.5s infinite; }
.hx-a__orbits { position: absolute; left: 50%; top: calc(320px + var(--R)); width: 0; height: 0; z-index: -1; }
.orbit { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.16); animation: spin var(--dur, 120s) linear infinite; }
.orbit.o1 { --r: calc(var(--R) * 1.11); --dur: 110s; }
.orbit.o2 { --r: calc(var(--R) * 1.25); --dur: 160s; animation-direction: reverse; }
.orbit { width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); }
.bub { position: absolute; left: 50%; top: 50%; width: var(--s, 84px); height: var(--s, 84px); margin: calc(var(--s, 84px) / -2) 0 0 calc(var(--s, 84px) / -2);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.bub > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 0 6px color-mix(in srgb, var(--ring, #19B6F0) 70%, transparent), 0 18px 40px -10px rgba(0,0,0,.6); animation: spin-r var(--dur) linear infinite; }
.orbit.o2 .bub > span { animation-name: spin; }
.bub img { width: 62%; height: 62%; object-fit: contain; }
.hx-a__planet { position: absolute; left: 50%; top: 320px; width: calc(var(--R) * 2); height: calc(var(--R) * 2); margin-left: calc(var(--R) * -1); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 0%, #17377A 0%, #0B1D47 28%, #071434 55%, #050C22 75%); }
.hx-a__planet::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 270deg, #4B86E8 0deg, #19B6F0 40deg, #22C3AE 70deg, #5CCB5F 95deg, transparent 140deg, transparent 220deg, #4B86E8 260deg, #4B86E8 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.hx-a__planet::after { content: ""; position: absolute; inset: -40px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 270deg, rgba(75,134,232,.9), rgba(25,182,240,.9) 40deg, rgba(34,195,174,.8) 70deg, rgba(92,203,95,.7) 95deg, transparent 150deg, transparent 210deg, rgba(75,134,232,.9) 265deg);
  filter: blur(40px); opacity: .75; -webkit-mask: radial-gradient(circle, transparent 60%, #000 66%); mask: radial-gradient(circle, transparent 60%, #000 66%); }
.hx-a__content { position: relative; z-index: 5; flex: 1; display: grid; justify-items: center; align-content: center; text-align: center; gap: 24px; padding-top: 190px; padding-bottom: 70px; }
.hx-a .hx-title { font-size: clamp(40px, 5.6vw, 82px); font-stretch: 100%; letter-spacing: -.035em; }
.hx-a .hx-title .serif-i { font-size: 1.04em; letter-spacing: -.01em; }
.hx-a .hx-lede { text-align: center; }
.hx-a .hx-ctas, .hx-a .trust { justify-content: center; }
@media (max-width: 900px) { .hx-a { --R: 640px; } .hx-a__content { padding-top: 120px; } .bub { --s: 62px !important; } }
@media (max-width: 560px) { .hx-a { --R: 520px; } .hx-a__planet, .hx-a__orbits { top: 200px; } .hx-a__orbits { top: calc(200px + var(--R)); } .bub { --s: 50px !important; } }

/* ==========================================================================
   B — CONNECTED HUB (evolves the elitetechcorp.com hero, on full color)
   ========================================================================== */
.hx-b { background:
    radial-gradient(800px 500px at 85% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(61,181,74,.45), transparent 60%),
    linear-gradient(125deg, #1E4A9A 0%, #0A7FC0 38%, #0B8A7B 72%, #2A8F3A 100%); }
.hx-b__grid { position: absolute; inset: 0; z-index: -2; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 75%); }
.sparkle { position: absolute; z-index: -1; width: 18px; height: 18px; color: rgba(255,255,255,.7); animation: twinkle 3s ease-in-out infinite; }
.sparkle::before, .sparkle::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.sparkle::before { width: 1.5px; height: 100%; } .sparkle::after { width: 100%; height: 1.5px; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.hx-b__body { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-block: 30px 70px; }
.hx-b__copy { display: grid; gap: 24px; }
.hx-b .hx-title { font-size: clamp(42px, 5.4vw, 82px); font-stretch: 116%; text-transform: uppercase; }
.hx-b .hx-title .serif-i { text-transform: none; font-stretch: normal; color: #FFE29A; font-size: 1.06em; }
.hx-b .hx-title .hl { color: #FFE29A; }
.hx-b__compare { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; }
.hx-b__compare a { border-bottom: 1.5px solid rgba(255,255,255,.4); padding-bottom: 1px; }
.hx-b__compare a:hover { border-color: #fff; }
.hub { position: relative; aspect-ratio: 1; width: min(600px, 100%); justify-self: center; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.4; stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; vector-effect: non-scaling-stroke; }
.hub__rings { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.hub__rings::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.3); animation: spin 60s linear infinite; }
.hub__core { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #F1F7FB 55%, #CFE3EE 100%); box-shadow: 0 0 0 10px rgba(255,255,255,.14), 0 0 0 22px rgba(255,255,255,.07), 0 0 80px 20px rgba(255,255,255,.35), 0 30px 60px -20px rgba(0,0,0,.5); }
.hub__core img { width: 78%; height: auto; }
.sph { position: absolute; width: var(--s, 92px); height: var(--s, 92px); left: var(--x); top: var(--y); margin: calc(var(--s, 92px) / -2) 0 0 calc(var(--s, 92px) / -2); }
.sph > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; animation: floaty var(--f, 6s) ease-in-out infinite;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #F6F9FC 38%, #DCE6EF 78%, #C3D2DF 100%);
  box-shadow: inset -8px -10px 18px rgba(24, 60, 100, .18), inset 6px 8px 14px rgba(255,255,255,.9), 0 24px 40px -18px rgba(0,0,0,.45); }
.sph img { width: 54%; height: 54%; object-fit: contain; }
.hx-b .contact-row { margin-top: 4px; }
@media (max-width: 980px) { .hx-b__body { grid-template-columns: 1fr; } .hub { width: min(460px, 100%); } }

/* ==========================================================================
   C — COLOR BLOCK POSTER (bold split, sports-poster energy)
   ========================================================================== */
.hx-c { background: #1E4A9A; }
.hx-c__panel { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 48%;
  background: linear-gradient(160deg, #FFC22E 0%, #FFB01F 55%, #FF8A3C 100%); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.hx-c__panel::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(-55deg, rgba(255,255,255,.18) 0 2px, transparent 2px 22px); }
.hx-c__stripe { position: absolute; z-index: -1; top: 0; bottom: 0; right: calc(48% - 3%); width: 5%; background: linear-gradient(180deg, #19B6F0, #22C3AE, #5CCB5F); clip-path: polygon(64% 0, 100% 0, 36% 100%, 0 100%); opacity: .95; }
.hx-c__ghost { position: absolute; z-index: -1; right: -3%; top: 50%; transform: translateY(-50%) rotate(-8deg); font: 900 clamp(200px, 30vw, 460px)/.8 var(--f-display); font-stretch: 125%; color: transparent; -webkit-text-stroke: 2px rgba(11,26,58,.18); letter-spacing: -.05em; }
.hx-c__dots { position: absolute; z-index: -1; left: -60px; bottom: 80px; width: 360px; height: 220px; opacity: .25; background-image: radial-gradient(#fff 1.6px, transparent 1.8px); background-size: 18px 18px; }
.hx-c__body { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding-block: 20px 40px; }
.hx-c__copy { display: grid; gap: 24px; }
.hx-c .hx-title { font-size: clamp(46px, 6.4vw, 100px); font-stretch: 122%; text-transform: uppercase; line-height: .9; }
.hx-c .hx-title .yel { color: #FFC22E; }
.hx-c .hx-title .serif-i { text-transform: none; font-stretch: normal; color: #fff; font-size: .9em; display: block; margin-top: 8px; }
.hx-c .pill { background: rgba(255,255,255,.12); }
.hx-c__stack { position: relative; height: 520px; }
.hx-c__stack .card-ui { position: absolute; }
.hx-c .cu-a { left: 4%; top: 6%; width: 340px; background: #0B1A3A; border-color: rgba(255,255,255,.1); }
.hx-c .cu-b { right: 0; top: 0; width: 210px; background: #fff; color: var(--ink); border: 0; }
.hx-c .cu-b .mono { color: var(--muted); } .hx-c .cu-b .cu__stat { color: var(--d1); }
.hx-c .cu-c { right: 6%; bottom: 4%; width: 240px; background: #DB4027; border: 0; }
.hx-c .cu-c .mono { color: rgba(255,255,255,.85); }
.hx-c .cu-d { left: 0; bottom: 8%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; color: var(--ink); border: 0; }
.hx-c__ticker { position: relative; z-index: 3; background: #0B1A3A; color: #fff; overflow: hidden; border-top: 4px solid #FFC22E; }
.hx-c__ticker div { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.hx-c__ticker span { display: inline-flex; align-items: center; gap: 22px; padding: 16px 22px; font: 800 20px/1 var(--f-display); font-stretch: 118%; text-transform: uppercase; white-space: nowrap; }
.hx-c__ticker span i { width: 10px; height: 10px; border-radius: 50%; background: var(--grad-b); display: inline-block; }
@media (max-width: 980px) { .hx-c__body { grid-template-columns: 1fr; } .hx-c__panel { width: 100%; top: auto; height: 46%; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); } .hx-c__stripe { display: none; } .hx-c__stack { height: 440px; } .hx-c .cu-a { width: 78%; } }

/* ==========================================================================
   D — LIVING GRADIENT + COUNTDOWN
   ========================================================================== */
.hx-d { background: #071029; }
.blobs { position: absolute; inset: -10%; z-index: -2; filter: blur(70px) saturate(1.2); }
.blob { position: absolute; border-radius: 50%; opacity: .9; animation: drift var(--t, 22s) ease-in-out infinite; }
.blob.b1 { width: 46vw; height: 46vw; left: -6%; top: -10%; background: #2B55A3; --t: 26s; }
.blob.b2 { width: 40vw; height: 40vw; right: -4%; top: -6%; background: #0A9BE0; --t: 22s; animation-delay: -6s; }
.blob.b3 { width: 38vw; height: 38vw; left: 28%; top: 30%; background: #18B3A0; --t: 30s; animation-delay: -12s; }
.blob.b4 { width: 34vw; height: 34vw; right: 6%; bottom: -14%; background: #3DB54A; --t: 24s; animation-delay: -3s; }
.blob.b5 { width: 22vw; height: 22vw; left: 10%; bottom: -6%; background: #FF5A3C; opacity: .55; --t: 20s; animation-delay: -9s; }
.hx-d__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(7,16,41,.15), rgba(7,16,41,.65) 75%); }
.hx-d__body { flex: 1; display: grid; justify-items: center; align-content: center; gap: 22px; text-align: center; padding-block: 10px 40px; }
.hx-d__pre { font: 800 clamp(26px, 3.4vw, 50px)/1 var(--f-display); font-stretch: 118%; text-transform: uppercase; letter-spacing: -.01em; }
.big14 { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .08em; font: 900 clamp(150px, 24vw, 360px)/.78 var(--f-display); font-stretch: 125%; letter-spacing: -.05em; }
.big14 .num { background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 30px 80px rgba(0,0,0,.2); }
.big14 .unit { font-size: .3em; letter-spacing: -.01em; font-stretch: 118%; color: #fff; align-self: center; text-align: left; line-height: .9; }
.big14 .unit em { display: block; font: 400 .7em/1 var(--f-serif); font-style: italic; color: #FFE29A; letter-spacing: 0; text-transform: none; }
.daydots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.daydots i { width: 26px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); transition: background .4s; }
.daydots i.on { background: #fff; }
.daydots i.go { background: #5CCB5F; box-shadow: 0 0 14px #5CCB5F; }
.hx-d .hx-lede { text-align: center; }
.hx-d .hx-ctas, .hx-d .trust { justify-content: center; }
.hx-d__dock { position: relative; z-index: 3; margin: 0 auto 28px; display: grid; grid-template-columns: repeat(4, 1fr); width: min(980px, calc(100% - 32px)); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hx-d__dock a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-right: 1px solid rgba(255,255,255,.15); font-weight: 600; font-size: 14px; transition: background var(--t); }
.hx-d__dock a:last-child { border-right: 0; }
.hx-d__dock a:hover { background: rgba(255,255,255,.12); }
.hx-d__dock small { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; }
.hx-d__dock .ico { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--d1); }
@media (max-width: 760px) { .hx-d__dock { grid-template-columns: 1fr 1fr; } .hx-d__dock a:nth-child(2) { border-right: 0; } }

/* ==========================================================================
   E — COAST-TO-COAST SUNRISE (layered landscape parallax)
   ========================================================================== */
.hx-e { background: linear-gradient(180deg, #071029 0%, #12307A 26%, #0A7FC0 50%, #4FB7C9 64%, #FFC97A 80%, #FF8A5C 92%); }
.hx-e__sun { position: absolute; z-index: -4; left: 62%; top: 52%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, #FFF6D8 0%, #FFD36B 45%, #FF9F4A 75%, rgba(255,138,92,0) 76%); box-shadow: 0 0 160px 60px rgba(255,190,90,.45); }
.hx-e__stars { position: absolute; inset: 0 0 50%; z-index: -5; opacity: .6; background-image: radial-gradient(1.2px 1.2px at 40px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 140px 80px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 220px 40px, #fff 50%, transparent 51%); background-size: 260px 120px; mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent); }
.cloud { position: absolute; z-index: -3; height: 40px; border-radius: 40px; background: rgba(255,255,255,.35); filter: blur(4px); animation: cloud var(--t, 80s) linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 60px; height: 60px; left: 22%; top: -28px; } .cloud::after { width: 80px; height: 80px; left: 46%; top: -40px; }
@keyframes cloud { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
.land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; display: block; }
.land--far { z-index: -3; bottom: 18%; } .land--mid { z-index: -2; bottom: 8%; } .land--city { z-index: -1; }
.hx-e__body { flex: 1; display: grid; align-content: start; gap: 22px; padding-top: clamp(40px, 7vh, 90px); padding-bottom: 300px; max-width: 760px; }
.hx-e .hx-title { font-size: clamp(44px, 6vw, 92px); font-stretch: 118%; text-transform: uppercase; text-shadow: 0 6px 30px rgba(7,16,41,.35); }
.hx-e .hx-title .serif-i { text-transform: none; font-stretch: normal; color: #FFE29A; font-size: 1.05em; }
.hx-e .hx-lede { color: #fff; text-shadow: 0 2px 14px rgba(7,16,41,.5); }
.hx-e__tags { position: absolute; z-index: 4; right: 4%; bottom: 26%; display: grid; gap: 8px; justify-items: end; }
.hx-e__tags span { padding: 8px 12px; border-radius: 999px; background: rgba(7,16,41,.55); backdrop-filter: blur(8px); font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.hx-e__tags span b { color: #FFC22E; }
@media (max-width: 760px) { .hx-e__tags { display: none; } .hx-e__body { padding-bottom: 220px; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orbit, .bub > span, .blob, .cloud, .hx-c__ticker div, .shoot, .sph > span, .hub__lines path { animation: none !important; }
}