:root {
    --primary-900: #10213F; --primary-800: #172D54; --primary-700: #1E3767; --primary-600: #2A4A82; --primary-500: #3B5E9E; --primary-100: #E9EEF6; --primary-50: #F5F7FB;
    --accent: #4AB7C3; --accent-dark: #318F9A; --accent-light: #E4F5F6; --white: #FFFFFF;
    --text-strong: #24272C; --text-body: #555A61; --text-muted: #8C8C8C; --border: #DDE2E8; --border-soft: #EDF0F3;
    --success: #238636; --success-soft: #EAF6EC; --warning: #B87913; --warning-soft: #FFF7E8; --error: #C53B3B; --error-soft: #FDECEC;
    --font: "Montserrat", Arial, sans-serif; --radius: 14px; --radius-lg: 24px; --shadow: 0 16px 40px rgba(16, 33, 63, .08); --container: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body { margin: 0; color: var(--text-body); background: var(--white); font: 400 15px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { color: var(--text-strong); }
h1, h2, h3 { line-height: 1.15; }
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.narrow { max-width: 900px; }
.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: fixed; top: 8px; left: 8px; z-index: 999; padding: 10px 16px; border-radius: 8px; color: var(--white); background: var(--primary-900); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.section { padding: clamp(64px, 7vw, 104px) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; color: var(--primary-600); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow i { width: 24px; height: 2px; background: var(--accent); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.section-heading h2 { margin: 0; color: var(--primary-900); font-size: clamp(26px, 3vw, 36px); }
.section-heading > p { max-width: 510px; margin: 0 0 3px; }
.section-heading.centered { justify-content: center; text-align: center; }
.section-heading.centered p { margin: 12px auto 0; }
.text-link { color: var(--primary-700); font-weight: 700; white-space: nowrap; }
.text-link span { margin-left: 7px; color: var(--accent-dark); transition: margin .2s; }
.text-link:hover span { margin-left: 12px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 12px 22px; border: 1px solid transparent; border-radius: 9px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--primary-700); box-shadow: 0 9px 22px rgba(30, 55, 103, .2); }
.button-primary:hover { background: var(--primary-800); }
.button-secondary { color: var(--primary-700); border-color: var(--border); background: var(--white); }
.button-white { color: var(--primary-900); background: var(--white); }
.button-ghost { color: var(--white); border-color: rgba(255,255,255,.35); background: transparent; }
.button-wide { width: 100%; }

/* Compact CSS-drawn line icons */
.line-icon { position: relative; flex: 0 0 auto; width: 24px; height: 24px; display: inline-block; color: currentColor; }
.line-icon::before, .line-icon::after { content: ""; position: absolute; border: 1.7px solid currentColor; }
.icon-search::before { width: 10px; height: 10px; border-radius: 50%; left: 3px; top: 3px; }.icon-search::after { width: 8px; border-width: 1.7px 0 0; transform: rotate(45deg); left: 13px; top: 15px; }
.icon-cart::before { width: 14px; height: 10px; border-width: 1.7px 1.7px 1.7px 0; transform: skew(-8deg); left: 5px; top: 4px; }.icon-cart::after { width: 3px; height: 3px; border-radius: 50%; left: 6px; top: 18px; box-shadow: 10px 0 0 -1px currentColor; }
.icon-chat::before { width: 17px; height: 13px; border-radius: 7px; left: 2px; top: 3px; }.icon-chat::after { width: 6px; height: 6px; border-width: 0 0 1.7px 1.7px; transform: skew(-25deg); left: 5px; top: 14px; }
.icon-truck::before { width: 13px; height: 10px; left: 1px; top: 6px; }.icon-truck::after { width: 7px; height: 7px; border-radius: 0 2px 2px 0; left: 14px; top: 9px; box-shadow: -8px 8px 0 -2px currentColor, 5px 8px 0 -2px currentColor; }
.icon-clock::before { width: 18px; height: 18px; border-radius: 50%; left: 2px; top: 2px; }.icon-clock::after { width: 5px; height: 7px; border-width: 0 0 1.7px 1.7px; left: 11px; top: 6px; }
.icon-shield::before { width: 16px; height: 18px; border-radius: 8px 8px 10px 10px; left: 3px; top: 2px; }.icon-shield::after { width: 6px; height: 3px; border-width: 0 0 1.7px 1.7px; transform: rotate(-45deg); left: 8px; top: 9px; }
.icon-award::before { width: 14px; height: 14px; border-radius: 50%; left: 4px; top: 1px; }.icon-award::after { width: 9px; height: 9px; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); left: 6px; top: 12px; }
.icon-bulb::before { width: 13px; height: 15px; border-radius: 50% 50% 40% 40%; left: 5px; top: 1px; }.icon-bulb::after { width: 7px; height: 4px; border-width: 1.7px 0; left: 8px; top: 17px; }
.icon-info::before { width: 18px; height: 18px; border-radius: 50%; left: 2px; top: 2px; }.icon-info::after { content: "i"; border: 0; left: 10px; top: 1px; font-weight: 700; }
.icon-lock::before { width: 15px; height: 12px; border-radius: 3px; left: 4px; top: 10px; }.icon-lock::after { width: 9px; height: 9px; border-radius: 8px 8px 0 0; border-bottom: 0; left: 7px; top: 3px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 1px 0 var(--border-soft); }
.header-main { min-height: 84px; display: grid; grid-template-columns: auto minmax(260px, 1fr) auto auto auto; align-items: center; gap: clamp(15px, 2vw, 32px); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand img { display: block; width: auto; object-fit: contain; }
.brand-header img { height: 34px; max-width: 176px; }
.brand-footer img { height: 58px; max-width: 260px; }
.brand-mark { position: relative; width: 34px; height: 38px; display: flex; align-items: end; gap: 3px; transform: skew(-8deg); }
.brand-mark i { display: block; width: 8px; border-radius: 3px; background: var(--primary-700); box-shadow: 0 0 12px rgba(74,183,195,.25); }.brand-mark i:nth-child(1) { height: 22px; }.brand-mark i:nth-child(2) { height: 34px; background: var(--accent); }.brand-mark i:nth-child(3) { height: 28px; }
.brand-copy { display: grid; line-height: 1; }.brand-copy strong { color: var(--primary-900); font-size: 17px; letter-spacing: .055em; }.brand-copy small { margin-top: 6px; color: var(--text-muted); font-size: 7.5px; font-weight: 700; letter-spacing: .13em; }
.search-bar { height: 46px; display: flex; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--primary-50); }
.search-bar:focus-within { border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); }
.search-bar input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 17px; color: var(--text-strong); background: transparent; }
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar button { width: 48px; border: 0; color: var(--white); background: var(--primary-700); cursor: pointer; }
.header-promise, .header-contact { display: flex; align-items: center; gap: 8px; line-height: 1.2; }.header-promise .line-icon, .header-contact .line-icon { color: var(--primary-600); }.header-promise small, .header-contact small { display: block; color: var(--text-muted); font-size: 9px; }.header-promise strong, .header-contact strong { font-size: 11px; font-weight: 600; }.header-contact:hover strong { color: var(--primary-600); }
.cart-link { position: relative; display: flex; align-items: center; gap: 6px; color: var(--primary-900); font-size: 12px; font-weight: 600; }.cart-link b { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--accent-dark); font-size: 9px; }
.category-nav { color: var(--white); background: var(--primary-700); }
.nav-track { height: 47px; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }.nav-track::-webkit-scrollbar { display: none; }.nav-track a { display: flex; align-items: center; justify-content: center; flex: 1 0 auto; padding: 0 clamp(10px, 1.1vw, 18px); font-size: 11px; font-weight: 600; white-space: nowrap; transition: background .2s; }.nav-track a:hover { background: rgba(255,255,255,.08); }.nav-track .all-categories { justify-content: flex-start; gap: 8px; flex-grow: 0; border-right: 1px solid rgba(255,255,255,.15); background: var(--primary-800); }
.mobile-search, .menu-toggle, .mobile-drawer, .drawer-backdrop { display: none; }
.icon-button { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }

/* Hero */
.hero { overflow: hidden; color: var(--white); background: var(--primary-900); }
.hero-grid { min-height: clamp(570px, 49vw, 690px); display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(35px, 5vw, 80px); padding-block: 58px; }
.hero .eyebrow { color: #aebdd9; }.hero-copy h1 { max-width: 730px; margin-bottom: 22px; color: var(--white); font-size: clamp(34px, 4.1vw, 56px); letter-spacing: -.035em; }.hero-copy h1 em { color: #77d4db; font-style: normal; }.hero-copy > p { max-width: 650px; margin-bottom: 30px; color: #c8d2e3; font-size: clamp(15px, 1.4vw, 17px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }.hero .button-primary { background: var(--accent-dark); box-shadow: 0 9px 25px rgba(0,0,0,.18); }.hero .button-primary:hover { background: var(--accent); }.hero .button-secondary { color: var(--white); border-color: #60708e; background: transparent; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 40px; }.hero-facts > div { display: flex; align-items: center; gap: 11px; }.hero-facts > div + div { padding-left: 30px; border-left: 1px solid #455575; }.hero-facts .line-icon { color: #72cad2; }.hero-facts small { display: block; color: #94a5c1; font-size: 10px; }.hero-facts strong { color: var(--white); font-size: 12px; }
.hero-stage { position: relative; height: min(460px, 38vw); min-height: 390px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 27px; background: radial-gradient(circle at 65% 40%, rgba(74,183,195,.25), transparent 36%), #142a50; box-shadow: 0 40px 70px rgba(0,0,0,.25); }
.hero-grid-lines { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); }
.light-ribbon { position: absolute; width: 115%; height: 16px; border-radius: 50%; background: #b6fbff; box-shadow: 0 0 12px #69dbe5, 0 0 40px #4ab7c3, 0 0 90px rgba(74,183,195,.55); transform: rotate(-16deg); }.ribbon-one { left: -12%; top: 17%; }.ribbon-two { left: -5%; top: 48%; transform: rotate(11deg); opacity: .75; }.ribbon-three { left: 10%; top: 78%; transform: rotate(-8deg); opacity: .5; }
.hero-product { position: absolute; left: 50%; top: 50%; width: 210px; height: 245px; padding: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: linear-gradient(145deg,#eff5fa,#aab6c6); transform: translate(-50%,-50%) rotate(8deg); box-shadow: 0 25px 50px rgba(0,0,0,.35); }.hero-product span { color: var(--primary-700); font-size: 48px; font-weight: 700; line-height: 1; }.hero-product strong { display: block; margin-top: 9px; color: var(--primary-500); font-size: 20px; }.hero-product i { width: 36px; height: 36px; display: inline-block; margin: 55px 7px 0 0; border: 5px solid #e0e8ec; border-radius: 50%; background: #fff7cc; box-shadow: 0 0 18px #fff; }
.hero-float { position: absolute; min-width: 86px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(16,33,63,.8); backdrop-filter: blur(8px); }.hero-float span { display: block; color: var(--white); font-size: 18px; font-weight: 700; }.hero-float small { color: #9facc3; font-size: 9px; }.float-a { right: 5%; top: 11%; }.float-b { left: 6%; bottom: 12%; }
.hero-stage > p { position: absolute; right: 18px; bottom: 14px; margin: 0; color: #8ca0bf; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.hero-stage > p span { color: #66c7cf; }

/* Cards */
.categories-section { background: var(--white); }.category-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 13px; }
.category-card { position: relative; min-width: 0; min-height: 192px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 18px 19px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--primary-50); transition: .25s ease; }.category-card:hover { border-color: #bfd0e3; background: var(--white); box-shadow: var(--shadow); transform: translateY(-4px); }.category-card > b { position: absolute; top: 15px; right: 15px; color: #9da7b4; font-size: 15px; }.category-card strong { display: block; margin-bottom: 6px; color: var(--primary-900); font-size: 14px; line-height: 1.25; }.category-card small { display: block; color: var(--text-muted); font-size: 9px; line-height: 1.5; }
.category-icon { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; color: var(--primary-700); background: var(--primary-100); }.category-icon::before,.category-icon::after,.category-icon i { content: ""; position: absolute; border: 2px solid currentColor; }.icon-module::before { width: 37px; height: 18px; border-radius: 5px; }.icon-module::after { width: 7px; height: 7px; border-radius: 50%; box-shadow: 14px 0 0 -2px var(--primary-100),14px 0 0 0 currentColor; }.icon-bar::before { width: 40px; height: 10px; border-radius: 5px; }.icon-bar::after { width: 4px; height: 4px; border-radius: 50%; box-shadow: 12px 0 currentColor,24px 0 currentColor; background: currentColor; }.icon-flex::before,.icon-neon::before { width: 36px; height: 30px; border-radius: 50%; border-width: 2px 2px 0; transform: rotate(-20deg); }.icon-flex::after,.icon-neon::after { width: 22px; height: 13px; border-radius: 50%; border-width: 0 0 2px 2px; transform: rotate(20deg); }.icon-power::before { width: 35px; height: 27px; border-radius: 4px; }.icon-power::after { width: 15px; height: 7px; border-width: 0 2px; }.icon-control::before { width: 37px; height: 26px; border-radius: 5px; }.icon-control::after { width: 5px; height: 5px; border-radius: 50%; box-shadow: 12px 0 currentColor; }.icon-accessory::before { width: 34px; height: 34px; border-radius: 50%; border-style: dashed; }.icon-accessory::after { width: 10px; height: 10px; border-radius: 50%; }
.products-section { background: var(--primary-50); }.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--white); transition: .25s ease; }.product-card:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-4px); }
.product-image-link { position: relative; display: block; }.product-badge,.gallery-badge { position: absolute; left: 15px; top: 15px; padding: 5px 9px; border-radius: 5px; color: var(--primary-700); background: rgba(255,255,255,.93); font-size: 8px; font-weight: 700; box-shadow: 0 4px 12px rgba(16,33,63,.08); }
.product-visual { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#f4f7fb,#e3e9f0); }.visual-note { position: absolute; right: 10px; bottom: 8px; color: #a0a9b5; font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }.visual-glow { position: absolute; width: 130px; height: 130px; border-radius: 50%; background: rgba(74,183,195,.17); filter: blur(20px); }.visual-object { position: relative; filter: drop-shadow(0 18px 18px rgba(16,33,63,.18)); }
.visual-modules .visual-object { display: flex; gap: 8px; transform: rotate(-8deg); }.visual-modules .visual-object i { width: 48px; height: 35px; display: grid; border-radius: 7px; background: #e9edf1; box-shadow: inset 0 0 0 2px #b7c0ca; }.visual-modules .visual-object i::after { content: ""; width: 17px; height: 17px; margin: auto; border-radius: 50%; background: #fff5ba; box-shadow: 0 0 12px #fff; }.visual-modules .visual-object i:nth-child(n+4) { display: none; }
.visual-bars .visual-object { width: 210px; height: 20px; display: flex; gap: 13px; align-items: center; padding: 0 15px; border-radius: 6px; background: #dce3e8; transform: rotate(-9deg); }.visual-bars .visual-object i { width: 14px; height: 14px; border-radius: 50%; background: #fff9cf; box-shadow: 0 0 10px white; }.visual-bars .visual-object i:nth-child(n+6) { display:none; }
.visual-flex .visual-object,.visual-neon .visual-object { width: 130px; height: 130px; border: 13px solid #e5eef2; border-radius: 50%; box-shadow: inset 0 0 0 3px #69dce5,0 0 14px rgba(74,183,195,.4); }.visual-neon .visual-object { border-color: #b6fbff; box-shadow: 0 0 10px #69dce5,0 0 30px rgba(74,183,195,.6); }.visual-flex .visual-object i,.visual-neon .visual-object i { display:none; }
.visual-power .visual-object { width: 148px; height: 84px; border-radius: 8px; background: linear-gradient(#b9c3cb,#e6ebee); box-shadow: inset 0 0 0 2px #929da6; }.visual-power .visual-object::before { content:"100W"; position:absolute; left:22px; top:24px; color:#5b6874; font-weight:700; }.visual-power .visual-object::after { content:""; position:absolute; right:-28px; top:38px; width:30px; height:4px; background:#253f6a; }.visual-power .visual-object i { display:none; }
.visual-control .visual-object { width: 125px; height: 90px; padding: 17px; border-radius: 10px; background: linear-gradient(145deg,#eff3f5,#c5ced5); box-shadow: inset 0 0 0 2px #a3aeb7; }.visual-control .visual-object::before { content:"CCT"; color:var(--primary-600); font-size:22px; font-weight:700; }.visual-control .visual-object i { display:none; }
.product-card-body { padding: 18px 19px 19px; }.product-category { color: var(--primary-500); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.product-card h3 { margin: 5px 0 4px; font-size: 18px; }.product-card h3 a:hover { color: var(--primary-600); }.product-card-body > p { margin-bottom: 11px; color: var(--text-muted); font-size: 10px; }.availability { display: flex; align-items: center; gap: 7px; color: var(--success); font-size: 9px; font-weight: 600; }.availability i,.stock-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }.product-card-footer { min-height: 49px; display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--border-soft); }.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }.price strong { color: var(--primary-900); font-size: 20px; line-height: 1.1; }.price > span { color: var(--text-muted); font-size: 8px; }.price small { flex-basis: 100%; margin-top: 5px; color: var(--text-muted); font-size: 10px; }.price-large strong { font-size: clamp(28px,3vw,34px); }.price-large > span { font-size: 11px; }.add-button { width: 39px; height: 39px; border: 0; border-radius: 8px; color: var(--white); background: var(--primary-700); font-size: 24px; line-height: 1; cursor: pointer; }.add-button:hover { background: var(--accent-dark); }.catalog-note { margin: 24px 0 0; color: var(--text-muted); font-size: 10px; text-align: right; }

/* Process, trust and editorial */
.process-section { background: var(--white); }.process-grid { display: grid; grid-template-columns: repeat(6,1fr); margin: 0; padding: 0; list-style: none; counter-reset: process; }.process-grid li { position: relative; min-width: 0; padding: 0 20px; text-align: center; }.process-grid li:not(:last-child)::after { content:""; position:absolute; top:45px; right:-28px; width:56px; border-top:1px dashed #b9c6d7; }.process-grid > li > span { position: absolute; left: calc(50% + 28px); top: 0; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--accent-dark); font-size: 7px; font-weight: 700; }.process-icon { width: 88px; height: 88px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--primary-50); }.process-icon i { width: 29px; height: 29px; border: 2px solid var(--primary-600); border-radius: 6px; transform: rotate(45deg); }.process-grid h3 { margin-bottom: 7px; color: var(--primary-900); font-size: 13px; }.process-grid p { margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.55; }
.trust-bar { padding: 27px 0; color: var(--white); background: var(--primary-700); }.trust-grid { display: grid; grid-template-columns: repeat(5,1fr); }.trust-item { display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 0; padding: 5px 17px; }.trust-item + .trust-item { border-left: 1px solid rgba(255,255,255,.15); }.trust-item .line-icon { color: #7dd1d8; }.trust-item strong { display: block; color: var(--white); font-size: 10px; }.trust-item small { display: block; color: #aebbd0; font-size: 7px; line-height: 1.35; }
.guide-section { background: var(--primary-50); }.guide-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: clamp(45px,7vw,100px); }.guide-intro h2,.faq-intro h2 { margin-bottom: 18px; color: var(--primary-900); font-size: clamp(26px,3vw,36px); }.guide-intro p { margin-bottom: 24px; }.guide-cards { display: grid; gap: 12px; }.guide-cards article { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 21px; padding: 22px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--white); }.guide-symbol { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: var(--primary-700); background: var(--primary-100); font-size: 21px; font-weight: 700; box-shadow: inset 0 0 0 7px var(--white),inset 0 0 0 8px #bdcbe0; }.guide-symbol.temperature { color: var(--accent-dark); background: var(--accent-light); }.guide-symbol.lumen { color: var(--warning); background: var(--warning-soft); }.guide-cards h3 { margin: 0 0 5px; color: var(--primary-900); font-size: 15px; }.guide-cards p { margin: 0; font-size: 11px; }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px,7vw,100px); }.support-card { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding: 17px; border-radius: 10px; background: var(--primary-50); }.support-card .line-icon { color: var(--accent-dark); }.support-card strong,.support-card a { display: block; font-size: 10px; }.support-card a { color: var(--primary-600); font-weight: 600; }.faq-list { border-top: 1px solid var(--border); }.faq-item { border-bottom: 1px solid var(--border); }.faq-item h3 { margin: 0; }.faq-item button { width: 100%; min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 4px; border: 0; color: var(--primary-900); background: transparent; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }.faq-item button b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--primary-600); background: var(--primary-50); font-size: 18px; transition: .2s; }.faq-item.is-open button b { color: var(--white); background: var(--primary-700); transform: rotate(45deg); }.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }.faq-panel p { min-height: 0; overflow: hidden; margin: 0; color: var(--text-body); font-size: 11px; }.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }.faq-item.is-open .faq-panel p { padding: 0 45px 20px 4px; }
.cta-section { padding: clamp(45px,5vw,70px) 0; color: var(--white); background: var(--primary-700); }.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }.cta-inner h2 { margin-bottom: 10px; color: var(--white); font-size: clamp(25px,3vw,36px); }.cta-inner p { margin: 0; color: #bdc9dc; }.eyebrow-light { color: #89d7de; }.cta-inner > div:last-child { display: flex; gap: 10px; flex: none; }

/* Footer */
.site-footer { color: #b6c1d3; background: var(--primary-900); }.footer-lead { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: clamp(28px,4vw,60px); padding-top: 67px; padding-bottom: 54px; }.brand-light .brand-copy strong { color: var(--white); }.brand-light .brand-copy small { color: #8292ad; }.brand-light .brand-mark i { background: #d7e3ee; }.brand-light .brand-mark i:nth-child(2) { background: var(--accent); }.footer-lead > div:first-child p { max-width: 300px; margin: 20px 0 0; font-size: 10px; }.footer-column { display: flex; flex-direction: column; gap: 8px; }.footer-column h2 { margin: 0 0 10px; color: var(--white); font-size: 11px; }.footer-column a,.footer-column span { color: #a9b5c9; font-size: 9px; }.footer-column a:hover { color: var(--white); }.footer-column small { margin-top: 4px; color: #6f7e98; font-size: 7px; line-height: 1.5; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 19px; border-top: 1px solid rgba(255,255,255,.09); color: #6f7e98; font-size: 8px; }

/* Catalog and interior pages */
.page-hero { padding: 42px 0 48px; color: var(--white); background: var(--primary-900); }.page-hero.compact { padding-bottom: 38px; }.page-hero .eyebrow { color: #91a5c6; }.page-hero h1 { margin-bottom: 10px; color: var(--white); font-size: clamp(30px,4vw,44px); }.page-hero p { margin: 0; color: #b8c5d8; }.breadcrumbs { margin-bottom: 28px; }.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: #a7b3c5; font-size: 9px; }.breadcrumbs li + li::before { content:"/"; margin-right:8px; opacity:.5; }.product-page .breadcrumbs { padding-top: 28px; color: var(--text-muted); }
.catalog-page { background: var(--primary-50); }.catalog-layout { display: grid; grid-template-columns: 215px 1fr; gap: 38px; }.catalog-sidebar { align-self: start; padding: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--white); }.filter-title { padding-bottom: 13px; border-bottom: 1px solid var(--border-soft); }.filter-title strong { font-size: 12px; }.filter-title button { display:none; }.catalog-sidebar nav { display:grid; gap:3px; margin-top:10px; }.catalog-sidebar nav a { display:flex; justify-content:space-between; padding:8px 9px; border-radius:6px; color:var(--text-body); font-size:10px; }.catalog-sidebar nav a:hover,.catalog-sidebar nav a.active { color:var(--primary-700); background:var(--primary-50); font-weight:600; }.catalog-sidebar nav span { color:var(--text-muted); }.availability-box { display:flex; gap:9px; margin-top:22px; padding:13px; border-radius:8px; color:var(--warning); background:var(--warning-soft); }.availability-box .line-icon { width:20px; flex-basis:20px; }.availability-box p { margin:0; color:var(--text-body); font-size:8px; }.availability-box strong { display:block; margin-bottom:2px; font-size:9px; }.results-toolbar { min-height:50px; display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }.results-toolbar span { font-size:10px; }.results-toolbar label { display:flex; align-items:center; gap:9px; font-size:9px; }.results-toolbar select { padding:7px 26px 7px 10px; border:1px solid var(--border); border-radius:7px; color:var(--text-body); background:var(--white); font-size:9px; }.empty-state { padding:70px 20px; border-radius:var(--radius); background:var(--white); text-align:center; }.empty-state .line-icon { color:var(--primary-500); transform:scale(1.7); }.empty-state h2 { margin:20px 0 8px; }.empty-state .button { margin-top:10px; }

/* Product detail */
.product-page { padding-bottom: 72px; }.product-detail { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(35px,6vw,80px); }.gallery-main { position:relative; overflow:hidden; border-radius:var(--radius-lg); }.gallery-main .product-visual { height:clamp(390px,42vw,570px); }.gallery-main .visual-object { transform:scale(1.7) rotate(-8deg); }.gallery-main .visual-flex .visual-object,.gallery-main .visual-neon .visual-object { transform:scale(1.5); }.gallery-main .visual-power .visual-object,.gallery-main .visual-control .visual-object { transform:scale(1.6); }.gallery-badge { z-index:2; font-size:9px; }.gallery-thumbs { display:flex; gap:10px; margin-top:12px; }.gallery-thumbs button { width:76px; height:66px; padding:0; overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--primary-50); cursor:pointer; }.gallery-thumbs button.active { border:2px solid var(--primary-700); }.gallery-thumbs .product-visual { height:64px; transform:scale(.8); }.gallery-thumbs .visual-note { display:none; }.detail-thumb { height:100%; display:grid; place-items:center; color:var(--primary-500); font-size:15px; font-weight:700; }.detail-thumb.application { color:var(--accent-dark); }
.product-summary { padding-top:13px; }.product-summary h1 { margin:7px 0 6px; color:var(--primary-900); font-size:clamp(30px,4vw,44px); }.sku { color:var(--text-muted); font-size:9px; }.product-summary .lead { max-width:570px; margin:20px 0; font-size:13px; }.stock-note { display:flex; justify-content:space-between; gap:20px; margin:19px 0; padding:12px 14px; border-radius:8px; background:var(--success-soft); font-size:9px; }.stock-note span { display:flex; align-items:center; gap:8px; color:var(--success); font-weight:600; }.stock-note small { color:var(--text-muted); font-size:8px; }.purchase-form { padding-top:6px; }.purchase-form fieldset,.checkout-form fieldset { margin:0 0 20px; padding:0; border:0; }.purchase-form legend,.checkout-form legend { margin-bottom:10px; color:var(--text-strong); font-size:11px; font-weight:600; }.variant-options { display:flex; flex-wrap:wrap; gap:8px; }.variant-options label { cursor:pointer; }.variant-options input { position:absolute; opacity:0; pointer-events:none; }.variant-options span { min-width:112px; display:grid; padding:9px 12px; border:1px solid var(--border); border-radius:8px; }.variant-options strong { font-size:9px; }.variant-options small { color:var(--text-muted); font-size:8px; }.variant-options input:checked + span { border-color:var(--primary-700); box-shadow:0 0 0 1px var(--primary-700); background:var(--primary-50); }.purchase-row { display:flex; align-items:end; gap:20px; margin-bottom:18px; }.purchase-row label,.equivalence span { display:block; margin-bottom:6px; color:var(--text-strong); font-size:9px; font-weight:600; }.quantity-selector { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }.quantity-selector button { width:38px; border:0; background:var(--primary-50); cursor:pointer; }.quantity-selector input { width:48px; height:39px; padding:0; border:0; text-align:center; -moz-appearance:textfield; }.quantity-selector input::-webkit-inner-spin-button { -webkit-appearance:none; }.equivalence { flex:1; padding:9px 12px; border-radius:8px; background:var(--primary-50); }.equivalence span { margin:0; color:var(--text-muted); font-weight:400; }.equivalence strong { font-size:9px; }.delivery-card { display:flex; gap:13px; margin-top:16px; padding:14px; border:1px solid var(--border-soft); border-radius:9px; }.delivery-card .line-icon { color:var(--primary-600); }.delivery-card strong,.delivery-card small { display:block; font-size:9px; }.delivery-card small { color:var(--text-muted); }
.product-information { background:var(--primary-50); }.tabs { display:flex; gap:3px; border-bottom:1px solid var(--border); }.tabs button { padding:12px 20px; border:0; border-bottom:2px solid transparent; color:var(--text-muted); background:transparent; font-size:10px; font-weight:600; cursor:pointer; }.tabs button.active { color:var(--primary-700); border-bottom-color:var(--primary-700); }.tab-panel { display:none; padding:40px 0 0; }.tab-panel.active { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; }.tab-panel h2 { color:var(--primary-900); font-size:24px; }.tab-panel p,.tab-panel li { font-size:11px; }.specs-grid { display:grid; grid-template-columns:repeat(2,1fr); margin:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--white); overflow:hidden; }.specs-grid div { display:flex; justify-content:space-between; gap:20px; padding:15px 17px; border-bottom:1px solid var(--border-soft); }.specs-grid div:nth-child(odd) { border-right:1px solid var(--border-soft); }.specs-grid dt { color:var(--text-muted); font-size:9px; }.specs-grid dd { margin:0; color:var(--text-strong); font-size:9px; font-weight:600; text-align:right; }.related-section .product-grid { max-width:980px; }

/* Cart, checkout and status pages */
.prototype-notice { display:flex; gap:14px; margin-bottom:24px; padding:17px; border:1px solid #f0d6a9; border-radius:10px; background:var(--warning-soft); }.prototype-notice .line-icon { color:var(--warning); }.prototype-notice strong { font-size:11px; }.prototype-notice p { margin:3px 0 0; font-size:9px; }.cart-empty { padding:65px 20px; border:1px dashed var(--border); border-radius:var(--radius-lg); text-align:center; }.cart-empty > .line-icon { color:var(--primary-500); transform:scale(2); }.cart-empty h2 { margin:30px 0 8px; color:var(--primary-900); }.cart-empty p { margin-bottom:22px; }.checkout-page { background:var(--primary-50); }.checkout-layout { display:grid; grid-template-columns:1.4fr .6fr; gap:30px; align-items:start; }.checkout-form,.order-summary { padding:28px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--white); }.checkout-form fieldset { padding-top:20px; border-top:1px solid var(--border-soft); }.checkout-form legend { padding-top:20px; font-size:14px; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }.form-grid label { display:grid; gap:5px; color:var(--text-strong); font-size:9px; font-weight:600; }.form-grid input { height:44px; padding:0 12px; border:1px solid var(--border); border-radius:7px; color:var(--text-strong); }.form-grid input:focus { border-color:var(--primary-500); outline:3px solid var(--primary-100); }.span-two { grid-column:span 2; }.order-summary h2 { color:var(--primary-900); font-size:21px; }.summary-row { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--border-soft); font-size:10px; }.order-summary > p { margin-top:18px; color:var(--text-muted); font-size:9px; }.payment-placeholder { display:flex; align-items:center; gap:10px; margin-top:20px; padding:13px; border-radius:8px; color:var(--primary-600); background:var(--primary-50); }.payment-placeholder strong,.payment-placeholder small { display:block; font-size:9px; }.payment-placeholder small { color:var(--text-muted); }.confirmation-page { min-height:65vh; display:grid; place-items:center; background:var(--primary-50); }.confirmation-card { padding:clamp(28px,6vw,65px); border-radius:var(--radius-lg); background:var(--white); box-shadow:var(--shadow); text-align:center; }.confirmation-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 20px; border-radius:50%; color:var(--success); background:var(--success-soft); font-size:25px; }.confirmation-card h1 { color:var(--primary-900); font-size:clamp(28px,4vw,40px); }.confirmation-card > p { max-width:650px; margin:0 auto 28px; }.confirmation-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; text-align:left; }.confirmation-steps > div { display:flex; gap:10px; padding:14px; border-radius:9px; background:var(--primary-50); }.confirmation-steps span { width:24px;height:24px;display:grid;place-items:center;flex:none;border-radius:50%;color:var(--white);background:var(--primary-600);font-size:9px; }.confirmation-steps p { margin:0;font-size:8px; }.confirmation-steps strong { display:block;font-size:9px; }.error-page { min-height:60vh; display:grid; place-items:center; text-align:center; }.error-page .container > span { color:var(--primary-100); font-size:clamp(80px,15vw,160px); font-weight:700; line-height:1; }.error-page h1 { color:var(--primary-900); font-size:clamp(28px,4vw,40px); }.toast { position:fixed; right:20px; bottom:20px; z-index:200; padding:13px 18px; border-radius:9px; color:var(--white); background:var(--primary-900); box-shadow:var(--shadow); font-size:10px; opacity:0; transform:translateY(20px); pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:translateY(0); }

@media (max-width: 1120px) {
    .header-main { grid-template-columns:auto minmax(220px,1fr) auto auto; }.header-promise { display:none; }
    .category-grid { grid-template-columns:repeat(4,1fr); }.category-card { min-height:170px; }
    .process-grid { grid-template-columns:repeat(3,1fr); gap:38px 0; }.process-grid li:nth-child(3)::after { display:none; }
    .footer-lead { grid-template-columns:1.3fr repeat(2,1fr); }.footer-lead > div:first-child { grid-row:span 2; }
}
@media (max-width: 900px) {
    .section { padding-block:64px; }.header-main { min-height:66px; grid-template-columns:auto auto 1fr auto; gap:12px; }.menu-toggle { display:grid; place-content:center; gap:5px; }.menu-toggle span { width:20px; border-top:2px solid var(--primary-900); }.header-main > .search-bar,.header-promise,.header-contact,.cart-label { display:none; }.brand { justify-self:start; }.cart-link { justify-self:end; }.mobile-search { display:block; padding-bottom:10px; }.mobile-search .search-bar { height:40px; }.category-nav { display:none; }
    .mobile-drawer { position:fixed; inset:0 auto 0 0; z-index:105; width:min(88vw,360px); display:block; padding:22px; color:var(--text-body); background:var(--white); transform:translateX(-105%); transition:transform .25s ease; }.mobile-drawer.open { transform:translateX(0); }.drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--border); }.drawer-head strong { color:var(--primary-900); }.drawer-head .icon-button { font-size:28px; }.mobile-drawer nav { display:grid; margin-top:12px; }.mobile-drawer nav a { display:flex; justify-content:space-between; padding:11px 4px; border-bottom:1px solid var(--border-soft); font-size:12px; }.mobile-drawer nav span { color:var(--accent-dark); }.drawer-support { position:absolute; left:22px; right:22px; bottom:25px; padding:16px; border-radius:10px; background:var(--primary-50); }.drawer-support span,.drawer-support a { display:block; font-size:10px; }.drawer-support a { color:var(--primary-600); font-weight:600; }.drawer-backdrop { position:fixed; inset:0; z-index:104; width:100%; height:100%; border:0; background:rgba(9,21,43,.55); opacity:0; pointer-events:none; transition:.25s; }.drawer-backdrop.open { display:block; opacity:1; pointer-events:auto; }
    .hero-grid { min-height:auto; grid-template-columns:1fr; gap:45px; padding-block:55px; }.hero-stage { width:min(100%,620px); height:430px; justify-self:center; }.hero-copy { max-width:720px; }.category-grid { grid-template-columns:repeat(3,1fr); }.product-grid { grid-template-columns:repeat(2,1fr); }.trust-grid { grid-template-columns:repeat(3,1fr); gap:18px 0; }.trust-item:nth-child(4) { border-left:0; }.guide-layout,.faq-layout { grid-template-columns:1fr; }.guide-intro,.faq-intro { max-width:620px; }.cta-inner { align-items:flex-start; flex-direction:column; }.footer-lead { grid-template-columns:repeat(3,1fr); }.footer-lead > div:first-child { grid-column:span 3; grid-row:auto; }.catalog-layout { grid-template-columns:1fr; }.catalog-sidebar { padding:13px 16px; }.filter-title { display:flex; justify-content:space-between; border:0; }.filter-title button { display:block; border:0; color:var(--primary-600); background:transparent; font-size:10px; font-weight:600; }.catalog-sidebar nav,.availability-box { display:none; }.catalog-sidebar.open nav { display:grid; }.catalog-sidebar.open .availability-box { display:flex; }.product-detail { grid-template-columns:1fr; }.product-gallery { max-width:680px; }.checkout-layout { grid-template-columns:1fr; }.order-summary { order:-1; }
}
@media (max-width: 650px) {
    .container { width:min(calc(100% - 24px),var(--container)); }.section-heading { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:28px; }.section-heading > p { max-width:none; }.category-grid { grid-template-columns:repeat(2,1fr); gap:9px; }.category-card { min-height:155px; padding:16px; }.category-icon { width:54px; height:54px; transform:scale(.9); transform-origin:left top; }.product-grid { grid-template-columns:1fr; }.product-visual { height:225px; }.process-grid { grid-template-columns:repeat(2,1fr); row-gap:35px; }.process-grid li { padding-inline:10px; }.process-grid li::after { display:none; }.trust-grid { grid-template-columns:1fr 1fr; }.trust-item { justify-content:flex-start; padding-inline:12px; }.trust-item:nth-child(odd) { border-left:0; }.trust-item:nth-child(4) { border-left:1px solid rgba(255,255,255,.15); }.guide-cards article { grid-template-columns:56px 1fr; padding:16px; }.guide-symbol { width:56px;height:56px;font-size:16px; }.cta-inner > div:last-child { width:100%; flex-direction:column; }.footer-lead { grid-template-columns:repeat(2,1fr); }.footer-lead > div:first-child { grid-column:span 2; }.footer-bottom { flex-direction:column; gap:3px; }.results-toolbar label { display:none; }.tabs { overflow-x:auto; }.tabs button { flex:0 0 auto; padding-inline:13px; }.tab-panel.active { grid-template-columns:1fr; gap:22px; }.specs-grid { grid-template-columns:1fr; }.specs-grid div:nth-child(odd) { border-right:0; }.purchase-row { align-items:stretch; flex-direction:column; }.stock-note { align-items:flex-start; flex-direction:column; gap:3px; }.confirmation-steps { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.span-two { grid-column:auto; }
}
@media (max-width: 389px) {
    .brand-copy strong { font-size:14px; }.brand-copy small { font-size:6px; }.brand-mark { width:28px;transform:scale(.85) skew(-8deg); }.brand-header img { height:28px; max-width:142px; }.brand-footer img { height:42px; max-width:210px; }.header-main { gap:7px; }.cart-link { gap:2px; }
    .hero-actions { flex-direction:column; }.hero-actions .button { width:100%; }.hero-facts { flex-direction:column; gap:14px; }.hero-facts > div + div { padding-left:0; border:0; }.hero-stage { min-height:300px;height:330px; }.hero-product { transform:translate(-50%,-50%) rotate(8deg) scale(.72); }.hero-float { transform:scale(.8); }.category-card small { display:none; }.category-card { min-height:130px; }.process-grid { grid-template-columns:1fr; }.trust-grid { grid-template-columns:1fr; }.trust-item,.trust-item:nth-child(4) { border-left:0; }.footer-lead { grid-template-columns:1fr; }.footer-lead > div:first-child { grid-column:auto; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }