@import url("chrome-club.css");
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&family=Russo+One&display=swap");

:root {
  --ink: #050607;
  --paper: #f4f4e9;
  --acid: #f3ee16;
  --cyan: #00e1ef;
  --violet: #ff2f92;
  --red: #ff3b30;
  --panel: #0c1011;
  --panel-2: #14191a;
  --muted: #aeb7b3;
  --line: rgba(244, 244, 233, 0.18);
  --line-hot: rgba(243, 238, 22, 0.72);
  --ease-city: cubic-bezier(.16, 1, .3, 1);
}

html { background: var(--ink); }
body.night-city {
  background: var(--ink);
  color: var(--paper);
  font-family: "Onest", Arial, sans-serif;
  overflow-x: clip;
}
body.night-city::before {
  background: linear-gradient(90deg, transparent 0 49.85%, rgba(0,225,239,.045) 50%, transparent 50.15%);
  opacity: .8;
}
.night-city .wrap { width: min(1380px, calc(100% - 72px)); }
.night-city h1,
.night-city h2,
.night-city .price-card h3 {
  font-family: "Russo One", "Onest", sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.night-city h1,
.night-city h2,
.night-city h3 { text-wrap: balance; }
.night-city p { text-wrap: pretty; }
.night-city main h2 mark,
.night-city main h1 mark { color: var(--acid); }

/* Navigation: black utility rail with one decisive system color. */
.night-city .nav {
  min-height: 66px;
  padding: 0 34px;
  background: rgba(5,6,7,.9);
  border-bottom: 1px solid rgba(243,238,22,.58);
  backdrop-filter: blur(18px) saturate(120%);
}
.night-city .nav::after {
  left: auto;
  right: 34px;
  width: 220px;
  height: 4px;
  background: var(--acid);
  box-shadow: none;
  clip-path: polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%);
}
.night-city .brand { color: var(--paper); font-size: 17px; letter-spacing: .01em; }
.night-city .brand .mono { color: var(--acid); }
.night-city .nav a { color: var(--paper); }
.night-city .nav-links a { opacity: .75; transition: opacity .2s, color .2s; }
.night-city .nav-links a:hover { opacity: 1; color: var(--acid); }

.night-city .button {
  min-height: 50px;
  border: 0;
  border-radius: 0;
  color: #050607;
  background: var(--acid);
  box-shadow: 5px 5px 0 #00a8b3;
  clip-path: polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
  transition: transform .22s var(--ease-city), box-shadow .22s, background .22s;
}
.night-city .button:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 #00a8b3; }
.night-city .button:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #00a8b3; }
.night-city .button.ghost {
  color: var(--paper);
  background: rgba(5,6,7,.68);
  border: 1px solid rgba(244,244,233,.45);
  box-shadow: none;
  clip-path: none;
}
.night-city :focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

