/* v3: visual refinement – consistent charcoal, cream, red and golden yellow */
:root{
 --navy:#191b1e;--navy2:#22252a;--blue:#b9272e;--yellow:#f6c84c;--ink:#1b1b1e;
 --muted:#646a71;--border:#e7e7e7;--pale:#f7f7f6;--shadow:0 12px 32px rgba(16,18,20,.075);
}
html{background:#fff}
body{background:#fff;color:#222426}
.shell{width:min(1200px,calc(100% - 52px))}
.demo-strip{background:#17191c;color:#eaeaea;min-height:32px}
.demo-bullet{background:#f4c451}
.site-header{background:#fff;box-shadow:0 2px 18px rgba(0,0,0,.04);border-bottom:1px solid #ededed}
.header-wrap{min-height:78px;gap:19px}
.brand{gap:11px}
.brand-mark{background:#bc2832;box-shadow:inset -6px -6px rgba(85,0,0,.13);border-radius:11px;font-size:18px;width:45px;height:45px}
.brand-mark span{color:#ffd351}
.brand-word{line-height:1.05;letter-spacing:.015em;font-size:13px;max-width:none;display:block}
.brand-word>span.brand-main{display:block;color:#171a1e;font-weight:850;font-size:12px;letter-spacing:.025em}
.brand-word>span.brand-location{display:block;color:#b42730;font-weight:950;font-size:14px;letter-spacing:.01em;margin-top:2px;white-space:nowrap}
.brand-word small{font-size:8px;letter-spacing:.17em;color:#77787c;font-weight:750;margin-top:6px}
.nav-main{gap:21px}
.nav-main a{color:#51555a;font-weight:740;font-size:12px}
.nav-main a:hover,.nav-main a.current{color:#b12430}
.lang-switch{background:#f2f2f2;border:1px solid #ebebeb;border-radius:30px}
.lang-switch button{color:#565b63;font-size:10px}
.lang-switch button.active{background:#242527;color:#fff;box-shadow:none}
.cart-trigger{background:#1f2124;color:white;border-color:#1f2124;border-radius:22px;padding:11px 15px}
.cart-outline{color:#f6c84c}
.cart-trigger b{background:#f6c84c;color:#202020}
.mobile-menu{background:#fff;color:#27272a;border-color:#dedede}
/* Banner mimics reference image's wide, image-backed carousel composition. All headline copy is INSIDE. */
.hero{width:min(1480px,calc(100% - 36px));margin:20px auto 0;position:relative;border-radius:23px;isolation:isolate;overflow:hidden;
 background:#191a1d;box-shadow:0 18px 35px rgba(18,20,22,.1)}
.hero::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:
 linear-gradient(90deg,rgba(9,11,15,.98) 0%,rgba(9,11,15,.95) 29%,rgba(9,11,15,.83) 43%,rgba(9,11,15,.30) 75%,rgba(9,11,15,.06) 100%),
 url('assets/software-showcase.jpg') right 28% / cover no-repeat;
}
.hero::after{content:"";position:absolute;z-index:0;bottom:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#c62b37 0%,#c62b37 23%,#f2c94d 23%,#f2c94d 53%,transparent 84%)}
.hero-glow,.hero-visual{display:none!important}
.hero-grid{display:flex;align-items:center;min-height:478px;width:100%;padding:62px clamp(24px,5.5vw,82px) 60px;position:relative;z-index:1;gap:0}
.hero-copy{max-width:560px}
.eyebrow{font-size:10px;color:#f7e2ae;background:rgba(255,255,255,.09);border:1px solid rgba(244,213,147,.22);padding:9px 13px;letter-spacing:.10em}
.eyebrow-dot{background:#e33b46}
.hero h1{font-size:clamp(42px,4.5vw,66px);max-width:600px;margin:23px 0 16px;letter-spacing:-.055em;line-height:1.08;color:white;font-weight:850;text-shadow:0 3px 15px rgba(0,0,0,.18)}
.hero h1 em{color:#ffd150;font-style:normal}
.hero-sub{color:#e0e0e0;max-width:490px;font-size:15px;line-height:1.75;margin-bottom:27px}
.btn{border-radius:11px}
.btn-yellow{background:#f4c94d;color:#211b12}
.btn-outline{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-dark{background:#222327;color:#fff}
.btn-soft{background:#fff1ee;color:#b52531}
.hero-perks{gap:12px 20px;margin-top:24px;color:#f0eeee;font-size:11px}
/* Clean, monochrome lower sections with just the brand accent colors */
.trustbar{background:#fff;border-bottom:1px solid #eeeeee}
.trust-icon{background:#fef3d7;color:#a8282e}
.trustbar-grid>div{border-color:#ececec}
.section-categories,.feature-section{background:#fff}
.products-home{background:#f7f7f6}
.mini-kicker{color:#b32731}
.text-link{color:#a8212c}
.section-heading p,.feature-left p,.about-grid p{color:#676a6e}
.category-card{background:#fff;border:1px solid #eaeaea;border-radius:16px}
.category-card:hover{border-color:#d4c4b9;box-shadow:0 10px 25px #0000000b}
.category-art.art-blue,.category-art.art-green,.category-art.art-purple,.category-art.art-orange,.category-art.art-pink,.category-art.art-sky{background:#faf1db;color:#a52832}
.category-art{border-radius:11px}
.category-card i{color:#b62b36}
.product-card{border:1px solid #e9e9e9;background:white}
.product-art.os,.product-art.design,.product-art.security,.product-art.business,.product-art.education,.product-art.office{background:linear-gradient(135deg,#f2f2f1,#eae9e6)}
.product-symbol,.design .product-symbol,.security .product-symbol,.business .product-symbol,.education .product-symbol,.office .product-symbol{color:#b62832;background:#fff;box-shadow:0 14px 26px #17171712}
.product-content h3{color:#232528}
.feature-left h2 em{color:#c02a35}
.page-banner{background:linear-gradient(110deg,#191b1e,#303033);border-bottom:4px solid #ecc54e}
.page-banner .mini-kicker{color:#f0c84b}
.page-banner p{color:#d0d0d0}
.banner-deco{color:#f6c84c}
.about-graphic{background:linear-gradient(125deg,#222326,#3b2227)}
.about-badge{color:#f5ce52;border-color:#f5ce52}
.contact-panel{background:linear-gradient(115deg,#191b1e,#322b2b);border-radius:20px}
.contact-panel .mini-kicker{color:#f5cd50}
.contact-info{border-color:#6b6461}
.contact-info small{color:#f6c84c}
.site-footer{background:#1a1b1e}
.footer-brand{color:#f5cd50}
.footer-demo-link{color:#f7ca4d}
.cart-mini-art{background:#fff2e9;color:#ae2c32}
.toast{background:#252525}
/* responsive */
@media(max-width:1060px){.header-wrap{gap:12px}.nav-main{gap:14px}.nav-main a{font-size:11px}.brand-word>span.brand-main{font-size:11px}.brand-word>span.brand-location{font-size:12px}.header-actions{gap:8px}}
@media(max-width:860px){.nav-main.open{background:#202124;box-shadow:0 12px 28px #0002}.nav-main.open a{color:#fff}.nav-main.open a.current{color:#f5c84c}.hero{width:calc(100% - 26px);margin-top:13px}.hero::before{background:linear-gradient(90deg,rgba(10,11,15,.97) 0%,rgba(10,11,15,.87) 53%,rgba(10,11,15,.36) 100%),url('assets/software-showcase.jpg') 60% 32% / cover no-repeat}.hero-grid{min-height:460px;padding:56px 40px}.hero-copy{max-width:525px}.hero h1{font-size:clamp(38px,6vw,52px)}}
@media(max-width:620px){
 .shell{width:calc(100% - 30px)}
 .header-wrap{min-height:72px;gap:5px}
 .brand{gap:7px;min-width:0}
 .brand-mark{height:37px;width:37px;flex-shrink:0;font-size:15px}
 .brand-word{max-width:160px}
 .brand-word>span.brand-main{font-size:9px;letter-spacing:0}
 .brand-word>span.brand-location{font-size:10px;letter-spacing:-.015em;white-space:nowrap}
 .brand-word small{font-size:7px;letter-spacing:.12em;margin-top:4px}
 .header-actions{gap:4px}
 .lang-switch{padding:2px}
 .lang-switch button{padding:7px 6px;font-size:9px}
 .cart-trigger{padding:8px;border-radius:12px}
 .cart-trigger [data-i18n="cartShort"]{display:none}
 .cart-trigger b{font-size:9px;padding:2px 5px}
 .mobile-menu{padding:6px 8px}
 .hero{width:calc(100% - 20px);border-radius:17px;margin-top:10px}
 .hero::before{background:linear-gradient(180deg,rgba(11,12,15,.97) 0%,rgba(11,12,15,.96) 56%,rgba(11,12,15,.90) 100%),url('assets/software-showcase.jpg') 64% 34% / cover no-repeat}
 .hero-grid{min-height:485px;padding:43px 24px 48px;align-items:flex-start}
 .hero h1{font-size:clamp(36px,9vw,43px);margin:19px 0 15px;letter-spacing:-.045em;line-height:1.10}
 .eyebrow{font-size:8px;letter-spacing:.06em;padding:8px 11px}
 .hero-sub{font-size:13px;line-height:1.65;margin-bottom:22px}
 .hero-buttons{gap:9px}
 .hero-buttons .btn{padding:13px 14px;font-size:11px;gap:9px}
 .hero-perks{margin-top:22px;font-size:10px;gap:8px 14px}
 .trustbar-grid>div{padding:14px 7px}
}
@media(max-width:360px){.brand-word>span.brand-location{font-size:9px}.header-actions{gap:2px}.lang-switch button{padding:6px 5px}.hero h1{font-size:34px}.hero-grid{min-height:520px}}