:root{
  --blue:#07539a;
  --blue-dark:#063b73;
  --blue-bright:#1687d4;
  --orange:#f36c00;
  --orange-light:#ff8b2b;
  --ink:#12304f;
  --text:#607184;
  --line:#dde8f2;
  --soft:#f4f8fc;
  --white:#ffffff;
  --shadow:0 22px 60px rgba(7,83,154,.14);
  --radius:26px;
  --container:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(calc(100% - 40px),var(--container));margin:auto}

.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(7,83,154,.08);
  box-shadow:0 6px 24px rgba(7,83,154,.04);
}
.nav{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{
  width:188px;
  height:64px;
  display:flex;
  align-items:center;
}
.logo img{width:100%;height:100%;object-fit:contain}
.navlinks{display:flex;align-items:center;gap:6px}
.navlinks a{
  padding:11px 14px;
  border-radius:999px;
  font-size:.94rem;
  font-weight:700;
  transition:.2s ease;
}
.navlinks a:hover{background:#eef6fd;color:var(--blue)}
.navlinks a:last-child{background:var(--orange);color:#fff}
.navlinks a:last-child:hover{background:#db5f00}
.menu{
  display:none;
  width:44px;height:44px;
  padding:0;
  border:0;
  border-radius:13px;
  background:#edf6fd;
  cursor:pointer;
}
.menu span{
  display:block;
  width:20px;height:2px;
  margin:4px auto;
  background:var(--blue-dark);
  transition:.2s ease;
}

.hero{
  position:relative;
  min-height:700px;
  display:flex;
  align-items:center;
  padding:78px 0 90px;
  background:
    radial-gradient(circle at 7% 20%,rgba(22,135,212,.09),transparent 30%),
    radial-gradient(circle at 92% 15%,rgba(243,108,0,.08),transparent 28%),
    linear-gradient(180deg,#fff,#f7fbff);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:68px;
}
.tag{
  display:inline-block;
  margin-bottom:12px;
  color:var(--orange);
  font-size:.79rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.tag-light{color:#ffd4b5}
.hero h1{
  margin:0;
  font-size:clamp(3rem,5.7vw,5.4rem);
  line-height:1;
  letter-spacing:-.055em;
  color:var(--blue-dark);
}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-copy>p{
  max-width:650px;
  margin:25px 0 0;
  color:var(--text);
  font-size:1.08rem;
}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:999px;
  font-weight:800;
  transition:.2s ease;
}
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;box-shadow:0 12px 28px rgba(7,83,154,.2)}
.btn-light{background:#fff;border:1px solid var(--line);color:var(--blue-dark)}
.btn:hover{transform:translateY(-2px)}
.hero-location{
  display:flex;
  align-items:flex-start;
  gap:13px;
  max-width:630px;
  margin-top:32px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.85);
}
.pin-icon{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff1e6;
  color:var(--orange);
}
.hero-location strong{display:block;color:var(--blue-dark)}
.hero-location span{display:block;color:var(--text);font-size:.9rem}

.hero-logo-wrap{position:relative;min-height:490px;display:grid;place-items:center}
.hero-logo{
  width:min(100%,500px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  padding:30px;
  border-radius:42px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.hero-logo img{width:100%;height:100%;object-fit:contain}
.mini-card{
  position:absolute;
  z-index:2;
  min-width:165px;
  padding:12px 14px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 32px rgba(7,83,154,.14);
}
.mini-card strong{display:block;color:var(--blue-dark);font-size:.9rem}
.mini-card span{display:block;color:var(--text);font-size:.72rem}
.mini-card-1{left:-22px;top:20%}
.mini-card-2{right:-22px;bottom:18%}
.hero-shape{position:absolute;border-radius:50%;pointer-events:none}
.hero-shape-a{width:300px;height:300px;left:-170px;top:150px;border:48px solid rgba(22,135,212,.06)}
.hero-shape-b{width:230px;height:230px;right:-120px;top:70px;border:36px solid rgba(243,108,0,.07)}

.section{padding:96px 0}
.section-title{max-width:720px;margin:0 auto 48px;text-align:center}
.section-title h2,.area h2,.contact h2,.identity h2{
  margin:0;
  font-size:clamp(2rem,4vw,3.45rem);
  line-height:1.08;
  letter-spacing:-.04em;
}
.section-title p{margin:15px auto 0;color:var(--text)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  min-height:230px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 8px 24px rgba(7,83,154,.04);
  transition:.25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(7,83,154,.11);border-color:#b8d3e8}
.card-icon{
  width:56px;height:56px;
  display:grid;place-items:center;
  border-radius:17px;
  background:linear-gradient(145deg,#eaf5ff,#fff0e5);
  color:var(--orange);
  font-weight:800;
}
.card h3{margin:22px 0 8px;color:var(--blue-dark);font-size:1.22rem}
.card p{margin:0;color:var(--text)}

.identity{padding:28px 0 72px}
.identity-box{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:54px;
  align-items:center;
  padding:46px;
  border-radius:34px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 10%,rgba(243,108,0,.24),transparent 25%),
    linear-gradient(135deg,var(--blue-dark),#096bb8);
  box-shadow:0 28px 65px rgba(7,83,154,.20);
}
.identity-logo{min-height:245px;padding:22px;border-radius:25px;background:#fff;display:grid;place-items:center}
.identity-logo img{width:100%;height:215px;object-fit:contain}
.identity-text p{margin:18px 0 0;color:rgba(255,255,255,.79);font-size:1.04rem}

.area{background:var(--soft)}
.area-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center}
.area-intro{color:var(--text)}
.area-list{display:grid;gap:12px;margin-top:26px}
.area-item{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:11px 15px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#fff;
}
.area-item span{
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:12px;
  background:var(--orange);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
}
.area-item strong{color:var(--blue-dark)}
.area-visual{
  position:relative;
  min-height:430px;
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(145deg,#fff,#eaf5fe);
  overflow:hidden;
  box-shadow:0 18px 50px rgba(7,83,154,.10);
}
.circle{position:absolute;border-radius:50%}
.circle-1{width:270px;height:270px;right:38px;top:34px;background:rgba(22,135,212,.10)}
.circle-2{width:180px;height:180px;left:40px;bottom:35px;border:32px solid rgba(243,108,0,.10)}
.city-card{
  position:absolute;
  inset:auto 34px 34px 34px;
  padding:24px;
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 15px 36px rgba(7,83,154,.12);
}
.city-card span{display:block;color:var(--orange);font-size:.78rem;font-weight:800;letter-spacing:.1em}
.city-card strong{display:block;margin:4px 0;color:var(--blue-dark);font-size:1.35rem}
.city-card small{display:block;color:var(--text);line-height:1.5}

.contact{background:#fff}
.contact-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:36px;
  align-items:center;
  padding:44px;
  border-radius:32px;
  color:#fff;
  background:
    radial-gradient(circle at 94% 5%,rgba(255,139,43,.26),transparent 22%),
    linear-gradient(135deg,#063b73,#075fa9);
  box-shadow:0 28px 70px rgba(7,83,154,.20);
}
.contact-box p{margin:15px 0 0;color:rgba(255,255,255,.78)}
.whatsapp{
  min-width:180px;
  padding:18px;
  border-radius:18px;
  background:#fff;
  text-align:center;
}
.whatsapp span{display:block;color:var(--text);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.whatsapp strong{display:block;margin-top:3px;color:var(--orange);font-size:1.2rem}

.footer{padding:58px 0 28px;background:#032b53;color:#bfd3e5}
.footer-grid{display:grid;grid-template-columns:.8fr 1fr 1.25fr;gap:42px;align-items:start}
.footer-logo{width:190px;height:120px;padding:13px;border-radius:17px;background:#fff}
.footer-logo img{width:100%;height:100%;object-fit:contain}
.footer h2,.footer h3{margin:0 0 10px;color:#fff}
.footer p{margin:7px 0;font-size:.91rem}

@media (max-width:980px){
  .hero-grid,.area-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center}
  .hero-copy>p,.hero-location{margin-left:auto;margin-right:auto}
  .hero-buttons{justify-content:center}
  .hero-logo-wrap{min-height:420px}
  .hero-logo{width:min(82vw,470px)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .identity-box{grid-template-columns:1fr;padding:34px}
  .area-grid{gap:45px}
  .contact-box{grid-template-columns:1fr}
  .whatsapp{width:100%}
}
@media (max-width:760px){
  .container{width:min(calc(100% - 28px),var(--container))}
  .nav{min-height:72px}
  .logo{width:154px;height:54px}
  .menu{display:block}
  .navlinks{
    position:absolute;
    left:14px;right:14px;top:78px;
    display:none;
    padding:10px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow);
  }
  .navlinks.open{display:grid}
  .navlinks a{padding:12px 14px}
  .hero{min-height:auto;padding:52px 0 76px}
  .hero h1{font-size:clamp(2.7rem,13vw,4.2rem)}
  .hero-logo-wrap{min-height:350px}
  .hero-logo{width:min(88vw,380px);padding:20px;border-radius:30px}
  .mini-card{display:none}
  .section{padding:76px 0}
  .cards{grid-template-columns:1fr}
  .card{min-height:auto}
  .identity{padding:15px 0 58px}
  .identity-box{padding:24px;border-radius:25px}
  .identity-logo{min-height:190px}
  .identity-logo img{height:180px}
  .area-visual{min-height:340px}
  .contact-box{padding:29px 22px;text-align:center}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:440px){
  .hero-buttons{display:grid}
  .btn{width:100%}
  .hero-location{text-align:left}
  .area-visual{min-height:310px}
}