/* Scenes. Design intent after Dieter Rams and Jony Ive: as little design as possible, one idea per screen,
   generous space, large calm type, motion that explains. Flat surfaces, brand tokens only. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

.ptop { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.ptop i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--aura8-electric-blue) 0 40%, var(--aura8-signal-cyan) 40% 75%, var(--aura8-stage-lime) 75% 100%); }

/* Kinetic type: words rise out of a mask */
.split-ready .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split-ready .w > span { display: inline-block; transform: translateY(115%); transition: transform .85s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.split-ready.in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .split-ready .w > span { transform: none !important; transition: none !important; } }

/* Hero */
.hero-x { padding: 104px 0 120px; }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.hero-x h1 { font-size: 72px; line-height: 76px; letter-spacing: -0.03em; margin-bottom: 28px; }
.hx-lead { max-width: 30em; font-size: 20px; line-height: 30px; margin-bottom: 36px; }
.hx-actions { gap: 20px; }
.hx-support { margin: 28px 0 0; color: var(--aura8-muted-text); font-size: 14px; line-height: 20px; }
.hx-copy .eyebrow, .hx-lead, .hx-actions, .hx-support { animation: rise .7s var(--ease) both; }
.hx-copy .eyebrow { animation-delay: .05s; } .hx-lead { animation-delay: .45s; } .hx-actions { animation-delay: .6s; } .hx-support { animation-delay: .75s; }
.hx-stage { animation: slide-in .9s .25s var(--ease) both; }

/* Stage: the simulated AI answer */
.stage { background: var(--aura8-paper); border: 1px solid var(--aura8-line); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.stage-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--aura8-muted-text); }
.bub { border-radius: 20px; padding: 16px 20px; }
.bub .who { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.bub p { margin: 0; }
.bub.q { background: #fff; border: 1px solid var(--aura8-line); margin-left: 12%; }
.bub.q .who { color: var(--aura8-muted-text); }
.bub.q .qtext { font-size: 16px; line-height: 24px; min-height: 24px; }
.bub.a { background: var(--aura8-deep-navy); color: #fff; min-height: 232px; display: flex; flex-direction: column; gap: 10px; margin-right: 6%; position: relative; }
.bub.a .who { color: var(--aura8-dark-cyan); }
.atext { font-size: 17px; line-height: 26px; flex: 1; color: #fff; }
.asrc { font-family: var(--font-mono); font-size: 12px; color: var(--aura8-dark-cyan); min-height: 16px; }
.astate.label { align-self: flex-start; }
.stage .label.l-supported { color: var(--aura8-stage-lime); }
.stage .label.l-partly { color: #FFC857; }
.stage .label.l-not { color: #FF8A9B; }
.think { display: none; gap: 6px; position: absolute; left: 20px; top: 46px; }
.think i { width: 8px; height: 8px; border-radius: 50%; background: var(--aura8-dark-cyan); animation: bob 1s var(--ease) infinite; }
.think i:nth-child(2) { animation-delay: .15s; } .think i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-5px); opacity: 1; } }
.stage.thinking .think { display: flex; }
.stage.thinking .atext, .stage.thinking .asrc { opacity: 0; }
.stage.typing .qtext::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--aura8-electric-blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stage.flash .atext { animation: rise .3s var(--ease) both; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--aura8-line); background: #fff; color: var(--aura8-ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background var(--duration-ui), color var(--duration-ui), border-color var(--duration-ui), transform var(--duration-ui) var(--ease); }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--aura8-line); transition: background var(--duration-ui), transform .3s var(--ease); }
.chip:hover { border-color: var(--aura8-electric-blue); }
.chip[aria-pressed="true"] { background: var(--aura8-electric-blue); border-color: var(--aura8-electric-blue); color: #fff; }
.chip[aria-pressed="true"] i { background: var(--aura8-stage-lime); transform: scale(1.2); }
.stage[data-mode="scroll"] .chip { cursor: default; }
.stage-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--aura8-muted-text); }

/* Statement scene: one big idea */
.statement { padding: 160px 0; }
.statement h2 { font-size: 64px; line-height: 70px; letter-spacing: -0.03em; max-width: 15em; }
.st-p { font-size: 22px; line-height: 34px; max-width: 34em; margin: 40px 0 0; color: var(--aura8-ink); }

/* Meet Aura8 */
.meet { padding: 0 0 128px; }
.meet-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; border-top: 1px solid var(--aura8-line); padding-top: 96px; }
.meet-logo img { width: 100%; max-width: 360px; height: auto; }
.disc-logo { margin: 8px 0 32px; }
.disc-logo img { width: 420px; max-width: 100%; height: auto; margin-left: -20px; }

/* Pillars: sticky stage, steps scroll past */
.pscene { padding: 128px 0 96px; background: var(--aura8-paper); }
.pillars-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: start; }
.pstick { position: sticky; top: 112px; }
.psteps { position: relative; padding-left: 44px; }
.prail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--aura8-line); }
.prail::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: var(--aura8-electric-blue); transition: height .6s var(--ease); }
.pstep { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: .2; transform: translateX(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pstep.active { opacity: 1; transform: none; }
.pstep .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--aura8-electric-blue); }
.pstep h3 { font-size: 48px; line-height: 54px; margin: 10px 0 12px; letter-spacing: -0.02em; }
.pstep .big { font-family: var(--font-display); font-size: 24px; line-height: 32px; color: var(--aura8-electric-blue); margin: 0 0 18px; }
.pstep .t { font-size: 18px; line-height: 28px; max-width: 30em; }
.in-order { margin: 24px 0 0; padding-left: 44px; font-size: 18px; color: var(--aura8-muted-text); }

