/* =========================================================================
   VETMEDIX — Design System
   1.  Tokens
   2.  Dark theme
   3.  Reset & base
   4.  Layout primitives
   5.  Typography & utilities
   6.  Buttons, chips & badges
   7.  Forms
   8.  Announcement bar & scroll progress
   9.  Navbar
   10. Hero
   11. Marquee / trust strip
   12. About & feature cards
   13. Products
   14. Why us & stats
   15. Testimonials
   16. FAQ accordion
   17. Contact
   18. Footer
   19. Floating widgets (WhatsApp, back-to-top, quote)
   20. Drawer, modal, toast
   21. Product detail page
   22. Animations
   23. Responsive
   24. Reduced motion & print
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Brand */
    --primary: #3bac48;
    --primary-dark: #2f8c39;
    --primary-darker: #256f2d;
    --primary-light: rgba(59, 172, 72, 0.10);
    --primary-soft: rgba(59, 172, 72, 0.18);

    --secondary: #313d91;
    --secondary-dark: #26306f;
    --secondary-light: rgba(49, 61, 145, 0.10);
    --secondary-soft: rgba(49, 61, 145, 0.18);

    --accent: #5dd066;
    --warning: #d97706;
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.10);
    --success: #16a34a;
    --info: #0284c7;

    /* Surfaces — semantic names used everywhere, aliases kept for legacy */
    --bg: #ffffff;
    --bg-light: #f6f8fb;
    --bg-dark: #141c46;
    --bg-darker: #0d1330;
    --surface: #ffffff;
    --surface-2: #f6f8fb;
    --surface-3: #eef2f7;
    --white: #ffffff;
    --bg-card: #ffffff;

    /* Text */
    --text: #0f172a;
    --text-main: #334155;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --text-light: #f1f5f9;
    --text-on-brand: #ffffff;

    /* Lines */
    --border: rgba(15, 23, 42, 0.09);
    --border-strong: rgba(15, 23, 42, 0.16);
    --border-color: rgba(15, 23, 42, 0.09);

    /* Typography */
    --font-heading: 'Segoe UI Variable Display', 'Aptos Display', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Segoe UI Variable Text', 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Spacing & rhythm */
    --section-y: 30px;
    --container-max: 1280px;
    --gutter: clamp(16px, 4vw, 28px);
    --nav-h: 72px;

    /* Motion */
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 24px -8px rgba(15, 23, 42, 0.13), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 24px 48px -16px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 40px 80px -24px rgba(15, 23, 42, 0.24);
    --shadow-brand: 0 10px 30px -10px rgba(59, 172, 72, 0.55);

    /* Radii */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Layering */
    --z-nav: 900;
    --z-float: 940;
    --z-drawer: 960;
    --z-modal: 980;
    --z-toast: 1000;
}

/* -------------------------------------------------------------------------
   2. Dark theme
   ---------------------------------------------------------------------- */
body.dark-theme {
    color-scheme: dark;

    --bg: #0b1120;
    --bg-light: #0b1120;
    --bg-dark: #070c18;
    --bg-darker: #05080f;
    --surface: #131c31;
    --surface-2: #0f1728;
    --surface-3: #1b263f;
    --white: #131c31;
    --bg-card: #131c31;

    --text: #f8fafc;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;

    --border: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(148, 163, 184, 0.28);
    --border-color: rgba(148, 163, 184, 0.16);

    --primary-light: rgba(59, 172, 72, 0.16);
    --secondary-light: rgba(120, 134, 224, 0.16);
    --danger-light: rgba(248, 113, 113, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 26px 50px -18px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 40px 80px -24px rgba(0, 0, 0, 0.8);
}

/* Deep-blue text becomes unreadable on a dark surface — lift it. */
body.dark-theme .section-title,
body.dark-theme .product-title,
body.dark-theme .feature-card h3,
body.dark-theme .stat-number,
body.dark-theme .panel-title,
body.dark-theme .modal-title,
body.dark-theme .page-title,
body.dark-theme .footer-title,
body.dark-theme .product-name,
body.dark-theme .accordion-trigger,
body.dark-theme .client-details h4 { color: var(--text); }

body.dark-theme .text-secondary { color: #8b98ee; }

/* -------------------------------------------------------------------------
   3. Reset & base
   ---------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg);
    line-height: 1.65;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--secondary);
}

a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }
ul { list-style: none; }
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* Component classes set `display`, which would otherwise beat the user-agent
   `[hidden] { display: none }` rule and leave hidden elements on screen. */
[hidden] { display: none !important; }

/* One consistent, visible focus ring everywhere. */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary); color: #fff; }

/* Custom scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -80px;
    z-index: var(--z-toast);
    background: var(--primary);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 16px; }

/* -------------------------------------------------------------------------
   4. Layout primitives
   ---------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; position: relative; }
.section-sm { padding: calc(var(--section-y) * 0.6) 0; }
.bg-light { background-color: var(--bg-light); }
.bg-surface { background-color: var(--surface); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-secondary-light { background-color: var(--secondary-light); }

.grid-layout,
.about-container,
.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.items-start { align-items: flex-start !important; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.z-10 { z-index: 10; }
.inline-flex { display: inline-flex; }

/* -------------------------------------------------------------------------
   5. Typography & utilities
   ---------------------------------------------------------------------- */
.text-gradient {
    background: linear-gradient(100deg, var(--primary), var(--accent) 60%, #7ee089);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-white { color: #fff; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid var(--primary-soft);
}
body.dark-theme .section-badge { color: var(--accent); }

.section-badge .dot {
    width: 7px;
    height: 7px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--primary-light);
    animation: dot-pulse 2.4s ease-in-out infinite;
}

.section-title {
    font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
    margin-bottom: 14px;
    text-wrap: balance;
}

.section-subtitle {
    display: block;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8125rem;
    margin-bottom: 12px;
}

.section-desc {
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    color: var(--text-muted);
    margin-bottom: 22px;
    max-width: 60ch;
}

.section-header { margin-bottom: 34px; }
.section-header.text-center .section-desc { margin-left: auto; margin-right: auto; }

/* Heading on the left, controls in the space beside it instead of stacked
   underneath — keeps the catalogue reachable without scrolling. */
.section-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 28px 40px;
    align-items: end;
    margin-bottom: 22px;
}
.section-head-split > .section-header { margin-bottom: 0; }
.section-head-split > .section-header .section-desc { margin-bottom: 0; }

