/* GENEROITU — älä muokkaa. Lähde: docs/tenants/nox-visual/etusivu-3d-2026-09/prototype/case-home-heroes.css. Aja: node scripts/nv3/port-css.mjs (ADR 0010). */
/* Oma tuote: Home Heroes. Sivu ottaa pelin maailman (brand board v1: violetti kangas, kulta premiumille,
   lime säästeliäästi vain toimintoon, Lilita One + Fredoka sovelluksen omista fonteista). NOX-kehys pysyy NOXina. */
@font-face { font-family: 'Lilita One'; font-weight: 400; font-display: swap; src: url('assets/case/home-heroes/fonts/lilita-one-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lilita One'; font-weight: 400; font-display: swap; src: url('assets/case/home-heroes/fonts/lilita-one-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-weight: 400 700; font-display: swap; src: url('assets/case/home-heroes/fonts/fredoka-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-weight: 400 700; font-display: swap; src: url('assets/case/home-heroes/fonts/fredoka-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html.theme-nox-visual-v3 body.case-home-heroes {
  --hh-night: #2a0f4a;
  --hh-violet: #3d1d6e;
  --hh-purple: #5a2e8c;
  --hh-gold-1: #fff099;
  --hh-gold: #ffd23f;
  --hh-gold-3: #e9a51d;
  --hh-gold-edge: #6e3a05;
  --hh-orange: #ff8c42;
  --hh-lime-1: #c5fa70;
  --hh-lime: #95e024;
  --hh-lime-edge: #2f5a00;
  --hh-lime-ink: #1f3d00;
  --hh-parch: #fff7d6;
  --hh-parch-2: #f0d99a;
  --hh-ink: #1a0a2e;
  --hh-lilac: #efe7fb;
  --hh-violet-1: #9a62de;
  --hh-violet-2: #8a4fd0;
  --hh-violet-3: #6428a8;
  --hh-violet-4: #4d2380;
  --hh-violet-5: #33155c;
  --hh-violet-edge: #3a1268;
  --hh-gold-deep: #a8660c;
  --hh-orange-1: #ff9c44;
  --hh-orange-2: #ff5722;
  --hh-orange-3: #c62200;
  --hh-orange-edge: #5e1100;
  --hh-lime-3: #7fc51a;
  --hh-sky-1: #8cb6fa;
  --hh-sky-2: #5f9cf4;
  --hh-sky-3: #3b7cf0;
  --hh-sky-4: #1f55c9;
  --hh-ink-2: #5d4b78;
  --hh-dusk: #4b2479;
  --hh-bezel: #150a26;
  --hh-bezel-2: #241638;
  --hh-bezel-hi: #4a3866;
  --hh-bezel-hi-2: #3a2a52;
  --hh-screen: #160a2a;
  --hh-path: #dcc382;
  --hh-track-ring: #d9cdee;
  --hh-body: 'Fredoka', 'General Sans', system-ui, sans-serif;
  --case-bg: var(--hh-night);
  --case-bg-2: var(--hh-violet);
  --case-fg: var(--hh-parch);
  --case-fg-2: rgb(255 247 214 / 72%);
  --case-accent: var(--hh-gold);
  --case-hot: var(--hh-orange);
  --case-line: rgb(255 247 214 / 14%);
  --case-font: 'Lilita One', 'General Sans', sans-serif;
}
html.theme-nox-visual-v3 .case-home-heroes .is-navy { background: var(--hh-night); color: var(--case-fg); }
/* Vaaleat pinnat: pergamentti ja liila. Omat --fg-arvot, ettei navy-osion valkoinen vuoda (README: opit) */
html.theme-nox-visual-v3 .case-home-heroes .hh-light { --case-fg: var(--hh-ink); --case-fg-2: var(--hh-ink-2); --case-accent: var(--hh-violet-3); --case-line: rgb(26 10 46 / 12%); --fg: var(--hh-ink); --fg-2: var(--hh-ink-2); color: var(--hh-ink); }
html.theme-nox-visual-v3 .hh-parch { background: var(--hh-parch); }
html.theme-nox-visual-v3 .hh-lilac { background: var(--hh-lilac); }
html.theme-nox-visual-v3 .case-home-heroes[data-surface='paper'] .nav { color: var(--navy); }
html.theme-nox-visual-v3 .case-home-heroes .case-progress span { background: linear-gradient(90deg, var(--hh-gold), var(--hh-orange)); }
html.theme-nox-visual-v3 .case-home-heroes .c-kicker { font-family: var(--hh-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; color: var(--case-accent); }
html.theme-nox-visual-v3 .hh-h2 { margin-top: 14px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 4.6rem); line-height: 1.02; letter-spacing: 0.005em; text-wrap: balance; }
html.theme-nox-visual-v3 .hh-body { margin-top: 20px; max-width: 34rem; text-wrap: pretty; font-family: var(--hh-body); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .hh-num { font-family: 'Lilita One', sans-serif; font-size: 15px; letter-spacing: 0.08em; color: var(--case-accent); }

/* Lime 3D-nappi kuten pelin "Tee tehtävä": tummanvihreä teksti (≥ 5,6:1 koko liukuvärillä), koska valkoinen limellä ei erotu */
html.theme-nox-visual-v3 .hh-store { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 14px; font: 400 20px/1 'Lilita One', sans-serif; letter-spacing: 0.02em; color: var(--hh-lime-ink); background: linear-gradient(180deg, var(--hh-lime-1), var(--hh-lime) 58%, var(--hh-lime-3)); box-shadow: inset 0 2px 0 rgb(255 255 255 / 50%), 0 5px 0 var(--hh-lime-edge), 0 16px 30px -10px rgb(47 90 0 / 60%); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
html.theme-nox-visual-v3 .hh-store:hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 rgb(255 255 255 / 50%), 0 7px 0 var(--hh-lime-edge), 0 20px 34px -10px rgb(47 90 0 / 60%); }
html.theme-nox-visual-v3 .hh-store:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgb(255 255 255 / 50%), 0 1px 0 var(--hh-lime-edge), 0 6px 14px -6px rgb(47 90 0 / 60%); }
html.theme-nox-visual-v3 .hh-store:focus-visible, html.theme-nox-visual-v3 .hh-keys button:focus-visible, html.theme-nox-visual-v3 .hh-relock:focus-visible { outline: 3px solid var(--hh-gold); outline-offset: 4px; }

/* Laitekehykset: näyttö on aito kuvakaappaus App Store -kuvista, kehys piirretään. Marginaali % lasketaan
   kehyksen omasta leveydestä (grid estää marginaalin romahtamisen) */
html.theme-nox-visual-v3 .hh-phone, html.theme-nox-visual-v3 .hh-ipad { display: grid; background: linear-gradient(150deg, var(--hh-bezel-hi), var(--hh-bezel) 38%, var(--hh-bezel-2) 70%, var(--hh-bezel-hi-2)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 16%), 0 0 0 1px rgb(0 0 0 / 55%), 0 50px 90px -34px rgb(12 2 30 / 80%); }
html.theme-nox-visual-v3 .hh-phone { border-radius: 19% / 8.9%; }
html.theme-nox-visual-v3 .hh-phone-in { position: relative; display: block; margin: 3.4%; aspect-ratio: 734 / 1600; border-radius: 16.4% / 7.6%; overflow: hidden; background: var(--hh-screen); }
html.theme-nox-visual-v3 .hh-ipad { border-radius: 6.4% / 4.8%; }
html.theme-nox-visual-v3 .hh-ipad-in { position: relative; display: block; margin: 3.6%; aspect-ratio: 1197 / 1600; border-radius: 2.6% / 1.95%; overflow: hidden; background: var(--hh-screen); container-type: inline-size; }
html.theme-nox-visual-v3 .hh-phone-in img, html.theme-nox-visual-v3 .hh-ipad-in > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 1 · Hero: violetti kangas kuten sovelluksessa (auringonsäde ylhäällä, hehkuva horisontti) */
html.theme-nox-visual-v3 .case-home-heroes .hh-hero { background: radial-gradient(ellipse 55% 38% at 72% -6%, rgb(255 200 100 / 20%), transparent 66%), radial-gradient(ellipse 80% 42% at 62% 104%, rgb(255 120 200 / 16%), transparent 66%), linear-gradient(180deg, var(--hh-dusk) 0%, var(--hh-violet) 46%, var(--hh-night) 100%); }
html.theme-nox-visual-v3 .case-home-heroes .c-hero::after { background: none; }
html.theme-nox-visual-v3 .case-home-heroes .c-hero h1 { margin: 22px 0 26px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(2.9rem, 5.6vw, 5.4rem); line-height: 1; letter-spacing: 0.01em; text-shadow: 0 0.05em 0 rgb(26 10 46 / 55%); }
html.theme-nox-visual-v3 .case-home-heroes .c-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
html.theme-nox-visual-v3 .case-home-heroes .c-hero h1 .line > span { white-space: nowrap; }
html.theme-nox-visual-v3 .case-home-heroes .h1-sub { color: var(--hh-gold); font-size: 0.7em; }
html.theme-nox-visual-v3 .case-home-heroes .c-lead, html.theme-nox-visual-v3 .case-home-heroes .c-meta dd { font-family: var(--hh-body); }
html.theme-nox-visual-v3 .case-home-heroes .c-meta dt { font-family: var(--hh-body); }
html.theme-nox-visual-v3 .hh-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
html.theme-nox-visual-v3 .hh-hero-note { font-family: var(--hh-body); font-size: 15px; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .case-home-heroes .c-scroll span { background: linear-gradient(var(--hh-gold), transparent); }

/* Näyttämö: kerrokset liikkuvat syvyytensä (--d) mukaan kursorin (--mx/--my) ja vierityksen (--sp) tahdissa.
   Kolme tasoa, jotta animaatiot eivät kirjoita toistensa transformin yli: kerros (JS) → pop (sisääntulo) → kuva (kellunta) */
html.theme-nox-visual-v3 .hh-stage { --mx: 0; --my: 0; --sp: 0; position: relative; justify-self: center; width: 100%; max-width: 660px; aspect-ratio: 1 / 1.08; }
html.theme-nox-visual-v3 .hh-glow { position: absolute; inset: 4% 2% 8%; border-radius: 50%; background: radial-gradient(circle, rgb(255 210 63 / 32%), rgb(236 72 153 / 14%) 42%, transparent 68%); pointer-events: none; }
html.theme-nox-visual-v3 .hh-layer { position: absolute; transform: translate3d(calc(var(--mx) * var(--d) * 28px + var(--sx, 0) * var(--sp) * 110px), calc(var(--my) * var(--d) * 20px + var(--sy, 0) * var(--sp) * 80px), 0) rotate(calc(var(--mx) * var(--d) * 3deg)); will-change: transform; }
html.theme-nox-visual-v3 .hh-pop { display: block; animation: hh-spawn 1.2s var(--ease-out) both; }
html.theme-nox-visual-v3 .hh-layer img { display: block; width: 100%; height: auto; }
html.theme-nox-visual-v3 .hh-stage-phone { left: 30%; top: 9%; width: 41%; }
html.theme-nox-visual-v3 .hh-stage-phone .hh-pop { animation-delay: 0.15s; }
html.theme-nox-visual-v3 .hh-stage-phone .hh-phone { transform: rotate(-5deg); }
html.theme-nox-visual-v3 .hh-logo { right: -3%; top: -4%; width: 44%; z-index: 2; }
html.theme-nox-visual-v3 .hh-logo .hh-pop { animation-delay: 0.45s; }
html.theme-nox-visual-v3 .hh-logo img { animation: hh-bob 6s ease-in-out infinite alternate; filter: drop-shadow(0 18px 24px rgb(12 2 30 / 55%)); }
html.theme-nox-visual-v3 .hh-hero-fairy { left: -1%; top: 6%; width: 36%; z-index: 3; }
html.theme-nox-visual-v3 .hh-hero-fairy .hh-pop { animation-delay: 0.65s; }
html.theme-nox-visual-v3 .hh-hero-pirate { right: -5%; bottom: 1%; width: 43%; z-index: 3; }
html.theme-nox-visual-v3 .hh-hero-pirate .hh-pop { animation-delay: 0.8s; }
html.theme-nox-visual-v3 .hh-hero-knight { left: -4%; bottom: -5%; width: 50%; z-index: 4; }
html.theme-nox-visual-v3 .hh-hero-knight .hh-pop { animation-delay: 0.95s; }
html.theme-nox-visual-v3 .hh-hero-fairy img, html.theme-nox-visual-v3 .hh-hero-pirate img, html.theme-nox-visual-v3 .hh-hero-knight img { filter: drop-shadow(0 24px 26px rgb(12 2 30 / 50%)); animation: hh-bob 4.6s ease-in-out infinite alternate; }
html.theme-nox-visual-v3 .hh-hero-pirate img { animation-duration: 5.4s; animation-delay: -1.8s; }
html.theme-nox-visual-v3 .hh-hero-fairy img { animation-duration: 3.8s; animation-delay: -0.9s; }
@keyframes hh-spawn { 0% { opacity: 0; transform: translateY(60px) scale(0.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hh-bob { from { transform: translateY(-1.5%) rotate(-1deg); } to { transform: translateY(1.5%) rotate(1deg); } }

/* 2 · Ongelmasta julkaisuun: tasokartta. Polku rakennetaan JS:llä solmujen keskipisteistä */
html.theme-nox-visual-v3 .hh-quest { position: relative; padding: clamp(100px, 11vw, 170px) 0 clamp(110px, 12vw, 180px); overflow: hidden; }
html.theme-nox-visual-v3 .hh-head { max-width: 46rem; }
html.theme-nox-visual-v3 .hh-map { position: relative; margin-top: clamp(40px, 5vw, 80px); }
html.theme-nox-visual-v3 .hh-path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
html.theme-nox-visual-v3 .hh-path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
html.theme-nox-visual-v3 .hh-path-bg { stroke: var(--hh-path); stroke-width: 4; stroke-dasharray: 2 12; }
html.theme-nox-visual-v3 .hh-path-fg { stroke: var(--hh-purple); stroke-width: 4; }
html.theme-nox-visual-v3 .hh-token { position: absolute; left: 0; top: 0; z-index: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hh-gold-1), var(--hh-gold) 45%, var(--hh-gold-3)); box-shadow: 0 0 0 4px rgb(255 210 63 / 30%), 0 0 22px 6px rgb(255 210 63 / 55%); pointer-events: none; }
html.theme-nox-visual-v3 .hh-stops { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .hh-stop:nth-child(1) { padding-top: clamp(80px, 11vw, 170px); }
html.theme-nox-visual-v3 .hh-stop:nth-child(3) { padding-top: clamp(40px, 5.5vw, 90px); }
html.theme-nox-visual-v3 .hh-node { position: relative; width: clamp(150px, 14vw, 220px); aspect-ratio: 1; margin: 0 0 30px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px var(--hh-gold), 0 0 0 9px var(--hh-gold-deep), 0 26px 44px -16px rgb(42 15 74 / 55%); transform: scale(0.88); filter: saturate(0.2) brightness(0.95); transition: transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1), filter 0.6s, box-shadow 0.6s; }
html.theme-nox-visual-v3 .hh-stop.is-lit .hh-node { transform: none; filter: none; box-shadow: 0 0 0 5px var(--hh-gold), 0 0 0 9px var(--hh-gold-deep), 0 0 0 22px rgb(255 210 63 / 22%), 0 26px 44px -16px rgb(42 15 74 / 55%); }
html.theme-nox-visual-v3 .hh-node img { width: 100%; height: 100%; object-fit: cover; }
html.theme-nox-visual-v3 .hh-node-hero { background: radial-gradient(circle at 50% 36%, var(--hh-sky-1), var(--hh-sky-3) 48%, var(--hh-sky-4) 82%); }
html.theme-nox-visual-v3 .hh-node-hero img { object-fit: contain; object-position: 50% 100%; transform: translateY(6%) scale(1.06); }
html.theme-nox-visual-v3 .hh-node-medal { background: radial-gradient(circle at 50% 38%, var(--hh-violet-2), var(--hh-violet-4) 72%); }
html.theme-nox-visual-v3 .hh-node-medal img { object-fit: contain; padding: 11%; }
html.theme-nox-visual-v3 .hh-stop-copy h3 { margin: 6px 0 12px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(1.8rem, 2.4vw, 2.5rem); letter-spacing: 0.01em; }
html.theme-nox-visual-v3 .hh-stop-copy p { max-width: 25rem; text-wrap: pretty; font-family: var(--hh-body); font-size: 17px; line-height: 1.6; color: var(--case-fg-2); }

/* 3 · Sankarit: hahmonvalinta; valittu sankari liikkuu kultakehyksisessä muotokuvassa, säteet pyörivät takana */
html.theme-nox-visual-v3 .case-home-heroes .hh-roster { position: relative; padding: clamp(100px, 11vw, 160px) 0; overflow: hidden; background: radial-gradient(ellipse 46% 60% at 74% 50%, rgb(90 46 140 / 75%), transparent 72%), var(--hh-night); }
html.theme-nox-visual-v3 .hh-roster-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
html.theme-nox-visual-v3 .hh-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); max-width: 30rem; margin-top: 44px; }
html.theme-nox-visual-v3 .hh-picks button { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: radial-gradient(circle at 50% 30%, var(--c1), var(--c2) 78%); box-shadow: 0 0 0 3px var(--hh-ink), 0 0 0 5px rgb(255 247 214 / 22%); transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.4s; }
html.theme-nox-visual-v3 .hh-picks img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.5); transform-origin: 50% 8%; }
html.theme-nox-visual-v3 .hh-picks button:hover { transform: translateY(-3px); }
html.theme-nox-visual-v3 .hh-picks button.is-on { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 3px var(--hh-ink), 0 0 0 6px var(--hh-gold), 0 0 26px 4px rgb(255 210 63 / 45%); }
html.theme-nox-visual-v3 .hh-spot { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
html.theme-nox-visual-v3 .hh-rays { position: absolute; inset: -12%; background: repeating-conic-gradient(rgb(255 210 63 / 13%) 0deg 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%); mask: radial-gradient(circle, #000 22%, transparent 66%); animation: hh-spin 48s linear infinite; pointer-events: none; }
@keyframes hh-spin { to { transform: rotate(1turn); } }
html.theme-nox-visual-v3 .hh-portrait { position: relative; width: 76%; aspect-ratio: 1; margin: 0; border-radius: 50%; padding: 3.2%; background: conic-gradient(from 210deg, var(--hh-gold-1), var(--hh-gold) 18%, var(--hh-gold-3) 34%, var(--hh-gold-1) 50%, var(--hh-gold) 68%, var(--hh-gold-3) 84%, var(--hh-gold-1)); box-shadow: 0 0 0 4px var(--hh-gold-deep), 0 50px 100px -30px rgb(0 0 0 / 65%), 0 0 140px 10px rgb(255 210 63 / 16%); }
html.theme-nox-visual-v3 .hh-portrait-in { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--c1), var(--c2) 82%); box-shadow: inset 0 0 0 4px rgb(26 10 46 / 55%); }
html.theme-nox-visual-v3 .hh-portrait video, html.theme-nox-visual-v3 .hh-portrait-still { position: absolute; inset: 0; width: 100%; height: 100%; }
html.theme-nox-visual-v3 .hh-portrait video { object-fit: cover; }
html.theme-nox-visual-v3 .hh-portrait-still { object-fit: contain; object-position: 50% 100%; padding: 6% 8% 0; transition: opacity 0.4s; }
html.theme-nox-visual-v3 .hh-portrait.is-playing .hh-portrait-still { opacity: 0; }

/* 4 · Mitä tehtiin: laite pinnattuna vasemmalla, kohdat vierivät oikealla */
html.theme-nox-visual-v3 .hh-build { position: relative; padding: clamp(100px, 11vw, 160px) 0 clamp(40px, 6vw, 100px); }
html.theme-nox-visual-v3 .hh-build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); }
html.theme-nox-visual-v3 .hh-build-stage { position: sticky; top: 0; height: 100vh; container-type: inline-size; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(22px, 3.4vh, 40px); }
html.theme-nox-visual-v3 .hh-devices { --dh: min(60vh, 600px, 86cqw); position: relative; width: calc(var(--dh) * 1.04); max-width: 100%; height: var(--dh); }
html.theme-nox-visual-v3 .hh-build-phone, html.theme-nox-visual-v3 .hh-build-ipad { position: absolute; left: 50%; transition: transform 0.9s var(--ease-out), translate 0.9s var(--ease-out), opacity 0.6s; }
html.theme-nox-visual-v3 .hh-build-phone { z-index: 2; top: 0; width: calc(var(--dh) * 0.476); translate: -50% 0; transform: rotate(-3deg); }
html.theme-nox-visual-v3 .hh-build-phone img { opacity: 0; transition: opacity 0.5s; }
html.theme-nox-visual-v3 .hh-build-phone img.is-on { opacity: 1; }
html.theme-nox-visual-v3 .hh-build-ipad { z-index: 1; top: 6%; width: calc(var(--dh) * 0.66); translate: -50% 0; transform: scale(0.82); opacity: 0; }
html.theme-nox-visual-v3 .hh-devices.is-duo .hh-build-phone { translate: calc(-50% - var(--dh) * 0.27) 0; transform: rotate(-6deg); }
html.theme-nox-visual-v3 .hh-devices.is-duo .hh-build-ipad { translate: calc(-50% + var(--dh) * 0.18) 0; transform: rotate(3deg); opacity: 1; }
/* Palkitsemishetki: kultaiset tähdet sinkoutuvat puhelimesta, kun Viimeistely aktivoituu */
html.theme-nox-visual-v3 .hh-burst { position: absolute; left: 50%; top: 42%; z-index: 3; width: 0; height: 0; pointer-events: none; }
html.theme-nox-visual-v3 .hh-burst i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; background: var(--hh-gold); filter: drop-shadow(0 0 3px rgb(100 40 168 / 55%)); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
html.theme-nox-visual-v3 .hh-burst.is-go i { animation: hh-star 1.1s var(--ease-out) forwards; }
html.theme-nox-visual-v3 .hh-burst i:nth-child(1) { --a: 0deg; } html.theme-nox-visual-v3 .hh-burst i:nth-child(2) { --a: 45deg; } html.theme-nox-visual-v3 .hh-burst i:nth-child(3) { --a: 90deg; } html.theme-nox-visual-v3 .hh-burst i:nth-child(4) { --a: 135deg; }
html.theme-nox-visual-v3 .hh-burst i:nth-child(5) { --a: 180deg; } html.theme-nox-visual-v3 .hh-burst i:nth-child(6) { --a: 225deg; } html.theme-nox-visual-v3 .hh-burst i:nth-child(7) { --a: 270deg; } html.theme-nox-visual-v3 .hh-burst i:nth-child(8) { --a: 315deg; }
html.theme-nox-visual-v3 .hh-burst i:nth-child(even) { width: 16px; height: 16px; left: -8px; top: -8px; background: var(--hh-gold-3); }
@keyframes hh-star { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--dh, 400px) * -0.42)) scale(1.1) rotate(90deg); } }
html.theme-nox-visual-v3 .hh-xp { width: min(100%, 420px); font-family: var(--hh-body); }
html.theme-nox-visual-v3 .hh-xp-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
html.theme-nox-visual-v3 .hh-xp-row b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
html.theme-nox-visual-v3 .hh-rank { font-weight: 600; font-size: 15px; color: var(--hh-violet-3); }
html.theme-nox-visual-v3 .hh-xp-bar { position: relative; height: 18px; border-radius: 999px; background: var(--hh-night); box-shadow: inset 0 2px 5px rgb(0 0 0 / 45%), 0 0 0 3px var(--hh-track-ring); overflow: hidden; }
html.theme-nox-visual-v3 .hh-xp-bar i { position: absolute; inset: 3px; border-radius: inherit; background: linear-gradient(180deg, var(--hh-gold-1), var(--hh-gold) 50%, var(--hh-gold-3)); box-shadow: inset 0 2px 0 rgb(255 255 255 / 55%); transform: scaleX(var(--xp, 0.03)); transform-origin: left; }
html.theme-nox-visual-v3 .hh-xp-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .hh-steps { margin: 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .hh-step { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.32; transition: opacity 0.5s; }
html.theme-nox-visual-v3 .hh-step.is-on { opacity: 1; }
html.theme-nox-visual-v3 .hh-step h3 { margin: 8px 0 14px; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: 0.01em; }
html.theme-nox-visual-v3 .hh-step p { max-width: 30rem; text-wrap: pretty; font-family: var(--hh-body); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .hh-step .hh-step-note { margin-top: 16px; font-weight: 600; color: var(--hh-ink); }
html.theme-nox-visual-v3 .hh-facts { display: flex; flex-wrap: wrap; gap: 18px 36px; margin: 30px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--case-line); }
html.theme-nox-visual-v3 .hh-facts li { display: grid; align-content: start; gap: 2px; max-width: 9rem; font-family: var(--hh-body); font-size: 15px; line-height: 1.4; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .hh-facts b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--hh-violet-3); }

/* 5 · App Storessa */
html.theme-nox-visual-v3 .case-home-heroes .hh-strip { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgb(90 46 140 / 55%), transparent 70%), var(--hh-night); }
html.theme-nox-visual-v3 .case-home-heroes .c-strip-count { font-family: 'Lilita One', sans-serif; letter-spacing: 0.06em; }
html.theme-nox-visual-v3 .case-home-heroes .frame figcaption { font-family: var(--hh-body); }
html.theme-nox-visual-v3 .case-home-heroes .f-media { box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%); }

/* 6 · Holvi: lukitusnäkymä piirretään laitteen näyttöön; mitat cqw:nä, jotta UI skaalautuu näytön mukana */
html.theme-nox-visual-v3 .hh-vault { position: relative; padding: clamp(100px, 11vw, 160px) 0; overflow: hidden; }
html.theme-nox-visual-v3 .hh-vault-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
html.theme-nox-visual-v3 .hh-vault-stage { display: grid; justify-items: center; gap: 22px; }
html.theme-nox-visual-v3 .hh-vault-ipad { width: min(100%, calc(min(74vh, 760px) * 0.762)); transform: rotate(-2deg); }
/* Vanhempien näkymä aukeaa lukon päälle iiriksenä oven keskeltä */
html.theme-nox-visual-v3 .hh-vault-open { z-index: 2; clip-path: circle(0% at 50% 28%); transition: clip-path 1.1s var(--ease-io) 0.35s; }
html.theme-nox-visual-v3 .hh-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.8cqw; padding: 5cqw; font-family: var(--hh-body); color: var(--hh-parch); background: radial-gradient(ellipse 80% 40% at 50% 0%, rgb(255 200 100 / 18%), transparent 62%), linear-gradient(180deg, var(--hh-purple), var(--hh-violet) 55%, var(--hh-night)); transition: opacity 0.5s 0.9s, visibility 0s 1.4s; }
html.theme-nox-visual-v3 .hh-lock-title { padding: 1.8cqw 5.6cqw; border-radius: 1.8cqw; font: 400 6cqw/1 'Lilita One', sans-serif; letter-spacing: 0.02em; color: var(--white); text-shadow: 0 0.35cqw 0 var(--hh-orange-edge); background: linear-gradient(180deg, var(--hh-orange-1), var(--hh-orange-2) 60%, var(--hh-orange-3)); box-shadow: inset 0 0.4cqw 0 rgb(255 255 255 / 35%), 0 0.9cqw 0 var(--hh-orange-edge); }
html.theme-nox-visual-v3 .hh-door { position: relative; display: grid; place-items: center; width: 29cqw; aspect-ratio: 1; transition: transform 1s var(--ease-io), opacity 0.6s 0.4s; }
html.theme-nox-visual-v3 .hh-door img { position: absolute; inset: 0; width: 100%; height: 100%; }
html.theme-nox-visual-v3 .hh-door svg { position: relative; width: 34%; fill: none; stroke: var(--hh-gold-edge); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s; }
html.theme-nox-visual-v3 .hh-door svg circle { fill: var(--hh-gold-edge); stroke: none; }
html.theme-nox-visual-v3 .hh-dots { display: flex; gap: 3.4cqw; }
html.theme-nox-visual-v3 .hh-dots i { width: 3.8cqw; aspect-ratio: 1; border-radius: 50%; border: 0.6cqw solid rgb(255 247 214 / 55%); transition: background-color 0.2s, border-color 0.2s, transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); }
html.theme-nox-visual-v3 .hh-dots i.is-on { background: var(--hh-gold); border-color: var(--hh-gold); transform: scale(1.15); }
html.theme-nox-visual-v3 .hh-keys { display: grid; grid-template-columns: repeat(3, 17cqw); gap: 2.4cqw 3cqw; }
/* Kapealla näppäin on silti ≥ 44 px korkea (kosketusalue) */
html.theme-nox-visual-v3 .hh-keys button { aspect-ratio: 1.2; padding: 0; border: 0; border-radius: 2.4cqw; font: 400 6.4cqw/1 'Lilita One', sans-serif; color: var(--hh-parch); cursor: pointer; background: linear-gradient(180deg, var(--hh-violet-1), var(--hh-violet-3)); box-shadow: inset 0 0.5cqw 0 rgb(255 255 255 / 26%), 0 1cqw 0 var(--hh-violet-edge); transition: transform 0.12s, box-shadow 0.12s, filter 0.2s; }
html.theme-nox-visual-v3 .hh-keys button:hover { filter: brightness(1.12); }
html.theme-nox-visual-v3 .hh-keys button:active, html.theme-nox-visual-v3 .hh-keys button.is-press { transform: translateY(0.8cqw); box-shadow: inset 0 0.5cqw 0 rgb(255 255 255 / 26%), 0 0.2cqw 0 var(--hh-violet-edge); }
html.theme-nox-visual-v3 .hh-keys button[data-key='back'] { background: linear-gradient(180deg, var(--hh-violet-4), var(--hh-violet-5)); font-family: var(--hh-body); font-size: 5.4cqw; }
html.theme-nox-visual-v3 .hh-vault-ipad.is-open .hh-door { transform: rotate(200deg) scale(1.3); opacity: 0; }
html.theme-nox-visual-v3 .hh-vault-ipad.is-open .hh-lock { opacity: 0; visibility: hidden; }
html.theme-nox-visual-v3 .hh-vault-ipad.is-open .hh-vault-open { clip-path: circle(150% at 50% 28%); }
html.theme-nox-visual-v3 .hh-relock { padding: 10px 18px; border: 1px solid var(--case-line); border-radius: 10px; background: rgb(255 255 255 / 55%); font: 500 15px/1 var(--hh-body); color: var(--hh-ink); cursor: pointer; transition: background-color 0.3s; }
html.theme-nox-visual-v3 .hh-relock:hover { background: var(--white); }
/* Paikka varataan valmiiksi, ettei osion korkeus muutu (alempien ScrollTriggerien kohdat pysyvät) */
html.theme-nox-visual-v3 .hh-relock[hidden] { display: inline-block; visibility: hidden; }
html.theme-nox-visual-v3 .hh-vault .hh-h2 { font-size: clamp(2.4rem, 4.2vw, 4.1rem); }
html.theme-nox-visual-v3 .hh-body-2 { margin-top: 14px; }
html.theme-nox-visual-v3 .hh-vault-hint { margin-top: 30px; font-family: var(--hh-body); font-weight: 600; font-size: 16px; color: var(--hh-violet-3); }
html.theme-nox-visual-v3 .hh-nowrap { white-space: nowrap; }
html.theme-nox-visual-v3 .hh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 7 · Tuki ja lakitiedot */
html.theme-nox-visual-v3 .hh-support { padding: clamp(100px, 11vw, 160px) 0; }
html.theme-nox-visual-v3 .hh-support-card { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 0 auto; text-align: center; }
html.theme-nox-visual-v3 .hh-support-card .hh-body { max-width: 38rem; }
html.theme-nox-visual-v3 .hh-support-card .hh-body a { color: var(--hh-violet-3); text-decoration: underline; text-underline-offset: 3px; }
html.theme-nox-visual-v3 .hh-icon { width: clamp(110px, 10vw, 150px); aspect-ratio: 1; margin-bottom: 30px; border-radius: 22.5%; box-shadow: 0 30px 60px -22px rgb(42 15 74 / 60%), 0 0 0 1px rgb(26 10 46 / 8%); animation: hh-bob 5s ease-in-out infinite alternate; }
html.theme-nox-visual-v3 .hh-support-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 32px; margin-top: 36px; }
html.theme-nox-visual-v3 .hh-support-actions .link-arrow { font-family: var(--hh-body); font-weight: 600; font-size: 17px; color: var(--hh-ink); }
html.theme-nox-visual-v3 .hh-legal { width: 100%; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--case-line); }
html.theme-nox-visual-v3 .hh-legal p { font-family: var(--hh-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .hh-legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 14px 0 0; padding: 0; list-style: none; }
html.theme-nox-visual-v3 .hh-legal a { font-family: var(--hh-body); font-size: 16px; color: var(--hh-ink); text-decoration: underline; text-decoration-color: rgb(26 10 46 / 28%); text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
html.theme-nox-visual-v3 .hh-legal a:hover { text-decoration-color: currentColor; }

/* 8 · Seuraava: violetti kaista loppuu tähän, footer on taas NOXin oma */
html.theme-nox-visual-v3 .case-home-heroes .c-next { background: var(--hh-night); padding-top: 110px; }
html.theme-nox-visual-v3 .case-home-heroes .cng-fill { stroke: var(--hh-purple); }
html.theme-nox-visual-v3 .hh-cta { align-items: flex-end; }
html.theme-nox-visual-v3 .hh-cta h2 { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1.02; letter-spacing: 0.01em; color: var(--hh-parch); }
html.theme-nox-visual-v3 .case-home-heroes .hh-cta p { max-width: 36rem; margin-top: 14px; font-family: var(--hh-body); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; letter-spacing: 0; color: var(--case-fg-2); }
html.theme-nox-visual-v3 .hh-cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
html.theme-nox-visual-v3 .hh-cta-actions .link-arrow { font-family: var(--hh-body); color: var(--hh-parch); }

@media (max-width: 900px) {
  html.theme-nox-visual-v3 .case-home-heroes .c-hero-grid { grid-template-columns: minmax(0, 1fr); }
  html.theme-nox-visual-v3 .case-home-heroes .c-hero h1 { font-size: clamp(2.5rem, 12.4vw, 4rem); }
  html.theme-nox-visual-v3 .case-home-heroes .c-hero { padding-bottom: 130px; }
  html.theme-nox-visual-v3 .hh-stage { max-width: 440px; margin-top: 10px; }
  html.theme-nox-visual-v3 .hh-stops { grid-template-columns: 1fr; gap: 44px; }
  html.theme-nox-visual-v3 .hh-stop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; }
  html.theme-nox-visual-v3 .hh-stop:nth-child(1), html.theme-nox-visual-v3 .hh-stop:nth-child(3) { padding-top: 0; }
  html.theme-nox-visual-v3 .hh-node { width: 104px; margin: 0; }
  html.theme-nox-visual-v3 .hh-roster-grid { grid-template-columns: 1fr; }
  html.theme-nox-visual-v3 .hh-spot { width: min(100%, 420px); justify-self: center; }
  html.theme-nox-visual-v3 .hh-build-grid { grid-template-columns: 1fr; gap: 10px; }
  html.theme-nox-visual-v3 .hh-build-stage { position: static; height: auto; padding: 30px 0 10px; }
  html.theme-nox-visual-v3 .hh-devices { --dh: min(62vh, 470px); width: calc(var(--dh) * 0.6); }
  html.theme-nox-visual-v3 .hh-build-ipad, html.theme-nox-visual-v3 .hh-burst { display: none; }
  html.theme-nox-visual-v3 .hh-devices.is-duo .hh-build-phone { translate: -50% 0; transform: rotate(-3deg); }
  html.theme-nox-visual-v3 .hh-step { min-height: 0; padding: 26px 0; opacity: 1; }
  html.theme-nox-visual-v3 .hh-facts { gap: 16px 26px; }
  html.theme-nox-visual-v3 .hh-vault-grid { grid-template-columns: 1fr; gap: 48px; }
  html.theme-nox-visual-v3 .hh-vault-copy { order: -1; }
  html.theme-nox-visual-v3 .hh-cta { align-items: flex-start; }
  html.theme-nox-visual-v3 .hh-cta-actions { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-nox-visual-v3 .hh-pop, html.theme-nox-visual-v3 .hh-layer img, html.theme-nox-visual-v3 .hh-icon, html.theme-nox-visual-v3 .hh-rays { animation: none; }
  html.theme-nox-visual-v3 .hh-node { transform: none; filter: none; }
  html.theme-nox-visual-v3 .hh-build-phone, html.theme-nox-visual-v3 .hh-build-ipad, html.theme-nox-visual-v3 .hh-build-phone img, html.theme-nox-visual-v3 .hh-door, html.theme-nox-visual-v3 .hh-lock, html.theme-nox-visual-v3 .hh-vault-open, html.theme-nox-visual-v3 .hh-dots i { transition: none; }
  html.theme-nox-visual-v3 .hh-burst { display: none; }
  html.theme-nox-visual-v3 .hh-step { opacity: 1; }
  /* Liuska ei pinnaudu ilman liikettä → kuvat selataan itse vaakasuunnassa */
  html.theme-nox-visual-v3 .hh-strip .c-strip-pin { height: auto; padding: 110px 0 90px; }
  html.theme-nox-visual-v3 .hh-strip .c-strip-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
  html.theme-nox-visual-v3 .hh-strip .frame { scroll-snap-align: start; scroll-margin-left: var(--gutter); }
}