/* Flomo Health website. Load after Bootstrap, brand/styles/fluo-tokens.css and brand/styles/fluo-bootstrap.css. */
:root { --brand: var(--fluo-action); --brand-soft: var(--fluo-mist); }

.bg-brand-soft { background: var(--fluo-mist); }
.bg-loops { background: var(--fluo-canvas) url("brand/patterns/fluo-loops.svg") center / cover no-repeat; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fluo-action); }
.fluo-icon { display: inline-block; flex: none; vertical-align: -.2em; }
.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 1100; padding: .5rem 1rem; border-radius: var(--fluo-radius-pill); background: var(--fluo-action); color: #fff !important; }

/* Navigation */
.site-nav { background: rgb(247 249 254 / .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--fluo-line); }
.company-logo { display: inline-flex; align-items: center; gap: .55rem; padding-block: 0; color: var(--fluo-ink) !important; text-decoration: none; }
.company-logo .fluo-mark { width: 62px; height: auto; margin: -6px -6px -6px -8px; overflow: visible; }
.fluo-mark .fluo-mark-spark, .fluo-mark .fluo-mark-trail { will-change: transform; }
.company-logo span { font-family: var(--fluo-display); font-size: 1.45rem; letter-spacing: -.02em; line-height: 1; }
.site-nav .navbar-toggler { color: var(--fluo-ink); }

/* Hero */
.hero { background: var(--fluo-mist) url("brand/patterns/fluo-loops.svg") center / cover no-repeat; border-bottom: 1px solid var(--fluo-line); }
.fluo-bootstrap .hero h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.06; }
.hero-tagline { font-size: 1.25rem; color: var(--fluo-ink); max-width: 30ch; }
.hero-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem; border-radius: var(--fluo-radius-pill); background: var(--fluo-surface); border: 1px solid var(--fluo-line); font-size: .875rem; font-weight: 600; color: var(--fluo-ink); }
.hero-photo { display: block; width: 100%; height: auto; border-radius: var(--fluo-radius-card); box-shadow: var(--fluo-shadow); }
.hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--fluo-navy); border-radius: var(--fluo-radius-card); box-shadow: var(--fluo-shadow); }