/* Hero: retouch lab above the city. */
.night-city .hero {
  min-height: max(820px,100svh);
  padding: 112px 0 72px;
  border-bottom: 4px solid var(--acid);
  background: #050607;
}
.night-city .hero-media img {
  width: 100%;
  object-position: 55% 45%;
  opacity: 1;
  filter: contrast(1.06) saturate(.92) brightness(.83);
  animation: city-hero 14s var(--ease-city) both;
}
.night-city .hero-media::after,
.night-city .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,#050607 0%,rgba(5,6,7,.96) 25%,rgba(5,6,7,.62) 47%,rgba(5,6,7,.04) 73%),
    linear-gradient(0deg,#050607 0%,transparent 28%,rgba(5,6,7,.16) 80%);
}
.night-city .hero::after {
  height: 140px;
  background: linear-gradient(180deg,transparent,#050607);
}
.night-city .hero-grid { grid-template-columns: minmax(0,1.25fr) minmax(220px,.5fr); }
.night-city .hero-copy { max-width: 760px; padding-top: 50px; }
.night-city .hero-copy .intro-note {
  margin-bottom: 26px;
  padding: 10px 14px;
  color: #050607;
  background: var(--acid);
  border: 0;
  font-size: 12px;
  font-weight: 800;
  clip-path: polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
}
.night-city .hero h1 {
  max-width: 760px;
  font-size: clamp(44px,5vw,78px);
  line-height: .98;
  letter-spacing: -.03em;
  text-shadow: 0 4px 28px #000;
}
.night-city .hero h1::after { color: var(--cyan); letter-spacing: .15em; }
.night-city .hero-copy .hero-description { max-width: 650px; color: #e0e5df; }
.night-city .hero .stage { min-height: 565px; }
.night-city .ps-window {
  width: min(350px,100%);
  height: 555px;
  background: rgba(7,9,10,.9);
  border: 1px solid rgba(243,238,22,.68);
  border-radius: 0;
  box-shadow: -10px 10px 0 rgba(243,238,22,.18);
  clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}
.night-city .ps-window::before { color: #050607; background: var(--acid); }
.night-city .panel-shot { filter: saturate(.35) contrast(1.18) brightness(.9); }
.night-city .floating { color: #050607; background: var(--cyan); }

/* World rhythm: full-width chapters, no decorative card soup. */
.night-city section { border-color: rgba(244,244,233,.16); }
.night-city main > section:not(.hero):not(.texture) { padding-block: clamp(92px,10vw,164px); }
.night-city main > section:nth-of-type(4n+2),
.night-city main > section:nth-of-type(4n+3) { background: #080a0b; }
.night-city .copy-heading h2,
.night-city .color-layout h2,
.night-city .helpers-title h2,
.night-city .pricing-intro h2 { font-size: clamp(38px,5.6vw,82px); line-height: .98; }
.night-city .copy-heading p,
.night-city .proof-copy p,
.night-city .color-layout p,
.night-city .helpers-copy p,
.night-city .eco-description,
.night-city .orders-heading > p,
.night-city .care-copy { color: #c8d0cc; }

/* Benefits are a street-level narrative strip. */
.night-city .benefits { color: var(--paper); background: #080a0b !important; }
.night-city .benefits-grid { gap: 0; background: transparent; border-block: 1px solid rgba(243,238,22,.36); }
.night-city .benefit { padding: 0 0 34px; color: var(--paper); background: #080a0b; }
.night-city .benefit + .benefit { border-left: 1px solid rgba(244,244,233,.18); }
.night-city .benefit-media { aspect-ratio: 1/1; border-radius: 0; }
.night-city .benefit-media::after { background: linear-gradient(180deg,transparent 54%,rgba(5,6,7,.8)); mix-blend-mode: normal; }
.night-city .benefit-media img { filter: saturate(.86) contrast(1.1); }
.night-city .benefit h2 { color: var(--paper); padding: 26px 24px 0; font-size: clamp(22px,2vw,30px); }
.night-city .benefit p { color: #b9c1bd; padding-inline: 24px; }
.night-city .benefit:hover h2 { color: var(--acid); }

/* Proof: clinical diagnostic bay. */
.night-city #proof { background: #0a0d0e; }
.night-city #proof::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 90% 30%,rgba(0,225,239,.11),transparent 34%);
}
.night-city .portrait-compare { background: #050607; border-color: rgba(0,225,239,.58); }
.night-city .compare-line { background: var(--acid); box-shadow: 0 0 16px rgba(243,238,22,.7); }
.night-city .compare-knob { color: #050607; background: var(--acid); }
.night-city .scale-list span,
.night-city .color-labels span { color: #050607; background: var(--acid); }
.night-city .photo-caption { color: #c6ceca; }

.night-city .texture-frame { min-height: 100svh; }
.night-city .texture-frame > img { content: url("assets/night-city/skin-lab.webp"); filter: saturate(.78) contrast(1.1); }
.night-city .texture-frame::after {
  background: linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.76) 43%,rgba(5,6,7,.08) 74%),linear-gradient(0deg,#050607 0%,transparent 35%);
}
.night-city .texture-copy h2 { max-width: 930px; color: var(--paper); }
.night-city .texture-copy p { color: #d7ded9; }

.night-city .speed-section { color: #050607; background: var(--acid) !important; }
.night-city .speed-section::after { color: rgba(5,6,7,.13); }
.night-city .speed-layout h2,
.night-city .speed-layout p { color: #050607; }
.night-city .speed-layout h2 { text-shadow: 7px 7px 0 rgba(0,225,239,.75); }

.night-city #color { background: #080a0b; }
.night-city .color-layout > img { box-shadow: 14px 14px 0 rgba(243,238,22,.22); filter: saturate(.78) contrast(1.12); }
.night-city #color::before { color: rgba(0,225,239,.6); }

/* Workstation chapter. */
.night-city #tools {
  isolation: isolate;
  background:
    linear-gradient(90deg,rgba(5,6,7,.94) 0%,rgba(5,6,7,.82) 48%,rgba(5,6,7,.38) 100%),
    linear-gradient(0deg,#050607 0%,transparent 30%),
    url("assets/night-city/workstation.webp") center/cover no-repeat !important;
}
.night-city #tools::before {
  display: none;
}
.night-city .helpers-layout { border-color: rgba(243,238,22,.62); background: #050607; backdrop-filter: none; }
.night-city #tools .helpers-layout { position: relative; z-index: 2; opacity: 1 !important; }
.night-city #tools .helpers-title,
.night-city #tools .helpers-copy { position: relative; z-index: 3; opacity: 1 !important; }
.night-city .helpers-title > img { filter: saturate(.25) contrast(1.22); box-shadow: 10px 10px 0 rgba(243,238,22,.22); }
.night-city .helpers-copy .helpers-outcome { color: var(--acid); }

.night-city #demo { background: #0a0d0e; }
.night-city .video-slot {
  min-height: 530px;
  border-color: rgba(0,225,239,.54);
  background: #050607;
  box-shadow: inset 0 0 0 7px #0a0d0e;
  clip-path: polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}
.night-city .video-slot::before { color: var(--acid); border-color: var(--acid); }

/* Economy and contract terminal. */
.night-city #economy { background: #080a0b; }
.night-city .eco-kicker,
.night-city .course-index,
.night-city .ai-rail-head,
.night-city .price-kicker,
.night-city .care-status,
.night-city .foot-label { color: var(--acid); }
.night-city .eco-unit strong { color: var(--cyan); }
.night-city .eco-scenario,
.night-city .orders-paths article,
.night-city .review-redesigned,
.night-city .course-shell,
.night-city .ai-shell {
  border-radius: 0;
  border-color: rgba(244,244,233,.2);
  background: rgba(10,13,14,.94);
  box-shadow: none;
}
.night-city .eco-scenario:nth-child(2) { background: #111617; }
.night-city .eco-inputs input,
.night-city .eco-inputs select { color: var(--paper); background: #050607; border-color: rgba(243,238,22,.52); }
.night-city .eco-total { color: #050607; background: var(--acid); }

.night-city #orders {
  isolation: isolate;
  background: #050607 url("assets/night-city/contracts.webp") center/cover fixed no-repeat !important;
}
.night-city #orders::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,rgba(5,6,7,.95),rgba(5,6,7,.71) 55%,rgba(5,6,7,.35)),linear-gradient(0deg,#050607 0%,transparent 22%,rgba(5,6,7,.3) 100%);
}
.night-city .orders-number { color: var(--acid); }
.night-city .orders-paths article { background: rgba(5,6,7,.82); backdrop-filter: blur(8px); }
.night-city .course-link { color: var(--cyan); border-color: rgba(0,225,239,.55); }
.night-city .money-prev,
.night-city .money-next,
.night-city .ai-prev,
.night-city .ai-next,
.night-city .money-close { color: var(--paper); background: #050607; border-color: rgba(243,238,22,.5); }
.night-city .review-avatar { border-color: var(--acid); }

/* Courses: clean interiors between dense city scenes. */
.night-city #course { background: #0b0f10; }
.night-city #rd-course { background: #07090a; }
.night-city #ai-clients { background: #0c1011; }
.night-city .course-photo,
.night-city .ai-work,
.night-city .money-case { border-radius: 0; }
.night-city .course-shell { border-top: 4px solid var(--acid); }
.night-city #rd-course .course-shell { border-top-color: var(--cyan); }
.night-city .course-benefits li::before { background: var(--acid); border-radius: 0; }
.night-city .course-module summary:hover,
.night-city .ai-program summary:hover { color: var(--acid); }
.night-city .ai-work::after { box-shadow: inset 0 0 0 0 var(--acid); }
.night-city .ai-work:hover::after { box-shadow: inset 0 0 0 3px var(--acid); }

/* Pricing is the city map's three access levels. */
.night-city .pricing {
  isolation: isolate;
  background: #050607 url("assets/night-city/contracts.webp") center/cover no-repeat !important;
}
.night-city .pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgba(5,6,7,.9),rgba(5,6,7,.65) 45%,#050607 100%);
}
.night-city .pricing-intro h2 { color: var(--acid); text-shadow: 8px 8px 0 rgba(0,225,239,.35); }
.night-city .pricing-grid { gap: 12px; align-items: stretch; }
.night-city .pricing-grid .price-card,
.night-city .pricing-grid .price-card:nth-child(2),
.night-city .pricing-grid .price-card:nth-child(3) {
  --tariff-bg: rgba(7,9,10,.92);
  --tariff-ink: #f4f4e9;
  --tariff-muted: #b8c0bc;
  --tariff-accent: #f3ee16;
  border: 1px solid rgba(244,244,233,.25);
  border-radius: 0;
  background: var(--tariff-bg);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
.night-city .pricing-grid .price-card:nth-child(2) {
  --tariff-bg: #f3ee16;
  --tariff-ink: #050607;
  --tariff-muted: #252600;
  --tariff-accent: #050607;
  transform: translateY(-20px);
  border-color: var(--acid);
}
.night-city .pricing-grid .price-card:nth-child(3) {
  --tariff-bg: rgba(5,32,36,.92);
  --tariff-ink: #f4f4e9;
  --tariff-muted: #b8cccd;
  --tariff-accent: #00e1ef;
  border-color: rgba(0,225,239,.52);
}
.night-city .tariff-art img { filter: saturate(.55) contrast(1.14); }
.night-city .pricing-grid .price-card:nth-child(2) .tariff-art img { filter: grayscale(.2) sepia(.18) saturate(.7) contrast(1.18); }
.night-city .price { font-family: "Russo One", sans-serif; }
.night-city .credits { border-radius: 0; }

.night-city #choose-plan { background: #080a0b; }
.night-city .plan-guide-column { border-color: var(--acid); }
.night-city .plan-guide-column:nth-child(2) { border-color: var(--cyan); }
.night-city .plan-guide-column:nth-child(3) { border-color: var(--red); }
.night-city .plan-guide li { color: #cbd2ce; }

.night-city .care {
  color: #050607;
  background: var(--cyan) !important;
  border-top: 8px solid var(--acid);
}
.night-city .care::after { color: rgba(5,6,7,.26); }
.night-city .care-status,
.night-city .care-copy,
.night-city .care-action small { color: #050607; }
.night-city .care .button { color: var(--paper); background: #050607; box-shadow: 6px 6px 0 var(--acid); }

.night-city .foot { border-top-color: rgba(243,238,22,.58); }
.night-city .foot-brand { color: var(--acid); }
.night-city .foot-label { color: var(--cyan); }
.night-city .foot-links a { color: #d5dcd8; }
.night-city .foot-links a:hover { color: var(--acid); }
.night-city .foot-bottom { color: #8f9994; }
.night-city .mobile-buy,
.night-city .text-editor { background: rgba(5,6,7,.96); border-color: rgba(243,238,22,.52); border-radius: 0; }
.night-city .editor-button.primary { color: #050607; background: var(--acid); }

@keyframes city-hero {
  from { transform: scale(1.08) translate3d(1.5%,0,0); filter: contrast(1.12) saturate(.7) brightness(.62); }
  to { transform: scale(1.02) translate3d(0,0,0); filter: contrast(1.06) saturate(.92) brightness(.83); }
}

@media (max-width: 980px) {
  .night-city .wrap { width: min(100% - 32px,760px); }
  .night-city .hero-grid { grid-template-columns: 1fr; }
  .night-city .hero-media img { object-position: 73% 42%; }
  .night-city .hero::before { background: linear-gradient(180deg,rgba(5,6,7,.2),rgba(5,6,7,.72) 42%,#050607 72%); }
  .night-city .hero .stage { min-height: 455px; }
  .night-city .pricing-grid .price-card:nth-child(2) { transform: none; }
  .night-city #orders { background-attachment: scroll !important; }
}

@media (max-width: 600px) {
  .night-city .wrap { width: min(100% - 24px,520px); }
  .night-city .nav { min-height: 58px; padding-inline: 14px; }
  .night-city .nav::after { right: 14px; width: 82px; }
  .night-city .hero { min-height: auto; padding-top: 355px; }
  .night-city .hero-media { height: 350px; bottom: auto; }
  .night-city .hero-media img { object-position: 72% 44%; }
  .night-city .hero::before { background: linear-gradient(180deg,rgba(5,6,7,.02),rgba(5,6,7,.08) 47%,#050607 350px); }
  .night-city .hero h1 { font-size: clamp(36px,11vw,52px); line-height: 1; }
  .night-city .hero-copy { padding-top: 24px; }
  .night-city .hero .stage { display: none; }
  .night-city .benefits-grid { display: block; }
  .night-city .benefit + .benefit { border-left: 0; border-top: 1px solid rgba(244,244,233,.18); }
  .night-city .benefit-media { aspect-ratio: 4/3; }
  .night-city .texture-frame { min-height: 840px; }
  .night-city .texture-frame > img { object-position: 67% center; }
  .night-city .texture-frame::after { background: linear-gradient(180deg,rgba(5,6,7,.15),rgba(5,6,7,.9) 56%,#050607 100%); }
  .night-city #tools { background-position: 66% center !important; }
  .night-city #tools::before { background: linear-gradient(180deg,rgba(5,6,7,.54),rgba(5,6,7,.94) 44%,#050607); }
  .night-city #orders { background-position: 60% center !important; }
  .night-city #orders::before { background: rgba(5,6,7,.82); }
  .night-city .pricing { background-position: 66% center !important; }
  .night-city .pricing::before { background: rgba(5,6,7,.78); }
  .night-city .copy-heading h2,
  .night-city .color-layout h2,
  .night-city .helpers-title h2,
  .night-city .pricing-intro h2 { font-size: clamp(34px,10vw,54px); }
  .night-city .speed-layout h2 { text-shadow: 4px 4px 0 rgba(0,168,179,.72); }
}

@media (prefers-reduced-motion: reduce) {
  .night-city *,
  .night-city *::before,
  .night-city *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .night-city .hero-media img { transform: none; }
}

/* Fidelity pass — match the approved Night City concept, not just its palette. */
@media (min-width: 981px) {
  .night-city .hero {
    min-height: 920px;
    height: 100svh;
    max-height: 1040px;
    padding: 104px 0 148px;
    align-items: center;
  }
  .night-city .hero-grid { display: block; position: relative; }
  .night-city .hero-copy { width: 41%; max-width: 570px; padding-top: 0; }
  .night-city .hero h1 { font-size: clamp(44px,4.05vw,62px); line-height: .96; }
  .night-city .hero-copy .hero-description { max-width: 540px; font-size: 16px; line-height: 1.55; }
  .night-city .hero .stage {
    position: absolute;
    left: 43%;
    right: auto;
    top: 50%;
    width: 270px;
    min-height: 540px;
    transform: translateY(-48%);
    z-index: 4;
  }
  .night-city .ps-window { width: 270px; height: 540px; transform: rotate(-1.4deg); }
  .night-city .hero-media img { object-position: 61% 43%; }
  .night-city .hero::before {
    background:
      linear-gradient(90deg,#050607 0%,rgba(5,6,7,.94) 29%,rgba(5,6,7,.3) 54%,rgba(5,6,7,.03) 82%),
      linear-gradient(0deg,rgba(5,6,7,.86) 0%,transparent 24%,rgba(5,6,7,.1) 80%);
  }
  .night-city .hero::after {
    display: block;
    height: 126px;
    z-index: -1;
    background:
      linear-gradient(90deg,rgba(5,6,7,.16),rgba(5,6,7,.58)),
      url("assets/night-city/late-nights.webp") center 58%/cover no-repeat;
    border-top: 1px solid rgba(243,238,22,.6);
    clip-path: polygon(0 12px,20% 12px,21% 0,100% 0,100% 100%,0 100%);
  }
  .night-city .hero-grid::before {
    content: "NIGHT CITY · CREATIVE DISTRICT · 37.5665°N";
    position: absolute;
    top: -42px;
    right: 0;
    color: rgba(244,244,233,.72);
    font: 600 10px/1 "Onest",sans-serif;
    letter-spacing: .14em;
  }
}

.night-city .hero-copy .intro-note {
  color: var(--paper);
  background: rgba(5,6,7,.76);
  border: 1px solid rgba(244,244,233,.42);
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}

.night-city .benefits { padding-top: 70px !important; padding-bottom: 88px !important; }
.night-city .benefits::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg,var(--acid) 0 18%,transparent 18% 19%,var(--cyan) 19% 37%,transparent 37% 72%,var(--red) 72% 76%,transparent 76%);
}
.night-city .benefit { position: relative; }
.night-city .benefit::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: var(--acid);
  clip-path: polygon(58% 0,100% 0,100% 100%);
  opacity: .9;
}

.night-city #proof {
  isolation: isolate;
  background: #071013 url("assets/night-city/skin-lab.webp") 86% center/cover no-repeat !important;
}
.night-city #proof::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#071013 0%,rgba(7,16,19,.94) 56%,rgba(7,16,19,.64) 100%);
}
.night-city #proof .proof-layout {
  padding: 20px;
  background: rgba(5,6,7,.64);
  border: 1px solid rgba(0,225,239,.4);
  backdrop-filter: blur(6px);
}

.night-city .texture-copy > div {
  max-width: 880px;
  padding: clamp(22px,3vw,44px);
  background: rgba(5,6,7,.68);
  border: 1px solid rgba(0,225,239,.36);
  backdrop-filter: blur(7px);
  clip-path: polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
}

.night-city #color {
  isolation: isolate;
  background: #050607 url("assets/night-city/late-nights.webp") center/cover no-repeat !important;
}
.night-city #color::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,rgba(5,6,7,.84),rgba(5,6,7,.46)),linear-gradient(0deg,#050607,transparent 40%);
}
.night-city #color .color-layout { padding: 24px; background: rgba(5,6,7,.7); border: 1px solid rgba(243,238,22,.42); backdrop-filter: blur(7px); }

.night-city #tools .helpers-layout {
  padding: clamp(24px,3vw,48px);
  border: 1px solid rgba(243,238,22,.58);
  clip-path: polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
}

.night-city #demo {
  background: #050607 url("assets/night-city/workstation.webp") center/cover no-repeat !important;
}
.night-city #demo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,6,7,.78);
}
.night-city #demo .wrap { position: relative; }
.night-city .video-slot { background: rgba(5,6,7,.72); backdrop-filter: blur(7px); }

.night-city #economy {
  isolation: isolate;
  background: #050607 url("assets/night-city/contracts.webp") center/cover no-repeat !important;
}
.night-city #economy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgba(5,6,7,.93),rgba(5,6,7,.78) 45%,#050607);
}
.night-city .eco-heading,
.night-city .eco-time { background: rgba(5,6,7,.68); backdrop-filter: blur(5px); }

.night-city .orders-heading,
.night-city .orders-footer,
.night-city .money-heading { background: rgba(5,6,7,.7); backdrop-filter: blur(6px); }
.night-city .orders-shell {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.night-city .orders-heading { padding: clamp(22px,3vw,44px); border: 1px solid rgba(243,238,22,.5); }

.night-city .course-shell,
.night-city .ai-shell { position: relative; overflow: hidden; }
.night-city .course-shell::before,
.night-city .ai-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 8px;
  background: var(--acid);
}
.night-city #rd-course .course-shell::before { background: var(--cyan); }
.night-city .ai-shell::before { background: var(--red); }

.night-city .pricing { padding-top: 100px !important; }
.night-city .pricing-intro { margin-bottom: 40px; }
.night-city .pricing-grid .price-card { padding: 26px; min-height: 0; }
.night-city .price-card .tariff-art { height: 270px; margin-inline: -26px; width: calc(100% + 52px); }
.night-city .price-card .tariff-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.night-city .price-card ul { font-size: 13px; line-height: 1.45; }
.night-city .price-card li { padding-block: 5px; }
.night-city .price-card .price { margin-top: auto; }

@media (max-width: 980px) {
  .night-city #proof,
  .night-city #color,
  .night-city #demo,
  .night-city #economy { background-attachment: scroll !important; }
}

@media (max-width: 600px) {
  .night-city .hero { padding-top: 330px; }
  .night-city .hero-media { height: 330px; }
  .night-city .hero h1 { font-size: clamp(31px,9.2vw,42px); line-height: 1.01; }
  .night-city .hero-copy .hero-description { font-size: 15px; line-height: 1.55; }
  .night-city #proof,
  .night-city #color,
  .night-city #demo,
  .night-city #economy { background-position: 68% center !important; }
  .night-city #proof::after { background: rgba(5,6,7,.8); }
  .night-city #proof .proof-layout,
  .night-city #color .color-layout { padding: 12px; }
  .night-city .texture-copy > div { padding: 20px; }
  .night-city .texture-copy > div { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .night-city .texture-copy h2 { font-size: 34px; line-height: 1.02; overflow-wrap: anywhere; }
  .night-city .price-card .tariff-art { height: 250px; }
}

/* Illustrated interface layer from the approved concept. */
.night-city main > section { --hud: var(--acid); }
.night-city main > section > .wrap,
.night-city .texture-frame { isolation: isolate; }
.night-city main > section > .wrap::before,
.night-city main > section > .wrap::after,
.night-city .texture-frame::before,
.night-city .texture-frame::after { pointer-events: none; }

/* One shared visual alphabet: corner brackets, hard plates, scan data, bar modules. */
.night-city main > section > .wrap::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 0;
  width: 86px;
  height: 18px;
  border-top: 2px solid var(--hud);
  border-bottom: 1px solid color-mix(in srgb,var(--hud) 54%,transparent);
  background:
    linear-gradient(90deg,var(--hud) 0 7px,transparent 7px 16px,var(--hud) 16px 31px,transparent 31px 38px,var(--hud) 38px 58px,transparent 58px 68px,var(--hud) 68px 100%);
  clip-path: polygon(0 0,100% 0,88% 100%,0 100%);
  opacity: .9;
  z-index: 7;
}
.night-city main > section > .wrap::after {
  content: "NC // ALLOOAO";
  position: absolute;
  top: 27px;
  right: 0;
  min-width: 156px;
  padding: 8px 22px 8px 12px;
  color: var(--hud);
  background: rgba(5,6,7,.86);
  border: 1px solid color-mix(in srgb,var(--hud) 60%,transparent);
  font: 700 9px/1 "Onest",sans-serif;
  letter-spacing: .16em;
  text-align: left;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  z-index: 7;
}

.night-city .benefits { --hud: var(--red); }
.night-city .benefits > .wrap::after { content: "CREATIVE SHIFT // 01"; }
.night-city #proof { --hud: var(--cyan); }
.night-city #proof > .wrap::after { content: "NEURAL D&B // TRAINED"; }
.night-city #color { --hud: var(--acid); }
.night-city #color > .wrap::after { content: "HUE · SAT · HUMAN"; }
.night-city #tools { --hud: var(--red); }
.night-city #tools > .wrap::after { content: "7 MODULES // ACTIVE"; }
.night-city #demo { --hud: var(--cyan); }
.night-city #demo > .wrap::after { content: "LIVE PROCESS // PLAY"; }
.night-city #economy { --hud: var(--cyan); }
.night-city #economy > .wrap::after { content: "COST ENGINE // ONLINE"; }
.night-city #orders { --hud: var(--acid); }
.night-city #orders > .wrap::after { content: "CONTRACT FEED // GLOBAL"; }
.night-city #course { --hud: var(--red); }
.night-city #course > .wrap::after { content: "LEVEL UP // RETOUCH"; }
.night-city #rd-course { --hud: var(--cyan); }
.night-city #rd-course > .wrap::after { content: "SKILL ARCHIVE // OPEN"; }
.night-city #ai-clients { --hud: var(--red); }
.night-city #ai-clients > .wrap::after { content: "VISUAL LAB // SERIES"; }
.night-city #pricing { --hud: var(--acid); }
.night-city #pricing > .wrap::after { content: "ACCESS LEVELS // 03"; }
.night-city #choose-plan { --hud: var(--cyan); }
.night-city #choose-plan > .wrap::after { content: "ROUTE SELECTOR // GUIDE"; }
.night-city #care { --hud: #050607; }
.night-city #care > .wrap::after { content: "DIRECT LINE // ALEXANDER"; background: rgba(0,225,239,.7); }

/* Hero-specific illustrated modules. */
.night-city .hero-copy::before {
  content: "AI RETOUCHING SYSTEM\A FOR CREATIVE HUMANS      / 2026";
  white-space: pre;
  display: block;
  width: fit-content;
  margin: 0 0 20px;
  color: rgba(244,244,233,.78);
  font: 600 9px/1.45 "Onest",sans-serif;
  letter-spacing: .1em;
}
.night-city .hero-copy::after {
  content: "PROCESSING — HUMAN BEAUTY / 78%";
  display: block;
  width: min(360px,100%);
  margin-top: 22px;
  padding: 9px 12px;
  color: var(--cyan);
  background: rgba(5,6,7,.84);
  border: 1px solid rgba(0,225,239,.44);
  font: 700 9px/1 "Onest",sans-serif;
  letter-spacing: .12em;
  box-shadow: inset 142px -3px 0 -1px var(--cyan);
}
.night-city .hero .stage::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border: 1px solid rgba(243,238,22,.4);
  clip-path: polygon(0 0,42% 0,42% 1px,100% 1px,100% 86%,calc(100% - 18px) 86%,calc(100% - 18px) 100%,0 100%);
}

/* Skin scanner: crop brackets and specimen readout. */
.night-city .texture-frame::before {
  content: "TEXTURE  GOOD 87%\A PORES    NATURAL 72%\A REDNESS  DETECTED 34%\A BLEMISH  MINOR 12%";
  white-space: pre;
  position: absolute;
  top: 96px;
  right: 6vw;
  z-index: 4;
  width: 250px;
  padding: 16px 18px;
  color: var(--cyan);
  background: rgba(4,13,15,.78);
  border: 1px solid rgba(0,225,239,.62);
  font: 700 10px/2 "Onest",sans-serif;
  letter-spacing: .1em;
  clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.night-city .texture-frame::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 29%;
  width: 190px;
  aspect-ratio: 1;
  z-index: 3;
  border: 2px solid rgba(0,225,239,.7);
  background: transparent;
  clip-path: polygon(0 0,34% 0,34% 2px,66% 2px,66% 0,100% 0,100% 34%,calc(100% - 2px) 34%,calc(100% - 2px) 66%,100% 66%,100% 100%,66% 100%,66% calc(100% - 2px),34% calc(100% - 2px),34% 100%,0 100%,0 66%,2px 66%,2px 34%,0 34%);
}

/* Big physical labels that anchor each world chapter. */
.night-city .speed-layout::before {
  content: "03—10 SEC";
  position: absolute;
  right: 0;
  top: -34px;
  padding: 8px 14px;
  color: var(--acid);
  background: #050607;
  font: 700 12px/1 "Onest",sans-serif;
  letter-spacing: .14em;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
.night-city .helpers-layout::after {
  content: "01 SKIN   02 FACE   03 TEXTURE   04 VOLUME   05 COLOR   06 CLEAN   07 D&B";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  color: #050607;
  background: var(--acid);
  font: 800 10px/1 "Onest",sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
}
.night-city .eco-heading::before {
  content: "≈20₽ / IMAGE";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  color: #050607;
  background: var(--cyan);
  font: 900 12px/1 "Onest",sans-serif;
}
.night-city .orders-heading::after {
  content: "NEW CONTRACTS DETECTED";
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--acid);
  font: 800 9px/1 "Onest",sans-serif;
  letter-spacing: .14em;
}
.night-city .pricing-intro::after {
  content: "STREET / CREATIVE / CORPORATE";
  display: inline-block;
  margin-top: 14px;
  padding: 9px 14px;
  color: #050607;
  background: var(--acid);
  font: 800 10px/1 "Onest",sans-serif;
  letter-spacing: .14em;
  clip-path: polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
}
.night-city .price-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: var(--tariff-accent);
  clip-path: polygon(35% 0,100% 0,100% 100%);
}
.night-city .price-card { position: relative; }

@media (max-width: 980px) {
  .night-city main > section > .wrap::before { left: 16px; }
  .night-city main > section > .wrap::after { right: 16px; }
  .night-city .texture-frame::before { right: 22px; }
}

@media (max-width: 600px) {
  .night-city main > section > .wrap::before { top: 18px; left: 12px; width: 64px; height: 12px; }
  .night-city main > section > .wrap::after { top: 16px; right: 12px; min-width: 0; padding: 7px 10px; font-size: 7px; }
  .night-city .hero-copy::before { display: none; }
  .night-city .hero-copy::after { box-shadow: inset 96px -3px 0 -1px var(--cyan); }
  .night-city .texture-frame::before { top: 38px; right: 12px; width: 190px; padding: 10px 12px; font-size: 8px; }
  .night-city .texture-frame::after { top: 22%; right: 12%; width: 112px; }
  .night-city .helpers-layout::after { font-size: 8px; }
  .night-city .eco-heading::before,
  .night-city .orders-heading::after { display: none; }
}

/* CONCEPT LOCK — the approved comp is the source of truth. */
.night-city main > section:not(.hero):not(.texture) { padding-block: clamp(76px,7vw,112px); }
.night-city .copy-heading,
.night-city .eco-heading,
.night-city .orders-heading,
.night-city .ai-intro,
.night-city .pricing-intro { position: relative; border-radius: 0; }
.night-city .copy-heading h2,
.night-city .eco-heading h2,
.night-city .orders-heading h2,
.night-city .course-intro h2,
.night-city .ai-intro h2,
.night-city .pricing-intro h2 { color: var(--acid); line-height: .94; }
.night-city .copy-heading h2,
.night-city .orders-heading h2,
.night-city .ai-intro h2 { max-width: 850px; }

.night-city .eco-scenario,
.night-city .orders-paths article,
.night-city .review-redesigned,
.night-city .course-shell,
.night-city .ai-shell,
.night-city .plan-guide-column,
.night-city .price-card,
.night-city .faq-item,
.night-city .lesson,
.night-city details {
  color: var(--paper);
  background-color: rgba(5,6,7,.94);
  border-color: rgba(244,244,233,.2);
  border-radius: 0;
}
.night-city .eco-scenario,
.night-city .orders-paths article,
.night-city .plan-guide-column {
  position: relative;
  border: 1px solid rgba(244,244,233,.18);
  padding: clamp(24px,3vw,42px);
  clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
.night-city .eco-scenario::before,
.night-city .orders-paths article::before,
.night-city .plan-guide-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44%;
  height: 4px;
  background: var(--acid);
}
.night-city .eco-scenario:nth-child(2)::before,
.night-city .orders-paths article:nth-child(2)::before,
.night-city .plan-guide-column:nth-child(2)::before { background: var(--cyan); }
.night-city .plan-guide-column:nth-child(3)::before { background: var(--red); }

.night-city #proof .copy-heading,
.night-city #demo .copy-heading {
  width: fit-content;
  max-width: 980px;
  padding: 26px 30px;
  background: rgba(5,6,7,.82);
  border: 1px solid rgba(0,225,239,.42);
  clip-path: polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
}
.night-city #color .color-layout > div {
  padding: clamp(24px,3vw,44px);
  background: #050607;
  border: 1px solid rgba(243,238,22,.48);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.night-city #color .color-layout h2,
.night-city #tools .helpers-title h2 { color: var(--acid); }
.night-city #tools .helpers-copy { padding: 24px; background: #080b0c; border: 1px solid rgba(244,244,233,.2); backdrop-filter: none; }
.night-city #tools .helpers-title > img { border: 1px solid rgba(243,238,22,.55); }

.night-city .eco-heading { padding: 30px; border: 1px solid rgba(0,225,239,.4); }
.night-city .eco-scenarios { gap: 12px; border: 0; margin-top: 12px; }
.night-city .eco-time { margin-top: 12px; padding: 30px; border: 1px solid rgba(243,238,22,.38); }
.night-city .orders-paths { gap: 12px; }
.night-city .orders-footer { padding: 20px 24px; border: 1px solid rgba(0,225,239,.35); }
.night-city .orders-cases { padding-top: 36px; }
.night-city .review-redesigned { border: 1px solid rgba(244,244,233,.22); padding: 16px; }
.night-city .review-redesigned:hover { border-color: var(--acid); }

.night-city .course-shell,
.night-city .ai-shell {
  border: 1px solid rgba(244,244,233,.2);
  background: rgba(5,6,7,.94);
  clip-path: polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);
}
.night-city .course-intro,
.night-city .ai-intro { background: #080b0c; }
.night-city .course-intro { border-bottom: 1px solid rgba(244,244,233,.18); }
.night-city #course .course-intro h2 { color: var(--acid); }
.night-city #rd-course .course-intro h2 { color: var(--cyan); }
.night-city #ai-clients .ai-intro h2 { color: var(--red); }
.night-city .course-photo img,
.night-city .ai-work img { filter: saturate(.78) contrast(1.08); transition: filter .25s var(--ease-city), transform .35s var(--ease-city); }
.night-city .course-photo:hover img,
.night-city .ai-work:hover img { filter: saturate(1.02) contrast(1.05); transform: scale(1.015); }

.night-city .pricing-grid { gap: 10px; }
.night-city .pricing-grid .price-card { border-width: 1px; }
.night-city .pricing-grid .price-card:nth-child(1) { border-color: rgba(244,244,233,.32); }
.night-city .pricing-grid .price-card:nth-child(2) { border: 3px solid var(--acid); }
.night-city .pricing-grid .price-card:nth-child(3) { border: 1px solid var(--cyan); }
.night-city .price-card h3 { font-size: clamp(28px,2.8vw,42px); }
.night-city .price-card .price { font-size: clamp(42px,4vw,64px); }

.night-city #choose-plan .copy-heading {
  display: inline-block;
  padding: 18px 24px;
  background: var(--acid);
  clip-path: polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
}
.night-city #choose-plan .copy-heading h2 { margin: 0; color: #050607; }
.night-city .plan-guide { gap: 10px; margin-top: 22px; }
.night-city .care-grid { position: relative; }
.night-city .care h2 { color: #050607; }
.night-city .care-status { display: inline-block; padding: 7px 10px; border: 1px solid #050607; }
.night-city .text-editor { border: 1px solid var(--cyan); box-shadow: 5px 5px 0 rgba(243,238,22,.65); clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }

@media (max-width: 800px) {
  .night-city .eco-scenario,
  .night-city .orders-paths article,
  .night-city .plan-guide-column { padding: 24px 20px; }
  .night-city #proof .copy-heading,
  .night-city #demo .copy-heading { padding: 20px; }
  .night-city .course-shell,
  .night-city .ai-shell { clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%); }
}

/* The tools wrapper is also the section HUD wrapper: keep its lower module rail
   compact instead of allowing the shared top label to stretch across the panel. */
.night-city #tools > .helpers-layout::after {
  content: "01 SKIN   02 FACE   03 TEXTURE   04 VOLUME   05 COLOR   06 CLEAN   07 D&B";
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 10px 16px;
  color: #050607;
  background: var(--acid);
  border: 0;
  opacity: 1;
  font: 800 10px/1 "Onest",sans-serif;
  letter-spacing: .08em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  clip-path: none;
}
.night-city #tools .helpers-copy::before {
  content: "7 MODULES // ACTIVE";
  display: inline-block;
  margin: 0 0 22px;
  padding: 8px 11px;
  color: var(--red);
  background: #050607;
  border: 1px solid rgba(255,59,48,.58);
  font: 800 9px/1 "Onest",sans-serif;
  letter-spacing: .14em;
}

@media (max-width: 600px) {
  .night-city #demo .video-slot {
    width: 100%;
    max-width: 100%;
    min-height: 340px;
    aspect-ratio: auto;
    box-sizing: border-box;
  }
  .night-city .speed-layout h2 {
    font-size: clamp(52px,18vw,76px);
    overflow-wrap: anywhere;
  }
  .night-city #tools > .helpers-layout::after { font-size: 8px; }
}

/* SCENE INTEGRATION — every chapter is one physical place, not UI pasted on black. */
.night-city #proof,
.night-city #color,
.night-city #tools,
.night-city #demo,
.night-city #economy,
.night-city #orders,
.night-city #course,
.night-city #ai-clients,
.night-city #pricing,
.night-city #choose-plan,
.night-city #care {
  background-color: #050607 !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.night-city .speed-section {
  color: #050607;
  background:
    linear-gradient(90deg,rgba(243,238,22,.97) 0 61%,rgba(243,238,22,.32) 61% 72%,rgba(5,6,7,.16) 72%),
    url("assets/night-city/late-nights.webp") 64% center/cover no-repeat !important;
}
.night-city .speed-section .wrap { min-height: 520px; display: grid; align-items: center; }
.night-city .speed-layout > div {
  width: min(760px,58vw);
  padding: clamp(28px,4vw,60px);
  background: rgba(243,238,22,.91);
  border: 1px solid #050607;
  box-shadow: 14px 14px 0 rgba(0,225,239,.72);
  clip-path: polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);
}

.night-city #proof {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.84) 0 26%,rgba(5,6,7,.18) 58%,rgba(5,6,7,.42) 100%),
    url("assets/night-city/skin-lab.webp") !important;
}
.night-city #proof::after { display: none; }
.night-city #proof .proof-layout {
  background: rgba(3,10,12,.34);
  border: 1px solid rgba(0,225,239,.6);
  box-shadow: 0 0 0 8px rgba(3,10,12,.42), 0 28px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(2px) saturate(118%);
}

.night-city #color {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.74) 0 42%,rgba(5,6,7,.12) 72%),
    url("assets/night-city/late-nights.webp") !important;
}
.night-city #color::after { display: none; }
.night-city #color .color-layout { background: transparent; border: 0; backdrop-filter: none; }
.night-city #color .color-layout > div {
  background: rgba(4,8,9,.7);
  border: 1px solid rgba(243,238,22,.72);
  box-shadow: 10px 10px 0 rgba(0,225,239,.28);
  backdrop-filter: blur(4px);
}

.night-city #tools {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.68) 0 33%,rgba(5,6,7,.16) 63%,rgba(5,6,7,.28) 100%),
    url("assets/night-city/workstation.webp") !important;
}
.night-city #tools .helpers-layout {
  background: rgba(3,7,8,.28);
  border: 1px solid rgba(243,238,22,.72);
  box-shadow: 0 0 0 8px rgba(3,7,8,.3), 0 32px 80px rgba(0,0,0,.48);
  backdrop-filter: blur(3px) saturate(120%);
}
.night-city #tools .helpers-title h2,
.night-city #tools .helpers-copy {
  background: rgba(4,8,9,.74);
  backdrop-filter: blur(4px);
}
.night-city #tools .helpers-title h2 { padding: 24px; border-left: 5px solid var(--acid); }

.night-city #demo {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.38),rgba(5,6,7,.08),rgba(5,6,7,.34)),
    url("assets/night-city/workstation.webp") !important;
}
.night-city #demo::before { display: none; }
.night-city #demo .copy-heading { background: rgba(4,8,9,.66); backdrop-filter: blur(4px); }
.night-city #demo .video-slot {
  width: min(980px,82vw);
  margin: 56px auto 0;
  background: rgba(2,8,10,.34);
  border: 6px solid rgba(9,19,20,.92);
  outline: 1px solid rgba(0,225,239,.72);
  box-shadow: 0 0 0 10px rgba(2,8,10,.34), 0 32px 80px rgba(0,0,0,.46);
  backdrop-filter: blur(3px);
}

.night-city #economy,
.night-city #orders,
.night-city #pricing,
.night-city #choose-plan {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.64),rgba(5,6,7,.12) 48%,rgba(5,6,7,.34)),
    url("assets/night-city/contracts.webp") !important;
  background-attachment: fixed !important;
}
.night-city #economy::before,
.night-city #orders::before,
.night-city .pricing::before { display: none; }
.night-city .eco-heading,
.night-city .eco-time,
.night-city .orders-heading,
.night-city .orders-footer,
.night-city .money-heading {
  background: rgba(3,8,9,.62);
  backdrop-filter: blur(4px) saturate(120%);
}
.night-city .eco-scenario,
.night-city .orders-paths article,
.night-city .review-redesigned,
.night-city .plan-guide-column {
  background: rgba(3,8,9,.72);
  backdrop-filter: blur(5px) saturate(120%);
}

.night-city #course {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.32),rgba(5,6,7,.08) 58%,rgba(5,6,7,.24)),
    url("assets/night-city/academy-v2.webp") !important;
  background-attachment: fixed !important;
}
.night-city #course .course-shell {
  background: rgba(2,7,8,.18);
  border: 1px solid rgba(243,238,22,.68);
  box-shadow: 0 0 0 10px rgba(2,7,8,.28), 0 40px 100px rgba(0,0,0,.5);
  backdrop-filter: blur(2px) saturate(125%);
}
.night-city #course .course-intro {
  background: linear-gradient(90deg,rgba(3,8,9,.84) 0 48%,rgba(3,8,9,.22) 76%,rgba(3,8,9,.08));
}
.night-city #course .course-body { background: rgba(3,8,9,.64); backdrop-filter: blur(5px); }
.night-city #course details { background: rgba(3,8,9,.74); }

