/* =========================================================
   SCOOBYCARE LANDING PAGE
   Light SaaS Theme
   Designed specifically for the supplied landing.html
========================================================= */

:root {
    --blue: #67b7e8;
    --blue-dark: #0f6fa8;
    --blue-deep: #0c5f94;
    --blue-soft: #eaf7ff;
    --blue-pale: #f5fbff;

    --cream: #f5fbff;
    --cream-dark: #eaf7ff;

    --white: #ffffff;

    --ink: #102033;
    --ink-soft: #24364a;
    --muted: #52627a;
    --muted-light: #66768c;

    --green: #2fa66a;
    --green-soft: #eaf8f0;

    --orange: #e9a23b;
    --orange-soft: #fff5e5;

    --purple: #7867d8;
    --purple-soft: #f1efff;

    --border: #dfeaf2;
    --border-light: #edf3f7;

    --shadow-xs: 0 2px 8px rgba(22, 71, 103, 0.04);
    --shadow-sm: 0 8px 25px rgba(22, 71, 103, 0.07);
    --shadow-md: 0 18px 45px rgba(22, 71, 103, 0.10);
    --shadow-lg: 0 28px 70px rgba(22, 71, 103, 0.14);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;

    --container: 1180px;
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--white);
    color: var(--ink);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
ul,
blockquote {
    margin-top: 0;
}

p {
    margin-bottom: 0;
}

ul {
    padding: 0;
}

.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding: 0 19px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    color: var(--white);
    background: var(--blue-dark);

    box-shadow:
        0 8px 18px rgba(15, 111, 168, 0.22);
}

.btn-primary:hover {
    background: var(--blue-deep);

    box-shadow:
        0 12px 25px rgba(15, 111, 168, 0.28);
}

.btn-secondary {
    color: var(--ink);
    background: var(--white);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    border-color: #b9d8e9;
    background: var(--blue-pale);
}

.btn-small {
    min-height: 39px;
    padding: 0 16px;

    font-size: 13px;
}

.btn-large {
    min-height: 52px;
    padding: 0 23px;

    border-radius: 13px;

    font-size: 14px;
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255, 255, 255, 0.94);

    border-bottom: 1px solid rgba(223, 234, 242, 0.85);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nav-container {
    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;
}

.brand {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;
}

.brand-logo {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 12px;

    background: var(--blue-soft);
}

.brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.brand-copy {
    display: flex;

    flex-direction: column;

    line-height: 1.15;
}

.brand-copy strong {
    font-size: 17px;
    font-weight: 800;

    letter-spacing: -0.3px;
}

.brand-copy span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}

.desktop-nav {
    display: flex;

    align-items: center;

    gap: 27px;

    margin-left: auto;
}

.nav-link {
    position: relative;

    color: #53677b;

    font-size: 13px;
    font-weight: 600;

    transition:
        color 0.2s ease;
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -9px;

    height: 2px;

    border-radius: 99px;

    background: var(--blue-dark);

    transform: scaleX(0);

    transition:
        transform 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--blue-dark);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.nav-actions {
    display: flex;

    align-items: center;

    gap: 14px;
}

.nav-login {
    color: #53677b;

    font-size: 13px;
    font-weight: 700;
}

.nav-login:hover {
    color: var(--blue-dark);
}

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    border-radius: 10px;

    background: var(--blue-soft);

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 19px;
    height: 2px;

    border-radius: 5px;

    background: var(--ink);
}

.mobile-menu {
    display: none;
}

/* =========================================================
   HERO
========================================================= */

.hero-section {
    position: relative;

    min-height: 700px;

    padding:
        76px 0
        90px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fafdff 0%,
            #f3faff 48%,
            #ffffff 100%
        );
}

.hero-background-shape {
    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(2px);
}

.shape-one {
    width: 420px;
    height: 420px;

    top: -190px;
    right: -120px;

    background: rgba(103, 183, 232, 0.11);
}

.shape-two {
    width: 280px;
    height: 280px;

    bottom: -150px;
    left: -100px;

    background: rgba(255, 250, 242, 0.95);
}

.hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.90fr)
        minmax(0, 1.10fr);

    gap: 64px;

    align-items: center;
}

.hero-content {
    min-width: 0;
}

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 11px;

    border: 1px solid #d9edf8;

    border-radius: 99px;

    background: rgba(255, 255, 255, 0.75);

    color: var(--blue-deep);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue-dark);

    box-shadow:
        0 0 0 4px rgba(103, 183, 232, 0.13);
}

.hero-kicker {
    margin-top: 22px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.hero-content h1 {
    max-width: 680px;

    margin:
        13px 0
        21px;

    font-size:
        clamp(
            40px,
            5vw,
            65px
        );

    line-height: 1.04;

    letter-spacing: -2.8px;

    font-weight: 800;
}

.hero-content h1 span {
    color: var(--blue-dark);
}

.hero-description {
    max-width: 600px;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.75;
}

.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.hero-note {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 18px;

    color: var(--muted);

    font-size: 12px;
}

.hero-note-icon {
    width: 19px;
    height: 19px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green-soft);

    color: var(--green);

    font-size: 11px;
    font-weight: 800;
}

.hero-stats {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 35px;
}

.hero-stat {
    display: flex;

    flex-direction: column;
}

.hero-stat strong {
    color: var(--ink);

    font-size: 25px;

    line-height: 1;

    font-weight: 800;
}

.hero-stat span {
    margin-top: 7px;

    color: var(--muted-light);

    font-size: 12.5px;
    font-weight: 600;
}

.hero-stat-divider {
    width: 1px;
    height: 38px;

    background: var(--border);
}

/* =========================================================
   HERO PRODUCT WINDOW
========================================================= */

.hero-product {
    position: relative;

    min-width: 0;

    padding:
        18px 0
        18px 12px;
}

.product-window {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(214, 229, 239, 0.95);

    border-radius: 18px;

    background: var(--white);

    box-shadow: var(--shadow-lg);
}

.window-topbar {
    height: 39px;

    display: grid;

    grid-template-columns: 80px 1fr 80px;

    align-items: center;

    padding: 0 13px;

    border-bottom: 1px solid var(--border-light);

    background: #f8fbfd;
}

