/* =======================================================
   Savitri Systems — Custom Design System
   A distinct teal + amber healthcare-tech identity,
   replacing the default Bootstrap blue look.
======================================================= */

:root{
    --brand-navy:   #0a1622;
    --brand-teal:   #0c5c63;
    --brand-teal-2: #12968d;
    --brand-teal-light: #e6f5f3;
    --brand-amber:  #f5a623;
    --brand-amber-dark: #d98c0f;
    --brand-coral:  #FF6B5B;
    --text-dark:    #14212b;
    --text-muted:   #5c6b76;
    --surface:      #ffffff;
    --surface-soft: #f6faf9;
    --radius-lg: 24px;
    --radius-md: 18px;
    --shadow-soft: 0 10px 30px rgba(13,27,42,.08);
    --shadow-hover: 0 22px 45px rgba(13,27,42,.14);

    /* Glass system tokens */
    --glass-bg: rgba(255,255,255,.62);
    --glass-bg-strong: rgba(255,255,255,.78);
    --glass-border: rgba(255,255,255,.7);
    --glass-shadow: 0 20px 50px -12px rgba(10,22,34,.16), 0 2px 8px rgba(10,22,34,.06);
    --glass-shadow-hover: 0 30px 65px -14px rgba(10,22,34,.22), 0 4px 14px rgba(10,22,34,.08);
    --mono: 'JetBrains Mono', ui-monospace, monospace;

    font-family: 'Poppins', sans-serif;
}

body{
    font-family:'Poppins', sans-serif;
    color:var(--text-dark);
    background:var(--surface);
}

h1,h2,h3,h4,h5,h6{
    font-family:'Poppins', sans-serif;
    letter-spacing:-.02em;
}

a{ color:var(--brand-teal-2); }
a:hover{ color:var(--brand-teal); }

.text-primary{ color:var(--brand-teal-2) !important; }
.text-muted{ color:var(--text-muted) !important; }

/* -------------------- Buttons -------------------- */
.btn-primary{
    background:linear-gradient(135deg, var(--brand-teal-2), var(--brand-teal));
    border:none;
    border-radius:50px;
    box-shadow:0 10px 24px rgba(18,150,141,.28);
    transition:.3s ease;
}
.btn-primary:hover,
.btn-primary:focus{
    background:linear-gradient(135deg, var(--brand-teal), var(--brand-navy));
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(18,150,141,.35);
}

.btn-outline-primary{
    border:2px solid var(--brand-teal-2);
    color:var(--brand-teal-2);
    border-radius:50px;
    background:transparent;
    transition:.3s ease;
}
.btn-outline-primary:hover{
    background:var(--brand-teal-2);
    border-color:var(--brand-teal-2);
    color:#fff;
    transform:translateY(-2px);
}

.btn-outline-light:hover{
    color:var(--brand-navy) !important;
}

.badge.bg-primary{
    background:var(--brand-teal-light) !important;
    color:var(--brand-teal) !important;
    font-weight:600;
    letter-spacing:.03em;
    border-radius:50px;
}

/* -------------------- Navbar -------------------- */
.navbar{
    transition:.35s;
    padding-top:14px;
    padding-bottom:14px;
}
.navbar.scrolled{
    box-shadow:0 6px 24px rgba(13,27,42,.08);
    padding-top:8px;
    padding-bottom:8px;
}
.navbar-brand{ line-height:1.1; }
.navbar-brand .fw-bold{ color:var(--brand-navy) !important; }

.nav-link{
    font-weight:500;
    margin-left:12px;
    color:var(--text-dark);
    position:relative;
}
.nav-link::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:2px;
    background:var(--brand-amber);
    transition:.3s;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }

.nav-link.active{ color:var(--brand-teal) !important; }

/* -------------------- Hero -------------------- */
.hero-section{
    padding:100px 0;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(60% 60% at 100% 0%, rgba(18,150,141,.10) 0%, rgba(18,150,141,0) 60%),
        radial-gradient(50% 50% at 0% 100%, rgba(245,166,35,.12) 0%, rgba(245,166,35,0) 60%),
        #ffffff;
}
.hero-section h1{ line-height:1.15; color:var(--brand-navy); }
.hero-section .btn{ padding:14px 34px; font-weight:600; }
.hero-section img{
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-hover);
}

/* -------------------- Section shells -------------------- */
#why-us .card{
    border-radius:var(--radius-md);
    transition:.35s;
    border:1px solid rgba(13,27,42,.06);
}
#why-us .card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
}

.feature-box{
    background:var(--surface);
    padding:30px;
    border-radius:var(--radius-md);
    transition:.35s;
    height:100%;
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(13,27,42,.05);
}
.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(18,150,141,.25);
}

.feature-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:var(--brand-teal-light);
    color:var(--brand-teal-2);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin-right:20px;
    flex-shrink:0;
}

.contact-info-card{
    background:var(--surface);
    padding:30px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(13,27,42,.05);
    transition:.3s;
}
.contact-info-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-hover);
}

/* -------------------- Request Demo -------------------- */
.request-demo-section{
    background:linear-gradient(135deg, var(--brand-teal-2), var(--brand-navy));
    position:relative;
}

.request-demo-section .form-control,
.request-demo-section .form-select{
    height:50px;
    border-radius:12px;
}
.request-demo-section textarea{ height:auto; border-radius:12px; }
.request-demo-section .card{ border-radius:var(--radius-lg); }

.form-control:focus,
.form-select:focus{
    border-color:var(--brand-teal-2);
    box-shadow:0 0 0 .2rem rgba(18,150,141,.18);
}

/* -------------------- Footer -------------------- */
.footer-section{
    background:var(--brand-navy);
}
.footer-links li{ margin-bottom:12px; }
.footer-links a{
    color:#c3cdd3;
    text-decoration:none;
    transition:.3s;
}
.footer-links a:hover{
    color:var(--brand-amber);
    padding-left:5px;
}

.social-icon{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    margin-right:10px;
    text-decoration:none;
    transition:.35s;
}
.social-icon:hover{
    background:var(--brand-amber);
    color:var(--brand-navy);
    transform:translateY(-4px);
}

/* -------------------- Page hero (inner pages) -------------------- */
.page-hero{
    padding:120px 0 60px;
    background:
        radial-gradient(50% 60% at 100% 0%, rgba(18,150,141,.10) 0%, rgba(18,150,141,0) 60%),
        #ffffff;
}
.page-hero img{ max-width:95%; }
.page-hero h1{ line-height:1.2; color:var(--brand-navy); }

/* -------------------- Cards / Products -------------------- */
.solution-item{
    background:var(--surface);
    padding:30px 20px;
    border-radius:var(--radius-md);
    transition:.35s;
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(13,27,42,.05);
}
.solution-item:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-hover);
}

.product-card{
    overflow:hidden;
    border-radius:20px;
    transition:.35s;
    border:1px solid rgba(13,27,42,.06);
}
.product-card img{
    height:220px;
    object-fit:cover;
}
.product-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(18,150,141,.25);
}

/* -------------------- Misc -------------------- */
::selection{ background:var(--brand-amber); color:var(--brand-navy); }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--surface-soft); }
::-webkit-scrollbar-thumb{
    background:var(--brand-teal-2);
    border-radius:10px;
}

.section-title-eyebrow{
    display:inline-block;
    color:var(--brand-amber-dark);
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.8rem;
}

hr.border-secondary{ border-color:rgba(255,255,255,.12) !important; }

/* =======================================================
   Premium Redesign Layer — Dark Hero, Glass UI,
   Floating CTA, Distinct Typography
======================================================= */

h1, h2, h3, .hero-heading, .navbar-brand .fw-bold{
    font-family:'Sora', 'Poppins', sans-serif;
}

/* -------------------- Dark Hero -------------------- */
.hero-section-dark{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(60% 60% at 100% 0%, rgba(18,150,141,.35) 0%, rgba(18,150,141,0) 60%),
        radial-gradient(55% 55% at 0% 100%, rgba(245,166,35,.20) 0%, rgba(245,166,35,0) 60%),
        linear-gradient(160deg, #0b1620 0%, #0d1b2a 55%, #0c2b30 100%);
}

.hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.35;
    pointer-events:none;
    z-index:0;
}
.hero-blob-1{
    width:420px; height:420px;
    background:var(--brand-teal-2);
    top:-120px; right:-100px;
}
.hero-blob-2{
    width:360px; height:360px;
    background:var(--brand-amber);
    bottom:-140px; left:-120px;
    opacity:.18;
}

.badge-glass{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    color:#dff5f2;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.03em;
}
.dot-live{
    width:8px; height:8px;
    border-radius:50%;
    background:var(--brand-amber);
    box-shadow:0 0 0 0 rgba(245,166,35,.6);
    animation:dotPulse 1.8s infinite;
}
@keyframes dotPulse{
    0%{ box-shadow:0 0 0 0 rgba(245,166,35,.55); }
    70%{ box-shadow:0 0 0 10px rgba(245,166,35,0); }
    100%{ box-shadow:0 0 0 0 rgba(245,166,35,0); }
}

.hero-heading{
    font-size:3rem;
    font-weight:700;
    line-height:1.15;
    color:#fff;
}
.text-gradient{
    display:block;
    margin-top:6px;
    background:linear-gradient(90deg, var(--brand-teal-2), var(--brand-amber));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero-subtext{
    color:rgba(255,255,255,.72);
    max-width:520px;
}

.btn-cta{
    background:linear-gradient(135deg, var(--brand-amber), var(--brand-amber-dark));
    color:var(--brand-navy);
    font-weight:700;
    border:none;
    border-radius:50px;
    box-shadow:0 14px 30px rgba(245,166,35,.30);
    transition:.3s ease;
}
.btn-cta:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(245,166,35,.4);
    color:var(--brand-navy);
}

.btn-ghost{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;
}
.btn-ghost:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
    transform:translateY(-3px);
}

.stat-chip{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    padding:16px 10px;
    text-align:center;
}
.stat-chip h3{
    color:#fff;
    font-weight:700;
    font-size:1.5rem;
    margin-bottom:2px;
}
.stat-chip p{
    color:rgba(255,255,255,.6);
    font-size:.8rem;
    margin:0;
}

.hero-visual{
    position:relative;
}
.hero-visual-img{
    border-radius:24px;
    box-shadow:0 30px 60px rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.08);
}

.floating-card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border-radius:16px;
    padding:14px 18px;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.floating-card h6{
    margin:0;
    font-weight:700;
    font-size:.95rem;
    color:var(--brand-navy);
}
.floating-card span{
    font-size:.75rem;
    color:var(--text-muted);
}
.floating-card-icon{
    width:42px; height:42px;
    border-radius:12px;
    background:var(--brand-teal-light);
    color:var(--brand-teal-2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0;
}
.floating-card-1{
    top:-18px; left:-18px;
    animation:softFloat 5s ease-in-out infinite;
}
.floating-card-2{
    bottom:-18px; right:-18px;
    animation:softFloat 5.5s ease-in-out infinite reverse;
}
@media (max-width: 767.98px){
    .floating-card{ padding:10px 14px; }
    .hero-heading{ font-size:2.1rem; }
    .floating-card-1, .floating-card-2{ position:static; margin-top:14px; display:inline-flex; }
}

/* -------------------- Navbar glass polish -------------------- */
#mainNavbar{
    background:rgba(255,255,255,.92) !important;
    backdrop-filter:blur(10px);
}

