:root { --ink:#14191c; --steel:#263238; --muted:#657178; --paper:#f4f5f2; --line:#d6dcda; --acid:#d8ec42; --white:#fff; --dark:#101518; --radius:6px; --wrap:min(1180px, calc(100% - 48px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:0; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } button,input,select,textarea { font:inherit; }
.site-header { position:absolute; z-index:3; top:0; left:50%; width:var(--wrap); min-height:80px; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:28px; color:var(--white); border-bottom:1px solid rgba(255,255,255,.18); }
.brand { display:flex; align-items:center; gap:11px; } .brand-mark { display:grid; place-items:center; width:39px; height:39px; color:var(--dark); background:var(--acid); } .brand-mark svg { width:21px; } .brand strong,.brand small { display:block; line-height:1.08; } .brand strong { font-size:15px; letter-spacing:1.4px; } .brand small { margin-top:5px; font-size:10px; color:rgba(255,255,255,.68); letter-spacing:1.4px; }
.desktop-nav,.header-actions,.hero-actions,.footer-actions { display:flex; align-items:center; gap:24px; } .desktop-nav { font-size:13px; color:rgba(255,255,255,.78); } .desktop-nav a:hover { color:var(--acid); }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:0; padding:0 18px; font-weight:750; font-size:13px; cursor:pointer; } .button svg { width:17px; } .button-primary { color:var(--dark); background:var(--acid); } .button-primary:hover { background:#e8f66f; } .button-secondary { color:var(--white); background:transparent; border-color:rgba(255,255,255,.38); } .button-secondary:hover { border-color:var(--acid); color:var(--acid); } .button-dark { color:white; background:#172024; } .button-whatsapp { color:white; background:#1c9b5c; } .button-whatsapp:hover { background:#24ad6b; } .button-whatsapp i { font-size:19px; line-height:1; } .icon-link { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.3); } .icon-link svg { width:18px; }
.hero { position:relative; min-height:760px; color:var(--white); background:#111619; overflow:hidden; } .hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .hero::after { content:""; position:absolute; inset:0; background:rgba(4,7,9,.25); } .hero-content { position:relative; z-index:1; width:var(--wrap); padding:184px 0 74px; margin:auto; } .eyebrow { margin:0 0 17px; color:var(--acid); font-weight:800; font-size:11px; letter-spacing:1.5px; } h1,h2,h3,p { margin-top:0; } h1 { max-width:680px; margin-bottom:21px; font-size:clamp(44px,6vw,82px); line-height:.98; letter-spacing:0; } .hero-copy { max-width:575px; margin-bottom:31px; color:rgba(255,255,255,.78); font-size:17px; line-height:1.65; } .hero-copy-mobile { display:none; } .hero-actions { gap:14px; } .button-phone { color:white; background:rgba(15,23,27,.76); border-color:rgba(255,255,255,.34); } .button-phone:hover { color:var(--acid); border-color:var(--acid); } .button-phone svg { color:var(--acid); } .hero-notes { display:flex; flex-wrap:wrap; gap:18px 27px; margin-top:40px; font-size:13px; color:rgba(255,255,255,.78); } .hero-notes span { display:flex; gap:8px; align-items:center; } .hero-notes svg { width:17px; color:var(--acid); }
.signal-band { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#334047; } .signal-band>div { display:flex; align-items:center; gap:14px; min-height:116px; padding:22px max(24px,calc((100vw - 1180px)/2)); background:var(--dark); color:white; } .signal-band>div:nth-child(2) { padding-left:28px; padding-right:28px; } .signal-band>div:last-child { padding-left:28px; } .signal-band svg { flex:none; width:24px; color:var(--acid); } .signal-band strong,.signal-band span { display:block; } .signal-band strong { margin-bottom:4px; font-size:14px; } .signal-band span span { color:#aeb8ba; font-size:12px; }
.section { width:var(--wrap); margin:auto; padding:118px 0; } .section-heading { max-width:710px; } h2 { margin-bottom:18px; font-size:clamp(31px,4vw,53px); line-height:1.05; } .section-heading>p:last-child { color:var(--muted); font-size:17px; line-height:1.65; }
.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:50px; border:1px solid var(--line); background:var(--line); } .capability-grid article { display:flex; flex-direction:column; min-height:236px; padding:26px 25px 22px; background:var(--white); } .capability-grid svg { width:28px; color:#344850; } .capability-grid h3 { margin:36px 0 10px; font-size:18px; } .capability-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; } .capability-grid article span { margin-top:auto; padding-top:18px; color:#536167; font-size:11px; font-weight:800; letter-spacing:.15px; }
.project-showcase { width:var(--wrap); display:grid; grid-template-columns:.68fr 1.32fr; gap:30px; align-items:center; padding:0 0 118px; margin:auto; } .project-intro { padding-right:24px; } .project-intro h2 { font-size:clamp(30px,3.6vw,48px); } .project-intro>p:not(.eyebrow) { color:var(--muted); line-height:1.62; font-size:15px; } .premium-carousel { position:relative; min-width:0; overflow:hidden; background:#192126; } .premium-track { position:relative; min-height:530px; } .premium-slide { position:absolute; inset:0; z-index:0; margin:0; opacity:0; pointer-events:none; transition:opacity .55s ease; } .premium-slide.is-active { z-index:1; opacity:1; pointer-events:auto; } .premium-slide img { width:100%; height:100%; object-fit:cover; } .premium-slide::after { content:""; position:absolute; inset:0; background:rgba(7,11,13,.24); } .premium-slide figcaption { position:absolute; z-index:1; inset:auto 0 0; display:grid; gap:5px; padding:24px 28px; color:white; background:rgba(9,14,17,.8); } .premium-slide figcaption span { color:var(--acid); font-size:10px; font-weight:850; letter-spacing:1.2px; } .premium-slide figcaption strong { font-size:17px; } .premium-carousel-controls { position:absolute; z-index:2; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; } .carousel-arrow { display:grid; place-items:center; width:38px; height:38px; padding:0; cursor:pointer; color:white; background:rgba(10,16,18,.76); border:1px solid rgba(255,255,255,.32); } .carousel-arrow:hover { color:var(--dark); background:var(--acid); border-color:var(--acid); } .carousel-arrow svg { width:17px; } .carousel-dots { display:flex; gap:6px; } .carousel-dots button { width:9px; height:9px; padding:0; cursor:pointer; background:rgba(255,255,255,.5); border:0; border-radius:50%; } .carousel-dots button.is-active { width:23px; border-radius:6px; background:var(--acid); }
.materials-section { padding:108px max(24px,calc((100vw - 1180px)/2)); color:var(--white); background:var(--steel); } .materials-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; } .materials-heading>div { max-width:660px; } .materials-heading h2 { margin-bottom:0; } .materials-heading>p { max-width:400px; margin:0 0 6px; color:#c4ced0; font-size:15px; line-height:1.6; } .material-filters { display:flex; flex-wrap:wrap; gap:8px; margin:44px 0 22px; } .material-filters button { min-height:40px; padding:0 14px; cursor:pointer; color:#d7dfdf; background:transparent; border:1px solid #536167; font-size:12px; font-weight:800; } .material-filters button:hover,.material-filters button.is-active { color:var(--dark); background:var(--acid); border-color:var(--acid); } .material-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .material-card { min-height:390px; position:relative; overflow:hidden; background:#101619; } .material-card[hidden] { display:none; } .material-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; transition:transform .5s ease,opacity .5s ease; } .material-card:hover img { transform:scale(1.045); opacity:.82; } .material-card::after { content:""; position:absolute; inset:0; background:rgba(7,12,14,.42); } .material-card>div { position:absolute; z-index:1; inset:auto 0 0; padding:24px; } .material-card span { display:block; margin-bottom:8px; color:var(--acid); font-size:10px; font-weight:850; letter-spacing:1.1px; } .material-card h3 { margin-bottom:9px; font-size:22px; } .material-card p { min-height:44px; margin-bottom:17px; color:#e2e8e8; font-size:13px; line-height:1.55; } .material-card a { display:inline-flex; align-items:center; gap:7px; color:var(--white); font-size:12px; font-weight:800; } .material-card a svg { width:15px; color:var(--acid); } .materials-note { display:flex; gap:9px; max-width:720px; margin:22px 0 0; color:#aab6b7; font-size:12px; line-height:1.6; } .materials-note svg { flex:none; width:16px; color:var(--acid); }
.applications-section { width:var(--wrap); padding:118px 0; margin:auto; } .applications-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:46px; } .applications-heading>div { max-width:650px; } .applications-heading h2 { margin-bottom:0; } .applications-heading>p { max-width:405px; margin:0 0 5px; color:var(--muted); font-size:15px; line-height:1.6; } .applications-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .application-card { position:relative; min-height:430px; overflow:hidden; background:var(--dark); color:white; } .application-card-wide { grid-column:span 2; } .application-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .application-card::after { content:""; position:absolute; inset:0; background:rgba(7,11,13,.46); } .application-card:hover img { transform:scale(1.035); } .application-card>div { position:absolute; z-index:1; inset:auto 0 0; padding:26px; } .application-card span { display:block; margin-bottom:7px; color:var(--acid); font-size:10px; font-weight:850; letter-spacing:1.2px; } .application-card h3 { margin-bottom:9px; font-size:23px; line-height:1.08; } .application-card p { margin-bottom:14px; color:#e7eded; font-size:13px; line-height:1.55; } .application-card ul { display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 17px; list-style:none; } .application-card li { padding:6px 8px; background:rgba(255,255,255,.15); font-size:11px; } .project-link { display:inline-flex; align-items:center; gap:7px; color:white; font-size:12px; font-weight:800; } .project-link svg { width:15px; color:var(--acid); }
.cabinet-catalog-section { position:relative; width:var(--wrap); min-height:530px; margin:0 auto 118px; overflow:hidden; color:white; background:#151b1e; } .cabinet-catalog-section>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .cabinet-catalog-section::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,16,18,.98) 0%,rgba(11,16,18,.86) 37%,rgba(11,16,18,.18) 70%,rgba(11,16,18,.04) 100%); } .cabinet-catalog-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; width:min(49%,540px); min-height:530px; padding:56px; } .cabinet-catalog-copy h2 { max-width:470px; margin-bottom:18px; font-size:clamp(32px,3.6vw,51px); } .cabinet-catalog-copy>p:not(.eyebrow) { max-width:455px; margin:0 0 26px; color:#d5dddd; font-size:15px; line-height:1.65; } .catalog-points { display:grid; gap:10px; margin-bottom:29px; } .catalog-points span { display:flex; align-items:center; gap:9px; color:#eef2f2; font-size:13px; font-weight:750; } .catalog-points svg { width:17px; color:var(--acid); }
.industries-section { padding:108px max(24px,calc((100vw - 1180px)/2)); color:white; background:#243139; } .industries-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:44px; } .industries-heading>div { max-width:660px; } .industries-heading h2 { margin-bottom:0; } .industries-heading>p { max-width:430px; margin:0 0 4px; color:#c7d1d2; font-size:15px; line-height:1.65; } .industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid #56646a; background:#56646a; } .industry-grid article { min-height:196px; padding:24px; background:#202b30; } .industry-grid article:hover { background:#2c393e; } .industry-grid svg { width:26px; color:var(--acid); } .industry-grid h3 { margin:32px 0 8px; font-size:18px; } .industry-grid p { margin:0; color:#c5cfd1; font-size:13px; line-height:1.55; }
.process-section { padding-bottom:120px; } .process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:0; margin:48px 0 0; list-style:none; counter-reset:steps; } .process-grid li { border-top:2px solid var(--ink); padding-top:18px; } .process-grid span { display:block; margin-bottom:44px; color:#7a888d; font-weight:800; font-size:12px; letter-spacing:1.1px; } .process-grid h3 { margin-bottom:8px; font-size:18px; } .process-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.file-section { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding:84px max(24px,calc((100vw - 1180px)/2)); color:var(--white); background:#172024; } .file-section h2 { margin-bottom:0; } .file-checklist { padding-left:26px; border-left:1px solid rgba(255,255,255,.22); } .file-checklist p { display:flex; gap:12px; margin-bottom:17px; color:#d8dfdf; font-size:14px; } .file-checklist svg { flex:none; width:17px; color:var(--acid); }
.quote-section { width:var(--wrap); display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding:118px 0; } .quote-copy { padding-top:7px; } .quote-copy>p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.65; } .text-link { display:inline-flex; align-items:center; gap:8px; margin-top:10px; color:#1e4e5d; font-weight:800; font-size:14px; } .text-link svg { width:16px; } .text-link i { font-size:20px; color:#1c9b5c; } .text-link-whatsapp { display:flex; width:max-content; color:#187947; } .quote-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:28px; background:var(--white); border:1px solid var(--line); } .quote-form label { display:grid; gap:7px; font-size:12px; font-weight:800; } .quote-form input,.quote-form select,.quote-form textarea { width:100%; border:1px solid #cbd3d1; border-radius:0; background:#fff; padding:12px; color:var(--ink); font-size:14px; } .quote-form textarea { resize:vertical; } .full { grid-column:1/-1; } .quote-ready { padding:18px; color:#103125; background:#e9f7ee; border:1px solid #9fd7b2; } .quote-ready strong { display:flex; align-items:center; gap:8px; font-size:15px; } .quote-ready strong svg { width:18px; color:#19804a; } .quote-ready p { margin:8px 0 14px; color:#38604c; font-size:13px; line-height:1.5; } .quote-ready>div { display:flex; flex-wrap:wrap; gap:9px; }
.location-section { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:68px max(24px,calc((100vw - 1180px)/2)); color:white; background:#1a252a; } .location-section h2 { margin-bottom:9px; font-size:clamp(25px,3vw,38px); } .location-section>div>p:last-child { max-width:670px; margin:0; color:#c9d3d4; font-size:15px; line-height:1.6; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:32px max(24px,calc((100vw - 1180px)/2)); color:#c5cecf; background:#0e1316; } .site-footer strong,.site-footer span { display:block; } .site-footer strong { color:white; letter-spacing:1px; font-size:13px; } .site-footer span { margin-top:5px; font-size:12px; } .footer-address { display:inline-flex; align-items:flex-start; gap:7px; max-width:430px; margin-top:13px; color:#9eacad; font-size:12px; line-height:1.5; } .footer-address svg { flex:none; width:15px; margin-top:2px; color:var(--acid); } .footer-actions { gap:19px; font-size:13px; } .footer-actions a { display:inline-flex; align-items:center; gap:7px; } .footer-actions svg { width:16px; color:var(--acid); } .footer-actions .fa-whatsapp { color:#32c978; font-size:18px; }
.floating-whatsapp { position:fixed; z-index:8; right:24px; bottom:26px; display:flex; align-items:center; gap:10px; height:54px; padding:0 18px; color:white; background:#1c9b5c; box-shadow:0 10px 28px rgba(8,35,22,.32); font-size:13px; font-weight:850; transition:transform .2s ease,background .2s ease; } .floating-whatsapp:hover { background:#24ad6b; transform:translateY(-3px); } .floating-whatsapp i { font-size:25px; }
.mobile-cta { display:none; }
@media (max-width:900px) { :root { --wrap:min(100% - 32px,1180px); } .site-header { width:var(--wrap); min-height:68px; } .desktop-nav { display:none; } .header-actions .icon-link { display:none; } .header-actions .button { min-height:38px; padding:0 12px; } .hero { min-height:720px; } .hero-content { padding-top:148px; } .hero-actions { flex-wrap:wrap; } .signal-band { grid-template-columns:1fr; } .signal-band>div,.signal-band>div:nth-child(2),.signal-band>div:last-child { min-height:auto; padding:21px 16px; } .capability-grid,.process-grid { grid-template-columns:repeat(2,1fr); } .project-showcase { grid-template-columns:1fr; gap:28px; } .project-intro { padding:0; } .premium-track { min-height:470px; } .materials-heading,.applications-heading,.industries-heading { align-items:start; flex-direction:column; gap:12px; } .material-grid,.applications-grid,.industry-grid { grid-template-columns:repeat(2,1fr); } .application-card-wide { grid-column:span 2; } .cabinet-catalog-section { min-height:500px; } .cabinet-catalog-copy { width:min(62%,540px); min-height:500px; padding:44px; } .quote-section { gap:36px; grid-template-columns:1fr; } .location-section { align-items:flex-start; flex-direction:column; } }
@media (max-width:600px) { body { padding-bottom:64px; } .brand strong { font-size:13px; } .brand small { font-size:9px; } .header-actions .button-whatsapp { display:none; } .hero { min-height:635px; } .hero-image { object-position:63% center; } .hero-content { padding-top:116px; padding-bottom:30px; } h1 { max-width:350px; margin-bottom:17px; font-size:40px; } .hero-copy-desktop { display:none; } .hero-copy-mobile { display:block; max-width:345px; margin-bottom:22px; font-size:14px; line-height:1.55; } .hero-actions { align-items:stretch; flex-direction:column; gap:10px; } .hero-actions .button { width:100%; min-height:44px; } .hero-actions .button-phone { display:none; } .hero-notes { display:none; } .section { padding:78px 0; } h2 { font-size:32px; } .section-heading>p:last-child { font-size:15px; } .capability-grid,.process-grid,.project-showcase,.material-grid,.applications-grid { grid-template-columns:1fr; } .capability-grid article { min-height:190px; } .capability-grid h3 { margin-top:38px; } .project-showcase { padding-bottom:78px; } .project-intro { padding:0; } .premium-track { min-height:360px; } .premium-slide figcaption { padding:17px 18px; } .premium-slide figcaption strong { font-size:14px; } .premium-carousel-controls { right:10px; bottom:10px; } .carousel-arrow { width:34px; height:34px; } .process-grid { gap:32px; } .process-grid span { margin-bottom:18px; } .materials-section,.file-section,.location-section { padding:68px 16px; } .applications-section { padding:78px 0; } .application-card,.application-card-wide { grid-column:auto; min-height:370px; } .application-card>div { padding:22px; } .application-card h3 { font-size:21px; } .cabinet-catalog-section { min-height:560px; margin-bottom:78px; } .cabinet-catalog-section::after { background:rgba(11,16,18,.76); } .cabinet-catalog-copy { width:100%; min-height:560px; padding:28px 24px; } .cabinet-catalog-copy h2 { font-size:35px; } .cabinet-catalog-copy>p:not(.eyebrow) { font-size:14px; } .industries-section { padding:78px 16px; } .industry-grid { grid-template-columns:repeat(2,1fr); } .industry-grid article { min-height:178px; padding:18px; } .industry-grid h3 { margin-top:26px; font-size:16px; } .industry-grid p { font-size:12px; } .material-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; } .material-filters button { flex:none; } .material-card { min-height:350px; } .file-section { grid-template-columns:1fr; gap:34px; } .file-checklist { padding-left:17px; } .quote-section { width:calc(100% - 32px); padding:78px 0; } .quote-form { grid-template-columns:1fr; padding:18px; } .quote-ready>div { flex-direction:column; } .quote-ready .button { width:100%; } .site-footer { padding:28px 16px; align-items:flex-start; flex-direction:column; } .floating-whatsapp { display:none; } .mobile-cta { position:fixed; z-index:6; inset:auto 0 0; display:grid; grid-template-columns:1fr 1.45fr; height:64px; color:white; background:#0e1316; border-top:1px solid #334045; } .mobile-cta a { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:800; } .mobile-cta a:last-child { color:white; background:#1c9b5c; } .mobile-cta svg { width:17px; } .mobile-cta .fa-whatsapp { font-size:19px; } }