:root {
  --rain-glass-blue: #A7D8DE;
  --misty-aqua-white: #E8F7F2;
  --soft-moss-green: #7AA879;
  --muted-lagoon-teal: #2F7376;
  --storm-shadow-slate: #28434A;
  --neon-leaf-glow: #B8FF4D;
  --warm-civic-signal: #FFD36A;
  --deep-night-water: #102A33;
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --design-font-token: "Inter**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--deep-night-water);
  font-family: var(--body);
  background:
    radial-gradient(circle at 22% 8%, rgba(184, 255, 77, .42), transparent 20rem),
    radial-gradient(circle at 86% 22%, rgba(255, 211, 106, .35), transparent 22rem),
    linear-gradient(135deg, #E8F7F2 0%, #A7D8DE 45%, #7AA879 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    repeating-linear-gradient(95deg, rgba(255,255,255,.08) 0 1px, transparent 1px 21px),
    radial-gradient(circle at var(--mx, 50%) var(--my, 35%), rgba(232,247,242,.36), transparent 14rem);
  mix-blend-mode: screen;
}

.rain-glass {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.2);
  background:
    linear-gradient(115deg, rgba(232,247,242,.28), rgba(167,216,222,.11)),
    repeating-linear-gradient(176deg, transparent 0 28px, rgba(255,255,255,.20) 29px 30px, transparent 31px 76px);
  animation: sharpen 2.6s ease forwards;
}

.botanical-veil {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  filter: blur(13px);
  opacity: .45;
  background: rgba(47,115,118,.28);
  border-radius: 55% 45% 64% 36%;
  transform-origin: center;
}

.veil-one { width: 38vw; height: 64vh; left: -14vw; top: 8vh; animation: leafPass 18s ease-in-out infinite alternate; }
.veil-two { width: 30vw; height: 50vh; right: -12vw; bottom: 8vh; background: rgba(122,168,121,.32); animation: leafPass 22s ease-in-out infinite alternate-reverse; }

.pollen-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(184,255,77,.82) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,211,106,.68) 0 1px, transparent 3px);
  background-size: 180px 240px, 260px 210px;
  animation: pollenRise 16s linear infinite;
  opacity: .55;
}

.city-journey { position: relative; z-index: 4; }

.district {
  position: relative;
  min-height: 100vh;
  padding: clamp(22px, 4vw, 56px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.arrival { min-height: 108vh; }

.modular-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(88px, 12vw); gap: clamp(12px, 1.6vw, 24px); }
.modular-grid.eight { grid-template-columns: repeat(8, 1fr); }

.hero-grid { width: min(1500px, 100%); margin: auto; transform: translateY(30px); animation: alignTiles 1.8s cubic-bezier(.17,.86,.32,1) .45s forwards; }

.tile, .lens-tile, .market-tile, .tube, .stop, .floating-block, .lagoon-title {
  position: relative;
  border: 1px solid rgba(232,247,242,.58);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(232,247,242,.56), rgba(167,216,222,.24) 50%, rgba(122,168,121,.20));
  box-shadow: inset 0 1px 18px rgba(255,255,255,.62), 0 28px 70px rgba(16,42,51,.20);
  backdrop-filter: blur(18px) saturate(1.25);
  overflow: hidden;
  transition: transform .45s ease, filter .45s ease, box-shadow .45s ease, border-color .45s ease;
}

[data-focus]:hover, .is-focused {
  transform: translateY(-8px) scale(1.025);
  filter: saturate(1.18) contrast(1.04);
  border-color: rgba(184,255,77,.88);
  box-shadow: inset 0 1px 22px rgba(255,255,255,.82), 0 0 32px rgba(184,255,77,.34), 0 36px 78px rgba(16,42,51,.22);
}

.tile::after, .lens-tile::after, .market-tile::after, .tube::after, .stop::after, .lagoon-title::after {
  content: "";
  position: absolute;
  inset: 10px auto auto 14px;
  width: 42%;
  height: 22%;
  border-radius: 999px;
  background: rgba(255,255,255,.36);
  filter: blur(7px);
}

.vertical-sign {
  grid-column: 1 / 2;
  grid-row: 1 / 6;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(16,42,51,.88), rgba(47,115,118,.62));
  color: var(--misty-aqua-white);
  min-height: 720px;
}

.vertical-sign span {
  font-family: var(--display);
  font-size: clamp(5rem, 10vw, 13rem);
  line-height: .77;
  letter-spacing: .02em;
  writing-mode: vertical-rl;
  text-shadow: 0 0 24px rgba(184,255,77,.42);
}

.sign-glow { position: absolute; inset: auto 14% 4% 14%; height: 34%; background: radial-gradient(ellipse, rgba(184,255,77,.75), transparent 70%); filter: blur(16px); }

.canopy-tile { grid-column: 2 / 5; grid-row: 1 / 3; padding: clamp(24px, 4vw, 56px); }
.pond-tile { grid-column: 5 / 6; grid-row: 1 / 3; padding: 24px; display: flex; flex-direction: column; justify-content: end; }
.moss-patch { grid-column: 2 / 3; grid-row: 3 / 5; background: linear-gradient(145deg, rgba(122,168,121,.72), rgba(184,255,77,.20)); display: grid; place-items: center; }
.transit-stop { grid-column: 3 / 4; grid-row: 3 / 4; background: rgba(255,211,106,.48); display: grid; place-items: center; }
.canal-strip { grid-column: 4 / 6; grid-row: 3 / 4; border-radius: 999px; background: linear-gradient(90deg, rgba(167,216,222,.78), rgba(232,247,242,.34), rgba(184,255,77,.24)); }
.leaf-bed { grid-column: 3 / 6; grid-row: 4 / 6; padding: 26px; display: flex; align-items: end; }

.eyebrow, .section-label, .transit-stop span, .moss-patch span, .leaf-bed span, .tube span, .market-tile span {
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.eyebrow { color: var(--muted-lagoon-teal); margin: 0 0 12px; font-size: 1.05rem; }
h1, h2 { font-family: var(--display); letter-spacing: .015em; line-height: .88; margin: 0; font-weight: 400; }
h1 { font-size: clamp(4rem, 10vw, 11rem); max-width: 920px; }
h2 { font-size: clamp(3.2rem, 8vw, 8.5rem); }
p { font-size: clamp(1rem, 1.4vw, 1.28rem); line-height: 1.65; max-width: 720px; }

.bubble-mark { display: flex; gap: 10px; align-items: end; margin-bottom: 24px; }
.bubble-mark b { display: block; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #E8F7F2, #A7D8DE 44%, #2F7376); box-shadow: 0 0 24px rgba(184,255,77,.42); }
.bubble-mark b:nth-child(1) { width: 54px; height: 54px; }
.bubble-mark b:nth-child(2) { width: 42px; height: 42px; border-radius: 14px; }
.bubble-mark b:nth-child(3) { width: 34px; height: 64px; border-radius: 28px 28px 8px 8px; background: linear-gradient(#B8FF4D, #7AA879); }

.distant-blocks span { position: absolute; z-index: -1; border-radius: 30px; background: rgba(232,247,242,.25); filter: blur(5px); }
.distant-blocks span:nth-child(1) { width: 18vw; height: 16vh; right: 4vw; top: 12vh; }
.distant-blocks span:nth-child(2) { width: 13vw; height: 28vh; left: 20vw; bottom: 8vh; }
.distant-blocks span:nth-child(3) { width: 24vw; height: 9vh; right: 20vw; bottom: 17vh; border-radius: 999px; }
.distant-blocks span:nth-child(4) { width: 11vw; height: 20vh; left: 48vw; top: 8vh; }
.distant-blocks span:nth-child(5) { width: 16vw; height: 11vh; left: 6vw; top: 16vh; }

.route-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .72; }
.route { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 22 24; filter: drop-shadow(0 0 16px rgba(184,255,77,.42)); animation: routeTrace 9s linear infinite; }
.route-a { stroke: rgba(184,255,77,.72); }
.route-b { stroke: rgba(255,211,106,.62); animation-duration: 12s; }

.section-label {
  position: absolute;
  top: 34px;
  left: clamp(24px, 5vw, 64px);
  color: var(--deep-night-water);
  background: rgba(232,247,242,.42);
  border: 1px solid rgba(232,247,242,.72);
  border-radius: 999px;
  padding: 8px 18px;
  backdrop-filter: blur(12px);
}

.transit-layout { width: min(1420px, 100%); margin: auto; }
.text-hub { grid-column: 1 / 5; grid-row: 1 / 4; padding: clamp(28px, 4vw, 58px); background: rgba(232,247,242,.48); }
.tube { display: flex; align-items: center; justify-content: center; color: var(--misty-aqua-white); min-height: 116px; border-radius: 999px; }
.tube-one { grid-column: 5 / 9; grid-row: 1 / 2; background: linear-gradient(90deg, rgba(47,115,118,.74), rgba(167,216,222,.42)); }
.tube-two { grid-column: 3 / 8; grid-row: 4 / 5; background: linear-gradient(90deg, rgba(255,211,106,.58), rgba(184,255,77,.26)); color: var(--deep-night-water); }
.stop { display: grid; place-items: center; font: 700 3rem var(--condensed); background: radial-gradient(circle at 40% 30%, #E8F7F2, #A7D8DE 55%, #2F7376); }
.stop-a { grid-column: 6 / 7; grid-row: 2 / 4; }
.stop-b { grid-column: 7 / 9; grid-row: 2 / 4; }
.stop-c { grid-column: 1 / 3; grid-row: 4 / 5; }
.bubble-stack { grid-column: 5 / 6; grid-row: 2 / 4; position: relative; }
.bubble-stack i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 28% 24%, #E8F7F2, #A7D8DE 50%, rgba(47,115,118,.64)); box-shadow: 0 0 28px rgba(184,255,77,.38); animation: bubbleRise 5s ease-in-out infinite; }
.bubble-stack i:nth-child(1) { width: 54px; height: 54px; left: 12%; bottom: 4%; }
.bubble-stack i:nth-child(2) { width: 84px; height: 84px; left: 38%; bottom: 24%; animation-delay: -1s; }
.bubble-stack i:nth-child(3) { width: 42px; height: 42px; left: 4%; bottom: 54%; animation-delay: -2s; }
.bubble-stack i:nth-child(4) { width: 66px; height: 66px; left: 58%; bottom: 64%; animation-delay: -3s; }

.moss-market { background: linear-gradient(180deg, transparent, rgba(47,115,118,.18)); }
.market-board { width: min(1460px, 100%); margin: auto; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: minmax(100px, 11vw); gap: clamp(12px, 1.4vw, 22px); }
.market-sign { grid-column: 1 / 5; grid-row: 1 / 4; padding: clamp(28px, 4vw, 58px); }
.market-tile { padding: 24px; display: flex; align-items: end; justify-content: start; color: var(--deep-night-water); }
.sprout { grid-column: 5 / 7; grid-row: 1 / 3; background: linear-gradient(145deg, rgba(184,255,77,.38), rgba(122,168,121,.58)); }
.sprout b { position: absolute; top: 18%; left: 46%; width: 44px; height: 112px; border-radius: 40px 40px 8px 8px; background: var(--neon-leaf-glow); box-shadow: -28px -18px 0 -8px rgba(232,247,242,.86), 28px -24px 0 -9px rgba(167,216,222,.86); }
.algae { grid-column: 7 / 9; grid-row: 1 / 2; }
.dew { grid-column: 7 / 9; grid-row: 2 / 4; border-radius: 50%; }
.root { grid-column: 1 / 3; grid-row: 4 / 5; border-radius: 999px; }
.skybridge { grid-column: 3 / 9; grid-row: 4 / 5; border-radius: 999px; background: linear-gradient(90deg, rgba(232,247,242,.56), rgba(167,216,222,.36), rgba(255,211,106,.34)); }

.signal-garden { background: radial-gradient(circle at 70% 40%, rgba(184,255,77,.24), transparent 30rem); }
.signal-scene { width: min(1420px, 100%); margin: auto; display: grid; grid-template-columns: 1.1fr 1.6fr; gap: clamp(18px, 3vw, 46px); align-items: stretch; }
.neon-pylon { min-height: 620px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(180deg, rgba(16,42,51,.9), rgba(40,67,74,.74)); }
.neon-pylon span { font-family: var(--display); font-size: clamp(5rem, 9vw, 12rem); line-height: .8; color: var(--misty-aqua-white); text-shadow: 0 0 22px #B8FF4D, 0 0 54px rgba(184,255,77,.48); }
.signal-copy { padding: clamp(28px, 5vw, 70px); align-self: center; }
.lamp-row { position: absolute; bottom: 12vh; right: 8vw; display: flex; gap: 34px; }
.lamp-row i { width: 18px; height: 140px; border-radius: 999px; background: linear-gradient(#FFD36A, #B8FF4D 28%, rgba(47,115,118,.36)); box-shadow: 0 0 34px #B8FF4D; animation: lampPulse 2.6s ease-in-out infinite alternate; }
.lamp-row i:nth-child(even) { height: 96px; animation-delay: -.8s; }

.night-lagoon { color: var(--misty-aqua-white); background: radial-gradient(circle at 36% 32%, rgba(47,115,118,.92), #102A33 72%); }
.lagoon-grid { width: min(1440px, 100%); margin: auto; }
.lagoon-title { grid-column: 1 / 4; grid-row: 1 / 4; padding: clamp(28px, 4vw, 58px); color: var(--misty-aqua-white); background: rgba(16,42,51,.46); }
.lagoon-title p { color: rgba(232,247,242,.86); }
.reflection { grid-column: 4 / 6; grid-row: 1 / 3; font-family: var(--display); font-size: clamp(4rem, 8vw, 9rem); line-height: .8; transform: rotate(-4deg); opacity: .72; color: var(--neon-leaf-glow); text-shadow: 0 0 42px rgba(184,255,77,.56); }
.lagoon-pool { grid-column: 3 / 6; grid-row: 3 / 5; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(167,216,222,.58), rgba(47,115,118,.38), rgba(16,42,51,.14) 70%); }
.lagoon-pool span { position: absolute; inset: 18%; border: 2px solid rgba(232,247,242,.26); border-radius: 50%; animation: ripple 3.6s ease-out infinite; }
.floating-block { min-height: 160px; background: rgba(232,247,242,.15); }
.block-one { grid-column: 4 / 5; grid-row: 5 / 6; }
.block-two { grid-column: 1 / 3; grid-row: 4 / 6; }
.block-three { grid-column: 5 / 6; grid-row: 5 / 6; }

@keyframes sharpen { 0% { opacity: 1; backdrop-filter: blur(22px) saturate(1.4); } 100% { opacity: .26; backdrop-filter: blur(2px) saturate(1.05); } }
@keyframes alignTiles { to { transform: translateY(0); } }
@keyframes leafPass { to { transform: translateX(9vw) rotate(12deg) scale(1.08); } }
@keyframes pollenRise { to { background-position: 0 -240px, 0 -210px; } }
@keyframes routeTrace { to { stroke-dashoffset: -184; } }
@keyframes bubbleRise { 0%,100% { transform: translateY(18px); } 50% { transform: translateY(-22px); } }
@keyframes lampPulse { to { filter: brightness(1.4); transform: translateY(-8px); } }
@keyframes ripple { from { transform: scale(.78); opacity: .75; } to { transform: scale(1.35); opacity: 0; } }

@media (max-width: 920px) {
  .modular-grid, .modular-grid.eight, .market-board, .signal-scene { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); }
  .vertical-sign, .canopy-tile, .pond-tile, .moss-patch, .transit-stop, .canal-strip, .leaf-bed,
  .text-hub, .tube-one, .tube-two, .stop-a, .stop-b, .stop-c, .bubble-stack,
  .market-sign, .sprout, .algae, .dew, .root, .skybridge,
  .lagoon-title, .reflection, .lagoon-pool, .block-one, .block-two, .block-three { grid-column: auto; grid-row: auto; }
  .vertical-sign { min-height: 320px; grid-column: 1 / 3; }
  .vertical-sign span { writing-mode: horizontal-tb; font-size: clamp(5rem, 19vw, 9rem); }
  .canopy-tile, .text-hub, .market-sign, .signal-copy, .lagoon-title { grid-column: 1 / 3; }
  .signal-scene { display: block; }
  .neon-pylon { min-height: 360px; margin-bottom: 18px; }
  .lamp-row { display: none; }
}