:root {
    --primary: #1565c0;
    --primary-dark: #0d47a1;
    --primary-soft: #e8f1fb;
    --accent: #43a047;
    --accent-dark: #2e7d32;
    --ink: #172033;
    --muted: #667085;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --border: #e5eaf1;
    --shadow: 0 12px 35px rgba(17, 44, 82, .09);
    --radius: 1.25rem;
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1; }
a { color: var(--primary); }

.skip-link {
    position: fixed;
    z-index: 1100;
    top: .5rem;
    left: .5rem;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--primary-dark);
    border-radius: .5rem;
    transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.app-navbar {
    min-height: 72px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(229, 234, 241, .8);
    box-shadow: 0 4px 20px rgba(17, 44, 82, .04);
}
.navbar-brand { color: var(--ink); font-size: 1.05rem; font-weight: 750; }
.navbar-brand:hover { color: var(--primary); }

.btn {
    min-height: 44px;
    border-radius: .75rem;
    font-weight: 650;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-lg { min-height: 52px; padding-inline: 1.5rem; font-size: 1rem; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); }
.btn-success { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); }
.btn:focus-visible, .form-control:focus, a:focus-visible { outline: 3px solid rgba(21, 101, 192, .22); outline-offset: 2px; }

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 5rem;
    background: linear-gradient(145deg, #fff 0%, #f0f6fd 100%);
}
.hero-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -280px;
    left: -240px;
    background: radial-gradient(circle, rgba(21, 101, 192, .12), transparent 70%);
}
.hero-section h1 { max-width: 700px; margin: 1rem 0 1.25rem; font-size: clamp(2.35rem, 5.5vw, 4.65rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
.hero-copy { max-width: 610px; margin-bottom: 2rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }
.eyebrow { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.install-link { display: inline-block; margin-top: 1.25rem; color: var(--muted); font-size: .9rem; text-underline-offset: 3px; }

.hero-visual { position: relative; min-height: 430px; display: grid; place-items: center; }
.visual-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 330px; height: 330px; background: #d9eafd; }
.orb-two { width: 150px; height: 150px; right: 4%; bottom: 2%; background: rgba(67, 160, 71, .2); }
.phone-card { position: relative; width: min(100%, 440px); padding: 1rem; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9); border-radius: 2rem; box-shadow: 0 28px 70px rgba(21, 65, 110, .18); transform: rotate(1.5deg); }
.phone-header { display: flex; gap: .35rem; padding: .1rem .2rem .7rem; }
.phone-header span { width: 7px; height: 7px; background: #cbd5e1; border-radius: 50%; }
.phone-card img { display: block; width: 100%; height: auto; border-radius: 1.25rem; background: #eef6ff; }
.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .85rem; }
.metric-row > div { display: grid; grid-template-columns: auto 1fr; gap: 0 .55rem; align-items: center; padding: .8rem; background: var(--canvas); border-radius: .9rem; }
.metric-row i { grid-row: 1/3; color: var(--primary); font-size: 1.35rem; }
.metric-row strong { font-size: .85rem; }.metric-row span { color: var(--muted); font-size: .72rem; }

.feature-section { position: relative; padding: 0 0 5rem; margin-top: -1rem; background: linear-gradient(#f0f6fd, var(--canvas)); }
.feature-card { height: 100%; padding: 1.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.feature-card > i { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; color: var(--primary); background: var(--primary-soft); border-radius: .85rem; font-size: 1.4rem; }
.feature-card h3 { font-size: 1.05rem; font-weight: 750; }.feature-card p { margin: 0; color: var(--muted); line-height: 1.6; }

.page-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.narrow-container { max-width: 650px; }
.form-card, .error-card { padding: clamp(1.5rem, 5vw, 2.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.form-card h1, .error-card h1 { margin-bottom: .75rem; font-size: clamp(1.8rem, 5vw, 2.45rem); letter-spacing: -.03em; font-weight: 800; }
.form-label { color: #344054; font-size: .9rem; font-weight: 700; }
.form-control, .input-group-text { min-height: 50px; border-color: #d7dee8; }
.form-control { border-radius: .75rem; }
.input-group > .input-group-text { color: var(--muted); background: #f8fafc; border-radius: .75rem 0 0 .75rem; font-weight: 650; }
.input-group > .form-control { border-radius: 0 .75rem .75rem 0; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(21, 101, 192, .1); }
.form-text { color: var(--muted); font-size: .8rem; }
.otp-input { text-align: center; letter-spacing: .55em; font-size: 1.5rem; font-weight: 750; }
.icon-bubble { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 1.25rem; color: var(--primary); background: var(--primary-soft); border-radius: 1rem; font-size: 1.65rem; }
.icon-bubble-success { color: var(--accent-dark); background: #e8f5e9; }
.installed-message, .install-help { display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 1rem; border-radius: .85rem; }
.installed-message { color: #1b5e20; background: #e8f5e9; }.installed-message i { font-size: 1.4rem; }
.install-help { align-items: flex-start; color: #17436d; background: var(--primary-soft); text-align: left; }

.dashboard-hero { padding: 3.5rem 0 6rem; color: #fff; background: linear-gradient(130deg, var(--primary-dark), var(--primary)); }
.dashboard-hero h1 { margin: .25rem 0; font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; }
.dashboard-hero p:last-child { margin: .75rem 0 0; color: rgba(255,255,255,.78); font-size: 1.05rem; }
.dashboard-content { position: relative; padding-bottom: 5rem; margin-top: -3.25rem; }
.action-card { display: flex; align-items: center; gap: 1rem; min-height: 150px; padding: 1.5rem; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.action-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,44,82,.14); }
.action-icon { flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 58px; color: var(--primary); background: var(--primary-soft); border-radius: 1rem; font-size: 1.5rem; }
.action-card-success .action-icon { color: var(--accent-dark); background: #e8f5e9; }
.action-card strong, .action-card small { display: block; }.action-card strong { margin-bottom: .3rem; font-size: 1.1rem; }.action-card small { color: var(--muted); line-height: 1.5; }
.action-arrow { margin-left: auto; color: var(--muted); }
.profile-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.profile-strip > div { display: flex; align-items: center; gap: .8rem; }.profile-strip small, .profile-strip strong { display: block; }.profile-strip small { color: var(--muted); }.profile-avatar { display: grid; place-items: center; width: 42px; height: 42px; color: var(--primary); background: var(--primary-soft); border-radius: 50%; }

.page-heading { padding: 2.5rem 0 5rem; color: #fff; background: linear-gradient(130deg, var(--primary-dark), var(--primary)); }
.page-heading h1 { margin: .7rem 0 .3rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.035em; }.page-heading p { margin: 0; color: rgba(255,255,255,.76); }
.page-heading .btn { color: #fff; border-color: rgba(255,255,255,.5); }.page-heading .btn-success { border-color: var(--accent); }
.back-link { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.9); font-weight: 650; text-decoration: none; }.back-link:hover { color: #fff; }
.form-card-overlap { position: relative; margin-top: -3rem; }
.input-icon { position: relative; }.input-icon i { position: absolute; z-index: 2; top: 50%; left: 1rem; color: var(--muted); transform: translateY(-50%); }.input-icon .form-control { padding-left: 2.75rem; }
.success-panel { padding: 1.5rem .5rem; text-align: center; }.success-panel > i { color: var(--accent); font-size: 4rem; }.success-panel h2 { margin-top: .75rem; font-weight: 800; }.success-panel p { color: var(--muted); }

.dairy-list-section { padding: 0 0 5rem; margin-top: -2.5rem; }
.dairy-card { height: 100%; padding: 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dairy-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }.dairy-icon { display: grid; place-items: center; width: 46px; height: 46px; color: var(--primary); background: var(--primary-soft); border-radius: .85rem; font-size: 1.25rem; }.dairy-card .badge { padding: .5rem .7rem; border-radius: 2rem; }.dairy-card h2 { margin-bottom: 1rem; font-size: 1.15rem; font-weight: 750; }.dairy-card p { margin: .5rem 0; color: var(--muted); font-size: .9rem; }.dairy-card p i { margin-right: .35rem; color: var(--primary); }
.skeleton-card span { display: block; height: 14px; margin: 1rem 0; overflow: hidden; background: #e9eef5; border-radius: .4rem; animation: pulse 1.3s ease-in-out infinite alternate; }.skeleton-card span:first-child { width: 48px; height: 48px; }.skeleton-card span:nth-child(2) { width: 70%; }.skeleton-card span:nth-child(3) { width: 50%; }
@keyframes pulse { to { opacity: .42; } }
.empty-state { padding: 3.5rem 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }.empty-state > i { color: #98a2b3; font-size: 3rem; }.empty-state h2 { margin-top: .75rem; font-weight: 800; }.empty-state p { color: var(--muted); }

.error-card { position: relative; overflow: hidden; }.error-code { position: absolute; top: -2rem; right: -1rem; color: rgba(21,101,192,.06); font-size: 8rem; font-weight: 900; }.error-card p { position: relative; color: var(--muted); }
.app-footer { padding: 1.4rem 0; color: var(--muted); background: #fff; border-top: 1px solid var(--border); font-size: .82rem; }.footer-dot { margin: 0 .45rem; }
.toast { box-shadow: var(--shadow); }

@media (max-width: 575.98px) {
    .hero-section { padding-top: 3rem; }.hero-visual { min-height: 330px; }.phone-card { width: 92%; }.metric-row { gap: .4rem; }.metric-row > div { padding: .65rem; }
    .profile-strip { align-items: stretch; flex-direction: column; }.profile-strip .btn { width: 100%; }
    .action-card { min-height: 130px; }.footer-dot { display: none; }.app-footer span { display: block; margin: .2rem; }
}

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

@media (prefers-contrast: more) {
    :root { --border: #788499; --muted: #4b5565; }
}