@import url("tokens.css");
* { box-sizing: border-box; }
html,body { min-height: 100%; margin: var(--sp-0); }
.heto-demo { min-height: 100vh; color: var(--rail-text-strong); background: var(--rail-bg); font-family: var(--font); }
.heto-demo__stage { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 18% 20%,var(--brand-glow,var(--accent-soft)),transparent 38%),linear-gradient(135deg,var(--brand-bg,var(--rail-bg)),var(--rail-bg)); transition: background var(--speed-lg) var(--ease); }
.heto-demo__stage::before { content: ""; position: absolute; inset: var(--sp-0); opacity: .14; background-image: linear-gradient(var(--rail-line) 1px,transparent 1px),linear-gradient(90deg,var(--rail-line) 1px,transparent 1px); background-size: var(--sp-8) var(--sp-8); pointer-events: none; }
.heto-demo__stage[data-brand="netflix"] { --brand-bg: var(--brand-netflix-bg); --brand-glow: var(--brand-netflix-glow); }
.heto-demo__stage[data-brand="ledger"] { --brand-bg: var(--brand-ledger-bg); --brand-glow: var(--brand-ledger-glow); }
.heto-demo__stage[data-brand="backmarket"] { --brand-bg: var(--brand-backmarket-bg); --brand-glow: var(--brand-backmarket-glow); }
.heto-demo__stage[data-brand="typology"] { --brand-bg: var(--brand-typology-bg); --brand-glow: var(--brand-typology-glow); }
.heto-demo__head { position: relative; z-index: var(--z-base); display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); }
.heto-demo__logo { display: grid; place-items: center; width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-md); background: var(--accent); font-weight: var(--fw-black); }
.heto-demo__nav { display: flex; gap: var(--sp-2); margin-inline-start: auto; flex-wrap: wrap; }
.heto-demo__brand { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rail-line); border-radius: var(--r-pill); color: var(--rail-text); background: var(--rail-hover); font: inherit; cursor: pointer; }
.heto-demo__copy { position: relative; z-index: var(--z-base); align-self: center; max-width: 760px; padding: var(--sp-8); }
.heto-demo__eyebrow { color: var(--accent-line); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; }
.heto-demo__title { max-width: 12ch; margin: var(--sp-3) var(--sp-0); font-size: clamp(48px,8vw,110px); line-height: .96; letter-spacing: -.06em; }
.heto-demo__text { max-width: 48ch; color: var(--rail-text); font-size: var(--fs-6); }
.heto-demo__club { position: fixed; inset-inline-start: 50%; inset-block-end: var(--sp-5); z-index: var(--z-panel); transform: translateX(-50%); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--rail-line); border-radius: var(--r-pill); color: var(--rail-text-strong); background: var(--rail-hover); text-decoration: none; backdrop-filter: blur(var(--sp-3)); }