/* ==========================================================================
   Arizone International LLP — Core Stylesheet
   Modern herbal / nutraceutical export company theme
   ========================================================================== */

:root {
    /* Clinical medical blue-teal — the universal "pharma" signal; everyday brand color */
    --color-primary: #0891b2;
    --color-primary-dark: #0a6478;
    --color-primary-light: #e3f7fa;
    /* Herbal green — secondary/natural CTA */
    --color-accent: #4c9a4f;
    --color-accent-dark: #3d7d40;
    /* Warm amber — the single highest-value CTA + attention accents */
    --color-highlight: #ef8a1f;
    --color-highlight-dark: #c96f13;
    --color-highlight-light: #fdecdb;
    /* Magenta — used only inside the brand gradient, never solid */
    --color-magenta: #d6336c;
    /* Signature brand ribbon gradient: pink -> orange -> blue -> green */
    --gradient-brand: linear-gradient(100deg, #d6336c 0%, #ef8a1f 35%, #0891b2 68%, #4c9a4f 100%);
    /* Charcoal-neutral ink; the site is built mostly from this + white */
    --color-ink: #14181f;
    --color-body: #4b5563;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-surface: #ffffff;
    --color-surface-alt: #f4f9fa;

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;

    --shadow-sm: 0 2px 8px rgba(15, 18, 24, 0.06);
    --shadow-md: 0 12px 32px rgba(15, 18, 24, 0.10);
    --shadow-lg: 0 24px 60px rgba(15, 18, 24, 0.14);

    --container-width: 1200px;
    --header-height: 78px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-body);
    background: var(--color-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--color-ink);
    margin: 0 0 .5em;
    line-height: 1.25;
}
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 88px 0; }
.section--alt { background: var(--color-surface-alt); }
.section--dark {
    background-image: linear-gradient(135deg, rgba(27,33,44,.92), rgba(10,13,19,.96));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #eef0f3;
}
.section--dark h2, .section--dark h3 { color: #ffffff; }

.section-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section-head h2::after {
    content: ""; display: block; width: 56px; height: 4px; border-radius: 2px;
    background: var(--gradient-brand); margin: 16px auto 0;
}
.section-head p { color: var(--color-muted); font-size: 17px; }
.section--dark .eyebrow { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); color: var(--color-highlight); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.section--dark .section-head p { color: #c3c7cd; }

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    border: 2px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,145,178,.3); }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22,101,52,.3); }
.btn--outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- Topbar ---------- */
.topbar { background: #12161f; color: #b3b8c0; font-size: 13.5px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 9px 24px; gap: 16px; }
.topbar__contact { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar__contact a, .topbar__address { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.topbar__contact a:hover { color: #fff; }
.topbar__social { display: flex; gap: 12px; }
.topbar__social a {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); border-radius: 50%; font-size: 12px; transition: background .2s;
}
.topbar__social a:hover { background: var(--color-accent); }

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 500;
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow .25s ease;
}
/* The translucent blur background lives on a pseudo-element rather than
   directly on .site-header: backdrop-filter (like transform/filter) makes
   its element a new containing block for any position:fixed descendant.
   .main-nav (the mobile off-canvas menu) is fixed and nested inside this
   header, so with the filter here its top/bottom offsets were resolving
   against the ~72px-tall header box instead of the real viewport, collapsing
   the menu panel to a sliver instead of covering the screen. Moving the
   blur to ::before keeps the same glass look without .site-header itself
   becoming that containing block. */
.site-header::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
}
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--gradient-brand);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header.is-scrolled .site-header__inner { height: 64px; }
.site-header.is-scrolled .brand__mark { width: 38px; height: 38px; font-size: 17px; }
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 24px;
    transition: height .25s ease;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--gradient-brand);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(8,145,178,.3);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px;
    flex-shrink: 0; transition: transform .3s ease, width .25s ease, height .25s ease, font-size .25s ease;
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-heading); font-weight: 800; font-size: 21px; color: var(--color-ink); }
.brand__sub { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }

.main-nav__list { display: flex; align-items: center; gap: 6px; }
.main-nav__list > li > a {
    display: flex; align-items: center; gap: 6px;
    padding: 14px 16px; font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; letter-spacing: .01em; color: var(--color-ink);
    border-radius: var(--radius-sm); transition: color .2s, background .2s;
}
.main-nav__list > li > a i { font-size: 11px; color: var(--color-muted); transition: transform .3s ease; }
.main-nav__list > li > a:hover,
.main-nav__list > li > a.is-active { color: var(--color-primary); background: var(--color-primary-light); }
.has-mega:hover > a i, .has-mega.is-open > a i { transform: rotate(180deg); }

.has-mega { position: relative; }
.mega-menu {
    position: absolute; left: 0; right: auto; top: 100%; width: 270px;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 10px; margin: 10px 0 0; max-width: none;
    opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
    transition: opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), visibility .25s;
    z-index: 400;
}
.has-mega:hover .mega-menu,
.has-mega.is-open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.mega-menu__grid { display: flex; flex-direction: column; gap: 2px; }

/* Shared row styling for both a plain category link (.mega-menu__item as an
   <a>) and the clickable head of a category that has a flyout submenu
   (.mega-menu__link, nested inside a .mega-menu__item--parent wrapper div —
   the wrapper only supplies position:relative so the flyout has something to
   anchor to; it carries no visual styling of its own). */
.mega-menu__item, .mega-menu__link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-sm);
    font-weight: 600; color: var(--color-ink); font-size: 14.5px;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.mega-menu__item:hover, .mega-menu__link:hover { background: var(--color-primary-light); color: var(--color-primary); padding-left: 18px; }
.mega-menu__title { display: flex; align-items: center; gap: 10px; }
.mega-menu__title i { font-size: 12.5px; color: var(--color-primary); width: 16px; text-align: center; opacity: .8; }
.mega-menu__caret { font-size: 11px; color: var(--color-muted); transition: transform .2s ease, color .2s ease; }
.mega-menu__link:hover .mega-menu__caret { color: var(--color-primary); transform: translateX(2px); }

/* Flyout: opens to the right of the main list, same lift/fade language as
   the top-level mega-menu itself. */
.mega-menu__item--parent { position: relative; }
.mega-menu__submenu {
    position: absolute; left: 100%; top: 0; margin-left: 8px; min-width: 210px;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 8px;
    opacity: 0; visibility: hidden; transform: translateX(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 401;
}
.mega-menu__item--parent:hover .mega-menu__submenu,
.mega-menu__item--parent:focus-within .mega-menu__submenu { opacity: 1; visibility: visible; transform: translateX(0); }
.mega-menu__subitem {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 13.5px; color: var(--color-ink);
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.mega-menu__subitem i { font-size: 10px; color: var(--color-muted); transition: color .2s ease; }
.mega-menu__subitem:hover { background: var(--color-primary-light); color: var(--color-primary); padding-left: 15px; }
.mega-menu__subitem:hover i { color: var(--color-primary); }

.mega-menu__viewall {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 8px; padding: 13px 14px 4px; border-top: 1px solid var(--color-border);
    font-weight: 600; color: var(--color-primary); font-size: 14px;
}

.site-header__actions { display: flex; align-items: center; gap: 16px; }

/* Header search — icon-only at rest, sized to just the toggle button so it
   never contributes extra width to the flex header. Opening it expands the
   input sitting visible in the header at all times (no click-to-expand), fed
   live by includes/search-api.php as the visitor types. */
.nav-search { position: relative; flex: none; }
.nav-search__form {
    display: flex; align-items: center;
    background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav-search__form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); background: #fff; }
.nav-search__icon-btn {
    flex: none; width: 38px; height: 38px; border: none; background: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 14px;
    cursor: pointer; transition: color .2s ease;
}
.nav-search__form:focus-within .nav-search__icon-btn { color: var(--color-primary); }
.nav-search__input {
    width: 190px; min-width: 0; border: none; outline: none; background: transparent;
    padding: 9px 16px 9px 0; font-family: var(--font-body); font-size: 14px; color: var(--color-ink);
}
.nav-search__input::placeholder { color: var(--color-muted); }

.nav-search__results {
    position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 82vw;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 8px; max-height: 70vh; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 500;
}
.nav-search__results.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-search__result {
    display: flex; flex-direction: column; gap: 1px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    transition: background .2s ease;
}
.nav-search__result:hover, .nav-search__result:focus { background: var(--color-primary-light); }
.nav-search__result-title { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.nav-search__result-cat { font-size: 11.5px; color: var(--color-muted); }
.nav-search__empty, .nav-search__loading { display: block; padding: 14px 12px; font-size: 13.5px; color: var(--color-muted); text-align: center; }
.nav-search__viewall {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px; padding: 11px 12px; border-top: 1px solid var(--color-border);
    font-weight: 600; color: var(--color-primary); font-size: 13.5px;
}

/* position + z-index above 460 keep this clickable once the mobile menu is
   open: .main-nav is a sibling inside this same header and is itself
   position:fixed with z-index:450, which otherwise paints over a plain
   static-positioned button regardless of the header's own z-index. */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; position: relative; z-index: 460; }
.nav-toggle span { width: 24px; height: 2px; background: var(--color-ink); border-radius: 2px; transition: all .25s ease; }
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
    /* Real background video lives on .hero__bg-video, layered in behind this
       via z-index; custom.css sets background-image: none here so it shows
       through, but the fallback below still matters for the moment before
       the video loads and for any environment with JS/video disabled. */
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(95deg, #ffffff 0%, #ffffff 38%, rgba(255,255,255,.82) 52%, rgba(255,255,255,.4) 72%, rgba(255,255,255,.12) 100%),
        linear-gradient(180deg, #f4fafb, #eef6f4);
    background-size: cover, cover;
    background-position: center, center;
    color: var(--color-ink);
    padding: 90px 0 100px;
    border-bottom: 1px solid var(--color-border);
}
.hero::before {
    content: "";
    position: absolute; top: -20%; left: -20%; right: -20%; bottom: -20%;
    background-image: repeating-linear-gradient(115deg, rgba(8,145,178,.035) 0 2px, transparent 2px 90px);
    animation: heroPan 26s linear infinite;
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute; top: -10%; left: -6%; width: 45%; height: 70%;
    background: radial-gradient(circle, rgba(76,154,79,.12), transparent 70%);
    animation: heroGlow 6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes heroPan {
    0% { transform: translate(0, 0); }
    100% { transform: translate(90px, 90px); }
}
@keyframes heroGlow {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero__content > * { opacity: 0; transform: translateY(18px); animation: heroRise .7s cubic-bezier(.22,1,.36,1) forwards; }
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .15s; }
.hero__content > *:nth-child(3) { animation-delay: .25s; }
.hero__content > *:nth-child(4) { animation-delay: .35s; }
.hero__content > *:nth-child(5) { animation-delay: .45s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .hero__content > * { animation: none; opacity: 1; transform: none; }
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-dark); background: rgba(8,145,178,.08);
    border: 1px solid rgba(8,145,178,.18);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(32px, 4vw, 50px); color: var(--color-ink); margin-bottom: 20px; letter-spacing: -.01em; }
.hero h1 span {
    background: var(--gradient-brand);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.hero__lead { font-size: 18px; color: var(--color-ink); font-weight: 500; max-width: 520px; margin-bottom: 34px; }
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
.hero__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.hero__stat { display: flex; align-items: center; gap: 14px; padding-right: 28px; border-right: 1px solid var(--color-border); }
.hero__stat:last-child { border-right: none; padding-right: 0; }
.hero__stat > i { font-size: 20px; color: var(--color-highlight); opacity: .9; }
.hero__stat-num { font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: var(--color-ink); line-height: 1; }
.hero__stat-label { font-size: 12.5px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

.hero__visual { position: relative; }
.hero__card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    display: grid;
    gap: 18px;
    box-shadow: 0 24px 48px rgba(15,18,24,.1);
}
.hero__card-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    transition: transform .25s ease, background .25s ease;
}
.hero__card-row:hover { transform: translateX(4px); background: var(--color-primary-light); }
.hero__card-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(8,145,178,.25);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
}
.hero__card-row h4 { color: var(--color-ink); font-size: 15px; margin-bottom: 2px; }
.hero__card-row p { color: var(--color-muted); font-size: 13px; margin: 0; }

/* ---------- Inner page banner ---------- */
.page-banner {
    position: relative; overflow: hidden;
    background: url('../images/features/packaging-lab-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--color-ink); padding: 56px 0;
}
.page-banner__inner { position: relative; z-index: 2; }
.breadcrumb {
    display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-muted); margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-ink); font-weight: 600; transition: color .2s; }
.breadcrumb a:hover { color: var(--color-highlight); }
.breadcrumb i { font-size: 10px; opacity: .7; }
.breadcrumb span { color: var(--color-highlight); font-weight: 600; }
.page-banner h1 {
    font-size: clamp(28px, 3.6vw, 42px); color: var(--color-ink); margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: -.01em;
}
.page-banner p {
    font-size: 16px; color: var(--color-body); max-width: 640px; margin: 0;
}

/* ---------- Certifications ---------- */
.certifications { border-bottom: 1px solid var(--color-border); }
.cert-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.cert-card {
    text-align: center; padding: 28px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.cert-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(30,41,59,.1); border-color: transparent; }
.cert-card__icon {
    width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
    background: var(--gradient-brand); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(8,145,178,.25);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.cert-card:hover .cert-card__icon { transform: scale(1.1) rotate(-4deg); }
.cert-card h4 { font-size: 15px; margin-bottom: 4px; }
.cert-card p { font-size: 12.5px; color: var(--color-muted); margin: 0; line-height: 1.4; }

/* ---------- About snippet ---------- */
.about-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.about-visual {
    /* Every page using this class fills it with its own real <img> (see
       e.g. amazon-fba.php, manufacturing.php), which paints over this
       background — kept as a plain brand-toned gradient fallback rather
       than a placeholder photo for the rare case the image doesn't load. */
    position: relative; overflow: hidden; border-radius: var(--radius-lg);
    background-image: linear-gradient(165deg, rgba(8,145,178,.3), rgba(10,13,19,.55));
    background-size: cover; background-position: center;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
.about-visual__icon {
    position: absolute; bottom: 28px; left: 28px;
    width: 64px; height: 64px; border-radius: 18px;
    background: var(--color-primary);
    box-shadow: 0 12px 24px rgba(8,145,178,.35);
    color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.about-visual__tag {
    position: absolute; top: 24px; left: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    background: #ffffff;
    border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.18);
    padding: 10px 16px; font-size: 12.5px; font-weight: 700; color: var(--color-ink);
}
.about-visual__tag i { color: var(--color-highlight); }
.about-visual__badge {
    position: absolute; bottom: -22px; right: -22px;
    background: #ffffff;
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: 20px 24px; text-align: center; border: 1px solid var(--color-border);
}
.about-visual__badge strong { display: block; font-family: var(--font-heading); font-size: 26px; color: var(--color-primary); }
.about-visual__badge span { font-size: 12.5px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }

.about-list { display: grid; gap: 18px; margin: 28px 0 32px; }
.about-list__item { display: flex; gap: 14px; align-items: flex-start; }
.about-list__item i { color: var(--color-primary); background: var(--color-primary-light); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.about-list__item h4 { font-size: 16px; margin-bottom: 2px; }
.about-list__item p { font-size: 14.5px; color: var(--color-muted); margin: 0; }

/* ---------- Category grid ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.category-card {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 30px 26px; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.category-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(30,41,59,.12); border-color: transparent; }
.category-card__icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(145deg, #e5f7fa, var(--color-primary-light)); color: var(--color-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(8,145,178,.18);
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.category-card:hover .category-card__icon { transform: scale(1.12) rotate(-3deg); }
.category-card h3 { font-size: 18px; margin-bottom: 8px; }
.category-card p { font-size: 14px; color: var(--color-muted); margin-bottom: 18px; min-height: 42px; }
.category-card__link { font-weight: 600; font-size: 14px; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px; }
.category-card__link i { font-size: 12px; transition: transform .2s; }
.category-card:hover .category-card__link i { transform: translateX(4px); }

/* ---------- Feature grid (why choose us) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.feature-card {
    text-align: left; padding: 26px 24px; border-radius: var(--radius-md);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    transition: transform .3s cubic-bezier(.22,1,.36,1), background .3s ease;
}
.feature-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.feature-card__icon {
    width: 54px; height: 54px; border-radius: 14px;
    background: linear-gradient(145deg, rgba(34,184,214,.28), rgba(34,184,214,.08));
    border: 1px solid rgba(34,184,214,.35); color: #22b8d6;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.feature-card:hover .feature-card__icon { transform: scale(1.12) rotate(-3deg); }
.feature-card h3 { font-size: 17px; }
.feature-card p { font-size: 14.5px; color: #c3c7cd; margin: 0; }

/* ---------- Process steps ---------- */
.process-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.process-step { position: relative; text-align: center; padding: 30px 18px; transition: transform .3s ease; }
.process-step:hover { transform: translateY(-4px); }
.process-step::before {
    counter-increment: step; content: counter(step);
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark)); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px rgba(8,145,178,.35);
    font-family: var(--font-heading); font-weight: 700; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.process-step:hover::before { transform: scale(1.12); }
.process-step h4 { font-size: 15.5px; margin-bottom: 6px; }
.process-step p { font-size: 13.5px; color: var(--color-muted); margin: 0; }
.process-steps .process-step:not(:last-child)::after {
    content: ""; position: absolute; top: 22px; left: calc(50% + 40px); width: calc(100% - 60px);
    height: 2px; background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
}

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.testimonial-card {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px;
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(30,41,59,.12); }
.testimonial-card__stars { color: var(--color-highlight); font-size: 13px; margin-bottom: 14px; }
.testimonial-card p.quote { font-size: 15px; color: var(--color-body); font-style: italic; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-card__avatar {
    width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-heading);
}
.testimonial-card__author strong { display: block; font-size: 14.5px; color: var(--color-ink); }
.testimonial-card__author span { font-size: 12.5px; color: var(--color-muted); }

/* ---------- Blog preview ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-card { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.blog-card:hover { box-shadow: 0 22px 44px rgba(30,41,59,.14); transform: translateY(-8px); }
.blog-card__thumb {
    position: relative; overflow: hidden;
    height: 170px; background: var(--color-surface-alt);
}
.blog-card__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.blog-card:hover .blog-card__thumb img { transform: scale(1.08); }
.blog-card__thumb::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10,13,19,.35));
    pointer-events: none;
}
.blog-card__body { padding: 22px; }
.blog-card__date { font-size: 12.5px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.blog-card h3 { font-size: 16.5px; margin: 8px 0 12px; }
.blog-card__link { font-size: 13.5px; font-weight: 600; color: var(--color-primary); }

/* ---------- Product tile grid (category listing pages) ---------- */
.product-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.product-toolbar__count { font-size: 14px; color: var(--color-muted); }
.product-toolbar__count strong { color: var(--color-ink); }
.product-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-tile {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: 14px 16px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(30,41,59,.1); border-color: transparent; }
.product-tile__icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.product-tile span { font-size: 14px; font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.group-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.group-nav a {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
    color: var(--color-ink); background: var(--color-surface-alt); border: 1px solid var(--color-border);
    padding: 8px 16px; border-radius: 999px; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.group-nav a:hover { background: var(--color-primary-light); border-color: transparent; color: var(--color-primary); }
.group-nav a span { color: var(--color-muted); font-weight: 500; }
.product-group { margin-bottom: 48px; scroll-margin-top: 100px; }
.product-group:last-child { margin-bottom: 0; }
.product-group__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.product-group__head h3 { font-size: 20px; margin: 0; }
.product-group__head span { font-size: 13.5px; color: var(--color-muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.contact-info { display: grid; gap: 16px; margin-bottom: 32px; }
.contact-info__item {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 20px;
}
.contact-info__icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.contact-info__item h4 { font-size: 15px; margin-bottom: 4px; }
.contact-info__item p, .contact-info__item a { font-size: 14px; color: var(--color-muted); }
.contact-info__item a:hover { color: var(--color-primary); }
.contact-social { display: flex; gap: 12px; }
.contact-social a {
    width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.contact-social a:hover { background: var(--gradient-brand); color: #fff; transform: translateY(-3px); }

.contact-form-card {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: 36px; box-shadow: var(--shadow-md);
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-ink); margin-bottom: 8px; }
.form-group label .required { color: var(--color-highlight); }
.form-control {
    width: 100%; padding: 13px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 14.5px; color: var(--color-ink); background: var(--color-surface-alt);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-control:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px rgba(8,145,178,.12); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-note { font-size: 12.5px; color: var(--color-muted); margin-top: 14px; }
.form-alert {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; margin-bottom: 24px;
}
.form-alert--success { background: rgba(76,154,79,.1); color: var(--color-accent-dark); border: 1px solid rgba(76,154,79,.25); }
.form-alert--error { background: rgba(214,51,108,.08); color: var(--color-magenta); border: 1px solid rgba(214,51,108,.25); }

/* ---------- Article (blog post / legal page) ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article-thumb { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-md); }
.article-thumb img { width: 100%; height: auto; aspect-ratio: 16/7; object-fit: cover; display: block; }
.article-meta {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border);
    font-size: 13.5px; color: var(--color-muted);
}
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-meta i { color: var(--color-primary); }
.article p { font-size: 16px; line-height: 1.75; color: var(--color-body); }
.article h2 { font-size: 24px; margin-top: 40px; }
.article h3 { font-size: 19px; margin-top: 32px; }
.article ul, .article ol { margin: 0 0 20px; padding-left: 22px; }
.article ul li, .article ol li { font-size: 16px; line-height: 1.7; color: var(--color-body); margin-bottom: 8px; }
.article blockquote {
    border-left: 4px solid var(--color-primary); background: var(--color-surface-alt);
    padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic; color: var(--color-ink); margin: 28px 0; font-size: 16px;
}
.article-disclaimer {
    margin-top: 36px; padding: 16px 20px; border-radius: var(--radius-sm);
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    font-size: 13.5px; color: var(--color-muted);
}
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.article-tags span {
    font-size: 12.5px; font-weight: 600; color: var(--color-primary); background: var(--color-primary-light);
    padding: 6px 14px; border-radius: 999px;
}

/* ---------- CTA banner ---------- */
.cta-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #1b212c, #0a0d13);
    border-radius: var(--radius-lg);
    padding: 56px 60px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    color: #fff;
    box-shadow: 0 24px 48px rgba(10,13,19,.35);
}
.cta-banner::before {
    content: "";
    position: absolute; top: -60%; right: -10%; width: 60%; height: 220%;
    background: radial-gradient(circle, rgba(34,139,34,.18), transparent 65%);
    pointer-events: none;
}
.cta-banner h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.cta-banner p { color: #c3c7cd; margin: 0; }
.cta-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: #0b0e13; color: #a7acb5; padding-top: 72px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; padding-bottom: 56px; }
.footer__col h4 { color: #fff; font-size: 16px; margin-bottom: 20px; }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__sub { color: #7d838d; }
.footer__about { font-size: 14px; line-height: 1.7; margin: 18px 0 22px; color: #b3b8c0; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,.07); padding: 6px 12px; border-radius: 999px; color: #c3c7cd;
}
.footer__links { display: grid; gap: 12px; }
.footer__links a { font-size: 14px; color: #b3b8c0; transition: color .2s; }
.footer__links a:hover { color: #fff; }
.footer__contact { display: grid; gap: 14px; margin-bottom: 22px; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #b3b8c0; }
.footer__contact i { color: var(--color-primary); margin-top: 3px; }
.footer__contact a { color: #b3b8c0; }
.footer__contact a:hover { color: #fff; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.footer__social a:hover { background: var(--color-primary); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.footer__bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #6b7078; }

.back-to-top {
    position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px; border-radius: 50%;
    background: var(--color-primary); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .25s ease; z-index: 400; font-size: 16px;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-primary-dark); }

/* ---------- Scroll-reveal animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero::before, .hero::after, .btn--primary { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .testimonial-grid, .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .hero__inner, .about-split, .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .hero__visual { order: -1; }
    .topbar__contact span.topbar__address { display: none; }
    .section--dark { background-attachment: scroll; }
}

@media (max-width: 860px) {
    .main-nav {
        position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0;
        background: #fff; padding: 20px 24px; overflow-y: auto;
        transform: translateX(-100%); transition: transform .3s ease; z-index: 450;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
    .main-nav__list > li > a { padding: 14px 10px; justify-content: space-between; }
    .mega-menu {
        position: static; opacity: 1; visibility: visible; transform: none; display: none;
        box-shadow: none; border: none; margin: 0; padding: 6px 0 6px 14px; width: auto; max-width: none;
    }
    .has-mega.is-open .mega-menu { display: block; }
    /* No hover on touch — the flyout becomes a permanently-open, indented
       sub-list directly under its parent category instead. */
    .mega-menu__submenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; margin: 2px 0 6px 14px; padding: 0; min-width: 0;
    }
    .nav-toggle { display: flex; }
    .site-header__actions .btn { display: none; }
    .nav-search__input { width: 120px; }
    .nav-search__results { width: 280px; }
}

@media (max-width: 400px) {
    .nav-search__input { width: 90px; }
}

@media (max-width: 720px) {
    .section { padding: 64px 0; }
    .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-steps .process-step::after { display: none; }
    .cta-banner { padding: 40px 28px; text-align: center; justify-content: center; }
}

@media (max-width: 600px) {
    .category-grid, .feature-grid, .testimonial-grid, .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .footer__grid { grid-template-columns: minmax(0, 1fr); }
    .process-steps { grid-template-columns: minmax(0, 1fr); }
    .form-row { grid-template-columns: minmax(0, 1fr); }
    .contact-form-card { padding: 24px; }
    .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { padding: 70px 0 90px; }
    .hero__stats { gap: 16px 22px; }
    .hero__stat { padding-right: 0; border-right: none; }
    .topbar__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}