:root {
  --navy: #031426;
  --navy-light: #082c4d;
  --blue: #0b91f3;
  --blue-light: #45b5ff;
  --ink: #0a2039;
  --muted: #617184;
  --line: #dce6ef;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.store-header { position: absolute; z-index: 5; inset: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.1); }
.header-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: flex; align-items: center; gap: 11px; color: white; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; color: var(--blue-light); border: 2px solid var(--blue); border-radius: 50%; font-size: 23px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font-size: 29px; }.brand small { margin-top: 5px; color: #b9cadd; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.store-header nav { display: flex; align-items: center; gap: 25px; color: #cbd8e4; font-size: 13px; font-weight: 650; }
.cart-button { display:inline-flex;align-items:center;gap:7px;padding:0;color:#46baff;border:0;background:none;font-weight:700;cursor:pointer }
.cart-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cart-button span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;color:white;border-radius:20px;background:#087ed8;font-size:10px}
.contact-button { padding: 10px 15px; color: white; border: 1px solid rgba(69,181,255,.55); border-radius: 3px; }
.store-hero { position: relative; min-height: 650px; overflow: hidden; color: white; background: radial-gradient(circle at 78% 45%, rgba(0,137,235,.25), transparent 28%), linear-gradient(120deg, #020e1d, #072642); }
.grid { position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(rgba(65,175,246,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(65,175,246,.3) 1px, transparent 1px); background-size: 55px 55px; }
.store-hero-inner { position: relative; min-height: 650px; display: grid; grid-template-columns: 1fr .8fr; gap: 60px; align-items: center; padding-top: 80px; }
.eyebrow { margin: 0 0 18px; color: var(--blue-light); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.store-hero h1 { max-width: 680px; margin: 0; font-size: clamp(43px, 5vw, 67px); line-height: 1.06; letter-spacing: -.04em; }
.store-hero h1 em { color: var(--blue-light); font-style: normal; }
.store-hero p:not(.eyebrow) { max-width: 620px; margin: 25px 0 31px; color: #c0d0de; font-size: 17px; }
.primary-button { display: inline-flex; align-items: center; gap: 25px; padding: 14px 20px; border-radius: 3px; background: linear-gradient(135deg, #087ad2, var(--blue)); font-size: 14px; font-weight: 750; box-shadow: 0 15px 35px rgba(0,128,225,.25); }
.store-visual { position: relative; min-height: 390px; }
.box { position: absolute; z-index: 2; left: 20%; top: 19%; width: 230px; height: 220px; background: linear-gradient(135deg, #0b5488, #061d35); border: 1px solid rgba(89,192,255,.55); box-shadow: 30px 35px 70px rgba(0,0,0,.35); transform: perspective(600px) rotateY(-13deg) rotateX(4deg); }
.box::before, .box::after { content: ""; position: absolute; background: #0d6aa8; border: 1px solid rgba(91,192,255,.38); }
.box::before { left: 100%; top: 14px; width: 55px; height: 100%; transform: skewY(-27deg); transform-origin: left top; }
.box::after { left: 14px; bottom: 100%; width: 100%; height: 55px; transform: skewX(-63deg); transform-origin: left bottom; }
.box span { position: absolute; left: 30px; top: 45px; color: white; font-size: 54px; font-weight: 850; letter-spacing: .03em; }
.box i { position: absolute; left: 30px; top: 111px; width: 95px; height: 3px; background: var(--blue-light); box-shadow: 0 0 12px var(--blue); }
.orbit { position: absolute; border: 1px solid rgba(69,181,255,.18); border-radius: 50%; }
.orbit-one { width: 370px; height: 370px; left: 0; top: 5px; }.orbit-two { width: 260px; height: 260px; left: 55px; top: 60px; }
.catalog-preview { padding: 95px 0 105px; background: #f5f8fb; }
.section-heading { display: grid; grid-template-columns: 1fr .7fr; gap: 75px; align-items: end; margin-bottom: 42px; }
.section-heading span { color: #087bd2; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.section-heading h2 { margin: 8px 0 0; font-size: clamp(33px, 4vw, 47px); line-height: 1.15; letter-spacing: -.035em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: white; }
.category-grid article { position: relative; min-height: 280px; padding: 28px 24px; }
.category-grid article + article { border-left: 1px solid var(--line); }
.category-grid article > span { position: absolute; right: 18px; top: 10px; color: #e7eef4; font-size: 48px; font-weight: 800; }
.icon { display: grid; place-items: center; width: 53px; height: 53px; margin: 34px 0 25px; color: var(--blue); border: 1px solid #b8ddf6; background: #eff8ff; font-size: 25px; }
.category-grid h3 { margin: 0 0 10px; font-size: 18px; }.category-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.products { padding: 100px 0 110px; background: white; }
.products-heading { display: grid; grid-template-columns: 1fr .65fr; gap: 75px; align-items: end; margin-bottom: 35px; }
.products-heading > div > span { color: #087bd2; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.products-heading h2 { margin: 8px 0 0; font-size: clamp(33px, 4vw, 47px); line-height: 1.15; letter-spacing: -.035em; }
.products-heading > p { margin: 0; color: var(--muted); font-size: 14px; }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; padding: 16px; border: 1px solid var(--line); background: #f8fafc; }
.search-box { position: relative; display: block; width: min(340px, 100%); }
.search-box svg { position: absolute; left: 13px; top: 50%; width: 18px; fill: none; stroke: #63788b; stroke-width: 1.8; transform: translateY(-50%); }
.search-box input { width: 100%; height: 43px; padding: 0 14px 0 41px; color: var(--ink); border: 1px solid #cfdce7; border-radius: 2px; outline: none; background: white; }
.search-box input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11,145,243,.1); }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.filters button { padding: 8px 12px; color: #52687a; border: 1px solid #cfdae4; border-radius: 2px; background: white; font-size: 11px; font-weight: 750; cursor: pointer; }
.filters button.active, .filters button:hover { color: white; border-color: #087ed8; background: #087ed8; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card { overflow: hidden; border: 1px solid var(--line); background: white; transition: transform .2s, box-shadow .2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(4,31,56,.1); }
.product-card[hidden] { display: none; }
.product-art { position: relative; display: grid; place-items: center; height: 210px; overflow: hidden; color: #9ddcff; background: radial-gradient(circle at 50% 40%, #0b4c7c, #061d35 68%); }
.product-art::before { content: ""; position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(80,183,246,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(80,183,246,.35) 1px, transparent 1px); background-size: 28px 28px; }
.product-info { padding: 23px; }
.product-category { color: #087ed8; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.product-info h3 { margin: 6px 0 8px; font-size: 20px; line-height: 1.25; }
.product-info > p { min-height: 66px; margin: 0; color: var(--muted); font-size: 13px; }
.product-info ul { min-height: 58px; margin: 15px 0 20px; padding: 0; list-style: none; color: #536a7e; font-size: 11px; }
.product-info li::before { content: "✓"; margin-right: 7px; color: #0790ed; font-weight: 800; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 17px; border-top: 1px solid #e3eaf0; }
.product-bottom>div{display:flex;flex-direction:column}.product-bottom strong { font-size: 13px; }.product-bottom>div small{color:#7d8f9d;font-size:9px}
.product-bottom a,.product-bottom button { padding: 8px 10px; color: white; border:0;border-radius: 2px; background: #087ed8; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;cursor:pointer }
.product-bottom a:hover,.product-bottom button:hover { background: #0569b7; }
.empty-state { padding: 45px; color: var(--muted); border: 1px dashed #cbd8e3; text-align: center; }
.example-warning { margin: 28px 0 0; padding: 15px 18px; color: #5b6f80; border-left: 3px solid #0790ed; background: #f3f8fc; font-size: 12px; }

.art-clp > span { position: absolute; z-index: 2; width: 155px; height: 115px; padding: 18px; color: #d8edfb; border: 2px solid #5e8daa; background: #16374e; box-shadow: 15px 18px 30px rgba(0,0,0,.3); font-weight: 800; letter-spacing: .1em; }
.art-clp > i { position: relative; z-index: 3; width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #20d47c; box-shadow: 0 0 9px #20d47c; transform: translate(46px, -25px); }
.art-ihm > span { position: relative; z-index: 2; display: block; width: 165px; height: 112px; padding: 20px; color: white; border: 8px solid #315b76; background: #071b2e; box-shadow: 15px 18px 30px rgba(0,0,0,.3); }
.art-ihm b { font-size: 25px; }.art-ihm i { display: inline-block; width: 20px; height: 35px; margin: 12px 4px 0 0; background: #159bea; }.art-ihm i:nth-child(3) { height: 25px; }.art-ihm i:nth-child(4) { height: 45px; }
.art-drive > span { position: absolute; z-index: 2; top: 48px; width: 140px; height: 120px; padding: 23px; color: #85ffa9; border: 2px solid #547b94; background: #193a50; box-shadow: 15px 18px 30px rgba(0,0,0,.3); font: 700 25px monospace; }
.art-drive small { font-size: 11px; }.art-drive > i { position: relative; z-index: 3; width: 20px; height: 20px; border: 1px solid #89a9bb; border-radius: 50%; transform: translate(20px, 36px); }
.art-sensor > span { position: absolute; z-index: 2; width: 155px; height: 48px; border: 2px solid #83a9be; border-radius: 22px 5px 5px 22px; background: repeating-linear-gradient(90deg, #426479 0 5px, #7194a8 5px 8px); box-shadow: 16px 17px 30px rgba(0,0,0,.3); }
.art-sensor > i { position: absolute; z-index: 3; right: 92px; width: 42px; height: 42px; border: 5px solid #1e475f; border-radius: 50%; background: #79a2b8; }.art-sensor b { position: absolute; z-index: 3; right: 45px; color: #3bc1ff; font-size: 45px; }
.art-photo > span { position: relative; z-index: 2; width: 90px; height: 115px; border: 2px solid #6e98b0; border-radius: 7px; background: #183b53; box-shadow: 14px 18px 30px rgba(0,0,0,.3); }
.art-photo > span::after { content: ""; position: absolute; left: 24px; top: 25px; width: 36px; height: 36px; border: 5px solid #317cad; border-radius: 50%; background: #0a1e30; box-shadow: 0 0 18px #29abff; }
.art-photo > i { position: absolute; z-index: 3; left: calc(50% + 50px); width: 50px; height: 2px; background: #44c4ff; box-shadow: 0 0 8px #44c4ff; }.art-photo > i:nth-child(3) { transform: rotate(13deg); }.art-photo > i:nth-child(4) { transform: rotate(-13deg); }
.art-encoder > span { position: relative; z-index: 2; width: 105px; height: 105px; border: 8px solid #7399ad; border-radius: 50%; background: #17394f; box-shadow: 15px 18px 30px rgba(0,0,0,.3); }
.art-encoder i { position: absolute; left: 43px; top: 3px; width: 4px; height: 15px; background: #86d8ff; transform-origin: 2px 42px; }.art-encoder i:nth-child(2) { transform: rotate(60deg); }.art-encoder i:nth-child(3) { transform: rotate(120deg); }.art-encoder i:nth-child(4) { transform: rotate(180deg); }.art-encoder i:nth-child(5) { transform: rotate(240deg); }.art-encoder i:nth-child(6) { transform: rotate(300deg); }
.art-encoder b { position: absolute; z-index: 3; left: calc(50% + 45px); width: 75px; height: 20px; border-radius: 0 8px 8px 0; background: #8eb0c2; }
.art-power > span { position: relative; z-index: 2; width: 140px; height: 120px; padding: 25px; color: white; border: 2px solid #7198ad; background: #24475d; box-shadow: 15px 18px 30px rgba(0,0,0,.3); font-size: 33px; font-weight: 800; }.art-power small { display: block; font-size: 11px; letter-spacing: .1em; }
.art-power > i { position: relative; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; margin: 5px; border: 1px solid #a7c4d3; border-radius: 50%; transform: translate(-39px, 32px); font-style: normal; }
.art-relay > span { position: absolute; z-index: 2; width: 130px; height: 125px; padding: 20px; color: #ffcf57; border: 2px solid #899baa; background: #344b5b; box-shadow: 15px 18px 30px rgba(0,0,0,.3); font-size: 14px; font-weight: 800; }
.art-relay > i { position: relative; z-index: 3; width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #20d47c; transform: translate(32px, -20px); }
.art-switch > span { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 185px; padding: 24px 16px; border: 2px solid #7299af; border-radius: 4px; background: #18394e; box-shadow: 15px 18px 30px rgba(0,0,0,.3); }
.art-switch i { width: 29px; height: 23px; border: 2px solid #6e9cb8; background: #071b2c; }.art-switch i::before { content: ""; display: block; width: 4px; height: 4px; margin: -10px auto 0; border-radius: 50%; background: #20d47c; box-shadow: 0 0 6px #20d47c; }
.art-contactor > span { position: absolute; z-index: 2; display: flex; gap: 8px; width: 130px; height: 135px; padding: 30px 16px; border: 2px solid #87a2b2; background: #314b5d; box-shadow: 15px 18px 30px rgba(0,0,0,.3); }
.art-contactor i { width: 25px; height: 58px; border: 2px solid #90adbd; background: #102a3c; }.art-contactor b { position: relative; z-index: 3; color: #a9c2d1; font-size: 10px; transform: translate(28px, -45px); }
.generic-art{position:relative;z-index:2;font-size:46px;font-weight:800}.product-photo img{position:absolute;z-index:2;width:100%;height:100%;object-fit:contain;padding:15px;background:white}
.drawer-overlay{position:fixed;z-index:100;inset:0;background:rgba(2,14,27,.65)}body.cart-open{overflow:hidden}.cart-drawer{position:fixed;z-index:101;inset:0 0 0 auto;width:min(430px,100%);display:flex;flex-direction:column;color:var(--ink);background:white;box-shadow:-25px 0 70px rgba(0,0,0,.25);transform:translateX(105%);transition:transform .25s}.cart-drawer.open{transform:translateX(0)}
.cart-title{display:flex;align-items:center;justify-content:space-between;padding:25px;border-bottom:1px solid var(--line)}.cart-title small,.checkout-title small{color:#087ed8;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.cart-title h2,.checkout-title h2{margin:2px 0 0;font-size:25px}.cart-title button,.checkout-title button{color:#6f8190;border:0;background:none;font-size:29px}
.cart-items{overflow:auto;flex:1;padding:0 23px}.cart-item{display:grid;grid-template-columns:65px 1fr;gap:13px;padding:19px 0;border-bottom:1px solid var(--line)}.cart-item-art{display:grid;place-items:center;height:65px;color:#55c4ff;background:#082d4d;font-size:10px;font-weight:800}.cart-item-art img{width:100%;height:100%;object-fit:cover}.cart-item>div{display:flex;flex-direction:column}.cart-item strong{font-size:13px}.cart-item span{color:#087ed8;font-size:12px;font-weight:750}
.quantity{display:flex;align-items:center;gap:7px;margin-top:7px}.quantity button{width:25px;height:25px;border:1px solid #cbd7e0;background:white}.quantity b{min-width:15px;text-align:center;font-size:11px}.quantity .remove{width:auto;margin-left:auto;color:#a44c4c;border:0;background:none;font-size:9px}
.cart-empty{margin:auto;padding:35px;text-align:center}.cart-empty>span{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;color:#138edc;border:1px solid #a9d9f7;border-radius:50%;font-size:25px}.cart-empty strong{display:block}.cart-empty p{margin:5px 0;color:var(--muted);font-size:12px}
.cart-summary{padding:22px 25px;border-top:1px solid var(--line);background:#f7f9fb}.cart-summary>div{display:flex;justify-content:space-between}.cart-summary>div strong{font-size:20px}.cart-summary>small{display:block;margin:4px 0 15px;color:#728492;font-size:10px}.cart-summary>button{width:100%;height:46px;color:white;border:0;background:#087ed8;font-weight:750}
.checkout-dialog{width:min(700px,calc(100% - 24px));max-height:92vh;padding:0;border:0;box-shadow:0 30px 90px rgba(0,0,0,.4)}.checkout-dialog::backdrop{background:rgba(2,14,27,.75)}#checkout-form{padding:28px}.checkout-title{display:flex;justify-content:space-between;align-items:center}#checkout-form>p{margin:7px 0 20px;color:var(--muted);font-size:12px}.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.checkout-grid .wide{grid-column:1/-1}.checkout-grid label{color:#43596b;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.checkout-grid input{width:100%;height:42px;margin-top:5px;padding:0 10px;border:1px solid #ccd8e2;outline:none;font-size:13px}.checkout-grid input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,145,243,.1)}.checkout-total{display:flex;justify-content:space-between;margin-top:19px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.checkout-total strong{font-size:19px}.checkout-submit{width:100%;height:47px;margin-top:15px;color:white;border:0;background:#087ed8;font-weight:750}.checkout-submit span{float:right}.checkout-submit:disabled{opacity:.65}.checkout-message{min-height:18px!important;margin:8px 0 0!important;color:#b24848!important}.checkout-safe{display:block;color:#7a8b98;font-size:9px;text-align:center}
.store-contact { padding: 40px 0; color: white; background: #07243f; }
.store-contact .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.store-contact p { margin: 0; font-size: 20px; font-weight: 700; }.store-contact a { color: var(--blue-light); font-size: 14px; font-weight: 750; }
footer { padding: 25px 0; color: #879bad; background: #020d19; font-size: 11px; }
footer .container { display: flex; justify-content: space-between; }

@media (max-width: 800px) {
  .store-header nav > a:first-child { display: none; }
  .store-hero-inner { grid-template-columns: 1fr; min-height: auto; padding-top: 135px; }
  .store-hero { min-height: auto; }.store-visual { min-height: 330px; width: min(400px, 100%); margin-inline: auto; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .products-heading { grid-template-columns: 1fr; gap: 20px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid article:nth-child(odd) { border-left: 0; }.category-grid article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .catalog-tools { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }.filters { justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .container { width: calc(100% - 30px); }
  .brand small { display: none; }.brand strong { font-size: 25px; }
  .contact-button { display:none }.store-header nav{gap:12px}
  .store-hero h1 { font-size: 43px; }
  .category-grid { grid-template-columns: 1fr; }.category-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .product-grid { grid-template-columns: 1fr; }
  .checkout-grid{grid-template-columns:1fr}.checkout-grid .wide{grid-column:auto}#checkout-form{padding:22px 17px}
  .store-contact .container, footer .container { flex-direction: column; align-items: flex-start; }
}