:root {
  --brand-blue: #2196f3;
  --brand-blue-dark: #1565c0;
  --brand-gold: #ff9c07;
  --brand-ink: #121926;
  --brand-sage: #485641;
  --brand-mist: #f4f8fb;
  --brand-border: rgba(148, 163, 184, 0.18);
}
html { scroll-behavior: smooth; }
body { font-family: "Poppins", "Segoe UI", sans-serif; }
.page-noise { background-image: radial-gradient(circle at 25% 25%, rgba(255,156,7,.12), transparent 20%), radial-gradient(circle at 75% 20%, rgba(33,150,243,.12), transparent 22%), radial-gradient(circle at 80% 80%, rgba(72,86,65,.08), transparent 18%); }
.hero-orb { position: absolute; border-radius: 9999px; filter: blur(18px); opacity: .55; }
.hero-orb-one { right: 5%; top: 4rem; height: 16rem; width: 16rem; background: radial-gradient(circle, rgba(33,150,243,.34), transparent 70%); }
.hero-orb-two { left: -3rem; top: 12rem; height: 12rem; width: 12rem; background: radial-gradient(circle, rgba(255,156,7,.25), transparent 72%); }
.nav-link, .footer-link { color: #475569; transition: color .25s ease, transform .25s ease; }
.nav-link:hover, .footer-link:hover { color: var(--brand-blue); }
.mobile-link { padding: .75rem 0; color: #334155; font-weight: 600; }
.stat-card, .feature-card, .about-panel, .faq-item, .store-link, .glass-strip, .download-panel { border: 1px solid var(--brand-border); }
.stat-card { border-radius: 1.5rem; background: rgba(255,255,255,.85); padding: 1.25rem; box-shadow: 0 18px 50px rgba(18,25,38,.06); backdrop-filter: blur(10px); }
.phone-frame { border-radius: 2.4rem; background: linear-gradient(145deg, #ffffff, #e7eef6); padding: 1rem; box-shadow: 0 26px 90px rgba(18,25,38,.16); }
.phone-screen { border-radius: 2rem; background: #e9f3fb; padding: .85rem; }
.listing-preview, .mini-card { border-radius: 1.5rem; padding: 1rem; }
.listing-preview.bg-white { color: var(--brand-ink); }
.listing-badge, .brand-pill, .icon-shell { display: inline-flex; align-items: center; gap: .55rem; border-radius: 9999px; }
.listing-badge { width: fit-content; padding: .55rem .8rem; font-size: .8rem; font-weight: 700; }
.feature-row { display: flex; align-items: center; gap: .75rem; }
.glass-strip { display: flex; flex-wrap: wrap; gap: .9rem; border-radius: 2rem; background: rgba(255,255,255,.78); padding: 1.25rem; box-shadow: 0 18px 50px rgba(18,25,38,.05); backdrop-filter: blur(10px); }
.brand-pill { background: #fff; padding: .75rem 1rem; font-size: .95rem; font-weight: 700; color: var(--brand-ink); }
.section-tag { display: inline-block; border-radius: 9999px; background: rgba(33,150,243,.09); padding: .45rem .85rem; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-blue); }
.section-tag-dark { background: rgba(255,255,255,.12); color: #f8fafc; }
.section-title { margin-top: 1rem; font-size: clamp(2rem, 2.8vw, 3.2rem); line-height: 1.1; font-weight: 900; color: var(--brand-ink); }
.section-copy { margin-top: 1rem; max-width: 48rem; color: #64748b; line-height: 1.9; }
.feature-card { border-radius: 1.75rem; background: rgba(255,255,255,.9); padding: 1.5rem; box-shadow: 0 16px 45px rgba(18,25,38,.06); transition: transform .3s ease, box-shadow .3s ease; }
.feature-card:hover, .category-card:hover, .faq-item:hover { transform: translateY(-6px); }
.feature-card h3, .category-card h3, .timeline-item h3, .step-card h3 { margin-top: 1rem; font-size: 1.15rem; font-weight: 800; color: var(--brand-ink); }
.feature-card p, .category-card p, .timeline-item p, .step-card p { margin-top: .7rem; color: #64748b; line-height: 1.8; }
.icon-shell { justify-content: center; height: 3.25rem; width: 3.25rem; font-size: 1.1rem; }
.timeline-item { display: flex; gap: 1rem; align-items: flex-start; }
.timeline-dot { margin-top: .35rem; height: .9rem; width: .9rem; flex-shrink: 0; border-radius: 9999px; background: linear-gradient(135deg, var(--brand-gold), var(--brand-blue)); }
.category-card { min-height: 15rem; border-radius: 1.9rem; padding: 1.75rem; color: #fff; box-shadow: 0 20px 60px rgba(18,25,38,.12); transition: transform .3s ease; }
.category-card i { font-size: 1.4rem; }
.category-card-blue { background: linear-gradient(145deg, #2196f3, #1565c0); }
.category-card-gold { background: linear-gradient(145deg, #ffb638, #ff9c07); }
.category-card-sage { background: linear-gradient(145deg, #5e7156, #485641); }
.category-card-ink { background: linear-gradient(145deg, #253146, #121926); }
.step-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; border-radius: 1.5rem; background: rgba(255,255,255,.07); padding: 1.15rem; }
.step-card span { display: inline-flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 9999px; background: white; color: var(--brand-ink); font-weight: 900; }
.about-panel { border-radius: 2rem; background: white; padding: 1.75rem; box-shadow: 0 20px 60px rgba(18,25,38,.06); }
.prose-shell { color: #475569; line-height: 1.95; }
.prose-shell h1, .prose-shell h2, .prose-shell h3, .prose-shell h4 { margin-top: 1.25rem; margin-bottom: .75rem; color: var(--brand-ink); font-weight: 800; }
.prose-shell p, .prose-shell ul, .prose-shell ol { margin-top: .9rem; }
.prose-shell ul, .prose-shell ol { padding-left: 1.2rem; }
.prose-shell a { color: var(--brand-blue); text-decoration: underline; }
.faq-item { border-radius: 1.5rem; background: #fff; padding: 1.2rem 1.35rem; box-shadow: 0 16px 45px rgba(18,25,38,.05); }
.faq-item summary { cursor: pointer; list-style: none; font-weight: 800; color: var(--brand-ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin-top: .85rem; color: #64748b; line-height: 1.8; }
.download-panel { display: grid; gap: 2rem; align-items: center; border-radius: 2rem; background: linear-gradient(135deg, rgba(33,150,243,.08), rgba(255,156,7,.1)); padding: 2rem; box-shadow: 0 20px 60px rgba(18,25,38,.06); }
.store-link { display: inline-flex; width: fit-content; align-items: center; justify-content: center; border-radius: 1rem; background: white; padding: .45rem .55rem; box-shadow: 0 12px 35px rgba(18,25,38,.08); transition: transform .25s ease; }
.store-link:hover { transform: translateY(-4px); }
.footer-title { font-size: .85rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: #94a3b8; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .download-panel { grid-template-columns: 1fr auto; padding: 2.5rem; } }