/* Score scene */
.scorescene { padding: 128px 0; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.scorescene h2 { font-size: 48px; line-height: 54px; letter-spacing: -0.02em; }
.try-form { max-width: none; }
.try-form .urlrow input { min-height: 60px; font-size: 18px; }
.try-form .urlrow .btn { min-height: 60px; }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--aura8-line); border-bottom: 1px solid var(--aura8-line); }
.stats > div { padding: 48px 32px; border-right: 1px solid var(--aura8-line); }
.stats > div:last-child { border-right: 0; }
.stats b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 72px; line-height: 76px; letter-spacing: -0.03em; color: var(--aura8-electric-blue); }
.stats span { display: block; margin-top: 10px; font-size: 16px; line-height: 24px; max-width: 14em; }

/* Rows: who it is for */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--aura8-line); }
.rows li { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: baseline; padding: 40px 0; border-bottom: 1px solid var(--aura8-line); transition: padding-left .3s var(--ease); }
.rows li:hover { padding-left: 20px; }
.r-t { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 44px; letter-spacing: -0.02em; }
.r-q { font-size: 20px; line-height: 30px; color: var(--aura8-electric-blue); transition: transform .3s var(--ease); }
.rows li:hover .r-q { transform: translateX(8px); }

/* Plain tiers */
.tiers-plain .tier { text-decoration: none; color: inherit; transition: transform var(--duration-ui) var(--ease), border-color var(--duration-ui); }
.tiers-plain .tier:hover { transform: translateY(-4px); border-color: var(--aura8-electric-blue); }
.tiers-plain .tier h3 { font-size: 32px; line-height: 40px; margin: 12px 0 12px; }
.tiers-plain .tier .kind { margin-bottom: 0; }
.tiers-plain .tier p { margin-bottom: 16px; }
.tiers-plain .tier .more { color: var(--aura8-electric-blue); }

@media (max-width: 1100px) {
  .hx-grid, .meet-grid, .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-x h1 { font-size: 56px; line-height: 60px; }
  .statement h2 { font-size: 48px; line-height: 54px; }
  .pillars-wrap { grid-template-columns: minmax(0, 1fr); }
  .pstick { display: none; }
  .pstep { min-height: 0; padding: 32px 0; opacity: 1; transform: none; }
  .psteps { padding-left: 28px; }
  .in-order { padding-left: 28px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--aura8-line); }
  .rows li { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 720px) {
  .hero-x { padding: 56px 0 72px; }
  .hero-x h1 { font-size: 44px; line-height: 48px; }
  .hx-lead { font-size: 18px; line-height: 28px; }
  .statement { padding: 96px 0; }
  .statement h2 { font-size: 36px; line-height: 42px; }
  .st-p { font-size: 18px; line-height: 28px; }
  .pstep h3 { font-size: 34px; line-height: 40px; }
  .stats b { font-size: 52px; line-height: 56px; }
  .stats > div { padding: 28px 16px; }
  .r-t { font-size: 26px; line-height: 32px; }
  .scorescene, .pscene { padding: 80px 0; }
  .scorescene h2 { font-size: 34px; line-height: 40px; }
  .bub.q { margin-left: 0; } .bub.a { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-copy .eyebrow, .hx-lead, .hx-actions, .hx-support, .hx-stage, .stage.flash .atext { animation: none !important; }
  .think i, .stage.typing .qtext::after { animation: none !important; }
  .ptop { display: none; }
}