.window-dots {
    display: flex;

    align-items: center;

    gap: 5px;
}

.window-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #cbd8e1;
}

.window-url {
    justify-self: center;

    max-width: 220px;

    padding: 4px 11px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    background: var(--white);

    color: var(--muted-light);

    font-size: 8px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.window-secure {
    justify-self: end;

    color: var(--green);

    font-size: 8px;
    font-weight: 700;
}

.dashboard-preview {
    min-height: 430px;

    display: grid;

    grid-template-columns: 145px minmax(0, 1fr);
}

.preview-sidebar {
    padding: 18px 10px;

    border-right: 1px solid var(--border-light);

    background: #fbfdfe;
}

.preview-brand {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0 5px
        8px;
}

.preview-brand img {
    width: 25px;
    height: 25px;

    object-fit: contain;
}

.preview-brand strong {
    display: block;

    font-size: 9px;

    line-height: 1.1;
}

.preview-brand small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

.preview-section-label {
    margin:
        16px 6px
        7px;

    color: #a3b0bb;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: 0.8px;
}

.preview-nav {
    display: flex;

    align-items: center;

    gap: 7px;

    min-height: 27px;

    padding: 0 7px;

    border-radius: 7px;

    color: #607384;

    font-size: 7px;
    font-weight: 600;
}

.preview-nav span {
    width: 13px;

    text-align: center;

    font-size: 9px;
}

.preview-nav.active {
    background: var(--blue-soft);

    color: var(--blue-deep);
}

.preview-main {
    min-width: 0;

    padding: 20px;
}

.preview-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}

.preview-header small {
    color: var(--muted-light);

    font-size: 7px;
}

.preview-header h3 {
    margin:
        3px 0
        0;

    font-size: 13px;

    line-height: 1.2;
}

.preview-header-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}

.preview-notification {
    width: 23px;
    height: 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--border);

    border-radius: 7px;

    color: var(--muted);

    font-size: 10px;
}

.preview-avatar {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--blue-soft);

    color: var(--blue-deep);

    font-size: 7px;
    font-weight: 800;
}

.preview-dashboard-title {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 22px;
}

.preview-dashboard-title strong {
    display: block;

    font-size: 10px;
}

.preview-dashboard-title span {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 7px;
}

.preview-dashboard-title button {
    padding: 5px 8px;

    border:
        1px solid
        var(--border);

    border-radius: 6px;

    background: var(--white);

    color: var(--muted);

    font-size: 7px;
}

.preview-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-top: 12px;
}

.preview-stat {
    padding: 11px;

    border:
        1px solid
        var(--border-light);

    border-radius: 9px;

    background: var(--white);

    box-shadow: var(--shadow-xs);
}

.preview-stat-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;
}

.preview-stat-top small {
    color: var(--muted);

    font-size: 6px;
}

.stat-icon {
    font-size: 10px;
}

.preview-stat > strong {
    display: block;

    margin-top: 7px;

    font-size: 17px;

    line-height: 1;
}

.stat-positive,
.stat-warning {
    display: block;

    margin-top: 5px;

    font-size: 6px;
    font-weight: 700;
}

.stat-positive {
    color: var(--green);
}

.stat-warning {
    color: var(--orange);
}

.preview-columns {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 0.75fr);

    gap: 9px;

    margin-top: 10px;
}

.preview-card {
    min-width: 0;

    padding: 12px;

    border:
        1px solid
        var(--border-light);

    border-radius: 10px;

    background: var(--white);
}

.preview-card-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 6px;
}

.preview-card-heading strong {
    display: block;

    font-size: 8px;
}

.preview-card-heading small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

.preview-link {
    color: var(--blue-dark);

    font-size: 6px;
    font-weight: 700;
}

.appointment-row {
    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;

    padding: 7px 0;

    border-bottom: 1px solid var(--border-light);
}

.appointment-row:last-child {
    border-bottom: 0;
}

.pet-avatar {
    width: 23px;
    height: 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 7px;

    background: var(--cream);

    font-size: 11px;
}

.appointment-info {
    min-width: 0;

    flex: 1;
}

.appointment-info strong {
    display: block;

    font-size: 7px;
}

.appointment-info small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 5px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.appointment-row em {
    padding: 3px 5px;

    border-radius: 99px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 5px;

    font-style: normal;

    font-weight: 700;
}

.appointment-row em.online {
    background: var(--blue-soft);

    color: var(--blue-deep);
}

.appointment-row em.pending {
    background: var(--orange-soft);

    color: var(--orange);
}

.ai-preview {
    background:
        linear-gradient(
            145deg,
            #fafdff,
            #f3faff
        );
}

.ai-preview-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.ai-label {
    color: var(--purple);

    font-size: 7px;
    font-weight: 800;
}

.ai-label span {
    margin-right: 3px;
}

.ai-status {
    color: var(--green);

    font-size: 5px;
    font-weight: 700;
}

.ai-preview h4 {
    margin:
        13px 0
        5px;

    font-size: 10px;

    line-height: 1.3;
}

.ai-preview > p {
    color: var(--muted);

    font-size: 6px;

    line-height: 1.5;
}

.ai-message {
    display: flex;

    gap: 6px;

    margin-top: 10px;

    padding: 7px;

    border:
        1px solid
        #e1eafa;

    border-radius: 8px;

    background: var(--white);
}

.ai-message > span {
    font-size: 10px;
}

.ai-message strong {
    display: block;

    font-size: 6px;
}

.ai-message p {
    margin-top: 2px;

    color: var(--muted);

    font-size: 5px;

    line-height: 1.45;
}

.ai-preview-link {
    display: block;

    margin-top: 9px;

    color: var(--purple);

    font-size: 6px;
    font-weight: 800;
}

.preview-quick-actions {
    display: flex;

    gap: 7px;

    margin-top: 9px;
}

.preview-quick-actions button {
    flex: 1;

    min-height: 24px;

    border:
        1px solid
        var(--border-light);

    border-radius: 7px;

    background: #fbfdfe;

    color: var(--muted);

    font-size: 6px;

    cursor: default;
}

.preview-quick-actions button span {
    margin-right: 3px;

    color: var(--blue-dark);

    font-weight: 800;
}

