:root {
    --zoonimo-primary: #6f42c1;
    --zoonimo-primary-dark: #4b2a88;
    --zoonimo-primary-deep: #32204f;
    --zoonimo-soft: #f6f3fb;
    --zoonimo-bg: #f7f8fb;
    --zoonimo-text: #23242a;
    --zoonimo-muted: #6c6f7a;
    --zoonimo-border: rgba(20, 22, 35, .09);
    --zoonimo-shadow: 0 .9rem 2.5rem rgba(43, 28, 78, .09);
}

html { scroll-behavior: smooth; scroll-padding-top: 5.25rem; }
body {
    min-height: 100vh;
    color: var(--zoonimo-text);
    background: var(--zoonimo-bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
}

.skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .65rem .9rem;
    color: #fff;
    background: #111827;
    border-radius: .5rem;
    transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.zoonimo-navbar {
    min-height: 4.3rem;
    background: linear-gradient(110deg, var(--zoonimo-primary-dark), var(--zoonimo-primary));
    transition: box-shadow .2s ease, background .2s ease;
}
.zoonimo-navbar.is-scrolled {
    background: linear-gradient(110deg, #3c216d, #6337ad);
    box-shadow: 0 .65rem 1.4rem rgba(35, 21, 61, .22) !important;
}
.brand-mark { filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.navbar-brand { letter-spacing: -.02em; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.82); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; }

.hero-section {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.20), transparent 25rem),
        radial-gradient(circle at 8% 100%, rgba(255,255,255,.08), transparent 24rem),
        linear-gradient(135deg, #4b2a88 0%, #7b4bc4 55%, #9b65d1 100%);
}
.hero-section::before {
    content: "";
    position: absolute;
    width: 26rem;
    height: 26rem;
    right: -10rem;
    top: -11rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(255,255,255,.035), 0 0 0 9rem rgba(255,255,255,.025);
}
.py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.hero-section h1 { max-width: 15ch; letter-spacing: -.045em; line-height: 1.02; }
.hero-lead { max-width: 42rem; color: rgba(255,255,255,.79); }
.hero-trust { color: rgba(255,255,255,.85); }
.hero-trust span > span { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .3rem; color: #4b2a88; background: #fff; border-radius: 50%; font-weight: 800; }
.gap-x-4 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: .5rem; }
.hero-wave {
    position: absolute;
    inset: auto 0 -1px;
    height: 2.8rem;
    background: var(--zoonimo-bg);
    clip-path: polygon(0 62%, 14% 78%, 31% 45%, 48% 70%, 67% 38%, 83% 69%, 100% 45%, 100% 100%, 0 100%);
}

.app-preview {
    position: relative;
    max-width: 31rem;
    margin-inline: auto;
    color: var(--zoonimo-text);
    background: #fff;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 1.55rem;
    box-shadow: 0 2rem 5rem rgba(35, 20, 62, .3);
    transform: rotate(1.2deg);
}
.app-preview::before {
    content: "";
    position: absolute;
    inset: 1rem -1rem -1rem 1rem;
    z-index: -1;
    border-radius: 1.55rem;
    background: rgba(255,255,255,.12);
}
.app-preview-topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(110deg, var(--zoonimo-primary-dark), var(--zoonimo-primary)); border-radius: 1.45rem 1.45rem 0 0; }
.preview-dot-group { display: flex; gap: .3rem; }
.preview-dot-group span { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255,255,255,.62); }
.app-preview-body { display: grid; gap: .9rem; padding: 1.2rem; }
.animal-preview-card { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--zoonimo-border); border-radius: 1rem; background: linear-gradient(135deg, var(--zoonimo-soft), #fff); }
.animal-preview-avatar { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; flex: 0 0 auto; font-size: 2.25rem; border-radius: 1rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(111,66,193,.12); }
.animal-online { position: absolute; right: 1rem; top: 1rem; width: .7rem; height: .7rem; border: 2px solid #fff; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.15); }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.preview-stat { display: grid; gap: .12rem; padding: .75rem .4rem; text-align: center; border: 1px solid var(--zoonimo-border); border-radius: .85rem; background: #fff; }
.preview-stat > span { font-size: 1.25rem; }
.preview-stat strong { color: var(--zoonimo-primary-dark); font-size: 1.15rem; }
.preview-stat small { color: var(--zoonimo-muted); font-size: .7rem; }
.preview-reminder, .preview-story { display: flex; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--zoonimo-border); border-radius: .9rem; background: #fff; }
.preview-reminder-icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; font-size: 1.35rem; border-radius: .75rem; background: #fff4d6; }
.preview-story-image { display: grid; place-items: center; width: 4.4rem; height: 3.5rem; flex: 0 0 auto; font-size: 1.7rem; border-radius: .75rem; background: linear-gradient(135deg, #dcfce7, #dbeafe); }

.section-space { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.section-kicker { margin-bottom: .7rem; color: var(--zoonimo-primary); font-weight: 800; letter-spacing: .095em; text-transform: uppercase; font-size: .78rem; }
.section-kicker-light { color: #dfd1fa; }
.problem-section { position: relative; }
.problem-section::before { content: "🐾"; position: absolute; left: max(1rem, calc(50% - 42rem)); top: 3rem; font-size: 7rem; opacity: .025; transform: rotate(-18deg); }

.benefit-card, .feature-card, .step-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--zoonimo-border);
    border-radius: 1.2rem;
    box-shadow: 0 .55rem 1.6rem rgba(43,28,78,.045);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.benefit-card:hover, .feature-card:hover, .step-card:hover { transform: translateY(-4px); border-color: rgba(111,66,193,.28); box-shadow: var(--zoonimo-shadow); }
.benefit-icon, .feature-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; font-size: 1.55rem; border-radius: 1rem; background: rgba(111,66,193,.1); }
.feature-card p { min-height: 4.5rem; }
.feature-note { display: inline-flex; padding: .38rem .65rem; color: #5d3a96; background: var(--zoonimo-soft); border-radius: 999px; font-size: .75rem; font-weight: 650; }

.ecosystem-section { position: relative; overflow: hidden; }
.ecosystem-section::before { content: ""; position: absolute; inset: 8% -10% auto auto; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgba(111,66,193,.08), transparent 68%); }
.ecosystem-wrap { position: relative; max-width: 70rem; margin-inline: auto; }
.ecosystem-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 10rem; height: 10rem; margin: 0 auto -2rem; color: #fff; border: .6rem solid var(--zoonimo-bg); border-radius: 50%; background: linear-gradient(135deg, var(--zoonimo-primary-dark), var(--zoonimo-primary)); box-shadow: 0 1rem 2.5rem rgba(75,42,136,.24); }
.ecosystem-center small { color: rgba(255,255,255,.72); }
.ecosystem-paw { font-size: 2rem; }
.ecosystem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 4.5rem 1.25rem 1.25rem; border: 1px solid rgba(111,66,193,.13); border-radius: 2rem; background: linear-gradient(180deg, rgba(111,66,193,.06), #fff 50%); box-shadow: 0 1rem 3rem rgba(43,28,78,.055); }
.role-card { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--zoonimo-border); }
.role-card > span { font-size: 1.65rem; }
.role-card p { margin: 0; color: var(--zoonimo-muted); font-size: .88rem; }

.privacy-section { color: #fff; background: #f3f0f9; }
.privacy-panel { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border-radius: 1.75rem; background: linear-gradient(135deg, #32204f, #6332a6 58%, #8b5cf6); box-shadow: 0 1.4rem 3.5rem rgba(55,32,90,.22); }
.privacy-panel::after { content: "🐾"; position: absolute; right: -1.5rem; bottom: -4.4rem; font-size: 13rem; opacity: .055; transform: rotate(-14deg); }
.text-white-75 { color: rgba(255,255,255,.76); }
.privacy-points > div > div { display: flex; align-items: center; gap: .65rem; padding: .75rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: .8rem; background: rgba(255,255,255,.07); }
.privacy-points span { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; color: #4b2a88; background: #fff; border-radius: 50%; font-weight: 800; }
.privacy-visual { position: relative; z-index: 1; display: grid; gap: .75rem; padding: 1.1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1.25rem; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.privacy-lock { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: -.2rem auto .3rem; font-size: 2.25rem; border-radius: 50%; background: #fff; box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.18); }
.privacy-layer { display: flex; flex-direction: column; padding: .85rem 1rem; color: #3d2a55; background: #fff; border-radius: .8rem; box-shadow: 0 .35rem .9rem rgba(0,0,0,.08); }
.privacy-layer span { color: #7b6b88; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }

.steps-row { position: relative; }
.step-card { position: relative; padding-top: 3.25rem; }
.step-number { position: absolute; top: -1.35rem; left: 1.5rem; display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; color: #fff; background: var(--zoonimo-primary); border: .3rem solid #fff; border-radius: 50%; font-weight: 800; box-shadow: 0 .4rem 1rem rgba(111,66,193,.22); }

.faq-accordion { overflow: hidden; border: 1px solid var(--zoonimo-border); border-radius: 1.2rem; box-shadow: 0 .7rem 2rem rgba(43,28,78,.05); }
.faq-accordion .accordion-item { border-color: var(--zoonimo-border); }
.faq-accordion .accordion-button { padding: 1.15rem 1.25rem; font-weight: 650; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--zoonimo-primary-dark); background: var(--zoonimo-soft); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(111,66,193,.12); }

.final-cta-section { color: #fff; background: linear-gradient(180deg, var(--zoonimo-bg), #f0ebf8); }
.final-cta-card { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem); border-radius: 1.75rem; background: linear-gradient(135deg, #4b2a88, #7b4bc4 58%, #9b65d1); box-shadow: 0 1.5rem 4rem rgba(55,32,90,.24); }
.final-cta-card::before, .final-cta-card::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.final-cta-card::before { width: 20rem; height: 20rem; left: -10rem; top: -10rem; }
.final-cta-card::after { width: 26rem; height: 26rem; right: -12rem; bottom: -15rem; }
.final-cta-card > * { position: relative; z-index: 1; }
.final-cta-card p.lead { max-width: 43rem; }
.final-paw { font-size: 2.5rem; margin-bottom: .7rem; }

.btn-primary { --bs-btn-bg: var(--zoonimo-primary); --bs-btn-border-color: var(--zoonimo-primary); --bs-btn-hover-bg: var(--zoonimo-primary-dark); --bs-btn-hover-border-color: var(--zoonimo-primary-dark); }
a { color: var(--zoonimo-primary); }
.site-footer a { color: var(--zoonimo-muted); text-decoration: none; }
.site-footer a:hover { color: var(--zoonimo-primary); text-decoration: underline; }

.back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1050; display: grid; place-items: center; width: 2.85rem; height: 2.85rem; color: #fff; background: var(--zoonimo-primary); border-radius: 50%; text-decoration: none; box-shadow: 0 .65rem 1.5rem rgba(43,28,78,.24); opacity: 0; visibility: hidden; transform: translateY(.75rem); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: #fff; background: var(--zoonimo-primary-dark); }

@media (max-width: 991.98px) {
    .py-lg-6 { padding-top: 4.5rem !important; padding-bottom: 5rem !important; }
    .hero-section h1 { font-size: clamp(2.6rem, 9vw, 4.3rem); }
    .app-preview { max-width: 34rem; transform: none; }
    .ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
    .navbar-collapse { padding-top: .8rem; padding-bottom: .75rem; }
}

@media (max-width: 767.98px) {
    .section-space { padding: 4.25rem 0; }
    .hero-wave { height: 1.8rem; }
    .hero-section h1 { max-width: none; }
    .preview-grid { gap: .45rem; }
    .preview-stat small { font-size: .63rem; }
    .ecosystem-center { width: 8.5rem; height: 8.5rem; }
    .ecosystem-grid { grid-template-columns: 1fr; padding-inline: .75rem; }
    .privacy-panel { border-radius: 1.25rem; }
}

@media (max-width: 575.98px) {
    .zoonimo-navbar { min-height: 4rem; }
    .hero-section .btn-lg, .final-cta-card .btn-lg { width: 100%; }
    .hero-trust { display: grid !important; }
    .app-preview-body { padding: .8rem; }
    .animal-preview-avatar { width: 3.6rem; height: 3.6rem; }
    .preview-stat { padding-inline: .2rem; }
    .preview-story { align-items: flex-start; }
    .feature-card p { min-height: 0; }
    .site-footer .container { align-items: flex-start !important; }
}

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

.error-page { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.error-card { max-width: 38rem; padding: 2rem; text-align: center; background: #fff; border: 1px solid var(--zoonimo-border); border-radius: 1.25rem; box-shadow: var(--zoonimo-shadow); }
.error-icon { font-size: 3rem; }

.testing-section { padding-top: 0; }
.testing-callout { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); color: #fff; border-radius: 1.5rem; background: linear-gradient(135deg, #32204f, #6332a6 58%, #8b5cf6); box-shadow: 0 1.2rem 3rem rgba(55,32,90,.2); }
.testing-callout::after { content: "🐾"; position: absolute; right: 1rem; bottom: -2.8rem; font-size: 10rem; line-height: 1; opacity: .07; transform: rotate(-15deg); }
.testing-callout > .row { z-index: 1; }
.testing-benefits > div > div { display: flex; align-items: flex-start; gap: .6rem; }
.testing-benefits span { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; color: #4b2a88; background: #fff; border-radius: 50%; font-weight: 800; }
@media (max-width: 575.98px) { .testing-callout .btn-lg { width: 100%; } }