:root { --ink:#172128; --muted:#68747a; --cream:#f5f3ed; --yellow:#ffd52e; --orange:#f68a22; --line:#dce0dd; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:Roboto,Arial,sans-serif; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; border:0; }
.container { width:min(1180px,calc(100% - 48px)); margin:auto; }.announcement { background:var(--yellow); text-align:center; padding:8px 12px; font-size:12px; font-weight:700; letter-spacing:.25px; }.announcement a { margin-left:14px; text-decoration:underline; }
.site-header { background:#fff; }.header-main { min-height:85px; display:flex; align-items:center; gap:30px; }.brand { display:flex; align-items:center; gap:9px; letter-spacing:.7px; min-width:max-content; }.brand-mark { display:grid; place-items:center; height:39px; width:39px; background:var(--orange); color:#fff; font-size:28px; line-height:1; }.brand strong,.brand small { display:block; font-family:Montserrat,sans-serif; }.brand strong { font-size:15px; font-weight:800; }.brand small { font-size:9px; letter-spacing:2.2px; margin-top:2px; }.main-nav { display:flex; gap:21px; font-size:14px; font-weight:500; }.main-nav a:hover { color:var(--orange); }.search { margin-left:auto; max-width:305px; flex:1; display:flex; border:1px solid #c9cecc; height:38px; }.search input { min-width:0; border:0; outline:0; padding:0 13px; width:100%; font-size:13px; }.search button { width:42px; background:#fff; font-size:25px; color:var(--orange); }.header-actions { display:flex; gap:16px; }.header-actions button { background:none; color:var(--ink); text-align:center; padding:0; }.header-actions span { display:block; font-size:17px; line-height:17px; }.header-actions small { display:block; font-size:10px; margin-top:3px; }.cart-count { color:var(--orange); }.service-bar { border-top:1px solid #edf0ef; background:#fafbfa; color:#697777; font-size:11px; }.service-bar .container { min-height:31px; display:flex; justify-content:space-between; align-items:center; }.service-bar span:first-child { color:#3f8f60; }.menu-toggle { display:none; background:none; font-size:24px; }
.hero { min-height:430px; background:#202c2b; color:#fff; overflow:hidden; position:relative; display:flex; align-items:center; }.hero-copy { position:relative; z-index:2; }.eyebrow { color:var(--orange); font-size:11px; font-weight:700; letter-spacing:1.4px; margin:0 0 13px; }.hero .eyebrow { color:var(--yellow); }.hero h1,.section h2,.promotion h2,.project-banner h2 { font:700 clamp(35px,4vw,59px)/.98 Montserrat,sans-serif; margin:0; letter-spacing:-2.6px; }.hero h1 em,.promotion h2 em { font-style:normal; color:var(--yellow); }.hero-copy > p:not(.eyebrow) { max-width:430px; color:#d6dddd; line-height:1.55; margin:22px 0 28px; }.button { padding:14px 20px; display:inline-flex; gap:28px; align-items:center; text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.5px; }.button span { font-size:21px; line-height:10px; }.button-light { background:var(--yellow); color:var(--ink); }.button-dark { background:var(--ink); color:white; }.hero-products { position:absolute; inset:0 0 0 49%; background:linear-gradient(124deg,#33403d,#111a1a); overflow:hidden; }.hero-products:after { content:""; position:absolute; bottom:-50px; left:-40px; width:120%; height:135px; background:#182323; transform:rotate(-5deg); }.glow { position:absolute; border-radius:50%; filter:blur(8px); background:#ffe99a; opacity:.5; }.glow-one { width:230px; height:230px; right:165px; top:60px; }.glow-two { width:130px; height:130px; left:13%; top:105px; }.lamp { position:absolute; z-index:1; }.lamp i,.lamp b,.lamp em { display:block; position:absolute; }.pendant { height:320px; width:230px; right:21%; top:-15px; }.pendant i { width:4px; height:178px; background:#202525; left:113px; top:0; }.pendant b { width:145px; height:95px; background:#e9e3d4; border-radius:70% 70% 10px 10px; top:174px; left:43px; box-shadow:0 8px 35px 23px #ffed9d; }.floor-lamp { width:110px; height:360px; right:4%; top:65px; }.floor-lamp i { width:104px; height:73px; background:#d6d0c0; border-radius:70% 70% 4px 4px; top:0; }.floor-lamp b { height:215px; width:5px; background:#2c3230; top:73px; left:49px; }.floor-lamp em { height:11px; width:110px; background:#2c3230; border-radius:50%; top:286px; }.bulb { width:80px; height:130px; left:18%; top:176px; }.bulb i { height:80px; width:80px; border-radius:50%; background:#fff5bd; box-shadow:0 0 48px 15px #ffe88e; }.bulb b { width:39px; height:48px; top:73px; left:20px; background:#737b75; border-radius:6px; }
.benefits { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; margin-top:-1px; position:relative; z-index:3; box-shadow:0 8px 23px #17212812; }.benefits article { min-height:91px; display:flex; gap:13px; align-items:center; padding:18px 22px; border-right:1px solid #e5e8e6; }.benefits article:last-child { border:0; }.benefits article>span { font-size:23px; color:var(--orange); }.benefits strong,.benefits small { display:block; }.benefits strong { font:700 13px Montserrat,sans-serif; }.benefits small { color:var(--muted); font-size:11px; margin-top:4px; }
.section { padding:84px 0; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:30px; }.section h2,.promotion h2,.project-banner h2 { font-size:34px; letter-spacing:-1.6px; }.section-heading > a { color:var(--orange); font-size:13px; font-weight:700; }.section-heading > a span { font-size:18px; margin-left:8px; }.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.category-card { min-height:214px; padding:25px; color:#fff; display:flex; flex-direction:column; justify-content:end; background:#344543; overflow:hidden; position:relative; }.category-card:before { content:""; position:absolute; right:-12px; top:10px; color:#fff; opacity:.14; font-size:110px; font-family:Montserrat; }.category-card:hover { transform:translateY(-4px); transition:transform .2s; }.category-home { background:#43534f; }.category-home:before { content:"⌂"; }.category-commercial { background:#e38123; }.category-commercial:before { content:"▤"; }.category-industrial { background:#202a2a; }.category-industrial:before { content:"⚙"; }.category-exterior { background:#698279; }.category-exterior:before { content:"☀"; }.category-icon { font-size:27px; margin-bottom:auto; }.category-card strong { font:700 19px/1.08 Montserrat,sans-serif; position:relative; }.category-card small { font-size:11px; margin-top:13px; position:relative; }
.promotion { background:var(--yellow); overflow:hidden; }.promotion-content { min-height:326px; display:flex; align-items:center; position:relative; }.promotion h2 em { color:var(--orange); }.promotion-content > div:first-child > p:not(.eyebrow) { font-size:15px; max-width:400px; line-height:1.5; }.promo-shape { position:absolute; width:370px; height:370px; right:10%; top:-19px; border:26px solid var(--orange); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; transform:rotate(-11deg); }.promo-shape:before,.promo-shape:after { content:"✦"; position:absolute; color:#fff; font-size:40px; }.promo-shape:before { top:35px; left:40px; }.promo-shape:after { bottom:43px; right:42px; }.promo-shape span { font:800 105px/.7 Montserrat,sans-serif; color:var(--orange); letter-spacing:-9px; }.promo-shape sup { font-size:45px; }.promo-shape small { color:var(--orange); letter-spacing:3px; font-weight:700; margin-top:21px; }.promo-shape i { display:none; }
.products { padding-bottom:100px; }.product-controls { display:flex; gap:8px; }.product-controls button { background:transparent; color:var(--muted); border:1px solid #d1d6d3; padding:8px 13px; font-size:11px; }.product-controls button.active,.product-controls button:hover { background:var(--ink); border-color:var(--ink); color:#fff; }.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; }.product-card { position:relative; background:#fff; padding:14px 14px 17px; }.tag { position:absolute; left:14px; top:14px; z-index:2; background:var(--ink); color:#fff; font-size:9px; padding:5px 7px; font-weight:700; }.tag.sale { background:var(--orange); }.favorite { position:absolute; right:13px; top:10px; z-index:2; background:none; font-size:24px; color:var(--ink); }.product-image { height:191px; background:#f1f2ed; display:grid; place-items:center; margin-bottom:17px; overflow:hidden; }.product-image > div { position:relative; }.product-plafon > div { height:120px; width:120px; border-radius:50%; background:#fffefa; border:8px solid #e4e5df; box-shadow:0 9px 12px #0002; }.product-reflector > div { width:137px; height:93px; background:#2a3335; border:7px solid #566265; border-radius:5px; transform:skew(-5deg); box-shadow:inset 0 0 0 14px #ebebd9,0 14px 12px #0002; }.product-reflector > div:after { content:""; position:absolute; bottom:-42px; left:57px; width:7px; height:40px; background:#343d3e; transform:rotate(20deg); }.product-pendant > div { height:122px; width:113px; border-radius:55% 55% 25px 25px; background:linear-gradient(90deg,#a15815,#eead45,#9c5417); box-shadow:0 10px 15px #0003; }.product-pendant > div:before { content:""; position:absolute; height:56px; width:3px; left:55px; top:-56px; background:#303739; }.product-wall > div { width:70px; height:129px; background:#333e3d; border-radius:36px 36px 12px 12px; box-shadow:0 11px 13px #0002; }.product-wall > div:before { content:""; position:absolute; width:42px; height:73px; left:14px; top:17px; border-radius:50%; background:#fff8bb; box-shadow:0 0 19px #ffde55; }.product-type { color:var(--orange); font-size:9px; font-weight:700; letter-spacing:.75px; margin:0 0 7px; }.product-card h3 { font:600 14px Montserrat,sans-serif; margin:0; }.price { margin:13px 0; font:700 20px Montserrat,sans-serif; }.price small { font:500 10px Roboto; }.add-cart { width:100%; background:var(--cream); padding:10px; color:var(--ink); font-weight:700; font-size:11px; text-align:left; }.add-cart:hover { background:var(--yellow); }.add-cart span { float:right; font-size:17px; line-height:9px; }
.project-banner { background:linear-gradient(90deg,#263634c9,#26363499),url("https://images.unsplash.com/photo-1484101403633-562f891dc89a?auto=format&fit=crop&w=1600&q=80") center/cover; color:#fff; padding:75px 0; }.project-banner .eyebrow { color:var(--yellow); }.project-banner p:not(.eyebrow) { max-width:390px; line-height:1.5; color:#e1e8e5; }.project-banner h2 { font-size:38px; }.project-banner .button { margin-top:8px; }
footer { background:#15201f; color:#fff; }.footer-grid { padding:55px 0 43px; display:grid; grid-template-columns:1.5fr 1fr 1.55fr .8fr; gap:25px; }.footer-brand .brand-mark { background:var(--yellow); color:var(--ink); }.footer-grid>div>strong { display:block; font:700 12px Montserrat,sans-serif; margin-bottom:15px; }.footer-grid>div>a { display:block; font-size:12px; color:#bfc8c5; margin:8px 0; }.socials { display:flex; gap:8px; }.socials a { display:grid; place-items:center; border:1px solid #77817e; height:29px; width:29px; font-weight:700; }.copyright { border-top:1px solid #34413f; color:#9ca7a3; font-size:10px; padding:14px 0; }.chat-button { position:fixed; z-index:8; bottom:20px; right:24px; color:#fff; background:#28a76b; border-radius:30px; padding:12px 16px; box-shadow:0 4px 15px #0003; font-weight:700; }.chat-button span { margin-left:7px; font-size:11px; }.toast { position:fixed; z-index:10; bottom:80px; left:50%; transform:translate(-50%,20px); opacity:0; background:var(--ink); color:#fff; padding:12px 18px; border-radius:3px; font-size:13px; transition:.25s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; height:1px; width:1px; overflow:hidden; clip:rect(0,0,0,0); }.hidden { display:none; }
@media (max-width:850px) { .header-main { flex-wrap:wrap; padding:12px 0; gap:13px; }.menu-toggle { display:block; order:1; }.brand { order:0; }.header-actions { order:2; margin-left:auto; }.main-nav { display:none; order:5; flex-basis:100%; padding:10px 0; }.main-nav.open { display:flex; }.search { order:4; flex-basis:100%; max-width:none; margin:0; }.service-bar .container { justify-content:center; }.service-bar span:not(:first-child) { display:none; }.hero-products { opacity:.62; left:35%; }.benefits { grid-template-columns:repeat(2,1fr); }.category-grid,.product-grid { grid-template-columns:repeat(2,1fr); }.promo-shape { right:-80px; opacity:.6; }.footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .container { width:min(100% - 30px,1180px); }.announcement { font-size:10px; }.announcement a { margin-left:6px; }.brand strong { font-size:12px; }.brand-mark { width:33px; height:33px; }.header-actions { gap:10px; }.hero { min-height:420px; }.hero-products { left:17%; opacity:.35; }.hero h1 { font-size:42px; }.benefits { width:100%; }.benefits article { padding:15px; }.benefits article:nth-child(2) { border-right:0; }.category-grid,.product-grid { grid-template-columns:1fr; }.section { padding:57px 0; }.section-heading { align-items:start; }.section-heading h2 { font-size:29px; }.section-heading>a { display:none; }.product-controls { flex-wrap:wrap; justify-content:end; }.promo-shape { display:none; }.promotion-content { min-height:345px; }.promotion h2 { font-size:41px; }.footer-grid { grid-template-columns:1fr; }.chat-button span { display:none; }.chat-button { font-size:19px; padding:12px 15px; } }