/* =========================================================
   FLOATING HERO CARDS
========================================================= */

.hero-floating-card {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 12px;

    border:
        1px solid
        rgba(220, 234, 242, 0.95);

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow: var(--shadow-md);

    backdrop-filter: blur(12px);

    z-index: 5;
}

.floating-card-one {
    left: -25px;
    bottom: 50px;
}

.floating-card-two {
    right: -23px;
    top: 82px;
}

.floating-icon {
    width: 26px;
    height: 26px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--blue-soft);

    font-size: 11px;
}

.hero-floating-card strong {
    display: block;

    font-size: 8px;
}

.hero-floating-card small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

/* =========================================================
   VALUE STRIP
========================================================= */

.value-strip {
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);

    background: var(--white);
}

.value-strip-inner {
    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.value-intro {
    display: flex;

    flex-direction: column;

    flex-shrink: 0;
}

.value-eyebrow {
    color: var(--blue-dark);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.value-intro strong {
    margin-top: 3px;

    font-size: 13px;
}

.value-items {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 9px;
}

.value-items span {
    padding: 6px 10px;

    border:
        1px solid
        var(--border-light);

    border-radius: 99px;

    background: #fbfdfe;

    color: var(--muted);

    font-size: 13px;
    font-weight: 600;
}

/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section {
    padding:
        105px 0;
}

.platform-intro-section {
    background: var(--white);
}

.services-section {
    background: var(--blue-pale);
}

.features-section {
    background: var(--white);
}

.journey-section {
    background: var(--cream);
}

.ai-section {
    background: var(--blue-pale);
}

.tenant-section {
    background: var(--white);
}

.roles-section {
    background: #fbfdfe;
}

.why-section {
    background: var(--cream);
}

.story-preview-section {
    background: var(--white);
}

.product-preview-section {
    background: var(--blue-pale);
}

.demo-section {
    background: var(--white);
}

.section-heading {
    margin-bottom: 48px;
}

.section-heading.centered {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.section-label {
    margin-bottom: 12px;

    color: var(--blue-dark);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.section-heading h2,
.ai-content h2,
.tenant-copy h2,
.why-intro h2,
.story-preview-copy h2,
.demo-copy h2 {
    margin:
        0 0
        17px;

    color: var(--ink);

    font-size:
        clamp(
            31px,
            4vw,
            47px
        );

    line-height: 1.10;

    letter-spacing: -1.7px;

    font-weight: 800;
}

.section-heading h2 span,
.ai-content h2 span,
.tenant-copy h2 span,
.why-intro h2 span,
.story-preview-copy h2 span,
.demo-copy h2 span {
    color: var(--blue-dark);
}

.section-heading p {
    max-width: 690px;

    margin-left: auto;
    margin-right: auto;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;
}

.split-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.75fr);

    gap: 70px;

    align-items: end;
}

.split-heading > div:last-child {
    padding-bottom: 2px;
}

.split-heading > div:last-child p {
    margin: 0 0 14px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.75;
}

.heading-action {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--blue-dark);

    font-size: 12px;
    font-weight: 800;
}

.heading-action:hover {
    gap: 11px;
}

.card-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    margin-top: 18px;

    color: var(--blue-dark);

    font-size: 13px;
    font-weight: 800;
}

.card-link:hover {
    gap: 9px;
}

/* =========================================================
   PLATFORM HIGHLIGHTS
========================================================= */

.platform-highlight-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.platform-highlight {
    padding: 24px;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow: var(--shadow-xs);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.platform-highlight:hover {
    transform: translateY(-5px);

    border-color: #c9e2ef;

    box-shadow: var(--shadow-md);
}

.highlight-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.card-index {
    color: #c3d2de;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.8px;
}

.card-icon {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--blue-soft);

    font-size: 18px;
}

.platform-highlight h3 {
    margin:
        20px 0
        8px;

    font-size: 18px;

    letter-spacing: -0.3px;
}

.platform-highlight p {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.75;
}

/* =========================================================
   SERVICES
========================================================= */

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;
}

.service-card {
    position: relative;

    min-height: 255px;

    padding: 23px;

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow: var(--shadow-xs);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-5px);

    border-color: #c4dfed;

    box-shadow: var(--shadow-md);
}

.service-card-featured {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5fbff
        );

    border-color: #cce4f1;
}

.service-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.service-number {
    color: #a6b5c0;

    font-size: 12px;
    font-weight: 800;
}

.service-icon {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--blue-soft);

    font-size: 18px;
}

.service-card h3 {
    margin:
        19px 0
        8px;

    font-size: 17px;

    line-height: 1.25;
}

.service-card p {
    color: var(--muted);

    font-size: 13.5px;

    line-height: 1.7;
}

.service-tags,
.feature-tags,
.system-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 16px;
}

.service-tags span,
.feature-tags span,
.system-tags span {
    padding: 5px 8px;

    border-radius: 99px;

    background: #f5f9fb;

    color: #6c8090;

    font-size: 11px;
    font-weight: 700;
}

.services-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 22px;

    padding:
        18px 20px;

    border:
        1px solid
        #d8eaf4;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.72);
}

.services-cta > div {
    display: flex;

    flex-direction: column;
}

.services-cta strong {
    font-size: 12px;
}

.services-cta span {
    margin-top: 3px;

    color: var(--muted);

    font-size: 13px;
}

/* =========================================================
   FEATURES / 14 MODULES
========================================================= */

.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 13px;
}

.feature-card {
    position: relative;

    min-height: 255px;

    padding: 21px;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow: var(--shadow-xs);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-4px);

    border-color: #c8e1ef;

    box-shadow: var(--shadow-sm);
}

.feature-number {
    position: absolute;

    top: 18px;
    right: 19px;

    color: #a6b5c0;

    font-size: 12px;
    font-weight: 800;
}

.feature-icon {
    width: 41px;
    height: 41px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 11px;

    background: var(--blue-soft);

    font-size: 17px;
}

.feature-card h3 {
    margin:
        0 0
        8px;

    font-size: 15px;

    line-height: 1.3;
}

.feature-card p {
    color: var(--muted);

    font-size: 13.5px;

    line-height: 1.7;
}

.feature-tags {
    margin-top: 13px;
}

