/* ==========================================================================
   Public hospital landing page - premium design system
   Scoped under .hh-* / [data-hh-theme] so it never touches the admin panel.
   ========================================================================== */

:root {
    --hh-primary: #0a66c2;
    --hh-primary-dark: #074e96;
    --hh-accent: #38bdf8;
    --hh-navy: #0b2747;
    --hh-radius: 1.25rem;
    --hh-shadow-sm: 0 6px 16px rgba(15, 30, 45, .06);
    --hh-shadow-md: 0 20px 40px -10px rgba(15, 30, 45, .15);
    --hh-shadow-lg: 0 30px 60px -15px rgba(15, 30, 45, .25);
    --hh-ease: cubic-bezier(.22, 1, .36, 1);
}

[data-hh-theme="dark"] {
    --hh-bg: #08121d;
    --hh-surface: #101e2d;
    --hh-surface-2: #14283b;
    --hh-text: #eef3f7;
    --hh-muted: #93a6b5;
    --hh-border: #1d3146;
    --hh-glass: rgba(16, 30, 45, .55);
}

[data-hh-theme="light"] {
    --hh-bg: #f6f9fb;
    --hh-surface: #ffffff;
    --hh-surface-2: #f0f5f8;
    --hh-text: #101c28;
    --hh-muted: #5b6e7c;
    --hh-border: #e8eef2;
    --hh-glass: rgba(255, 255, 255, .65);
}

.hh-body {
    background: var(--hh-bg);
    color: var(--hh-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-x: hidden;
}

.hh-body h1, .hh-body h2, .hh-body h3, .hh-body h4, .hh-body h5,
.hh-display {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    letter-spacing: -.02em;
}

.hh-muted { color: var(--hh-muted); }
.hh-surface { background: var(--hh-surface); }

/* ---------- Reveal-on-scroll ---------- */
.hh-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--hh-ease), transform .7s var(--hh-ease);
}
.hh-reveal.hh-visible {
    opacity: 1;
    transform: translateY(0);
}
.hh-reveal-delay-1 { transition-delay: .08s; }
.hh-reveal-delay-2 { transition-delay: .16s; }
.hh-reveal-delay-3 { transition-delay: .24s; }
.hh-reveal-delay-4 { transition-delay: .32s; }

/* ---------- Top utility bar ---------- */
.hh-topbar {
    background: var(--hh-navy);
    color: #c9d8e3;
    font-size: .8rem;
    letter-spacing: .02em;
}
.hh-topbar a { color: #c9d8e3; text-decoration: none; transition: color .2s; }
.hh-topbar a:hover { color: #fff; }

/* ---------- Glass navbar ---------- */
.hh-navbar {
    background: transparent;
    backdrop-filter: blur(0px);
    transition: background .35s var(--hh-ease), box-shadow .35s var(--hh-ease), backdrop-filter .35s var(--hh-ease);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.hh-navbar.hh-scrolled {
    background: var(--hh-glass);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: var(--hh-shadow-sm);
    border-bottom: 1px solid var(--hh-border);
}
.hh-navbar .navbar-brand img { height: 42px; }
.hh-navbar .nav-link {
    font-weight: 600;
    font-size: .92rem;
    color: var(--hh-text);
    position: relative;
    margin: 0 .6rem;
}
.hh-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--hh-primary);
    transition: width .25s var(--hh-ease);
}
.hh-navbar .nav-link:hover::after { width: 100%; }
.hh-navbar .nav-link:hover { color: var(--hh-primary); }

.hh-theme-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--hh-border);
    background: var(--hh-surface);
    color: var(--hh-text);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .25s var(--hh-ease), border-color .25s;
}
.hh-theme-toggle:hover { transform: rotate(20deg) scale(1.06); border-color: var(--hh-primary); }

/* ---------- Buttons ---------- */
.hh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 700;
    font-size: .95rem;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    transition: transform .25s var(--hh-ease), box-shadow .25s var(--hh-ease), background .25s, color .25s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.hh-btn:hover { transform: translateY(-2px); }
.hh-btn, .hh-btn:hover, .hh-btn:focus { text-decoration: none; }
.hh-btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }

.hh-btn-primary {
    background: linear-gradient(135deg, var(--hh-primary), var(--hh-accent));
    color: #fff;
    box-shadow: 0 12px 26px -6px rgba(10, 102, 194, .55);
}
.hh-btn-primary:hover {
    box-shadow: 0 18px 34px -6px rgba(56, 189, 248, .55);
    color: #fff;
}

.hh-btn-glass {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    backdrop-filter: blur(8px);
}
.hh-btn-glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.hh-btn-outline {
    background: transparent;
    border-color: var(--hh-border);
    color: var(--hh-text);
}
.hh-btn-outline:hover { border-color: var(--hh-primary); color: var(--hh-primary); }