/* Inside the narrow right-hand column the controls stack: full-width search
   on top, sort and layout switch beneath. */
.section-head-split > .products-toolbar {
    margin-bottom: 0;
    flex-direction: column;
    align-items: stretch;
}
/* The row-direction `flex: 1 1 260px` set further down would become a 260px
   HEIGHT once the toolbar switches to a column, so reset the basis — and out-
   specify that later rule while doing it. */
.section-head-split > .products-toolbar > .search-bar-container {
    flex: 0 0 auto;
    max-width: none;
}
.section-head-split .toolbar-group > .select-sm { flex: 1; min-width: 0; }

@media (max-width: 992px) {
    .section-head-split { grid-template-columns: 1fr; align-items: stretch; }
}

.eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--text-subtle);
}

.icon-slot { display: inline-flex; align-items: center; justify-content: center; }
.vm-icon { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   6. Buttons, chips & badges
   ---------------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; }

.btn-sm { padding: 9px 18px; font-size: 0.875rem; }
.btn-lg { padding: 16px 32px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 10px; border-radius: var(--radius-sm); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(59, 172, 72, 0.7); }

.btn-secondary {
    background: var(--secondary);
    color: #fff;
    box-shadow: 0 10px 26px -12px rgba(49, 61, 145, 0.7);
}
.btn-secondary:hover { background: var(--secondary-dark); transform: translateY(-2px); }

.btn-ghost { background: var(--surface-3); color: var(--text-main); }
.btn-ghost:hover { background: var(--border); }

.btn-soft { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-soft); }
.btn-soft:hover { background: var(--primary-soft); }
body.dark-theme .btn-soft { color: var(--accent); }

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

/* On the dark hero the outline button needs light chrome. */
.on-dark .btn-outline,
.btn-outline.on-dark {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.on-dark .btn-outline:hover,
.btn-outline.on-dark:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.6); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.icon-right { transition: transform var(--transition-fast); }
.btn:hover .icon-right { transform: translateX(4px); }

/* Inline spinner used for form submits */
.btn .spinner {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
    display: none;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn-label { opacity: 0.75; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--primary-light);
    color: var(--primary-dark);
}
body.dark-theme .badge-soft { color: var(--accent); }

/* -------------------------------------------------------------------------
   7. Forms
   ---------------------------------------------------------------------- */
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group label,
.field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
}
.field-label .req { color: var(--danger); }

.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.form-control::placeholder { color: var(--text-subtle); }
.form-control:hover { border-color: var(--text-subtle); }
.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}
.form-control[aria-invalid="true"] { border-color: var(--danger); }
.form-control[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--danger-light); }
textarea.form-control { resize: vertical; min-height: 110px; }

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
}

.field-error {
    display: none;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--danger);
    font-weight: 500;
}
.field-error.visible { display: block; }

.field-hint { margin-top: 6px; font-size: 0.8125rem; color: var(--text-muted); }

.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* Search input with a leading icon */
.search-bar-container { position: relative; width: 100%; max-width: 520px; }
.search-bar {
    width: 100%;
    padding: 14px 44px 14px 46px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    font-size: 0.95rem;
    color: var(--text-main);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-bar::placeholder { color: var(--text-subtle); }
.search-bar:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
    display: flex;
}
.search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--surface-3);
}
.search-clear.visible { display: flex; }
.search-clear:hover { background: var(--danger-light); color: var(--danger); }

.kbd-hint {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-subtle);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 6px;
    pointer-events: none;
}
.search-bar-container:focus-within .kbd-hint { display: none; }

/* -------------------------------------------------------------------------
   8. Announcement bar & scroll progress
   ---------------------------------------------------------------------- */
.announce-bar {
    position: relative;
    z-index: calc(var(--z-nav) + 1);
    background: linear-gradient(100deg, var(--secondary), #3f4fb8 55%, var(--primary-dark));
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
}
.announce-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px var(--gutter);
    text-align: center;
}
.announce-inner strong { font-weight: 700; }
.announce-inner a { text-decoration: underline; text-underline-offset: 3px; }
.announce-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    padding: 4px;
    border-radius: 50%;
}
.announce-close:hover { color: #fff; background: rgba(255, 255, 255, 0.15); }
body.announce-hidden .announce-bar { display: none; }

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
    z-index: calc(var(--z-nav) + 5);
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. Navbar
   ---------------------------------------------------------------------- */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    z-index: var(--z-nav);
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}
.navbar > .container { width: 100%; }

/* Transparent over the hero, solid once scrolled or on inner pages.
   The height stays fixed at 72px so the sticky bar never shifts the page. */
.navbar.scrolled,
body.nav-solid .navbar {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .navbar.scrolled, body.nav-solid .navbar { background-color: var(--surface); }
}

.nav-container { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo img { height: 40px; width: auto; transition: filter var(--transition-normal); }

/* Only invert the mark while it sits on the dark hero. The open mobile menu
   turns the bar solid, so the mark has to go back to full colour — matched
   specificity plus source order beats the rule above. */
body:not(.nav-solid) .navbar:not(.scrolled) .logo img { filter: brightness(0) invert(1); }
body.nav-open .navbar:not(.scrolled) .logo img { filter: none; }

.nav-list { display: flex; gap: 6px; }

.nav-link {
    position: relative;
    display: block;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.navbar.scrolled .nav-link,
body.nav-solid .nav-link { color: var(--text-main); }

.nav-link::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #fff; }
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active,
body.nav-solid .nav-link:hover,
body.nav-solid .nav-link.active { color: var(--primary); background: var(--primary-light); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle,
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.theme-toggle:hover, .mobile-toggle:hover { background: rgba(255, 255, 255, 0.14); }

.navbar.scrolled .theme-toggle,
.navbar.scrolled .mobile-toggle,
body.nav-solid .theme-toggle,
body.nav-solid .mobile-toggle { color: var(--text-main); }
.navbar.scrolled .theme-toggle:hover,
.navbar.scrolled .mobile-toggle:hover,
body.nav-solid .theme-toggle:hover,
body.nav-solid .mobile-toggle:hover { background: var(--surface-3); }

.mobile-toggle { display: none; }

body.dark-theme .theme-toggle .icon-moon,
body:not(.dark-theme) .theme-toggle .icon-sun { display: none; }
body.dark-theme .theme-toggle .icon-sun,
body:not(.dark-theme) .theme-toggle .icon-moon { display: flex; }

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 26, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    z-index: calc(var(--z-nav) - 1);
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------------------
   10. Hero
   ---------------------------------------------------------------------- */
/* Pulled up under the transparent sticky navbar. */
.hero {
    position: relative;
    min-height: clamp(620px, 94vh, 960px);
    display: flex;
    align-items: center;
    margin-top: calc(var(--nav-h) * -1);
    /* The bottom padding must clear the wave. Both derive from --wave-h so a
       wide-but-short viewport can never let the wave crop the content. */
    --wave-h: clamp(88px, 9vw, 124px);
    padding: calc(var(--nav-h) + clamp(18px, 3vh, 32px)) 0 calc(var(--wave-h) + clamp(28px, 4vh, 52px));
    overflow: hidden;
    color: #fff;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-color: var(--bg-dark);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(59, 172, 72, 0.22) 0%, transparent 70%),
        linear-gradient(165deg, #1b2557 0%, var(--bg-dark) 45%, #0c1230 100%);
    background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
    z-index: 0;
}
.hero > .container, .hero-wave { position: relative; z-index: 3; }

.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: blob-pulse 9s ease-in-out infinite alternate; }
/* Sized against the viewport so they never spill past a narrow screen. */
.blob-1 { top: 6%; left: 6%; width: min(420px, 76vw); aspect-ratio: 1; background: rgba(59, 172, 72, 0.34); }
.blob-2 { bottom: 4%; right: 4%; width: min(520px, 84vw); aspect-ratio: 1; background: rgba(64, 80, 190, 0.5); animation-delay: 2.5s; }

.molecular-pattern {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.28;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
}

.bg-symbol {
    position: absolute;
    color: rgba(255, 255, 255, 0.055);
    z-index: 1;
    pointer-events: none;
    animation: float-symbol 9s ease-in-out infinite;
    transform: rotate(var(--rot, 0deg));
}
.bg-symbol svg { width: var(--sym-size, 64px); height: var(--sym-size, 64px); }

.hero-container { align-items: center; }

.glass-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    background: rgba(59, 172, 72, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 172, 72, 0.45);
    box-shadow: 0 0 26px rgba(59, 172, 72, 0.22), inset 0 0 12px rgba(59, 172, 72, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #8ce897;
    margin-bottom: 22px;
}
.glass-badge svg { color: var(--accent); }

.hero .subtitle {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8125rem;
    margin-bottom: 14px;
}

.hero-title {
    font-size: clamp(2.4rem, 1.2rem + 4vw, 4.4rem);
    color: #fff;
    margin-bottom: 20px;
    text-wrap: balance;
}

.hero-desc {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 32px;
    max-width: 56ch;
}

.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.glass-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    color: var(--accent);
    flex-shrink: 0;
}
.trust-text { display: flex; flex-direction: column; line-height: 1.35; }
.trust-text strong { font-size: 0.9rem; color: #fff; white-space: nowrap; }
.trust-text span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }

/* Orbiting product system */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }

.orbiting-system {
    position: relative;
    width: min(380px, 82vw);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
}
.ring-1 { width: 52%; height: 52%; border-color: rgba(59, 172, 72, 0.45); }
.ring-2 { width: 82%; height: 82%; border-color: rgba(140, 152, 238, 0.4); }
.ring-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 60%; height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 172, 72, 0.28), transparent 65%);
    filter: blur(20px);
}