.feature-tags span {
    padding: 4px 7px;

    font-size: 11px;
}

/* =========================================================
   ALL SOLUTIONS - SEO CONTENT BLOCK (homepage)
========================================================= */

.feature-card h3 a {
    color: inherit;

    text-decoration: none;
}

.feature-card h3 a:hover {
    color: var(--blue-dark);
}

.solutions-category-block {
    margin-top: 36px;
}

.solutions-category-block:first-of-type {
    margin-top: 8px;
}

.solutions-category-title {
    margin-bottom: 14px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.02em;

    color: var(--blue-dark);
}

.solutions-index-cta {
    display: flex;

    justify-content: center;

    margin-top: 32px;
}

.feature-system-card {
    display: grid;

    grid-template-columns: 52px minmax(0, 1fr);

    gap: 20px;

    margin-top: 25px;

    padding: 27px;

    border:
        1px solid
        #cde4f0;

    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            #f7fcff,
            #ffffff
        );

    box-shadow: var(--shadow-sm);
}

.system-card-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--blue-soft);

    font-size: 21px;
}

.system-card-label {
    color: var(--blue-dark);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.1px;
}

.system-card-content h3 {
    margin:
        7px 0
        7px;

    font-size: 22px;

    line-height: 1.2;

    letter-spacing: -0.5px;
}

.system-card-content p {
    max-width: 850px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.7;
}

.system-tags {
    margin-top: 15px;
}

.features-bottom-note {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 25px;

    text-align: center;
}

.features-bottom-note strong {
    font-size: 13.5px;
}

.features-bottom-note span {
    color: var(--muted);

    font-size: 12.5px;
}

/* =========================================================
   JOURNEY
========================================================= */

.journey {
    display: flex;

    align-items: flex-start;

    justify-content: center;

    width: 100%;
}

.journey-step {
    width: 175px;

    text-align: center;
}

.journey-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto
        11px;

    border:
        1px solid
        #d9e9f1;

    border-radius: 14px;

    background: var(--white);

    box-shadow: var(--shadow-xs);

    font-size: 18px;
}

.journey-step > span {
    color: var(--blue-dark);

    font-size: 11.5px;
    font-weight: 800;
}

.journey-step h3 {
    margin:
        5px 0
        5px;

    font-size: 14px;
}

.journey-step p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.55;
}

.journey-line {
    flex: 1;

    max-width: 65px;

    height: 1px;

    margin-top: 24px;

    background: #cbdde7;
}

/* =========================================================
   AI SECTION
========================================================= */

.ai-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 70px;

    align-items: center;
}

.ai-content > p {
    max-width: 610px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}

.ai-sources {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 27px;
}

.ai-source {
    display: grid;

    grid-template-columns: 29px minmax(0, 1fr);

    gap: 12px;

    align-items: start;
}

.ai-source > span {
    color: var(--blue-dark);

    font-size: 9px;
    font-weight: 800;
}

.ai-source strong {
    display: block;

    font-size: 12px;
}

.ai-source p {
    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.6;
}

.ai-disclaimer {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 24px;

    padding: 12px;

    border:
        1px solid
        #dce7ed;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.65);

    color: var(--muted);

    font-size: 12px;

    line-height: 1.55;
}

.ai-disclaimer > span {
    width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--blue-soft);

    color: var(--blue-dark);

    font-size: 12px;
    font-weight: 800;
}

/* =========================================================
   CHAT WINDOW
========================================================= */

.chat-window {
    overflow: hidden;

    border:
        1px solid
        #d9e8f0;

    border-radius: 19px;

    background: var(--white);

    box-shadow: var(--shadow-lg);
}

.chat-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        16px 18px;

    border-bottom: 1px solid var(--border-light);
}

.chat-brand {
    display: flex;

    align-items: center;

    gap: 10px;
}

.chat-avatar {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: var(--blue-soft);

    font-size: 17px;
}

.chat-brand strong {
    display: block;

    font-size: 11px;
}

.chat-brand small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 8px;
}

.chat-online {
    color: var(--green);

    font-size: 8px;
    font-weight: 700;
}

.chat-online span {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 4px;

    border-radius: 50%;

    background: var(--green);
}

.chat-body {
    display: flex;

    flex-direction: column;

    gap: 12px;

    min-height: 430px;

    padding: 20px;

    background:
        linear-gradient(
            180deg,
            #fbfdfe,
            #f7fbfd
        );
}

.chat-date {
    align-self: center;

    padding: 4px 8px;

    border-radius: 99px;

    background: var(--white);

    color: var(--muted-light);

    font-size: 7px;
}

.chat-message {
    max-width: 76%;

    font-size: 10px;

    line-height: 1.6;
}

.user-message {
    align-self: flex-end;

    padding:
        9px 12px;

    border-radius:
        13px
        13px
        4px
        13px;

    background: var(--blue-dark);

    color: var(--white);
}

.ai-message-box {
    display: flex;

    align-self: flex-start;

    gap: 9px;
}

.chat-ai-avatar {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background: var(--blue-soft);

    font-size: 12px;
}

.ai-message-box > div:last-child {
    padding:
        10px 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        4px
        13px
        13px
        13px;

    background: var(--white);
}

.ai-message-box p {
    color: var(--muted);

    font-size: 9px;

    line-height: 1.65;
}

.source-pill {
    display: inline-block;

    margin-top: 8px;

    padding: 4px 7px;

    border-radius: 99px;

    background: var(--blue-soft);

    color: var(--blue-deep);

    font-size: 7px;
    font-weight: 700;
}

.chat-input {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin:
        0 15px
        15px;

    padding:
        8px 9px
        8px 13px;

    border:
        1px solid
        var(--border);

    border-radius: 10px;

    color: var(--muted-light);

    font-size: 9px;
}

.chat-input button {
    width: 26px;
    height: 26px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: var(--blue-dark);

    color: var(--white);

    cursor: default;
}

/* =========================================================
   MULTI CLINIC
========================================================= */

.tenant-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 75px;

    align-items: center;
}

.tenant-copy > p {
    max-width: 570px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}

.tenant-benefits {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-top: 28px;
}

.tenant-benefits > div {
    display: flex;

    align-items: flex-start;

    gap: 9px;
}

.tenant-benefits > div > span {
    width: 19px;
    height: 19px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--green-soft);

    color: var(--green);

    font-size: 9px;
    font-weight: 800;
}

.tenant-benefits strong {
    display: block;

    font-size: 10px;
}

.tenant-benefits small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 8px;

    line-height: 1.45;
}

.tenant-visual {
    position: relative;

    min-height: 430px;
}

.tenant-card-main {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(
        390px,
        75%
    );

    transform: translate(
        -50%,
        -50%
    );

    padding: 22px;

    border:
        1px solid
        #cfe5f1;

    border-radius: 20px;

    background: var(--white);

    box-shadow: var(--shadow-lg);

    z-index: 2;
}

.tenant-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 14px;

    border-bottom: 1px solid var(--border-light);

    color: var(--muted);

    font-size: 9px;
    font-weight: 700;
}

.tenant-card-top > div {
    display: flex;

    align-items: center;

    gap: 5px;
}

.tenant-status {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);
}

.tenant-card-top > span {
    padding: 4px 7px;

    border-radius: 99px;

    background: var(--blue-soft);

    color: var(--blue-deep);

    font-size: 7px;
}

.tenant-card-content {
    padding:
        25px 0
        23px;
}

.tenant-overline {
    color: var(--blue-dark);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}

.tenant-card-content h3 {
    margin:
        7px 0
        10px;

    font-size: 28px;

    line-height: 1.12;

    letter-spacing: -1px;
}

.tenant-url {
    color: var(--muted-light);

    font-size: 8px;
}

.tenant-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    padding-top: 17px;

    border-top: 1px solid var(--border-light);
}

.tenant-stats > div {
    display: flex;

    flex-direction: column;
}

.tenant-stats strong {
    font-size: 16px;
}

.tenant-stats span {
    margin-top: 3px;

    color: var(--muted-light);

    font-size: 7px;
}

.tenant-floating {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px 13px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow: var(--shadow-md);

    z-index: 3;
}

.tenant-floating > span {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--blue-soft);

    font-size: 13px;
}

.tenant-floating strong {
    display: block;

    font-size: 8px;
}

.tenant-floating small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

.tenant-card.one {
    top: 45px;
    left: 0;
}

.tenant-card.two {
    right: 0;
    top: 100px;
}

.tenant-card.three {
    left: 8px;
    bottom: 55px;
}

/* =========================================================
   ROLES
========================================================= */

.role-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.role-card {
    padding: 26px;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-lg);

    background: var(--white);

    box-shadow: var(--shadow-xs);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.role-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--shadow-md);
}

.role-card-featured {
    border-color: #c8e2ef;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f6fbff
        );
}

.role-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.role-icon {
    width: 47px;
    height: 47px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: var(--blue-soft);

    font-size: 19px;
}

.role-number {
    color: #a5b3be;

    font-size: 12px;
    font-weight: 800;
}

.role-label {
    margin-top: 22px;

    color: var(--blue-dark);

    font-size: 11.5px;
    font-weight: 800;

    letter-spacing: 1px;
}

.role-card h3 {
    margin:
        8px 0
        9px;

    font-size: 19px;

    line-height: 1.25;
}

.role-card > p {
    color: var(--muted);

    font-size: 13.5px;

    line-height: 1.7;
}

.role-card ul {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin:
        20px 0
        0;

    list-style: none;
}

.role-card li {
    position: relative;

    padding-left: 15px;

    color: var(--ink-soft);

    font-size: 13px;
}

.role-card li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: var(--green);

    font-size: 13px;
    font-weight: 800;
}

/* =========================================================
   WHY
========================================================= */

.why-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.8fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 45px;
}

.why-intro p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}

.why-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    overflow: hidden;

    border:
        1px solid
        #e7ded0;

    border-radius: 18px;

    background: #e7ded0;
}

.why-item {
    display: flex;

    gap: 15px;

    padding: 26px;

    background: rgba(255, 255, 255, 0.68);
}

.why-item > span {
    color: #a99f90;

    font-size: 9px;
    font-weight: 800;
}

.why-item h3 {
    margin:
        0 0
        5px;

    font-size: 14px;
}

.why-item p {
    color: var(--muted);

    font-size: 9px;

    line-height: 1.65;
}

/* =========================================================
   STORY
========================================================= */

.story-preview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 80px;

    align-items: center;
}

.story-preview-copy > p {
    max-width: 560px;

    margin-bottom: 12px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}

.story-preview-copy blockquote {
    margin:
        22px 0;

    padding:
        17px 20px;

    border-left:
        3px solid
        var(--blue);

    background: var(--blue-pale);

    color: var(--ink-soft);

    font-size: 13px;
    font-weight: 700;

    line-height: 1.65;
}

.story-link {
    margin-top: 6px;
}

.story-preview-card {
    position: relative;

    overflow: hidden;

    padding: 29px;

    border:
        1px solid
        #e1e7eb;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fcfd
        );

    box-shadow: var(--shadow-md);
}

.story-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.story-scooby {
    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: var(--cream);

    font-size: 24px;
}

.story-year {
    color: var(--muted-light);

    font-size: 8px;
    font-weight: 700;
}

.story-card-content {
    margin-top: 30px;
}

.story-overline {
    color: var(--blue-dark);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.story-card-content h3 {
    margin:
        8px 0
        6px;

    font-size: 29px;

    letter-spacing: -1px;
}

.story-card-content p {
    color: var(--muted);

    font-size: 11px;
}

.story-founder {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 27px;

    padding-top: 20px;

    border-top: 1px solid var(--border-light);
}

.story-founder > strong {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--blue-soft);

    color: var(--blue-deep);

    font-size: 9px;
}

.story-founder > div {
    display: flex;

    flex-direction: column;
}

.story-founder > div strong {
    font-size: 9px;
}

.story-founder > div span {
    margin-top: 2px;

    color: var(--muted-light);

    font-size: 7px;
}

.story-quote {
    margin-top: 21px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.75;

    font-style: italic;
}

.story-tagline {
    margin-top: 22px;

    padding-top: 17px;

    border-top: 1px solid var(--border-light);

    color: var(--muted);

    font-size: 13px;
}

.story-tagline strong {
    color: var(--blue-dark);
}

