/* FlatCare public marketing site styles (home + SEO landing pages). */
:root {
    --brand: #2f6f4f;
    --brand-dark: #1c3f2b;
    --brand-mid: #256345;
    --brand-light: #eaf5ee;
    --brand-soft: #f4faf6;
    --gold: #f0b429;
    --ink: #142019;
    --muted: #5d6b63;
    --ring: rgba(47,111,79,.14);
}
* { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: #fff; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }
.navbar-brand { font-weight: 800; letter-spacing: -.02em; }
.text-brand { color: var(--brand); }
.text-muted-2 { color: var(--muted); }
.bg-brand-light { background: var(--brand-light); }
.bg-brand-soft { background: var(--brand-soft); }

/* Buttons */
.btn-brand {
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark));
    border: none; color: #fff;
    box-shadow: 0 .5rem 1.25rem -.4rem rgba(28,63,43,.5);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-brand:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 .9rem 1.6rem -.4rem rgba(28,63,43,.55); filter: brightness(1.04); }
.btn-outline-brand { border: 1.5px solid #d7e4db; color: var(--ink); background: #fff; transition: all .15s ease; }
.btn-outline-brand:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn-ghost-light { border: 1.5px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.06); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.55); }

/* Navbar */
.navbar-glass {
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid rgba(20,32,25,.06);
}
.nav-link { font-weight: 500; color: var(--ink); position: relative; }
.nav-link:hover { color: var(--brand); }

/* Hero */
.hero { position: relative; margin-top: -5.25rem; padding: 9rem 0 4rem; overflow: hidden; isolation: isolate; }
.hero-mesh {
    position: absolute; inset: 0; z-index: -1;
    background: #fbfdfc url('../images/marketing/apartment-society-hero-background.webp') center bottom / cover no-repeat;
}
.eyebrow-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--ring); color: var(--brand-dark);
    font-weight: 600; font-size: .8rem; padding: .45rem .9rem;
    border-radius: 50rem; box-shadow: 0 .3rem .8rem -.3rem rgba(20,32,25,.08);
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.hero h1 { font-weight: 800; font-size: clamp(2.1rem, 3.5vw, 3.15rem); line-height: 1.08; }
.hero .grad-text {
    background: linear-gradient(100deg, var(--brand-mid), var(--gold) 115%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avatar-stack { display: flex; }
.avatar-stack span {
    width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #fff;
    margin-left: -10px; display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; color: #fff;
}
.avatar-stack span:first-child { margin-left: 0; }

/* Hero mockup */
.hero-visual-wrap { position: relative; padding: 1.5rem 0 9.5rem 2.25rem; }
.hero-visual-glow {
    position: absolute; width: 22rem; height: 22rem; border-radius: 50%;
    background: radial-gradient(circle, rgba(47,111,79,.22), transparent 70%);
    top: -2rem; right: -3rem; z-index: -1; filter: blur(4px);
}
.mock-panel {
    background: #fff; border-radius: 1.5rem; border: 1px solid rgba(20,32,25,.06);
    box-shadow: 0 2.5rem 4rem -1.5rem rgba(20,32,25,.28), 0 .5rem 1rem -.5rem rgba(20,32,25,.08);
    overflow: hidden;
}
.mock-topbar { background: var(--brand-dark); padding: .8rem 1.1rem; display: flex; align-items: center; gap: .4rem; }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); }
.mock-dot:nth-child(1) { background: #ff5f57; }
.mock-dot:nth-child(2) { background: #febc2e; }
.mock-dot:nth-child(3) { background: #28c840; }
.mock-stat { display: flex; align-items: center; gap: .6rem; background: var(--brand-light); border-radius: .8rem; padding: .7rem .75rem; height: 100%; }
.mock-stat i { font-size: 1.5rem; color: var(--brand); }
.mock-stat small { display: block; font-size: .65rem; color: var(--muted); line-height: 1.1; }
.mock-stat strong { font-size: 1.15rem; color: var(--brand-dark); line-height: 1.2; }
.float-icon {
    position: absolute; width: 48px; height: 48px; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
    background: var(--brand); box-shadow: 0 .8rem 1.4rem -.5rem rgba(20,32,25,.35);
}
.float-icon--home { background: var(--gold); top: -.5rem; left: 24%; width: 54px; height: 54px; z-index: 2; }
.float-icon--tool { top: -.25rem; right: -1.5rem; z-index: 3; }
.float-icon--team { top: 46%; right: -1.75rem; z-index: 3; }
.float-icon--chat { top: 33%; left: .25rem; z-index: 3; }
.hero-checks span { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--muted); font-size: .95rem; }
.hero-checks i { color: var(--brand); }
.mock-body { padding: 1.4rem; }
.mock-row { height: 12px; border-radius: 6px; background: var(--brand-light); }
.mock-bar-bg { height: 16px; border-radius: 8px; background: #eef2ef; overflow: hidden; }
.mock-bar-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand-mid), #4c9d75); }
.float-card {
    position: absolute; background: #fff; border-radius: 1.1rem;
    box-shadow: 0 1.5rem 2.5rem -1rem rgba(20,32,25,.22); border: 1px solid rgba(20,32,25,.05);
}
.float-card--stat { left: -1rem; bottom: -4rem; width: 250px; }
.float-card--task { right: -1.5rem; top: 3.5rem; max-width: 210px; z-index: 2; }
.stat-chip { background: var(--brand-soft); border-radius: .7rem; padding: .55rem .5rem; }

/* Sections */
.section-eyebrow {
    display: inline-block; font-weight: 700; font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand); background: var(--brand-light);
    padding: .35rem .8rem; border-radius: 50rem; margin-bottom: .9rem;
}
.section-title { font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.35rem); }