.center-logo {
    position: absolute;
    width: 32%;
    aspect-ratio: 1;
    background: linear-gradient(150deg, #1a2450, #0d1330);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(59, 172, 72, 0.4), inset 0 0 26px rgba(59, 172, 72, 0.22);
    border: 2px solid rgba(59, 172, 72, 0.75);
    z-index: 10;
    animation: soft-float 6s ease-in-out infinite;
}
.center-logo img { max-width: 66%; filter: brightness(0) invert(1); }

.satellite {
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    animation: orbit-anim var(--duration, 24s) linear infinite;
    animation-delay: var(--delay, 0s);
    z-index: 6;
}
.satellite.reverse { animation-name: orbit-anim-reverse; }

@keyframes orbit-anim {
    from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
}
@keyframes orbit-anim-reverse {
    from { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
    to   { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
}

.orbit-icon {
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    color: var(--primary);
}
.orbit-icon.alt { color: var(--secondary); }

/* One calm sweep into the next section, with a single whisper-thin tinted
   sliver behind it for depth. No stacked bands, no glowing edge. */
.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: var(--wave-h, clamp(88px, 9vw, 124px));
    pointer-events: none;
}
.waves { width: 100%; height: 100%; display: block; }

.ws-tint-1 { stop-color: var(--primary); stop-opacity: 0.26; }
.ws-tint-2 { stop-color: var(--accent);  stop-opacity: 0.14; }
.ws-tint-3 { stop-color: #6675dd;        stop-opacity: 0.34; }

/* The main curve meets the section below, so it borrows that background. */
.wave-front { fill: var(--surface); }

/* A very slow drift keeps it alive without drawing attention. The paths
   overhang the viewBox by 160 units, so the motion never exposes an edge. */
.wave-layer { will-change: transform; }
.wave-layer-accent { animation: wave-drift-accent 34s ease-in-out infinite alternate; }
.wave-layer-main   { animation: wave-drift-main   46s ease-in-out infinite alternate; }

@keyframes wave-drift-accent {
    from { transform: translate(-34px, 0); }
    to   { transform: translate(34px, 0); }
}
@keyframes wave-drift-main {
    from { transform: translate(22px, 0); }
    to   { transform: translate(-22px, 0); }
}

/* -------------------------------------------------------------------------
   11. Marquee / trust strip
   ---------------------------------------------------------------------- */
.marquee-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--border);   /* the wave handles the top edge */
    padding: 22px 0;
    overflow: hidden;
    position: relative;
}
.marquee-strip::before, .marquee-strip::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}
.marquee-strip::before { left: 0;  background: linear-gradient(90deg, var(--surface), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 52px; padding-right: 52px; }
.marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
}
.marquee-item svg { color: var(--primary); }

/* -------------------------------------------------------------------------
   12. About & feature cards
   ---------------------------------------------------------------------- */
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.feature-card {
    background: var(--surface);
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-soft); }
.feature-card.translate-y { transform: translateY(28px); }
.feature-card.translate-y:hover { transform: translateY(22px); }

.feature-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: transform var(--transition-normal);
}
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }
.feature-icon.bg-primary-light { color: var(--primary); }
.feature-icon.bg-secondary-light { color: var(--secondary); }
body.dark-theme .feature-icon.bg-secondary-light { color: #8b98ee; }

.feature-card h3 { font-size: 1.125rem; margin-bottom: 6px; }
.feature-card p { color: var(--text-muted); font-size: 0.9375rem; margin: 0; }

.license-box {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    margin-top: 8px;
    background: linear-gradient(135deg, var(--secondary), var(--bg-dark));
    border-radius: var(--radius-lg);
    color: #fff;
    box-shadow: var(--shadow-md);
}
.license-icon {
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.license-info .label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }
.license-info .value { font-size: 1.1875rem; font-weight: 700; font-family: var(--font-heading); }

.check-list { margin-top: 26px; display: grid; gap: 13px; }
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-main);
    font-weight: 500;
}
.check-list li .tick {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}

/* -------------------------------------------------------------------------
   13. Products
   ---------------------------------------------------------------------- */
.products-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
}
.products-toolbar .search-bar-container { flex: 1 1 260px; max-width: none; }
.toolbar-group { display: flex; align-items: center; gap: 8px; }

.select-sm {
    padding: 10px 34px 10px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    background-color: var(--surface);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
}

.view-toggle { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: var(--radius-full); }
.view-toggle button {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.view-toggle button:hover { color: var(--text-main); }
.view-toggle button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

.products-filter { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.filter-btn .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 5px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}
.filter-btn.active .count { background: rgba(255, 255, 255, 0.25); color: #fff; }

.results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.results-bar strong { color: var(--text-main); }

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 26px;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-soft);
}

.product-img-area {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-2);
}
.product-img-area img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.product-card:hover .product-img-area img { transform: scale(1.06); }

.product-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    z-index: 2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.product-cat-pill {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(6px);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.quick-view-btn {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 14px);
    opacity: 0;
    z-index: 2;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    color: var(--text-main);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.product-card:hover .quick-view-btn,
.product-card:focus-within .quick-view-btn { opacity: 1; transform: translate(-50%, 0); }
.quick-view-btn:hover { background: var(--primary); color: #fff; }

.product-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.product-title { font-size: 1.1875rem; margin-bottom: 6px; }
.product-title a:hover { color: var(--primary); }

.rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 0.8125rem; color: var(--text-muted); }
.rating .stars { display: flex; color: #f59e0b; }
.rating .stars svg { width: 14px; height: 14px; }

.product-desc {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 0.9375rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.species-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.species-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    color: var(--text-muted);
}

.product-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9375rem;
}
.product-link svg { transition: transform var(--transition-fast); }
.product-link:hover svg { transform: translateX(4px); }

.add-quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: auto;
    padding: 9px 14px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary-dark);
    border: 1px solid var(--primary-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}
.add-quote-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.add-quote-btn.added { background: var(--primary); color: #fff; border-color: var(--primary); }
body.dark-theme .add-quote-btn { color: var(--accent); }
body.dark-theme .add-quote-btn:hover, body.dark-theme .add-quote-btn.added { color: #fff; }

/* List view */
.products-grid.list-view { grid-template-columns: 1fr; gap: 16px; }
.products-grid.list-view .product-card { flex-direction: row; align-items: stretch; }
.products-grid.list-view .product-img-area { width: 220px; flex-shrink: 0; aspect-ratio: auto; }
.products-grid.list-view .quick-view-btn { display: none; }
.products-grid.list-view .product-desc { -webkit-line-clamp: 2; line-clamp: 2; }
@media (max-width: 640px) {
    .products-grid.list-view .product-card { flex-direction: column; }
    .products-grid.list-view .product-img-area { width: 100%; aspect-ratio: 16 / 9; }
}

/* Skeleton placeholders while the catalogue loads */
.skeleton-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}
.skeleton {
    background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-img { aspect-ratio: 4 / 3; width: 100%; }
.skeleton-line { height: 12px; border-radius: 6px; margin: 12px 22px; }
.skeleton-line.short { width: 45%; }

.empty-block {
    grid-column: 1 / -1;
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.empty-block .empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-subtle);
}
.empty-block h3 { margin-bottom: 8px; font-size: 1.25rem; }

/* -------------------------------------------------------------------------
   14. Why us & stats
   ---------------------------------------------------------------------- */
.abstract-shape { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.55; pointer-events: none; }
.shape-1 { top: -120px; right: -120px; width: 420px; height: 420px; background: var(--primary-light); }
.shape-2 { bottom: -120px; left: -120px; width: 320px; height: 320px; background: var(--secondary-light); }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.stat-card {
    background: var(--surface);
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon-wrap {
    width: 42px; height: 42px;
    margin: 0 auto 14px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.stat-number { font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: 4px; }
/* A worded value needs a smaller size than a short figure like "100+"
   so it still fits the tile on one line. */
.stat-number-text { font-size: clamp(1.4rem, 1.05rem + 1vw, 1.85rem); text-wrap: balance; }
.stat-text { color: var(--text-muted); font-weight: 500; font-size: 0.9375rem; }

.stat-card.bg-primary {
    background: linear-gradient(145deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}
.stat-card.bg-primary .stat-number,
.stat-card.bg-primary .stat-text { color: #fff; }
.stat-card.bg-primary .stat-icon-wrap { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* -------------------------------------------------------------------------
   15. Testimonials
   ---------------------------------------------------------------------- */
.testimonial-viewport { overflow: hidden; margin: 0 -8px; }
.testimonial-track {
    display: flex;
    transition: transform var(--transition-slow);
    will-change: transform;
}
.testimonial-slide { flex: 0 0 100%; padding: 8px; }

.testimonial-card {
    height: 100%;
    background: var(--surface);
    padding: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(var(--primary), var(--accent));
}
.testimonial-card .quote-mark { color: var(--primary-soft); margin-bottom: 12px; }
.stars { display: flex; gap: 3px; color: #f59e0b; margin-bottom: 14px; }
.review-text { color: var(--text-main); line-height: 1.75; margin-bottom: 22px; flex: 1; }

.client-info { display: flex; align-items: center; gap: 14px; }
.client-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--secondary), var(--primary));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-heading);
    flex-shrink: 0;
}
.client-details h4 { font-size: 0.9375rem; margin-bottom: 2px; }
.client-details p { font-size: 0.8125rem; color: var(--text-muted); margin: 0; }

.slider-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; }
.slider-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-main);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.slider-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    transition: all var(--transition-fast);
}
.slider-dots button.active { width: 26px; background: var(--primary); }

/* -------------------------------------------------------------------------
   16. FAQ accordion
   ---------------------------------------------------------------------- */
.accordion { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.accordion-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.accordion-item.open { border-color: var(--primary-soft); box-shadow: var(--shadow-sm); }
.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.03rem;
    color: var(--secondary);
    transition: color var(--transition-fast);
}
.accordion-trigger:hover { color: var(--primary); }
.accordion-trigger .chevron { transition: transform var(--transition-normal); color: var(--text-muted); flex-shrink: 0; }
.accordion-item.open .accordion-trigger .chevron { transform: rotate(180deg); color: var(--primary); }
.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-normal);
}
.accordion-item.open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p { padding: 0 22px 20px; color: var(--text-muted); margin: 0; }

/* -------------------------------------------------------------------------
   17. Contact
   ---------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }

.contact-panel {
    background: linear-gradient(160deg, var(--secondary), var(--bg-dark));
    color: #fff;
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.contact-panel::after {
    content: '';
    position: absolute;
    right: -60px; bottom: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(59, 172, 72, 0.25);
    filter: blur(50px);
}
.contact-panel h3 { color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
.contact-panel > p { color: rgba(255, 255, 255, 0.72); margin-bottom: 28px; font-size: 0.9375rem; }

.contact-lines { display: grid; gap: 18px; position: relative; z-index: 1; }
.contact-line { display: flex; align-items: flex-start; gap: 14px; }
.contact-line .ic {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}
.contact-line .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); }
/* `block` so a contact line carrying two phone numbers stacks them
   instead of running them together on one line. */