/* ---------- Hero ---------- */
.hh-hero {
    position: relative;
    padding: 9.5rem 0 7rem;
    background: var(--hh-navy);
    color: #fff;
    overflow: hidden;
}
.hh-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 50% at 85% 10%, rgba(56, 189, 248, .35), transparent 60%),
        radial-gradient(50% 45% at 10% 90%, rgba(10, 102, 194, .35), transparent 60%),
        linear-gradient(160deg, #0b2747 0%, #123a63 60%, #0b2747 100%);
    z-index: 0;
}
.hh-hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 75%);
    z-index: 0;
}
.hh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .55;
    z-index: 0;
    animation: hh-float 9s ease-in-out infinite;
}
.hh-blob-1 { width: 320px; height: 320px; background: var(--hh-primary); top: -60px; right: 8%; }
.hh-blob-2 { width: 260px; height: 260px; background: var(--hh-accent); bottom: -80px; left: 4%; animation-delay: 2s; }

@keyframes hh-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-22px) translateX(14px); }
}

.hh-hero > .container { position: relative; z-index: 1; }

.hh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    backdrop-filter: blur(6px);
}
.hh-eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, .6);
    animation: hh-pulse 1.8s infinite;
}
@keyframes hh-pulse {
    0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .6); }
    70% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

.hh-hero h1 {
    font-weight: 800;
    font-size: clamp(2.3rem, 4.4vw, 3.4rem);
    line-height: 1.12;
}
.hh-hero h1 .hh-grad-text {
    background: linear-gradient(135deg, #38bdf8, #0a66c2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hh-hero p.lead {
    color: #b9cbd9;
    font-size: 1.15rem;
    max-width: 560px;
}

.hh-hero-stats-inline {
    display: flex;
    gap: 1.75rem;
    margin-top: 2.25rem;
}
.hh-hero-stats-inline .num { font-size: 1.5rem; font-weight: 800; color: #fff; }
.hh-hero-stats-inline .lbl { font-size: .78rem; color: #9fb3c2; }

/* Floating glass visual panel in hero */
.hh-hero-visual {
    position: relative;
    border-radius: 1.75rem;
}
.hh-hero-card {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(14px);
    border-radius: 1.75rem;
    padding: .9rem;
    box-shadow: var(--hh-shadow-lg);
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
    transition: transform .5s var(--hh-ease);
}
.hh-hero-card:hover { transform: perspective(1000px) rotateY(0) rotateX(0); }
.hh-hero-card img {
    border-radius: 1.25rem;
    display: block;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/10;
}

.hh-floating-chip {
    position: absolute;
    background: var(--hh-surface);
    color: var(--hh-text);
    border-radius: 1rem;
    padding: .85rem 1.1rem;
    box-shadow: var(--hh-shadow-md);
    display: flex;
    align-items: center;
    gap: .7rem;
    animation: hh-floaty 5s ease-in-out infinite;
}
.hh-floating-chip .ic {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 102, 194, .12);
    color: var(--hh-primary);
}
.hh-floating-chip.chip-1 { top: -1.25rem; left: -1.5rem; animation-delay: .3s; }
.hh-floating-chip.chip-2 { bottom: -1.25rem; right: -1rem; animation-delay: 1s; }
@keyframes hh-floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Sections ---------- */
.hh-section { padding: 6.5rem 0; position: relative; }
.hh-section-alt { background: var(--hh-surface-2); }

.hh-section-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hh-primary);
    font-weight: 800;
    font-size: .78rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(10, 102, 194, .1);
}
.hh-section-heading {
    font-weight: 800;
    color: var(--hh-text);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    margin-top: 1rem;
}

/* ---------- Feature / service cards ---------- */
.hh-card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: var(--hh-radius);
    transition: transform .35s var(--hh-ease), box-shadow .35s var(--hh-ease), border-color .35s;
    height: 100%;
}
.hh-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hh-shadow-md);
    border-color: transparent;
}

.hh-service-card { padding: 2.1rem 1.75rem; position: relative; overflow: hidden; }
.hh-service-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10, 102, 194, .08), rgba(56, 189, 248, .08));
    opacity: 0;
    transition: opacity .35s;
}
.hh-service-card:hover::before { opacity: 1; }
.hh-service-card > * { position: relative; z-index: 1; }

.hh-icon-badge {
    width: 58px; height: 58px;
    border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, var(--hh-primary), var(--hh-accent));
    box-shadow: 0 10px 20px -6px rgba(10, 102, 194, .45);
    transition: transform .35s var(--hh-ease);
}
.hh-card:hover .hh-icon-badge { transform: scale(1.08) rotate(-4deg); }

.hh-card-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--hh-primary);
    margin-top: .75rem;
    text-decoration: none;
}
.hh-card-link:hover { color: var(--hh-primary-dark); text-decoration: none; }
.hh-card-link i { transition: transform .25s var(--hh-ease); }
.hh-card:hover .hh-card-link i { transform: translateX(4px); }

