:root { --ink:#17191e; --charcoal:#24252a; --muted:#6b6e76; --line:#dedfe2; --soft:#f6f5f2; --orange:#ed6c20; --violet:#584569; --lime:#33cc66; --white:#fffafa; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--white); color:var(--ink); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; } .site-header { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid #e7e7e7; background:rgba(255,250,250,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); } .brand img,.site-footer img { display:block; width:118px; height:auto; } .navigation { display:flex; gap:30px; align-items:center; font-size:13px; font-weight:700; } .navigation a:not(.nav-contact):not(.nav-whatsapp) { color:#4e5058; } .nav-actions { display:flex; align-items:center; gap:10px; } .nav-contact { padding:11px 17px; background:var(--ink); color:#fff; border-radius:3px; } .nav-whatsapp { width:39px; height:39px; display:grid; place-items:center; background:#25d366; color:#fff; border-radius:3px; box-shadow:0 4px 12px rgba(37,211,102,.2); transition:transform .18s ease,background .18s ease; } .nav-whatsapp:hover { background:#1fbd59; transform:translateY(-1px); } .nav-whatsapp svg { width:22px; height:22px; fill:currentColor; } .menu-toggle { display:none; }
.hero { min-height:680px; display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; background:linear-gradient(135deg,#f6f4f1 0%,#eeece8 100%); } .hero-copy { padding:clamp(72px,10vw,150px) clamp(24px,5vw,80px); max-width:820px; } .eyebrow { margin:0 0 18px; color:var(--orange); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; } h1,h2,h3 { font-family:Eurostile,Montserrat,Arial,sans-serif; margin:0; letter-spacing:-.045em; } h1 { max-width:720px; font-size:clamp(42px,5vw,76px); line-height:1.01; font-weight:800; } h1 span { color:var(--violet); display:block; } .lead { max-width:550px; margin:28px 0 34px; color:#53545b; font-size:17px; line-height:1.7; } .hero-actions { display:flex; gap:26px; align-items:center; flex-wrap:wrap; } .button { display:inline-flex; gap:20px; align-items:center; padding:16px 19px; font-size:13px; font-weight:800; border-radius:2px; } .button-primary { background:var(--orange); color:#fff; } .text-link { display:inline-flex; gap:13px; align-items:center; font-size:13px; font-weight:800; border-bottom:1px solid #b8b7b5; padding-bottom:7px; } .hero-visual { position:relative; min-height:500px; isolation:isolate; background:linear-gradient(145deg,#202126,#2d2e34); overflow:hidden; } .hero-grid { position:absolute; inset:0; z-index:-2; opacity:.26; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(135deg,#000,transparent 76%); } .hero-orbit { position:absolute; z-index:-1; border:1px solid rgba(255,255,255,.15); border-radius:50%; } .orbit-one { width:700px; height:700px; top:-175px; left:-55px; } .orbit-two { width:480px; height:480px; top:-65px; left:55px; } .hero-glow { position:absolute; z-index:-1; width:330px; height:330px; right:-90px; bottom:-85px; border-radius:50%; background:radial-gradient(circle,rgba(237,108,32,.65),rgba(237,108,32,0) 68%); filter:blur(9px); } .hero-composition { position:absolute; top:50%; left:50%; width:min(78%,390px); aspect-ratio:1; transform:translate(-50%,-50%) rotate(-8deg); } .composition-panel { position:absolute; display:block; border-radius:32px 32px 60px 32px; } .panel-back { inset:12% 2% 4% 18%; background:#ed6c20; transform:translate(24px,25px); } .panel-middle { inset:7% 12% 13% 8%; border:1px solid rgba(255,255,255,.2); background:linear-gradient(145deg,#575963,#303239); box-shadow:0 24px 45px rgba(0,0,0,.24); } .panel-front { inset:18% 21% 24% 18%; background:linear-gradient(145deg,#6d577d,#4c3b5b); box-shadow:inset 0 1px rgba(255,255,255,.14); } .composition-line { position:absolute; display:block; height:2px; background:rgba(255,255,255,.7); transform-origin:left center; } .line-one { width:42%; top:38%; left:27%; transform:rotate(44deg); } .line-two { width:42%; top:60%; left:31%; transform:rotate(-44deg); }
.credential-strip { min-height:82px; background:var(--ink); color:#f8f5ee; display:flex; gap:30px; justify-content:center; align-items:center; padding:20px; font-size:12px; } .credential-strip p { margin:0; } .credential-strip strong { color:#ffb600; } .credential-strip span { width:4px; height:4px; border-radius:50%; background:var(--orange); } .section { padding:clamp(72px,10vw,140px) clamp(24px,8vw,130px); } .section-heading { display:grid; grid-template-columns:.9fr 1.2fr; gap:35px; align-items:start; margin-bottom:48px; } .section-heading .eyebrow { padding-top:11px; } h2 { font-size:clamp(32px,4vw,56px); line-height:1.07; } .solution-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; } .solution-card { min-height:315px; border:1px solid var(--line); display:flex; flex-direction:column; padding:28px; position:relative; } .featured-card { background:var(--violet); color:#fff; border:none; } .card-number { color:var(--orange); font-size:12px; font-weight:800; } .solution-card h3 { margin-top:auto; font-size:23px; line-height:1.13; } .solution-card p { margin:15px 0 0; max-width:270px; color:#676871; font-size:13px; line-height:1.7; } .featured-card p { color:rgba(255,255,255,.75); } .card-arrow { position:absolute; top:28px; right:28px; font-size:20px; color:var(--orange); }
.software-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,9vw,130px); align-items:center; background:var(--orange); color:#fff; } .software-mark { display:grid; place-items:center; } .software-mark img { display:block; width:min(100%,520px); height:auto; } .software-copy .eyebrow { color:#fff0df; } .software-copy p:not(.eyebrow) { max-width:600px; margin:24px 0; font-size:16px; line-height:1.8; color:#fff4ec; } .light-link { border-color:rgba(255,255,255,.5); }
.clients { background:#f0eeea; } .compact-heading { grid-template-columns:.8fr 1.2fr; margin-bottom:34px; } .compact-heading p:last-child { grid-column:2; margin:0; color:var(--muted); line-height:1.7; max-width:430px; } .client-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #cfd0d0; border-left:1px solid #cfd0d0; } .client-grid figure { min-height:170px; display:grid; place-items:center; margin:0; padding:12px; background:#fff; border-right:1px solid #cfd0d0; border-bottom:1px solid #cfd0d0; } .client-grid img { display:block; width:100%; height:130px; object-fit:contain; }
.contact-section { text-align:center; color:#fff; background:var(--violet); padding:clamp(72px,10vw,145px) 24px; } .contact-section .eyebrow { color:#ffb600; } .contact-section h2 { max-width:830px; margin:0 auto; } .contact-section > p:not(.eyebrow) { color:#e2dbe7; margin:25px 0 32px; font-size:15px; } .contact-actions { display:flex; flex-direction:column; align-items:center; gap:13px; } .button-light { background:#fff; color:var(--violet); } .contact-email,.contact-phone { color:#f4edf8; font-size:13px; font-weight:700; } .contact-email { margin-top:9px; } .contact-phone { color:#d7c8df; } .site-footer { min-height:140px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:30px clamp(24px,5vw,80px); background:#18191d; color:#bfc0c3; font-size:11px; } .site-footer img { filter:invert(1); width:95px; }
@media (max-width:760px) { .site-header { height:72px; } .navigation { position:absolute; display:none; top:72px; left:0; right:0; padding:22px 24px; flex-direction:column; align-items:stretch; background:var(--white); border-bottom:1px solid var(--line); } .navigation.open { display:flex; } .menu-toggle { display:block; border:0; background:none; font:700 12px Manrope,sans-serif; } .hero { grid-template-columns:1fr; } .hero-copy { padding-bottom:58px; } .hero-visual { min-height:370px; } .credential-strip { flex-direction:column; gap:10px; text-align:center; } .credential-strip span { display:none; } .section-heading,.compact-heading { display:block; } .section-heading .eyebrow { padding-top:0; } .solution-grid { grid-template-columns:1fr; } .solution-card { min-height:245px; } .software-section { grid-template-columns:1fr; } .software-mark img { max-width:400px; } .client-grid { grid-template-columns:repeat(2,1fr); } .client-grid figure { min-height:145px; padding:10px; } .client-grid img { height:112px; } .compact-heading p:last-child { margin-top:18px; } .site-footer { flex-wrap:wrap; } }

.panel-front { display:grid; place-items:center; }
.panel-front img { display:block; width:58%; height:58%; object-fit:contain; }
.hero-composition { transform:translate(-50%,-50%); }
.footer-legal { max-width:470px; text-align:right; }
.footer-legal p { margin:0; }
.footer-legal p + p { margin-top:7px; color:#8e9097; font-size:10px; line-height:1.45; }

@media (max-width:760px) {
  .footer-legal { text-align:left; }
}

.solution-card { overflow:hidden; }
.solution-illustration { display:block; width:calc(100% + 24px); height:126px; margin:8px -12px 0; object-fit:contain; object-position:center; }

@media (max-width:760px) {
  .solution-illustration { height:96px; margin-top:5px; }
}

.whatsapp-float { position:fixed; right:24px; bottom:24px; z-index:20; display:none; align-items:center; gap:9px; min-height:58px; padding:0 19px; border-radius:999px; background:#25d366; color:#fff; box-shadow:0 12px 30px rgba(14,126,60,.34); font-size:13px; font-weight:800; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.whatsapp-float:hover { background:#1fbd59; box-shadow:0 15px 34px rgba(14,126,60,.42); transform:translateY(-2px); }
.whatsapp-float svg { width:25px; height:25px; flex:none; fill:currentColor; }

@media (max-width:760px) {
  .nav-whatsapp { display:none; }
  .whatsapp-float { display:inline-flex; right:16px; bottom:16px; width:58px; height:58px; min-height:0; justify-content:center; padding:0; }
  .whatsapp-float span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}