.contact-line .value { display: block; font-weight: 600; color: #fff; word-break: break-word; }
.contact-line .value + .value { margin-top: 2px; }
/* Marks which of the listed numbers also accepts WhatsApp. */
.contact-line .value-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: rgba(37, 211, 102, 0.18);
    color: #6ee7a0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}
.contact-line .value:hover { color: var(--accent); }

.contact-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.form-success {
    display: none;
    text-align: center;
    padding: 32px 12px;
}
.form-success.visible { display: block; }
.form-success .ok-icon {
    width: 62px; height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    animation: pop-in 0.4s var(--ease-out-back);
}

/* -------------------------------------------------------------------------
   18. Footer
   ---------------------------------------------------------------------- */
.footer {
    background-color: var(--bg-dark);
    color: rgba(255, 255, 255, 0.72);
    padding: 56px 0 20px;
    position: relative;
}
body.dark-theme .footer { border-top: 1px solid var(--border); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand .logo img { filter: brightness(0) invert(1); }
.footer-desc { color: rgba(255, 255, 255, 0.62); max-width: 320px; font-size: 0.9375rem; margin-bottom: 20px; }

.footer-title { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: 0; }
.footer-links ul { display: grid; gap: 10px; }
.footer-links a { color: rgba(255, 255, 255, 0.62); font-size: 0.9375rem; }
.footer-links a:hover { color: var(--accent); padding-left: 4px; }

.contact-list { display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: flex-start; gap: 11px; color: rgba(255, 255, 255, 0.62); font-size: 0.9375rem; }
.contact-list svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-list a:hover { color: var(--accent); }

.newsletter-form { display: flex; gap: 8px; margin-top: 6px; }
.newsletter-form input {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 0.875rem;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.newsletter-form input:focus { outline: none; border-color: var(--primary); background: rgba(255, 255, 255, 0.11); }
.newsletter-form button {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.newsletter-form button:hover { background: var(--primary-dark); transform: scale(1.05); }
.newsletter-note { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-top: 10px; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.8125rem;
}
.footer-bottom a:hover { color: var(--accent); }
.footer-legal { display: flex; gap: 18px; }

.social-links { display: flex; gap: 10px; }
.social-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.social-icon:hover { background: var(--primary); transform: translateY(-3px); }

/* -------------------------------------------------------------------------
   19. Floating widgets
   ---------------------------------------------------------------------- */
.float-stack {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    z-index: var(--z-float);
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.float-btn {
    position: relative;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-normal), visibility var(--transition-normal);
}
.float-btn:hover { transform: scale(1.08); }

.whatsapp-widget { background: #25d366; color: #fff; animation: pulse-whatsapp 2.6s infinite; }
.whatsapp-widget:hover { animation: none; color: #fff; }

.quote-widget { background: var(--secondary); color: #fff; }
.quote-widget:hover { background: var(--secondary-dark); }
.quote-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg);
    animation: pop-in 0.3s var(--ease-out-back);
}
.quote-widget[data-count="0"] { display: none; }

.back-to-top {
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--border-strong);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.float-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: var(--text);
    color: var(--bg);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: var(--radius-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.float-btn:hover .float-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 768px) { .float-tip { display: none; } }

/* -------------------------------------------------------------------------
   20. Drawer, modal, toast
   ---------------------------------------------------------------------- */
.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 26, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    z-index: var(--z-drawer);
}
.overlay-backdrop.active { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: min(420px, 100%);
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    z-index: calc(var(--z-drawer) + 1);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    display: flex;
    flex-direction: column;
}
.drawer.active { transform: translateX(0); }

/* While closed the panel is taken out of layout entirely. Parked off the right
   edge it would still widen the document and create horizontal scrolling, and
   clipping that at the root breaks the sticky navbar — so JS mounts the panel
   one frame before it slides in and unmounts it after it slides out. */
.drawer:not(.is-mounted) { display: none; }

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}
.drawer-header h3 { font-size: 1.125rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.drawer-footer { padding: 18px 22px; border-top: 1px solid var(--border); background: var(--surface-2); }

.icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text-main); }

.quote-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.quote-item:last-child { border-bottom: none; }
.quote-item .thumb {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-3);
    flex-shrink: 0;
}
.quote-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.quote-item .meta { flex: 1; min-width: 0; }
.quote-item .meta h4 { font-size: 0.9375rem; margin-bottom: 2px; }
.quote-item .meta span { font-size: 0.75rem; color: var(--text-muted); text-transform: capitalize; }

.qty-control { display: flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: var(--radius-full); padding: 3px; }
.qty-control button {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
}
.qty-control button:hover { background: var(--surface); color: var(--primary); }
.qty-control input {
    width: 34px;
    text-align: center;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    -moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 26, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-content {
    background: var(--surface);
    width: 100%;
    max-width: 540px;
    max-height: min(88vh, 760px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transform: translateY(16px) scale(0.98);
    transition: transform var(--transition-normal);
    overflow: hidden;
}
.modal-overlay.active .modal-content { transform: translateY(0) scale(1); }
.modal-content.modal-lg { max-width: 760px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-title { font-size: 1.1875rem; margin: 0; }
.modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--text-muted);
}
.modal-close:hover { background: var(--danger-light); color: var(--danger); }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); }

body.overlay-open { overflow: hidden; }

/* Toasts */
.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: var(--z-toast);
    pointer-events: none;
    max-width: min(380px, calc(100vw - 40px));
}
/* A drawer or modal owns the right-hand side, so slide the stack across
   rather than letting a toast cover the panel's header and close button. */
body.overlay-open .toast-stack { right: auto; left: 20px; }

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-lg);
    color: var(--text-main);
    font-size: 0.9rem;
    pointer-events: auto;
    animation: toast-in 0.32s var(--ease-out-back);
}
.toast.leaving { animation: toast-out 0.24s ease forwards; }
.toast .toast-icon { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.toast .toast-body { flex: 1; }
.toast .toast-body strong { display: block; font-family: var(--font-heading); margin-bottom: 1px; color: var(--text); }
.toast.error { border-left-color: var(--danger); }
.toast.error .toast-icon { color: var(--danger); }
.toast.warn { border-left-color: var(--warning); }
.toast.warn .toast-icon { color: var(--warning); }
.toast.info { border-left-color: var(--info); }
.toast.info .toast-icon { color: var(--info); }
.toast .toast-close { color: var(--text-subtle); display: flex; }
.toast .toast-close:hover { color: var(--text-main); }

/* -------------------------------------------------------------------------
   21. Product detail page
   ---------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
    margin-bottom: 28px;
    color: var(--text-muted);
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--text-subtle); }
.breadcrumb .current { color: var(--text-main); font-weight: 600; }

.product-detail {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.product-image-col {
    position: relative;
    background: var(--surface-2);
    padding: clamp(28px, 5vw, 56px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-right: 1px solid var(--border);
}
/* The info column is far taller than the artwork — keep the image in view
   while the specification list is read. */
.product-img-wrapper {
    position: sticky;
    top: calc(var(--nav-h) + 28px);
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
}
@media (max-width: 992px) {
    .product-image-col { align-items: center; }
    .product-img-wrapper { position: relative; top: auto; }
}
.product-img-bg {
    position: absolute; inset: 8%;
    background: var(--primary-light);
    border-radius: 50%;
    filter: blur(36px);
}
.product-image-col img {
    position: relative;
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.14));
}
.product-image-col:hover img { transform: scale(1.04); }

.category-badge {
    position: absolute;
    top: 22px; left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
}

.product-info-col { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }
.manufacturer { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 14px; }
.product-name { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem); margin-bottom: 10px; }
.product-tagline { font-size: 1.05rem; color: var(--primary); font-weight: 500; margin-bottom: 18px; }
.product-full-desc { color: var(--text-muted); line-height: 1.8; margin-bottom: 26px; }

.info-section-title {
    font-size: 1.15rem;
    margin: 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.info-section-title svg { color: var(--primary); flex-shrink: 0; }

.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.benefit-item {
    background: var(--surface-2);
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-main);
}
.benefit-item svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

.usage-box {
    background: var(--surface-2);
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: 26px;
}
.usage-box p { font-size: 0.9375rem; color: var(--text-main); margin-bottom: 8px; }
.usage-box p:last-child { margin-bottom: 0; }
.usage-box strong { color: var(--secondary); }
body.dark-theme .usage-box strong { color: #8b98ee; }
.usage-note { margin-top: 12px; font-size: 0.8125rem; font-style: italic; color: var(--text-muted); }

.spec-list { display: grid; gap: 0; margin-bottom: 26px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.spec-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 11px 16px; font-size: 0.875rem; }
.spec-row:nth-child(odd) { background: var(--surface-2); }
.spec-row dt { color: var(--text-muted); font-weight: 500; }
.spec-row dd { color: var(--text-main); font-weight: 600; }

/* Two equal-width actions sharing one row, as on the printed pack page. */
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.product-actions .btn { flex: 1 1 190px; padding-block: 15px; }
.product-actions .btn-icon { flex: 0 0 auto; width: 44px; height: 44px; }

@media (max-width: 560px) {
    .product-actions .btn { flex: 1 1 100%; }
    .product-actions .btn-icon { flex: 0 0 auto; }
}

/* Quick facts strip in the summary card */
.quick-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 26px;
}
.quick-fact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'icon label' 'icon value';
    gap: 0 10px;
    align-items: center;
    padding: 12px 14px;
    background: var(--surface);
}
.quick-fact .qf-icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    color: var(--primary);
}
.quick-fact .qf-label {
    grid-area: label;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-subtle);
}
.quick-fact .qf-value { grid-area: value; font-size: 0.875rem; font-weight: 600; color: var(--text-main); }

/* Prescription-only notice */
.rx-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    margin-bottom: 20px;
    border-radius: var(--radius-md);
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.3);
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.55;
}
.rx-banner svg { color: var(--warning); flex-shrink: 0; margin-top: 1px; }
body.dark-theme .rx-banner { color: #fcd34d; }

/* ---- Technical datasheet ---------------------------------------------- */
.ds-tabs {
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px;
    margin-bottom: 28px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    scrollbar-width: none;
    /* The strip scrolls internally on narrow screens; containment stops its
       overflowing tabs from being counted in the document width. */
    contain: paint;
}
.ds-tabs::-webkit-scrollbar { display: none; }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .ds-tabs { background: var(--surface); }
}

.ds-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ds-tab:hover { background: var(--surface-3); color: var(--text-main); }
.ds-tab.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-brand); }

/* minmax(0, 1fr) rather than the default `auto`: a grid item's automatic
   minimum size would otherwise grow the track to the widest table's
   `min-width`, pushing the whole section past the viewport. */
.ds-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.ds-section {
    min-width: 0;
    /* html's scroll-padding-top already reserves the navbar, so this only
       needs to add the sticky tab strip for direct #hash landings. */
    scroll-margin-top: 60px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(22px, 3vw, 34px);
    box-shadow: var(--shadow-xs);
}

.ds-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.ds-title svg { color: var(--primary); flex-shrink: 0; }

.ds-sub {
    font-size: 1rem;
    margin: 26px 0 12px;
    color: var(--text);
}
.ds-sub:first-child { margin-top: 0; }

.ds-lead { color: var(--text-muted); line-height: 1.8; margin: 0; }
.ds-note { font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 12px; }

.ds-list { display: grid; gap: 9px; }
.ds-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-main);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ds-list li svg { color: var(--primary); flex-shrink: 0; margin-top: 4px; }
.ds-list.warn li svg { color: var(--warning); }

.ds-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 420px; }
.ds-table thead th {
    background: var(--surface-2);
    text-align: left;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-muted);
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}
.ds-table td, .ds-table tbody th {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-weight: 400;
    color: var(--text-main);
    vertical-align: top;
}
.ds-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.ds-table tbody tr:last-child td, .ds-table tbody tr:last-child th { border-bottom: none; }
.ds-table tbody tr:nth-child(even) { background: var(--surface-2); }
.ds-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ds-callout {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--secondary-light);
    border: 1px solid var(--border);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-main);
}
.ds-callout svg { color: var(--secondary); flex-shrink: 0; margin-top: 2px; }
body.dark-theme .ds-callout svg { color: #8b98ee; }

.ds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ds-panel {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.ds-panel h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.ds-panel h3 svg { color: var(--text-subtle); }
.ds-panel p { font-size: 0.9rem; line-height: 1.6; color: var(--text-main); margin: 0; }
.ds-panel.alert { background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.28); }
.ds-panel.alert h3, .ds-panel.alert h3 svg { color: var(--warning); }

.ds-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-subtle);
}
.ds-disclaimer svg { flex-shrink: 0; margin-top: 3px; }