/* ---------- How it works ---------- */
.hh-steps { position: relative; }
.hh-step-item {
    text-align: center;
    position: relative;
}
.hh-step-num {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    background: var(--hh-surface);
    border: 2px solid var(--hh-primary);
    color: var(--hh-primary);
    position: relative;
    z-index: 1;
}
.hh-steps-line {
    position: absolute;
    top: 32px;
    left: 10%; right: 10%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--hh-border) 0 10px, transparent 10px 18px);
    z-index: 0;
}

/* ---------- Stats ---------- */
.hh-stats {
    background: var(--hh-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.hh-stats::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 50% 0%, rgba(56, 189, 248, .25), transparent 70%);
}
.hh-stats > .container { position: relative; z-index: 1; }
.hh-stat-card {
    text-align: center;
    padding: 1.5rem 1rem;
}
.hh-stat-number {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    background: linear-gradient(135deg, #38bdf8, #0a66c2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.hh-stat-label { color: #aebfcc; font-size: .9rem; margin-top: .25rem; }

/* ---------- Testimonials ---------- */
.hh-testimonial {
    padding: 2rem;
    height: 100%;
    position: relative;
}
.hh-testimonial .quote-mark {
    font-size: 2.5rem;
    color: var(--hh-primary);
    opacity: .25;
    line-height: 1;
    font-family: Georgia, serif;
}
.hh-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--hh-primary), var(--hh-accent));
}
.hh-stars { color: #f5b942; font-size: .8rem; letter-spacing: 2px; }

/* ---------- Why choose us ---------- */
.hh-why-list { list-style: none; padding: 0; margin: 0; }
.hh-why-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hh-border);
}
.hh-why-list li:last-child { border-bottom: none; }
.hh-why-list .ic {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: .85rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 102, 194, .12);
    color: var(--hh-primary);
}
.hh-why-list h6 { font-weight: 700; margin-bottom: .15rem; }

.hh-image-stack { position: relative; }
.hh-image-stack img {
    border-radius: 1.5rem;
    box-shadow: var(--hh-shadow-md);
    width: 100%;
}
.hh-image-stack .hh-floating-chip { position: absolute; }

/* ---------- CTA band ---------- */
.hh-cta {
    background: linear-gradient(120deg, var(--hh-primary), var(--hh-accent));
    color: #fff;
    border-radius: 2rem;
    padding: 3.5rem 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.hh-cta::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: .5;
}
.hh-cta > * { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.hh-footer { background: #060f18; color: #9fb1bf; }
.hh-footer h5 { color: #fff; font-weight: 800; }
.hh-footer a { color: #9fb1bf; text-decoration: none; transition: color .2s; }
.hh-footer a:hover { color: #38bdf8; }
.hh-footer .hh-social a {
    display: inline-flex; width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    align-items: center; justify-content: center;
    margin-right: .5rem;
    transition: background .2s, transform .2s;
}
.hh-footer .hh-social a:hover { background: var(--hh-primary); transform: translateY(-3px); color: #fff; }

/* ==========================================================================
   Appointment wizard
   ========================================================================== */
.hh-wizard-section { padding: 7rem 0 5rem; min-height: 80vh; }

.hh-wizard-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: .5rem;
}
.hh-wizard-steps .hh-step {
    flex: 1;
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--hh-muted);
    padding-bottom: .6rem;
    border-bottom: 3px solid var(--hh-border);
    transition: color .3s, border-color .3s;
}
.hh-wizard-steps .hh-step.active,
.hh-wizard-steps .hh-step.done { color: var(--hh-primary); border-color: var(--hh-primary); }

.hh-wizard-card {
    background: var(--hh-surface);
    border: 1px solid var(--hh-border);
    border-radius: 1.5rem;
    box-shadow: var(--hh-shadow-md);
}

.hh-method-card {
    border: 2px solid var(--hh-border);
    border-radius: 1rem;
    padding: 1.4rem 1rem;
    text-align: center;
    cursor: pointer;
    background: var(--hh-surface);
    color: var(--hh-text);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.hh-method-card:hover { transform: translateY(-3px); box-shadow: var(--hh-shadow-sm); }
.hh-method-card.active {
    border-color: var(--hh-primary);
    box-shadow: 0 0 0 4px rgba(10, 102, 194, .14);
}
.hh-method-card i { color: var(--hh-primary); }

.hh-success-check {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: rgba(10, 102, 194, .12);
    color: var(--hh-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 1rem;
    animation: hh-pop .4s var(--hh-ease) both;
}
@keyframes hh-pop {
    from { transform: scale(.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (max-width: 991px) {
    .hh-hero-visual { margin-top: 3rem; }
}
@media (max-width: 576px) {
    .hh-hero { padding: 7.5rem 0 5rem; }
    .hh-section { padding: 4.5rem 0; }
    .hh-wizard-steps .hh-step { font-size: .62rem; }
    .hh-hero-stats-inline { flex-wrap: wrap; gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hh-reveal, .hh-blob, .hh-floating-chip, .hh-eyebrow .dot { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}