/* Chat2B home page, on top of Bootstrap 5.3 (self-hosted: the site's CSP allows only 'self').
   Brand: navy #29558d, olive #87b241 (logo #9CC757 → #63912A); badge colours from the app (src/theme/badges.ts).
   No inline styles anywhere (CSP). */
:root {
  --navy: #29558d; --navy-deep: #0d3a66; --olive: #87b241; --olive-deep: #63912a; --amber: #e0a52c;
  --ink: #14181f; --muted: #5b6472; --bg: #ffffff; --tint: #f4f7fb; --card: #ffffff; --line: #e4e9f0;
  --shadow: 0 10px 30px rgba(20, 40, 80, .08);
  /* Light theme only, even when the phone or PC is set to dark mode. "only" also stops browsers that darken
     pages by themselves (Chrome's dark theme for web pages, Samsung Internet's dark mode). */
  color-scheme: only light;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
/* Base text size fixed at 16px (not the browser's own setting, which can be 14px), and larger on big screens.
   Every size on the site is in rem, so all text grows with it; the smallest text (.875rem) stays at 14px or more. */
html { font-size: 16px; }
@media (min-width: 1400px) { html { font-size: 17px; } }
@media (min-width: 1800px) { html { font-size: 18px; } }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); overflow-x: hidden; }
a { color: var(--navy); }
/* Wider page on big screens (Bootstrap stops at 1320px). */
@media (min-width: 1400px) { .container { max-width: 1720px; } }
h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: 8px; background: var(--navy); color: #fff; }
.skip-link:focus { top: 12px; }