/* -------------------- Floating Multi-Action CTA -------------------- */
.floating-cta{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1050;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
}
.floating-cta-options{
    display:flex;
    flex-direction:column;
    gap:10px;
    opacity:0;
    transform:translateY(12px) scale(.96);
    pointer-events:none;
    transition:.25s ease;
}
.floating-cta.open .floating-cta-options{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}
.floating-cta-item{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    color:var(--text-dark);
    padding:10px 16px;
    border-radius:50px;
    box-shadow:0 12px 30px rgba(13,27,42,.18);
    text-decoration:none;
    font-weight:600;
    font-size:.85rem;
    white-space:nowrap;
    transition:.25s ease;
}
.floating-cta-item i{ font-size:1.05rem; }
.floating-cta-item:hover{ transform:translateX(-4px); }
.fc-whatsapp{ color:#1fae4c; }
.fc-whatsapp i{ color:#25D366; }
.fc-call{ color:var(--brand-teal); }
.fc-call i{ color:var(--brand-teal-2); }
.fc-demo{ color:var(--brand-amber-dark); }
.fc-demo i{ color:var(--brand-amber); }

.floating-cta-toggle{
    width:60px; height:60px;
    border-radius:50%;
    border:none;
    background:linear-gradient(135deg, var(--brand-teal-2), var(--brand-navy));
    color:#fff;
    font-size:1.4rem;
    box-shadow:0 16px 36px rgba(13,27,42,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s ease;
}
.floating-cta-toggle:hover{ transform:scale(1.06); }
.floating-cta.open .floating-cta-toggle{
    background:linear-gradient(135deg, var(--brand-amber), var(--brand-amber-dark));
    color:var(--brand-navy);
}

@media (max-width: 575.98px){
    .floating-cta{ right:16px; bottom:16px; }
    .floating-cta-toggle{ width:52px; height:52px; font-size:1.2rem; }
    .floating-cta-item span{ display:none; }
    .floating-cta-item{ padding:12px; border-radius:50%; }
}

/* =======================================================
   Signature Layer — "Vitals" identity
   A hospital-systems brand should feel like the software
   itself: alive, monitored, dependable. The recurring
   heartbeat/pulse trace ties every product (ERP, backup,
   emergency, monitoring) back to that one idea — systems
   with a pulse.
======================================================= */

:root{
    --brand-coral: #FF6B5B;
}

/* -------------------- Pulse divider (site-wide signature) -------------------- */
.pulse-divider{
    height:34px;
    width:100%;
    background:linear-gradient(90deg, var(--brand-teal-2), var(--brand-coral) 55%, var(--brand-amber));
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 20 H80 L92 6 L104 34 L116 12 L128 28 L138 20 H240' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40'%3E%3Cpath d='M0 20 H80 L92 6 L104 34 L116 12 L128 28 L138 20 H240' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat:repeat-x;
    mask-repeat:repeat-x;
    -webkit-mask-size:240px 34px;
    mask-size:240px 34px;
    opacity:.85;
}

/* -------------------- Icon boxes (Why Us / Products) -------------------- */
.icon-box{
    width:64px;
    height:64px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    background:linear-gradient(150deg, var(--brand-teal-light), #ffffff) !important;
    color:var(--brand-teal-2) !important;
    box-shadow:inset 0 0 0 1px rgba(12,92,99,.12);
}

/* -------------------- Product card accents (cycled by position) -------------------- */
.product-card{ position:relative; border-top:4px solid var(--brand-teal-2) !important; }
.row > div:nth-of-type(3n+2) .product-card{ border-top-color:var(--brand-amber) !important; }
.row > div:nth-of-type(3n) .product-card{ border-top-color:var(--brand-coral) !important; }
.product-card .icon-box{ transition:transform .35s ease; }
.product-card:hover .icon-box{ transform:rotate(-6deg) scale(1.06); }

/* -------------------- Inner page hero, aligned with the dark hero's identity -------------------- */
.page-hero{
    position:relative;
    overflow:hidden;
    padding:130px 0 70px;
    background:
        radial-gradient(55% 65% at 100% 0%, rgba(18,150,141,.14) 0%, rgba(18,150,141,0) 60%),
        radial-gradient(45% 55% at 0% 110%, rgba(255,107,91,.10) 0%, rgba(255,107,91,0) 60%),
        var(--surface-soft);
}
.page-hero::before{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:4px;
    background:linear-gradient(90deg, var(--brand-teal-2), var(--brand-coral), var(--brand-amber));
    opacity:.6;
}

/* -------------------- Typography rhythm -------------------- */
.hero-heading{ font-size:clamp(2.1rem, 4vw, 3.15rem); }
.page-hero h1{ font-size:clamp(1.9rem, 3.4vw, 2.75rem); }
h2{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }

/* -------------------- Footer polish -------------------- */
.footer-section{
    position:relative;
    background:
        radial-gradient(60% 80% at 15% 0%, rgba(18,150,141,.16) 0%, rgba(18,150,141,0) 55%),
        var(--brand-navy);
}

/* -------------------- Accessibility -------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible{
    outline:2px solid var(--brand-coral);
    outline-offset:3px;
    border-radius:4px;
}

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

@media (max-width: 575.98px){
    .pulse-divider{ height:24px; -webkit-mask-size:180px 24px; mask-size:180px 24px; }
}

/* =======================================================
   Glassmorphic Elevation Layer
   Extends the dark hero's frosted-glass language into every
   light section, so the "vitals" identity feels continuous
   top to bottom instead of stopping after the hero.
======================================================= */

/* ---- Mesh-gradient washes behind light sections (glass needs
        a colourful backdrop to actually read as glass) ---- */
#why-us, #screenshots{
    background:
        radial-gradient(46% 60% at 8% 0%, rgba(18,150,141,.10) 0%, rgba(18,150,141,0) 60%),
        radial-gradient(40% 50% at 100% 100%, rgba(255,107,91,.08) 0%, rgba(255,107,91,0) 60%),
        var(--surface-soft) !important;
    position:relative;
}
#solutions, #features, #how-it-works{
    background:
        radial-gradient(42% 55% at 96% 6%, rgba(245,166,35,.08) 0%, rgba(245,166,35,0) 60%),
        radial-gradient(46% 60% at 2% 100%, rgba(18,150,141,.09) 0%, rgba(18,150,141,0) 60%),
        #ffffff;
    position:relative;
}

/* ---- Brand override for Bootstrap's default-blue .bg-primary
        wherever it's used outside the eyebrow badge (e.g. the
        request-demo form header, the "Need Help Choosing?" CTA
        card) — keeps the whole site on the teal/coral/amber
        palette instead of Bootstrap blue. The badge stays glass
        via the higher-specificity .badge.bg-primary rule below. ---- */
.bg-primary{
    background:linear-gradient(135deg, var(--brand-teal-2), var(--brand-teal)) !important;
}
.card-header.bg-primary{ border-bottom:none; }

/* ---- Glass eyebrow badge (replaces flat bootstrap pill) ---- */
.badge.bg-primary{
    background:var(--glass-bg-strong) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--brand-teal) !important;
    border:1px solid rgba(12,92,99,.14);
    font-family:var(--mono);
    font-weight:500;
    letter-spacing:.06em;
    font-size:.72rem;
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(13,27,42,.06);
}

/* ---- Glass card surface, used across why-us / features / products / screenshots ---- */
#why-us .card,
.feature-box,
.solution-item,
.contact-info-card,
.process-card,
#screenshots .card{
    background:var(--glass-bg) !important;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid var(--glass-border) !important;
    box-shadow:var(--glass-shadow) !important;
}
#why-us .card:hover,
.feature-box:hover,
.solution-item:hover,
.contact-info-card:hover,
#screenshots .card:hover{
    background:var(--glass-bg-strong) !important;
    box-shadow:var(--glass-shadow-hover) !important;
}

/* Product cards keep their signature colour-coded top border (teal / amber /
   coral cycling by position — see the "Product card accents" rule below),
   so they get the glass treatment on the other three sides only. */
.product-card{
    background:var(--glass-bg) !important;
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border-left:1px solid var(--glass-border) !important;
    border-right:1px solid var(--glass-border) !important;
    border-bottom:1px solid var(--glass-border) !important;
    box-shadow:var(--glass-shadow) !important;
}
.product-card:hover{
    background:var(--glass-bg-strong) !important;
    box-shadow:var(--glass-shadow-hover) !important;
}

/* ---- Process card (How It Works) — bring up to the glass system ---- */
.process-card{
    padding:34px 24px;
    border-radius:var(--radius-md);
    transition:.35s;
    position:relative;
}
.process-card:hover{ transform:translateY(-8px); }
.process-number{
    font-family:var(--mono);
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--brand-coral);
    background:var(--brand-teal-light);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px; height:34px;
    border-radius:50%;
}
.process-icon{
    width:60px; height:60px;
    margin:16px auto 0;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    background:linear-gradient(150deg, var(--brand-teal-light), #ffffff);
    color:var(--brand-teal-2);
    box-shadow:inset 0 0 0 1px rgba(12,92,99,.12);
}

/* ---- Stat / data numerals get the monospace "readout" treatment ---- */
.stat-chip h3, .process-number, .floating-card h6{
    font-family:var(--mono);
}

/* ---- Data-eyebrow style for section labels using .section-title-eyebrow ---- */
.section-title-eyebrow{ font-family:var(--mono); }

/* ---- Graceful fallback for a not-yet-uploaded image ----
   Paired with assets/js/app.js: on image load error, this
   class renders a calm on-brand placeholder instead of a
   broken-image icon, so the layout never looks unfinished. */
img.img-fallback{
    position:relative;
    min-height:200px;
    background:
        radial-gradient(60% 90% at 15% 0%, rgba(18,150,141,.16) 0%, rgba(18,150,141,0) 60%),
        radial-gradient(60% 90% at 100% 100%, rgba(255,107,91,.12) 0%, rgba(255,107,91,0) 60%),
        var(--surface-soft);
    color:transparent !important;
}
img.img-fallback::after{
    content: var(--fallback-label, "Preview coming soon");
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:16px;
    font-family:var(--mono);
    font-size:.78rem;
    letter-spacing:.03em;
    color:var(--brand-teal);
    opacity:.85;
}

/* ---- Subtle glass ring around hero visual + floating cards already
        glassy — tie the dashboard mock to the mesh backdrop ---- */
.hero-visual-img{ backdrop-filter:blur(2px); }

@media (prefers-reduced-motion: reduce){
    .process-card:hover{ transform:none; }
}

/* =======================================================
   Structural Layout Layer
   Real grid/composition changes (not just colour) so each
   section reads as a distinct, purpose-built layout instead
   of a repeated 3-column Bootstrap grid.
======================================================= */

/* ---------------------------------------------------------
   1) WHY US → asymmetric bento grid
   Card 1 = tall featured tile · Card 6 = wide banner tile
--------------------------------------------------------- */
@media (min-width: 992px){
    #why-us .row.g-4{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        gap:1.5rem;
    }
    #why-us .row.g-4 > div{ width:auto; max-width:none; padding:0; }
    #why-us .row.g-4 > div:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
    #why-us .row.g-4 > div:nth-child(2){ grid-column:2; grid-row:1; }
    #why-us .row.g-4 > div:nth-child(3){ grid-column:3; grid-row:1; }
    #why-us .row.g-4 > div:nth-child(4){ grid-column:2; grid-row:2; }
    #why-us .row.g-4 > div:nth-child(5){ grid-column:3; grid-row:2; }
    #why-us .row.g-4 > div:nth-child(6){ grid-column:1 / span 3; grid-row:3; }

    #why-us .row.g-4 > div:nth-child(1) .card{
        justify-content:center;
        padding:2.75rem 2rem !important;
    }
    #why-us .row.g-4 > div:nth-child(1) .card i{ font-size:3.4rem !important; }
    #why-us .row.g-4 > div:nth-child(1) .card h5{ font-size:1.35rem; }

    #why-us .row.g-4 > div:nth-child(6) .card{
        flex-direction:row;
        text-align:left;
        align-items:center;
        gap:2rem;
        padding:1.75rem 2.25rem !important;
    }
    #why-us .row.g-4 > div:nth-child(6) .card .mb-3{ margin-bottom:0 !important; flex-shrink:0; }
}

/* ---------------------------------------------------------
   2) SOLUTIONS → flagship product + compact grid
   Card 1 (Hospital ERP) becomes a wide horizontal feature;
   the remaining five sit beneath in a tighter grid.
--------------------------------------------------------- */
@media (min-width: 992px){
    #solutions .row.g-4{
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:1.5rem;
    }
    #solutions .row.g-4 > div{ width:auto; max-width:none; padding:0; }
    #solutions .row.g-4 > div:nth-child(1){ grid-column:1 / span 3; }
    #solutions .row.g-4 > div:nth-child(2){ grid-column:1; }
    #solutions .row.g-4 > div:nth-child(3){ grid-column:2; }
    #solutions .row.g-4 > div:nth-child(4){ grid-column:3; }
    #solutions .row.g-4 > div:nth-child(5){ grid-column:1; }
    #solutions .row.g-4 > div:nth-child(6){ grid-column:2; }

    #solutions .row.g-4 > div:nth-child(1) .card-body{
        display:grid;
        grid-template-columns: 92px 1fr auto;
        grid-template-rows: auto auto;
        align-items:center;
        column-gap:2rem;
        padding:2.25rem 2.5rem !important;
    }
    #solutions .row.g-4 > div:nth-child(1) .icon-box{
        grid-column:1; grid-row:1 / span 2;
        margin-bottom:0 !important;
        width:76px; height:76px; font-size:1.9rem;
    }
    #solutions .row.g-4 > div:nth-child(1) h4{
        grid-column:2; grid-row:1;
        align-self:end;
        font-size:1.5rem; margin-bottom:.35rem;
    }
    #solutions .row.g-4 > div:nth-child(1) p{
        grid-column:2; grid-row:2;
        align-self:start;
        margin-bottom:0; max-width:520px;
    }
    #solutions .row.g-4 > div:nth-child(1) a.text-decoration-none{
        grid-column:3; grid-row:1 / span 2;
        white-space:nowrap;
        background:linear-gradient(135deg, var(--brand-teal-2), var(--brand-teal));
        color:#fff !important;
        padding:.7rem 1.4rem;
        border-radius:50px;
        font-weight:600;
    }
    #solutions .row.g-4 > div:nth-child(1) a.text-decoration-none i{ margin-left:.5rem; }
}

/* ---------------------------------------------------------
   3) HOW IT WORKS → connected horizontal timeline
--------------------------------------------------------- */
#how-it-works .row.g-4{ position:relative; }
@media (min-width: 992px){
    #how-it-works .row.g-4::before{
        content:"";
        position:absolute;
        top:52px;
        left:12.5%;
        right:12.5%;
        height:2px;
        background:repeating-linear-gradient(90deg, var(--brand-teal-2) 0 10px, transparent 10px 18px);
        z-index:0;
    }
    #how-it-works .process-card{ position:relative; z-index:1; }
}
.process-number{ position:relative; z-index:2; }

/* ---------------------------------------------------------
   4) FEATURES → offset two-column rhythm
   Even rows shift right slightly so the pairs don't read as
   one flat uniform grid.
--------------------------------------------------------- */
@media (min-width: 992px){
    #features .row.g-4 > div:nth-child(4n+3),
    #features .row.g-4 > div:nth-child(4n+4){
        transform:translateY(28px);
    }
}
#features .feature-box{ height:100%; }

/* ---------------------------------------------------------
   Responsive reset — collapse every bento/grid override back
   to a simple single column stack below desktop width.
--------------------------------------------------------- */
@media (max-width: 991.98px){
    #why-us .row.g-4 > div:nth-child(6) .card{
        flex-direction:column;
        text-align:center;
    }
}