/* Trust bar */
.trust-bar { border-top: 1px solid #eef1ef; border-bottom: 1px solid #eef1ef; background: #fcfdfc; }
.trust-mark { font-weight: 800; font-size: 1.05rem; color: #b7c2bb; letter-spacing: -.01em; opacity: .9; transition: opacity .15s ease, color .15s ease; }
.trust-mark:hover { color: var(--brand); opacity: 1; }

/* Feature cards */
.card-feature {
    border: 1px solid #e6efe9; border-radius: 1.5rem;
    background: linear-gradient(135deg, #fff 50%, #f0f9f3);
    min-height: 15.5rem; box-shadow: 0 1rem 2rem -1.5rem rgba(20,32,25,.18);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative; overflow: hidden;
}
.card-feature:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 2.5rem -1rem rgba(20,32,25,.14); border-color: transparent; }
.card-feature .feature-index {
    position: absolute; top: 1.1rem; right: 1.3rem; font-weight: 800; font-size: .85rem;
    color: #a9d3bb; font-size: 1rem;
}
.card-feature .feature-desc { max-width: 60%; }
.feature-art {
    position: absolute; right: 0; bottom: 0; width: 44%; max-width: 175px; height: auto;
    mix-blend-mode: multiply; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, transparent, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, transparent, #000 30%);
    mask-composite: intersect;
}
.feature-icon {
    width: 54px; height: 54px; border-radius: 1rem;
    background: linear-gradient(135deg, var(--brand-light), #dcefe3); color: var(--brand-dark);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

/* Steps */
.step-card {
    background: #fff; border: 1px solid #e6efe9; border-radius: 1.5rem; height: 100%; min-height: 15rem;
    position: relative; overflow: hidden; box-shadow: 0 1rem 2rem -1.5rem rgba(20,32,25,.18);
}
.step-desc { max-width: 58%; }
.step-art {
    position: absolute; right: 0; bottom: 0; width: 46%; max-width: 190px; height: auto;
    mix-blend-mode: multiply; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 25%), linear-gradient(to bottom, transparent, #000 25%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 25%), linear-gradient(to bottom, transparent, #000 25%);
    mask-composite: intersect;
}
.step-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;
    box-shadow: 0 .5rem 1rem -.3rem rgba(28,63,43,.4);
}
.step-connector { position: absolute; top: 22px; left: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: repeating-linear-gradient(90deg, #cfe0d6 0 8px, transparent 8px 14px); }

/* Stats band */
.stats-band {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid) 65%, #2c7350);
    border-radius: 1.75rem; color: #fff; position: relative; overflow: hidden;
}
.stats-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(30rem 20rem at 90% 0%, rgba(240,180,41,.18), transparent 60%);
}
.stat-num { font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.7rem); }

/* Testimonials */
.quote-mark { font-family: Georgia, serif; font-size: 3rem; line-height: 1; color: var(--brand); opacity: .18; }
.testimonial-card { min-height: 17rem; }
.testimonial-card--green { background: linear-gradient(135deg, #fff 45%, #eaf7ee); }
.testimonial-card--blue { background: linear-gradient(135deg, #fff 45%, #e8f2fd); }
.testimonial-card--gold { background: linear-gradient(135deg, #fff 45%, #fdf3dd); }
.testimonial-quote { max-width: 62%; color: var(--ink); }
.testimonial-card--green .testimonial-quote b { color: #157347; }
.testimonial-card--blue .testimonial-quote b { color: #1a73c9; }
.testimonial-card--gold .testimonial-quote b { color: #15803d; }
.testimonial-card--green .quote-mark { color: #2f9e62; opacity: .35; }
.testimonial-card--blue .quote-mark { color: #4a9be0; opacity: .35; }
.testimonial-card--gold .quote-mark { color: #f0b429; opacity: .45; }
.testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #fff; }
.testimonial-art { width: 40%; max-width: 165px; }
.testimonial-card--gold .testimonial-art { bottom: 2.6rem; }
@media (max-width: 575.98px) { .testimonial-quote { max-width: 100%; } .testimonial-art { display: none; } }
.avatar-badge {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand-mid), var(--brand-dark)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .95rem;
}
.stars { color: var(--gold); font-size: .85rem; letter-spacing: .1em; }

/* CTA */
.cta-band {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
    border-radius: 1.75rem; position: relative; overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(34rem 22rem at 15% 110%, rgba(240,180,41,.16), transparent 60%);
}

.cta-band.app-band { min-height: 20rem; align-items: center; background: #0f5a3c; }
.cta-band.app-band::before {
    inset: -3%;
    background: linear-gradient(90deg, rgba(6,52,34,.6) 0, rgba(6,52,34,.4) 38%, transparent 62%),
                url('../images/marketing/flatcare-resident-app-banner.webp') 70% center / cover no-repeat;
}
.app-band > * { position: relative; z-index: 1; }
.app-band .app-band-copy { max-width: 30rem; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
@media (max-width: 767.98px) { .cta-band.app-band::before { background-position: 85% center; } }

footer { background: #0f1a13; color: #aebbb2; }
footer a { color: #d9e4dc; text-decoration: none; }
footer a:hover { color: #fff; }
footer .footer-brand-text { color: #fff; }
footer .footer-brand-text > img, footer .footer-brand-text > i { background: #fff; border-radius: .75rem; padding: .35rem .6rem; }

@media (max-width: 991.98px) {
    .hero-visual-wrap { padding: 1rem 0 0 0; }
    .float-icon { display: none; }
    .float-card--stat { position: static; margin-top: -2.5rem; margin-inline: 1rem; width: auto; }
    .float-card--task { display: none; }
    .step-connector { display: none; }
}

/* ------------------------------------------------------------------
   SEO landing pages (resources/views/marketing/page.blade.php)
   ------------------------------------------------------------------ */
.seo-hero { padding: 3.5rem 0 3.5rem; background: linear-gradient(180deg, #f1f9f4 0%, #ffffff 100%); }
.seo-h1 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -.02em; }
.seo-breadcrumb .breadcrumb { font-size: .85rem; }
.seo-breadcrumb a { color: var(--brand); text-decoration: none; }
.seo-breadcrumb a:hover { text-decoration: underline; }
.seo-card {
    background: #fff; border: 1px solid #e6efe9; border-radius: 1.25rem; padding: 1.5rem; height: 100%;
    box-shadow: 0 1rem 2rem -1.6rem rgba(20, 32, 25, .25);
}
.seo-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.seo-card p a, .faq-item p a, .seo-card .link-inline { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
a.seo-card.related-link { transition: transform .15s ease, box-shadow .15s ease; }
a.seo-card.related-link:hover { transform: translateY(-3px); box-shadow: 0 1.4rem 2.4rem -1.4rem rgba(20, 32, 25, .3); }
.faq-item { min-height: 0; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }