/* HEALZA theme override — blue/green palette to match the new logo (Logo_Wns.svg / healza_Window.svg).
   This file is loaded after healza-vivid.css and only overrides colors; it does not replace any
   existing layout/spacing rules from healza-vivid.css. */

:root {
    --hz-gold: #0090D7;
    --hz-gold-dark: #0077b6;
    --hz-brown: #06323c;
    --hz-cream: #eaf6f4;
    --hz-line: #d7e8e6;
    --hz-text: #101f24;
    --hz-muted: #66777a;
    --hz-warm: #fbfefd;
    --hz-green: #19a974;
    --hz-coral: #f46f57;
    --hz-soft-blue: #edf8fc;
    --hz-shadow-soft: 0 18px 48px rgba(4, 54, 67, .08);
    --hz-shadow-lift: 0 24px 70px rgba(0, 144, 215, .16);
}

/* healza-vivid.css gives <main> a flat "min-height: 64vh", which is a guess at how tall
   the page "should" be. On a page shorter than that guess (few sections, or a tall
   monitor) it leaves a large dead gap between the last section and the footer instead of
   the footer just following the content. Proper sticky-footer layout: body becomes the
   flex column, main grows only as much as it needs to push the footer down, and never
   further than its own content on a normal, content-filled page like the homepage. */
body.hz-shell {
    background: linear-gradient(180deg, #f8fdfc 0%, #ffffff 42%, #f2fbf9 100%);
    color: var(--hz-text);
    display: flex;
    flex-direction: column;
}

.hz-main {
    flex: 1 0 auto;
    min-height: 0;
}

.hz-footer {
    flex-shrink: 0;
}

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

.hz-header {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(0, 144, 215, .12);
    box-shadow: 0 10px 30px rgba(6, 50, 60, .06);
    backdrop-filter: blur(16px);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Scroll state (class toggled by site.js once the page scrolls past ~24px): the header
   becomes noticeably more see-through/glassy instead of the near-solid default above.
   The logo image is deliberately excluded — it stays fully opaque so the brand mark
   never gets hard to read against whatever content is scrolling underneath it. */
.hz-header.is-scrolled {
    background: rgba(255, 255, 255, .45);
    border-bottom-color: rgba(0, 144, 215, .08);
    box-shadow: 0 6px 20px rgba(6, 50, 60, .05);
    backdrop-filter: blur(18px);
}
.hz-header.is-scrolled .hz-brand-full img,
.hz-header.is-scrolled .hz-brand img {
    opacity: 1;
}

.hz-nav-links { gap: 10px; }

.hz-nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 0 12px;
}

.hz-nav-links a:hover,
.hz-nav-links a.is-active {
    background: rgba(0, 144, 215, .09);
}

.hz-cart-link,
.hz-lang-switch {
    border-color: rgba(0, 144, 215, .16);
    box-shadow: 0 10px 24px rgba(6, 50, 60, .05);
}

.hz-cart-link span {
    background: var(--hz-gold);
    box-shadow: 0 6px 14px rgba(0, 144, 215, .28);
}

/* Bootstrap ships a global "a:hover{color:#0a58ca}" rule. Its pseudo-class selector
   outranks the plain "a{color:inherit}" reset in healza-vivid.css regardless of file
   order, so any link/button that doesn't set its own hover color quietly turns
   Bootstrap-blue on hover (e.g. the Sign in button, "Shop now"). Reset it once, globally,
   here — this file loads after bootstrap.min.css so it wins at equal specificity, and any
   *intentional* custom hover color (e.g. .hz-nav-links a:hover) still wins over this since
   those selectors are more specific. */
a:hover { color: inherit; }

/* Hero / page-hero pill badges use a hardcoded gold-tinted background in the base stylesheet */
.hz-pill { background: rgba(0, 144, 215, .12); }

/* Primary ("gold") buttons: solid blue with white text, same on hover/focus/active —
   the only hover feedback is the lift (translateY) already defined in the base stylesheet;
   no background or text color change on interaction, used by every .hz-btn-gold sitewide. */
.hz-btn-gold,
.hz-btn-gold:hover,
.hz-btn-gold:focus,
.hz-btn-gold:active {
    background: var(--hz-gold);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 144, 215, .22);
}

/* Buttons that pair an icon with text get a real gap instead of relying on a single space char */
.hz-btn { gap: 8px; }

/* Home page: doctor avatar circle, consult checklist icons, featured loyalty card ring */
.hz-avatar { background: rgba(0, 144, 215, .22); }
.hz-consult-copy li i { background: rgba(0, 144, 215, .18); }

/* Features strip: was a thin, flat bar. Larger icon chips, a subtle divider between
   items, and a soft lift on hover give it real presence instead of reading as an
   afterthought between the hero and the products grid. */
.hz-features-strip { background: var(--hz-warm); }
.hz-features-grid { min-height: 96px; }
.hz-features-grid span {
    position: relative;
    justify-content: center;
    padding: 6px 18px;
    color: var(--hz-text);
}
.hz-features-grid span:not(:first-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: var(--hz-line);
}
.hz-features-grid i {
    width: 42px;
    height: 42px;
    font-size: .95rem;
    background: linear-gradient(135deg, rgba(0, 144, 215, .16), rgba(25, 169, 116, .14));
    color: var(--hz-gold-dark);
    transition: transform .2s ease;
}
.hz-features-grid span:hover i { transform: scale(1.1) rotate(-4deg); }

/* Consultation section: the doctor card read as an empty box with a floating pill
   underneath. Give it a real card shell (rounded, elevated, a ring around the avatar)
   and turn the floating note into a proper stat card instead of a loose banner. */
.hz-doctor-card {
    border-radius: 26px;
    border-color: rgba(255, 255, 255, .14);
    background:
        radial-gradient(circle at 24% 18%, rgba(0, 144, 215, .28), transparent 40%),
        radial-gradient(circle at 82% 82%, rgba(25, 169, 116, .18), transparent 45%),
        rgba(255, 255, 255, .05);
    box-shadow: 0 30px 70px rgba(2, 20, 26, .35);
}
.hz-avatar {
    width: 84px;
    height: 84px;
    font-size: 1.7rem;
    box-shadow: 0 0 0 6px rgba(0, 144, 215, .14);
}
.hz-floating-note {
    border-radius: 18px;
    background: linear-gradient(135deg, var(--hz-gold), var(--hz-gold-dark));
    box-shadow: 0 18px 40px rgba(0, 144, 215, .35);
}

/* Loyalty tier cards: flat panels with no interaction feedback and the "Gold"/featured
   card barely standing out. Add a hover lift to all three, and make the featured card
   genuinely read as the recommended one (larger shadow, slight scale). */
.hz-loyalty-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
.hz-loyalty-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hz-shadow-soft);
}
.hz-loyalty-card.is-featured {
    box-shadow: 0 0 0 1px rgba(0, 144, 215, .3), 0 24px 50px rgba(0, 144, 215, .16);
    transform: scale(1.03);
}
.hz-loyalty-card.is-featured:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 0 0 1px rgba(0, 144, 215, .35), var(--hz-shadow-lift);
}
@media (max-width: 980px) {
    .hz-loyalty-card.is-featured { transform: none; }
    .hz-loyalty-card.is-featured:hover { transform: translateY(-6px); }
}

/* Shop page: active/hover category filter pill */
.hz-filter-bar a.is-active,
.hz-filter-bar a:hover { background: rgba(0, 144, 215, .1); }

/* Contact page: contact method icons */
.hz-contact-card i { background: rgba(0, 144, 215, .14); }

/* About / Consultations pages: feature icon circles, featured pricing card ring */
.hz-feature-box i { background: rgba(0, 144, 215, .16); }
.hz-pricing-card.is-featured { box-shadow: 0 0 0 1px rgba(0, 144, 215, .3); }

/* Booking / Cart / Shipping / Review: active step indicator */
.hz-step.is-active { background: rgba(0, 144, 215, .08); }

/* Account/Profile: avatar initial circle */
.hz-profile-identity b { background: rgba(0, 144, 215, .16); }

/* Checkout Pay / Payment Pending: pending status icon */
.hz-status-icon.is-pending { background: rgba(0, 144, 215, .18); }

/* Login / Register / Forgot / Reset password: dark side panel, was flat black, now brand teal
   with two soft blurred glows for depth instead of a flat block of color. */
.hz-auth-copy {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #06323c, #0b4a57);
}
.hz-auth-copy::before,
.hz-auth-copy::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.hz-auth-copy::before {
    width: 300px;
    height: 300px;
    top: -110px;
    right: -90px;
    background: radial-gradient(circle, rgba(0, 144, 215, 0.38), transparent 70%);
}
.hz-auth-copy::after {
    width: 260px;
    height: 260px;
    bottom: -120px;
    left: -80px;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.16), transparent 70%);
}
.hz-auth-copy > * { position: relative; z-index: 1; }

/* Footer social icons — brand colors instead of plain outlined circles.
   Selectors repeat ".hz-social-links a" so they outrank the plain-circle rule in healza-vivid.css. */
.hz-social-links a.hz-social-wa,
.hz-social-links a.hz-social-fb,
.hz-social-links a.hz-social-li,
.hz-social-links a.hz-social-ig { border-color: transparent; color: #fff; }
.hz-social-links a.hz-social-wa { background: #25D366; }
.hz-social-links a.hz-social-fb { background: #1877F2; }
.hz-social-links a.hz-social-li { background: #0A66C2; }
.hz-social-links a.hz-social-ig { background: radial-gradient(circle at 30% 110%, #fdf497, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.hz-social-links a.hz-social-wa:hover,
.hz-social-links a.hz-social-fb:hover,
.hz-social-links a.hz-social-li:hover,
.hz-social-links a.hz-social-ig:hover { color: #fff; opacity: .88; transform: translateY(-3px); }

/* Header/footer login & account-name button: was flat black, now brand blue */
.hz-login-button { background: linear-gradient(135deg, var(--hz-gold), var(--hz-gold-dark)); }

/* Auth pages (Login/Register/Forgot/Reset): the logo sits free on the dark panel —
   no boxed shape around it, just a soft brand-blue glow lifting it off the background —
   and the form column's content is centered vertically so it doesn't leave a large
   empty gap under the last field/link. */
.hz-auth-copy img {
    filter: drop-shadow(0 8px 20px rgba(0, 144, 215, 0.5));
}
.hz-auth-form { align-content: center; }

/* Mobile header (<=980px, matches the breakpoint healza-vivid.css already uses to
   restack .hz-nav). The link row collapses behind a hamburger button into a clean
   dropdown panel. The hamburger sits on top of the row (absolute) instead of taking
   up its own flex/grid slot, so it never fights the logo or the action buttons for
   space and the row never wraps into a crowded, off-brand stack. */
.hz-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hz-gold), var(--hz-gold-dark));
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 144, 215, .26);
}
.hz-menu-toggle svg { width: 20px; height: 20px; }

/* The drawer's own header strip (small logo + close button) and its dimming backdrop belong
   ONLY to the mobile off-canvas drawer. Without these defaults they render inline inside the
   desktop nav row, which pushed the real logo onto its own line and left a stray sliver
   between the action buttons and the links. */
.hz-nav-links-head { display: none; }
.hz-nav-backdrop { display: none; }

@media (max-width: 980px) {
    /* healza-vivid.css stacks .hz-nav into a centered single-column grid here, which is
       what put the hamburger in its own orphaned row above the logo. Use a single,
       non-wrapping row instead: hamburger overlaid top-left, logo next to it, actions
       pinned to the far end. */
    .hz-nav {
        display: flex !important;
        position: relative;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 0;
        padding: 12px 0;
        /* healza-vivid.css sets overflow:hidden on .hz-nav at <=640px, which silently
           clipped the dropdown panel below (it's positioned absolute, top:100%, inside
           this element) — that's why the menu looked like it "didn't work". */
        overflow: visible !important;
    }

    .hz-menu-toggle {
        display: flex;
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .hz-brand-full img { height: 40px !important; }
    .hz-brand-full { margin-inline-start: 50px; justify-content: flex-start; }

    .hz-nav-actions {
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 8px;
        margin-inline-start: auto;
    }
    .hz-lang-switch { padding: 0 10px; }
    .hz-login-button { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Off-canvas side drawer instead of a dropdown panel: slides in from the edge of the
       screen and covers full height, with a dimmed backdrop behind it — a more standard,
       professional mobile nav pattern than a small panel hanging under the hamburger. */
    .hz-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(6, 30, 40, .42);
        z-index: 1001;
    }
    .hz-nav-backdrop.is-open { display: block; }

    .hz-nav-links {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        width: min(80vw, 320px);
        height: 100vh;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: #fff;
        border: 0;
        border-radius: 0;
        box-shadow: -18px 0 40px rgba(6, 50, 60, .2);
        padding: 18px 16px 24px;
        z-index: 1002;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .28s ease;
    }
    .hz-nav-links.is-open { transform: translateX(0); }

    .hz-nav-links-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--hz-line);
    }
    .hz-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 10px;
        background: var(--hz-cream);
        color: var(--hz-ink, #0b3a44);
        flex-shrink: 0;
    }
    .hz-nav-close svg { width: 18px; height: 18px; }

    .hz-nav-links a { padding: 14px 14px; border-radius: 12px; font-size: 15px; font-weight: 700; }
    .hz-nav-links a:hover, .hz-nav-links a.is-active { background: var(--hz-cream); }
}

/* Body scroll lock while the mobile drawer is open */
body.hz-nav-open { overflow: hidden !important; }

/* Scroll-reveal: site.js adds .hz-reveal-init on load, then swaps in .hz-in-view once a
   section (any .hz-section, or anything explicitly marked .hz-reveal) crosses into the
   viewport. Kept to a subtle fade + small upward slide so it reads as "polish", not a
   distraction, and prefers-reduced-motion turns it off entirely for anyone who needs that. */
.hz-reveal-init {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.hz-reveal-init.hz-in-view {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .hz-reveal-init {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   Animated hero
   Ambient motion behind the headline: two slowly drifting brand-colour glow
   orbs and a handful of floating dots, plus a staggered entrance for the
   headline block. All decoration lives in .hz-hero-fx (aria-hidden) and sits
   behind the content, so nothing here affects readability or layout.
   ========================================================================== */
.hz-hero-animated {
    position: relative;
    isolation: isolate;
}

.hz-hero-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Simple background tweak: a very soft directional wash behind everything so the hero
   doesn't sit on a flat, uniform cream field — subtle enough to stay out of the way of
   the orbs/blobs, just enough to give the section some depth. */
.hz-hero-animated {
    background: radial-gradient(120% 90% at 18% 0%, rgba(0, 144, 215, .06), transparent 55%),
                radial-gradient(120% 90% at 85% 100%, rgba(25, 169, 116, .06), transparent 55%);
}

.hz-hero-animated .hz-hero-inner {
    position: relative;
    z-index: 1;
}

/* Soft colour orbs — the light-theme equivalent of the dark reference site's glow.
   Punched up from the first pass (bigger, less blur, more saturated) so they read as
   an obvious colour wash behind the headline instead of a barely-there tint. */
.hz-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .8;
}
.hz-orb-1 {
    width: 560px;
    height: 560px;
    top: -180px;
    inset-inline-start: -160px;
    background: radial-gradient(circle, rgba(0, 144, 215, .55), transparent 68%);
    animation: hz-orb-drift-a 18s ease-in-out infinite;
}
.hz-orb-2 {
    width: 480px;
    height: 480px;
    bottom: -190px;
    inset-inline-end: -130px;
    background: radial-gradient(circle, rgba(25, 169, 116, .48), transparent 68%);
    animation: hz-orb-drift-b 22s ease-in-out infinite;
}

@keyframes hz-orb-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(60px, 40px, 0) scale(1.12); }
}
@keyframes hz-orb-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-50px, -40px, 0) scale(1.1); }
}

/* Blobs — actual organic shapes (not just a blur), rotating slowly, so the hero has a
   real illustrated shape behind it rather than only a soft colour glow. */
.hz-blob {
    position: absolute;
    opacity: .5;
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    filter: blur(2px);
}
.hz-blob-1 {
    width: 260px;
    height: 260px;
    top: 8%;
    inset-inline-end: 6%;
    background: linear-gradient(135deg, rgba(0, 144, 215, .22), rgba(25, 169, 116, .16));
    border: 1px solid rgba(0, 144, 215, .18);
    animation: hz-blob-spin 26s linear infinite;
}
.hz-blob-2 {
    width: 190px;
    height: 190px;
    bottom: 10%;
    inset-inline-start: 8%;
    background: linear-gradient(135deg, rgba(25, 169, 116, .2), rgba(0, 144, 215, .14));
    border: 1px solid rgba(25, 169, 116, .18);
    animation: hz-blob-spin 32s linear infinite reverse;
}
@keyframes hz-blob-spin {
    0%   { transform: rotate(0deg) scale(1); border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
    50%  { transform: rotate(180deg) scale(1.08); border-radius: 58% 42% 35% 65% / 55% 60% 40% 45%; }
    100% { transform: rotate(360deg) scale(1); border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
}

/* Floating dots, echoing the reference site's particles but calmer: smaller, a gentle
   diagonal drift instead of a straight vertical bounce, and a slow twinkle in opacity
   so they read as ambient dust rather than bouncing balls. Each one gets its own
   --hz-drift-x so the drift direction varies instead of every dot moving identically. */
.hz-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 144, 215, .4);
    animation: hz-float 16s ease-in-out infinite;
    --hz-drift-x: 8px;
}
.hz-particle-1 { left: 12%;  top: 26%; animation-delay: 0s;    width: 5px; height: 5px; --hz-drift-x: 10px; }
.hz-particle-2 { left: 26%;  top: 68%; animation-delay: -3s;   width: 5px; height: 5px; background: rgba(25, 169, 116, .4); --hz-drift-x: -8px; }
.hz-particle-3 { left: 48%;  top: 18%; animation-delay: -6.5s; width: 4px; height: 4px; --hz-drift-x: 6px; }
.hz-particle-4 { left: 72%;  top: 58%; animation-delay: -2s;   width: 7px; height: 7px; background: rgba(25, 169, 116, .32); --hz-drift-x: -10px; }
.hz-particle-5 { left: 86%;  top: 30%; animation-delay: -9s;   width: 5px; height: 5px; --hz-drift-x: 7px; }
.hz-particle-6 { left: 62%;  top: 80%; animation-delay: -11s;  width: 4px; height: 4px; background: rgba(25, 169, 116, .35); --hz-drift-x: -6px; }
.hz-particle-7 { left: 38%;  top: 42%; animation-delay: -5s;   width: 4px; height: 4px; --hz-drift-x: 9px; }
.hz-particle-8 { left: 92%;  top: 66%; animation-delay: -13s;  width: 6px; height: 6px; background: rgba(0, 144, 215, .32); --hz-drift-x: -9px; }

@keyframes hz-float {
    0%, 100%  { transform: translate(0, 0) scale(1);      opacity: .35; }
    50%       { transform: translate(var(--hz-drift-x), -22px) scale(1.1); opacity: .75; }
}

/* Staggered entrance for the hero copy. --hz-delay is set per element inline so each
   line arrives just after the one above it. */
.hz-rise {
    animation: hz-rise-in .8s cubic-bezier(.22, .9, .3, 1) both;
    animation-delay: var(--hz-delay, 0s);
}
@keyframes hz-rise-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* "every dose" gets a slowly shifting blue->green gradient instead of a flat color, so
   the headline itself has motion, not just the background behind it. */
.hz-hero h1 mark {
    background: linear-gradient(90deg, var(--hz-gold) 0%, #19a974 50%, var(--hz-gold) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hz-text-shimmer 5s linear infinite;
}
@keyframes hz-text-shimmer {
    to { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
    .hz-hero h1 mark { animation: none; background-position: 0 0; }
}

/* Mouse parallax: site.js writes --hz-parallax-x/y (from -1 to 1) onto .hz-hero-fx as the
   pointer moves, and each layer reacts by a different amount so the scene has depth
   instead of the orbs only ever moving on their own fixed loop. Ignored entirely on
   touch devices (no fine pointer) and reduced-motion. */
.hz-hero-fx {
    --hz-parallax-x: 0;
    --hz-parallax-y: 0;
}
@media (pointer: fine) {
    .hz-orb-1 { translate: calc(var(--hz-parallax-x) * 18px) calc(var(--hz-parallax-y) * 18px); }
    .hz-orb-2 { translate: calc(var(--hz-parallax-x) * -22px) calc(var(--hz-parallax-y) * -22px); }
    .hz-blob-1 { translate: calc(var(--hz-parallax-x) * 26px) calc(var(--hz-parallax-y) * 14px); }
    .hz-blob-2 { translate: calc(var(--hz-parallax-x) * -16px) calc(var(--hz-parallax-y) * -20px); }
}

/* Primary CTA gets a slow breathing glow so the eye lands on it. */
.hz-btn-glow {
    position: relative;
    animation: hz-glow-pulse 3.2s ease-in-out infinite;
}
@keyframes hz-glow-pulse {
    0%, 100% { box-shadow: 0 14px 30px rgba(0, 144, 215, .26); }
    50%      { box-shadow: 0 14px 38px rgba(0, 144, 215, .5); }
}

/* Scroll hint at the bottom of the hero. */
.hz-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 24px;
    height: 38px;
    margin-inline-start: -12px;
    border: 2px solid rgba(0, 144, 215, .35);
    border-radius: 999px;
    z-index: 1;
}
.hz-scroll-cue::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 7px;
    margin-inline-start: -2px;
    border-radius: 999px;
    background: var(--hz-gold);
    animation: hz-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes hz-scroll-cue {
    0%      { transform: translateY(0);    opacity: 1; }
    70%     { transform: translateY(12px); opacity: 0; }
    100%    { transform: translateY(0);    opacity: 0; }
}

/* Hero decoration is pure ornament — drop all of it when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
    .hz-orb,
    .hz-blob,
    .hz-particle,
    .hz-rise,
    .hz-btn-glow,
    .hz-scroll-cue::after {
        animation: none;
    }
    .hz-rise { opacity: 1; transform: none; }
}

/* Ornament gets in the way more than it helps on small screens — keep the orbs (they're
   just background colour) but drop the particles, blobs and the scroll cue. */
@media (max-width: 780px) {
    .hz-particle,
    .hz-blob,
    .hz-scroll-cue { display: none; }
    .hz-orb { opacity: .5; }
}

/* Wave dividers: swap the flat line between sections for an actual curved shape break.
   One .hz-wave-divider sits at the bottom of the hero (light -> white); a matching pair
   wraps the dark consultation section (white -> dark, then dark -> white again). */
.hz-wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 70px;
    z-index: 1;
    pointer-events: none;
}
.hz-consult-section {
    position: relative;
    isolation: isolate;
}
.hz-wave-into-dark {
    top: -1px;
    bottom: auto;
}
.hz-wave-out-of-dark {
    bottom: -1px;
}
@media (max-width: 640px) {
    .hz-wave-divider { height: 40px; }
}

/* Section eyebrow badge: a small pill+icon above a heading, used on the products and
   loyalty section headers for a stronger visual hierarchy than a plain h2. */
.hz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0, 144, 215, .12), rgba(25, 169, 116, .1));
    color: var(--hz-gold-dark);
    font-size: .8rem;
    font-weight: 900;
}
.hz-eyebrow-dark {
    background: rgba(0, 144, 215, .16);
    color: #8ee6f3;
}

/* Consultation section: ring around the avatar, and the floating note redesigned as an
   icon + text card instead of plain centered text. */
.hz-avatar-ring {
    display: inline-flex;
    padding: 8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(0, 144, 215, .6), rgba(25, 169, 116, .5), rgba(0, 144, 215, .6));
    animation: hz-ring-spin 6s linear infinite;
}
.hz-avatar-ring .hz-avatar { background: #0b3a44; }
@keyframes hz-ring-spin {
    to { transform: rotate(360deg); }
}
.hz-floating-note {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: start;
}
.hz-floating-note i {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 1rem;
}
@media (prefers-reduced-motion: reduce) {
    .hz-avatar-ring { animation: none; }
}

/* Loyalty cards: a distinct icon per tier so Silver/Gold/Platinum read as visually
   different tiers at a glance, not just a differently-colored border on the middle one. */
.hz-loyalty-icon {
    display: block;
    margin-bottom: 12px;
    font-size: 1.6rem;
}
.hz-loyalty-icon-silver { color: #8a97a3; }
.hz-loyalty-icon-gold { color: var(--hz-gold); }
.hz-loyalty-icon-platinum { color: #19a974; }

@media (max-width: 480px) {
    .hz-brand-full img { height: 34px !important; }
    .hz-brand-full { margin-inline-start: 46px; }
    .hz-lang-switch span { display: none; }
    .hz-login-button { max-width: 92px; }
}

@media (max-width: 640px) {
    /* Items stack to one column here, so the vertical dividers between them no longer
       make sense — they'd just float to the left of each row. */
    .hz-features-grid span::before { display: none; }
}

/* Contact / Booking / Register forms: phone row (country dial-code select + number input) */
.hz-phone-row { display: flex; gap: 8px; }
.hz-phone-input { flex: 1; }
.hz-dial-select {
    min-height: 46px;
    max-width: 190px;
    border: 1px solid var(--hz-line);
    border-radius: 14px;
    background: var(--hz-warm);
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* About page: the "Quality / Honesty / Personalization / Customer care" icon grid is
   scoped as .hz-about-copy .hz-feature-strip (two classes), which is more specific than
   the generic ".hz-feature-strip { grid-template-columns: 1fr }" mobile rule in
   healza-vivid.css — so that generic rule never won here and this block stayed forced
   to 2 columns on every screen size, unlike every other icon grid on the page. */
@media (max-width: 980px) {
    .hz-about-copy .hz-feature-strip {
        grid-template-columns: 1fr;
    }
}

/* Product details: thumbnail row can hold more images than a narrow screen fits.
   The page wrapper hides horizontal overflow site-wide, so without this the extra
   thumbnails were just invisible/unreachable instead of scrollable. */
.hz-thumbs {
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}
.hz-thumb { flex-shrink: 0; }

/* Visual polish pass: stronger hierarchy, cleaner commerce cards, and calmer checkout surfaces. */
.hz-pill {
    gap: 8px;
    border: 1px solid rgba(0, 144, 215, .14);
    background: rgba(0, 144, 215, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.hz-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 108px;
    background: linear-gradient(145deg, rgba(234, 246, 244, .94), rgba(255, 255, 255, .96) 54%, rgba(230, 249, 244, .92));
}

.hz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 144, 215, .06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(25, 169, 116, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}

.hz-hero-inner,
.hz-page-hero-inner {
    position: relative;
}

.hz-hero-inner {
    max-width: 900px;
}

.hz-hero h1 {
    max-width: 860px;
    text-wrap: balance;
}

.hz-hero p {
    max-width: 660px;
}

.hz-hero-actions {
    flex-wrap: wrap;
}

.hz-btn {
    border-radius: 999px;
    font-weight: 900;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.hz-btn:hover,
.hz-product-card:hover .hz-product-foot button,
.hz-round-button:hover {
    transform: translateY(-2px);
}

.hz-btn-gold,
.hz-btn-gold:hover,
.hz-btn-gold:focus,
.hz-btn-gold:active {
    box-shadow: 0 14px 30px rgba(0, 144, 215, .26);
}

.hz-btn-ghost {
    border-color: rgba(0, 144, 215, .18);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 28px rgba(6, 50, 60, .06);
}

.hz-btn-ghost:hover {
    border-color: rgba(0, 144, 215, .32);
    background: #fff;
}

.hz-section {
    background: rgba(255, 255, 255, .94);
}

.hz-section-head {
    align-items: center;
}

.hz-section-head h2,
.hz-centered-head h2,
.hz-page-hero h1 {
    text-wrap: balance;
}

.hz-section-head a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* auto-fit instead of a fixed 4-column grid: healza-vivid.css's repeat(4, 1fr) always
   reserves 4 tracks even when there are only 2-3 real products, leaving an empty,
   lopsided gap on the right. Sizing columns by content means 3 products fill the row
   evenly instead of sitting stranded on the left. */
.hz-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.hz-product-card {
    display: grid;
    min-height: 100%;
    border: 1px solid rgba(0, 144, 215, .1);
    border-radius: 20px;
    padding: 18px;
    background: #fff;
    box-shadow: var(--hz-shadow-soft);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hz-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 144, 215, .26);
    box-shadow: var(--hz-shadow-lift);
}

.hz-product-art {
    height: auto;
    aspect-ratio: 1.18 / 1;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--hz-soft-blue), #fff);
}

.hz-product-art img {
    transition: transform .35s ease;
}

.hz-product-card:hover .hz-product-art img {
    transform: scale(1.04);
}

.hz-product-card h3 {
    margin-top: 16px;
    line-height: 1.35;
}

.hz-product-card p {
    min-height: 3.1em;
}

.hz-product-foot {
    margin-top: auto;
    padding-top: 16px;
}

.hz-product-foot strong {
    color: #062f42;
}

.hz-product-foot button {
    width: 40px;
    height: 40px;
    border-color: rgba(0, 144, 215, .18);
    background: rgba(0, 144, 215, .09);
    color: var(--hz-gold-dark);
    box-shadow: 0 10px 24px rgba(0, 144, 215, .1);
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.hz-product-foot button:hover {
    background: linear-gradient(135deg, var(--hz-gold), var(--hz-gold-dark));
    color: #fff;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 12px 26px rgba(0, 144, 215, .32);
}

.hz-filter-bar {
    gap: 12px;
}

.hz-filter-bar a {
    border-color: rgba(0, 144, 215, .15);
    box-shadow: 0 8px 22px rgba(6, 50, 60, .045);
}

/* Every secondary page (Booking, Contact, About, Shop, Cart, Checkout, ...) opens with
   .hz-page-hero, so giving it the same drifting glow treatment as the homepage hero — via
   ::before/::after, no markup changes needed — brings that same "alive" feeling to all 10
   pages that use it in one place. Content gets a staggered rise-in the same way. */
.hz-page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(140deg, rgba(234, 246, 244, .98), rgba(255, 255, 255, .96) 62%, rgba(232, 248, 244, .95));
    border-bottom: 1px solid rgba(0, 144, 215, .1);
}

.hz-page-hero::before,
.hz-page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .7;
}
.hz-page-hero::before {
    width: 320px;
    height: 320px;
    top: -120px;
    inset-inline-start: -80px;
    background: radial-gradient(circle, rgba(0, 144, 215, .45), transparent 70%);
    animation: hz-orb-drift-a 16s ease-in-out infinite;
}
.hz-page-hero::after {
    width: 280px;
    height: 280px;
    bottom: -130px;
    inset-inline-end: -70px;
    background: radial-gradient(circle, rgba(25, 169, 116, .38), transparent 70%);
    animation: hz-orb-drift-b 20s ease-in-out infinite;
}

.hz-page-hero-inner > * {
    animation: hz-rise-in .7s cubic-bezier(.22, .9, .3, 1) both;
}
.hz-page-hero-inner > *:nth-child(1) { animation-delay: .05s; }
.hz-page-hero-inner > *:nth-child(2) { animation-delay: .16s; }
.hz-page-hero-inner > *:nth-child(3) { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
    .hz-page-hero::before,
    .hz-page-hero::after { animation: none; }
    .hz-page-hero-inner > * { animation: none; }
}
@media (max-width: 640px) {
    .hz-page-hero::before,
    .hz-page-hero::after { opacity: .4; }
}

.hz-steps-bar {
    background: linear-gradient(180deg, var(--hz-cream), #fff);
    padding-bottom: 40px;
}

/* Connecting progress line behind the step circles, filled up to the active step, so the
   3 steps read as one flow rather than three unrelated pills. */
.hz-steps {
    position: relative;
}
.hz-steps::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline: 6%;
    height: 2px;
    background: var(--hz-line);
    z-index: 0;
    transform: translateY(-50%);
}
.hz-step {
    position: relative;
    z-index: 1;
    min-height: 58px;
    border-radius: 8px;
    border-color: rgba(0, 144, 215, .16);
    box-shadow: 0 10px 24px rgba(6, 50, 60, .045);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hz-step b {
    width: 28px;
    height: 28px;
    transition: background .2s ease, box-shadow .2s ease;
}

.hz-step.is-active {
    border-color: rgba(0, 144, 215, .62);
    background: linear-gradient(135deg, rgba(0, 144, 215, .12), rgba(25, 169, 116, .08));
    box-shadow: 0 16px 36px rgba(0, 144, 215, .12);
}
.hz-step.is-active b {
    background: linear-gradient(135deg, var(--hz-gold), var(--hz-gold-dark));
    color: #fff;
    box-shadow: 0 0 0 5px rgba(0, 144, 215, .16);
    animation: hz-step-pulse 2.4s ease-in-out infinite;
}
@keyframes hz-step-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(0, 144, 215, .16); }
    50%      { box-shadow: 0 0 0 9px rgba(0, 144, 215, .08); }
}
@media (prefers-reduced-motion: reduce) {
    .hz-step.is-active b { animation: none; }
}

.hz-panel {
    border-radius: 8px;
    border-color: rgba(0, 144, 215, .14);
    box-shadow: var(--hz-shadow-soft);
}

.hz-panel h2 {
    line-height: 1.35;
}

/* Booking page: form panel gets a colored top accent so it doesn't sit as a plain white
   box, and the two side info cards get the same hover-lift as other showcase cards
   elsewhere on the site instead of being static. */
.hz-panel.hz-form {
    position: relative;
    overflow: hidden;
}
.hz-panel.hz-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--hz-gold), #19a974);
}
.hz-info-icon {
    background: linear-gradient(135deg, rgba(0, 144, 215, .14), rgba(25, 169, 116, .12));
    transition: transform .2s ease;
}
.hz-booking-side .hz-panel {
    transition: transform .22s ease, box-shadow .22s ease;
}
.hz-booking-side .hz-panel:hover {
    transform: translateY(-5px);
    box-shadow: var(--hz-shadow-lift);
}
.hz-booking-side .hz-panel:hover .hz-info-icon {
    transform: scale(1.1) rotate(-4deg);
}

.hz-summary {
    position: sticky;
    top: 104px;
}

.hz-summary dl div,
.hz-totals div {
    align-items: center;
    gap: 18px;
}

.hz-summary dl dd,
.hz-totals dd {
    font-weight: 900;
    text-align: end;
}

.hz-cart-item,
.hz-review-item,
.hz-address-card {
    border-radius: 8px;
    border-color: rgba(0, 144, 215, .14);
    box-shadow: 0 12px 30px rgba(6, 50, 60, .045);
}

.hz-cart-item {
    padding: 18px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hz-cart-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 144, 215, .25);
    box-shadow: 0 18px 42px rgba(6, 50, 60, .08);
}

.hz-cart-item img,
.hz-review-item img {
    border-radius: 8px;
}

.hz-round-button {
    border-color: rgba(0, 144, 215, .16);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.hz-round-button:not(.danger):hover {
    border-color: rgba(0, 144, 215, .38);
    background: rgba(0, 144, 215, .08);
}

.hz-round-button.danger {
    background: #fff8f6;
}

.hz-form input,
.hz-form select,
.hz-form textarea,
.hz-auth-form input,
.hz-auth-form select {
    border-radius: 8px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.hz-form input:focus,
.hz-form select:focus,
.hz-form textarea:focus,
.hz-auth-form input:focus,
.hz-auth-form select:focus {
    box-shadow: 0 0 0 4px rgba(0, 144, 215, .1);
    outline: none;
}

/* ==========================================================================
   Secondary customer pages — same treatment as the homepage pass: showcase
   cards (feature boxes, contact cards, pricing tiers, order cards) get the
   rounder radius + soft shadow + hover-lift already used for product/loyalty
   cards, instead of sitting flat with no interaction feedback. Utility
   elements (forms, cart rows, steps, panels) already got this in an earlier
   pass and are left as-is.
   ========================================================================== */

/* About / Consultations: "why choose us" and value-prop icon boxes */
.hz-feature-box {
    border-radius: 20px;
    border-color: rgba(0, 144, 215, .1);
    box-shadow: var(--hz-shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease;
}
.hz-feature-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--hz-shadow-lift);
}
.hz-feature-box i {
    transition: transform .2s ease;
}
.hz-feature-box:hover i {
    transform: scale(1.1);
}

/* Contact page: phone/email/address method cards */
.hz-contact-card {
    border-radius: 20px;
    border-color: rgba(0, 144, 215, .1);
    transition: transform .22s ease, box-shadow .22s ease;
}
.hz-contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hz-shadow-lift);
}

/* Consultations page: pricing tiers get the same hover-lift and featured-tier
   emphasis as the homepage loyalty cards. */
.hz-pricing-card {
    transition: transform .25s ease, box-shadow .25s ease;
}
.hz-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hz-shadow-soft);
}
.hz-pricing-card.is-featured {
    box-shadow: 0 0 0 1px rgba(0, 144, 215, .3), 0 24px 50px rgba(0, 144, 215, .16);
    transform: scale(1.03);
}
.hz-pricing-card.is-featured:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 0 0 1px rgba(0, 144, 215, .35), var(--hz-shadow-lift);
}
@media (max-width: 980px) {
    .hz-pricing-card.is-featured { transform: none; }
    .hz-pricing-card.is-featured:hover { transform: translateY(-6px); }
}

/* My Orders: each order is a link to its details, so it should read as
   clickable rather than a static row. */
.hz-order-card {
    border-color: rgba(0, 144, 215, .1);
    box-shadow: var(--hz-shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.hz-order-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 144, 215, .22);
    box-shadow: var(--hz-shadow-lift);
}

/* Product details: zoom the main image slightly on hover, like the product
   grid cards, and give the active thumbnail a visible selected state instead
   of it only being distinguishable by which image is showing above. */
.hz-gallery-main {
    box-shadow: var(--hz-shadow-soft);
}
.hz-gallery-main img {
    transition: transform .4s ease;
}
.hz-gallery-main:hover img {
    transform: scale(1.05);
}
.hz-thumb {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hz-thumb:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 144, 215, .35);
}
.hz-thumb.is-active {
    border-color: var(--hz-gold);
    box-shadow: 0 0 0 2px rgba(0, 144, 215, .18);
}

/* Status pages (payment success/failed/pending, access denied): the result
   icon just appeared instantly before — a quick scale-in draws the eye to
   the actual outcome instead of it blending in with the rest of the card. */
.hz-status-icon {
    animation: hz-status-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes hz-status-pop {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hz-status-icon { animation: none; }
}

@media (max-width: 980px) {
    .hz-summary {
        position: static;
    }

    .hz-page-hero-inner {
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .hz-container,
    .hz-nav {
        width: min(100% - 28px, 420px);
    }

    .hz-hero {
        padding: 74px 0 78px;
    }

    .hz-product-card {
        padding: 12px;
    }

    .hz-step {
        min-height: 52px;
        justify-content: flex-start;
        padding: 0 12px;
    }

    .hz-panel {
        padding: 24px;
    }
}

/* ==========================================================================
   About page redesign
   The value/why-choose cards previously all shared one flat blue icon and the
   founder card stretched to match the copy column, leaving a large dead gap
   at its bottom. This gives each icon its own accent colour, turns the
   founder card into an actual feature (quote mark, avatar, stat row) so the
   extra height reads as intentional, and gives Vision/Mission an icon instead
   of a bare number.
   ========================================================================== */

/* "Our Story" value cards: each gets its own accent instead of identical blue. */
.hz-value-1 i { background: rgba(0, 144, 215, .14); color: var(--hz-gold-dark); }
.hz-value-2 i { background: rgba(25, 169, 116, .14); color: #19a974; }
.hz-value-3 i { background: rgba(157, 92, 214, .14); color: #7b3fc4; }
.hz-value-4 i { background: rgba(233, 96, 122, .14); color: #d94766; }

/* "Why choose Healza" cards: same idea, cycling through the brand accents. */
.hz-why-grid .hz-feature-box:nth-child(4n+1) i { background: rgba(0, 144, 215, .14); color: var(--hz-gold-dark); }
.hz-why-grid .hz-feature-box:nth-child(4n+2) i { background: rgba(25, 169, 116, .14); color: #19a974; }
.hz-why-grid .hz-feature-box:nth-child(4n+3) i { background: rgba(233, 168, 27, .16); color: #b9800f; }
.hz-why-grid .hz-feature-box:nth-child(4n+4) i { background: rgba(157, 92, 214, .14); color: #7b3fc4; }
.hz-why-section .hz-centered-head { display: grid; justify-items: center; }

/* Founder card, redesigned as a leadership quote card: a large pull-quote up top (the
   card's actual focal point), the fuller bio underneath in a quieter tone, and a footer
   row pinned to the bottom with the avatar + name/title — so the extra height next to
   the taller copy column reads as a deliberate quote-card layout, not empty space. */
.hz-brand-story {
    position: relative;
    overflow: hidden;
}
.hz-brand-quote {
    position: absolute;
    top: 18px;
    inset-inline-end: 24px;
    font-size: 3.4rem;
    color: rgba(255, 255, 255, .08);
}
.hz-founder-quote {
    position: relative;
    margin: 0 0 18px !important;
    color: #fff !important;
    font-size: 1.28rem !important;
    font-weight: 800;
    line-height: 1.55 !important;
}
.hz-founder-text {
    font-size: .92rem !important;
    color: rgba(255, 255, 255, .74) !important;
}
.hz-founder-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.hz-founder-footer h2 {
    margin: 0;
    font-size: 1.05rem !important;
    font-weight: 900;
}
.hz-founder-footer span {
    color: #8ee6f3;
    font-weight: 700;
    font-size: .78rem;
}
.hz-founder-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 1.25rem;
}

/* Trust badge row under the hero subtitle: descriptive tags, not numbers, so the hero
   gains credibility markers without inventing metrics. */
.hz-badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.hz-badge-row li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(0, 144, 215, .14);
    box-shadow: 0 6px 16px rgba(6, 50, 60, .05);
    color: var(--hz-text);
    font-size: .82rem;
    font-weight: 800;
}
.hz-badge-row i {
    color: var(--hz-gold-dark);
    font-size: .82rem;
}
@media (max-width: 640px) {
    .hz-badge-row { gap: 8px; }
    .hz-badge-row li { padding: 7px 13px; font-size: .76rem; }
}

/* Vision / Mission panels: icon circle above the number instead of the number alone. */
.hz-vision-panel {
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}
.hz-vision-panel:hover {
    transform: translateY(-4px);
    box-shadow: var(--hz-shadow-lift);
}
.hz-vision-panel .hz-info-icon {
    margin-bottom: 16px;
}
.hz-vision-panel {
    overflow: hidden;
}
.hz-vision-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--hz-gold), #19a974);
}

/* Vision/Mission gets its own soft tinted band instead of sitting on the same flat white
   as the sections above and below it, so the page reads in rhythm rather than one long
   uninterrupted white field. A faint blurred glow echoes the hero without competing with
   the panels sitting on top of it. */
.hz-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #f6fbfa 0%, #fbfefe 100%);
    border-block: 1px solid rgba(0, 144, 215, .08);
}
.hz-band::before {
    content: "";
    position: absolute;
    top: -140px;
    inset-inline-end: 8%;
    width: 320px;
    height: 320px;
    z-index: -1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    background: radial-gradient(circle, rgba(25, 169, 116, .18), transparent 70%);
}

/* Closing CTA: a proper full-bleed brand-gradient band (matching the founder card) so the
   page ends on a strong note instead of another plain light hero clone. */
.hz-about-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 70px 0;
    background: linear-gradient(145deg, #07323a 0%, #0a5963 68%, #0798d6 150%);
    color: rgba(255, 255, 255, .92);
}
.hz-about-cta::before,
.hz-about-cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .55;
}
.hz-about-cta::before {
    width: 300px;
    height: 300px;
    top: -110px;
    inset-inline-start: -70px;
    background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 70%);
    animation: hz-orb-drift-a 16s ease-in-out infinite;
}
.hz-about-cta::after {
    width: 260px;
    height: 260px;
    bottom: -110px;
    inset-inline-end: -60px;
    background: radial-gradient(circle, rgba(0, 144, 215, .4), transparent 70%);
    animation: hz-orb-drift-b 20s ease-in-out infinite;
}
.hz-about-cta .hz-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
}
.hz-about-cta .hz-btn-ghost:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
}
@media (prefers-reduced-motion: reduce) {
    .hz-about-cta::before,
    .hz-about-cta::after { animation: none; }
}

/* A little more life in the icon hover across value/feature cards: a slight rotate on
   top of the existing scale, instead of a flat zoom. */
.hz-feature-box:hover i {
    transform: scale(1.1) rotate(-6deg);
}

@media (max-width: 780px) {
    .hz-brand-quote { display: none; }
    .hz-band::before { opacity: .3; }
}