/* =========================================================
   LARGE PRODUCT PREVIEW
========================================================= */

.large-product-preview {
    overflow: hidden;

    border:
        1px solid
        #d9e7ef;

    border-radius: 22px;

    background: var(--white);

    box-shadow: var(--shadow-lg);
}

.large-preview-browser {
    overflow: hidden;
}

.large-browser-top {
    height: 43px;

    display: grid;

    grid-template-columns: 100px 1fr 100px;

    align-items: center;

    padding: 0 16px;

    border-bottom: 1px solid var(--border-light);

    background: #f8fbfd;
}

.large-browser-top .window-url {
    font-size: 8px;
}

.large-browser-top .window-secure {
    font-size: 8px;
}

.large-dashboard {
    display: grid;

    grid-template-columns:
        180px minmax(0, 1fr);

    min-height: 570px;
}

.large-dashboard-sidebar {
    padding: 22px 13px;

    border-right: 1px solid var(--border-light);

    background: #fbfdfe;
}

.large-sidebar-logo {
    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        0 7px
        12px;
}

.large-sidebar-logo img {
    width: 29px;
    height: 29px;

    object-fit: contain;
}

.large-sidebar-logo strong {
    display: block;

    font-size: 10px;
}

.large-sidebar-logo small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

.sidebar-label {
    display: block;

    margin:
        15px 7px
        7px;

    color: #9eacb8;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.9px;
}

.large-sidebar-item {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 32px;

    padding: 0 8px;

    border-radius: 7px;

    color: #607384;

    font-size: 8px;
    font-weight: 600;
}

.large-sidebar-item span {
    width: 14px;

    text-align: center;

    font-size: 10px;
}

.large-sidebar-item.active {
    background: var(--blue-soft);

    color: var(--blue-deep);
}

.large-dashboard-content {
    min-width: 0;

    padding: 25px;
}

.large-dashboard-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.large-dashboard-heading small {
    color: var(--muted-light);

    font-size: 8px;
}

.large-dashboard-heading h3 {
    max-width: 500px;

    margin:
        4px 0
        0;

    font-size: 16px;

    line-height: 1.3;
}

.large-heading-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}

.large-heading-actions button {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--border);

    border-radius: 8px;

    background: var(--white);

    color: var(--muted);

    cursor: default;

    font-size: 10px;
}

.large-heading-actions .preview-avatar {
    width: 29px;
    height: 29px;
}

.large-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-top: 23px;
}

.large-stat {
    padding: 15px;

    border:
        1px solid
        var(--border-light);

    border-radius: 11px;

    background: var(--white);

    box-shadow: var(--shadow-xs);
}

.large-stat > div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;
}

.large-stat > div span {
    color: var(--muted);

    font-size: 7px;
}

.large-stat i {
    font-style: normal;

    font-size: 11px;
}

.large-stat > strong {
    display: block;

    margin-top: 9px;

    font-size: 20px;

    line-height: 1;
}

.large-stat > small {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 7px;
}

.large-preview-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.78fr);

    gap: 11px;

    margin-top: 11px;
}

.large-preview-card {
    min-width: 0;

    padding: 16px;

    border:
        1px solid
        var(--border-light);

    border-radius: 12px;

    background: var(--white);

    box-shadow: var(--shadow-xs);
}

.large-card-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}

.large-card-heading strong {
    display: block;

    font-size: 9px;
}

.large-card-heading small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

.large-card-heading > span {
    color: var(--blue-dark);

    font-size: 7px;
    font-weight: 700;
}

.large-appointment {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 0;

    border-bottom: 1px solid var(--border-light);
}

.large-appointment:last-child {
    border-bottom: 0;
}

.large-appointment > span {
    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;

    background: var(--cream);

    font-size: 12px;
}

.large-appointment > div {
    min-width: 0;

    flex: 1;
}

.large-appointment strong {
    display: block;

    font-size: 8px;
}

.large-appointment small {
    display: block;

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 6px;
}

.large-appointment em {
    padding: 4px 6px;

    border-radius: 99px;

    background: var(--green-soft);

    color: var(--green);

    font-size: 5px;

    font-style: normal;

    font-weight: 800;
}

.large-appointment em.online {
    background: var(--blue-soft);

    color: var(--blue-deep);
}

.large-appointment em.pending {
    background: var(--orange-soft);

    color: var(--orange);
}

.chart-summary {
    display: flex;

    align-items: baseline;

    gap: 7px;

    margin-top: 15px;
}

.chart-summary strong {
    font-size: 24px;
}

.chart-summary span {
    color: var(--muted-light);

    font-size: 7px;
}

.mini-chart {
    height: 180px;

    display: flex;

    align-items: flex-end;

    justify-content: space-around;

    gap: 10px;

    margin-top: 15px;

    padding:
        0 8px
        12px;

    border-bottom: 1px solid var(--border);
}

.chart-column {
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    gap: 6px;

    flex: 1;
}

.chart-column span {
    display: block;

    width: 17px;

    min-height: 15px;

    border-radius:
        5px
        5px
        2px
        2px;

    background:
        linear-gradient(
            180deg,
            var(--blue),
            #a8dcf4
        );
}

.chart-column small {
    color: var(--muted-light);

    font-size: 6px;
}

.large-dashboard-actions {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: 11px;
}

.large-dashboard-actions button {
    min-height: 32px;

    border:
        1px solid
        var(--border-light);

    border-radius: 8px;

    background: #fbfdfe;

    color: var(--muted);

    font-size: 7px;

    cursor: default;
}

.large-dashboard-actions button span {
    color: var(--blue-dark);

    font-weight: 800;
}

.preview-disclaimer {
    margin-top: 12px;

    text-align: center;

    color: var(--muted-light);

    font-size: 9px;
}

/* =========================================================
   DEMO
========================================================= */

.demo-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 75px;

    align-items: center;
}

.demo-copy > p {
    max-width: 570px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}

.demo-points {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 25px;
}

.demo-points > div {
    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--ink-soft);

    font-size: 13.5px;
    font-weight: 600;
}

.demo-points > div span {
    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green-soft);

    color: var(--green);

    font-size: 13.5px;
    font-weight: 800;
}

