/* ---------- CTA band: a feel-good little city (replaces the polygon background) ----------
   The space is reserved in CSS (:has) so nothing shifts when marketing-city.js draws the scene. */
.gp-city-band { --city-h: clamp(236px, 25vw, 430px); }
section.polygons:has(h2) { --city-h: clamp(236px, 25vw, 430px); }
.gp-city-band, section.polygons:has(h2) {
    position: relative; overflow: hidden; isolation: isolate;
    background: linear-gradient(180deg, #ffffff 0%, #f5fafc 38%, #e8f4f8 100%) !important;
    padding-bottom: calc(var(--city-h) * .8) !important;
}
.gp-city-band > :not(.gp-city):not(.gp-city-sky) { position: relative; z-index: 1; }
.gp-city { position: absolute; left: 0; right: 0; bottom: 0; height: var(--city-h); z-index: 0; pointer-events: none; }
.gp-city-svg { display: block; width: 100%; height: 100%; }

.gp-city-note {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .97); white-space: nowrap; pointer-events: none;
    box-shadow: 0 10px 24px -10px rgba(12, 58, 65, .35), 0 0 0 1px rgba(15, 23, 42, .06);
    font: 500 12.5px/1 'Public Sans', system-ui, sans-serif; color: #334155;
    transform: translate(-50%, -100%); opacity: 0;
    animation: gpCityNote 3.8s cubic-bezier(.22, .7, .25, 1) forwards;
}
.gp-city-note i {
    display: flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 50%;
    background: #dcf5e6; color: #15803d; font-style: normal; font-weight: 700; font-size: 11px;
}
.gp-city-note b { font-weight: 700; color: #15803d; }
.gp-city-note.still { opacity: 1; animation: none; transform: translate(-50%, calc(-100% - 10px)); }
@keyframes gpCityNote {
    0% { opacity: 0; transform: translate(-50%, calc(-100% + 8px)) scale(.94); }
    14% { opacity: 1; transform: translate(-50%, calc(-100% - 6px)) scale(1); }
    72% { opacity: 1; transform: translate(-50%, calc(-100% - 26px)); }
    100% { opacity: 0; transform: translate(-50%, calc(-100% - 40px)); }
}
@media (max-width: 575px) {
    .gp-city-note { gap: 5px; padding: 4px 9px 4px 4px; font-size: 11px; }
    .gp-city-note i { width: 16px; height: 16px; font-size: 10px; }
}

/* The sky layer: sun beside the heading, clouds around it, a balloon rising on the left. */
.gp-city-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gp-city-sky.paused * { animation-play-state: paused !important; }
.gp-sky-sun { position: absolute; top: 34px; left: min(calc(50% + 400px), calc(100% - 150px)); width: 96px; height: 96px; }
.gp-sky-sun i { position: absolute; inset: -70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,231,166,.9), rgba(255,239,198,.45) 45%, rgba(255,246,224,0)); animation: gpSunGlow 8s ease-in-out infinite; }
.gp-sky-sun b { position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #ffe7a0, #ffd57a 70%); box-shadow: 0 0 0 7px rgba(255,224,143,.55); }
@keyframes gpSunGlow { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
.gp-sky-cloud { position: absolute; width: 150px; opacity: .95; animation: gpCloudDrift 70s ease-in-out infinite alternate; }
.gp-sky-cloud svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(14,116,144,.06)); }
.gp-sky-cloud.c1 { top: 26px; left: calc(50% - 640px); width: 170px; }
.gp-sky-cloud.c2 { top: 112px; left: calc(50% + 330px); width: 120px; animation-duration: 55s; animation-delay: -20s; }
.gp-sky-cloud.c3 { top: 150px; left: calc(50% - 520px); width: 110px; animation-duration: 62s; animation-delay: -35s; }
.gp-sky-cloud.c4 { top: 18px; left: calc(50% + 150px); width: 96px; opacity: .8; animation-duration: 80s; animation-delay: -10s; }
@keyframes gpCloudDrift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.gp-sky-balloon { position: absolute; left: calc(50% - 470px); bottom: 34%; width: 46px; animation: gpBalloonRise 46s linear infinite; animation-delay: -14s; }
.gp-sky-balloon > div { animation: gpBalloonBob 6s ease-in-out infinite alternate; }
.gp-sky-balloon svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(12,58,65,.12)); }
@keyframes gpBalloonRise {
    0% { transform: translate(0, 60px); opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translate(90px, -300px); opacity: 0; }
}
@keyframes gpBalloonBob { from { transform: translateX(-6px) rotate(-2deg); } to { transform: translateX(6px) rotate(2deg); } }
@media (max-width: 1100px) {
    .gp-sky-cloud.c1 { left: 2%; } .gp-sky-cloud.c3 { left: 4%; } .gp-sky-balloon { left: 7%; }
    .gp-sky-sun { left: auto; right: 40px; }
}
@media (max-width: 640px) {
    .gp-sky-sun { top: 10px; right: 10px; width: 64px; height: 64px; } .gp-sky-sun i { inset: -44px; } .gp-sky-sun b { inset: 15px; box-shadow: 0 0 0 5px rgba(255,224,143,.55); }
    .gp-sky-cloud.c2, .gp-sky-cloud.c4 { display: none; } .gp-sky-cloud.c1 { top: 8px; left: -30px; width: 110px; } .gp-sky-cloud.c3 { top: auto; bottom: 46%; left: auto; right: -20px; width: 90px; }
    .gp-sky-balloon { width: 30px; left: 3%; bottom: 40%; }
}
@media (prefers-reduced-motion: reduce) { .gp-city-sky * { animation: none !important; } .gp-sky-balloon { transform: translate(40px, -120px); } }