/* Art direction: enterprise infrastructure → precise, calm, technical. One teal accent + warm neutral surfaces. */
:root,[data-theme="light"]{--bg:#f6f7f5;--surface:#fff;--surface-2:#eef1ef;--text:#17201e;--muted:#5f6d69;--border:rgba(23,32,30,.13);--primary:#08747a;--primary-hover:#07575b;--accent:#ff6b35;--inverse:#fff;--success:#417a32;--error:#a13544;--shadow:0 12px 36px rgba(14,40,36,.09);--r-sm:.45rem;--r-md:.75rem;--r-lg:1rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--text-xs:clamp(.75rem,.72rem + .12vw,.82rem);--text-sm:clamp(.875rem,.83rem + .18vw,1rem);--text-base:clamp(1rem,.95rem + .18vw,1.1rem);--text-lg:clamp(1.15rem,1.05rem + .45vw,1.45rem);--text-xl:clamp(1.55rem,1.25rem + 1.1vw,2.25rem);--font:'Satoshi','Inter',sans-serif}
[data-theme="dark"]{--bg:#121715;--surface:#19201d;--surface-2:#222b27;--text:#e5ece9;--muted:#a3b0ab;--border:rgba(229,236,233,.14);--primary:#53a9ae;--primary-hover:#73bbc0;--inverse:#10211f;--shadow:0 16px 42px rgba(0,0,0,.3)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--text-base);line-height:1.55}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(1200px,calc(100% - 32px));margin-inline:auto}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;background:var(--primary);color:var(--inverse);padding:.75rem 1rem;border-radius:var(--r-sm)}.skip-link:focus{top:1rem}.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}.header-top{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand{display:flex;align-items:center;gap:.75rem}.brand-mark{width:42px;color:var(--primary)}.brand strong{display:block;font-size:1.12rem;letter-spacing:.07em}.brand small{display:block;color:var(--muted);font-size:var(--text-xs)}.header-actions{display:flex;align-items:center;gap:.5rem}.header-phone{font-weight:600;margin-right:.5rem}.icon-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text)}.icon-button:hover{border-color:var(--primary);color:var(--primary)}.cart-link{position:relative}.cart-link svg{width:22px}.cart-count{position:absolute;right:-5px;top:-6px;display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border:2px solid var(--surface);border-radius:99px;background:var(--accent);color:#fff;font-size:12px;font-weight:700}.nav-toggle{display:none;gap:4px}.nav-toggle span{display:block;width:20px;height:2px;background:currentColor}.main-nav{background:var(--surface)}.menu-root,.menu-sub{list-style:none;padding:0;margin:0}.menu-root{display:flex;align-items:center;gap:.2rem}.menu-item{position:relative}.menu-item>a{display:flex;align-items:center;min-height:48px;padding:.7rem .9rem;font-size:var(--text-sm);font-weight:600;border-radius:var(--r-sm)}.menu-item>a:hover,.menu-item.is-active>a{color:var(--primary);background:var(--surface-2)}.menu-sub{display:none;position:absolute;top:100%;left:0;min-width:260px;padding:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow)}.menu-sub .menu-sub{top:0;left:100%}.menu-item:hover>.menu-sub,.menu-item:focus-within>.menu-sub{display:block}.site-main{min-height:60vh}.page-section{padding-block:clamp(2rem,5vw,5rem)}.page-title{font-size:var(--text-xl);line-height:1.12;margin:0 0 1rem}.lead{max-width:68ch;color:var(--muted)}.hero{padding-block:clamp(3rem,8vw,7rem);background:linear-gradient(125deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface) 58%)}.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--space-12);align-items:center}.hero h1{max-width:17ch;font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.045em;margin:0 0 1.25rem}.hero p{max-width:56ch;color:var(--muted)}.hero-panel{padding:var(--space-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}.metric{padding:1rem 0;border-bottom:1px solid var(--border)}.metric:last-child{border:0}.metric strong{display:block;font-size:var(--text-lg)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1.15rem;border:1px solid var(--border);border-radius:var(--r-sm);font-weight:700;font-size:var(--text-sm)}.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--inverse)}.btn-primary:hover{background:var(--primary-hover)}.btn-secondary{background:var(--surface)}.button-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.grid{display:grid;gap:var(--space-5)}.grid-3{grid-template-columns:repeat(3,1fr)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--space-6)}.card h2,.card h3{margin-top:0}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-5)}.product-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}.product-card__visual{aspect-ratio:4/3;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}.product-card__visual svg{width:55%}.product-card__body{display:flex;flex:1;flex-direction:column;padding:var(--space-5)}.product-card h2,.product-card h3{font-size:var(--text-lg);margin:.25rem 0 .75rem}.product-card__meta{color:var(--muted);font-size:var(--text-sm)}.price{font-size:var(--text-lg);font-weight:800;font-variant-numeric:tabular-nums;margin-top:auto;padding-top:1rem}.badge{display:inline-flex;width:max-content;padding:.25rem .55rem;background:color-mix(in srgb,var(--primary) 13%,var(--surface));color:var(--primary);border-radius:99px;font-size:var(--text-xs);font-weight:700}.catalog-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--space-8)}.filter-panel{align-self:start;position:sticky;top:150px}.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:var(--space-12)}.product-gallery{min-height:420px;display:grid;place-items:center;background:var(--surface-2);border-radius:var(--r-lg)}.spec-table th,.spec-table td{padding:.75rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.spec-table th{width:38%;color:var(--muted);font-weight:500}.content-card{max-width:850px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,3rem)}.site-footer{padding-block:var(--space-12);background:var(--surface);border-top:1px solid var(--border);color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:var(--space-8)}.footer-grid nav{display:flex;flex-direction:column;gap:.5rem}.footer-grid strong{color:var(--text)}:focus-visible{outline:2px solid var(--primary);outline-offset:3px}@media(max-width:900px){.header-phone{display:none}.nav-toggle{display:grid}.main-nav{display:none;max-height:calc(100vh - 80px);overflow:auto}.main-nav.is-open{display:block}.menu-root{display:block;padding:.5rem 0}.menu-item>a{min-height:48px}.menu-sub,.menu-sub .menu-sub{display:none;position:static;min-width:0;margin-left:1rem;border:0;border-left:1px solid var(--border);border-radius:0;box-shadow:none}.menu-item.is-open>.menu-sub{display:block}.menu-item:hover>.menu-sub{display:none}.menu-item.is-open:hover>.menu-sub{display:block}.hero-grid,.product-detail,.catalog-layout,.footer-grid{grid-template-columns:1fr}.filter-panel{position:static}.grid-3{grid-template-columns:1fr 1fr}}@media(max-width:580px){.container{width:min(100% - 24px,1200px)}.brand small{display:none}.brand-mark{width:36px}.header-top{min-height:68px}.grid-3{grid-template-columns:1fr}.hero h1{font-size:2.35rem}.hero-panel{padding:var(--space-5)}.header-actions{gap:.3rem}.icon-button{width:42px;height:42px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* ITS_MEGAMENU_V1 */
.main-nav .container {
    position: relative;
}

.menu-item__head {
    display: flex;
    align-items: stretch;
}

.menu-item__head > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .7rem .35rem .7rem .9rem;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--r-sm);
}