@media (max-width: 768px) {
    .ds-tabs { border-radius: var(--radius-md); }
    .ds-tab { padding: 8px 14px; }
}
@media (max-width: 420px) {
    .quick-facts { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   22. Animations
   ---------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes blob-pulse { 0% { transform: scale(1); opacity: 0.32; } 100% { transform: scale(1.14); opacity: 0.58; } }
@keyframes float-symbol {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-16px) rotate(calc(var(--rot, 0deg) + 5deg)); }
}
@keyframes soft-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--primary-light); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes pulse-whatsapp {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateX(120%); opacity: 0; } }
@keyframes shake-x {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(9px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* Scroll reveal.
   `.no-js` is set on <html> by default and removed by the first inline script,
   so content stays visible when JavaScript never runs. */
.no-js .fade-up, .no-js .fade-left, .no-js .fade-right, .no-js .fade-in {
    opacity: 1 !important;
    transform: none !important;
}

.fade-up, .fade-left, .fade-right, .fade-in {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.fade-up { transform: translateY(26px); }
.fade-left { transform: translateX(26px); }
.fade-right { transform: translateX(-26px); }

.fade-up.visible, .fade-left.visible, .fade-right.visible, .fade-in.visible {
    opacity: 1;
    transform: none;
}

/* Columns stack on narrow screens, so reveal them vertically. A sideways
   offset there would push the un-revealed element past the viewport edge. */
@media (max-width: 768px) {
    .fade-left, .fade-right { transform: translateY(26px); }
}

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }

/* -------------------------------------------------------------------------
   23. Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
    .hero-container, .about-container, .grid-layout { grid-template-columns: 1fr; }
    .hero { text-align: left; min-height: auto; }
    .hero-visual { min-height: 280px; }
    .orbiting-system { width: min(320px, 78vw); }
    .feature-card.translate-y { transform: none; }
    .feature-card.translate-y:hover { transform: translateY(-6px); }
    .product-detail { grid-template-columns: 1fr; }
    .product-image-col { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 768px) {
    .nav-list { display: none; }
    .nav-actions .btn { display: none; }
    .mobile-toggle { display: flex; }

    /* Slide-in mobile menu. It sits inside the navbar, so it must stay under
       the bar's own logo and close button — hence z-index 1 here and 2 there. */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(320px, 86vw);
        background: var(--surface);
        box-shadow: var(--shadow-xl);
        padding: 24px 24px 32px;
        transform: translateX(105%);
        transition: transform var(--transition-normal);
        z-index: 1;
        overflow-y: auto;
    }
    /* Same reasoning as the drawer: parked off-screen it would widen the
       document, so it is only in the layout while it is on screen. */
    .nav-menu:not(.is-mounted) { display: none; }
    .nav-container > .logo,
    .nav-actions { position: relative; z-index: 2; }

    /* While the menu is open the navbar has to win against the announcement
       bar, and the floating buttons must not sit on top of the panel. */
    body.nav-open .announce-bar { z-index: 0; }
    body.nav-open .float-stack { opacity: 0; visibility: hidden; }
    .nav-menu.active { transform: translateX(0); }
    .nav-menu.active .nav-list { display: flex; flex-direction: column; gap: 4px; }
    .nav-menu .nav-link {
        color: var(--text-main);
        font-size: 1.0625rem;
        padding: 13px 14px;
        border-radius: var(--radius-sm);
    }
    .nav-menu .nav-link::after { display: none; }
    .nav-menu .nav-link:hover, .nav-menu .nav-link.active { background: var(--primary-light); color: var(--primary); }
    .nav-menu .mobile-cta { display: flex; margin-top: 20px; }
    .nav-menu .mobile-meta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
    .nav-menu .mobile-meta a { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.9375rem; }
    .nav-menu .mobile-meta a:hover { color: var(--primary); }

    /* The bar itself must stay readable while the menu is open. The
       backdrop-filter has to go: it would make the navbar the containing
       block for the position:fixed menu panel inside it. */
    body.nav-open .navbar {
        background-color: var(--surface);
        box-shadow: var(--shadow-sm);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    body.nav-open .navbar .nav-link,
    body.nav-open .navbar .theme-toggle,
    body.nav-open .navbar .mobile-toggle { color: var(--text-main); }

    .hero { padding-top: calc(var(--nav-h) + 44px); }
    .hero-visual { min-height: 240px; margin-top: 16px; }
    .orbiting-system { width: min(240px, 68vw); }
    .about-features, .stats-grid, .form-row, .benefits-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .trust-indicators { gap: 16px 24px; }
    .products-toolbar { padding: 12px; }
    .spec-row { grid-template-columns: 1fr; gap: 2px; }
    .quickview-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .hero-btns .btn { width: 100%; }
    .float-btn { width: 48px; height: 48px; }
    .toast-stack { top: auto; bottom: 92px; left: 16px; right: 16px; max-width: none; }
}

.mobile-cta, .mobile-meta { display: none; }

/* -------------------------------------------------------------------------
   24. Reduced motion & print
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-up, .fade-left, .fade-right, .fade-in { opacity: 1; transform: none; }
    .satellite, .marquee-track, .wave-layer, .blob, .bg-symbol, .center-logo { animation: none !important; }
}

/* The "Download brochure" button prints this view, so it has to read as a
   clean one-piece datasheet rather than a web page. */
@media print {
    .navbar, .float-stack, .hero-wave, .announce-bar, .scroll-progress,
    .drawer, .overlay-backdrop, .toast-stack, .products-toolbar, .products-filter,
    .ds-tabs, .product-actions, .qty-control, .breadcrumb, .footer,
    #related-section, .nav-backdrop, .skip-link { display: none !important; }

    body { background: #fff; color: #000; }
    .section, .section-sm { padding: 0 0 12px; }
    .container { max-width: none; padding: 0; }

    .product-detail, .ds-section, .quick-facts, .usage-box, .benefit-item, .ds-table-wrap {
        border-color: #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    .product-detail { grid-template-columns: 200px 1fr; }
    .product-image-col { background: none; padding: 0 20px 0 0; }
    .ds-section { padding: 0 0 14px; border: none; border-bottom: 1px solid #ddd; border-radius: 0; }
    .ds-body { gap: 14px; }
    .ds-title { font-size: 1.05rem; }
    .ds-table thead th { background: #f2f2f2; }

    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}