/* ============================================================
   TAPFLASH | WHAT WE OFFER
   Page-specific visual system. Shared navigation/footer live in styles.css.
   ============================================================ */

body { overflow-x: hidden; }
.offer-hero { position: relative; overflow: hidden; padding: 104px 0 92px; background: #f8fafc; }
.offer-hero::before { content: ''; position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(rgba(37,99,235,.2) .7px, transparent .7px); background-size: 18px 18px; mask-image: linear-gradient(to right, black, transparent 48%); }
.offer-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.offer-orb--blue { width: 420px; height: 420px; background: rgba(37,99,235,.08); top: -230px; right: 13%; }
.offer-orb--green { width: 260px; height: 260px; background: rgba(34,197,94,.1); bottom: -155px; left: 6%; }
.offer-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr); gap: 70px; align-items: center; }
.offer-hero-copy h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.03; max-width: 690px; margin-bottom: 24px; color: var(--navy); }
.offer-hero-copy .accent { color: var(--blue); position: relative; white-space: nowrap; }
.offer-hero-copy .accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 4px; border-radius: 4px; background: var(--green); transform: scaleX(0); transform-origin: left; animation: drawLine .8s .6s forwards cubic-bezier(.2,.7,.2,1); }
.offer-hero-copy .hero-sub { max-width: 600px; font-size: 18px; line-height: 1.7; }
.offer-hero-copy .btn svg, .text-link svg, .cta-actions .btn svg { width: 17px; height: 17px; }
.hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.trust-avatars { display: flex; }
.trust-avatars span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -7px; border: 3px solid white; border-radius: 50%; color: white; font: 700 11px 'Manrope'; background: var(--navy); }
.trust-avatars span:first-child { margin-left: 0; background: var(--blue); }
.trust-avatars span:last-child { background: var(--green); }
.hero-trust p { color: var(--text); font-size: 12px; line-height: 1.4; }
.hero-trust strong { color: var(--navy); font-size: 13px; }

/* Product preview */
.platform-preview { position: relative; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; color: white; background: #0b1324; box-shadow: 0 42px 90px rgba(15,23,42,.22), 0 0 0 8px rgba(255,255,255,.7); animation: previewIn .8s .2s both cubic-bezier(.2,.8,.2,1); }
.preview-topbar { display: flex; justify-content: space-between; align-items: center; padding: 5px 5px 16px; }
.preview-brand { display: flex; align-items: center; gap: 9px; font: 700 12px 'Manrope'; }
.preview-brand-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: white; background: var(--blue); }
.live-pill { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(34,197,94,.2); border-radius: 999px; color: #a7f3d0; background: rgba(34,197,94,.08); font-size: 9px; }
.live-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.preview-body { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: #101b30; }
.preview-map { position: relative; height: 250px; overflow: hidden; background: #111e34; }
.map-grid { position: absolute; inset: -20%; transform: rotate(-7deg); background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; }
.map-road { position: absolute; background: rgba(148,163,184,.13); box-shadow: 0 0 0 5px rgba(148,163,184,.025); }
.map-road--one { top: 48%; left: -10%; width: 120%; height: 3px; transform: rotate(-9deg); }
.map-road--two { top: -20%; left: 58%; width: 3px; height: 140%; transform: rotate(13deg); }
.map-pin { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border: 5px solid rgba(34,197,94,.2); border-radius: 50%; color: white; background: var(--green); background-clip: padding-box; box-shadow: 0 8px 18px rgba(34,197,94,.25); }
.map-pin svg { width: 10px; height: 10px; stroke-width: 3; }
.map-pin--blue { border-color: rgba(37,99,235,.23); background-color: var(--blue); box-shadow: 0 8px 18px rgba(37,99,235,.3); }
.pin-one { top: 28%; left: 25%; }.pin-two { top: 39%; right: 27%; }.pin-three { bottom: 20%; left: 42%; }
.map-card { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(15,23,42,.82); backdrop-filter: blur(12px); box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.map-card-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--blue); background: white; }
.map-card-icon svg { width: 15px; }
.map-card strong, .map-card span { display: block; }.map-card strong { font-size: 10px; }.map-card span { margin-top: 2px; color: #94a3b8; font-size: 8px; }
.preview-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.07); }
.metric-card { min-height: 123px; padding: 17px; background: #101b30; }
.metric-head { display: flex; justify-content: space-between; align-items: center; color: #94a3b8; font-size: 10px; }
.metric-head svg { width: 14px; color: var(--blue); }.metric-card strong { display: block; margin: 9px 0; font: 800 25px 'Manrope'; }.metric-card strong span { color: #94a3b8; font-size: 13px; }
.metric-progress { overflow: hidden; height: 5px; border-radius: 9px; background: rgba(255,255,255,.07); }.metric-progress span { display: block; width: 96%; height: 100%; border-radius: inherit; background: var(--green); }
.metric-card small { display: flex; align-items: center; gap: 4px; color: #86efac; font-size: 9px; }.metric-card small svg { width: 11px; }
.floating-alert { position: absolute; right: -28px; bottom: 56px; display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 14px; color: var(--navy); background: rgba(255,255,255,.96); box-shadow: 0 18px 50px rgba(15,23,42,.16); animation: floatAlert 5s ease-in-out infinite; }
.floating-alert > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--green); background: rgba(34,197,94,.12); }.floating-alert svg { width: 15px; }.floating-alert strong, .floating-alert small { display: block; }.floating-alert strong { font-size: 10px; }.floating-alert small { margin-top: 2px; color: var(--text); font-size: 8px; }

/* Value strip */
.value-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: white; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-grid > div { display: flex; justify-content: center; align-items: center; gap: 11px; padding: 23px 14px; color: var(--text); font-size: 12px; }.value-grid > div + div { border-left: 1px solid var(--border); }.value-grid svg { width: 18px; color: var(--blue); }.value-grid strong { color: var(--navy); }

/* Capabilities */
.solutions-section { padding: 116px 0; }
.section-intro { display: grid; grid-template-columns: .85fr 1fr; gap: 80px; align-items: end; margin-bottom: 56px; }
.section-kicker { display: inline-block; margin-bottom: 14px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.section-intro h2, .flow-copy h2, .audience-heading h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; color: var(--navy); }
.section-intro p { max-width: 540px; padding-bottom: 4px; color: var(--text); font-size: 16px; line-height: 1.75; }
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.solution-card { position: relative; min-height: 460px; overflow: hidden; padding: 34px; border: 1px solid var(--border); border-radius: 28px; background: #f8fafc; transition: transform .25s ease, box-shadow .25s ease; }
.solution-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(15,23,42,.09); }
.solution-card--feature { background: white; }.solution-card--dark { color: white; background: var(--navy); border-color: var(--navy); }.solution-card--blue { color: white; background: var(--blue); border-color: var(--blue); }
.card-number { position: absolute; top: 26px; right: 30px; color: rgba(15,23,42,.08); font: 800 46px 'Manrope'; }.solution-card--dark .card-number, .solution-card--blue .card-number { color: rgba(255,255,255,.1); }
.solution-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 30px; border-radius: 14px; color: var(--blue); background: rgba(37,99,235,.1); }.solution-icon svg { width: 22px; }.solution-icon--green { color: var(--green); background: rgba(34,197,94,.12); }.solution-icon--light { color: white; background: rgba(255,255,255,.15); }
.card-label { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.solution-card--dark .card-label { color: #86efac; }.solution-card--blue .card-label { color: rgba(255,255,255,.75); }
.solution-card h3 { max-width: 430px; margin: 8px 0 12px; font-size: 25px; line-height: 1.2; }.solution-card p { max-width: 490px; color: var(--text); font-size: 14px; line-height: 1.7; }.solution-card--dark p, .solution-card--blue p { color: rgba(255,255,255,.67); }
.mini-location-ui, .chat-ui, .sensor-list, .chart-ui { margin-top: 28px; }
.mini-location-ui { display: grid; gap: 10px; }.location-search { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; color: #94a3b8; background: #f8fafc; font-size: 11px; }.location-search svg { width: 14px; }.location-result { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 20px rgba(15,23,42,.05); }.result-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: var(--green); background: rgba(34,197,94,.1); }.result-icon svg { width: 15px; }.location-result div { flex: 1; }.location-result strong, .location-result small { display: block; }.location-result strong { font-size: 11px; }.location-result small { margin-top: 3px; color: var(--text); font-size: 9px; }.result-score { padding: 4px 7px; border-radius: 7px; color: #15803d; background: #dcfce7; font-size: 9px; font-weight: 700; }
.chat-ui { display: flex; flex-direction: column; gap: 9px; }.chat-bubble { width: fit-content; max-width: 84%; padding: 11px 13px; border-radius: 13px; color: #cbd5e1; background: rgba(255,255,255,.07); font-size: 10px; line-height: 1.5; }.chat-bubble--user { align-self: flex-end; color: white; background: var(--blue); border-bottom-right-radius: 4px; }.chat-bubble--bot { display: flex; align-items: flex-start; gap: 8px; border-bottom-left-radius: 4px; }.chat-bubble--bot span { color: var(--green); }.chat-bubble--bot svg { width: 13px; }
.sensor-list { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: white; }.sensor-list > div { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 10px; }.sensor-list > div + div { border-top: 1px solid var(--border); }.sensor-list span { display: flex; align-items: center; gap: 8px; color: var(--text); }.sensor-list svg { width: 13px; color: var(--blue); }.sensor-list strong { font-size: 10px; }.sensor-list .status-good { color: #16a34a; }
.chart-ui { padding: 14px 16px 0; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(255,255,255,.08); }.chart-head { display: flex; justify-content: space-between; font-size: 10px; }.chart-head span { color: rgba(255,255,255,.7); }.chart-head strong { color: #bbf7d0; }.bars { display: flex; align-items: flex-end; gap: 9px; height: 80px; margin-top: 13px; }.bars span { flex: 1; min-width: 7px; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.75); }.bars span:nth-child(2n) { background: var(--green); }

/* Closed-loop flow */
.flow-section { padding: 110px 0; color: white; background: #0b1324; }
.flow-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: center; }
.section-kicker--green { color: var(--green); }.flow-copy h2 { color: white; }.flow-copy > p { max-width: 460px; margin: 20px 0 28px; color: #94a3b8; line-height: 1.75; }.text-link { display: inline-flex; align-items: center; gap: 7px; color: white; font-size: 13px; font-weight: 700; }.text-link svg { color: var(--green); }
.flow-steps { position: relative; }.flow-steps::before { content: ''; position: absolute; top: 51px; bottom: 51px; left: 67px; width: 1px; background: linear-gradient(var(--blue), var(--green)); }
.flow-step { position: relative; display: grid; grid-template-columns: 28px 48px 1fr; gap: 18px; align-items: start; padding: 21px 0; }.flow-step > span { padding-top: 14px; color: #64748b; font: 700 9px 'Manrope'; }.flow-step-icon { z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: var(--green); background: #121e33; }.flow-step-icon svg { width: 19px; }.flow-step strong { display: block; margin: 4px 0 5px; font: 700 15px 'Manrope'; }.flow-step p { color: #94a3b8; font-size: 12px; line-height: 1.6; }

/* Stakeholders */
.audience-section { padding: 116px 0; background: #f8fafc; }.audience-heading { max-width: 690px; margin-bottom: 50px; }.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.audience-grid article { padding: 28px; border: 1px solid var(--border); border-radius: 22px; background: white; transition: transform .25s ease, border-color .25s ease; }.audience-grid article:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.35); }.audience-top { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; color: var(--blue); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }.audience-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(37,99,235,.09); }.audience-icon svg { width: 16px; }.audience-grid h3 { font-size: 21px; line-height: 1.25; }.audience-grid p { min-height: 78px; margin: 12px 0 24px; color: var(--text); font-size: 13px; line-height: 1.7; }.audience-grid ul { display: grid; gap: 9px; padding-top: 18px; border-top: 1px solid var(--border); list-style: none; }.audience-grid li { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 11px; }.audience-grid li svg { width: 13px; color: var(--green); stroke-width: 3; }

/* CTA */
.offer-cta-section { padding: 0 0 110px; background: #f8fafc; }.offer-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: end; padding: 60px; border-radius: 32px; color: white; background: var(--blue); box-shadow: 0 24px 60px rgba(37,99,235,.18); }.cta-pattern { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, transparent, black); }.cta-copy, .cta-actions { position: relative; z-index: 1; }.cta-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 17px; color: #dcfce7; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }.cta-kicker svg { width: 14px; }.offer-cta h2 { max-width: 690px; color: white; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }.offer-cta p { max-width: 650px; margin-top: 16px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }.offer-cta .cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }.offer-cta .btn { justify-content: center; }.cta-primary { color: var(--navy); background: white; }.cta-secondary { color: white; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }

/* Reveal and motion */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1); }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal-group] > * { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
[data-reveal-group].revealed > * { opacity: 1; transform: none; }
[data-reveal-group].revealed > *:nth-child(2) { transition-delay: .08s; }[data-reveal-group].revealed > *:nth-child(3) { transition-delay: .16s; }[data-reveal-group].revealed > *:nth-child(4) { transition-delay: .24s; }
@keyframes drawLine { to { transform: scaleX(1); } } @keyframes previewIn { from { opacity: 0; transform: translateY(24px) rotate(1deg); } to { opacity: 1; transform: none; } } @keyframes floatAlert { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Responsive */
@media (max-width: 1020px) {
  .offer-hero-grid { grid-template-columns: 1fr; gap: 58px; }.offer-hero-copy { max-width: 730px; }.platform-preview { max-width: 650px; }.flow-layout { gap: 50px; }.offer-cta { grid-template-columns: 1fr; }.offer-cta .cta-actions { flex-direction: row; justify-content: flex-start; }
}
@media (max-width: 820px) {
  .offer-hero { padding: 82px 0 72px; }.section-intro, .flow-layout { grid-template-columns: 1fr; gap: 28px; }.solution-grid { grid-template-columns: 1fr; }.audience-grid { grid-template-columns: 1fr; }.audience-grid p { min-height: 0; }.value-grid { grid-template-columns: 1fr 1fr; }.value-grid > div:nth-child(3) { border-left: 0; }.value-grid > div:nth-child(n+3) { border-top: 1px solid var(--border); }.flow-copy { max-width: 620px; }
}
@media (max-width: 600px) {
  .offer-hero { padding-top: 68px; }.offer-hero-copy h1 { font-size: 39px; }.offer-hero-copy .accent { white-space: normal; }.offer-hero-copy .hero-sub { font-size: 16px; }.hero-ctas { flex-direction: column; align-items: stretch; }.hero-ctas .btn { justify-content: center; }.platform-preview { padding: 9px; border-radius: 22px; }.preview-map { height: 210px; }.floating-alert { right: 8px; bottom: -30px; }.preview-metrics { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 110px; padding: 13px; }.metric-card strong { font-size: 20px; }.value-strip { padding-top: 30px; }.value-grid { grid-template-columns: 1fr; }.value-grid > div { justify-content: flex-start; }.value-grid > div + div, .value-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }.solutions-section, .flow-section, .audience-section { padding: 84px 0; }.section-intro { margin-bottom: 38px; }.solution-card { min-height: auto; padding: 26px; }.offer-cta { padding: 38px 26px; }.offer-cta .cta-actions { flex-direction: column; }.offer-cta-section { padding-bottom: 80px; }.flow-steps::before { left: 59px; }.flow-step { grid-template-columns: 24px 42px 1fr; gap: 14px; }.flow-step-icon { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* Hero phone mockup */
.phone-stage { position: relative; min-height: 610px; display: flex; align-items: center; justify-content: flex-end; padding-left: 0; transform: translateX(50px); animation: previewIn .8s .2s both cubic-bezier(.2,.8,.2,1); }
.phone-glow { position: absolute; border-radius: 50%; filter: blur(54px); pointer-events: none; }
.phone-glow--blue { width: 310px; height: 310px; left: -25px; top: 54px; background: rgba(37,99,235,.2); }
.phone-glow--green { width: 250px; height: 250px; left: 190px; bottom: 28px; background: rgba(34,197,94,.18); }
.offer-phone-image-wrap { position: relative; z-index: 2; width: min(100%, 310px); margin: 0; animation: phoneImageFloat 7s ease-in-out infinite; }
.offer-phone-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 38px 34px rgba(15,23,42,.3)); }
@keyframes phoneImageFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.offer-phone { position: relative; z-index: 2; width: 310px; padding: 12px; border: 2px solid rgba(255,255,255,.12); border-radius: 49px; background: #070d18; box-shadow: 0 45px 90px rgba(15,23,42,.34), inset 0 1px 0 rgba(255,255,255,.12); }
.phone-hardware { position: absolute; z-index: 4; top: 19px; left: 50%; display: flex; align-items: center; justify-content: center; gap: 6px; width: 92px; height: 23px; border-radius: 20px; background: #070d18; transform: translateX(-50%); }
.phone-speaker { width: 35px; height: 4px; border-radius: 9px; background: #192235; }.phone-camera { width: 6px; height: 6px; border-radius: 50%; background: #172e58; box-shadow: inset 0 0 0 1px #234276; }
.offer-phone-screen { overflow: hidden; min-height: 580px; border-radius: 38px; background: #f8fafc; }
.mobile-statusbar { display: flex; align-items: center; justify-content: space-between; height: 37px; padding: 7px 21px 0; color: var(--navy); font-size: 9px; font-weight: 700; }.mobile-statusbar div { display: flex; align-items: center; gap: 4px; }.mobile-statusbar svg { width: 10px; height: 10px; }
.mobile-appbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 12px; background: white; border-bottom: 1px solid var(--border); }.mobile-brand { display: flex; align-items: center; gap: 9px; }.mobile-brand > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: white; background: var(--blue); font: 800 13px 'Manrope'; }.mobile-brand strong, .mobile-brand small { display: block; }.mobile-brand strong { font: 800 11px 'Manrope'; }.mobile-brand small { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #64748b; font-size: 7px; }.mobile-brand small svg { width: 5px; height: 5px; color: var(--green); fill: var(--green); }.mobile-appbar button { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 9px; color: var(--navy); background: white; }.mobile-appbar button svg { width: 13px; }.mobile-appbar button span { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: var(--green); }
.mobile-map { position: relative; height: 178px; overflow: hidden; background: #122039; }.mobile-map .map-grid { transform: rotate(-6deg); }.mobile-map .map-road--one { top: 48%; }.mobile-map .map-road--two { left: 62%; }.mobile-map .map-pin { width: 22px; height: 22px; border-width: 4px; }.mobile-map .pin-one { top: 27%; left: 18%; }.mobile-map .pin-two { top: 38%; right: 20%; }.mobile-map .pin-three { bottom: 16%; left: 44%; }.you-are-here { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; color: white; background: rgba(15,23,42,.78); backdrop-filter: blur(8px); font-size: 7px; font-weight: 600; }.you-are-here span { width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.35); }
.mobile-sheet { position: relative; z-index: 2; margin-top: -11px; padding: 9px 15px 14px; border-radius: 15px 15px 0 0; background: white; box-shadow: 0 -8px 22px rgba(15,23,42,.08); }.sheet-handle { width: 31px; height: 3px; margin: 0 auto 11px; border-radius: 9px; background: #dbe2ea; }.sheet-title, .sheet-title > div { display: flex; align-items: center; }.sheet-title { justify-content: space-between; gap: 8px; }.sheet-title > div { gap: 8px; }.sheet-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--blue); background: rgba(37,99,235,.09); }.sheet-icon svg { width: 13px; }.sheet-title strong, .sheet-title small { display: block; }.sheet-title strong { font-size: 10px; }.sheet-title small { margin-top: 2px; color: #64748b; font-size: 7px; }.verified-badge { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 99px; color: #15803d; background: #dcfce7; font-size: 6px; font-weight: 700; }.verified-badge svg { width: 8px; }
.facility-tags { display: flex; gap: 5px; margin: 11px 0; }.facility-tags span { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 99px; color: #475569; background: #f8fafc; font-size: 6px; font-weight: 600; }.facility-tags svg { width: 8px; }.facility-health { padding: 9px 10px; border-radius: 10px; background: #f8fafc; }.facility-health > div:first-child { display: flex; justify-content: space-between; color: #64748b; font-size: 7px; }.facility-health strong { color: #16a34a; }.health-track { overflow: hidden; height: 4px; margin-top: 6px; border-radius: 10px; background: #e2e8f0; }.health-track span { display: block; width: 96%; height: 100%; border-radius: inherit; background: var(--green); }.direction-button { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px; border: 0; border-radius: 9px; color: white; background: var(--blue); font: 700 8px 'Inter'; }.direction-button svg { width: 10px; }
.mobile-tabbar { display: grid; grid-template-columns: repeat(3,1fr); padding: 9px 12px 11px; border-top: 1px solid var(--border); background: white; }.mobile-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #94a3b8; font-size: 6px; }.mobile-tabbar svg { width: 13px; height: 13px; }.mobile-tabbar .active { color: var(--blue); font-weight: 700; }
.phone-stage .floating-alert { right: 3px; bottom: 100px; z-index: 3; }

@media (min-width: 1021px) {
  .offer-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr); gap: 24px; }
}
@media (max-width: 1020px) {
  .phone-stage { max-width: 600px; justify-content: center; transform: none; padding-left: 0; }
}
@media (max-width: 600px) {
  .phone-stage { min-height: 590px; padding-left: 0; justify-content: center; }.offer-phone-image-wrap { width: min(76vw, 280px); }.phone-glow--blue { left: 0; }.phone-glow--green { left: 100px; }
}

/* Application showcase */
.app-showcase { overflow: hidden; padding: 116px 0; border-top: 1px solid var(--border); background: #f8fafc; }
.app-showcase-heading { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; align-items: end; margin-bottom: 62px; }
.app-showcase-heading h2 { max-width: 690px; color: var(--navy); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
.app-showcase-heading > p { max-width: 540px; color: var(--text); font-size: 15px; line-height: 1.75; }
.app-screen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.app-screen-card { min-width: 0; }
.app-screen-card--raised, .app-screen-grid.revealed .app-screen-card--raised { transform: translateY(-24px); }
.demo-phone { position: relative; width: min(100%, 286px); margin: 0 auto; padding: 9px; border: 1px solid #273247; border-radius: 42px; background: #080f1c; box-shadow: 0 28px 55px rgba(15,23,42,.2), inset 0 1px 0 rgba(255,255,255,.15); }
.demo-phone-speaker { position: absolute; z-index: 4; top: 17px; left: 50%; width: 75px; height: 20px; border-radius: 20px; background: #080f1c; transform: translateX(-50%); }
.demo-phone-screen { position: relative; overflow: hidden; height: 540px; border-radius: 34px; background: white; }
.demo-phone-screen button { font-family: 'Inter', sans-serif; cursor: default; }
.demo-status { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; height: 35px; padding: 8px 18px 0; color: var(--navy); font-size: 8px; }
.demo-status span { display: flex; gap: 4px; }.demo-status svg { width: 10px; height: 10px; }
.demo-status--dark { position: absolute; top: 0; right: 0; left: 0; color: white; }
.demo-app-head { display: grid; grid-template-columns: 34px 1fr 18px; gap: 9px; align-items: center; padding: 12px 16px; }
.demo-app-head > svg { width: 16px; color: #64748b; }.demo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; background: var(--blue); font: 800 12px 'Manrope'; }
.demo-app-head strong, .demo-app-head small { display: block; }.demo-app-head strong { font-size: 11px; }.demo-app-head small { margin-top: 2px; color: #94a3b8; font-size: 7px; }
.demo-search { display: flex; align-items: center; gap: 8px; margin: 1px 15px 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 10px; color: #94a3b8; background: #f8fafc; font-size: 8px; }.demo-search svg { width: 12px; }
.demo-map-area { position: relative; height: 365px; overflow: hidden; background-color: #e7edf4; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 34px 34px; }
.demo-road { position: absolute; background: white; box-shadow: 0 0 0 4px rgba(203,213,225,.45); }.demo-road-one { top: 45%; left: -15%; width: 130%; height: 4px; transform: rotate(-18deg); }.demo-road-two { top: -15%; left: 61%; width: 4px; height: 130%; transform: rotate(15deg); }
.demo-map-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border: 5px solid rgba(37,99,235,.18); border-radius: 50%; color: white; background: var(--blue); background-clip: padding-box; }.demo-map-pin svg { width: 10px; }.demo-map-pin.pin-a { top: 27%; left: 23%; }.demo-map-pin.pin-b { top: 51%; right: 18%; background-color: var(--green); border-color: rgba(34,197,94,.2); }
.demo-nearby { position: absolute; right: 13px; bottom: 15px; left: 13px; padding: 12px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(15,23,42,.12); }.demo-nearby strong, .demo-nearby small { display: block; }.demo-nearby strong { font-size: 9px; }.demo-nearby small { margin-top: 3px; color: #64748b; font-size: 7px; }
.demo-bottom-nav { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); padding: 9px 12px 11px; border-top: 1px solid var(--border); background: white; }.demo-bottom-nav span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #94a3b8; font-size: 6px; }.demo-bottom-nav svg { width: 13px; }.demo-bottom-nav .active { color: var(--blue); font-weight: 700; }
.demo-photo { position: relative; height: 190px; background: linear-gradient(145deg, #17253d, #254877 55%, #22c55e); }.demo-photo::after { content: ''; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.5) .7px, transparent .7px); background-size: 15px 15px; }.demo-photo button, .demo-photo > span { position: absolute; z-index: 2; top: 18px; }.demo-photo button { left: 15px; display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 50%; color: white; background: rgba(15,23,42,.62); }.demo-photo button svg { width: 13px; }.demo-photo > span { right: 13px; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 99px; color: #dcfce7; background: rgba(15,23,42,.68); font-size: 7px; font-weight: 700; }.demo-photo > span svg { width: 9px; }
.demo-detail-body { position: relative; margin-top: -16px; padding: 18px 17px; border-radius: 18px 18px 0 0; background: white; }.demo-open { color: #16a34a; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }.demo-detail-body h4, .demo-route-sheet h4 { margin-top: 6px; font-size: 17px; }.demo-detail-body > p, .demo-route-sheet > p { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: #64748b; font-size: 7px; }.demo-detail-body > p svg { width: 9px; }
.demo-rating { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; margin-top: 16px; padding: 11px; border-radius: 11px; background: #f8fafc; }.demo-rating strong { font-size: 16px; }.demo-rating span { color: #64748b; font-size: 7px; }.demo-rating svg { width: 14px; color: #f59e0b; fill: currentColor; }
.demo-amenities { display: flex; gap: 7px; margin-top: 10px; }.demo-amenities span { display: flex; align-items: center; gap: 4px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; color: #475569; font-size: 7px; }.demo-amenities svg { width: 10px; color: var(--blue); }
.demo-primary { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; margin-top: 17px; padding: 11px; border: 0; border-radius: 9px; color: white; background: var(--blue); font-size: 8px; font-weight: 700; }.demo-primary svg { width: 11px; }
.demo-route-map { position: relative; height: 310px; overflow: hidden; background-color: #173052; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 31px 31px; }.demo-route-map::before, .demo-route-map::after { content: ''; position: absolute; background: rgba(148,163,184,.13); }.demo-route-map::before { top: 47%; left: -10%; width: 120%; height: 4px; transform: rotate(-18deg); }.demo-route-map::after { top: -10%; left: 58%; width: 4px; height: 120%; transform: rotate(17deg); }.demo-route-map button { position: absolute; z-index: 3; top: 48px; left: 15px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: white; background: rgba(15,23,42,.7); }.demo-route-map button svg { width: 13px; }
.route-line { position: absolute; z-index: 2; top: 64px; left: 123px; width: 4px; height: 190px; border-radius: 10px; background: var(--blue); transform: rotate(24deg); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }.route-dot { position: absolute; z-index: 3; border-radius: 50%; }.route-start { left: 81px; bottom: 47px; width: 12px; height: 12px; border: 3px solid white; background: var(--blue); }.route-end { top: 49px; right: 70px; display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--green); box-shadow: 0 0 0 7px rgba(34,197,94,.18); }.route-end svg { width: 12px; }
.demo-route-sheet { position: relative; z-index: 4; min-height: 230px; margin-top: -19px; padding: 11px 17px 18px; border-radius: 19px 19px 0 0; background: white; }.demo-handle { display: block; width: 33px; height: 3px; margin: 0 auto 12px; border-radius: 8px; background: #dbe2ea; }.demo-route-sheet > small { color: var(--blue); font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }.demo-route-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }.demo-route-meta span { display: grid; grid-template-columns: 16px 1fr; align-items: center; padding: 9px; border-radius: 9px; color: #64748b; background: #f8fafc; font-size: 6px; }.demo-route-meta svg { grid-row: span 2; width: 12px; color: var(--blue); }.demo-route-meta strong { color: var(--navy); font-size: 8px; }
.app-screen-copy { display: grid; grid-template-columns: 32px 1fr; gap: 13px; max-width: 330px; margin: 25px auto 0; }.app-screen-copy > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--blue); background: rgba(37,99,235,.1); font: 800 9px 'Manrope'; }.app-screen-copy h3 { font-size: 16px; }.app-screen-copy p { margin-top: 6px; color: var(--text); font-size: 11px; line-height: 1.6; }
.demo-video-placeholder { position: relative; overflow: hidden; display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: center; max-width: 930px; margin: 80px auto 0; padding: 32px 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; color: white; background: #0b1324; box-shadow: 0 24px 55px rgba(15,23,42,.14); }.demo-video-pattern { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg, black, transparent); }.demo-video-placeholder > *:not(.demo-video-pattern) { position: relative; z-index: 1; }.demo-play { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: white; background: var(--blue); box-shadow: 0 0 0 10px rgba(37,99,235,.13); }.demo-play svg { width: 25px; fill: currentColor; }.demo-video-placeholder .section-kicker { margin-bottom: 7px; }.demo-video-placeholder h3 { font-size: 22px; }.demo-video-placeholder p { margin-top: 7px; color: #94a3b8; font-size: 12px; line-height: 1.6; }

@media (max-width: 1020px) {
  .app-screen-grid { gap: 16px; }.demo-phone { width: min(100%, 260px); }
}
@media (max-width: 820px) {
  .app-showcase-heading { grid-template-columns: 1fr; gap: 28px; }.app-screen-grid { display: flex; gap: 22px; overflow-x: auto; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding: 24px max(24px, calc((100vw - 720px) / 2)) 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }.app-screen-grid::-webkit-scrollbar { display: none; }.app-screen-card { flex: 0 0 290px; scroll-snap-align: center; }.app-screen-card--raised, .app-screen-grid.revealed .app-screen-card--raised { transform: none; }
}
@media (max-width: 600px) {
  .app-showcase { padding: 84px 0; }.app-showcase-heading { margin-bottom: 38px; }.app-screen-grid { padding-left: 20px; padding-right: 20px; }.app-screen-card { flex-basis: 278px; }.demo-video-placeholder { grid-template-columns: 1fr; justify-items: start; margin-top: 52px; padding: 29px 24px; }.demo-play { width: 58px; height: 58px; }
}

/* Real application screens and demos */
.app-gallery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: -38px 0 22px; }
.app-gallery-hint { display: flex; align-items: center; gap: 7px; color: #64748b; font-size: 11px; font-weight: 600; }
.app-gallery-hint svg { width: 15px; color: var(--blue); }
.app-gallery-controls { display: flex; gap: 9px; }
.app-gallery-button { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--navy); background: white; font: 700 11px 'Inter'; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.app-gallery-button svg { width: 14px; }
.app-gallery-button:hover:not(:disabled) { color: var(--blue); border-color: rgba(37,99,235,.35); transform: translateY(-1px); }
.app-gallery-button--next { color: white; border-color: var(--blue); background: var(--blue); }
.app-gallery-button--next:hover:not(:disabled) { color: white; border-color: #1d4ed8; background: #1d4ed8; }
.app-gallery-button:disabled { opacity: .4; cursor: not-allowed; }
.app-screen-grid { display: flex; gap: 70px; overflow-x: auto; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); padding: 18px max(24px, calc((100vw - 1180px) / 2)) 32px; scroll-padding-inline: max(24px, calc((100vw - 1180px) / 2)); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(37,99,235,.35) transparent; }
.app-screen-grid::after { content: ''; flex: 0 0 1px; }
.app-screen-card { flex: 0 0 282px; scroll-snap-align: start; }
.app-screen-card--raised, .app-screen-grid.revealed .app-screen-card--raised { transform: none; }
.app-screen-image { position: relative; overflow: hidden; margin: 0; border-radius: 38px; background: transparent; filter: drop-shadow(0 24px 22px rgba(15,23,42,.18)); transition: transform .28s ease, filter .28s ease; }
.app-screen-card:hover .app-screen-image { transform: translateY(-5px); filter: drop-shadow(0 30px 25px rgba(15,23,42,.24)); }
.app-screen-image img { display: block; width: 100%; height: auto; aspect-ratio: 1368 / 2828; object-fit: contain; }
.app-screen-copy { max-width: 282px; }
.demo-video-section { position: relative; overflow: hidden; margin-top: 78px; padding: 42px; border-radius: 28px; color: white; background: #0b1324; box-shadow: 0 28px 65px rgba(15,23,42,.16); }
.demo-video-section::before { content: ''; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.42) .7px, transparent .7px); background-size: 18px 18px; mask-image: linear-gradient(90deg, black, transparent 60%); pointer-events: none; }
.demo-video-heading, .demo-video-grid { position: relative; z-index: 1; }
.demo-video-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 28px; }
.demo-video-heading h3 { font-size: clamp(26px, 3vw, 36px); }
.demo-video-heading > p { max-width: 370px; color: #94a3b8; font-size: 13px; line-height: 1.65; }
.demo-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.demo-video-grid article { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #111d32; }
.demo-video-link { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #050a12; }
.demo-video-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; }
.demo-video-link:hover img { opacity: .82; transform: scale(1.025); }
.demo-video-play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: white !important; background: #ff0033; box-shadow: 0 12px 30px rgba(0,0,0,.35); transform: translate(-50%, -50%); transition: transform .25s ease, background .25s ease; }
.demo-video-link:hover .demo-video-play { background: #e6002e; transform: translate(-50%, -50%) scale(1.08); }
.demo-video-play svg { width: 25px; height: 25px; fill: currentColor; }
.demo-video-grid article > div { padding: 18px 20px 20px; }
.demo-video-grid article span { color: #86efac; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-video-grid article h4 { margin-top: 5px; color: white; font-size: 13px; line-height: 1.4; }

@media (max-width: 820px) {
  .app-gallery-toolbar { margin-top: -14px; }.app-screen-grid { gap: 60px; padding-left: 24px; padding-right: 24px; }.app-screen-card { flex-basis: 260px; }.app-screen-copy { max-width: 260px; }.demo-video-section { padding: 32px 26px; }.demo-video-heading { display: grid; gap: 10px; }
}
@media (max-width: 600px) {
  .app-gallery-toolbar { align-items: flex-end; }.app-gallery-hint { max-width: 160px; line-height: 1.45; }.app-gallery-button { width: 42px; min-height: 42px; justify-content: center; padding: 9px; }.app-gallery-button span { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }.app-screen-grid { gap: 54px; padding-left: 20px; padding-right: 20px; }.app-screen-card { flex-basis: min(76vw, 270px); }.app-screen-copy { max-width: 270px; }.demo-video-section { margin-top: 54px; padding: 28px 20px; border-radius: 22px; }.demo-video-grid { grid-template-columns: 1fr; gap: 20px; }.demo-video-play { width: 54px; height: 54px; }
}