:root{--blue:#1a6dff;--cyan:#19c8e8;--ink:#0d2a56;--light:#eef5ff;--paper:#fff;--text:#12243d;--gray:#5b6b86;--line:#dbe6f8;--sun:#ffb62e;--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.6;background:var(--paper)}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 48px),var(--max));margin:auto}

/* ---------- header ---------- */
header{position:fixed;z-index:20;top:0;width:100%;transition:.3s}
header.scrolled{background:#ffffffef;backdrop-filter:blur(12px);box-shadow:0 6px 28px #0d2a5614}
nav{height:88px;width:min(calc(100% - 48px),var(--max));margin:auto;display:flex;align-items:center;justify-content:space-between}
.logo img{height:72px;width:auto;display:block;filter:drop-shadow(0 2px 10px #0d2a5640)}
.links{display:flex;gap:25px;align-items:center;color:#fff;font-size:13px;font-weight:bold}
.links a{position:relative;transition:color .2s}
.links a:not(.cta):after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--cyan);transition:right .25s}
.links a:not(.cta):hover:after{right:0}
.links .cta{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;padding:12px 18px;border-radius:999px;box-shadow:0 8px 20px #1a6dff4d;transition:transform .2s,box-shadow .2s}
.links .cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px #1a6dff66}
header.scrolled .links{color:var(--ink)}
header.scrolled .links .cta{color:#fff}
header.scrolled .menu{color:var(--ink)}
header.scrolled .logo img{filter:drop-shadow(0 1px 3px #0d2a5633)}
.menu{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}

/* ---------- hero ---------- */
.hero{min-height:760px;display:flex;align-items:center;position:relative;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(95deg,#0d2a56f2 8%,#0b45c9b8 45%,#19c8e847 78%,#19c8e81f),url('/.netlify/images?url=/images/hero.jpg&w=1920&fm=webp&q=80') center/cover;transform:scale(1.02);animation:heroZoom 20s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero:before{content:'';position:absolute;width:520px;height:520px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,#19c8e866,transparent 65%);animation:float 9s ease-in-out infinite}
.hero:after{content:'';position:absolute;width:360px;height:360px;left:-90px;bottom:-130px;border-radius:50%;background:radial-gradient(circle,#1a6dff59,transparent 65%);animation:float 11s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.hero-content{position:relative;padding-top:60px}
.hero small,.dark small{letter-spacing:2px;font-weight:800;font-size:11px;display:inline-block;background:#ffffff24;border:1px solid #ffffff3d;padding:7px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.hero h1,h2,h3{font-family:Arial,sans-serif;text-transform:uppercase}
.hero h1{font-size:clamp(55px,8vw,98px);line-height:.93;margin:20px 0 28px;max-width:900px;text-shadow:0 6px 30px #0d2a5666}
.hero em,.dark h2 em{font-style:normal;background:linear-gradient(100deg,var(--cyan),#8fe9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
h2 em{font-style:normal;background:linear-gradient(100deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:620px;font-size:18px;color:#eaf3ff}
.actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;padding:16px 26px;font-weight:800;font-size:12px;text-transform:uppercase;cursor:pointer;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s}
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;box-shadow:0 10px 26px #1a6dff4d}
.btn.primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px #1a6dff66}
.btn.outline{border:2px solid #ffffffb3;color:#fff;background:#ffffff1a;backdrop-filter:blur(4px)}
.btn.outline:hover{background:#fff;color:var(--ink);transform:translateY(-3px)}
.btn.wa{background:linear-gradient(135deg,#25d366,#12a850);color:#fff;box-shadow:0 10px 26px #25d3664d}
.btn.wa:hover{transform:translateY(-3px);box-shadow:0 16px 34px #25d36666}
.btn svg{width:17px;height:17px;fill:currentColor}
.trust{margin-top:32px;font-size:11px;font-weight:bold;color:#dbeaff}

/* ---------- sections ---------- */
.section{padding:105px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.photo{position:relative}
.photo img{width:100%;min-height:500px;object-fit:cover;border-radius:22px;box-shadow:0 26px 60px #0d2a5626}
.photo:before{content:'';position:absolute;inset:auto -18px -18px auto;width:190px;height:190px;border-radius:22px;background:linear-gradient(135deg,var(--blue),var(--cyan));opacity:.14;z-index:-1}
.eyebrow{color:var(--blue);font-weight:800;letter-spacing:2px;font-size:11px;display:inline-block;background:var(--light);padding:7px 14px;border-radius:999px}
h2{font-size:clamp(42px,5vw,65px);line-height:1;margin:17px 0 25px}
section p{color:var(--gray);font-size:14px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0;font-size:13px;font-weight:bold;color:var(--ink)}
.textlink{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--blue);border-bottom:2px solid var(--cyan);transition:opacity .2s}
.textlink:hover{opacity:.7}
.services,.reviews{background:linear-gradient(180deg,var(--light),#fff)}
.heading{display:grid;grid-template-columns:1fr .7fr;gap:50px;align-items:end;margin-bottom:45px}
.heading>p{margin:0}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article{background:#fff;padding:32px;min-height:285px;position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.28s}
.cards article:before{content:'';position:absolute;left:0;top:0;height:4px;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .3s}
.cards article:hover:before{width:100%}
.cards article:hover{transform:translateY(-7px);box-shadow:0 22px 46px #0d2a561f;border-color:#bfd8ff}
.cards b{position:absolute;right:22px;color:#b9cdea;font-size:11px}
.cards i{display:block;font-style:normal;color:#fff;font-size:24px;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;margin-bottom:14px;box-shadow:0 8px 18px #1a6dff33}
.cards h3{font-size:23px;margin:5px 0;color:var(--ink)}
.cards p{font-size:13px}
.cards a{color:var(--blue);font-size:11px;font-weight:800;text-transform:uppercase}

/* ---------- dark (navy) blocks ---------- */
.dark{background:linear-gradient(140deg,var(--ink),#0b3fa8 130%);color:#fff;position:relative;overflow:hidden}
.dark:before{content:'';position:absolute;width:640px;height:640px;right:-200px;bottom:-260px;border-radius:50%;background:radial-gradient(circle,#19c8e833,transparent 65%)}
.dark .container{position:relative}
.dark p{color:#c3d7f5}
.dark h2{color:#fff}
.light{color:#fff}
.benefits{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff2e}
.benefits>div{padding:28px 35px 28px 0;border-bottom:1px solid #ffffff2e;transition:.25s}
.benefits>div:hover{background:#ffffff0f}
.benefits>div:nth-child(even){padding-left:35px;border-left:1px solid #ffffff2e}
.benefits span{color:var(--cyan);font-size:11px;font-weight:800}
.benefits h3{font-size:22px;margin:7px 0}

/* ---------- gallery ---------- */
.filters{display:flex;gap:7px;margin-bottom:22px}
.filters button{border:1px solid var(--line);background:#fff;padding:9px 16px;font-size:10px;font-weight:800;text-transform:uppercase;border-radius:999px;cursor:pointer}
.filters button.active,.filters button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:14px}
.gallery figure.wide{grid-column:span 2}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--light);border-radius:18px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figure:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0d2a56e6)}
.gallery figcaption{position:absolute;z-index:2;bottom:16px;left:20px;color:#fff;font-weight:bold;font-size:13px}
.gallery figcaption small{display:block;color:var(--cyan);font-size:9px;letter-spacing:1px;text-transform:uppercase}

/* ---------- before / after ---------- */
.compare{background:linear-gradient(180deg,#fff,var(--light))}
.compare-box{background:#fff;padding:55px;border-radius:26px;border:1px solid var(--line);box-shadow:0 24px 60px #0d2a5614}
.comparison{height:520px;position:relative;overflow:hidden;border-radius:18px}
.comparison>img,.before img{position:absolute;width:100%;height:100%;object-fit:cover}
.before{position:absolute;inset:0;width:50%;overflow:hidden}
.before img{width:100vw;max-width:none}
.line{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cyan),var(--blue))}
.line:after{content:'⟷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;font-size:16px;font-weight:bold;box-shadow:0 6px 18px #0d2a5633}
.comparison input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3}

/* ---------- reviews ---------- */
.center{text-align:center;max-width:650px;margin:0 auto 45px}
.center p{margin:auto}
.reviewgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reviewgrid article{background:#fff;padding:32px;border:1px solid var(--line);border-radius:18px;color:var(--sun);letter-spacing:2px;transition:.25s}
.reviewgrid article:hover{transform:translateY(-6px);box-shadow:0 20px 44px #0d2a5614}
.reviewgrid p{color:var(--gray);min-height:95px;letter-spacing:0}
.reviewgrid strong,.reviewgrid small{display:block;color:var(--ink);letter-spacing:0}
.reviewgrid small{color:var(--blue);font-size:10px;text-transform:uppercase;font-weight:bold}

/* ---------- service areas ---------- */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.areas .state{min-height:380px;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:24px;display:grid;place-items:center;position:relative;overflow:hidden}
.state strong{font-size:170px;color:#ffffff14;position:absolute}
.state div{position:relative;line-height:2.1;font-weight:bold;font-size:13px;column-count:2;color:#eaf3ff}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}
.details{display:grid;gap:14px;margin-top:30px}
.details a,.details div{font-size:9px;color:var(--blue);letter-spacing:1px;font-weight:bold;background:var(--light);border:1px solid var(--line);border-radius:14px;padding:16px 20px;display:block;transition:.22s}
.details a:hover{transform:translateX(5px);border-color:var(--blue);background:#e4efff}
.details a.wa-detail{background:linear-gradient(135deg,#eafff2,#dcfbe9);border-color:#a9e9c2;color:#0f8f47}
.details a.wa-detail:hover{border-color:#25d366;background:#dff9e9}
.details strong{display:block;color:var(--ink);font-size:15px;letter-spacing:0;margin-top:3px}
form{background:linear-gradient(160deg,var(--light),#fff);padding:38px;border-radius:24px;border:1px solid var(--line);box-shadow:0 20px 50px #0d2a5614}
form label{display:block;font-size:10px;font-weight:bold;text-transform:uppercase;margin-bottom:14px;color:var(--ink)}
input,select,textarea{width:100%;margin-top:6px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:13px;transition:.2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px #1a6dff1f}
textarea{resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
form .btn{width:100%;justify-content:center;margin-top:5px}
form>small{display:block;text-align:center;color:var(--gray);font-size:9px;margin-top:10px}

/* ---------- footer ---------- */
footer{background:linear-gradient(140deg,var(--ink),#0b3a94);color:#fff;padding:60px 0 20px}
.foot{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:60px;padding-bottom:45px}
.foot img{width:210px;height:auto}
.foot p,.foot a{display:block;color:#b9cfee;font-size:12px}
.foot a:hover{color:var(--cyan)}
.foot b{font-size:10px;letter-spacing:1.5px;color:#fff}
.foot a{margin:8px 0}
.copyright{border-top:1px solid #ffffff26;padding-top:20px;width:min(calc(100% - 48px),var(--max));margin:auto;color:#9db8de;font-size:9px;text-transform:uppercase}

/* ---------- floating whatsapp ---------- */
.whatsapp{position:fixed;right:20px;bottom:20px;background:linear-gradient(135deg,#25d366,#12a850);color:#fff;border-radius:999px;height:58px;padding:0 20px;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;z-index:30;box-shadow:0 12px 30px #12a85059;animation:pulse 2.6s ease-in-out infinite;transition:transform .2s}
.whatsapp:hover{transform:translateY(-3px) scale(1.03)}
.whatsapp svg{width:26px;height:26px;fill:#fff;flex:none}
@keyframes pulse{0%,100%{box-shadow:0 12px 30px #12a85059}50%{box-shadow:0 12px 30px #12a85059,0 0 0 14px #25d36600}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:850px){
.links{display:none;position:absolute;top:88px;left:0;right:0;background:var(--ink);flex-direction:column;padding:22px;border-radius:0 0 18px 18px;color:#fff}
header.scrolled .links{color:#fff}
.links.open{display:flex}
.menu{display:block}
.split,.contact,.areas{grid-template-columns:1fr}
.heading{grid-template-columns:1fr;gap:15px}
.cards,.reviewgrid{grid-template-columns:1fr 1fr}
.gallery{grid-template-columns:1fr 1fr}
.benefits{grid-template-columns:1fr}
.benefits>div:nth-child(even){padding-left:0;border-left:0}
.foot{grid-template-columns:1fr 1fr}
.comparison{height:400px}
}
@media(max-width:560px){
.container,nav,.copyright{width:calc(100% - 32px)}
.section{padding:75px 0}
.hero{min-height:680px}
.hero h1{font-size:52px}
.hero p{font-size:15px}
.cards,.reviewgrid,.gallery,.row,.checks{grid-template-columns:1fr}
.gallery figure.wide{grid-column:auto}
.compare-box{padding:25px}
.comparison{height:320px}
.foot{grid-template-columns:1fr}
.hero .trust{line-height:2}
.state div{font-size:12px}
.whatsapp{padding:0 16px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important}
.reveal{opacity:1;transform:none;transition:none}
}

/* ---------- form success / error states ---------- */
.sent{text-align:center;padding:26px 6px}
.sent b{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:26px;box-shadow:0 10px 24px #1a6dff40}
.sent h3{font-size:24px;margin:16px 0 8px;color:var(--ink)}
.sent p{color:var(--gray);font-size:14px;max-width:360px;margin:0 auto 22px}
.formerr{display:block;text-align:center;color:#c0392b;font-size:11px;font-weight:bold;margin-top:10px}