/* Meet Fluo – dark band */
.meet-fluo { color: var(--fluo-ink); background: var(--fluo-navy) url("brand/patterns/fluo-loops-dark.svg") center / cover no-repeat; }
.meet-fluo h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.8rem); }
.meet-fluo-logo { width: min(320px, 80%); height: auto; }
.meet-fluo-lead { font-size: 1.15rem; color: var(--fluo-muted); max-width: 36rem; }
.meet-fluo-muted { color: var(--fluo-muted); }
.feature-list li { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.feature-list li div { display: flex; flex-direction: column; }
.feature-list li span:not(.feature-icon) { color: var(--fluo-muted); font-size: .95rem; }
.feature-icon { flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgb(77 178 255 / .16); color: var(--fluo-blue); }
.meet-fluo .btn-light { color: var(--fluo-navy); background: #fff; border-color: #fff; }

/* Phone mock */
.mock-phone { max-width: 380px; background: #fff; color: #0B1F5C; border-radius: 32px; padding: 1.25rem 1.5rem 1.5rem; box-shadow: 0 30px 80px rgb(0 0 0 / .35); border: 1px solid #CAD4EC; }
.mock-phone-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid #E9EEF9; }
.mock-phone-bar img { width: 110px; height: auto; }
.ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#2045E8 calc(var(--p) * 1%), #E9EEF9 0); }
.ring span { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; }
.day-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #7484A5; margin-top: .25rem; display: grid; place-items: center; color: #fff; }
.day-dot.done { background: var(--fluo-brand-gradient); border-color: #2045E8; }
.mock-activity { display: flex; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid #CAD4EC; border-radius: 16px; margin-top: .6rem; }
.mock-activity.done { background: #E9EEF9; }
.mock-activity .tick { flex: 0 0 34px; height: 34px; border-radius: 50%; border: 2px solid #7484A5; display: grid; place-items: center; color: #fff; }
.mock-activity.done .tick { background: #2045E8; border-color: #2045E8; }

/* Steps, values and lists */
.step-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--fluo-mist); color: var(--fluo-action); display: grid; place-items: center; flex: none; }
.step-number { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fluo-muted); }
.step-card { transition: transform var(--fluo-motion-gentle), box-shadow var(--fluo-motion-gentle); }
.step-card:hover { transform: translateY(-2px); box-shadow: var(--fluo-shadow) !important; }
.value-card { background: var(--fluo-surface); border: 1px solid var(--fluo-line); }
.check-list li { padding-left: 2rem; position: relative; margin-bottom: .65rem; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--fluo-action); }
.check-list li::after { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; color: #fff; font-size: .75rem; font-weight: 700; }
.mt-n4 { margin-top: -1.5rem; }

/* CTA */
.cta { background: var(--fluo-brand-gradient); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: url("brand/patterns/fluo-loops-dark.svg") center / cover no-repeat; opacity: .18; mix-blend-mode: screen; }
.cta > * { position: relative; }
.cta h2 { color: #fff; }
.cta-mark { width: 120px; height: auto; }
.fluo-bootstrap .cta .btn-light { color: var(--fluo-gradient-start); background: #fff; border-color: #fff; }

/* Page banners and articles */
.page-banner { background: var(--fluo-mist) url("brand/patterns/fluo-loops.svg") right -12rem center / 56rem auto no-repeat; border-bottom: 1px solid var(--fluo-line); }
.article-card { overflow: hidden; transition: transform var(--fluo-motion-gentle), box-shadow var(--fluo-motion-gentle); }
.article-card:hover { transform: translateY(-2px); box-shadow: var(--fluo-shadow) !important; }
.article-card .card-img-top { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-card-placeholder { display: grid !important; place-items: center; background: var(--fluo-mist); }
.article-card-placeholder img { width: 40%; height: auto; }
.fluo-bootstrap a.article-link { color: var(--fluo-ink); text-decoration: none; }
.fluo-bootstrap a.article-link:hover { color: var(--fluo-action); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .85rem; color: var(--fluo-muted); }
.article-meta > * + *::before { content: "·"; margin-right: .9rem; }
.article-meta > .badge + *::before { content: none; }
.text-bg-primary-subtle { background: var(--fluo-mist) !important; color: var(--fluo-action) !important; font-weight: 600; }
.article-container { max-width: 820px; }
.article-body { font-size: 1.1rem; line-height: 1.7; }
.article-body h2 { font-size: 1.6rem; margin-top: 2.25rem; margin-bottom: .75rem; }
.article-body h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.75rem; }
.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body li { margin-bottom: .4rem; }
.article-body .small { font-size: .9rem; color: var(--fluo-muted); border-top: 1px solid var(--fluo-line); padding-top: 1rem; margin-top: 2rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--fluo-radius-card); }
.article-cta { background: var(--fluo-mist); border: 1px solid var(--fluo-line); }

/* Footer */
.site-footer { color: var(--fluo-ink); background: var(--fluo-navy) url("brand/patterns/fluo-loops-dark.svg") right -10rem bottom -6rem / 60rem auto no-repeat; margin-top: 0; }
.footer-logo { width: 220px; height: auto; }
.footer-tagline { font-family: var(--fluo-display); font-size: 1.25rem; color: #fff; }
.footer-heading { font-family: var(--fluo-body) !important; font-size: .8rem; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--fluo-blue); margin-bottom: .75rem; }
.footer-muted { color: var(--fluo-muted); }
.fluo-bootstrap .site-footer a { display: inline-block; padding-block: .4rem; color: var(--fluo-ink); text-decoration: none; }
.fluo-bootstrap .site-footer a:hover { color: var(--fluo-blue); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Call-to-action buttons: leading icon chip, trailing arrow, Action Blue gradient and a gentle lift. */
.fluo-bootstrap .btn.btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .5rem 1.35rem .5rem .5rem; font-weight: 700; letter-spacing: .005em; transition: transform var(--fluo-motion-quick), box-shadow var(--fluo-motion-gentle), background-position var(--fluo-motion-gentle), color var(--fluo-motion-quick); }
.fluo-bootstrap .btn.btn-cta:not(:has(.btn-icon)) { padding-left: 1.35rem; }
.fluo-bootstrap .btn.btn-cta.btn-lg { padding: .55rem 1.6rem .55rem .55rem; font-size: 1.1rem; }
.fluo-bootstrap .btn.btn-cta.btn-cta-sm { min-height: 2.5rem; padding: .3rem 1rem .3rem .3rem; font-size: .925rem; }
.fluo-bootstrap .btn.btn-cta:hover { transform: translateY(-1px); }
.fluo-bootstrap .btn.btn-cta:active { transform: translateY(0); }
.btn-cta .btn-icon { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; transition: transform var(--fluo-motion-gentle); }
.btn-cta.btn-lg .btn-icon { width: 2.5rem; height: 2.5rem; }
.btn-cta.btn-cta-sm .btn-icon { width: 1.85rem; height: 1.85rem; }
.btn-cta:hover .btn-icon { transform: rotate(-8deg) scale(1.06); }
.btn-cta .btn-arrow { transition: transform var(--fluo-motion-gentle); }
.btn-cta:hover .btn-arrow { transform: translateX(3px); }
.btn-cta:hover .btn-arrow-back, .btn-cta .btn-arrow-back { transform: scaleX(-1); }

/* Primary: Action Blue deepening to Midnight on hover, with a soft blue glow. Text stays at ≥4.5:1 on every stop. */
.fluo-bootstrap .btn-primary.btn-cta { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1937BD 0%, #2045E8 45%, #2F6BF0 100%) 0 0 / 160% 100%; box-shadow: 0 6px 18px rgb(32 69 232 / .28), inset 0 1px 0 rgb(255 255 255 / .18); }
.fluo-bootstrap .btn-primary.btn-cta:hover { color: #fff; background-position: 100% 0; box-shadow: 0 10px 26px rgb(32 69 232 / .36), inset 0 1px 0 rgb(255 255 255 / .22); }
.btn-primary.btn-cta .btn-icon { background: rgb(255 255 255 / .18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }

/* Outline: white surface, icon chip in Mist; fills softly instead of inverting. */
.fluo-bootstrap .btn-outline-primary.btn-cta { color: var(--fluo-action); background: var(--fluo-surface); border: 1.5px solid var(--fluo-line); box-shadow: 0 2px 8px rgb(10 18 48 / .05); }
.fluo-bootstrap .btn-outline-primary.btn-cta:hover { color: var(--fluo-action); background: var(--fluo-mist); border-color: var(--fluo-action); box-shadow: 0 8px 20px rgb(10 18 48 / .08); }
.btn-outline-primary.btn-cta .btn-icon { background: var(--fluo-mist); color: var(--fluo-action); }
.btn-outline-primary.btn-cta:hover .btn-icon { background: var(--fluo-brand-gradient); color: #fff; }

/* Light: for dark and gradient surfaces; the icon chip carries the brand gradient. */
.fluo-bootstrap .btn-light.btn-cta { color: var(--fluo-navy); background: #fff; border-color: #fff; box-shadow: 0 8px 22px rgb(0 0 0 / .22); }
.fluo-bootstrap .btn-light.btn-cta:hover { color: var(--fluo-gradient-start); background: #fff; box-shadow: 0 12px 28px rgb(0 0 0 / .28); }
.btn-light.btn-cta .btn-icon { background: var(--fluo-brand-gradient); color: #fff; }