:root {
  color-scheme: dark;
  --bg: #020306;
  --bg-deep: #030305;
  --surface: #0d0d11;
  --surface-raised: #111116;
  --surface-soft: #15151b;
  --text: #f4f0eb;
  --muted: #a9a3a0;
  --dim: #777170;
  --faint: #5f5a59;
  --accent: #ff4a5f;
  --accent-soft: #ff8796;
  --accent-hot: #b31631;
  --accent-deep: #771020;
  --stroke: #202026;
  --stroke-soft: #15151a;
  --content: 1276px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow: 0 26px 80px rgba(0, 0, 0, .38);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 3%, rgba(179, 22, 49, .12), transparent 24rem),
    var(--bg);
  color: var(--text);
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.scroll-progress {
  --scroll-progress: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #ff8b9a);
  box-shadow: 0 0 18px rgba(255, 74, 95, .65);
  pointer-events: none;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  will-change: transform;
}

a { color: inherit; }

img { max-width: 100%; }

button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 750;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 96px;
  background: rgba(2, 3, 6, .72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background .28s ease, box-shadow .28s ease;
}

.site-header.is-scrolled {
  background: rgba(2, 3, 6, .9);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.site-header__inner,
.site-footer__inner,
.section-inner {
  width: min(var(--content), calc(100% - 80px));
  margin-inline: auto;
}

.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--stroke-soft);
}

.brand {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 11px;
  border-radius: 12px;
  color: var(--text);
  font-size: 17px;
  font-weight: 820;
  letter-spacing: .025em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .28s cubic-bezier(.2,.75,.2,1), filter .28s ease;
}

.brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -7px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(255,74,95,.2), rgba(179,22,49,.06) 48%, transparent 72%);
  filter: blur(6px);
  opacity: .62;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.75,.2,1);
}

.brand::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -7px;
  left: 4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,74,95,.82), rgba(255,135,150,.22), transparent);
  box-shadow: 0 0 10px rgba(255,74,95,.32);
  opacity: 0;
  transform: scaleX(.28);
  transform-origin: left;
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.75,.2,1);
}

.brand__icon {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(255,74,95,.26);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 9px 24px rgba(0,0,0,.34), 0 0 20px rgba(179,22,49,.12);
  filter: brightness(1.04) contrast(1.04);
  transition: filter .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.2,.75,.2,1);
}

.brand:hover { transform: translateY(-2px); }
.brand:hover::before { opacity: 1; transform: scale(1.08); }
.brand:hover::after { opacity: .8; transform: scaleX(1); }
.brand:hover .brand__icon { filter: brightness(1.12) contrast(1.06); box-shadow: 0 11px 28px rgba(0,0,0,.38), 0 0 25px rgba(255,74,95,.2); transform: scale(1.035); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 42px;
}

.site-nav a {
  position: relative;
  padding: 36px 0 32px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { color: var(--text); }

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}

.header-action { justify-self: end; }

.button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent-hot);
  box-shadow: 0 10px 34px rgba(179, 22, 49, .22);
  color: #fff4f1;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.button::after {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.27), transparent);
  transform: translateX(-240%) rotate(18deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.button:hover::after,
.button:focus-visible::after { transform: translateX(620%) rotate(18deg); }

.button:hover,
.button:focus-visible {
  background: #ca1938;
  box-shadow: 0 12px 38px rgba(179, 22, 49, .36);
  transform: translateY(-2px);
}

.button--small { min-height: 40px; padding: 10px 20px; }
.button--soft { background: rgba(179, 22, 49, .18); color: var(--accent-soft); box-shadow: none; }
.button--outline { border-color: rgba(255, 74, 95, .3); background: transparent; color: var(--accent-soft); box-shadow: none; }

.page-section { position: relative; }

.section-rule { border-top: 1px solid var(--stroke-soft); }

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.display-title,
.section-title,
.utility-title {
  margin: 0;
  color: var(--text);
  font-weight: 780;
  letter-spacing: -.042em;
}

.display-title {
  max-width: 720px;
  font-size: clamp(48px, 5.1vw, 68px);
  line-height: 1.02;
}

.section-title {
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.12;
}

.section-copy,
.hero-copy,
.utility-lead {
  margin: 18px 0 0;
  color: var(--muted);
}

.hero-copy {
  max-width: 650px;
  font-size: 18px;
}

.section-copy { max-width: 700px; font-size: 16px; }

.hero {
  min-height: 900px;
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -130px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 22, 49, .28), rgba(119, 16, 32, .08) 42%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  animation: ambientPulse 8s ease-in-out infinite alternate;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 72px;
  align-items: start;
  min-height: 810px;
  padding: 112px 0 88px;
}

.hero__content { position: relative; z-index: 2; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 38px;
}

.action-note strong,
.action-note span { display: block; }
.action-note strong { color: var(--text); font-size: 13px; }
.action-note span { margin-top: 3px; color: var(--dim); font-size: 12px; }

.mood-prompt {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px 18px;
  align-items: center;
  max-width: 620px;
  margin-top: 56px;
  overflow: hidden;
  padding: 22px 23px 17px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(179,22,49,.16), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255,74,95,.055), transparent 30%),
    linear-gradient(135deg, rgba(19,19,25,.98), rgba(8,8,12,.98));
  box-shadow: 0 26px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .3s cubic-bezier(.2,.75,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.mood-prompt::before { content: ""; position: absolute; z-index: -1; top: -78px; left: -48px; width: 190px; height: 190px; border: 1px solid rgba(255,74,95,.08); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,74,95,.018), 0 0 0 64px rgba(255,74,95,.01); pointer-events: none; }
.mood-prompt::after { content: ""; position: absolute; z-index: 2; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.72), transparent); box-shadow: 0 0 17px rgba(255,74,95,.32); pointer-events: none; }
.mood-prompt:hover { transform: translateY(-5px); border-color: rgba(255,74,95,.2); box-shadow: 0 34px 82px rgba(0,0,0,.46), 0 0 34px rgba(179,22,49,.07), inset 0 1px 0 rgba(255,255,255,.045); }

.icon-orb {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 38px;
  border: 1px solid rgba(255, 74, 95, .28);
  border-radius: 50%;
  background: rgba(179, 22, 49, .15);
  color: var(--accent);
  font-size: 18px;
}

