:root { --navy:#061923; --cyan:#11d9e8; --cyan-dark:#009aae; --ice:#eef7f9; --line:#d5e5e9; --ink:#081923; --muted:#61717a; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }

.site-header { position:sticky; top:0; z-index:30; min-height:76px; padding:10px clamp(20px,5vw,76px); display:flex; justify-content:space-between; align-items:center; gap:28px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:11px; min-width:180px; }
.brand img { width:48px; height:48px; object-fit:contain; border-radius:50%; }
.brand span { display:flex; flex-direction:column; }
.brand strong { font-size:1.15rem; letter-spacing:-.02em; }
.brand small { margin-top:2px; color:var(--cyan-dark); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
nav { display:flex; align-items:center; gap:clamp(15px,2.6vw,34px); font-size:.85rem; font-weight:700; }
nav a:not(.nav-cta):hover { color:var(--cyan-dark); }
.nav-cta { padding:11px 18px; border-radius:999px; background:var(--navy); color:#fff; }

.hero { position:relative; min-height:620px; padding:clamp(85px,10vw,135px) clamp(24px,7vw,105px) 95px; display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:end; gap:70px; overflow:hidden; color:#fff; background:radial-gradient(circle at 76% 28%,rgba(17,217,232,.18),transparent 26%),linear-gradient(135deg,#04151e 0%,#082836 66%,#061923 100%); }
.hero::after { content:""; position:absolute; right:8%; top:15%; width:340px; height:340px; border:1px solid rgba(17,217,232,.22); border-radius:50%; box-shadow:0 0 0 54px rgba(17,217,232,.03),0 0 0 110px rgba(17,217,232,.02); }
.hero-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(17,217,232,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(17,217,232,.12) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to right,#000,transparent 78%); }
.hero-copy,.hero-panel { position:relative; z-index:2; }
.hero-copy { max-width:830px; }
.eyebrow { margin:0 0 14px; color:var(--cyan); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow.dark { color:var(--cyan-dark); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:24px; max-width:850px; font-size:clamp(3rem,6.4vw,6rem); line-height:.96; letter-spacing:-.055em; }
h1 span { display:block; color:var(--cyan); }
.lead { max-width:710px; color:#c8d9de; font-size:clamp(1rem,1.5vw,1.22rem); line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; min-height:50px; padding:0 22px; align-items:center; justify-content:center; border-radius:10px; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.button.primary { background:var(--cyan); color:var(--navy); box-shadow:0 12px 30px rgba(17,217,232,.19); }
.button.primary:hover { background:#62eff6; transform:translateY(-1px); }
.button.secondary { color:#fff; border:1px solid rgba(255,255,255,.28); }
.button.secondary:hover { border-color:var(--cyan); }
.hero-panel { display:grid; gap:12px; }
.hero-panel div { padding:18px; border:1px solid rgba(17,217,232,.24); border-radius:14px; background:rgba(5,24,34,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.hero-panel strong { display:block; color:var(--cyan); font-size:2rem; }
.hero-panel span { color:#c8d9de; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }

.section { padding:100px clamp(24px,7vw,105px); }
.section-heading { max-width:800px; margin-bottom:46px; }
.section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-heading.light h2 { color:#fff; }
.section-heading h2 { margin-bottom:15px; font-size:clamp(2.2rem,4vw,4rem); line-height:1.06; letter-spacing:-.04em; }
.section-heading p:last-child { color:var(--muted); font-size:1.03rem; line-height:1.7; }
.section-heading.light p:last-child { color:#b7cbd1; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.service-card { min-height:245px; padding:28px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(155deg,#fff,#f6fafb); transition:.25s ease; }
.service-card:hover { transform:translateY(-5px); border-color:var(--cyan); box-shadow:0 18px 45px rgba(4,37,48,.09); }
.service-number { display:inline-flex; width:38px; height:28px; align-items:center; justify-content:center; border-radius:7px; background:var(--navy); color:var(--cyan); font-size:.7rem; font-weight:800; }
.service-card h3 { margin:24px 0 13px; font-size:1.22rem; }
.service-card p { color:var(--muted); line-height:1.7; font-size:.9rem; }

.client-section { padding:95px 0 70px; overflow:hidden; background:var(--navy); }
.client-section .section-heading { padding:0 24px; }
.logo-marquee { width:100%; overflow:hidden; padding:12px 0 22px; }
.logo-track { display:flex; width:max-content; gap:16px; animation:client-scroll 55s linear infinite; }
.logo-marquee:hover .logo-track,.logo-marquee:active .logo-track { animation-play-state:paused; }
.client-logo { width:220px; height:156px; margin:0; padding:17px 16px 12px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:space-between; border:1px solid rgba(17,217,232,.18); border-radius:16px; background:#fff; }
.client-logo img { width:100%; height:102px; object-fit:contain; }
.client-logo figcaption { width:100%; color:var(--navy); font-size:.71rem; font-weight:800; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.marquee-note { margin:0; color:#8ca9b1; text-align:center; font-size:.72rem; }
@keyframes client-scroll { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 8px)); } }

.method { background:var(--ice); }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.steps article { min-height:215px; padding:26px; border-radius:14px; background:var(--navy); color:#fff; }
.steps span { color:var(--cyan); font-size:.72rem; font-weight:800; letter-spacing:.1em; }
.steps h3 { margin:44px 0 10px; font-size:1.12rem; }
.steps p { color:#b8cbd0; font-size:.84rem; line-height:1.6; }
.brand-section { padding:86px 0 92px; overflow:hidden; background:#fff; }
.brand-section .section-heading { padding:0 24px; margin-bottom:30px; }
.brand-marquee { overflow:hidden; }
.brand-track { width:max-content; display:flex; gap:12px; animation:brand-scroll 38s linear infinite; }
.brand-marquee:hover .brand-track { animation-play-state:paused; }
.brand-track span { min-width:145px; padding:16px 23px; border:1px solid var(--line); border-radius:10px; background:#f8fbfc; color:var(--navy); font-size:.78rem; font-weight:800; text-align:center; }
@keyframes brand-scroll { from { transform:translateX(0); } to { transform:translateX(calc(-50% - 6px)); } }

.contact-band { margin:0 clamp(18px,4vw,60px) 60px; padding:clamp(34px,5vw,65px); display:flex; justify-content:space-between; align-items:center; gap:35px; border-radius:24px; color:#fff; background:linear-gradient(120deg,#061923,#0a3441); }
.contact-band h2 { margin-bottom:10px; font-size:clamp(2rem,4vw,3.9rem); letter-spacing:-.045em; }
.contact-band p:last-child { margin-bottom:0; color:#b9ced3; }
.contact-actions { display:flex; min-width:300px; flex-direction:column; gap:14px; align-items:stretch; }
.contact-link { color:var(--cyan); text-align:center; font-weight:700; }
footer { padding:34px clamp(24px,7vw,105px); display:flex; justify-content:space-between; align-items:center; gap:28px; background:#031119; color:#a9bec4; font-size:.75rem; }
.footer-brand { display:flex; align-items:center; gap:10px; color:#fff; }
.footer-brand img { width:40px; height:40px; border-radius:50%; }
.footer-brand div { display:flex; flex-direction:column; }
.footer-brand span { margin-top:3px; color:var(--cyan); font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; }
footer p { margin:0; text-align:center; }
footer>a { color:var(--cyan); font-weight:700; }
.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:35; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#25d366; color:#062115; font-size:.8rem; font-weight:900; box-shadow:0 12px 30px rgba(0,0,0,.22); }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .logo-track,.brand-track { width:auto; padding:0 20px; flex-wrap:wrap; justify-content:center; animation:none; } }
@media (max-width:900px) { nav a:not(.nav-cta) { display:none; } .hero { min-height:auto; grid-template-columns:1fr; gap:44px; padding-top:90px; } .hero::after { right:-160px; } .hero-panel { grid-template-columns:repeat(3,1fr); } .service-grid { grid-template-columns:repeat(2,1fr); } .steps { grid-template-columns:repeat(2,1fr); } .contact-band { align-items:flex-start; flex-direction:column; } .contact-actions { width:100%; min-width:0; } footer { flex-direction:column; text-align:center; } }
@media (max-width:600px) { .site-header { min-height:68px; padding:8px 16px; } .brand img { width:42px; height:42px; } .brand strong { font-size:1rem; } .hero { padding:74px 20px 55px; } h1 { font-size:clamp(2.75rem,14vw,4.2rem); } .hero-actions { flex-direction:column; } .button { width:100%; } .hero-panel { grid-template-columns:1fr; } .section { padding:72px 20px; } .service-grid,.steps { grid-template-columns:1fr; } .service-card { min-height:210px; } .client-logo { width:190px; height:145px; } .contact-band { margin:0 12px 36px; padding:32px 22px; border-radius:18px; } footer { padding:30px 20px 90px; } }