/* ---------- Loading screen ---------- */
.loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--bg); animation: loader-out .5s ease 1.1s forwards; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader-logo { border-radius: 22px; box-shadow: 0 12px 30px rgba(99, 145, 42, .35); animation: logo-pop 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
.loader-dots { display: flex; gap: 8px; }
.loader-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--navy); animation: dot 1s ease-in-out infinite; }
.loader-dots span:nth-child(2) { background: var(--olive); animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
@keyframes logo-pop { 0% { transform: scale(.6) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.06) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-7px); opacity: 1; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--navy); text-decoration: none; }
.brand img { border-radius: 9px; }
.nav-link-plain { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav-link-plain:hover { color: var(--navy); }
.btn-brand { background: var(--navy); border: 0; color: #fff; font-weight: 600; border-radius: 10px; }
.btn-brand:hover, .btn-brand:focus { background: var(--navy-deep); color: #fff; }
/* Header "Get the app": the logo's olive green (same as the download box), mostly the deep shade so white text stays readable. */
.site-header .btn-brand { --bs-btn-font-family: sans-serif; --bs-btn-font-size: 1rem; background: linear-gradient(135deg, var(--olive) 0%, var(--olive-deep) 70%); box-shadow: 0 4px 14px rgba(99, 145, 42, .3); }
.site-header .btn-brand:hover, .site-header .btn-brand:focus { background: linear-gradient(135deg, var(--olive-deep) 0%, #4f7521 100%); color: #fff; }
/* Desktop links, and the ☰ menu below 992px (a <details>: works without scripts, under the CSP). */
.nav-links { align-items: center; gap: 1.5rem; }
.nav-link-plain[aria-current="page"] { color: var(--navy); font-weight: 700; }
.nav-menu summary { list-style: none; display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-menu[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu[open] summary span:nth-child(2) { opacity: 0; }
.nav-menu[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 4px 16px 12px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.nav-menu-panel a { padding: 13px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-menu-panel a:last-child { border-bottom: 0; }
.nav-menu-panel a[aria-current="page"] { color: var(--navy); }
/* Phones and tablets (where the ☰ shows): a roomier button. */
@media (max-width: 991.98px) { .site-header .btn-brand { --bs-btn-padding-y: .6rem; border-radius: 12px; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } }
/* Smallest phones (about 320 to 375 px wide): the logo, "Get the app" and the menu stay on one line. */
.site-header .btn-brand { white-space: nowrap; }
@media (max-width: 375px) { .site-header .btn-brand { --bs-btn-font-size: .9rem; padding-left: .85rem !important; padding-right: .85rem !important; } .brand { font-size: 1.1rem; gap: 8px; } .brand img { width: 30px; height: 30px; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 80px; overflow: hidden; }
.hero-glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(135, 178, 65, .22), transparent 60%), radial-gradient(circle at 70% 60%, rgba(41, 85, 141, .2), transparent 60%);
  filter: blur(20px); pointer-events: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--olive-deep);
  background: rgba(135, 178, 65, .14); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero-title { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; margin-bottom: 18px; }
.text-gradient { background: linear-gradient(100deg, var(--navy) 10%, var(--olive) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--muted); max-width: 34rem; margin: 0 auto 28px; }
@media (min-width: 992px) { .hero-lead { margin-left: 0; } }
.hero-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; color: var(--muted); font-size: .92rem; }
@media (min-width: 992px) { .hero-points { justify-content: flex-start; } }
.hero-points li::before { content: "✓"; color: var(--olive); font-weight: 800; margin-right: 6px; }

/* ---------- Store buttons ---------- */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn { display: inline-flex; align-items: center; gap: 12px; min-width: 200px; padding: 10px 20px 10px 16px; border-radius: 14px; background: #0b0f17; color: #fff;
  text-decoration: none; border: 1px solid #0b0f17; transition: transform .2s ease, box-shadow .2s ease; }
.store-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 15, 23, .25); }
.store-btn span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn small { font-size: .875rem; letter-spacing: .02em; opacity: .85; }
.store-btn strong { font-size: 1.15rem; font-weight: 600; }
.store-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.store-btn-soon { background: transparent; color: var(--muted); border: 1.5px dashed var(--line); cursor: not-allowed; }
.store-btn-soon:hover { color: var(--muted); transform: none; box-shadow: none; }
.store-btn-light { background: #fff; color: #0b0f17; border-color: #fff; }
.store-btn-light:hover { color: #0b0f17; }
.store-btn-soon-light, .store-btn-soon-light:hover { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .5); }
@media (max-width: 400px) { .store-btn { width: 100%; justify-content: center; } }

/* ---------- App screenshots: the owner's own images, phone body included (see-through corners); no extra frame ----------
   Shown straight and still: tilting or animating an image makes the browser redraw it slightly blurred. */
.device { margin: 0; filter: drop-shadow(0 18px 32px rgba(13, 58, 102, .22)); }
.device img { display: block; width: 100%; height: auto; }
.phones { position: relative; max-width: 520px; height: 680px; margin: 0 auto; }
.phones .device { position: absolute; }
.device-front { right: 2%; top: 0; z-index: 2; width: 290px; }
.device-back { left: 0; top: 70px; z-index: 1; width: 260px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.device-solo { max-width: 330px; margin: 0 auto; }
@media (max-width: 575.98px) {
  .phones { height: 520px; max-width: 360px; }
  .device-front { width: 220px; right: 0; }
  .device-back { width: 195px; top: 56px; }
}

/* "You were tagged" / "Seen by Omar" cards beside the phones (images; hidden on small phones) */
.float-badge { position: absolute; z-index: 3; width: auto; height: 64px; filter: drop-shadow(0 10px 20px rgba(20, 40, 80, .14)); animation: float 7s ease-in-out infinite; }
.float-badge-a { top: 120px; right: 0; animation-delay: -2s; }
.float-badge-b { bottom: 40px; left: 0; animation-delay: -4s; }
@media (max-width: 575.98px) { .float-badge { display: none; } }

/* ---------- Sections ---------- */
.section { padding: 88px 0; }
.section-tint { background: var(--tint); }
.section-head { max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

.feature { height: 100%; padding: 28px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.feature h3 { font-size: 1.12rem; margin: 18px 0 8px; }
.feature p { color: var(--muted); margin: 0; font-size: 1rem; }
.feature-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; }
.feature-ico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-navy { background: linear-gradient(135deg, #3c6fae, var(--navy)); }
.ico-olive { background: linear-gradient(135deg, #9cc757, var(--olive-deep)); }
.ico-amber { background: linear-gradient(135deg, #f0c05a, #c98a12); }

/* Spotlights */
.spot-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; margin-bottom: 12px; }
.spot-lead { color: var(--muted); font-size: 1.08rem; margin-bottom: 22px; }
.spot-note { color: var(--muted); margin: 18px 0 0; }
.spot-note strong { color: var(--ink); }
.badge-list, .action-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.badge-list li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-weight: 500; }
.pill { display: inline-grid; place-items: center; min-width: 54px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .9rem; border: 1px solid; }
.pill-star { background: #e4f1d6; color: #29558d; border-color: #9cc757; }
.pill-tag { background: #fff2c4; color: #14181f; border-color: #f0c64a; }
.pill-unread { background: #f9dcdc; color: #9b2c2c; border-color: #e7a8a8; }
.action-list li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.act { display: inline-block; min-width: 140px; padding: 8px 14px; border-radius: 6px; font-weight: 700; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.act-fwd { background: #2c5f9e; color: #fff; }
.act-reply { background: #f5c400; color: #14181f; }
.act-seen { background: #f6d9dc; color: #9b2c2c; }
.action-list li > span:last-child { color: var(--muted); }

/* Steps */
.step { height: 100%; padding: 32px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.step h3 { font-size: 1.15rem; margin: 16px 0 8px; }
.step p { color: var(--muted); margin: 0; }
.step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 0 0 6px rgba(41, 85, 141, .12); }

/* Privacy */
.privacy-card { padding: clamp(28px, 5vw, 56px); border-radius: 26px; color: #fff; background: linear-gradient(135deg, var(--navy-deep), var(--navy) 60%, #3a6ea8); box-shadow: 0 20px 50px rgba(13, 58, 102, .25); }
.privacy-card h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; }
.privacy-card p { color: rgba(255, 255, 255, .85); font-size: 1.05rem; margin: 0; }
.eyebrow.eyebrow-light { color: #d4ecaa; background: rgba(255, 255, 255, .12); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-weight: 500; }
.check-list li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--olive); color: #fff; font-weight: 800; font-size: .875rem; }
.check-list-dark li { background: var(--card); border: 1px solid var(--line); }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 0 20px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 28px 18px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--navy); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); margin: 0 0 18px; }

/* Download */
.cta { text-align: center; padding: clamp(36px, 6vw, 64px) 20px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, var(--olive-deep), var(--olive)); }
.cta h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; margin: 18px 0 8px; }
.cta p { color: rgba(255, 255, 255, .92); margin-bottom: 26px; }
.cta-logo { border-radius: 18px; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); border: 3px solid rgba(255, 255, 255, .7); }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0 28px; border-top: 1px solid var(--line); background: var(--tint); }
.footer-h { font-size: .875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; font-weight: 700; }
.site-footer .col-6 a { display: block; color: var(--ink); text-decoration: none; margin-bottom: 8px; word-break: break-word; }
.site-footer .col-6 a:hover { color: var(--navy); }
.footer-note { color: var(--muted); margin: 12px 0 0; }
.footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; text-align: center; }

/* ---------- Reveal on scroll (only once home.js has run: content shows without JS) ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js-reveal .reveal.reveal-delay { transition-delay: .15s; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 767.98px) {
  .hero { padding: 44px 0 56px; }
  .section { padding: 64px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Phones: Bootstrap's widest gutter (g-5, 3rem) is wider than the page margin, so its rows stuck out 12px on
   each side. Half the gutter on small screens keeps every row inside the page. */
@media (max-width: 575.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }