/* Photo layout: watercolour photos with floating app cards (modern, slice-inspired) */

/* Clean modern backgrounds for subpage heroes and CTA (replace the painted village scene) */
.page-hero-visual {
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(196, 181, 253, 0.45), transparent 70%),
    radial-gradient(600px 300px at 0% 100%, rgba(249, 168, 212, 0.3), transparent 70%),
    #FAF5FF;
}

/* Home hero */
.photo-hero { padding: 56px 0 24px; background: radial-gradient(800px 380px at 85% 0%, rgba(196, 181, 253, 0.4), transparent 70%), #FAF5FF; }
.photo-hero-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: end; margin-bottom: 40px; }
.photo-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.photo-hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -1.5px; }

/* Full-width photo band with floating cards */
.photo-band { position: relative; border-radius: 36px; overflow: hidden; aspect-ratio: 16 / 7; min-height: 320px; box-shadow: 0 30px 70px rgba(46, 16, 101, 0.16); }
.photo-band .band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-wide { aspect-ratio: 16 / 7; }
.band-wide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 8, 50, 0.62) 0%, rgba(20, 8, 50, 0.25) 45%, transparent 70%); z-index: 1; }
.band-copy { position: absolute; z-index: 2; left: 48px; top: 50%; transform: translateY(-50%); max-width: 420px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.band-copy h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); }
.band-copy p { font-size: 18px; color: #F3EEFF; }
.band-copy .btn { align-self: flex-start; background: #fff; color: var(--ink); }

.ui-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 999px; padding: 12px 22px 12px 12px; box-shadow: 0 20px 40px rgba(17, 5, 48, 0.25); animation: float 6s ease-in-out infinite; }
.ui-card b { display: block; color: var(--ink); font-size: 16px; }
.ui-card small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.ui-card .chip-icon { width: 44px; height: 44px; border-radius: 50%; }
.ui-amt { margin-left: 12px; font-family: var(--font-head); font-weight: 400; font-size: 24px; color: var(--green); white-space: nowrap; }
.uc-left { left: 32px; bottom: 36px; }
.uc-right { right: 36px; top: 40%; animation-delay: -3s; }
.uc-match { right: 40px; bottom: 40px; }
.uc-badge { left: 24px; bottom: 24px; }
@media (max-width: 760px) {
  .photo-band, .band-wide { aspect-ratio: 4 / 5; }
  .ui-card { padding: 10px 16px 10px 10px; }
  .ui-card b { font-size: 14px; }
  .ui-card small { font-size: 12px; }
  .uc-left { left: 14px; right: 14px; bottom: 14px; }
  .uc-right { right: 14px; top: 16px; }
  .uc-match { left: 14px; right: 14px; bottom: 14px; }
  .band-copy { left: 22px; right: 22px; top: 28px; transform: none; }
  .band-wide::before { background: linear-gradient(180deg, rgba(20, 8, 50, 0.7) 0%, rgba(20, 8, 50, 0.2) 55%, transparent 80%); }
}

/* Photo tiles with UI overlays */
.photo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: center; }
.photo-tile { position: relative; border-radius: 36px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 24px 50px rgba(46, 16, 101, 0.14); }
.photo-tile.tall { aspect-ratio: 4 / 5.6; }
.photo-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.photo-tile:hover > img { transform: scale(1.05); }
.photo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17, 5, 48, 0.75) 100%); }
.photo-tile h3 { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; text-align: center; color: #fff; font-family: var(--font-head); font-weight: 400; font-size: 28px; line-height: 1.15; padding: 0 20px; }

.pill-ui { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); border-radius: 999px; padding: 10px 16px; box-shadow: 0 10px 24px rgba(17, 5, 48, 0.18); white-space: nowrap; }
.pill-ui .ico { color: var(--primary); }
.pill-ui b { color: var(--ink); font-size: 15px; }
.pill-ui em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 12px; color: var(--green); background: var(--mint); padding: 3px 9px; border-radius: 999px; }

/* Rolling pill stack (like a 3D drum) */
.pillstack { position: absolute; z-index: 2; left: 50%; top: 8%; width: 78%; height: 60%; transform: translateX(-50%); overflow: hidden; perspective: 600px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }
.pillstack-track { display: flex; flex-direction: column; gap: 12px; animation: roll 12s linear infinite; transform-origin: center; }
.pillstack-track .pill-ui { transform: rotateX(18deg) rotateZ(-6deg); }
@keyframes roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.list-ui { position: absolute; z-index: 2; left: 50%; top: 9%; width: 80%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; }
.js .list-ui .pill-ui { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms cubic-bezier(0.3, 1.4, 0.5, 1); }
.js .photo-tile.in .list-ui .pill-ui { opacity: 1; transform: none; }
.js .photo-tile.in .list-ui .pill-ui:nth-child(2) { transition-delay: 200ms; }
.js .photo-tile.in .list-ui .pill-ui:nth-child(3) { transition-delay: 400ms; }

.sos-ui { position: absolute; z-index: 2; left: 50%; top: 10%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 10px 20px 10px 10px; box-shadow: 0 14px 30px rgba(17, 5, 48, 0.25); white-space: nowrap; }
.sos-ui b { display: block; color: var(--ink); font-size: 15px; }
.sos-ui small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.sos-dot { position: relative; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F87171, #B91C1C); color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sos-dot::before, .sos-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, 0.5); animation: pulse 2.4s ease-out infinite; }
.sos-dot::after { animation-delay: -1.2s; }

/* Photo frames on subpages */
.hero-photo { position: relative; border-radius: 36px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px rgba(46, 16, 101, 0.16); max-width: 520px; width: 100%; justify-self: center; }
.hero-photo.wide { aspect-ratio: 4 / 3; max-width: none; }
.hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo .sos-ui { top: auto; bottom: 22px; }

/* PG owner band */
.owner-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0; border-radius: 36px; overflow: hidden; background: linear-gradient(160deg, #F1FBF5, #D3F2E1); box-shadow: 0 24px 50px rgba(20, 83, 45, 0.1); }
.owner-copy { padding: 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.owner-copy h2 { font-size: clamp(28px, 3.5vw, 40px); }
.owner-copy .btn { align-self: flex-start; }
.owner-photo { position: relative; min-height: 360px; }
.owner-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Final CTA over the rooftop photo */
.final-cta.photo-cta { background: linear-gradient(180deg, rgba(17, 5, 48, 0.25), rgba(17, 5, 48, 0.65)), url("assets/photos/scene-sunset.webp") center / cover no-repeat; padding: 140px 0; }
.final-cta.photo-cta h2 { color: #fff; }
.final-cta.photo-cta p { color: #F3EEFF; }
.final-cta.photo-cta .btn-light { background: #fff; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .pillstack-track, .ui-card, .sos-dot::before, .sos-dot::after { animation: none; }
  .js .list-ui .pill-ui { opacity: 1; transform: none; }
}
html, body { overflow-x: clip; }
.photo-tiles .photo-tile:first-child .pillstack { top: 44%; height: 36%; }

/* ===== Safety section v2: phone with live map ===== */
.safety-dark { padding: 112px 0; }
.safety-dark .safety-grid { align-items: center; gap: 64px; }
.safe-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 22px 28px; }
.safe-list li { display: flex; gap: 14px; align-items: flex-start; }
.safe-list h3 { color: #fff; font-size: 17px; margin-bottom: 4px; }
.safe-list p { color: #CFC6F2; font-size: 14.5px; line-height: 1.55; }
.safe-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.safe-ico .ico { width: 22px; height: 22px; }
.si-0 { background: rgba(248, 113, 113, 0.18); color: #FCA5A5; }
.si-1 { background: rgba(196, 181, 253, 0.18); color: #C4B5FD; }
.si-2 { background: rgba(249, 168, 212, 0.18); color: #F9A8D4; }
.si-3 { background: rgba(253, 224, 71, 0.16); color: #FDE68A; }
.si-4 { background: rgba(134, 239, 172, 0.16); color: #86EFAC; }
.si-5 { background: rgba(125, 211, 252, 0.16); color: #7DD3FC; }

.safe-stage { position: relative; border-radius: 40px; overflow: hidden; min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 56px 24px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35); }
.safe-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.safe-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 5, 47, 0.15), rgba(18, 5, 47, 0.55)); z-index: 1; }
.safe-phone { position: relative; z-index: 2; width: 290px; border-radius: 42px; background: #12052F; padding: 10px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); animation: float 7s ease-in-out infinite; }
.safe-screen { background: #fff; border-radius: 34px; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.safe-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); color: var(--ink); font-size: 17px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; font-weight: 800; color: #B91C1C; background: #FEE2E2; padding: 4px 10px; border-radius: 999px; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #EF4444; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.map-box { border-radius: 18px; overflow: hidden; border: 1px solid #E5E7EB; }
.map-svg { display: block; width: 100%; height: auto; }
.map-svg .route { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.sos-row { display: flex; align-items: center; gap: 12px; background: #FEF2F2; border-radius: 18px; padding: 10px; }
.sos-row b { display: block; color: #7F1D1D; font-size: 15px; }
.sos-row small { display: block; color: #991B1B; font-size: 12px; font-weight: 600; }
.sos-big { position: relative; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F87171, #B91C1C); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sos-big::before, .sos-big::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, 0.5); animation: pulse 2.4s ease-out infinite; }
.sos-big::after { animation-delay: -1.2s; }
.mini-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); background: #F5F3FF; border-radius: 14px; padding: 10px 12px; }
.mini-note .ico { width: 18px; height: 18px; color: var(--primary); }
.safe-stage .ui-card { z-index: 3; border-radius: 20px; }
.sc-a { left: 18px; top: 40px; }
.sc-b { right: 18px; bottom: 44px; animation-delay: -3s; }
@media (max-width: 900px) {
  .safe-stage { min-height: 560px; }
  .sc-a { left: 12px; right: 12px; top: 14px; }
  .sc-b { left: 12px; right: 12px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .safe-phone, .map-svg .route, .live-dot::before, .sos-big::before, .sos-big::after { animation: none; } }

/* ===== Launch pill: beacon + rotating cities ===== */
.launch-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 800; color: var(--ink);
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #7C3AED, #F472B6, #22C55E, #7C3AED) border-box;
  background-size: 100% 100%, 300% 100%; animation: pillborder 6s linear infinite;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.15); }
@keyframes pillborder { to { background-position: 0 0, 300% 0; } }
.beacon { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #22C55E; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.beacon::before, .beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22C55E; animation: beep 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.beacon::after { animation-delay: 1s; }
@keyframes beep { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } }
.city-rotator { display: inline-block; height: 1.35em; overflow: hidden; vertical-align: bottom; min-width: 9.6em; }
.city-track { display: flex; flex-direction: column; animation: cities 7.5s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.city-track span { height: 1.35em; line-height: 1.35em; background: linear-gradient(90deg, #7C3AED, #DB2777); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
@keyframes cities {
  0%, 26% { transform: translateY(0); }
  33%, 59% { transform: translateY(-1.35em); }
  66%, 92% { transform: translateY(-2.7em); }
  100% { transform: translateY(-4.05em); }
}
.lp-static { display: none; }
@media (max-width: 480px) { .launch-pill { font-size: 13.5px; } .city-rotator { min-width: 9em; } }
@media (prefers-reduced-motion: reduce) {
  .launch-pill { animation: none; }
  .beacon::before, .beacon::after { animation: none; opacity: 0; }
  .lp-anim { display: none; }
  .lp-static { display: inline; }
}
/* keep the phone visible under the top card */
.sc-a { top: 18px; }

/* ===== Hero band v3: app screens over the skyline ===== */
.hero-band { aspect-ratio: 16 / 7.4; }
.hero-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(46,16,101,0.18) 100%); z-index: 1; pointer-events: none; }
.hero-phones { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding-top: 6%; perspective: 1200px; }
.hp { width: 236px; border-radius: 38px; background: #12052F; padding: 9px; box-shadow: 0 40px 70px rgba(17, 5, 48, 0.35); flex-shrink: 0; }
.hp-screen { background: #fff; border-radius: 30px; padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; height: 470px; overflow: hidden; }
.hp-center { width: 262px; z-index: 2; animation: hpfloat 7s ease-in-out infinite; }
.hp-center .hp-screen { height: 520px; }
.hp-left { transform: translate(40px, 50px) rotate(-9deg); z-index: 1; animation: hpfloatL 8s ease-in-out infinite; }
.hp-right { transform: translate(-40px, 50px) rotate(9deg); z-index: 1; animation: hpfloatR 8s ease-in-out infinite -2s; }
@keyframes hpfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hpfloatL { 0%, 100% { transform: translate(40px, 50px) rotate(-9deg); } 50% { transform: translate(40px, 40px) rotate(-8deg); } }
@keyframes hpfloatR { 0%, 100% { transform: translate(-40px, 50px) rotate(9deg); } 50% { transform: translate(-40px, 40px) rotate(8deg); } }
.hp-title { font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.hp .vstep { padding: 8px; gap: 8px; border-radius: 12px; }
.hp .vstep .chip-icon { width: 32px; height: 32px; border-radius: 10px; }
.hp .vstep strong { font-size: 13px; }
.hp .vstep span { font-size: 11px; }
.hp .vstep .done { width: 20px; height: 20px; }
.hp .progress span { width: 100%; }
.hp-photo { height: 150px; border-radius: 16px; overflow: hidden; }
.hp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-name { color: var(--ink); font-size: 16px; }
.hp-meta { font-size: 12px; color: var(--muted); }
.hp .mini-check { font-size: 12px; }
.hp .mini-check span { opacity: 1 !important; transform: none !important; }
.hp-btn { margin-top: auto; background: var(--primary); color: #fff; text-align: center; border-radius: 999px; padding: 11px; font-weight: 800; font-size: 14px; }
.hp .match-row .avatar { width: 44px; height: 44px; }
.hp .match-row strong { font-size: 13px; }
.hp .p-ok { font-size: 11px; }
.hp .match-score { font-size: 20px; }
.hp .tagset span { font-size: 11px; padding: 4px 9px; opacity: 1 !important; transform: none !important; }
.hero-band .ui-card { z-index: 4; }
.hero-band .uc-left { left: 28px; bottom: 30px; }
.hero-band .uc-right { right: 28px; top: 36px; }
@media (max-width: 1100px) { .hp-left, .hp-right { display: none; } }
@media (max-width: 760px) {
  .hero-band { aspect-ratio: auto; min-height: 640px; }
  .hero-phones { padding-top: 90px; }
  .hp-center { width: 236px; }
  .hp-center .hp-screen { height: 470px; }
}
@media (prefers-reduced-motion: reduce) { .hp-center, .hp-left, .hp-right { animation: none; } }