/* ===================================================================== Site stylesheet — brand colours come from CSS variables set in ===================================================================== */ :root{ --text:#1b2333;--muted:#5f6b7a;--line:#e6e9ef;--bg:#ffffff;--bg-light:#f5f7fa;--bg-soft:#fbfcfd; --wa:#25D366;--wa-dark:#1da851;--ok:#16a34a;--err:#dc2626; --shadow:0 8px 30px -14px rgba(11,42,91,.22);--shadow-lg:0 20px 50px -20px rgba(11,42,91,.35); --radius:14px;--radius-sm:8px;--container:1280px;--gutter:20px;--header-h:76px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font-b);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden} img,picture,svg,video{max-width:100%;display:block} img{height:auto} a{color:var(--primary);text-decoration:none} a:hover{color:var(--secondary)} h1,h2,h3,h4,h5,h6,.h1,.h4,.h5{font-family:var(--font-h);line-height:1.2;margin:0 0 .5em;color:var(--primary);font-weight:800;letter-spacing:-.01em} h1,.h1{font-size:clamp(30px,4.2vw,50px)} h2{font-size:clamp(24px,3vw,34px)} h3{font-size:20px} h4,.h4{font-size:18px} .h5{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;cursor:pointer;background:none;border:0;color:inherit} input,select,textarea{font:inherit;color:inherit} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .container-narrow{width:100%;max-width:860px;margin:0 auto;padding:0 var(--gutter)} .section{padding:64px 0} .section.bg-light{background:var(--bg-light)} .section.bg-primary{background:var(--primary);color:#fff} .section.bg-dark{background:#0d1526;color:#fff} .section.bg-primary h2,.section.bg-primary h3,.section.bg-dark h2,.section.bg-dark h3,.section.bg-primary .sec-sub,.section.bg-dark .sec-sub{color:#fff} .center{text-align:center} .mt{margin-top:24px}.mt-lg{margin-top:48px} .muted{color:var(--muted)} .sr,.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip:focus{left:8px;top:8px;width:auto;height:auto;background:var(--accent);color:#000;padding:8px 12px;z-index:9999;border-radius:6px} .ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em} .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px} .frame{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative} .frame img{width:100%;height:auto;object-fit:contain} .frame.portrait img{aspect-ratio:4/5;object-fit:cover} .badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--badge,var(--secondary));color:#fff;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.15)} .badge[style*="#FFC600"],.badge[style*="#ffc600"]{color:#1b2333} .ph{display:grid;place-items:center;height:100%;min-height:160px;color:#c3cad6} .ph .ic{width:48px;height:48px} .eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);margin-bottom:10px} .eyebrow.light{color:var(--accent)} .sec-head{margin-bottom:36px} .sec-head.center{text-align:center;max-width:760px;margin-left:auto;margin-right:auto} .sec-head.left{text-align:left} .sec-head.between{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .sec-title{position:relative;margin-bottom:12px} .sec-head.center .sec-title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--secondary);margin:14px auto 0} .sec-head.left .sec-title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--secondary);margin:14px 0 0} .sec-head.between .sec-title{margin-bottom:4px} .sec-sub{color:var(--muted);font-size:17px;margin:0} .prose{font-size:16.5px;line-height:1.75} .prose p{margin-bottom:1.1em} .prose h2,.prose h3,.prose h4{margin-top:1.4em} .prose h2{font-size:26px}.prose h3{font-size:21px}.prose h4{font-size:17px} .prose ul{padding-left:0;margin:0 0 1.2em} .prose ul li{position:relative;padding-left:26px;margin-bottom:8px} .prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--secondary)} .prose ol{padding-left:22px;list-style:decimal;margin-bottom:1.2em} .prose ol li{margin-bottom:8px} .prose a{text-decoration:underline;text-underline-offset:3px} .prose table{width:100%;border-collapse:collapse;margin:1em 0} .prose td,.prose th{border:1px solid var(--line);padding:8px 12px;text-align:left} .prose img{border-radius:var(--radius-sm)} .prose blockquote{margin:1.2em 0;padding:14px 20px;border-left:4px solid var(--accent);background:var(--bg-light);border-radius:0 8px 8px 0} .lead{font-size:18px;color:var(--muted)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--radius-btn);font-weight:700;font-size:15px;line-height:1.2;border:2px solid transparent;transition:.2s;white-space:nowrap;cursor:pointer} .btn .ic{width:18px;height:18px} .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)} .btn-primary:hover{background:var(--secondary);border-color:var(--secondary);color:#fff;transform:translateY(-1px)} .btn-accent{background:var(--accent);color:#1b2333;border-color:var(--accent)} .btn-accent:hover{background:#ffd633;border-color:#ffd633;color:#000;transform:translateY(-1px)} .btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-outline:hover{background:var(--primary);color:#fff} .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px)} .btn-ghost:hover{background:#fff;color:var(--primary);border-color:#fff} .btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)} .btn-wa:hover{background:var(--wa-dark);border-color:var(--wa-dark);color:#fff} .btn-call{background:var(--primary);color:#fff;border-color:var(--primary)} .btn-call:hover{background:#0a1e42;border-color:#0a1e42;color:#fff} .btn-sm{padding:9px 14px;font-size:13.5px} .btn-block{width:100%} .more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--secondary);font-size:14.5px} .more .ic{transition:.2s} .more:hover .ic{transform:translateX(3px)} .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--text);transition:.2s} .chip:hover,.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)} .icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bg-light);color:var(--primary);transition:.2s} .icon-btn:hover{background:var(--primary);color:#fff} .icon-btn .ic{width:22px;height:22px} /* ---------- announcement + topbar ---------- */ .announce{background:var(--accent);color:#1b2333;font-size:14px;font-weight:600;text-align:center;padding:8px 0} .announce a{color:inherit;display:inline-flex;align-items:center;gap:6px} .topbar{background:var(--primary);color:#fff;font-size:13px} .topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap} .topbar a{color:#fff;display:inline-flex;align-items:center;gap:6px;opacity:.92} .topbar a:hover{color:var(--accent);opacity:1} .topbar-left,.topbar-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .topbar .tag{opacity:.75;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px} .topbar .hours{display:inline-flex;align-items:center;gap:6px;opacity:.85} .topbar .soc{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);display:inline-grid;place-items:center} .topbar .soc svg{width:14px;height:14px;fill:#fff} .lang-switch{position:relative} .lang-switch>button{display:inline-flex;align-items:center;gap:5px;color:#fff;font-weight:600;font-size:12.5px;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.1)} .lang-switch ul{position:absolute;right:0;top:calc(100% + 6px);background:#fff;color:var(--text);border-radius:8px;box-shadow:var(--shadow-lg);min-width:140px;padding:6px;display:none;z-index:50} .lang-switch.open ul{display:block} .lang-switch ul a{display:block;color:var(--text);padding:8px 10px;border-radius:6px;font-size:14px} .lang-switch ul a:hover,.lang-switch ul a.active{background:var(--bg-light);color:var(--primary)} /* ---------- header ---------- */ .site-header{background:#fff;border-bottom:1px solid var(--line);z-index:100;position:relative} .site-header.sticky{position:sticky;top:0} .site-header.scrolled{box-shadow:0 8px 24px -14px rgba(11,42,91,.35)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:10px} .brand-logo{height:var(--logo-h);width:auto;max-width:240px;object-fit:contain} .brand-text{font-family:var(--font-h);font-weight:800;font-size:22px;color:var(--primary);display:inline-flex;align-items:center;gap:10px;letter-spacing:-.01em} .brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--primary);color:#fff;font-size:20px} .main-nav>ul{display:flex;align-items:center;gap:4px} .main-nav>ul>li{position:relative} .main-nav>ul>li>a{display:inline-flex;align-items:center;gap:4px;padding:10px 12px;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:#3a4657;border-radius:8px;transition:.2s} .main-nav>ul>li>a .ic{width:14px;height:14px;transition:.2s} .main-nav>ul>li:hover>a,.main-nav>ul>li.active>a{color:var(--secondary);background:var(--bg-light)} .main-nav>ul>li:hover>a .ic{transform:rotate(180deg)} .main-nav .sub{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid var(--line);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:60} .main-nav li:hover>.sub,.main-nav li:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)} .main-nav .sub a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text)} .main-nav .sub a:hover{background:var(--bg-light);color:var(--secondary)} .header-actions{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;width:44px;height:44px;border-radius:10px;background:var(--primary);color:#fff;place-items:center} .nav-toggle .ic{width:24px;height:24px} .header-centered .header-inner{flex-wrap:wrap;justify-content:center;padding:10px 0} .header-centered .main-nav{order:3;width:100%;display:flex;justify-content:center} /* mobile off-canvas */ .mobile-nav{position:fixed;top:0;left:0;bottom:0;width:min(86vw,360px);background:#fff;z-index:1000;transform:translateX(-105%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow-y:auto} .mobile-nav.open{transform:translateX(0)} .nav-backdrop{position:fixed;inset:0;background:rgba(10,20,40,.55);z-index:999;opacity:0;visibility:hidden;transition:.3s} .nav-backdrop.show{opacity:1;visibility:visible} .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)} .mobile-nav-head .brand-logo{height:44px} .mobile-menu{padding:8px 0;flex:1} .mobile-menu>li{border-bottom:1px solid var(--line)} .mobile-menu .mrow{display:flex;align-items:center} .mobile-menu .mrow>a{flex:1;display:block;padding:14px 18px;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.04em;color:var(--text)} .mobile-menu .sub-toggle{width:52px;height:52px;display:grid;place-items:center;color:var(--primary);border-left:1px solid var(--line)} .mobile-menu .sub-toggle .ic{width:20px;height:20px;transition:.2s} .mobile-menu li.open .sub-toggle .ic{transform:rotate(180deg)} .mobile-menu .sub{display:none;background:var(--bg-light);padding:6px 0} .mobile-menu li.open .sub{display:block} .mobile-menu .sub a{display:block;padding:10px 18px 10px 30px;font-size:14px;font-weight:600;color:var(--text)} .mobile-nav-foot{padding:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px} .mobile-nav-foot .btn{width:100%} .mobile-lang{display:flex;gap:8px;flex-wrap:wrap} .mobile-lang a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px} .mobile-lang a.active{background:var(--primary);color:#fff;border-color:var(--primary)} body.nav-open{overflow:hidden} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--primary);color:#fff} .hero-track{position:relative} .hero-slide{display:none;position:relative;min-height:520px} .hero-slide.active{display:block;animation:fadeIn .6s ease} .hero-tall .hero-slide{min-height:640px} .hero-short .hero-slide{min-height:400px} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .hero-split{background:radial-gradient(1200px 500px at 85% 20%,rgba(255,198,0,.16),transparent 60%),linear-gradient(120deg,#08193a 0%,var(--primary) 55%,#12356f 100%)} .hero-split::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent)} .hero-split .hero-content{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:inherit;padding-top:56px;padding-bottom:56px;position:relative;z-index:1} .hero-text h1,.hero-text .h1{color:#fff;margin-bottom:16px;text-wrap:balance} .hero-text p{font-size:17.5px;color:rgba(255,255,255,.85);max-width:56ch;margin-bottom:26px} .hero-btns{display:flex;gap:12px;flex-wrap:wrap} .hero-btns.center{justify-content:center} .hero-media{display:flex;justify-content:center} .hero-media-inner{background:#fff;border-radius:22px;padding:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);width:100%;max-width:560px;position:relative} .hero-media-inner::after{content:"";position:absolute;inset:-14px;border-radius:30px;border:2px dashed rgba(255,198,0,.35);pointer-events:none} .hero-media-inner img{width:100%;height:340px;object-fit:contain} .hero-cover .hero-slide{display:none;min-height:560px} .hero-cover .hero-slide.active{display:flex;align-items:center} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover} .hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,20,48,.9) 0%,rgba(6,20,48,.65) 55%,rgba(6,20,48,.25) 100%)} .hero-cover .hero-content{position:relative;z-index:1;padding:70px var(--gutter)} .hero-cover .hero-text{max-width:640px} .hero-slide.align-center .hero-text{margin:0 auto;text-align:center} .hero-slide.align-center .hero-btns{justify-content:center} .hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;z-index:5;transition:.2s;backdrop-filter:blur(4px)} .hero-nav:hover{background:var(--accent);color:#1b2333} .hero-nav.prev{left:16px}.hero-nav.next{right:16px} .hero-nav .ic{width:22px;height:22px} .hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5} .hero-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);transition:.2s} .hero-dots button.active{background:var(--accent);width:28px;border-radius:6px} /* ---------- ticker ---------- */ .ticker{background:var(--bg-light);border-bottom:1px solid var(--line);overflow:hidden;padding:12px 0} .ticker-track{display:flex;width:max-content;animation:ticker 60s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .ticker-row{display:flex;gap:8px;padding-right:8px} .ticker-row a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text)} .ticker-row a .ic{color:var(--accent);fill:var(--accent);width:14px;height:14px} .ticker-row a:hover{border-color:var(--primary);color:var(--primary)} @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- features ---------- */ .features-strip{padding:34px 0} .features-grid{display:grid;gap:18px} .features-grid.cols-2{grid-template-columns:repeat(2,1fr)} .features-grid.cols-3{grid-template-columns:repeat(3,1fr)} .features-grid.cols-4{grid-template-columns:repeat(4,1fr)} .features-grid.cols-5{grid-template-columns:repeat(5,1fr)} .features-grid.cols-6{grid-template-columns:repeat(6,1fr)} .feature{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);transition:.25s} .feature:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:transparent} .feature-icon{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#1c4a9c);color:#fff;display:grid;place-items:center;flex:none} .feature-icon .ic{width:24px;height:24px} .feature h3{font-size:16px;margin:2px 0 4px} .feature p{font-size:14px;color:var(--muted);margin:0} .features-cards .feature{flex-direction:column;text-align:center;align-items:center;padding:28px 20px} .features-pills .feature{border-radius:999px;padding:8px 16px 8px 8px;align-items:center} .features-pills .feature-icon{width:38px;height:38px;border-radius:50%} .features-pills .feature h3{margin:0;font-size:14px} .features-pills .feature p{display:none} .bg-primary .feature,.bg-dark .feature{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff} .bg-primary .feature p,.bg-dark .feature p,.bg-primary .feature h3,.bg-dark .feature h3{color:#fff} .bg-primary .feature-icon,.bg-dark .feature-icon{background:var(--accent);color:#1b2333} /* ---------- categories carousel ---------- */ .cats-carousel{position:relative;display:flex;align-items:center;gap:10px} .cats-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 4px;flex:1;scroll-behavior:smooth} .cats-track::-webkit-scrollbar{display:none} .car-nav{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--primary);display:grid;place-items:center;flex:none;box-shadow:var(--shadow);transition:.2s} .car-nav:hover{background:var(--primary);color:#fff} .cat-circle{scroll-snap-align:start;flex:none;width:176px;text-align:center;color:var(--text)} .cat-circle .cat-thumb{display:grid;place-items:center;width:160px;height:160px;margin:0 auto 12px;border-radius:50%;background:#fff;border:3px solid var(--line);overflow:hidden;padding:14px;transition:.3s;box-shadow:var(--shadow)} .cat-circle .cat-thumb img{width:100%;height:100%;object-fit:contain;transition:.4s} .cat-circle:hover .cat-thumb{border-color:var(--secondary);transform:translateY(-4px)} .cat-circle:hover .cat-thumb img{transform:scale(1.06)} .cat-circle .cat-thumb .ic{width:48px;height:48px;color:var(--primary)} .cat-name{display:block;font-weight:700;font-size:15px;line-height:1.3} .cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px} .cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);transition:.25s} .cat-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:transparent} .cat-card .cat-thumb{width:120px;height:120px;border-radius:50%;background:var(--bg-light);display:grid;place-items:center;overflow:hidden;padding:12px;margin-bottom:12px} .cat-card .cat-thumb img{width:100%;height:100%;object-fit:contain} .cat-card .cat-thumb .ic{width:40px;height:40px;color:var(--primary)} .cat-count{font-size:12.5px;color:var(--muted);margin-top:4px} /* ---------- product cards ---------- */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.3s;position:relative} .pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent} .pcard-media{display:block;position:relative;background:var(--bg-soft);height:230px;padding:18px;overflow:hidden} .pcard-media img{width:100%;height:100%;object-fit:contain;transition:.5s;mix-blend-mode:multiply} .pcard:hover .pcard-media img{transform:scale(1.05)} .pcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1} .pcard-cat{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);margin-bottom:6px} .pcard-title{font-size:16.5px;margin:0 0 10px;line-height:1.3} .pcard-title a{color:var(--primary)} .pcard-title a:hover{color:var(--secondary)} .pcard-specs{margin:0 0 14px;display:flex;flex-direction:column;gap:5px} .pcard-specs li{font-size:13.5px;color:var(--muted);display:flex;gap:6px;align-items:flex-start;line-height:1.4} .pcard-specs .ic{color:var(--ok);width:15px;height:15px;margin-top:3px} .pcard-actions{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px} .pcard-actions .btn{padding:9px 8px;font-size:13px} .cat-block{margin-bottom:56px} .cat-block:last-child{margin-bottom:0} .cat-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap} .cat-block-title{font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;letter-spacing:.02em;margin:0;position:relative;padding-left:16px} .cat-block-title::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;background:var(--secondary)} .cat-block-head .muted{margin:4px 0 0 16px;font-size:14.5px} .cat-filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;position:sticky;top:calc(var(--header-h) + 8px);z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);padding:10px;border-radius:14px} .cat-quicklinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .intro-text{max-width:900px} /* ---------- split (about / text+image) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split.img-right .split-media{order:2} .split-media .frame{padding:18px;background:#fff} .split-media .frame img{max-height:460px;object-fit:contain;width:100%} .split-body .sec-head{margin-bottom:18px} .checklist{display:grid;gap:10px;margin:18px 0 22px} .checklist li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px} .checklist .ic{color:var(--ok);width:20px;height:20px;margin-top:2px} .checklist.light li{color:#fff} .checklist.light .ic{color:var(--accent)} .iconlist{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 22px} .iconlist li{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px;padding:10px 12px;background:var(--bg-light);border-radius:10px} .iconlist .ico{width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;flex:none} .iconlist .ico .ic{width:16px;height:16px} .bg-primary .iconlist li,.bg-dark .iconlist li{background:rgba(255,255,255,.08);color:#fff} .bg-primary .prose,.bg-dark .prose{color:rgba(255,255,255,.88)} .bg-primary .eyebrow,.bg-dark .eyebrow{color:var(--accent)} /* ---------- services ---------- */ .services-grid{display:grid;gap:22px} .services-grid.cols-2{grid-template-columns:repeat(2,1fr)} .services-grid.cols-3{grid-template-columns:repeat(3,1fr)} .services-grid.cols-4{grid-template-columns:repeat(4,1fr)} .service-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;color:var(--text);transition:.3s;position:relative;overflow:hidden} .service-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--secondary),var(--accent));transform:scaleX(0);transform-origin:left;transition:.3s} .service-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent} .service-card:hover::after{transform:scaleX(1)} .service-icon{width:56px;height:56px;border-radius:14px;background:var(--bg-light);color:var(--primary);display:grid;place-items:center;margin-bottom:16px} .service-icon .ic{width:26px;height:26px} .service-img{margin:-26px -26px 16px;height:170px;background:var(--bg-soft);overflow:hidden} .service-img img{width:100%;height:100%;object-fit:cover} .service-card h3{font-size:18px;margin-bottom:8px} .service-card p{color:var(--muted);font-size:14.5px;margin-bottom:12px;flex:1} /* ---------- why ---------- */ .why-wrap{display:grid;gap:40px} .why-wrap.has-img{grid-template-columns:.9fr 1.1fr;align-items:center} .why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} .why-item{display:flex;gap:14px;padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;transition:.25s} .why-item:hover{border-color:var(--secondary);box-shadow:var(--shadow)} .why-icon{width:46px;height:46px;border-radius:12px;background:var(--accent);color:#1b2333;display:grid;place-items:center;flex:none} .why-icon .ic{width:22px;height:22px} .why-item h3{font-size:16px;margin-bottom:4px} .why-item p{font-size:14px;color:var(--muted);margin:0} .bg-light .why-item{background:#fff} /* ---------- stats ---------- */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center} .stat{padding:26px 16px;border-radius:var(--radius);background:var(--bg-light)} .bg-primary .stat,.bg-dark .stat{background:rgba(255,255,255,.08)} .stat-value{display:block;font-family:var(--font-h);font-size:40px;font-weight:800;color:var(--secondary);line-height:1} .bg-primary .stat-value,.bg-dark .stat-value{color:var(--accent)} .stat-label{display:block;margin-top:8px;font-weight:600;color:var(--muted)} .bg-primary .stat-label,.bg-dark .stat-label{color:rgba(255,255,255,.85)} /* ---------- team / founder / testimonials / certs / gallery ---------- */ .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px} .member{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 18px} .member-photo{width:130px;height:130px;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:var(--bg-light);display:grid;place-items:center} .member-photo img{width:100%;height:100%;object-fit:cover} .member-photo .ic{width:48px;height:48px;color:var(--muted)} .member h3{font-size:17px;margin-bottom:2px} .role{display:block;color:var(--secondary);font-size:13.5px;font-weight:700;margin-bottom:8px} .member p{font-size:14px;color:var(--muted)} .member-social{display:flex;justify-content:center;gap:8px} .member-social a{width:32px;height:32px;border-radius:50%;background:var(--bg-light);display:grid;place-items:center} .member-social svg{width:16px;height:16px;fill:var(--primary)} .founder-name{margin-bottom:0} .testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px} .testi{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative} .testi .q{position:absolute;top:18px;right:20px;width:36px;height:36px;color:var(--accent);opacity:.7} .testi p{font-style:italic;color:var(--text)} .testi footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800} .avatar img{width:100%;height:100%;object-fit:cover} .testi footer small{display:block;color:var(--muted);font-size:12.5px} .stars{margin-left:auto;display:flex;gap:2px;color:var(--accent)} .stars .ic{fill:var(--accent);width:16px;height:16px} .certs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px} .cert{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);text-align:center} .cert-img{width:90px;height:90px;display:grid;place-items:center} .cert-img img{max-height:90px;object-fit:contain} .cert-img .ic{width:40px;height:40px;color:var(--secondary)} .cert-title{font-weight:700;font-size:14px} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .gitem{position:relative;display:block;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:1;padding:12px} .gitem img{width:100%;height:100%;object-fit:contain;transition:.4s} .gitem:hover img{transform:scale(1.05)} .gcap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(11,42,91,.85));color:#fff;font-size:13px;font-weight:600;padding:22px 12px 10px;opacity:0;transition:.3s} .gitem:hover .gcap{opacity:1} .logos-row{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;align-items:center} .logos-row img{max-height:56px;width:auto;filter:grayscale(1);opacity:.7;transition:.3s} .logos-row img:hover{filter:none;opacity:1} /* ---------- FAQ ---------- */ .faq-list{display:grid;gap:12px} .faq{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-weight:700;color:var(--primary)} .faq summary::-webkit-details-marker{display:none} .faq summary .ic{transition:.25s;flex:none} .faq[open] summary{color:var(--secondary)} .faq[open] summary .ic{transform:rotate(180deg)} .faq-a{padding:0 20px 18px;color:var(--muted);font-size:15px} .faq-a p:last-child{margin-bottom:0} /* ---------- blog ---------- */ .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.3s} .bcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)} .bcard-media{display:block;height:200px;background:var(--bg-soft);overflow:hidden;padding:12px} .bcard-media img{width:100%;height:100%;object-fit:contain;transition:.4s} .bcard:hover .bcard-media img{transform:scale(1.04)} .bcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .bcard-meta{display:flex;gap:12px;font-size:12.5px;color:var(--muted);margin-bottom:8px} .bcard-meta span{color:var(--secondary);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px} .bcard h3{font-size:17px;line-height:1.35;margin-bottom:8px} .bcard h3 a{color:var(--primary)} .bcard p{font-size:14px;color:var(--muted);flex:1} .blog-layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start} .blog-index .bgrid{grid-template-columns:repeat(2,1fr)} .blog-side{display:grid;gap:22px;position:sticky;top:calc(var(--header-h) + 20px)} .blog-side .card h3{font-size:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block} .linklist{display:grid;gap:6px} .linklist a{display:flex;align-items:center;gap:6px;padding:7px 0;font-weight:600;color:var(--text);border-bottom:1px dashed var(--line);font-size:14.5px} .linklist a .ic{color:var(--secondary);width:14px;height:14px} .linklist a:hover{color:var(--secondary)} .linklist small{color:var(--muted);font-weight:500} .mini-posts{display:grid;gap:12px} .mini-posts a{display:flex;gap:12px;align-items:center;color:var(--text)} .mini-img{width:70px;height:56px;flex:none;border-radius:8px;overflow:hidden;background:var(--bg-light)} .mini-img img{width:100%;height:100%;object-fit:cover} .mini-posts strong{display:block;font-size:14px;line-height:1.35} .mini-posts small{color:var(--muted);font-size:12px} .tags{display:flex;flex-wrap:wrap;gap:8px} .search-form{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .search-form input{flex:1;border:0;padding:12px 14px;outline:none;min-width:0} .search-form button{padding:0 16px;background:var(--primary);color:#fff} .search-form.big{max-width:640px;margin:0 auto} .search-form.big input{padding:16px 18px;font-size:17px} .pagination{display:flex;gap:6px;justify-content:center;margin-top:36px} .pagination a{min-width:40px;height:40px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);font-weight:700} .pagination a.active,.pagination a:hover{background:var(--primary);color:#fff;border-color:var(--primary)} .post-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;color:var(--muted);margin-bottom:20px} .post-meta a,.post-meta span,.post-meta time{display:inline-flex;align-items:center;gap:6px} .post-hero{margin-bottom:28px;padding:16px;background:var(--bg-soft)} .post-hero img{max-height:460px;object-fit:contain} .post-body{font-size:17px} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0} .post-nav a{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;color:var(--text);font-weight:600;font-size:14.5px} .post-nav a.next{justify-content:flex-end;text-align:right} .post-nav small{display:block;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em} .post-nav a:hover{border-color:var(--secondary);color:var(--secondary)} .share{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .share span{font-weight:700;font-size:14px;color:var(--muted)} .share a{width:36px;height:36px;border-radius:50%;background:var(--bg-light);display:grid;place-items:center;transition:.2s} .share a svg{width:17px;height:17px;fill:var(--primary)} .share a:hover{background:var(--primary)} .share a:hover svg{fill:#fff} /* ---------- CTA / inquiry ---------- */ .cta-sec{position:relative;overflow:hidden;color:#fff;padding:56px 0} .cta-primary{background:linear-gradient(115deg,var(--primary),#153f83)} .cta-dark{background:linear-gradient(115deg,#0a1630,#0f2a5f)} .cta-accent{background:var(--accent);color:#1b2333} .cta-accent .sec-head h2,.cta-accent .sec-sub{color:#1b2333} .cta-bg{position:absolute;inset:0;opacity:.14} .cta-bg img{width:100%;height:100%;object-fit:cover} .cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .cta-inner .sec-head{margin-bottom:0} .cta-inner .sec-title{color:#fff} .cta-inner .sec-head.left .sec-title::after{background:var(--accent)} .cta-inner .sec-sub{color:rgba(255,255,255,.85)} .cta-btns{display:flex;gap:12px;flex-wrap:wrap} .cta-primary .btn-primary{background:#fff;color:var(--primary);border-color:#fff} .inquiry-sec{position:relative;overflow:hidden;background:linear-gradient(115deg,#08193a,var(--primary) 60%,#12356f);color:#fff;padding:72px 0} .inquiry-sec .cta-bg{opacity:.12} .inquiry-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .inquiry-text .sec-title{color:#fff;font-size:clamp(28px,3.4vw,42px)} .inquiry-text .sec-head.left .sec-title::after{background:var(--accent)} .inquiry-text .sec-sub{color:rgba(255,255,255,.85);font-size:17px} .inquiry-text .eyebrow{color:var(--accent)} .inquiry-form{color:var(--text)} .brochure-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;background:var(--bg-light);border-radius:var(--radius);padding:36px} .brochure-img img{max-height:280px;object-fit:contain;border-radius:12px;box-shadow:var(--shadow)} .brochure-inner .sec-head{margin-bottom:18px} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start} .cinfo{display:grid;gap:18px} .cinfo-item{display:flex;gap:14px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} .cinfo-icon{width:46px;height:46px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;flex:none} .cinfo-icon.wa{background:var(--wa)} .cinfo-icon .ic{width:22px;height:22px} .cinfo-item h4{margin:0 0 4px;font-size:15px} .cinfo-item p{margin:0;color:var(--muted);font-size:14.5px} .cinfo-item a{font-weight:600} .social{display:flex;gap:8px;flex-wrap:wrap} .social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s} .social a svg{width:17px;height:17px;fill:#fff} .social a:hover{background:var(--accent)} .social a:hover svg{fill:#1b2333} .social.dark a{background:var(--bg-light)} .social.dark a svg{fill:var(--primary)} .map-wrap{margin-top:36px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)} .map-wrap iframe{width:100%;height:380px;border:0;display:block} /* ---------- forms ---------- */ .inq-form{position:relative} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px} .fld{display:flex;flex-direction:column;gap:6px} .fld.full{grid-column:1/-1} .fld label{font-size:13px;font-weight:700;color:var(--muted)} .fld input,.fld select,.fld textarea{width:100%;padding:11px 13px;border:1px solid #d5dbe5;border-radius:var(--radius-sm);background:#fff;outline:none;transition:.2s;font-size:15px} .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(11,42,91,.12)} .fld.err input,.fld.err select,.fld.err textarea{border-color:var(--err)} .fld textarea{resize:vertical;min-height:100px} .inq-form.compact .form-grid{grid-template-columns:1fr 1fr;gap:10px} .inq-form.compact .fld input,.inq-form.compact .fld select,.inq-form.compact .fld textarea{padding:10px 12px;font-size:14px} .inq-form.compact .fld textarea{min-height:70px} .side-form h3{font-size:17px;margin-bottom:12px} .side-form .form-grid{grid-template-columns:1fr} .form-msg,.alert{padding:12px 14px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:14px;display:flex;gap:8px;align-items:flex-start} .form-msg.ok,.alert.ok{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0} .form-msg.err,.alert.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca} .form-msg a{text-decoration:underline} .btn[disabled]{opacity:.65;cursor:progress} /* ---------- page banner ---------- */ .page-banner{position:relative;background:linear-gradient(115deg,#08193a,var(--primary) 60%,#12356f);color:#fff;padding:52px 0 44px;overflow:hidden} .page-banner::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px} .page-banner .banner-bg{position:absolute;inset:0;opacity:.18} .page-banner .banner-bg img{width:100%;height:100%;object-fit:cover} .page-banner .container{position:relative} .page-banner h1{color:#fff;font-size:clamp(28px,3.6vw,42px);margin-bottom:6px} .page-banner p{color:rgba(255,255,255,.8);margin:0;font-size:16.5px} .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;margin-bottom:12px;color:rgba(255,255,255,.7)} .crumbs a{color:rgba(255,255,255,.85)} .crumbs a:hover{color:var(--accent)} .crumbs .cur{color:var(--accent);font-weight:600} /* ---------- category product rows ---------- */ .product-row-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center} .product-row-media .frame{padding:22px;background:var(--bg-soft)} .product-row-media .frame img{max-height:380px;object-fit:contain;width:100%;mix-blend-mode:multiply} .product-row-body h2{font-size:clamp(22px,2.4vw,30px)} .spec-table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden} .spec-table th,.spec-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0} .spec-table th{width:38%;background:var(--bg-light);color:var(--primary);font-weight:700} .row-actions{display:flex;flex-wrap:wrap;gap:10px} .category-intro{padding-bottom:0} .other-cats .sec-title{margin-bottom:28px} .other-cats .sec-title::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--secondary);margin:14px auto 0} /* ---------- product detail ---------- */ .pd-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;margin-bottom:48px} .pd-main{padding:26px;background:var(--bg-soft)} .pd-main img{max-height:460px;width:100%;object-fit:contain;mix-blend-mode:multiply} .pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .pd-thumbs button{width:74px;height:74px;border:2px solid var(--line);border-radius:10px;padding:6px;background:#fff} .pd-thumbs button.active{border-color:var(--secondary)} .pd-thumbs img{width:100%;height:100%;object-fit:contain} .pd-cat{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary)} .pd-title{font-size:clamp(24px,2.8vw,34px);margin:6px 0 10px} .pd-content{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start} .pd-desc h3{font-size:20px;margin-top:8px} .pd-desc .checklist{grid-template-columns:1fr 1fr} .pd-side{display:grid;gap:22px;position:sticky;top:calc(var(--header-h) + 20px)} .side-cats h3{font-size:16px;margin-bottom:10px} /* ---------- footer ---------- */ .site-footer{background:#0b1a36;color:rgba(255,255,255,.82);position:relative;overflow:hidden} .site-footer::before{content:"";position:absolute;top:-120px;left:-120px;width:420px;height:420px;border-radius:50%;background:rgba(215,20,26,.16);filter:blur(80px);pointer-events:none} .site-footer::after{content:"";position:absolute;bottom:-160px;right:-120px;width:520px;height:520px;border-radius:50%;background:rgba(255,198,0,.10);filter:blur(90px);pointer-events:none} .site-footer>.container{position:relative;padding-top:60px;padding-bottom:30px} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px} .footer-col h3{color:#fff;font-size:17px;margin-bottom:16px;padding-bottom:10px;position:relative} .footer-col h3::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;border-radius:2px;background:var(--accent)} .footer-col ul{display:grid;gap:8px} .footer-col ul a{color:rgba(255,255,255,.78);display:inline-flex;align-items:center;gap:6px;font-size:14.5px} .footer-col ul a .ic{width:14px;height:14px;color:var(--accent)} .footer-col ul a:hover{color:#fff;padding-left:3px} .footer-col.about p{font-size:14.5px;line-height:1.7;margin:16px 0} .footer-logo{display:inline-block;background:#fff;padding:8px 14px;border-radius:10px} .footer-logo img{height:52px;width:auto} .footer-col .brand-text{color:#fff} .contact-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px} .contact-list .ic{color:var(--accent);margin-top:3px;flex:none} .contact-list a{color:rgba(255,255,255,.85);font-weight:600} .contact-list a:hover{color:var(--accent)} .footer-related{margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)} .footer-related h3{color:#fff;font-size:15px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em} .related-links{display:flex;flex-wrap:wrap;gap:8px} .related-links a{font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.75)} .related-links a:hover{background:var(--accent);color:#1b2333;border-color:var(--accent)} .footer-bottom{background:#07122a;position:relative;font-size:13px} .footer-bottom .container{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px} .footer-bottom .legal{display:flex;gap:16px;flex-wrap:wrap} .footer-bottom a{color:rgba(255,255,255,.75)} .footer-bottom a:hover{color:var(--accent)} .credit{color:rgba(255,255,255,.6)} .credit a{color:rgba(255,255,255,.85);font-weight:600} .footer-light{background:var(--bg-light);color:var(--text)} .footer-light::before,.footer-light::after{display:none} .footer-light .footer-col h3,.footer-light .footer-col ul a,.footer-light .contact-list a,.footer-light .footer-related h3{color:var(--primary)} .footer-light .footer-col ul a{color:var(--text)} .footer-light .related-links a{color:var(--text);border-color:var(--line)} .footer-light .social a{background:#fff} .footer-light .social a svg{fill:var(--primary)} .footer-light .footer-bottom{background:#e9edf3} .footer-light .footer-bottom a,.footer-light .credit{color:var(--muted)} .footer-light .footer-logo{border:1px solid var(--line)} /* ---------- floating / mobile CTA / to-top ---------- */ .float-btns{position:fixed;bottom:24px;z-index:900;display:flex;flex-direction:column;gap:12px} .float-btns.pos-right{right:22px} .float-btns.pos-left{left:22px} .float-wa,.float-call{display:flex;align-items:center;gap:8px;height:54px;padding:0 18px 0 14px;border-radius:999px;color:#fff;font-weight:700;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);transition:.25s} .float-wa{background:var(--wa)} .float-call{background:var(--primary)} .float-wa:hover,.float-call:hover{transform:translateY(-3px);color:#fff} .float-wa .ic,.float-call .ic{width:26px;height:26px} .float-wa::before{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--wa);opacity:.5;animation:pulse 2s infinite;z-index:-1} .float-wa{position:relative} @keyframes pulse{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.25);opacity:0}} .mobile-cta-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:900;background:#fff;border-top:1px solid var(--line);padding:8px 10px;gap:8px;box-shadow:0 -6px 20px -10px rgba(0,0,0,.25)} .mobile-cta-bar .btn{flex:1;padding:11px 6px;font-size:13px} .to-top{position:fixed;right:22px;bottom:150px;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--primary);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s;z-index:890} .to-top.show{opacity:1;visibility:visible} .to-top:hover{background:var(--primary);color:#fff} /* ---------- quote modal ---------- */ .quote-modal{position:fixed;inset:0;z-index:1100;background:rgba(6,14,32,.6);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)} .quote-modal.open{display:flex;animation:fadeIn .25s ease} .quote-box{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:28px} .quote-box h3{font-size:22px;margin-bottom:16px;padding-right:40px} .quote-close{position:absolute;top:14px;right:14px} /* ---------- misc ---------- */ .error-404 .err-code{font-family:var(--font-h);font-size:clamp(90px,16vw,160px);font-weight:800;line-height:1;color:var(--primary);opacity:.15} .error-404 h1{margin-top:-20px} .linklist.attr a{font-weight:500} .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.ticker-track{animation:none}} /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width:1100px){ .pgrid{grid-template-columns:repeat(3,1fr)} .gallery-grid{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .main-nav>ul>li>a{padding:10px 8px;font-size:12.5px} } @media (max-width:1024px){ :root{--header-h:68px} .main-nav{display:none} .nav-toggle{display:grid} .hide-sm{display:none!important} .split,.inquiry-inner,.contact-grid,.pd-grid,.product-row-inner,.why-wrap.has-img,.brochure-inner{grid-template-columns:1fr} .split.img-right .split-media{order:0} .blog-layout,.pd-content{grid-template-columns:1fr} .blog-side,.pd-side{position:static} .hero-split .hero-content{grid-template-columns:1fr;text-align:center;padding-top:44px;padding-bottom:64px;gap:28px} .hero-text p{margin-left:auto;margin-right:auto} .hero-btns{justify-content:center} .hero-media-inner{max-width:460px} .hero-media-inner img{height:260px} .hero-slide{min-height:0} .features-grid.cols-4,.features-grid.cols-5,.features-grid.cols-6{grid-template-columns:repeat(2,1fr)} .services-grid.cols-3,.services-grid.cols-4{grid-template-columns:repeat(2,1fr)} .bgrid{grid-template-columns:repeat(2,1fr)} .topbar-right .tag,.topbar-right .hours{display:none} } @media (max-width:768px){ .section{padding:48px 0} .pgrid{grid-template-columns:repeat(2,1fr);gap:14px} .pcard-media{height:180px} .pcard-actions{grid-template-columns:1fr} .gallery-grid{grid-template-columns:repeat(2,1fr)} .bgrid,.blog-index .bgrid{grid-template-columns:1fr} .form-grid,.inq-form.compact .form-grid{grid-template-columns:1fr} .iconlist,.pd-desc .checklist{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:28px} .footer-bottom .container{justify-content:center;text-align:center} .float-btns{bottom:78px} .float-wa span,.float-call span{display:none} .float-wa,.float-call{width:52px;height:52px;padding:0;justify-content:center} .mobile-cta-bar{display:flex} body{padding-bottom:62px} .to-top{bottom:150px;right:16px} .cta-inner{flex-direction:column;align-items:flex-start} .cat-filter{position:static;background:none;padding:0} .topbar .container{justify-content:center} .topbar-left a span{font-size:12.5px} .brand-logo{height:44px} .post-nav{grid-template-columns:1fr} .cats-track{gap:14px} .cat-circle{width:130px} .cat-circle .cat-thumb{width:116px;height:116px} .cat-name{font-size:13.5px} .car-nav{display:none} .hero-nav{display:none} .page-banner{padding:36px 0 30px} .features-strip{padding:24px 0} .feature{padding:14px} .feature-icon{width:42px;height:42px} .brochure-inner{padding:22px} } @media (max-width:480px){ .pgrid{grid-template-columns:1fr} .features-grid.cols-2,.features-grid.cols-3,.features-grid.cols-4,.features-grid.cols-5,.features-grid.cols-6{grid-template-columns:1fr} .services-grid.cols-2,.services-grid.cols-3,.services-grid.cols-4{grid-template-columns:1fr} .stats-grid{grid-template-columns:1fr 1fr} .topbar-left{gap:10px} .topbar-left a:nth-child(3){display:none} .hero-media-inner{padding:14px} .hero-media-inner img{height:200px} .cta-btns .btn,.hero-btns .btn{width:100%} } /* ---------- footer newsletter ---------- */ .footer-newsletter{margin-top:40px;padding:26px 28px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center} .footer-newsletter h3{color:#fff;margin-bottom:4px;font-size:18px} .footer-newsletter p{margin:0;font-size:14px;color:rgba(255,255,255,.75)} .nl-row{display:flex;gap:8px} .nl-row input{flex:1;padding:12px 14px;border-radius:var(--radius-btn);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.95);min-width:0} .footer-light .footer-newsletter{background:#fff;border-color:var(--line)} .footer-light .footer-newsletter h3{color:var(--primary)} .footer-light .footer-newsletter p{color:var(--muted)} @media (max-width:768px){.footer-newsletter{grid-template-columns:1fr}}