/* The front page. Loaded only there, on top of site.css.
 *
 * Everything that moves is CSS: the content security policy forbids inline styles, and the
 * scene is SVG in the page, so the animation lives here and the markup only names it. Anybody
 * who has asked their system for less motion gets a still picture. */

.home {
  --display: ui-rounded, "SF Pro Rounded", "Nunito", "Inter", -apple-system, system-ui, sans-serif;
  --sunset: linear-gradient(92deg, #ffd66b 0%, #ffab5c 45%, #ff7a8a 100%);
  --night: #0d161d;
  overflow-x: hidden;
}

.home h1, .home h2, .home h3, .home h4 { font-family: var(--display); }

.home header.site { background: rgba(14, 22, 30, 0.72); border-bottom-color: rgba(255, 255, 255, 0.06); }

.home .btn-big { padding: 14px 26px; font-size: 1.04rem; border-radius: 12px; }
.home .btn-primary {
  background: linear-gradient(180deg, #f6c65b, #e3a93a);
  box-shadow: 0 10px 30px rgba(232, 180, 74, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.home .btn-primary:hover { background: linear-gradient(180deg, #ffd272, #ecb546); }
.btn-glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); }

.kicker {
  margin: 0 0 10px; color: var(--gold); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.16em;
}
h2.big {
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 16px; max-width: 20ch;
}
h2.big em, .hero-home h1 em {
  font-style: normal;
  background: var(--sunset);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home p.section { font-size: 1.1rem; }

/* ---- Hero ------------------------------------------------------------------ */

.hero-home {
  /* The scene sits on the bottom edge at its own height; the sky above it is this, so the
     words always have sky behind them and never the storefronts. */
  --scene-h: clamp(460px, 57vw, 900px);
  position: relative; overflow: hidden; padding: 0;
  background: #141a33;
}
.hero-home .scene { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--scene-h); display: block; }
.hero-home::before {
  /* A soft shade behind the words, so they read against any part of the sky. */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 18% 22%, rgba(12, 14, 34, 0.72), rgba(12, 14, 34, 0) 70%);
}
.hero-copy {
  position: relative; z-index: 2;
  padding-top: clamp(48px, 8vh, 90px);
  /* Clear the storefronts (the lowest third of the scene), and the numbers below them. */
  padding-bottom: calc(var(--scene-h) * 0.36 + 110px);
}
.hero-home h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 18px; max-width: 21ch; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.hero-home .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d9dcef; max-width: 52ch; margin: 0 0 30px; }
.hero-home .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-home .note { color: #b3b3d1; font-size: 0.9rem; margin: 16px 0 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 214, 107, 0.35);
  color: #ffe3a0; font-size: 0.86rem; font-weight: 600; backdrop-filter: blur(6px);
}
.eyebrow:hover { text-decoration: none; background: rgba(255, 255, 255, 0.13); }
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ffd66b;
  box-shadow: 0 0 0 0 rgba(255, 214, 107, 0.7); animation: ping 2s ease-out infinite;
}
@keyframes ping { to { box-shadow: 0 0 0 10px rgba(255, 214, 107, 0); } }

/* Pulled up over the street on a wide screen; below it on a phone, where it would hide it. */
.stats-band { position: relative; z-index: 3; margin-top: -122px; padding-bottom: 26px; }
.stat-glass {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 18px 22px; border-radius: 18px;
  background: rgba(16, 22, 36, 0.55); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.stat-glass div { display: flex; flex-direction: column; padding: 0 6px; }
.stat-glass div + div { border-left: 1px solid rgba(255, 255, 255, 0.1); padding-left: 18px; }
.stat-glass strong { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: #fff; }
.stat-glass span { font-size: 0.78rem; color: #b8bdd6; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 720px) {
  .hero-copy { padding-bottom: calc(var(--scene-h) * 0.62); }
  .stats-band { margin-top: 0; padding-top: 18px; background: var(--backdrop); }
  .stat-glass { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .stat-glass div:nth-child(3) { border-left: 0; padding-left: 6px; }
}

/* The scene */
.scene .stand-sign { font: 800 13px var(--display, system-ui); fill: #7a4f12; letter-spacing: 0.08em; }
.scene .pop-text { font: 800 15px system-ui, sans-serif; fill: #fff; stroke: #0e4c86; stroke-width: 3px; paint-order: stroke; }

.scene .stars circle { animation: starTwinkle 4s ease-in-out infinite; }
.scene .stars circle:nth-child(3n) { animation-delay: -1.3s; }
.scene .stars circle:nth-child(3n+1) { animation-delay: -2.6s; }
@keyframes starTwinkle { 50% { opacity: 0.25; } }

.scene .sun { transform-box: fill-box; transform-origin: center; animation: sunBreath 7s ease-in-out infinite; }
@keyframes sunBreath { 50% { transform: scale(1.06); opacity: 0.85; } }

.scene .cloud { animation: drift 38s ease-in-out infinite alternate; }
.scene .cloud.c2 { animation-duration: 52s; animation-delay: -12s; }
.scene .cloud.c3 { animation-duration: 44s; animation-delay: -20s; }
@keyframes drift { from { transform: translateX(-70px); } to { transform: translateX(90px); } }

.scene .bird { animation: fly 30s linear infinite, flap 0.7s ease-in-out infinite alternate; transform-box: fill-box; }
.scene .bird.b1 { animation-delay: 0s, 0s; }
.scene .bird.b2 { animation-delay: -9s, -0.3s; }
.scene .bird.b3 { animation-delay: -18s, -0.5s; }
@keyframes fly {
  from { transform: translate(-60px, 190px); }
  50% { transform: translate(800px, 150px); }
  to { transform: translate(1700px, 210px); }
}
@keyframes flap { to { stroke-width: 1.4; } }

.scene .tw { animation: windowOn 9s steps(1) infinite; }
.scene .t1 { animation-delay: -1s; } .scene .t2 { animation-delay: -4s; animation-duration: 11s; }
.scene .t3 { animation-delay: -7s; } .scene .t4 { animation-delay: -2s; animation-duration: 13s; }
.scene .t5 { animation-delay: -5s; } .scene .t6 { animation-delay: -8s; animation-duration: 7s; }
.scene .t7 { animation-delay: -3s; animation-duration: 12s; } .scene .t8 { animation-delay: -6s; }
.scene .t9 { animation-delay: -9s; animation-duration: 10s; } .scene .t10 { animation-delay: -11s; }
@keyframes windowOn { 0% { opacity: 0; } 30% { opacity: 1; } 75% { opacity: 0; } }

.scene .train { animation: train 16s linear infinite; }
@keyframes train {
  0% { transform: translateX(-900px); }
  45% { transform: translateX(1700px); }
  100% { transform: translateX(1700px); }
}

.scene .lamp { animation: lamp 5s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: 0.7; } }

.scene .car1 { animation: carRight 13s linear infinite; }
.scene .car2 { animation: carLeft 17s linear infinite; animation-delay: -6s; }
@keyframes carRight { from { transform: translate(-120px, 760px); } to { transform: translate(1700px, 760px); } }
@keyframes carLeft { from { transform: translate(1700px, 790px); } to { transform: translate(-140px, 790px); } }

.scene .walk { animation: walkRight 34s linear infinite; }
.scene .walk.back { animation-name: walkLeft; }
.scene .w1 { animation-delay: -3s; }
.scene .w2 { animation-duration: 41s; animation-delay: -20s; }
.scene .w3 { animation-duration: 38s; animation-delay: -9s; }
.scene .w4 { animation-duration: 29s; animation-delay: -15s; }
.scene .w5 { animation-duration: 45s; animation-delay: -30s; }
@keyframes walkRight { from { transform: translate(-40px, 736px); } to { transform: translate(1640px, 736px); } }
@keyframes walkLeft { from { transform: translate(1640px, 734px) scale(-1, 1); } to { transform: translate(-40px, 734px) scale(-1, 1); } }
.scene .leg { transform-box: fill-box; transform-origin: 50% 0; animation: stride 0.55s ease-in-out infinite alternate; }
.scene .leg.l2 { animation-direction: alternate-reverse; }
@keyframes stride { from { transform: rotate(18deg); } to { transform: rotate(-18deg); } }

.scene .stand-glow { transform-box: fill-box; transform-origin: center; animation: standGlow 2.6s ease-in-out infinite; }
@keyframes standGlow { 50% { opacity: 0.55; transform: scale(0.92); } }
.scene .pop { opacity: 0; animation: pop 3.6s ease-out infinite; }
.scene .pop.p2 { animation-delay: 1.2s; }
.scene .pop.p3 { animation-delay: 2.4s; }
@keyframes pop {
  0% { opacity: 0; transform: translateY(10px); }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ---- Ticker ------------------------------------------------------------------ */

.ticker {
  position: relative; overflow: hidden; white-space: nowrap;
  background: #0f1814; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: inline-flex; gap: 46px; padding: 14px 0; animation: ticker 70s linear infinite; }
.ticker span { color: var(--ink-muted); font-size: 0.93rem; }
.ticker b {
  font-size: 0.7rem; letter-spacing: 0.12em; margin-right: 8px; padding: 3px 8px; border-radius: 6px;
}
.k-you { background: rgba(232, 180, 74, 0.16); color: var(--gold); }
.k-rival { background: rgba(235, 106, 90, 0.16); color: var(--negative); }
.k-city { background: rgba(95, 169, 216, 0.16); color: var(--info); }
.k-weather { background: rgba(155, 123, 255, 0.18); color: #b9a6ff; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---- Ladder -------------------------------------------------------------------- */

.ladder-section { padding: 96px 0 70px; }
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; }
@media (max-width: 900px) { .ladder { grid-template-columns: 1fr; } }
/* The top rung gets the whole width: it is the one they are climbing towards. */
.ladder .tier.t4 { grid-column: 1 / -1; margin-top: 14px; padding: 24px 22px 18px; }
.ladder .tier.t4 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }
@media (max-width: 900px) { .ladder .tier.t4 ul { grid-template-columns: 1fr; } }
.ladder .tier.t4 h3 { font-size: 1.4rem; }
.ladder .tier.t4 li img { width: 52px; height: 52px; }

.tier {
  position: relative; border-radius: 18px; padding: 20px 18px 16px;
  background: linear-gradient(180deg, #1f3040, #1a2835);
  border: 1px solid var(--divider);
}
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tier-num { font-family: var(--display); font-size: 2.1rem; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.14); }
.tier h3 { margin: 0; font-size: 1.12rem; }
.tier .tier-sub { color: var(--ink-faint); font-size: 0.85rem; margin: 0 0 14px; }
.tier ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tier li {
  display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tier li:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(3px); }
.tier li img { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.25s ease; }
.tier li:hover img { transform: rotate(-8deg) scale(1.08); }
.tier li strong { display: block; font-size: 0.98rem; }
.tier li span { display: block; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.35; }

.tier.t4 {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #2f2536, #1f1d2c) padding-box,
    linear-gradient(135deg, #ffd66b, #ff7a8a, #9b7bff, #ffd66b) border-box;
  background-size: auto, 300% 300%;
  animation: sheen 8s ease infinite;
  box-shadow: 0 20px 50px rgba(255, 122, 138, 0.12);
}
@keyframes sheen { 50% { background-position: 0 0, 100% 50%; } }
.tier .new {
  position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: #2b1a05;
  background: var(--sunset); box-shadow: 0 6px 18px rgba(255, 122, 138, 0.35);
}

/* ---- See it -------------------------------------------------------------------- */

.see-section { padding: 90px 0; background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(95, 169, 216, 0.1), transparent 70%); }
.see-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; }
@media (max-width: 960px) { .see-grid { grid-template-columns: 1fr; } }
.see-tabs { display: flex; flex-direction: column; gap: 8px; }
.see-tab {
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.see-tab strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.see-tab span { color: var(--ink-faint); font-size: 0.9rem; }
.see-tab:hover { background: rgba(255, 255, 255, 0.04); }
.see-tab.active { background: var(--panel); border-color: var(--divider); box-shadow: inset 3px 0 0 var(--gold); }

.device-stage { position: relative; perspective: 1800px; padding: 20px 0; }
.device {
  border-radius: 18px; overflow: hidden; background: #0c1116;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.03);
  transform: rotateY(-9deg) rotateX(4deg); transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.device-stage:hover .device { transform: rotateY(0) rotateX(0); }
.device-bar { display: flex; gap: 7px; padding: 10px 14px; background: #161d24; }
.device-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a4450; }
.device-bar i:first-child { background: #eb6a5a; } .device-bar i:nth-child(2) { background: #e8b44a; } .device-bar i:nth-child(3) { background: #6fcf97; }
.device img { display: block; width: 100%; height: auto; transition: opacity 0.25s ease; }
.device img.swap { opacity: 0; }

.callout {
  position: absolute; z-index: 2; padding: 8px 13px; border-radius: 12px; font-size: 0.85rem; font-weight: 600;
  background: rgba(20, 28, 38, 0.88); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--ink);
  backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); white-space: nowrap;
  animation: bob 5s ease-in-out infinite;
}
.callout b { color: var(--gold); margin-right: 6px; }
.callout.co1 { left: -18px; top: 34%; }
.callout.co2 { right: -10px; top: 4%; animation-delay: -1.7s; }
.callout.co3 { right: 8%; bottom: 0; animation-delay: -3.3s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@media (max-width: 700px) { .callout { display: none; } .device { transform: none; } }

/* ---- How ----------------------------------------------------------------------- */

.how-section { padding: 90px 0; background: linear-gradient(180deg, rgba(29, 44, 59, 0.55), rgba(29, 44, 59, 0)); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } }
.how-card {
  background: var(--panel); border: 1px solid var(--divider); border-radius: 18px; padding: 22px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.how-card:hover { transform: translateY(-4px); border-color: #4a6680; }
.how-card h3 { margin: 16px 0 8px; font-size: 1.2rem; }
.how-card p { margin: 0; color: var(--ink-muted); }
.how-art { width: 100%; height: auto; display: block; background: var(--panel-sunken); border-radius: 12px; padding: 10px; }
.how-art .art-label { font: 700 10px system-ui, sans-serif; letter-spacing: 0.14em; fill: var(--ink-faint); }
.how-art .art-legend text { font: 600 10px system-ui, sans-serif; fill: var(--ink-muted); }

.how-art .dial-arc { stroke-dasharray: 100; animation: dial 6s ease-in-out infinite; }
@keyframes dial { 0%, 100% { stroke-dashoffset: 70; } 50% { stroke-dashoffset: 30; } }
.how-art .dial-needle { transform-box: view-box; transform-origin: 120px 92px; animation: needle 6s ease-in-out infinite; }
@keyframes needle { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
.how-art .art-queue { animation: queue 6s ease-in-out infinite; }
@keyframes queue { 0%, 100% { opacity: 1; } 55% { opacity: 0.25; } }

.how-art .bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.how-card.in .bar { animation: grow 1s cubic-bezier(.2, .8, .2, 1) forwards; }
.how-card.in .b-stock { animation-delay: 0.3s; } .how-card.in .b-rent { animation-delay: 0.5s; }
.how-card.in .b-wage { animation-delay: 0.7s; } .how-card.in .b-keep { animation-delay: 0.9s; }
@keyframes grow { to { transform: scaleX(1); } }

.how-art .crane-hook { animation: hook 4s ease-in-out infinite; }
@keyframes hook { 50% { transform: translateY(22px); } }
.how-art .build { transform-box: fill-box; transform-origin: bottom; animation: build 4s ease-in-out infinite; }
@keyframes build { 0%, 40% { transform: scaleY(0.2); } 60%, 100% { transform: scaleY(1); } }

.grow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
@media (max-width: 900px) { .grow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grow-grid { grid-template-columns: 1fr; } }
.grow { display: flex; gap: 14px; padding: 18px; border-radius: 16px; border: 1px dashed var(--divider); }
.grow-ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--panel-raised); font-size: 1.25rem;
}
.grow h4 { margin: 0 0 4px; font-size: 1rem; }
.grow p { margin: 0; color: var(--ink-faint); font-size: 0.88rem; }

/* ---- City ---------------------------------------------------------------------- */

.city-section { padding: 90px 0; }
.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .city-grid { grid-template-columns: 1fr; } }
.city-map {
  width: 100%; height: auto; max-height: 640px; border-radius: 22px;
  border: 1px solid var(--divider); box-shadow: var(--shadow);
}
.city-map .lake-label { font: 800 14px system-ui, sans-serif; letter-spacing: 0.3em; fill: rgba(255, 255, 255, 0.45); }
.city-map .waves path { animation: wave 5s ease-in-out infinite alternate; }
@keyframes wave { to { transform: translateX(14px); } }
.city-map .hood { cursor: pointer; outline: none; }
.city-map .hood rect { opacity: 0.82; stroke: rgba(255, 255, 255, 0); stroke-width: 3; transition: opacity 0.2s, stroke 0.2s, transform 0.2s; transform-box: fill-box; transform-origin: center; }
.city-map .hood text { font: 800 13px var(--display, system-ui); fill: #10202a; pointer-events: none; }
.city-map .hood:hover rect, .city-map .hood:focus rect, .city-map .hood.on rect { opacity: 1; stroke: #fff; transform: scale(1.06); }
.city-map .el-lines path { opacity: 0.9; }
.city-map .et { offset-rotate: 0deg; animation: ride 14s linear infinite; filter: drop-shadow(0 0 4px #fff); }
.city-map .et-red { offset-path: path("M362 0 L352 150 L372 370 L385 513 L392 700"); }
.city-map .et-blue { offset-path: path("M30 120 L205 225 L352 370 L60 400"); animation-duration: 12s; animation-delay: -4s; }
.city-map .et-green { offset-path: path("M410 400 L400 513 L402 633"); animation-duration: 7s; }
.city-map .et-pink { offset-path: path("M340 395 L222 473 L30 480"); animation-duration: 9s; animation-delay: -3s; }
.city-map .et-orange { offset-path: path("M372 400 L300 430 L250 520 L200 640"); animation-duration: 10s; animation-delay: -6s; }
@keyframes ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.nb-card {
  display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--divider); min-height: 104px;
}
.nb-card h3 { margin: 0 0 4px; font-size: 1.15rem; }
.nb-card p { margin: 0; color: var(--ink-muted); }
.nb-swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 6px; background: var(--gold); transition: background 0.2s; }
.nb-swatch.lincoln { background: #6fcf97; } .nb-swatch.wicker { background: #9b7bff; }
.nb-swatch.loop { background: #5fa9d8; } .nb-swatch.pilsen { background: #e8b44a; }
.nb-swatch.bronzeville { background: #e4572e; } .nb-swatch.hydepark { background: #e04e9a; }

/* ---- Rivals -------------------------------------------------------------------- */

.rivals-section { padding: 90px 0 60px; }
.rival-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .rival-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rival-grid { grid-template-columns: 1fr; } }
.rival {
  background: var(--panel); border: 1px solid var(--divider); border-radius: 18px; padding: 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rival:hover { transform: translateY(-5px) rotate(-0.6deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }
.rival .face { width: 70px; height: 70px; display: block; margin-bottom: 14px; transition: transform 0.3s ease; }
.rival:hover .face { transform: rotate(-6deg) scale(1.05); }
.rival h3 { margin: 10px 0 6px; font-size: 1.15rem; }
.rival p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.tag.bad { background: rgba(235, 106, 90, 0.16); color: var(--negative); }
.tag.good { background: rgba(111, 207, 151, 0.16); color: var(--positive); }
.tag.info { background: rgba(95, 169, 216, 0.16); color: var(--info); }
.tag.warn { background: rgba(232, 180, 74, 0.16); color: var(--gold); }

/* ---- Last call ----------------------------------------------------------------- */

.last-call {
  position: relative; overflow: hidden; padding: 110px 0 250px; text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255, 171, 92, 0.16), transparent 70%),
              linear-gradient(180deg, var(--backdrop) 0%, #16202a 55%, var(--night) 100%);
}
.last-call .night { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 300px; display: block; }
.last-copy { position: relative; z-index: 1; }
.last-copy h2.big { margin-left: auto; margin-right: auto; }
.last-copy p.section { margin-left: auto; margin-right: auto; }
.last-copy .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.home footer.site { background: var(--night); border-top-color: rgba(255, 255, 255, 0.05); }

/* ---- Arriving on scroll -------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .how-card.reveal.in:hover { transform: translateY(-4px); }
.js .rival.reveal.in:hover { transform: translateY(-5px) rotate(-0.6deg); }

@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .how-art .bar { transform: none; }
  .scene .pop { opacity: 1; }
  .scene .train { transform: translateX(300px); }
  .scene .walk { transform: translate(600px, 736px); }
}