.menu-item:not(.has-children) > .menu-item__head > a {
    padding-inline: .9rem;
}

.menu-item__head > a:hover,
.menu-item.is-active > .menu-item__head > a {
    color: var(--primary);
    background: var(--surface-2);
}

.mega-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--muted);
}

.mega-toggle:hover,
.menu-item.is-open .mega-toggle {
    color: var(--primary);
    background: var(--surface-2);
}

.mega-toggle svg {
    transition: transform 180ms ease;
}

.menu-item.is-open .mega-toggle svg {
    transform: rotate(180deg);
}

.menu-item--mega {
    position: static;
}

.mega-panel {
    position: absolute;
    z-index: 120;
    top: 100%;
    left: 0;
    right: 0;
    max-height: min(72vh, 720px);
    overflow: auto;
    padding: var(--space-6);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow);
    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 160ms ease;
}

.menu-item--mega.is-open > .mega-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-panel__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border);
}

.mega-panel__header h2 {
    margin: .2rem 0;
    font-size: var(--text-xl);
    line-height: 1.15;
}

.mega-panel__header p {
    max-width: 55ch;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.mega-panel__eyebrow,
.mega-promo__eyebrow {
    color: var(--primary) !important;
    font-size: var(--text-xs) !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mega-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    white-space: nowrap;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 750;
}

.mega-all:hover {
    color: var(--primary-hover);
}

.mega-panel__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-6);
}

.mega-tree {
    min-width: 0;
}

.mega-columns,
.mega-children {
    padding: 0;
    margin: 0;
    list-style: none;
}

.mega-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.mega-node {
    min-width: 0;
}

.mega-node--level-1 {
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--r-md);
}

.mega-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 32px;
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.3;
}

.mega-node--level-1 > .mega-link {
    margin-bottom: var(--space-2);
    color: var(--text);
    font-weight: 800;
}

.mega-node--featured > .mega-link {
    color: var(--primary);
}

.mega-link:hover {
    color: var(--primary);
}

.mega-link__arrow {
    flex: 0 0 auto;
    color: var(--muted);
}

.mega-children {
    display: grid;
    gap: .15rem;
    padding-left: var(--space-3);
    border-left: 1px solid var(--border);
}

.mega-children .mega-children {
    margin: .15rem 0 .3rem .25rem;
}

.mega-node--level-2 > .mega-link {
    font-weight: 700;
}

.mega-node--level-3 > .mega-link {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
}

.mega-node--level-4 > .mega-link,
.mega-node--level-5 > .mega-link,
.mega-node--level-6 > .mega-link {
    color: var(--muted);
    font-size: var(--text-xs);
}

.mega-promo {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    overflow: hidden;
    color: var(--inverse);
    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-hover)
        );
    border-radius: var(--r-md);
}

.mega-promo h3 {
    margin: var(--space-2) 0 var(--space-3);
    font-size: var(--text-lg);
    line-height: 1.18;
}

.mega-promo p {
    margin: 0;
    color: color-mix(in srgb, var(--inverse) 82%, transparent);
    font-size: var(--text-sm);
}

.mega-promo .mega-promo__eyebrow {
    color: var(--inverse) !important;
    opacity: .78;
}

.mega-promo__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 46px;
    padding: .65rem .9rem;
    margin-top: auto;
    background: var(--surface);
    color: var(--primary);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    font-weight: 800;
}

.mega-promo__button:hover {
    background: var(--surface-2);
}

@media (max-width: 1100px) and (min-width: 901px) {
    .mega-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mega-panel__content {
        grid-template-columns: minmax(0, 1fr) 230px;
    }
}

@media (max-width: 900px) {
    .menu-item__head {
        width: 100%;
    }

    .menu-item__head > a {
        flex: 1;
        padding-left: .9rem;
    }

    .mega-toggle {
        width: 48px;
        flex: 0 0 48px;
    }

    .mega-panel {
        position: static;
        max-height: none;
        display: none;
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding: var(--space-4);
        margin: 0 0 var(--space-3);
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        transition: none;
    }

    .menu-item--mega.is-open > .mega-panel {
        display: block;
    }

    .mega-panel__header {
        align-items: start;
        margin-bottom: var(--space-4);
    }

    .mega-panel__header h2 {
        font-size: var(--text-lg);
    }

    .mega-panel__header p,
    .mega-panel__eyebrow {
        display: none;
    }

    .mega-panel__content {
        grid-template-columns: 1fr;
    }

    .mega-columns {
        grid-template-columns: 1fr;
    }

    .mega-node--level-1 {
        padding: var(--space-3);
    }

    .mega-promo {
        min-height: 220px;
    }
}

@media (max-width: 580px) {
    .mega-panel {
        padding-inline: var(--space-2);
    }

    .mega-panel__header {
        gap: var(--space-3);
    }

    .mega-all {
        font-size: var(--text-xs);
    }
}
