:root { --navy:#071d31; --blue:#0b5cab; --sky:#eaf4fc; --green:#18a558; --ink:#14202b; --muted:#5d6c79; --line:#dbe5ec; --cream:#f7f5ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:24px; }
body { margin:0; background:#fff; color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

.site-header { height:82px; padding:0 clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; background:#fff; position:relative; z-index:10; border-bottom:1px solid #edf1f4; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:54px; height:54px; border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:0 2px 10px rgba(7,29,49,.16); }
.brand strong,.brand small { display:block; }
.brand strong { font-size:18px; color:var(--navy); }
.brand small { margin-top:2px; color:var(--muted); font-size:11px; letter-spacing:.05em; }
nav { display:flex; gap:32px; font-size:14px; font-weight:700; color:#394b59; }
nav a:hover { color:var(--blue); }
.header-call { background:var(--navy); color:#fff; padding:13px 21px; border-radius:8px; font-weight:800; font-size:14px; }

.hero { min-height:650px; position:relative; display:flex; align-items:center; overflow:hidden; background:var(--navy); }
.hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,22,38,.98) 0%,rgba(4,22,38,.9) 35%,rgba(4,22,38,.12) 68%,transparent 100%); }
.hero-content { position:relative; z-index:1; color:#fff; width:min(650px,90vw); margin-left:clamp(24px,8vw,128px); padding:72px 0; }
.eyebrow,.kicker { color:#1684df; text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:900; }
.eyebrow { color:#9bd5ff; display:flex; align-items:center; gap:9px; }
.eyebrow span { width:28px; height:2px; background:#23b56c; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { font-size:clamp(44px,5.4vw,75px); line-height:.98; letter-spacing:-.045em; max-width:620px; margin:22px 0 24px; }
.hero h1 em { color:#64c8ff; font-style:normal; display:block; }
.hero>div>p { font-size:19px; line-height:1.6; max-width:570px; color:#d7e6f1; }
.hero-actions,.final-cta>div:last-child { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 22px; border-radius:8px; font-weight:900; font-size:14px; transition:.2s transform,.2s filter; }
.button:hover { transform:translateY(-2px); filter:brightness(1.06); }
.whatsapp { background:var(--green); color:#fff; box-shadow:0 10px 28px rgba(24,165,88,.22); }
.whatsapp.dark { background:var(--navy); box-shadow:none; }
.phone { border:1px solid rgba(255,255,255,.42); color:#fff; background:rgba(255,255,255,.08); }
.hero-proof { display:flex; gap:24px; flex-wrap:wrap; margin-top:28px; color:#c8d9e5; font-size:12px; font-weight:700; }
.hero-proof span::first-letter { color:#58d18f; }

.quick-strip { width:min(1120px,92vw); margin:-38px auto 0; background:#fff; position:relative; z-index:3; border-radius:12px; box-shadow:0 18px 55px rgba(12,31,48,.13); display:grid; grid-template-columns:repeat(3,1fr); }
.quick-strip>div { display:flex; gap:16px; align-items:center; padding:26px 30px; border-right:1px solid var(--line); }
.quick-strip>div:last-child { border:0; }
.quick-strip b { color:#b8cbd9; font-size:28px; }
.quick-strip strong,.quick-strip span { display:block; }
.quick-strip strong { color:var(--navy); font-size:14px; margin-bottom:4px; }
.quick-strip span { color:var(--muted); font-size:12px; line-height:1.4; }

.section { padding:110px max(5vw,24px); max-width:1320px; margin:auto; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:44px; }
.section-heading h2,.brands-copy h2,.region h2,.process h2,.final-cta h2 { font-size:clamp(34px,4vw,52px); line-height:1.07; letter-spacing:-.035em; color:var(--navy); margin:12px 0 0; max-width:700px; }
.section-heading>p { max-width:470px; color:var(--muted); line-height:1.7; }
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.problem-card { min-height:270px; border:1px solid var(--line); padding:28px; position:relative; border-radius:10px; background:#fff; transition:.2s; }
.problem-card:hover { box-shadow:0 18px 44px rgba(13,49,77,.1); transform:translateY(-3px); border-color:#b9d5e9; }
.problem-number { position:absolute; right:22px; top:20px; color:#b9c8d3; font-size:12px; font-weight:900; }
.problem-icon { width:44px; height:44px; display:grid; place-items:center; background:var(--sky); color:var(--blue); border-radius:10px; font-size:21px; }
.problem-card h3 { color:var(--navy); font-size:19px; margin:23px 0 10px; }
.problem-card p { color:var(--muted); line-height:1.6; font-size:14px; min-height:66px; }
.problem-card a { color:var(--blue); font-weight:900; font-size:12px; }

.brands-section { display:grid; grid-template-columns:1.05fr .95fr; max-width:1380px; margin:auto; background:var(--sky); }
.brands-image { min-height:620px; overflow:hidden; }
.brands-image img { width:100%; height:100%; object-fit:cover; }
.brands-copy { padding:76px clamp(30px,6vw,85px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.brands-copy>p { color:var(--muted); line-height:1.7; font-size:16px; margin:22px 0; }
.brand-list { display:flex; gap:8px; flex-wrap:wrap; }
.brand-list span { border:1px solid #bcd3e3; background:#fff; padding:11px 17px; border-radius:6px; font-weight:900; color:var(--navy); }
.notice { border-left:3px solid #eaa735; padding:4px 0 4px 17px; margin:28px 0; }
.notice strong { font-size:13px; color:var(--navy); }
.notice p { color:var(--muted); font-size:13px; line-height:1.55; margin:5px 0 0; }

.compact { margin-bottom:38px; }
.why { padding-bottom:100px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.why-grid article { background:var(--cream); padding:30px; border-radius:10px; }
.why-grid article>span { font-size:26px; color:var(--blue); }
.why-grid h3 { color:var(--navy); margin:22px 0 10px; font-size:17px; }
.why-grid p { color:var(--muted); line-height:1.65; font-size:13px; }

.process { background:var(--navy); color:#fff; padding:80px max(6vw,24px); display:grid; grid-template-columns:.8fr 1.6fr auto; gap:60px; align-items:center; }
.kicker.light { color:#79cfff; }
.process h2,.final-cta h2 { color:#fff; }
.process ol { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.process li { display:flex; gap:13px; }
.process li>b { border:1px solid #49637a; border-radius:50%; min-width:30px; height:30px; display:grid; place-items:center; color:#82cef8; }
.process li span,.process li strong { display:block; }
.process li strong { margin-bottom:7px; font-size:14px; }
.process li span { color:#aebfcd; font-size:12px; line-height:1.5; }

.region { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; }
.region-copy>p { color:var(--muted); line-height:1.7; }
.city-list { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; margin-top:30px; }
.city-list span { padding:17px 0; border-bottom:1px solid var(--line); font-weight:900; color:var(--navy); }
.city-list b { color:#aac2d4; font-size:11px; margin-right:12px; }
.region-cta { background:var(--blue); color:#fff; border-radius:12px; padding:48px; box-shadow:18px 18px 0 var(--sky); }
.region-cta .pulse { display:block; width:12px; height:12px; border-radius:50%; background:#54df95; box-shadow:0 0 0 6px rgba(84,223,149,.16); margin-bottom:25px; }
.region-cta h3 { font-size:29px; line-height:1.2; }
.region-cta p { color:#d2e8f8; line-height:1.6; }
.region-cta .button { width:100%; margin-top:10px; }

.final-cta { margin:0 max(3vw,18px); background:#0b416b; color:#fff; border-radius:14px; padding:65px max(5vw,40px); display:flex; justify-content:space-between; align-items:center; gap:40px; }
.final-cta h2 { margin:10px 0; }
.final-cta p { color:#c9e2f2; margin:0; }
footer { padding:55px max(6vw,24px) 95px; display:grid; grid-template-columns:1fr 1.2fr auto; gap:30px; align-items:center; color:var(--muted); font-size:13px; }
footer>div:nth-of-type(2) { display:flex; gap:22px; font-weight:800; color:var(--navy); }
footer>small { grid-column:1/-1; border-top:1px solid var(--line); padding-top:24px; }
.mobile-actions { display:none; }

@media (max-width:1000px) {
  nav { display:none; }
  .problem-grid { grid-template-columns:repeat(2,1fr); }
  .brands-section { grid-template-columns:1fr; }
  .brands-image { min-height:420px; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .process { grid-template-columns:1fr; }
  .process ol { max-width:800px; }
  .region { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr 1fr; }
}

@media (max-width:680px) {
  body { padding-bottom:66px; }
  .site-header { height:70px; padding:0 18px; }
  .header-call { display:none; }
  .brand-logo { width:46px; height:46px; }
  .hero { min-height:710px; align-items:flex-end; }
  .hero>img { object-position:68% center; }
  .hero:after { background:linear-gradient(0deg,rgba(4,22,38,1) 0%,rgba(4,22,38,.94) 44%,rgba(4,22,38,.15) 100%); }
  .hero-content { margin:0; padding:280px 22px 50px; width:100%; }
  .hero h1 { font-size:43px; }
  .hero>div>p { font-size:16px; }
  .hero-actions { display:grid; }
  .button { width:100%; }
  .hero-proof { gap:10px 18px; }
  .quick-strip { grid-template-columns:1fr; margin:0; width:100%; border-radius:0; box-shadow:none; }
  .quick-strip>div { border-right:0; border-bottom:1px solid var(--line); padding:19px 24px; }
  .section { padding:75px 20px; }
  .section-heading { display:block; }
  .section-heading>p { margin-top:18px; }
  .section-heading h2,.brands-copy h2,.region h2,.process h2,.final-cta h2 { font-size:36px; }
  .problem-grid,.why-grid { grid-template-columns:1fr; }
  .problem-card { min-height:245px; }
  .brands-image { min-height:320px; }
  .brands-copy { padding:60px 22px; }
  .process { padding:65px 22px; gap:35px; }
  .process ol { grid-template-columns:1fr; }
  .city-list { grid-template-columns:1fr; }
  .region-cta { padding:35px 24px; box-shadow:8px 8px 0 var(--sky); }
  .final-cta { padding:48px 22px; display:block; }
  footer { grid-template-columns:1fr; padding:48px 22px 35px; }
  footer>div:nth-of-type(2) { justify-content:flex-start; }
  .mobile-actions { display:grid; grid-template-columns:1fr 1.35fr; position:fixed; z-index:20; bottom:0; left:0; right:0; height:66px; background:#fff; box-shadow:0 -8px 25px rgba(5,26,43,.18); }
  .mobile-actions a { display:grid; place-items:center; font-weight:900; color:var(--navy); }
  .mobile-actions a:last-child { background:var(--green); color:#fff; }
}