.night-city #ai-clients {
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.28),rgba(5,6,7,.06) 54%,rgba(5,6,7,.2)),
    url("assets/night-city/visual-lab-v2.webp") !important;
  background-attachment: fixed !important;
}
.night-city #ai-clients .ai-shell {
  background: rgba(2,7,8,.2);
  border: 1px solid rgba(0,225,239,.65);
  box-shadow: 0 0 0 10px rgba(2,7,8,.25), 0 40px 100px rgba(0,0,0,.5);
  backdrop-filter: blur(2px) saturate(120%);
}
.night-city #ai-clients .ai-intro {
  background: linear-gradient(90deg,rgba(3,8,9,.86) 0 44%,rgba(3,8,9,.24) 70%,rgba(3,8,9,.08));
}
.night-city #ai-clients .ai-carousel,
.night-city #ai-clients .ai-program { background: rgba(3,8,9,.58); backdrop-filter: blur(4px); }

.night-city #choose-plan .copy-heading { box-shadow: 10px 10px 0 rgba(0,225,239,.62); }
.night-city #choose-plan .plan-guide-column { border-width: 2px; }

.night-city .care {
  min-height: 720px;
  color: var(--paper);
  background-image:
    linear-gradient(90deg,rgba(5,6,7,.08) 0 46%,rgba(5,6,7,.18) 58%,rgba(5,6,7,.48) 100%),
    url("assets/night-city/direct-line-v2.webp") !important;
  border-top: 1px solid var(--cyan);
}
.night-city .care-grid {
  min-height: 560px;
  grid-template-columns: 1fr 1fr;
  align-content: center;
}
.night-city .care-grid > div:first-child,
.night-city .care-action {
  grid-column: 2;
  padding-inline: clamp(22px,4vw,58px);
  background: rgba(2,11,14,.56);
  border-inline: 1px solid rgba(0,225,239,.42);
  backdrop-filter: blur(4px) saturate(120%);
}
.night-city .care-grid > div:first-child { padding-top: 46px; }
.night-city .care-action { padding-bottom: 46px; }
.night-city .care h2,
.night-city .care-status,
.night-city .care-copy,
.night-city .care-action small { color: var(--paper); }
.night-city .care-status { color: var(--cyan); border-color: var(--cyan); }
.night-city .care .button { color: #050607; background: var(--acid); box-shadow: 6px 6px 0 var(--cyan); }

@media (max-width: 980px) {
  .night-city #economy,
  .night-city #orders,
  .night-city #course,
  .night-city #ai-clients,
  .night-city #pricing,
  .night-city #choose-plan { background-attachment: scroll !important; }
}

@media (max-width: 700px) {
  .night-city .speed-section .wrap { min-height: 620px; align-items: end; padding-bottom: 56px; }
  .night-city .speed-layout > div { width: 100%; }
  .night-city #proof .proof-layout,
  .night-city #tools .helpers-layout,
  .night-city #course .course-shell,
  .night-city #ai-clients .ai-shell { box-shadow: 0 0 0 5px rgba(3,8,9,.3); }
  .night-city #demo .video-slot { width: 100%; margin-top: 36px; }
  .night-city #course,
  .night-city #ai-clients { background-position: 70% top !important; }
  .night-city .care { min-height: 760px; background-position: 42% center !important; }
  .night-city .care-grid { display: block; min-height: 0; padding-top: 330px; }
  .night-city .care-grid > div:first-child,
  .night-city .care-action { padding-inline: 22px; }
  .night-city .care-grid > div:first-child { padding-top: 28px; }
  .night-city .care-action { padding-bottom: 28px; }
}

/* SKIN BILLBOARD — headline belongs to the city screen, body copy to the road. */
.night-city .texture-frame {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  background: #050607;
  isolation: isolate;
}
.night-city .texture-scene,
.night-city .texture-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.night-city .texture-scene img {
  object-fit: cover;
  object-position: left center;
  filter: contrast(1.04) saturate(.92) brightness(.82);
  transform: none;
}
.night-city .texture-frame::before,
.night-city .texture-frame::after { display: none; }
.night-city .texture-copy {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  background: linear-gradient(180deg,rgba(5,6,7,.06),transparent 58%,rgba(5,6,7,.16));
  pointer-events: none;
}
.night-city .texture-copy > div {
  display: contents;
  width: auto;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  clip-path: none;
}
.night-city .texture-copy h2 {
  position: absolute;
  top: 5.8%;
  left: 16.2%;
  width: min(39vw,650px);
  height: 34%;
  margin: 0;
  padding: 1% 1.4%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--paper);
  font-size: clamp(28px,2.55vw,44px);
  line-height: .95;
  letter-spacing: -.045em;
  text-shadow: 0 3px 18px #000;
  transform: perspective(1600px) rotateY(-2deg) rotateZ(6.2deg) skewY(.2deg);
  transform-origin: left top;
}
.night-city .texture-copy h2 mark {
  display: block;
  margin-bottom: .12em;
  color: var(--acid);
  background: transparent;
}
.night-city .texture-copy p {
  position: absolute;
  left: 9%;
  bottom: 4.5%;
  width: min(58vw,900px);
  max-width: none;
  margin: 0;
  color: rgba(244,244,233,.94);
  font-size: clamp(17px,1.45vw,24px);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .015em;
  text-shadow: 0 2px 4px #000,0 0 16px #000;
  transform: perspective(820px) rotateX(36deg) rotateZ(-.8deg);
  transform-origin: left bottom;
}
.night-city .texture-copy p::before {
  content: "HUMAN TEXTURE // PRESERVED";
  display: block;
  width: fit-content;
  margin-bottom: 9px;
  color: var(--cyan);
  font: 800 9px/1 "Onest",sans-serif;
  letter-spacing: .16em;
}

@media (max-width: 900px) {
  .night-city .texture-frame {
    height: auto;
    min-height: 0;
    aspect-ratio: 941 / 1672;
  }
  .night-city .texture-scene img {
    object-position: center center;
    filter: contrast(1.04) saturate(.94) brightness(.78);
  }
  .night-city .texture-copy h2 {
    top: 9.4%;
    left: 20.8%;
    width: 58.5%;
    height: 23%;
    padding: 1% 1.5%;
    font-size: clamp(18px,4.8vw,27px);
    line-height: .94;
    transform: perspective(900px) rotateZ(4.8deg) skewY(-.18deg);
    transform-origin: center;
  }
  .night-city .texture-copy p {
    left: 8%;
    bottom: 18%;
    width: 84%;
    font-size: 14px;
    line-height: 1.5;
    transform: perspective(760px) rotateX(24deg) rotateZ(-.6deg);
  }
  .night-city .texture-copy p::before { font-size: 7px; }
}

/* CHOICE POSTER — one decisive image between pricing and the tariff guide. */
.night-city .choice-poster {
  padding: clamp(54px,6vw,96px) 0;
  background:
    linear-gradient(180deg,rgba(243,238,22,.045),transparent 28%),
    #050607;
  border-top: 1px solid rgba(243,238,22,.42);
  border-bottom: 1px solid rgba(0,225,239,.28);
}
.night-city .choice-poster-frame {
  position: relative;
  width: min(100%,1000px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  background: #080a0b;
  border: 2px solid rgba(243,238,22,.78);
  box-shadow: 14px 14px 0 rgba(0,168,179,.38),0 38px 100px rgba(0,0,0,.55);
  clip-path: polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
}
.night-city .choice-poster-frame::after {
  content: "CHOICE PROTOCOL // ACTIVE";
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 8px 11px;
  color: #050607;
  background: var(--acid);
  font: 800 9px/1 "Onest",sans-serif;
  letter-spacing: .13em;
}
.night-city .choice-poster-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.night-city .choice-paths {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-top: clamp(24px,3vw,42px);
}
.night-city .choice-path {
  position: relative;
  min-width: 0;
  padding: clamp(24px,2.5vw,36px);
  color: var(--paper);
  background: rgba(8,10,11,.94);
  border: 1px solid rgba(244,244,233,.22);
  clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
.night-city .choice-path::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--path-color);
}
.night-city .choice-path-stay { --path-color: var(--red); }
.night-city .choice-path-self { --path-color: var(--cyan); }
.night-city .choice-path-fast {
  --path-color: var(--acid);
  color: #050607;
  background: var(--acid);
  border-color: var(--acid);
}
.night-city .choice-path-fast::before { background: #050607; }
.night-city .choice-path h3 {
  min-height: 2.7em;
  margin: 0 0 22px;
  color: inherit;
  font-family: "Russo One","Onest",sans-serif;
  font-size: clamp(21px,1.9vw,28px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.night-city .choice-path p {
  margin: 0;
  color: inherit;
  font-size: clamp(15px,1.1vw,17px);
  line-height: 1.62;
}
.night-city .choice-path p + p {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(244,244,233,.18);
}
.night-city .choice-path-fast p + p { border-top-color: rgba(5,6,7,.28); }
.night-city .choice-path strong { font-weight: 800; }
@media (max-width: 600px) {
  .night-city .choice-poster { padding: 40px 0 52px; }
  .night-city .choice-poster-frame {
    width: 100%;
    border-width: 1px;
    box-shadow: 7px 7px 0 rgba(0,168,179,.38);
    clip-path: polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  }
  .night-city .choice-poster-frame::after { right: 10px; bottom: 10px; font-size: 7px; }
  .night-city .choice-paths { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .night-city .choice-path { padding: 26px 22px; }
  .night-city .choice-path h3 { min-height: 0; font-size: 23px; }
  .night-city .choice-path p { font-size: 16px; }
}

/* WILD SPEED — a still photographer inside the city's moving traffic stream. */
.night-city .speed-section {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: #050607 !important;
}
.night-city .speed-scene,
.night-city .speed-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.night-city .speed-scene img {
  object-fit: cover;
  object-position: center;
  filter: contrast(1.04) saturate(.96) brightness(.82);
}
.night-city .speed-section .speed-layout {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.night-city .speed-layout > div {
  display: contents;
  width: auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
}
.night-city .speed-layout h2 {
  position: absolute;
  inset: 0;
  margin: 0;
  color: var(--acid);
  font-size: clamp(48px,4.8vw,82px);
  line-height: .84;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(243,238,22,.2),0 3px 14px #000;
  pointer-events: none;
}
.night-city .speed-layout h2 span {
  position: absolute;
  display: block;
  white-space: nowrap;
}
.night-city .speed-layout h2 span:first-child { top: 5.5%; left: 50%; transform: translateX(-50%); }
.night-city .speed-layout h2 span:last-child { top: 13.5%; left: 50%; transform: translateX(-50%); }
.night-city .speed-layout p {
  position: absolute;
  left: 5.5%;
  bottom: 8%;
  width: min(34vw,560px);
  margin: 0;
  color: var(--paper);
  font-size: clamp(18px,1.65vw,28px);
  font-weight: 750;
  line-height: 1.3;
  text-shadow: 0 2px 4px #000,0 0 18px #000;
}
.night-city .speed-layout p::before {
  content: "FAST PROCESS // 03—10 SEC";
  display: block;
  margin-bottom: 10px;
  color: var(--cyan);
  font: 800 9px/1 "Onest",sans-serif;
  letter-spacing: .15em;
}

@media (max-width: 900px) {
  .night-city .speed-section { aspect-ratio: 941 / 1672; }
  .night-city .speed-layout h2 { font-size: clamp(36px,11vw,54px); line-height: .82; }
  .night-city .speed-layout h2 span:first-child { top: 9%; left: 50%; transform: translateX(-50%); }
  .night-city .speed-layout h2 span:last-child { top: 15%; right: auto; left: 50%; transform: translateX(-50%); }
  .night-city .speed-layout p {
    left: 7%;
    bottom: 6%;
    width: 86%;
    font-size: 15px;
  }
  .night-city .speed-layout p::before { font-size: 7px; }
}

/* MOBILE HERO — the generated facade is the welcome screen. The sign is baked
   into the architectural scene, so the mobile crop must preserve its geometry. */
@media (max-width: 600px) {
  .night-city .speed-layout h2 { display: none; }
  .night-city .texture-copy h2 { display: none; }
  .night-city .hero {
    min-height: 0;
    height: auto;
    max-height: none;
    padding-top: min(76svh, 660px);
    background: #050607;
  }
  .night-city .hero-media {
    height: min(76svh, 660px);
    inset: 0 0 auto;
    background: #050607;
  }
  .night-city .hero-media picture,
  .night-city .hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .night-city .hero-media img {
    object-fit: cover;
    object-position: 50% 29%;
    opacity: 1;
    filter: contrast(1.035) saturate(.96) brightness(.9);
    animation: mobile-house-arrival 1400ms var(--ease-city) both;
  }
  .night-city .hero-media::after {
    z-index: 1;
    background:
      linear-gradient(180deg,rgba(5,6,7,.04) 0%,rgba(5,6,7,0) 62%,rgba(5,6,7,.34) 83%,#050607 100%);
  }
  .night-city .hero::before {
    display: none;
  }
  .night-city .hero-copy {
    padding-top: 30px;
  }
  @keyframes mobile-house-arrival {
    from { transform: scale(1.045); filter: contrast(1.05) saturate(.82) brightness(.68); }
    to { transform: scale(1); filter: contrast(1.035) saturate(.96) brightness(.9); }
  }
}

/* The texture explanation is a bridge between two locations: half on the
   billboard scene, half on the moving-city scene. */
.night-city .texture {
  position: relative;
  z-index: 4;
  overflow: visible;
}
.night-city .texture-transition-copy {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(1180px, calc(100% - 72px));
  padding: clamp(22px,2.4vw,34px) clamp(24px,3vw,42px);
  color: var(--paper);
  background: rgba(3,5,6,.76);
  border: 1px solid rgba(244,244,233,.22);
  border-left: 4px solid var(--cyan);
  box-shadow: 0 22px 70px rgba(0,0,0,.48);
  backdrop-filter: blur(16px) saturate(115%);
  transform: translate(-50%,50%);
  box-sizing: border-box;
}
.night-city .texture-transition-copy span {
  display: block;
  margin-bottom: 12px;
  color: var(--cyan);
  font: 800 10px/1 "Onest",sans-serif;
  letter-spacing: .18em;
}
.night-city .texture-transition-copy p {
  max-width: 1050px;
  margin: 0;
  color: rgba(244,244,233,.96);
  font-size: clamp(17px,1.45vw,23px);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .005em;
  text-shadow: 0 2px 10px rgba(0,0,0,.72);
}
.night-city .speed-section {
  z-index: 1;
}
@media (max-width: 900px) {
  .night-city .texture-transition-copy {
    width: calc(100% - 24px);
    padding: 20px 20px 22px;
    border-left-width: 3px;
  }
  .night-city .texture-transition-copy span {
    margin-bottom: 11px;
    font-size: 9px;
  }
  .night-city .texture-transition-copy p {
    font-size: clamp(22px,5.9vw,24px);
    font-weight: 720;
    line-height: 1.34;
  }

  /* The generated shop window occupies roughly 29–86% of the source frame.
     Each word is transformed independently to stay inside that physical pane. */
  .night-city .speed-layout h2 {
    font-size: clamp(54px,14.2vw,66px);
    line-height: .78;
  }
  .night-city .speed-layout h2 span:first-child {
    top: 8.8%;
    left: 61.2%;
    transform: translateX(-50%) perspective(620px) rotateY(-4.5deg) rotateX(1deg) skewY(-.8deg) scaleX(1.14) scaleY(1.18);
    transform-origin: center;
    opacity: .95;
    filter: drop-shadow(0 0 8px rgba(243,238,22,.25));
  }
  .night-city .speed-layout h2 span:last-child {
    top: 16.5%;
    right: auto;
    left: 61.2%;
    transform: translateX(-50%) perspective(620px) rotateY(-4.5deg) rotateX(1deg) skewY(-.8deg) scaleX(.82) scaleY(1.18);
    transform-origin: center;
    opacity: .95;
    filter: drop-shadow(0 0 8px rgba(243,238,22,.25));
  }
}

/* TEXTURE TRANSITION BILLBOARD — live copy types onto a physical city screen. */
.night-city .texture-transition-copy {
  --texture-overlap: clamp(150px,15vw,240px);
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 20;
  width: 100%;
  aspect-ratio: 1672 / 941;
  margin-top: calc(-1 * var(--texture-overlap));
  padding: 0;
  overflow: hidden;
  color: var(--paper);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
  isolation: isolate;
}
.night-city .texture-transition-copy::before {
  content: "";
  position: absolute;
  inset: var(--texture-overlap) 0 0;
  z-index: -1;
  background: #050607;
}
.night-city .texture-transition-scene,
.night-city .texture-transition-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.night-city .texture-transition-scene img {
  object-fit: cover;
  object-position: center;
  filter: contrast(1.04) saturate(.9) brightness(.82);
}
.night-city .texture-transition-screen {
  position: absolute;
  top: 14.6%;
  left: 18.4%;
  width: 62.8%;
  height: 43.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px,2.2vw,38px) clamp(20px,2.6vw,48px);
  box-sizing: border-box;
  overflow: hidden;
  text-shadow: 0 2px 18px rgba(0,0,0,.88),0 0 26px rgba(0,225,239,.12);
}
.night-city .texture-transition-copy .texture-transition-kicker {
  display: block;
  margin: 0 0 clamp(10px,1.15vw,18px);
  color: var(--cyan);
  font: 800 clamp(10px,.92vw,15px)/1 "Onest",sans-serif;
  letter-spacing: .19em;
}
.night-city .texture-transition-copy p {
  max-width: none;
  margin: 0;
  color: rgba(244,244,233,.98);
  font-family: "Onest",sans-serif;
  font-size: clamp(24px,2.35vw,44px);
  font-weight: 720;
  line-height: 1.16;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.night-city .texture-transition-copy p span {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.night-city .texture-typewriter-output:empty { display: none; }
.night-city .typewriter-active .texture-typewriter-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.night-city .texture-typewriter-output::after {
  content: "";
  display: inline-block;
  width: .08em;
  height: .92em;
  margin-left: .1em;
  vertical-align: -.08em;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(0,225,239,.72);
  animation: texture-caret 720ms steps(1,end) infinite;
}
.night-city .typewriter-complete .texture-typewriter-output::after {
  animation-iteration-count: 4;
}
.night-city.text-editing .texture-typewriter-output { display: none; }
.night-city.text-editing .texture-typewriter-source {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}
@keyframes texture-caret {
  0%,48% { opacity: 1; }
  49%,100% { opacity: 0; }
}
@media (max-width: 700px) {
  .night-city .texture-transition-copy {
    --texture-overlap: 112px;
    aspect-ratio: 941 / 1672;
  }
  .night-city .texture-transition-screen {
    top: 13.5%;
    left: 8.4%;
    width: 83.2%;
    height: 50.4%;
    justify-content: flex-start;
    padding: 7vw 5vw 4vw;
  }
  .night-city .texture-transition-copy .texture-transition-kicker {
    margin-bottom: 16px;
    font-size: 10px;
    line-height: 1.25;
  }
  .night-city .texture-transition-copy p {
    font-size: clamp(20px,5.55vw,24px);
    line-height: 1.12;
    letter-spacing: -.035em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .night-city .texture-typewriter-output::after { display: none; }
}

/* DEMO PORTRAIT — the real player is composited into Alexander's laptop. */
.night-city #demo {
  position: relative;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  background: #050607 !important;
}
.night-city #demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(5,6,7,.74),rgba(5,6,7,.08) 48%,transparent 74%);
  pointer-events: none;
}
.night-city .demo-scene,
.night-city .demo-scene img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.night-city .demo-scene img {
  object-fit: cover;
  object-position: center;
  filter: contrast(1.035) saturate(.94) brightness(.9);
}
.night-city #demo .demo-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  padding: 0;
}
.night-city #demo .copy-heading {
  position: absolute;
  top: 24%;
  left: 5.2%;
  width: 42%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  clip-path: none;
}
.night-city #demo .copy-heading h2 {
  margin: 0;
  color: var(--acid);
  font-size: clamp(48px,5.1vw,92px);
  line-height: .91;
  letter-spacing: -.055em;
  text-shadow: 0 4px 28px rgba(0,0,0,.88);
  text-wrap: balance;
}
.night-city #demo .demo-laptop-screen {
  position: absolute;
  top: 46.6%;
  left: 51.55%;
  width: 30.25%;
  height: 28.7%;
  overflow: hidden;
  background: #020304;
  border-radius: 1.2% / 2%;
  box-shadow: inset 0 0 0 2px rgba(0,225,239,.2),0 0 26px rgba(0,0,0,.5);
}
.night-city #demo .demo-laptop-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #020304;
}
.night-city #demo > .wrap::before,
.night-city #demo > .wrap::after { display: none; }

@media (max-width: 700px) {
  .night-city #demo {
    aspect-ratio: 941 / 1672;
  }
  .night-city #demo::before {
    background: linear-gradient(180deg,rgba(5,6,7,.72),transparent 17%,transparent 82%,rgba(5,6,7,.28));
  }
  .night-city #demo .demo-layout {
    aspect-ratio: 941 / 1672;
  }
  .night-city #demo .copy-heading {
    top: 3.3%;
    left: 5.4%;
    width: 89.2%;
  }
  .night-city #demo .copy-heading h2 {
    font-size: clamp(30px,9.6vw,42px);
    line-height: .93;
    text-align: left;
  }
  .night-city #demo .demo-laptop-screen {
    top: 46.65%;
    left: 16.65%;
    width: 66.7%;
    height: 21.85%;
    border-radius: .8% / 1.4%;
  }
}

/* ECONOMY TERMINAL V2 — tactile range controls and readable results. */
.night-city #economy .eco-scenarios {
  gap: 16px;
  align-items: start;
}
.night-city #economy .eco-scenario {
  --control-accent: var(--acid);
  padding: clamp(28px,3vw,44px);
  background: rgba(3,7,8,.88);
  border: 1px solid rgba(243,238,22,.34);
  backdrop-filter: blur(12px) saturate(118%);
}
.night-city #economy .eco-scenario:nth-child(2) {
  --control-accent: var(--cyan);
  background: rgba(3,10,12,.9);
  border-color: rgba(0,225,239,.34);
}
.night-city #economy .eco-scenario h3 {
  margin-bottom: 20px;
  color: var(--paper);
}
.night-city #economy .eco-description {
  color: rgba(244,244,233,.76);
}
.night-city #economy .eco-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 28px 0 22px;
}
.night-city #economy .eco-control {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px 18px;
  align-items: end;
  min-width: 0;
  padding: 15px 17px 17px;
  color: var(--paper);
  background: rgba(0,0,0,.46);
  border: 1px solid color-mix(in srgb,var(--control-accent) 38%,transparent);
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.night-city #economy .eco-control > span {
  min-width: 0;
  color: rgba(244,244,233,.7);
  font: 700 11px/1.25 Manrope,Arial,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.night-city #economy .eco-control-value {
  color: var(--control-accent);
  font: 800 clamp(20px,2vw,26px)/1 Manrope,Arial,sans-serif;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.night-city #economy .eco-control input[type="range"] {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 30px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  touch-action: pan-y;
}
.night-city #economy .eco-control input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  background: linear-gradient(90deg,var(--control-accent) 0 var(--range-progress),rgba(244,244,233,.17) var(--range-progress) 100%);
}
.night-city #economy .eco-control input[type="range"]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid #050607;
  border-radius: 0;
  background: var(--control-accent);
  box-shadow: 0 0 0 1px var(--control-accent),0 0 18px color-mix(in srgb,var(--control-accent) 44%,transparent);
  appearance: none;
  -webkit-appearance: none;
}
.night-city #economy .eco-control input[type="range"]::-moz-range-track {
  height: 6px;
  border: 0;
  background: rgba(244,244,233,.17);
}
.night-city #economy .eco-control input[type="range"]::-moz-range-progress {
  height: 6px;
  background: var(--control-accent);
}
.night-city #economy .eco-control input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #050607;
  border-radius: 0;
  background: var(--control-accent);
  box-shadow: 0 0 0 1px var(--control-accent);
}
.night-city #economy .eco-control input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #050607,0 0 0 5px var(--control-accent),0 0 24px var(--control-accent);
}
.night-city #economy .eco-line {
  padding: 13px 2px;
  color: rgba(244,244,233,.68);
  border-bottom-color: rgba(244,244,233,.14);
}
.night-city #economy .eco-line output {
  color: var(--paper);
  font-weight: 750;
}
.night-city #economy .eco-total {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 18px 20px 20px;
  color: #050607;
  background: var(--control-accent);
  clip-path: polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