.demo-card {
    padding: 30px;

    border:
        1px solid
        #cfe5f1;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f7fcff,
            #ffffff
        );

    box-shadow: var(--shadow-md);
}

.demo-card-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;
}

.demo-overline {
    color: var(--blue-dark);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.demo-card h3 {
    margin:
        8px 0
        6px;

    font-size: 25px;

    letter-spacing: -0.7px;
}

.demo-card-header p {
    max-width: 400px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;
}

.demo-card-paw {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 15px;

    background: var(--blue-soft);

    font-size: 22px;
}

.demo-card-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-top: 25px;
}

.demo-submit {
    width: 100%;
}

.form-note {
    margin-top: 14px;

    color: var(--muted-light);

    font-size: 12px;

    text-align: center;
}

/* =========================================================
   FINAL CTA
========================================================= */

.cta-section {
    position: relative;

    overflow: hidden;

    padding:
        105px 0;

    background:
        linear-gradient(
            135deg,
            #eff9ff,
            #ffffff 65%
        );
}

.cta-section::before {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -160px;
    top: -180px;

    border-radius: 50%;

    background: rgba(103, 183, 232, 0.10);
}

.cta-inner {
    position: relative;

    z-index: 2;
}

.cta-content {
    max-width: 770px;

    margin:
        0 auto;

    text-align: center;
}

.cta-paw {
    width: 53px;
    height: 53px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto
        17px;

    border-radius: 16px;

    background: var(--white);

    box-shadow: var(--shadow-sm);

    font-size: 22px;
}

.cta-content .section-label {
    margin-bottom: 10px;
}

.cta-content h2 {
    margin:
        0 0
        16px;

    font-size:
        clamp(
            33px,
            4.5vw,
            51px
        );

    line-height: 1.08;

    letter-spacing: -2px;
}

.cta-content h2 span {
    color: var(--blue-dark);
}

.cta-content > p {
    max-width: 630px;

    margin:
        0 auto;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}

.cta-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 27px;
}

.cta-tagline {
    margin-top: 20px;

    color: var(--muted-light);

    font-size: 13px;
}

.cta-tagline strong {
    color: var(--blue-dark);
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding:
        65px 0
        25px;

    background: #102033;

    color: #ffffff;
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.7fr
        0.8fr
        0.8fr
        0.8fr;

    gap: 50px;

    padding-bottom: 50px;
}

.footer-brand .brand-copy strong {
    color: var(--white);
}

.footer-brand .brand-copy span {
    color: #91a5b5;
}

.footer-brand p {
    max-width: 330px;

    margin-top: 18px;

    color: #c3d2de;

    font-size: 13.5px;

    line-height: 1.7;
}

.footer-tagline {
    margin-top: 15px;

    color: #c9d5dd;

    font-size: 13px;
}

.footer-contact {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin-top: 19px;

    color: #c3d2de;

    font-size: 13px;
}

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer-column h4 {
    margin:
        0 0
        7px;

    color: var(--white);

    font-size: 13px;

    letter-spacing: 0.3px;
}

.footer-column a {
    color: #c3d2de;

    font-size: 13px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:hover {
    color: #ffffff;

    transform: translateX(2px);
}

.footer-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    color: #aebfcc;

    font-size: 12.5px;
}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    animation:
        scoobyFadeUp
        0.65s
        ease
        both;
}

.reveal-delay {
    animation-delay: 0.12s;
}

@keyframes scoobyFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline:
        3px solid
        rgba(22, 135, 199, 0.25);

    outline-offset: 3px;
}

::selection {
    background: #ccecff;
    color: var(--ink);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(
            calc(100% - 40px),
            var(--container)
        );
    }

    .desktop-nav {
        gap: 18px;
    }

    .hero-grid {
        gap: 35px;
    }

    .hero-content h1 {
        font-size: 48px;
    }

    .feature-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .large-dashboard {
        grid-template-columns: 155px minmax(0, 1fr);
    }

    .tenant-grid,
    .ai-grid,
    .demo-grid {
        gap: 45px;
    }
}

/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 850px) {

    .container {
        width: min(
            calc(100% - 32px),
            var(--container)
        );
    }

    .desktop-nav,
    .nav-actions {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }

    .mobile-menu {
        padding:
            15px 16px
            20px;

        border-top:
            1px solid
            var(--border-light);

        background: var(--white);
    }

    .mobile-menu-links {
        display: flex;

        flex-direction: column;

        gap: 2px;
    }

    .mobile-menu-links a {
        padding:
            11px 10px;

        border-radius: 8px;

        color: var(--ink-soft);

        font-size: 13px;
        font-weight: 600;
    }

    .mobile-menu-links a:hover {
        background: var(--blue-soft);

        color: var(--blue-dark);
    }

    .mobile-menu-actions {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 12px;
    }

    .hero-section {
        padding:
            55px 0
            65px;
    }

    .hero-grid,
    .ai-grid,
    .tenant-grid,
    .story-preview-grid,
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        text-align: center;
    }

    .eyebrow {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-note,
    .hero-stats {
        justify-content: center;
    }

    .hero-product {
        padding:
            10px 20px
            20px;
    }

    .floating-card-one {
        left: 0;
    }

    .floating-card-two {
        right: 0;
    }

    .value-strip-inner {
        padding:
            20px 0;

        align-items: flex-start;

        flex-direction: column;
    }

    .value-items {
        justify-content: flex-start;
    }

    .platform-highlight-grid,
    .services-grid,
    .role-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .feature-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .split-heading,
    .why-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .journey {
        display: grid;

        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 10px;
    }

    .journey-step {
        width: auto;
    }

    .journey-line {
        display: none;
    }

    .tenant-visual {
        min-height: 390px;
    }

    .large-dashboard {
        grid-template-columns: 135px minmax(0, 1fr);
    }

    .large-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {
        width: min(
            calc(100% - 26px),
            var(--container)
        );
    }

    .nav-container {
        min-height: 66px;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
    }

    .brand-copy strong {
        font-size: 15px;
    }

    .hero-section {
        min-height: auto;

        padding:
            45px 0
            55px;
    }

    .hero-content h1 {
        font-size: 39px;

        letter-spacing: -1.8px;
    }

    .hero-description {
        font-size: 13px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        gap: 14px;
    }

    .hero-stat strong {
        font-size: 21px;
    }

    .hero-stat span {
        font-size: 12.5px;
    }

    .hero-product {
        padding:
            5px 0
            15px;
    }

    .dashboard-preview {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .preview-sidebar {
        padding: 12px 6px;
    }

    .preview-brand {
        padding-left: 3px;
    }

    .preview-brand img {
        width: 20px;
        height: 20px;
    }

    .preview-brand strong {
        font-size: 7px;
    }

    .preview-brand small {
        font-size: 5px;
    }

    .preview-nav {
        gap: 4px;

        font-size: 5.5px;
    }

    .preview-nav span {
        font-size: 7px;
    }

    .preview-main {
        padding: 11px;
    }

    .preview-header h3 {
        font-size: 10px;
    }

    .preview-stat-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 4px;
    }

    .preview-stat {
        padding: 7px;
    }

    .preview-stat > strong {
        font-size: 12px;
    }

    .preview-columns {
        grid-template-columns: 1fr;
    }

    .ai-preview {
        display: none;
    }

    .floating-card-one {
        left: -5px;
        bottom: 20px;
    }

    .floating-card-two {
        right: -5px;
        top: 45px;
    }

    .hero-floating-card {
        padding: 7px 9px;
    }

    .hero-floating-card strong {
        font-size: 7px;
    }

    .hero-floating-card small {
        font-size: 5px;
    }

    .value-items {
        gap: 6px;
    }

    .value-items span {
        font-size: 13px;
    }

    .section {
        padding:
            72px 0;
    }

    .section-heading {
        margin-bottom: 34px;
    }

    .section-heading h2,
    .ai-content h2,
    .tenant-copy h2,
    .why-intro h2,
    .story-preview-copy h2,
    .demo-copy h2 {
        font-size: 32px;

        letter-spacing: -1.2px;
    }

    .platform-highlight-grid,
    .services-grid,
    .feature-grid,
    .role-grid {
        grid-template-columns: 1fr;
    }

    .platform-highlight,
    .service-card,
    .feature-card,
    .role-card {
        min-height: auto;
    }

    .services-cta {
        align-items: flex-start;

        flex-direction: column;
    }

    .feature-system-card {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .system-card-content h3 {
        font-size: 20px;
    }

    .features-bottom-note {
        flex-direction: column;

        gap: 3px;
    }

    .journey {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .journey-step {
        display: grid;

        grid-template-columns: 50px 1fr;

        column-gap: 13px;

        align-items: center;

        text-align: left;
    }

    .journey-icon {
        grid-row: span 3;

        margin: 0;
    }

    .journey-step > span {
        align-self: end;
    }

    .journey-step h3 {
        margin: 2px 0;
    }

    .journey-step p {
        margin-bottom: 0;
    }

    .ai-grid {
        gap: 35px;
    }

    .tenant-benefits {
        grid-template-columns: 1fr;
    }

    .tenant-visual {
        min-height: 360px;
    }

    .tenant-card-main {
        width: 82%;
    }

    .tenant-card-content h3 {
        font-size: 23px;
    }

    .tenant-floating {
        padding: 8px;
    }

    .tenant-card.one {
        left: -3px;
    }

    .tenant-card.two {
        right: -3px;
    }

    .tenant-card.three {
        left: -3px;
        bottom: 25px;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-item {
        padding: 20px;
    }

    .story-preview-grid {
        gap: 35px;
    }

    .story-preview-card {
        padding: 22px;
    }

    .large-product-preview {
        border-radius: 15px;
    }

    .large-dashboard {
        grid-template-columns: 1fr;
    }

    .large-dashboard-sidebar {
        display: none;
    }

    .large-dashboard-content {
        padding: 14px;
    }

    .large-dashboard-heading h3 {
        font-size: 12px;
    }

    .large-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;
    }

    .large-stat {
        padding: 10px;
    }

    .large-stat > strong {
        font-size: 17px;
    }

    .large-preview-grid {
        grid-template-columns: 1fr;
    }

    .large-dashboard-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .demo-card {
        padding: 22px;
    }

    .demo-card-actions {
        grid-template-columns: 1fr;
    }

    .cta-section {
        padding:
            75px 0;
    }

    .cta-content h2 {
        font-size: 34px;

        letter-spacing: -1.3px;
    }

    .cta-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .cta-actions .btn {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 400px) {

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-stats {
        gap: 9px;
    }

    .hero-stat-divider {
        height: 30px;
    }

    .floating-card-one,
    .floating-card-two {
        display: none;
    }

    .window-topbar {
        grid-template-columns:
            55px 1fr 55px;
    }

    .preview-quick-actions {
        display: none;
    }

    .large-browser-top {
        grid-template-columns:
            60px 1fr 60px;
    }

    .large-heading-actions button:nth-child(1),
    .large-heading-actions button:nth-child(2) {
        display: none;
    }

    .tenant-visual {
        min-height: 310px;
    }

    .tenant-card-main {
        width: 88%;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   LANDING POLISH - key services + social links
========================================================= */
.highlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.highlight-grid .feature-card h3 {
    font-size: 17px;
}

.highlight-cta {
    display: flex;
    justify-content: center;
    margin-top: 38px;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .highlight-grid {
        grid-template-columns: 1fr;
    }
}

/* Alternate white / pale-blue sections so the page rhythm is consistent */
.features-section   { background: var(--white); }
.journey-section    { background: var(--blue-pale); }
.ai-section         { background: var(--white); }
.roles-section      { background: var(--blue-pale); }
.product-preview-section { background: var(--white); }
.demo-section       { background: var(--blue-pale); }

.highlight-grid { gap: 22px; }
.highlight-grid .feature-card { padding: 28px 26px; }
.highlight-grid .feature-card p { font-size: 14.5px; line-height: 1.65; }

.footer-contact a { color: inherit; }
.footer-contact a:hover { color: #ffffff; text-decoration: underline; }


/* =========================================================
   MOBILE MENU - open state (hamburger)
========================================================= */

.mobile-menu-button {
    border: 0;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-button span {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu.open {
    display: block;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

@media (min-width: 851px) {
    .mobile-menu,
    .mobile-menu.open {
        display: none;
    }
}