/* Home hero (3 Nov): a centred headline, dot-matrix margins, and the real Today screen sinking into the Kuala Lumpur skyline from the footer.
   Spark orange is the one action colour; the sky runs from titanium to golden hour and back into the page. */
.hx-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 0; font-weight: 600; font-size: 15.5px; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.hx-pill:active { transform: scale(.97); }
.hx-pill.hx-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.hx-pill.hx-hot { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 28px -8px rgba(255,122,46,.7); }
.hx-pill.hx-hot:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 16px 34px -8px rgba(255,122,46,.8); }
.hx-pill.hx-pale { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17,18,20,.08), 0 0 0 1px var(--line); }
.hx-pill.hx-pale:hover { transform: translateY(-2px); }
.hx-pill.hx-ink { background: var(--ink); color: var(--bg); }

/* ---- hero ---- */
.hx-hero { --sky1: #d9d9d7; --sky2: #f6e6cb; --sky3: #efc98f; --dot: #8d8f94; --win-shadow: 0 2px 4px rgba(17,18,20,.05), 0 50px 110px -30px rgba(17,18,20,.38); --cityH: calc(min(100vw, 1280px) * .325); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-hero { --sky1: #1b1d21; --sky2: #10151f; --sky3: #3a2619; --dot: #6a6c72; --win-shadow: 0 2px 4px rgba(0,0,0,.4), 0 50px 110px -30px rgba(0,0,0,.9); } }
:root[data-theme="dark"] .hx-hero { --sky1: #1b1d21; --sky2: #10151f; --sky3: #3a2619; --dot: #6a6c72; --win-shadow: 0 2px 4px rgba(0,0,0,.4), 0 50px 110px -30px rgba(0,0,0,.9); }
.hx-hero { position: relative; padding: 0 16px; background: linear-gradient(180deg, var(--sky1) 0%, color-mix(in srgb, var(--sky1) 55%, var(--bg)) 22%, var(--bg) 40%, var(--sky2) 70%, var(--sky3) 84%, #ff7a2e 100%); overflow: hidden; }
.hx-hero-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 56px 0 0; text-align: center; }
.hx-frame { position: absolute; top: 24px; width: clamp(120px, 13.5vw, 176px); height: 340px; pointer-events: none; }
.hx-frame.hx-l { left: 0; } .hx-frame.hx-r { right: 0; }
.hx-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-frame::before, .hx-frame::after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-bottom: 0; -webkit-mask: linear-gradient(#000 45%, transparent 98%); mask: linear-gradient(#000 45%, transparent 98%); }
.hx-frame::after { border: 0; background:
  linear-gradient(var(--ink-3), var(--ink-3)) 0 0 / 11px 1px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 0 0 / 1px 11px no-repeat,
  linear-gradient(var(--ink-3), var(--ink-3)) 100% 0 / 11px 1px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 100% 0 / 1px 11px no-repeat; -webkit-mask: none; mask: none; opacity: .8; }
.hx-frame span { position: absolute; left: 0; right: 0; top: 148px; text-align: center; font: 500 12px/1 var(--f-mono); letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; }
@media (max-width: 1060px) { .hx-frame { display: none; } }

.hx-hero h1 { position: relative; margin: 0 auto; font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, 8vw, 108px); line-height: .94; letter-spacing: -0.052em; text-wrap: balance; }
.hx-hero h1 .hx-ln { display: block; }
.hx-hero h1 .hx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hx-hero h1 .hx-w > span { display: inline-block; transform: translateY(105%); animation: hx-rise .9s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 120ms); }
.hx-hero h1 em { font-style: normal; color: var(--accent); position: relative; }
.hx-hero h1 em::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: .02em; height: .07em; border-radius: 9px; background: var(--accent); transform-origin: left; transform: scaleX(0); animation: hx-draw .9s .95s var(--ease) forwards; opacity: .9; }
@keyframes hx-rise { to { transform: none; } }
@keyframes hx-draw { to { transform: scaleX(1); } }
.hx-lead { margin: 26px auto 0; max-width: 40ch; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--ink-2); text-wrap: balance; opacity: 0; animation: hx-fade .8s .55s var(--ease) forwards; }
.hx-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; opacity: 0; animation: hx-fade .8s .7s var(--ease) forwards; }
@keyframes hx-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- the window: the real interface (Today), same tokens and shapes as the app ---- */
.hx-stage { position: relative; margin: 54px auto 0; max-width: 1080px; }
.hx-win-wrap { position: relative; width: 100%; height: calc(var(--dh) * var(--s) * 1px); opacity: 0; transform: translateY(40px); animation: hx-lift 1.1s .9s var(--ease) forwards; -webkit-mask: linear-gradient(#000 78%, transparent 100%); mask: linear-gradient(#000 78%, transparent 100%); }
@keyframes hx-lift { to { opacity: 1; transform: none; } }
.hx-win { position: absolute; left: calc((100% - var(--dw) * var(--s) * 1px) / 2); top: 0; width: calc(var(--dw) * 1px); height: calc(var(--dh) * 1px); transform: scale(var(--s)); transform-origin: top left; border-radius: 26px; background: #f2f2f7; box-shadow: var(--win-shadow), 0 0 0 1px rgba(128, 128, 140, .28); overflow: hidden; }
:root[data-theme="dark"] .hx-win { background: #0b0c0e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-win { background: #0b0c0e; } }
.hx-app { pointer-events: none; user-select: none; -webkit-user-select: none; display: block; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: normal; }

/* ---- the Kuala Lumpur skyline from the footer, rising behind the window and fading into the page ---- */
.hx-city { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; display: flex; justify-content: center; }
.hx-city img { width: min(100%, 1280px); height: auto; display: block; -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(#000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(#000 82%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.hx-city .hx-night { display: none; }
:root[data-theme="dark"] .hx-city .hx-night { display: block; } :root[data-theme="dark"] .hx-city .hx-golden { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-city .hx-night { display: block; } :root:not([data-theme="light"]) .hx-city .hx-golden { display: none; } }
.hx-hero-end { height: calc(var(--cityH) * .74); }

@media (prefers-reduced-motion: reduce) {
  .hx-hero h1 .hx-w > span, .hx-lead, .hx-cta, .hx-win-wrap { animation: none; opacity: 1; transform: none; }
  .hx-hero h1 em::after { animation: none; transform: none; }
}

.hx-win-wrap[data-compact] { -webkit-mask: linear-gradient(#000 88%, transparent 100%); mask: linear-gradient(#000 88%, transparent 100%); }