.night-city #economy .eco-total > span,
.night-city #economy .eco-total > span * {
  color: #050607 !important;
  font: 900 11px/1.2 Manrope,Arial,sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: 1;
}
.night-city #economy .eco-total output,
.night-city #economy .eco-total output * {
  color: #050607 !important;
  font-weight: 900;
  opacity: 1;
}
.night-city #economy .eco-end {
  margin: 22px 0 0;
  padding: 16px 17px;
  border-left: 3px solid var(--control-accent);
  background: rgba(0,0,0,.3);
}
@media (max-width: 800px) {
  .night-city #economy .eco-heading { padding: 22px 20px; }
  .night-city #economy .eco-scenarios { gap: 12px; }
  .night-city #economy .eco-scenario,
  .night-city #economy .eco-scenario + .eco-scenario { padding: 26px 20px 28px; }
  .night-city #economy .eco-control { padding: 14px 15px 16px; }
  .night-city #economy .eco-control-value { font-size: 22px; }
  .night-city #economy .eco-total { padding: 17px 18px 19px; }
  .night-city #economy .eco-total output { font-size: clamp(34px,11vw,48px); }
  .night-city #economy .eco-time { padding: 24px 20px; }
}

/* MOBILE ACTION DOCK V2 — process, purchase and direct care. */
@media (max-width: 800px) {
  .night-city .mobile-buy {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(92px,.85fr) 48px;
    gap: 7px;
    left: 8px;
    right: 8px;
    bottom: max(8px,env(safe-area-inset-bottom));
    min-height: 60px;
    padding: 7px;
    color: var(--paper);
    background: rgba(3,6,7,.93);
    border: 1px solid rgba(243,238,22,.46);
    border-radius: 0;
    box-shadow: 0 -12px 38px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(16px) saturate(130%);
    clip-path: polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
    align-items: stretch;
  }
  .night-city .mobile-buy > a {
    min-width: 0;
    min-height: 46px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .night-city .mobile-buy-process {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px 6px 14px;
    color: var(--paper);
    border: 1px solid rgba(0,225,239,.42);
    background: rgba(0,225,239,.06);
    clip-path: polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
  }
  .night-city .mobile-buy-process-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    translate: 0 -50%;
    color: var(--cyan);
    border: 1px solid rgba(0,225,239,.72);
    background: rgba(0,225,239,.12);
    box-shadow: inset 0 0 0 1px rgba(0,225,239,.08);
    clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  }
  .night-city .mobile-buy-process-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(0,225,239,.18);
    clip-path: inherit;
  }
  .night-city .mobile-buy-process-icon svg {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(0,225,239,.75));
  }
  .night-city .mobile-buy-process > span:first-child {
    color: rgba(244,244,233,.56);
    font: 700 8px/1 Manrope,Arial,sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .night-city .mobile-buy-process strong {
    max-width: calc(100% - 18px);
    margin-top: 4px;
    color: var(--paper);
    font: 800 11px/1.05 Manrope,Arial,sans-serif;
    letter-spacing: -.015em;
    text-transform: uppercase;
  }
  .night-city .mobile-buy-get {
    display: grid;
    place-items: center;
    padding: 0 11px;
    color: #050607;
    background: var(--acid);
    font: 900 12px/1 Manrope,Arial,sans-serif;
    letter-spacing: .025em;
    text-transform: uppercase;
    clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  }
  .night-city .mobile-buy-care {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--cyan);
    border: 1px solid rgba(0,225,239,.7);
    background: rgba(0,225,239,.1);
  }
  .night-city .mobile-buy-care svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .night-city .mobile-buy-care-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    background: var(--acid);
    box-shadow: 0 0 10px var(--acid);
  }
  .night-city .mobile-buy > a:active { transform: translateY(1px); filter: brightness(1.12); }
  .night-city .mobile-buy > a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
}
@media (max-width: 350px) {
  .night-city .mobile-buy { grid-template-columns: minmax(0,1.2fr) 88px 44px; gap: 5px; }
  .night-city .mobile-buy-process { padding-left: 9px; }
  .night-city .mobile-buy-process-icon { display: none; }
}