.mood-prompt__orb { position: relative; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(145deg, rgba(179,22,49,.25), rgba(70,8,23,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 28px rgba(76,7,22,.22); }
.mood-prompt__orb > i { color: var(--accent-soft); font-style: normal; text-shadow: 0 0 13px rgba(255,74,95,.52); transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.mood-prompt__orb > b { position: absolute; inset: -1px; border: 1px solid rgba(255,74,95,.38); border-radius: inherit; opacity: 0; animation: promptRing 2.8s ease-out infinite; }
.mood-prompt:hover .mood-prompt__orb > i { transform: rotate(90deg); }
.prompt-copy { min-width: 0; }
.prompt-copy small,
.prompt-copy strong { display: block; }
.prompt-copy small { color: var(--muted); font-size: 11px; }
.prompt-copy strong { margin-top: 5px; color: var(--text); font-size: 16px; letter-spacing: -.01em; }
.prompt-copy__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prompt-live { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--dim); font-size: 7px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.prompt-live i { width: 5px; height: 5px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 8px rgba(91,212,155,.62); animation: livePulse 2.2s ease-in-out infinite; }
.prompt-traits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.prompt-traits span { padding: 4px 7px; border: 1px solid rgba(255,74,95,.08); border-radius: 999px; background: rgba(179,22,49,.08); color: rgba(255,179,189,.66); font-size: 7px; }
.prompt-match { min-width: 91px; gap: 10px; border-color: rgba(255,74,95,.13); background: linear-gradient(145deg, rgba(102,11,29,.54), rgba(52,7,18,.72)); box-shadow: 0 12px 28px rgba(72,6,20,.22), inset 0 1px 0 rgba(255,255,255,.035); }
.prompt-match i { font-style: normal; transition: translate .25s ease; }
.prompt-match:hover i { translate: 3px -3px; }
.prompt-signal { grid-column: 2 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05); color: var(--dim); font-size: 7px; letter-spacing: .035em; text-transform: uppercase; }
.prompt-signal > i { height: 2px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.055); }
.prompt-signal > i b { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(179,22,49,.62), var(--accent), #ff9baa); box-shadow: 0 0 10px rgba(255,74,95,.35); transform-origin: left; animation: promptSignalFill 1.15s cubic-bezier(.2,.8,.2,1) .45s both; }
.prompt-signal strong { color: #82cba7; font-size: 7px; font-weight: 780; }

.hero-device-wrap {
  position: relative;
  z-index: 2;
  width: min(620px, 48vw);
  height: 820px;
  margin: -18px auto 0;
  transition: transform .16s ease-out;
  will-change: transform;
}

.device-deck {
  position: relative;
  width: 100%;
  height: 790px;
  animation: deckFloat 6s ease-in-out infinite;
}

.hero-device {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: min(396px, 31vw);
  aspect-ratio: 1 / 2;
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 70px;
  background: linear-gradient(145deg, #303138 0%, #0b0c10 16%, #030407 70%, #25262b 100%);
  box-shadow: 0 42px 80px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.055), inset 0 1px 2px rgba(255,255,255,.32), inset 0 -1px 2px rgba(255,255,255,.08);
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  transform-origin: 50% 75%;
  transition: transform .9s cubic-bezier(.2,.76,.2,1), opacity .65s ease, filter .65s ease;
  will-change: transform, opacity;
}
.hero-device[data-position="front"] { z-index: 3; pointer-events: auto; }
.hero-device[data-position="back-left"] { z-index: 1; opacity: .53; filter: brightness(.58) saturate(.74); transform: translateX(calc(-50% - 138px)) translateY(65px) scale(.79) rotate(-7deg); }
.hero-device[data-position="back-right"] { z-index: 2; opacity: .66; filter: brightness(.68) saturate(.82); transform: translateX(calc(-50% + 138px)) translateY(65px) scale(.79) rotate(7deg); }
.hero-device:not([data-position="front"]) { pointer-events: none; }
.hero-device::before { content: ""; position: absolute; z-index: -1; inset: 5% -13% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(179,22,49,.19), transparent 66%); filter: blur(34px); opacity: .72; }
.hero-device::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.055); border-radius: 64px; pointer-events: none; }
.device-screen { position: relative; height: 100%; overflow: hidden; padding: 25px 27px 19px; border: 1px solid rgba(255,255,255,.04); border-radius: 59px; background: radial-gradient(circle at 80% 3%, rgba(179,22,49,.15), transparent 25%), linear-gradient(180deg, #07080c 0%, #030407 65%, #050509 100%); box-shadow: inset 0 0 55px rgba(0,0,0,.58); }
.device-screen::before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 118px; height: 29px; border-radius: 0 0 18px 18px; background: #000; transform: translateX(-50%); box-shadow: 0 2px 0 rgba(255,255,255,.025); }
.device-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 23%, rgba(255,255,255,.022) 42%, transparent 57%); pointer-events: none; }
.device-screen > * { position: relative; z-index: 1; }
.device-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 18px; color: rgba(255,255,255,.66); font-size: 8px; font-weight: 720; letter-spacing: .01em; }
.device-status > i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #121318; box-shadow: 0 0 0 3px #000; }
.device-status__icons { justify-self: end; font-size: 7px; letter-spacing: 3px; }
.device-appbar { display: grid; grid-template-columns: 26px 1fr 26px; gap: 9px; align-items: center; margin-top: 26px; }
.device-appbar > div small, .device-appbar > div strong { display: block; }
.device-appbar > div small { color: var(--dim); font-size: 8px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.device-appbar > div strong { margin-top: 2px; font-size: 16px; letter-spacing: -.025em; }
.device-back, .device-more { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.035); color: rgba(255,255,255,.72); }
.device-back { font-size: 20px; line-height: 1; }
.device-more { font-size: 8px; letter-spacing: 1px; }
.device-overview { margin-top: 19px; padding: 15px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: linear-gradient(145deg, rgba(23,23,29,.91), rgba(13,13,17,.93)); box-shadow: 0 15px 32px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.025); }
.device-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.device-card__top strong { font-size: 12px; }
.device-card__top span { color: var(--accent-soft); font-size: 8px; font-weight: 720; }
.device-overview p { margin: 9px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.device-tags { display: flex; gap: 5px; }
.device-tags span { padding: 4px 7px; border: 1px solid rgba(255,74,95,.1); border-radius: 999px; background: rgba(179,22,49,.08); color: #d6a0a8; font-size: 7px; }
.device-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.055); color: var(--dim); font-size: 7px; }
.device-meta b { color: #83caa8; font-size: 7px; font-weight: 720; }
.device-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9px; align-items: center; margin: 17px 4px; color: var(--accent-soft); font-size: 7px; font-weight: 790; letter-spacing: .07em; text-transform: uppercase; }
.device-divider > i { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.5)); box-shadow: 0 0 8px rgba(255,74,95,.18); }
.device-divider > i:last-child { background: linear-gradient(90deg, rgba(255,74,95,.5), transparent); }
.device-divider span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.device-divider span b { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(255,74,95,.7); animation: livePulse 2s ease-in-out infinite; }
.device-audience { position: relative; overflow: hidden; padding: 15px; border: 1px solid rgba(255,255,255,.075); border-radius: 16px; background: radial-gradient(circle at 100% 0, rgba(179,22,49,.13), transparent 38%), linear-gradient(145deg, #15151b, #0d0d12); box-shadow: 0 19px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035); }
.device-audience::before { content: ""; position: absolute; inset: -45% auto -45% -38%; width: 24%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); transform: rotate(14deg); animation: deviceCardShine 6s ease-in-out 2s infinite; }
.device-audience__head { display: flex; align-items: center; gap: 7px; }
.device-audience__head > strong { font-size: 10px; }
.audience-avatar-stack { display: flex; width: 28px; }
.audience-avatar-stack i { width: 12px; height: 12px; margin-right: -4px; border: 1px solid #18181e; border-radius: 50%; background: linear-gradient(145deg, #ff7082, #7d0d23); }
.audience-avatar-stack i:nth-child(2) { background: linear-gradient(145deg, #b082ff, #432170); }
.audience-avatar-stack i:nth-child(3) { background: linear-gradient(145deg, #7ac9be, #195f5d); }
.community-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--dim); font-size: 7px; }
.community-pill i { width: 4px; height: 4px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 7px rgba(91,212,155,.65); }
.device-enjoyed { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.device-enjoyed > strong { color: #fff; font-size: 28px; letter-spacing: -.055em; line-height: 1; }
.device-enjoyed > span { color: rgba(255,255,255,.75); font-size: 9px; font-weight: 690; }
.device-enjoyed small { display: block; margin-top: 3px; color: var(--dim); font-size: 7px; font-weight: 400; }
.device-meter { height: 3px; margin: 11px 0 12px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.device-meter i { display: block; width: 84%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a1028, var(--accent), #ff9aaa); box-shadow: 0 0 10px rgba(255,74,95,.44); transform-origin: left; animation: deviceMeterFill 1.1s cubic-bezier(.2,.8,.2,1) .55s both; }
.device-label { display: block; color: var(--dim); font-size: 7px; font-weight: 690; letter-spacing: .04em; text-transform: uppercase; }
.device-praise { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.device-praise span { display: flex; justify-content: space-between; padding: 7px 9px; border: 1px solid rgba(255,255,255,.05); border-radius: 9px; background: rgba(3,3,6,.38); color: var(--muted); font-size: 7px; }
.device-praise b { color: #fff; }
.device-breakdown { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.055); color: var(--accent-soft); font-size: 7px; font-weight: 710; }
.device-breakdown i { font-style: normal; }
.device-cast__head { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; }
.device-cast__head strong { font-size: 11px; }
.device-cast__head span { color: var(--accent-soft); font-size: 7px; font-weight: 720; }
.device-cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; text-align: center; }
.device-cast > div { min-width: 0; }
.cast-orb { display: grid; width: 51px; height: 51px; margin: 0 auto 7px; place-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: linear-gradient(145deg, #b91636, #450812); color: rgba(255,255,255,.85); font-size: 8px; font-style: normal; font-weight: 800; box-shadow: 0 12px 25px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1); }
.cast-orb--two { background: linear-gradient(145deg, #7e1631, #27121c); }
.cast-orb--three { background: linear-gradient(145deg, #25262e, #090a0e); }
.device-cast strong, .device-cast small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-cast strong { color: rgba(255,255,255,.78); font-size: 7px; }
.device-cast small { margin-top: 2px; color: var(--dim); font-size: 6px; }
.device-home { position: absolute; right: 50%; bottom: 8px; width: 92px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.38); transform: translateX(50%); }

.device-screen--pick,
.device-screen--taste { background: radial-gradient(circle at 75% 8%, rgba(179,22,49,.2), transparent 29%), linear-gradient(180deg, #08090d 0%, #030407 70%, #07050a 100%); }
.device-appbar--centered > div { text-align: center; }
.pick-art { position: relative; height: 260px; margin-top: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 22px; background: radial-gradient(circle at 68% 22%, rgba(255,98,117,.2), transparent 16%), linear-gradient(165deg, #291018 0%, #100d15 42%, #05060a 100%); box-shadow: 0 24px 46px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035); }
.pick-art::before { content: ""; position: absolute; inset: 36% -20% -34% -30%; border-radius: 48% 52% 0 0; background: linear-gradient(150deg, #16131a, #05060a 62%); transform: rotate(-6deg); box-shadow: 0 -1px 0 rgba(255,255,255,.035); }
.pick-art::after { content: ""; position: absolute; inset: auto -10% 0 18%; height: 45%; background: linear-gradient(145deg, transparent 36%, rgba(179,22,49,.21) 37%, rgba(68,8,21,.08) 54%, transparent 55%); filter: blur(2px); }
.pick-art__moon { position: absolute; top: 45px; right: 52px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #ffb8c2, #ff6378 37%, #801127 72%); box-shadow: 0 0 48px rgba(255,74,95,.28); }
.pick-art__horizon { position: absolute; z-index: 2; right: 0; bottom: 81px; left: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.55), transparent); box-shadow: 0 0 14px rgba(255,74,95,.42); }
.pick-art__title,
.pick-art__genre { position: absolute; z-index: 3; right: 20px; left: 20px; display: block; }
.pick-art__title { bottom: 42px; color: #fff; font-size: 19px; font-weight: 830; letter-spacing: .16em; }
.pick-art__genre { bottom: 22px; color: rgba(255,255,255,.54); font-size: 8px; }
.pick-score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 0 3px; }
.pick-score-row small,
.pick-score-row strong { display: block; }
.pick-score-row small { color: var(--dim); font-size: 8px; font-weight: 690; letter-spacing: .04em; text-transform: uppercase; }
.pick-score-row strong { margin-top: 2px; font-size: 32px; letter-spacing: -.055em; }
.pick-score-row > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(91,212,155,.14); border-radius: 999px; background: rgba(31,108,78,.1); color: #86d8b0; font-size: 7px; }
.pick-score-row > span i { width: 5px; height: 5px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 8px rgba(91,212,155,.7); }
.pick-reasons { margin-top: 15px; padding: 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 15px; background: rgba(18,18,24,.75); }
.pick-reasons > small { display: block; margin-bottom: 8px; color: var(--accent-soft); font-size: 7px; font-weight: 780; letter-spacing: .075em; text-transform: uppercase; }
.pick-reasons > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 6px 0; color: var(--muted); font-size: 8px; }
.pick-reasons > div + div { border-top: 1px solid rgba(255,255,255,.045); }
.pick-reasons b { color: rgba(255,255,255,.83); font-size: 8px; }
.device-primary-action { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 11px 14px; border: 1px solid rgba(255,74,95,.2); border-radius: 13px; background: linear-gradient(135deg, #a4102c, #660a1c); color: #fff; font-size: 9px; font-weight: 740; box-shadow: 0 15px 28px rgba(76,6,20,.2), inset 0 1px 0 rgba(255,255,255,.07); }
.device-primary-action--soft { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }

.taste-orbit { position: relative; width: 224px; height: 224px; margin: 31px auto 0; }
.taste-orbit::before,
.taste-orbit::after { content: ""; position: absolute; top: 50%; left: 50%; background: rgba(255,255,255,.055); transform: translate(-50%, -50%); }
.taste-orbit::before { width: 1px; height: 78%; }
.taste-orbit::after { width: 78%; height: 1px; }
.taste-orbit__ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,74,95,.13); border-radius: 50%; transform: translate(-50%, -50%); }
.taste-orbit__ring--one { width: 148px; height: 148px; box-shadow: 0 0 26px rgba(179,22,49,.08); }
.taste-orbit__ring--two { width: 98px; height: 98px; }
.taste-orbit__shape { position: absolute; top: 50%; left: 50%; width: 136px; height: 142px; background: linear-gradient(145deg, rgba(255,74,95,.85), rgba(139,12,37,.77)); clip-path: polygon(50% 0, 94% 35%, 78% 90%, 25% 96%, 5% 36%); filter: drop-shadow(0 12px 20px rgba(179,22,49,.18)); transform: translate(-50%, -50%); }
.taste-orbit__shape::after { content: ""; position: absolute; inset: 1px; background: rgba(255,255,255,.1); clip-path: inherit; }
.taste-orbit__label { position: absolute; color: var(--dim); font-size: 7px; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; }
.taste-orbit__label--story { top: 1px; left: 50%; transform: translateX(-50%); }
.taste-orbit__label--visuals { top: 46%; right: -3px; }
.taste-orbit__label--pace { right: 22px; bottom: 3px; }
.taste-orbit__label--mood { bottom: 3px; left: 20px; }
.taste-orbit__label--novelty { top: 46%; left: -6px; }
.taste-summary { margin-top: 18px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.065); border-radius: 15px; background: linear-gradient(145deg, rgba(22,22,28,.9), rgba(10,10,14,.92)); }
.taste-summary small,
.taste-summary strong { display: block; }
.taste-summary small { color: var(--accent-soft); font-size: 7px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.taste-summary strong { margin-top: 4px; font-size: 17px; }
.taste-summary p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.taste-bars { margin-top: 15px; }
.taste-bars > div { display: grid; grid-template-columns: 42px 1fr 20px; gap: 8px; align-items: center; color: var(--muted); font-size: 7px; }
.taste-bars > div + div { margin-top: 8px; }
.taste-bars i { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.065); }
.taste-bars i b { display: block; width: var(--taste-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8e1029, var(--accent), #ff9cab); }
.taste-bars strong { color: rgba(255,255,255,.7); font-size: 7px; text-align: right; }

.match-float {
  position: absolute;
  z-index: 6;
  isolation: isolate;
  left: -72px;
  bottom: 105px;
  width: 276px;
  overflow: hidden;
  padding: 19px 20px 17px;
  border: 1px solid rgba(255,74,95,.28);
  border-radius: 19px;
  background:
    radial-gradient(circle at 95% 0, rgba(179,22,49,.3), transparent 42%),
    linear-gradient(145deg, #191921, #08090e 78%);
  box-shadow: 0 32px 78px rgba(0,0,0,.78), 0 0 34px rgba(179,22,49,.2), 0 0 0 1px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
  animation: matchFloat 5.2s ease-in-out 1s infinite;
}
.match-float::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 76%); pointer-events: none; }
.match-float::after { content: ""; position: absolute; top: 0; right: 16%; left: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.8), transparent); box-shadow: 0 0 18px rgba(255,74,95,.42); }
.match-float > * { position: relative; }
.match-float__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.match-float small { color: var(--accent-soft); font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.match-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid rgba(91,212,155,.14); border-radius: 999px; background: rgba(31,108,78,.1); color: #86d8b0; font-size: 8px; font-weight: 750; }
.match-live i { width: 5px; height: 5px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 8px rgba(91,212,155,.72); animation: livePulse 2.2s ease-in-out infinite; }
.match-score { display: flex; align-items: baseline; margin-top: 13px; background: linear-gradient(145deg, #fff 22%, #ffc4cc 68%, #ff667a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 18px rgba(179,22,49,.15)); }
.match-score strong { font-size: 46px; font-weight: 790; letter-spacing: -.065em; line-height: .92; }
.match-score sup { margin-left: 2px; font-size: 16px; font-weight: 820; }
.match-score span { margin-left: 8px; color: var(--muted); font-size: 10px; -webkit-text-fill-color: var(--muted); }
.match-float p { margin: 10px 0 0; color: #aaa4a3; font-size: 9px; }
.match-line { height: 4px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.match-line i { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c1028, var(--accent) 70%, #ff9ba9); box-shadow: 0 0 14px rgba(255,74,95,.5); transform-origin: left; animation: matchFill 1.15s cubic-bezier(.2,.8,.2,1) .35s both; }
.match-float__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.055); }
.match-float__footer span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }
.match-float__footer span i { color: var(--accent); font-style: normal; text-shadow: 0 0 10px rgba(255,74,95,.6); }
.match-float__footer b { color: rgba(255,255,255,.72); font-size: 8px; font-weight: 750; }

.hero-device[data-position="front"] .device-insight { visibility: visible; opacity: 1; }
.hero-device:not([data-position="front"]) .device-insight { visibility: hidden; opacity: 0; }
.device-insight { transition: opacity .3s ease, visibility .3s ease; }
.device-insight--reason { left: -58px; bottom: 94px; width: 280px; padding-bottom: 18px; }
.device-insight--shift { right: -54px; bottom: 112px; left: auto; width: 278px; padding-bottom: 18px; }
.insight-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insight-kicker > span { color: #aaa4a3; font-size: 8px; font-weight: 690; text-transform: uppercase; }
.insight-title { display: block; margin-top: 13px; color: #fff; font-size: 24px; letter-spacing: -.035em; }
.insight-proof { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.055); }
.insight-proof span { display: inline-flex; align-items: center; gap: 6px; color: #c6bfbd; font-size: 8px; }
.insight-proof span i { color: var(--accent); font-style: normal; text-shadow: 0 0 10px rgba(255,74,95,.65); }
.insight-proof b { color: rgba(255,255,255,.82); font-size: 11px; }
.shift-score { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.shift-score strong { color: #fff; font-size: 34px; letter-spacing: -.055em; line-height: 1; }
.shift-score span { color: #c6bfbd; font-size: 10px; }

.device-deck__controls { position: absolute; z-index: 8; right: 0; bottom: 8px; left: 0; display: flex; justify-content: center; gap: 9px; }
.device-deck__controls button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.device-deck__controls button span { display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: 0 0 0 1px rgba(255,255,255,.04); transition: width .35s ease, background .35s ease, box-shadow .35s ease; }
.device-deck__controls button[aria-pressed="true"] span { width: 22px; background: var(--accent); box-shadow: 0 0 12px rgba(255,74,95,.5); }
.device-deck__controls button:focus-visible { outline: 1px solid var(--accent-soft); outline-offset: 1px; }
.fiction-note { position: absolute; z-index: 8; right: 0; bottom: -15px; left: 0; margin: 0; color: rgba(169,163,160,.62); font-size: 8px; letter-spacing: .025em; text-align: center; }

.intelligence { padding: 78px 0 94px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 28px;
  margin-top: 38px;
}

.panel,
.feature-card,
.movie-card,
.step-card,
.principle-card,
.utility-card {
  border: 1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(20, 20, 25, .97), rgba(9, 9, 13, .97));
  box-shadow: var(--shadow);
}

.panel { min-height: 340px; padding: 30px; border-radius: var(--radius-lg); }

.panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panel-header h3 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.panel-header a,
.panel-header span { color: var(--dim); font-size: 12px; text-decoration: none; }

.taste-panel { position: relative; overflow: hidden; border-color: rgba(255,255,255,.09); background: radial-gradient(circle at 12% 94%, rgba(179,22,49,.12), transparent 38%), radial-gradient(circle at 94% 4%, rgba(179,22,49,.1), transparent 34%), linear-gradient(145deg, rgba(20,20,26,.98), rgba(7,7,11,.99)); box-shadow: 0 28px 72px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.035); }
.taste-panel::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 76%); pointer-events: none; }
.taste-panel::after { content: ""; position: absolute; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.56), transparent); box-shadow: 0 0 20px rgba(255,74,95,.25); }
.taste-panel > * { position: relative; }
.panel-kicker { margin: 0 0 4px; color: var(--accent-soft); font-size: 8px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.panel-period { display: inline-flex; min-height: 27px; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.065); border-radius: 999px; background: rgba(255,255,255,.025); white-space: nowrap; }
.panel-period i { width: 5px; height: 5px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 8px rgba(91,212,155,.64); }

.taste-panel__body {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 26px;
  align-items: center;
  margin-top: 30px;
}

.taste-panel .taste-panel__body { grid-template-columns: 1.05fr .95fr; gap: 24px; margin-top: 22px; }
.taste-panel .radar { width: min(100%, 218px); }
.taste-panel .radar::before,
.taste-panel .radar::after { z-index: 2; }
.taste-panel .radar::before { background: linear-gradient(145deg, rgba(255,72,96,.94), rgba(166,17,45,.9)); box-shadow: 0 0 32px rgba(255,51,82,.16); }
.taste-panel .radar::after { background: linear-gradient(145deg, rgba(157,18,44,.72), rgba(78,7,23,.74)); }
.taste-panel .radar-label { z-index: 5; color: rgba(220,217,220,.58); font-size: 8px; font-weight: 720; letter-spacing: .055em; }
.taste-panel.is-visible .radar::before,
.taste-panel.is-visible .radar::after { animation: radarArrive .9s cubic-bezier(.18,.8,.2,1) .24s both; transform-origin: center; }
.taste-panel.is-visible .radar-sweep { animation: radarSweep 7s linear 1s infinite; }
.taste-panel.is-visible .radar-node { animation: radarNodePulse 2.8s ease-in-out infinite; }
.taste-panel.is-visible .radar-node:nth-of-type(2) { animation-delay: .35s; }
.taste-panel.is-visible .radar-node:nth-of-type(3) { animation-delay: .7s; }
.taste-panel.is-visible .radar-node:nth-of-type(4) { animation-delay: 1.05s; }
.taste-panel.is-visible .radar-node:nth-of-type(5) { animation-delay: 1.4s; }

.radar {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(179, 22, 49, .12) 0 27%, transparent 28% 46%, rgba(255, 74, 95, .1) 47% 48%, transparent 49%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 50% 50%, 50% 50%;
}

.radar::before,
.radar::after {
  content: "";
  position: absolute;
  inset: 19%;
  clip-path: polygon(50% 0, 97% 35%, 79% 91%, 22% 97%, 4% 38%);
}

.radar::before { background: var(--accent); }
.radar::after { inset: calc(19% + 2px); background: rgba(105, 12, 29, .48); }
.radar-label { position: absolute; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.radar-label--top { top: 0; left: 50%; transform: translateX(-50%); }
.radar-label--right { top: 36%; right: 0; }
.radar-label--bottom-right { right: 13%; bottom: 5%; }
.radar-label--bottom-left { bottom: 5%; left: 12%; }
.radar-label--left { top: 36%; left: 0; }

.signal-copy .eyebrow { margin-bottom: 9px; }
.signal-copy__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signal-copy__top .eyebrow { margin: 0; }
.signal-copy__top > span { padding: 4px 7px; border: 1px solid rgba(91,212,155,.12); border-radius: 999px; background: rgba(31,108,78,.09); color: #7fd6ab; font-size: 8px; font-weight: 760; }
.signal-copy h4 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.taste-panel .signal-copy h4 { margin-top: 8px; background: linear-gradient(145deg, #fff 30%, #ffbdc6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.signal-copy p { margin: 8px 0 18px; color: var(--muted); font-size: 13px; }
.taste-ranks { display: grid; gap: 8px; margin: 14px 0 17px; }
.taste-ranks > div { display: grid; grid-template-columns: 34px 1fr 20px; gap: 8px; align-items: center; }
.taste-ranks span,
.taste-ranks strong { color: var(--dim); font-size: 8px; font-weight: 700; }
.taste-ranks strong { text-align: right; }
.taste-ranks i { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.taste-ranks b { display: block; width: var(--rank); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #821027, var(--accent), #ff8b9b); box-shadow: 0 0 9px rgba(255,74,95,.32); transform-origin: left; }
.taste-panel.is-visible .taste-ranks b { animation: tasteRankFill 1s cubic-bezier(.2,.8,.2,1) .5s both; }
.taste-action { min-height: 37px; padding: 9px 16px; }
.taste-action > span { margin-left: 3px; color: var(--accent-soft); font-size: 16px; transition: transform .2s ease; }
.taste-action:hover > span { transform: translateX(3px); }

.movie-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.mini-movie { min-height: 215px; padding: 18px; border-radius: 14px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.mini-movie:nth-child(1) { background: radial-gradient(circle at 50% 30%, #263855 0 20%, transparent 21%), linear-gradient(155deg, #18273f 0 58%, #080a0f 59%); }
.mini-movie:nth-child(2) { background: radial-gradient(circle at 50% 30%, #641827 0 20%, transparent 21%), linear-gradient(155deg, #3e111a 0 58%, #0e090c 59%); }
.mini-movie:nth-child(3) { background: radial-gradient(circle at 50% 30%, #5b481d 0 20%, transparent 21%), linear-gradient(155deg, #2b2412 0 58%, #0e0c07 59%); }
.mini-movie strong { font-size: 15px; }
.mini-movie span { margin-top: 5px; color: var(--muted); font-size: 11px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 54px; }
.feature-card { min-height: 230px; padding: 30px; border-radius: var(--radius-lg); }
.feature-card,
.movie-card,
.step-card,
.principle-card,
.utility-card,
.panel {
  transition: transform .32s cubic-bezier(.2,.75,.2,1), border-color .32s ease, box-shadow .32s ease;
}
.feature-card:hover,
.movie-card:hover,
.step-card:hover,
.principle-card:hover,
.utility-card:hover,
.panel:hover {
  border-color: rgba(255, 74, 95, .24);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 74, 95, .05);
  transform: translateY(-7px);
}
.feature-card h3 { margin: 20px 0 8px; font-size: 22px; letter-spacing: -.025em; }
.feature-card p { margin: 0; color: var(--muted); }

.cta-section { padding: 36px 0 52px; }
.cta-banner {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  padding: 70px 32px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 120%, rgba(179, 22, 49, .22), transparent 44%),
    linear-gradient(145deg, #111116, #09090d);
  text-align: center;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -100px 25%;
  background: radial-gradient(circle, rgba(255, 74, 95, .12), transparent 62%);
  pointer-events: none;
  animation: ctaGlow 7s ease-in-out infinite alternate;
}
.cta-banner > * { position: relative; }
.cta-banner .section-copy { margin: 12px auto 26px; }

.site-footer { padding: 24px 0 32px; }
.site-footer__inner {
  min-height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  border-top: 1px solid var(--stroke-soft);
}
.footer-brand { font-size: 15px; }
.footer-brand .brand__icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
.footer-nav { display: flex; gap: 28px; }
.footer-nav a,
.footer-meta a { color: var(--dim); font-size: 12px; text-decoration: none; }
.footer-nav a:hover,
.footer-meta a:hover { color: var(--text); }
.footer-meta { justify-self: end; color: var(--faint); font-size: 11px; }
.footer-meta a + a::before { content: "·"; margin: 0 8px; color: var(--faint); }

/* For You */
.personal-hero { min-height: 720px; overflow: clip; }
.personal-hero::after {
  content: "";
  position: absolute;
  top: -220px;
  right: -50px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(116, 16, 35, .2), transparent 66%);
}
.personal-hero .hero__grid { min-height: 620px; padding-top: 76px; align-items: center; }
.profile-card {
  position: relative;
  z-index: 2;
  min-height: 390px;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 82% 24%, rgba(179, 22, 49, .16), transparent 34%),
    radial-gradient(circle at 15% 105%, rgba(255, 74, 95, .08), transparent 42%),
    linear-gradient(145deg, rgba(20, 20, 26, .98), rgba(7, 7, 11, .99));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.profile-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
  pointer-events: none;
}
.profile-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 16%;
  left: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 74, 95, .65), transparent);
  box-shadow: 0 0 24px rgba(255, 74, 95, .34);
}
.profile-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.profile-card h2 { margin: 2px 0 0; font-size: 23px; letter-spacing: -.025em; }
.profile-card p { margin: 3px 0 0; color: var(--dim); font-size: 12px; }
.profile-card .profile-kicker { margin: 0; color: var(--accent-soft); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.profile-live { display: inline-flex; min-height: 27px; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid rgba(89, 213, 152, .18); border-radius: 999px; background: rgba(24, 100, 70, .12); color: #8bdcb6; font-size: 9px; font-weight: 750; white-space: nowrap; }
.profile-live i { width: 6px; height: 6px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 0 4px rgba(91, 212, 155, .1), 0 0 12px rgba(91, 212, 155, .72); }
.profile-card.is-visible .profile-live i { animation: livePulse 2.2s ease-in-out infinite; }
.profile-card__body { display: grid; grid-template-columns: 1.12fr .88fr; gap: 28px; align-items: center; margin-top: 22px; }
.profile-card .radar { width: min(100%, 236px); }
.profile-card .radar::before,
.profile-card .radar::after { z-index: 2; }
.profile-card .radar::before { background: linear-gradient(145deg, rgba(255, 72, 96, .95), rgba(164, 15, 43, .88)); box-shadow: 0 0 36px rgba(255, 51, 82, .18); }
.profile-card .radar::after { background: linear-gradient(145deg, rgba(160, 18, 44, .72), rgba(85, 8, 25, .7)); }
.radar-ring { position: absolute; z-index: 1; inset: 12%; clip-path: polygon(50% 0, 97% 35%, 79% 91%, 22% 97%, 4% 38%); background: rgba(255, 74, 95, .055); filter: drop-shadow(0 0 1px rgba(255, 113, 132, .55)); }
.radar-ring--middle { inset: 27%; background: rgba(255, 74, 95, .045); }
.radar-ring--inner { inset: 40%; background: rgba(255, 74, 95, .07); }
.radar-sweep { position: absolute; z-index: 3; inset: 12%; border-radius: 50%; opacity: .26; background: conic-gradient(from 0deg, transparent 0 82%, rgba(255, 116, 134, .48) 96%, transparent 100%); mask-image: radial-gradient(circle, transparent 0 16%, #000 60%, transparent 72%); }
.profile-card.is-visible .radar-sweep { animation: radarSweep 7s linear 1.1s infinite; }
.radar-node { position: absolute; z-index: 4; width: 7px; height: 7px; border: 1px solid #ffd2d8; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 74, 95, .13), 0 0 14px rgba(255, 74, 95, .75); }
.radar-node--story { top: 19%; left: 50%; transform: translate(-50%, -50%); }
.radar-node--visuals { top: 42%; right: 17%; }
.radar-node--pace { right: 28%; bottom: 20%; }
.radar-node--mood { bottom: 17%; left: 30%; }
.radar-node--novelty { top: 43%; left: 18%; }
.profile-card .radar-label { z-index: 5; color: rgba(220, 217, 220, .62); font-size: 9px; font-weight: 700; letter-spacing: .055em; }
.profile-card.is-visible .radar::before,
.profile-card.is-visible .radar::after {
  animation: radarArrive .9s cubic-bezier(.18,.8,.2,1) .28s both;
  transform-origin: center;
}
.profile-score { position: relative; padding-left: 2px; }
.profile-score__heading { display: flex; align-items: center; justify-content: space-between; }
.profile-score__heading .eyebrow { margin: 0; color: rgba(220, 217, 220, .62); }
.profile-score__heading > span { color: var(--accent); text-shadow: 0 0 18px rgba(255, 74, 95, .72); }
.profile-score__value { display: flex; align-items: flex-start; margin-top: 7px; background: linear-gradient(150deg, #fff 20%, #ffbec8 72%, #ff4a5f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 24px rgba(179, 22, 49, .17)); }
.profile-score__value strong { display: block; font-size: 62px; font-weight: 790; letter-spacing: -.07em; line-height: .94; }
.profile-score__value sup { margin: 4px 0 0 4px; font-size: 20px; font-weight: 800; }
.profile-score__meter { height: 4px; margin: 14px 0 20px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.profile-score__meter i { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f1028, #ff4a5f 72%, #ff9aaa); box-shadow: 0 0 16px rgba(255,74,95,.58); transform-origin: left; }
.profile-card.is-visible .profile-score__meter i { animation: scoreFill 1.15s cubic-bezier(.2,.8,.2,1) .5s both; }
.profile-score__highlight { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(179,22,49,.08)); }
.profile-score__icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: rgba(179,22,49,.2); color: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(255,74,95,.1); }
.profile-score__highlight span { color: var(--dim); font-size: 9px; }
.profile-score__highlight h3 { margin: 1px 0 0; font-size: 15px; letter-spacing: -.01em; }
.profile-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.055); }
.profile-card__footer > span { color: var(--dim); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.profile-card__footer .chip-row { justify-content: flex-end; margin-top: 0; }
.profile-card__footer .chip { min-height: 30px; padding: 6px 11px; background: rgba(17,17,22,.72); font-size: 10px; }
.profile-card__footer .chip--active { background: linear-gradient(135deg, #bd1634, #8e1028); }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(20, 20, 26, .8);
  color: var(--muted);
  font-size: 12px;
}
.chip--active { border-color: rgba(255, 74, 95, .28); background: var(--accent-hot); color: var(--text); }
.profile-card.is-visible .chip--active,
.mood-row .chip--active {
  animation: activeChipGlow 3.8s ease-in-out 1.2s infinite;
}

.mood-section { padding: 58px 0; }
.mood-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.mood-row .section-title { font-size: 27px; }
.mood-row .section-copy { margin-top: 5px; font-size: 13px; }

.recommendations { padding: 72px 0 84px; }
.movie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 34px; }
.movie-card { overflow: hidden; min-height: 390px; border-radius: var(--radius-md); }
.movie-art { position: relative; height: 225px; overflow: hidden; }
.movie-art::before { content: ""; position: absolute; width: 104px; height: 104px; top: 38px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: var(--orb, #283b5f); }
.movie-art::after { content: ""; position: absolute; inset: 55% -10% -25%; transform: rotate(-8deg); background: var(--land, #07101f); }
.movie-art::before,
.movie-art::after { transition: transform .55s cubic-bezier(.2,.75,.2,1); }
.movie-card.is-visible .movie-art::before { animation: movieOrbFloat 5s ease-in-out var(--reveal-delay, 0ms) infinite; }
.movie-card:hover .movie-art::before { transform: translateX(-50%) scale(1.1); }
.movie-card:hover .movie-art::after { transform: rotate(-5deg) translateY(-8px); }
.movie-card:nth-child(1) .movie-art { background: #16233b; --orb: #2b4066; --land: #09111f; }
.movie-card:nth-child(2) .movie-art { background: #3c101a; --orb: #8a2036; --land: #13090c; }
.movie-card:nth-child(3) .movie-art { background: #352a11; --orb: #6a501b; --land: #151106; }
.movie-card:nth-child(4) .movie-art { background: #221139; --orb: #56317c; --land: #0e0819; }
.match-pill { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 6px 10px; border-radius: 999px; background: rgba(2,3,6,.82); font-size: 10px; font-weight: 800; }
.movie-card__body { padding: 22px; }
.movie-card h3 { margin: 0; font-size: 18px; }
.movie-card p { margin: 7px 0; color: var(--dim); font-size: 12px; }
.movie-tag { color: var(--accent-soft); font-size: 11px; font-weight: 700; }

.signals { padding: 80px 0; }
.signals-grid { display: grid; grid-template-columns: .95fr 1.25fr; gap: 70px; align-items: center; }
.signal-list { display: grid; gap: 22px; margin-top: 34px; }
.signal-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.signal-item .icon-orb { width: 30px; height: 30px; font-size: 13px; }
.signal-item strong { display: block; font-size: 14px; }
.signal-item span { color: var(--dim); font-size: 12px; }
.evidence-card { padding: 32px; border: 1px solid var(--stroke); border-radius: var(--radius-lg); background: linear-gradient(145deg, #121217, #0a0a0e); box-shadow: var(--shadow); }
.evidence-card h3 { margin: 0 0 26px; font-size: 18px; }
.evidence-metric { padding: 22px 0; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.evidence-metric strong { font-size: 36px; }
.evidence-metric span { color: var(--muted); font-size: 13px; }

/* About */
.about-hero { min-height: 670px; overflow: clip; }
.about-hero .hero__grid { min-height: 570px; padding-top: 70px; align-items: center; }
.about-hero::after { content: ""; position: absolute; top: -210px; right: -40px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(116,16,35,.18), transparent 68%); pointer-events: none; }
.hero-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 540px; margin-top: 36px; }
.hero-proof__card { position: relative; min-height: 145px; overflow: hidden; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: radial-gradient(circle at 100% 0, rgba(179,22,49,.14), transparent 44%), linear-gradient(145deg, rgba(21,21,27,.92), rgba(8,8,12,.96)); box-shadow: 0 16px 38px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03); transition: transform .3s cubic-bezier(.2,.75,.2,1), border-color .3s ease, box-shadow .3s ease; }
.hero-proof__card::before { content: ""; position: absolute; top: 0; right: 20%; left: 20%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.48), transparent); box-shadow: 0 0 16px rgba(255,74,95,.2); }
.hero-proof__card::after { content: ""; position: absolute; right: -34px; bottom: -46px; width: 100px; height: 100px; border: 1px solid rgba(255,74,95,.07); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,74,95,.018); pointer-events: none; }
.hero-proof__card:hover { transform: translateY(-5px); border-color: rgba(255,74,95,.2); box-shadow: 0 24px 52px rgba(0,0,0,.3), 0 0 28px rgba(179,22,49,.07); }
.hero-proof__top { display: flex; align-items: center; justify-content: space-between; }
.hero-proof__icon { display: grid; width: 35px; height: 35px; flex: 0 0 35px; place-items: center; border: 1px solid rgba(255,74,95,.2); border-radius: 11px; background: rgba(179,22,49,.13); color: var(--accent-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 20px rgba(179,22,49,.08); }
.hero-proof__number { color: rgba(255,74,95,.35); font-size: 10px; font-weight: 820; letter-spacing: .08em; }
.hero-proof p { margin: 0; }
.hero-proof strong,
.hero-proof small { display: block; }
.hero-proof p { margin-top: 12px; }
.hero-proof p strong { font-size: 12px; }
.hero-proof small { margin-top: 3px; color: var(--dim); font-size: 9px; }
.proof-outcome { position: relative; z-index: 2; display: grid; grid-template-columns: 42px 1fr auto; gap: 7px; align-items: center; margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.05); }
.proof-outcome > i { display: block; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.proof-outcome > i > b { display: block; width: 88%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #831027, var(--accent), #ff8b9b); box-shadow: 0 0 9px rgba(255,74,95,.38); transform-origin: left; }
.hero__content.is-visible .proof-outcome > i > b { animation: proofFill 1s cubic-bezier(.2,.8,.2,1) .7s both; }
.proof-outcome > span,
.proof-outcome > strong { color: var(--dim); font-size: 7px; }
.proof-outcome > strong { color: rgba(255,255,255,.68); font-weight: 760; text-align: right; }
.proof-outcome--dots > i { display: flex; align-items: center; gap: 4px; height: auto; overflow: visible; background: none; }
.proof-outcome--dots > i > b { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(255,74,95,.34); transform: none; }
.hero__content.is-visible .proof-outcome--dots > i > b { animation: proofDot 2.2s ease-in-out infinite; }
.hero__content.is-visible .proof-outcome--dots > i > b:nth-child(2) { animation-delay: .3s; }
.hero__content.is-visible .proof-outcome--dots > i > b:nth-child(3) { animation-delay: .6s; }
.decision-flow {
  position: relative;
  z-index: 2;
  min-height: 420px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 86% 8%, rgba(179,22,49,.15), transparent 34%), radial-gradient(circle at 10% 110%, rgba(255,74,95,.06), transparent 38%), linear-gradient(145deg, rgba(20,20,26,.98), rgba(7,7,11,.99));
  box-shadow: 0 34px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.035);
}
.decision-flow::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, #000, transparent 78%); pointer-events: none; }
.decision-flow::after { content: ""; position: absolute; top: 0; right: 18%; left: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.62), transparent); box-shadow: 0 0 22px rgba(255,74,95,.28); }
.decision-flow > * { position: relative; }
.decision-flow__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.decision-flow__label { color: var(--dim); font-size: 9px; font-weight: 820; letter-spacing: .065em; }
.flow-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(91,212,155,.14); border-radius: 999px; background: rgba(31,108,78,.09); color: #83d8af; font-size: 8px; font-weight: 750; white-space: nowrap; }
.flow-live i { width: 5px; height: 5px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 8px rgba(91,212,155,.66); animation: livePulse 2.2s ease-in-out infinite; }
.flow-stack { display: grid; gap: 14px; margin-top: 21px; }
.flow-item { position: relative; display: grid; grid-template-columns: 25px auto 1fr; gap: 11px; align-items: center; min-height: 87px; padding: 13px 15px 13px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: linear-gradient(135deg, rgba(21,21,27,.94), rgba(11,11,16,.96)); box-shadow: 0 12px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.02); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.flow-item:hover { border-color: rgba(255,74,95,.2); transform: translateX(3px); box-shadow: 0 16px 36px rgba(0,0,0,.24), 0 0 24px rgba(179,22,49,.06); }
.flow-step { align-self: start; padding-top: 4px; color: rgba(255,74,95,.42); font-size: 8px; font-weight: 820; letter-spacing: .04em; }
.flow-item .icon-orb { width: 34px; height: 34px; flex-basis: 34px; font-size: 14px; }
.flow-item:not(:last-child)::after { content: "↓"; position: absolute; z-index: 3; left: 50%; bottom: -20px; color: var(--accent); font-size: 16px; text-shadow: 0 0 12px rgba(255,74,95,.55); }
.decision-flow.is-visible .flow-item:not(:last-child)::after { animation: flowArrow 1.5s ease-in-out infinite; }
.flow-copy { min-width: 0; }
.flow-copy > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flow-state { padding: 4px 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 999px; color: var(--dim); font-size: 7px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.flow-chips span { padding: 4px 7px; border: 1px solid rgba(255,74,95,.1); border-radius: 999px; background: rgba(179,22,49,.09); color: var(--accent-soft); font-size: 8px; }
.flow-signal { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 10px; }
.flow-signal > span { color: var(--dim); font-size: 8px; }
.flow-signal > i { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.flow-signal > i b { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #821027, var(--accent), #ff8d9d); box-shadow: 0 0 10px rgba(255,74,95,.38); transform-origin: left; }
.decision-flow.is-visible .flow-signal > i b { animation: flowSignalFill 1s cubic-bezier(.2,.8,.2,1) .45s both; }
.flow-signal > strong { color: var(--accent-soft); font-size: 8px; }
.flow-item--result { border-color: rgba(255,74,95,.5); background: radial-gradient(circle at 92% 10%, rgba(255,142,156,.15), transparent 36%), linear-gradient(135deg, #bd1534, #8b0e28); box-shadow: 0 18px 40px rgba(107,7,28,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.decision-flow.is-visible .flow-item--result { animation: resultGlow 4.2s ease-in-out 1.1s infinite; }
.flow-item strong { display: block; font-size: 12px; }
.flow-result { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.flow-result span { color: #ffd2d9; font-size: 8px; }
.flow-result span b { display: inline; color: #fff; font-size: 13px; }
.flow-result > i { width: 4px; height: 4px; border-radius: 50%; background: #ffbdc7; box-shadow: 0 0 8px rgba(255,255,255,.4); }
.flow-item--result .flow-state { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #ffe4e8; }
.decision-flow__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.055); }
.decision-flow__footer span { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 8px; }
.decision-flow__footer span i { color: var(--accent); font-style: normal; text-shadow: 0 0 10px rgba(255,74,95,.58); }
.decision-flow__footer strong { color: rgba(255,255,255,.72); font-size: 8px; }

.how-section,
.taste-section,
.principles-section { padding: 78px 0; }
.steps-grid,
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 36px; }
.step-card,
.principle-card { min-height: 210px; padding: 28px; border-radius: var(--radius-lg); }
.step-card { position: relative; overflow: hidden; min-height: 258px; display: flex; flex-direction: column; border-color: rgba(255,255,255,.08); background: radial-gradient(circle at 88% 5%, rgba(179,22,49,.13), transparent 32%), linear-gradient(145deg, rgba(21,21,27,.98), rgba(8,8,12,.98)); }
.step-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(135deg, rgba(255,74,95,.08), transparent 46%); transition: opacity .35s ease; pointer-events: none; }
.step-card::after { content: ""; position: absolute; right: -42px; bottom: -58px; width: 140px; height: 140px; border: 1px solid rgba(255,74,95,.08); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,74,95,.025), 0 0 0 48px rgba(255,74,95,.015); pointer-events: none; }
.step-card:hover::before { opacity: 1; }
.step-card__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.step-number { color: rgba(255, 74, 95, .52); font-size: 34px; font-weight: 820; letter-spacing: -.045em; transition: color .3s ease, text-shadow .3s ease; }
.step-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,74,95,.15); border-radius: 12px; background: rgba(179,22,49,.1); color: var(--accent-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(179,22,49,.05); }
.step-card:hover .step-number { color: var(--accent); text-shadow: 0 0 24px rgba(255,74,95,.48); }
.step-card:hover .step-icon { border-color: rgba(255,74,95,.34); background: rgba(179,22,49,.18); box-shadow: 0 0 28px rgba(179,22,49,.16); }
.step-progress { position: relative; height: 3px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.055); }
.step-progress i { display: block; width: var(--step-width, 72%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #741024, var(--accent), #ff96a4); box-shadow: 0 0 14px rgba(255,74,95,.45); transform-origin: left; }
.step-card:nth-child(1) { --step-width: 64%; }
.step-card:nth-child(2) { --step-width: 82%; }
.step-card:nth-child(3) { --step-width: 100%; }
.step-card.is-visible .step-progress i { animation: stepFill .95s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms) both; }
.step-card h3,
.principle-card h3 { margin: 23px 0 8px; font-size: 19px; }
.step-card p,
.principle-card p { margin: 0; color: var(--muted); font-size: 13px; }
.step-card__footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 22px; }
.step-tag { display: inline-flex; padding: 6px 12px; border: 1px solid rgba(255,74,95,.09); border-radius: 999px; background: rgba(179,22,49,.14); color: var(--accent-soft); font-size: 10px; }
.step-status { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 9px; white-space: nowrap; }
.step-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px rgba(255,74,95,.7); }
.taste-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 64px; align-items: center; }
.confidence-note { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 28px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,74,95,.13); border-radius: var(--radius-md); background: radial-gradient(circle at 100% 0, rgba(179,22,49,.12), transparent 46%), var(--surface); }
.confidence-note__icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255,74,95,.2); border-radius: 12px; background: rgba(179,22,49,.14); color: var(--accent-soft); box-shadow: 0 0 24px rgba(179,22,49,.11); }
.confidence-note strong { display: block; margin: 6px 0; font-size: 17px; }
.confidence-note p { margin: 0; color: var(--muted); font-size: 13px; }
.confidence-note .eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 9px; }
.confidence-note__state { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 9px; }
.confidence-note__state i { width: 5px; height: 5px; border-radius: 50%; background: #5bd49b; box-shadow: 0 0 8px rgba(91,212,155,.6); }
.taste-diagram { display: grid; grid-template-columns: 1fr 44px 1.05fr; gap: 14px; align-items: center; }
.input-stack { display: grid; gap: 18px; }
.input-card { position: relative; min-height: 146px; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); background: radial-gradient(circle at 100% 0, rgba(179,22,49,.09), transparent 44%), linear-gradient(145deg, #131318, #0a0a0e); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.input-card::after { content: ""; position: absolute; top: 0; right: 22%; left: 22%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,74,95,.36), transparent); }
.input-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.input-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,74,95,.2); border-radius: 10px; background: rgba(179,22,49,.12); color: var(--accent-soft); }
.input-state { padding: 4px 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 999px; color: var(--dim); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.input-card strong { display: block; font-size: 14px; }
.input-card > span { color: var(--dim); font-size: 10px; }
.signal-bars { display: flex; align-items: end; gap: 4px; height: 19px; margin-top: 13px; }
.signal-bars i { width: 22%; height: var(--signal); border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, rgba(179,22,49,.42), var(--accent)); opacity: .72; }
.audience-dots { display: flex; align-items: center; gap: 5px; margin-top: 14px; }
.audience-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,74,95,.7); box-shadow: 0 0 9px rgba(255,74,95,.2); }
.audience-dots i:nth-child(4), .audience-dots i:nth-child(5) { opacity: .35; }
.audience-dots b { margin-left: auto; color: var(--accent-soft); font-size: 10px; }
.signal-connector { position: relative; display: block; height: 2px; background: linear-gradient(90deg, rgba(255,74,95,.12), var(--accent), rgba(255,74,95,.12)); box-shadow: 0 0 16px rgba(255,74,95,.16); }
.signal-connector > i { position: absolute; top: 50%; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #ff8797; box-shadow: 0 0 10px var(--accent); transform: translate(-50%, -50%); opacity: 0; }
.signal-connector > i:nth-child(2) { animation-delay: .55s; }
.signal-connector > i:nth-child(3) { animation-delay: 1.1s; }
.signal-connector b { position: absolute; right: -4px; top: 50%; color: var(--accent); font-size: 24px; font-weight: 400; transform: translate(50%, -52%); text-shadow: 0 0 16px rgba(255,74,95,.48); }
.taste-diagram:has(.result-card.is-visible) .signal-connector > i { animation: signalTravel 1.65s linear infinite; }
.diagram-arrow { color: var(--accent); font-size: 32px; }
.taste-diagram:has(.result-card.is-visible) .diagram-arrow { animation: signalArrow 1.7s ease-in-out infinite; }
.result-card { min-height: 310px; padding: 25px; border: 1px solid rgba(255, 105, 124, .42); border-radius: var(--radius-lg); background: radial-gradient(circle at 88% 4%, rgba(255,140,154,.18), transparent 34%), linear-gradient(145deg, #ae112f, #67091d); box-shadow: 0 28px 64px rgba(97,6,26,.38), inset 0 1px 0 rgba(255,255,255,.1); }
.result-card { position: relative; overflow: hidden; }
.result-card::before { content: ""; position: absolute; right: -54px; bottom: -72px; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.025), 0 0 0 64px rgba(255,255,255,.014); }
.result-card::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: rotate(18deg);
}
.result-card.is-visible::after { animation: resultShine 5.5s ease-in-out 1.6s infinite; }
.result-card__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.result-card__top > span { padding: 5px 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.07); color: #ffd5db; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.result-card .eyebrow { color: #ffc3ca; }
.result-score { position: relative; display: flex; align-items: baseline; margin-top: 22px; }
.result-card .result-score strong { font-size: 58px; letter-spacing: -.065em; line-height: .9; }
.result-score sup { margin-left: 2px; color: #fff; font-size: 19px; font-weight: 800; }
.result-score span { margin-left: 9px; }
.result-card span { color: #ffc3ca; font-size: 12px; }
.result-meter { position: relative; height: 3px; margin-top: 15px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.result-meter i { display: block; width: 96%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,.48), #fff); box-shadow: 0 0 14px rgba(255,255,255,.32); transform-origin: left; }
.result-card.is-visible .result-meter i { animation: resultMeter 1.1s cubic-bezier(.2,.8,.2,1) .45s both; }
.result-card h3 { position: relative; margin: 25px 0 3px; font-size: 20px; }
.result-card .result-subtitle { position: relative; margin: 0; color: #ffc3ca; font-size: 10px; }
.result-reasons { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.result-reasons span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); color: #ffe8eb; font-size: 9px; }

/* Utility and legal pages */
.utility-page { background: radial-gradient(circle at 78% 0, rgba(179,22,49,.15), transparent 26rem), var(--bg); }
.utility-main { width: min(920px, calc(100% - 48px)); margin: 0 auto; padding: 82px 0 110px; }
.utility-hero { margin-bottom: 52px; }
.utility-title { max-width: 780px; font-size: clamp(42px, 7vw, 64px); line-height: 1.02; }
.utility-lead { max-width: 720px; font-size: 18px; }
.utility-content { display: grid; gap: 18px; }
.utility-card { padding: 30px 34px; border-radius: var(--radius-md); }
.utility-card h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
.utility-card h3 { margin: 26px 0 8px; font-size: 17px; }
.utility-card p { margin: 0 0 14px; color: var(--muted); }
.utility-card p:last-child { margin-bottom: 0; }
.utility-card ul,
.utility-card ol { margin: 12px 0 0; padding-left: 22px; color: var(--muted); }
.utility-card li + li { margin-top: 8px; }
.utility-card a:not(.button) { color: var(--accent-soft); }
.utility-footer { margin-top: 30px; padding: 22px 4px 0; border-top: 1px solid var(--stroke); color: var(--dim); font-size: 12px; }
.utility-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.security-callout { position: relative; overflow: hidden; }
.security-callout::after { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; bottom: -150px; border-radius: 50%; background: rgba(179,22,49,.12); }
.support-form-card { position: relative; isolation: isolate; overflow: hidden; padding: 36px 38px; }
.support-form-card::before { content: ""; position: absolute; z-index: -1; top: -190px; right: -150px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(179,22,49,.2), transparent 68%); pointer-events: none; }
.support-form-card__intro { max-width: 720px; }
.support-form { display: grid; gap: 21px; margin-top: 30px; }
.support-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.support-form__field { display: grid; gap: 9px; color: var(--text); font-size: 13px; font-weight: 750; }
.support-form__field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.support-form__field > span small,
.support-form__hint { color: var(--dim); font-size: 11px; font-weight: 500; }
.support-form input,
.support-form select,
.support-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; outline: 0; background: rgba(5,5,8,.78); color: var(--text); font: inherit; font-weight: 500; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.support-form input,
.support-form select { min-height: 50px; padding: 12px 15px; }
.support-form textarea { min-height: 160px; resize: vertical; padding: 14px 15px; line-height: 1.55; }
.support-form input::placeholder,
.support-form textarea::placeholder { color: #696467; }
.support-form select { color-scheme: dark; }
.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus { border-color: rgba(255,74,95,.72); background: rgba(10,9,13,.96); box-shadow: 0 0 0 4px rgba(255,74,95,.1), 0 14px 40px rgba(0,0,0,.28); }
.support-form__hint { display: block; line-height: 1.5; }
.support-form__trap { position: fixed; top: -100vh; left: -100vw; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.support-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 3px; }
.support-form button { cursor: pointer; }
.support-form button:disabled { cursor: wait; opacity: .65; transform: none; }
.support-form__status { min-height: 24px; margin: -4px 0 0 !important; color: var(--muted) !important; font-size: 13px; font-weight: 650; }
.support-form__status.is-success { color: #74d7aa !important; }
.support-form__status.is-error { color: var(--accent-soft) !important; }
html.motion-ready [data-reveal].support-form-card.is-visible:hover { transform: none; }

html.motion-ready [data-reveal] {
  --reveal-y: 28px;
  opacity: 0;
  filter: blur(9px);
  transform: translate3d(var(--parallax-x, 0), calc(var(--parallax-y, 0) + var(--reveal-y)), 0) scale(.985);
  transition:
    opacity .76s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
    filter .76s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
    transform .76s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
    border-color .32s ease,
    box-shadow .32s ease;
  will-change: opacity, filter, transform;
}

html.motion-ready [data-reveal].is-visible {
  --reveal-y: 0px;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1);
}

html.motion-ready [data-reveal].is-visible:hover:is(.feature-card,.movie-card,.step-card,.principle-card,.utility-card,.panel) {
  transform: translate3d(0, -7px, 0) scale(1);
}

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0) rotate(.01deg); }
  50% { transform: translateY(-12px) rotate(.01deg); }
}

@keyframes deckFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes matchFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes matchFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes promptRing {
  0% { opacity: 0; transform: scale(.72); }
  28% { opacity: .62; }
  100% { opacity: 0; transform: scale(1.38); }
}

@keyframes promptSignalFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes deviceMeterFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes deviceCardShine {
  0%, 58% { translate: -180% 0; }
  78%, 100% { translate: 640% 0; }
}

@keyframes ambientPulse {
  from { opacity: .65; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes ctaGlow {
  from { opacity: .6; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}

@keyframes radarArrive {
  from { opacity: 0; transform: scale(.56) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes radarSweep { to { transform: rotate(360deg); } }

@keyframes radarNodePulse {
  0%, 100% { opacity: .72; box-shadow: 0 0 0 3px rgba(255,74,95,.1), 0 0 10px rgba(255,74,95,.44); }
  50% { opacity: 1; box-shadow: 0 0 0 5px rgba(255,74,95,.15), 0 0 18px rgba(255,74,95,.78); }
}

@keyframes tasteRankFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes livePulse {
  0%, 100% { opacity: .72; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes scoreFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes activeChipGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,74,95,0); }
  50% { box-shadow: 0 0 24px rgba(255,74,95,.25); }
}

@keyframes movieOrbFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes flowArrow {
  0%, 100% { opacity: .45; translate: 0 -2px; }
  50% { opacity: 1; translate: 0 3px; }
}

@keyframes flowSignalFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes proofFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes proofDot {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes resultGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255,74,95,0); }
  50% { box-shadow: 0 0 36px rgba(255,74,95,.18); }
}

@keyframes signalArrow {
  0%, 100% { opacity: .5; translate: -4px 0; }
  50% { opacity: 1; translate: 4px 0; }
}

@keyframes stepFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes signalTravel {
  0% { left: 0; opacity: 0; }
  12%, 78% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes signalTravelVertical {
  0% { top: 0; opacity: 0; }
  12%, 78% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes resultMeter { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes resultShine {
  0%, 55% { translate: -160% 0; }
  78%, 100% { translate: 520% 0; }
}

@media (max-width: 1020px) {
  .site-header__inner,
  .site-footer__inner,
  .section-inner { width: min(100% - 48px, var(--content)); }
  .hero__grid { grid-template-columns: 1fr 400px; gap: 34px; }
  .display-title { font-size: clamp(46px, 6vw, 60px); }
  .device-insight--match,
  .device-insight--reason { left: -30px; }
  .device-insight--shift { right: -30px; left: auto; }
  .movie-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid,
  .steps-grid,
  .principles-grid { gap: 18px; }
}

@media (max-width: 820px) {
  .site-header { height: auto; }
  .site-header__inner { grid-template-columns: 1fr auto; min-height: 78px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 28px; border-top: 1px solid var(--stroke-soft); }
  .site-nav a { padding: 16px 0 18px; font-size: 13px; }
  .site-nav a[aria-current="page"]::after { bottom: 10px; }
  .hero,
  .personal-hero,
  .about-hero { min-height: 0; }
  .hero__grid,
  .personal-hero .hero__grid,
  .about-hero .hero__grid { grid-template-columns: 1fr; min-height: 0; padding: 72px 0; }
  .hero-device-wrap { width: min(100%, 560px); height: 755px; margin-top: 12px; }
  .device-deck { height: 725px; }
  .decision-flow { width: min(100%, 620px); margin-inline: auto; }
  .hero-device { width: 350px; margin: 0; }
  .hero-device[data-position="back-left"] { transform: translateX(calc(-50% - 112px)) translateY(58px) scale(.77) rotate(-7deg); }
  .hero-device[data-position="back-right"] { transform: translateX(calc(-50% + 112px)) translateY(58px) scale(.77) rotate(7deg); }
  .device-insight--match,
  .device-insight--reason { left: -8px; bottom: 90px; }
  .device-insight--shift { right: -8px; bottom: 100px; left: auto; }
  .dashboard-grid,
  .signals-grid,
  .taste-grid { grid-template-columns: 1fr; }
  .feature-grid,
  .steps-grid,
  .principles-grid { grid-template-columns: 1fr; }
  .feature-card,
  .step-card,
  .principle-card { min-height: 0; }
  .step-card { min-height: 238px; }
  .mood-row { display: block; }
  .mood-row .chip-row { margin-top: 26px; }
  .taste-diagram { width: 100%; max-width: 620px; margin-inline: auto; }
  .site-footer__inner { grid-template-columns: 1fr auto; padding-top: 26px; }
  .footer-nav { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
}

@media (max-width: 620px) {
  .site-header__inner,
  .site-footer__inner,
  .section-inner { width: min(100% - 32px, var(--content)); }
  .brand { gap: 9px; font-size: 15px; }
  .brand .brand__icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; }
  .header-action .button { min-height: 38px; padding: 10px 16px; font-size: 12px; }
  .site-nav { justify-content: flex-start; overflow-x: auto; padding-inline: 2px; }
  .site-nav a { white-space: nowrap; }
  .display-title { font-size: clamp(42px, 13vw, 58px); }
  .section-title { font-size: 31px; }
  .hero__grid { padding: 58px 0 68px; }
  .hero-copy { font-size: 16px; }
  .hero-proof { grid-template-columns: 1fr; }
  .decision-flow { padding: 22px; }
  .decision-flow__top { align-items: flex-start; }
  .decision-flow__label { max-width: 150px; line-height: 1.45; }
  .flow-item { grid-template-columns: 20px auto 1fr; padding-right: 12px; }
  .flow-copy > div:first-child { align-items: flex-start; }
  .flow-state { margin-top: -1px; }
  .mood-prompt { grid-template-columns: auto 1fr; padding: 20px 18px 16px; }
  .mood-prompt .button { grid-column: 1 / -1; }
  .prompt-signal { grid-column: 1 / -1; }
  .prompt-copy__top { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hero-device-wrap { height: 675px; }
  .device-deck { height: 645px; }
  .hero-device { width: min(300px, 76vw); padding: 8px; border-radius: 55px; }
  .hero-device::after { border-radius: 50px; }
  .hero-device[data-position="back-left"] { transform: translateX(calc(-50% - 74px)) translateY(48px) scale(.76) rotate(-6deg); }
  .hero-device[data-position="back-right"] { transform: translateX(calc(-50% + 74px)) translateY(48px) scale(.76) rotate(6deg); }
  .device-screen { padding: 20px 20px 16px; border-radius: 47px; }
  .device-screen::before { width: 94px; height: 24px; }
  .device-appbar { margin-top: 21px; }
  .device-appbar > div strong { font-size: 14px; }
  .device-overview { margin-top: 14px; padding: 12px; }
  .device-divider { margin: 12px 3px; }
  .device-audience { padding: 12px; }
  .device-cast__head { margin-top: 12px; }
  .cast-orb { width: 39px; height: 39px; }
  .pick-art { height: 195px; margin-top: 15px; }
  .pick-art__moon { top: 30px; right: 36px; width: 48px; height: 48px; }
  .pick-reasons { margin-top: 11px; padding: 11px; }
  .pick-reasons > div { padding: 4px 0; }
  .device-primary-action { margin-top: 11px; padding: 9px 12px; }
  .taste-orbit { width: 168px; height: 168px; margin-top: 23px; }
  .taste-orbit__ring--one { width: 118px; height: 118px; }
  .taste-orbit__ring--two { width: 76px; height: 76px; }
  .taste-orbit__shape { width: 104px; height: 108px; }
  .taste-summary { margin-top: 12px; padding: 12px 13px; }
  .taste-summary strong { font-size: 15px; }
  .taste-bars { margin-top: 11px; }
  .device-insight { position: absolute; width: min(220px, 64vw); margin: 0; padding: 13px 14px 12px; }
  .device-insight--match,
  .device-insight--reason { left: -12px; bottom: 68px; }
  .device-insight--shift { right: -12px; bottom: 76px; left: auto; }
  .match-score { margin-top: 10px; }
  .match-score strong { font-size: 34px; }
  .match-score sup { font-size: 13px; }
  .match-float p { margin-top: 7px; }
  .match-line { margin-top: 10px; }
  .match-float__footer,
  .insight-proof { margin-top: 10px; padding-top: 9px; }
  .insight-title { margin-top: 8px; font-size: 20px; }
  .shift-score { margin-top: 9px; }
  .shift-score strong { font-size: 27px; }
  .device-deck__controls { bottom: 0; }
  .fiction-note { bottom: -14px; font-size: 7px; }
  .panel { padding: 22px; }
  .dashboard-grid { gap: 18px; }
  .taste-panel__body,
  .profile-card__body { grid-template-columns: 1fr; }
  .taste-panel .taste-panel__body { grid-template-columns: 1fr; gap: 22px; }
  .taste-panel .radar { width: min(100%, 230px); }
  .taste-panel .signal-copy { padding-inline: 4px; }
  .profile-card__footer { align-items: flex-start; flex-direction: column; }
  .profile-card__footer .chip-row { justify-content: flex-start; }
  .movie-strip { gap: 10px; }
  .mini-movie { min-height: 170px; padding: 12px; }
  .mini-movie strong { font-size: 11px; }
  .feature-grid { margin-top: 30px; }
  .movie-grid { grid-template-columns: 1fr; }
  .movie-card { min-height: 0; }
  .mood-row .chip-row { display: grid; grid-template-columns: repeat(2, 1fr); }
  .chip { justify-content: center; }
  .taste-diagram { grid-template-columns: 1fr; }
  .confidence-note__state { position: static; grid-column: 2; margin-top: -4px; }
  .signal-connector { width: 2px; height: 42px; margin: 0 auto; background: linear-gradient(to bottom, rgba(255,74,95,.12), var(--accent), rgba(255,74,95,.12)); }
  .signal-connector > i { top: 0; left: 50%; transform: translate(-50%, -50%); }
  .signal-connector b { right: auto; top: auto; left: 50%; bottom: -7px; transform: translate(-50%, 50%) rotate(90deg); }
  .taste-diagram:has(.result-card.is-visible) .signal-connector > i { animation-name: signalTravelVertical; }
  .result-card { min-height: 290px; }
  .diagram-arrow { transform: rotate(90deg); text-align: center; }
  .cta-banner { min-height: 260px; padding: 58px 22px; }
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer-brand,
  .footer-meta { justify-self: center; }
  .footer-nav { flex-wrap: wrap; gap: 16px 24px; }
  .utility-main { width: min(100% - 32px, 920px); padding: 58px 0 80px; }
  .utility-card { padding: 24px; }
  .support-form-card { padding: 27px 24px; }
  .support-form__grid { grid-template-columns: 1fr; }
  .support-form__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .hero::before,
  .device-deck,
  .hero-device,
  .match-float,
  .match-live i,
  .match-line i,
  .mood-prompt__orb > b,
  .prompt-live i,
  .prompt-signal > i b,
  .device-divider span b,
  .device-meter i,
  .device-audience::before,
  .cta-banner::before,
  .profile-card .radar::before,
  .profile-card .radar::after,
  .profile-card .radar-sweep,
  .taste-panel .radar::before,
  .taste-panel .radar::after,
  .taste-panel .radar-sweep,
  .taste-panel .radar-node,
  .taste-panel .taste-ranks b,
  .profile-card .profile-live i,
  .profile-card .profile-score__meter i,
  .chip--active,
  .movie-art::before,
  .flow-item::after,
  .flow-item--result,
  .flow-live i,
  .flow-signal > i b,
  .proof-outcome > i > b,
  .diagram-arrow,
  .step-progress i,
  .signal-connector > i,
  .result-meter i,
  .result-card::after { animation: none !important; }
  html.motion-ready [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
  }
}