/* AI GALLERY V3 — city bokeh, suspended pictures and two billboard lamps per work. */
.night-city #ai-clients {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px,7vw,112px) !important;
  background: #09151d !important;
}
.night-city #ai-clients::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,rgba(3,9,14,.82),rgba(3,9,14,.2) 30%,rgba(3,9,14,.1) 80%,rgba(3,9,14,.7)),
    url("assets/night-city/ai-gallery-bokeh-v3.jpg") center/cover no-repeat;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.night-city #ai-clients .ai-shell {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  clip-path: none;
}
.night-city #ai-clients .ai-shell::before,
.night-city #ai-clients .ai-shell::after { display: none; }
.night-city #ai-clients .ai-intro {
  width: min(1180px,calc(100% - 80px));
  max-width: none;
  margin: 0 auto 58px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap: clamp(32px,6vw,86px);
  border: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  clip-path: none;
  text-shadow: 0 2px 12px #031018;
}
.night-city #ai-clients .ai-intro h2 {
  max-width: 760px;
  margin: 0 0 24px;
  padding: 0;
  background: none;
  color: var(--acid);
  font-size: clamp(44px,5vw,72px);
  line-height: 1.02;
  letter-spacing: -.025em;
  clip-path: none;
  box-shadow: none;
}
.night-city #ai-clients .eco-kicker { color: #6be9ee; }
.night-city #ai-clients .ai-lead { color: #f6f8f9; font-size: 18px; line-height: 1.65; }
.night-city #ai-clients .ai-benefits p {
  color: #eff4f7;
  border-color: rgba(210,236,245,.3);
  font-size: 15px;
  line-height: 1.7;
}
.night-city #ai-clients .ai-carousel {
  margin: 0;
  padding: 0;
  position: relative;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  clip-path: none;
}
.night-city #ai-clients .ai-carousel + .ai-carousel { margin-top: 40px; }
.night-city #ai-clients .ai-rail-head {
  width: min(1180px,calc(100% - 80px));
  margin: 0 auto;
  padding: 0;
  background: none;
  color: #f8fafc;
  box-shadow: none;
  clip-path: none;
}
.night-city #ai-clients .ai-rail-head > span {
  color: #eff7fa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-shadow: 0 2px 8px #061218;
}
.night-city #ai-clients .ai-controls { gap: 10px; }
.night-city #ai-clients .ai-controls button {
  width: 46px;
  height: 42px;
  border: 1px solid #79e7eb;
  border-radius: 0;
  color: #97f8fc;
  background: #07141a;
  clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transition: background .2s ease,color .2s ease;
}
.night-city #ai-clients .ai-controls button:hover { background: var(--acid); color: #091116; border-color: var(--acid); }
.night-city #ai-clients .ai-controls button:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; clip-path: none; }
.night-city #ai-clients .ai-rail {
  gap: clamp(36px,4vw,60px);
  padding: 100px max(32px,calc((100vw - 1180px)/2)) 40px;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  scroll-padding-inline: max(32px,calc((100vw - 1180px)/2));
  align-items: flex-start;
  scrollbar-width: thin;
  scrollbar-color: #82b3bc transparent;
}
.night-city #ai-clients .ai-rail::-webkit-scrollbar { height: 3px; }
.night-city #ai-clients .ai-rail::-webkit-scrollbar-track { background: transparent; }
.night-city #ai-clients .ai-rail::-webkit-scrollbar-thumb { background: #82b3bc; }
.night-city #ai-clients .ai-work {
  --frame-pad: 12px;
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  margin: 0;
  padding: var(--frame-pad);
  border: 7px ridge #6e7778;
  border-radius: 0;
  overflow: visible;
  clip-path: none;
  background: #ece6d6;
  box-shadow: 6px 7px 0 #10191e, 10px 16px 22px rgba(0,0,0,.58), inset 0 0 0 1px #fff8df;
  transition: transform .3s ease;
}
.night-city #ai-clients .ai-work.series-start:not(:first-child) { margin-left: 0; }
.night-city #ai-clients .ai-work::before {
  content: "";
  position: absolute;
  inset: -83px 18% auto;
  height: 78px;
  background: linear-gradient(90deg,transparent calc(0% + 1px),#a4a99e 1px,#6a7e86 2px,transparent 2px,transparent calc(100% - 2px),#6a7e86 calc(100% - 2px),#a4a99e calc(100% - 1px),transparent calc(100% - 1px));
  opacity: .58;
  pointer-events: none;
}
.night-city #ai-clients .ai-work::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(ellipse at 25% 0%,rgba(255,247,207,.3),transparent 53%),
    radial-gradient(ellipse at 75% 0%,rgba(255,247,207,.3),transparent 53%);
  box-shadow: inset 0 1px 5px rgba(255,255,231,.6);
  z-index: 2;
  pointer-events: none;
}
.night-city #ai-clients .ai-work:hover::after { box-shadow: inset 0 1px 5px rgba(255,255,231,.6); }
.night-city #ai-clients .ai-work img {
  display: block;
  width: auto;
  height: clamp(300px,27vw,390px);
  max-width: none;
  filter: none;
  transform: none;
  transition: none;
}
.night-city #ai-clients .ai-work:hover img { filter: none; transform: none; }
.night-city #ai-clients .ai-work:focus-visible { outline: 3px solid var(--acid); outline-offset: 7px; }
.night-city #ai-clients .gallery-lamp {
  position: absolute;
  top: -47px;
  left: 25%;
  width: 48px;
  height: 44px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
}
.night-city #ai-clients .gallery-lamp + .gallery-lamp { left: 75%; }
.night-city #ai-clients .gallery-lamp::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 10px;
  width: 5px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(90deg,#1b2429,#91a1a7 48%,#26333a);
  transform: skewX(-18deg);
  box-shadow: 2px 0 1px #041015;
}
.night-city #ai-clients .gallery-lamp::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 42px;
  height: 17px;
  border: 2px solid #718185;
  border-bottom: 3px solid #182329;
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg,#bbc5bd 0 10%,#29343a 12% 48%,#fff7c8 52% 80%,#fce6a8 84%);
  box-shadow: 0 4px 6px rgba(255,236,174,.7), 0 -2px 0 #101c22;
  transform: rotate(-5deg);
}
.night-city #ai-clients .gallery-lamp + .gallery-lamp::after { transform: rotate(5deg); }
.night-city #ai-clients .gallery-lamp + .gallery-lamp::before { left: 17px; transform: skewX(18deg); }
.night-city #ai-clients .gallery-lamp-beam {
  position: absolute;
  top: 12px;
  left: -27px;
  width: 102px;
  height: 170px;
  background: linear-gradient(180deg,rgba(255,239,180,.28),rgba(255,237,183,.07) 62%,transparent);
  clip-path: polygon(35% 0,65% 0,100% 100%,0 100%);
  opacity: .8;
  filter: blur(3px);
}
.night-city #ai-clients .ai-program {
  width: min(1180px,calc(100% - 80px));
  max-width: none;
  margin: 50px auto 0;
  padding: 0 24px;
  border: 1px solid rgba(123,220,227,.5);
  background: rgba(3,15,23,.9);
  backdrop-filter: none;
}
.night-city #ai-clients .ai-program summary,
.night-city #ai-clients .ai-program li { color: #eff6f9; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .night-city #ai-clients .ai-work:hover { transform: translateY(-4px); }
}
@media (max-width: 800px) {
  .night-city #ai-clients { padding-block: 62px 80px !important; }
  .night-city #ai-clients::before {
    background:
      linear-gradient(180deg,rgba(3,9,14,.82),rgba(3,9,14,.3) 34%,rgba(3,9,14,.14) 84%,rgba(3,9,14,.65)),
      url("assets/night-city/ai-gallery-bokeh-v3.jpg") 58% center/auto 100% no-repeat;
  }
  .night-city #ai-clients .ai-intro {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 26px;
    margin-bottom: 42px;
  }
  .night-city #ai-clients .ai-intro h2 { font-size: clamp(36px,11vw,54px); line-height: 1.04; }
  .night-city #ai-clients .ai-lead { font-size: 17px; }
  .night-city #ai-clients .ai-benefits p { padding-block: 14px; font-size: 14px; }
  .night-city #ai-clients .ai-carousel + .ai-carousel { margin-top: 32px; }
  .night-city #ai-clients .ai-rail-head { width: calc(100% - 40px); }
  .night-city #ai-clients .ai-controls button { width: 44px; height: 42px; }
  .night-city #ai-clients .ai-rail {
    gap: 30px;
    padding: 92px 26px 32px;
    scroll-padding-inline: 26px;
  }
  .night-city #ai-clients .ai-work { --frame-pad: 9px; border-width: 6px; }
  .night-city #ai-clients .ai-work img { width: clamp(200px,68vw,320px); height: auto; }
  .night-city #ai-clients .ai-program { width: calc(100% - 40px); padding-inline: 18px; margin-top: 36px; }
  .night-city #ai-clients .ai-program summary { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .night-city #ai-clients .ai-work,
  .night-city #ai-clients .ai-controls button { transition: none; }
}

/* DESKTOP HERO — same approved welcome scene as mobile, art-directed wide.
   The image owns the first viewport; the product copy begins after the scene. */
@media (min-width: 601px) {
  .night-city .hero {
    min-height: 0;
    height: auto;
    max-height: none;
    padding: min(56.25vw, 100svh) 0 clamp(78px, 8vw, 118px);
    align-items: flex-start;
    background: #050607;
  }
  .night-city .hero-media {
    inset: 0 0 auto;
    height: min(56.25vw, 100svh);
    background: #050607;
  }
  .night-city .hero-media picture,
  .night-city .hero-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .night-city .hero-media img {
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 1;
    filter: contrast(1.025) saturate(.97) brightness(.92);
    animation: desktop-house-arrival 1400ms var(--ease-city) both;
  }
  .night-city .hero-media::after {
    z-index: 1;
    background: linear-gradient(180deg,rgba(5,6,7,0) 70%,rgba(5,6,7,.3) 88%,#050607 100%);
  }
  .night-city .hero::before { display: none; }
  .night-city .hero::after { display: none; }
  .night-city .hero-grid { display: block; }
  .night-city .hero-copy {
    width: min(880px, 78%);
    max-width: 880px;
    padding-top: clamp(46px, 5vw, 74px);
  }
  .night-city .hero .stage { display: none; }
  .night-city .hero h1 {
    max-width: 850px;
    font-size: clamp(48px, 5.15vw, 78px);
    line-height: .98;
    letter-spacing: -.04em;
  }
  .night-city .hero-copy .hero-description { max-width: 720px; }
  @keyframes desktop-house-arrival {
    from { transform: scale(1.035); filter: contrast(1.04) saturate(.85) brightness(.7); }
    to { transform: scale(1); filter: contrast(1.025) saturate(.97) brightness(.92); }
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .night-city .hero { padding-top: min(70svh, 620px); }
  .night-city .hero-media { height: min(70svh, 620px); }
  .night-city .hero-media img { object-position: 55% 50%; }
  .night-city .hero-copy { width: 100%; }
}