:root{
  --navy:#0b2c63;
  --navy-2:#071f46;
  --blue:#0f3d86;
  --gold:#f2c230;
  --text:#0b1220;
  --muted:#5b677a;
  --bg:#ffffff;
  --card:#0c2f5c0f;
  --border:rgba(255,255,255,.12);
  --shadow: 0 12px 30px rgba(0,0,0,.18);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius:999px;
  padding:.8rem 1.05rem;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn--lg{ padding:1rem 1.2rem; font-size:1.02rem; }
.btn--block{ width:100%; }

.btn--wa{
  background:linear-gradient(180deg, #2fe77c 0%, #16c56b 100%);
  color:#062113;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 10px 22px rgba(22,197,107,.22);
}
.btn--wa:hover{ filter:brightness(1.02); }

.btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.26);
}
.section .btn--ghost,
.section--alt .btn--ghost{
  color:var(--navy);
  border-color:rgba(11,44,99,.22);
}
.section .btn--ghost:hover,
.section--alt .btn--ghost:hover{ background:rgba(11,44,99,.06); }

/* TOPBAR */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,31,70,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 0;
  color:#fff;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand__logo{
  width:38px; height:38px;
  border-radius:12px;
  background:linear-gradient(180deg, var(--gold), #d9a70b);
  color:#1c1503;
  font-weight:900;
  display:grid; place-items:center;
  box-shadow:0 10px 18px rgba(242,194,48,.18);
}
.brand__name{
  font-weight:800;
  letter-spacing:.2px;
}
.brand__name small{
  font-weight:600;
  opacity:.78;
  margin-left:.35rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:.72rem;
}
.brand__accent{ color:var(--gold); }

.nav{
  display:flex;
  gap:1.2rem;
  font-weight:600;
  opacity:.92;
}
.nav a{ opacity:.95; }
.nav a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }

.topbar__cta{ display:flex; gap:.55rem; align-items:center; }

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  color:#fff;
}
.hamburger span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  margin:4px auto;
  border-radius:2px;
}

/* MOBILE MENU */
.mobilemenu{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(7,31,70,.95);
}
.mobilemenu__inner{
  padding:1rem 0 1.2rem;
  display:grid;
  gap:.75rem;
  color:#fff;
}
.mobilelink{
  padding:.75rem .85rem;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.mobilemenu__ctas{ display:grid; gap:.55rem; margin-top:.35rem; }

/* HERO */
.hero{
  position:relative;
  color:#fff;
  padding: clamp(2.2rem, 4.2vw, 3.6rem) 0 2rem;
  overflow:hidden;
  background:radial-gradient(1200px 600px at 20% 0%, rgba(242,194,48,.18), transparent 55%),
             radial-gradient(900px 500px at 90% 10%, rgba(63,153,255,.22), transparent 60%),
             linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
}
.hero__bg{
  position:absolute;
  inset:-1px;
  background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity:.22;
  pointer-events:none;
  mask-image: radial-gradient(500px 380px at 20% 10%, black 0%, transparent 70%);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:2rem;
  align-items:center;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-weight:600;
  font-size:.9rem;
}
.pill .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(242,194,48,.18);
}
.hero h1{
  margin:.9rem 0 .55rem;
  font-size: clamp(2.1rem, 3.4vw, 3.05rem);
  line-height:1.05;
  letter-spacing:-.03em;
}
.hero .accent{ color:var(--gold); }
.lead{
  margin:0 0 1.25rem;
  color:rgba(255,255,255,.86);
  font-size:1.05rem;
  line-height:1.5;
}
.hero__actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.micro{
  margin:.9rem 0 0;
  color:rgba(255,255,255,.74);
  font-size:.92rem;
}
.trustline{
  margin-top:1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.trustline__item{
  padding:.45rem .65rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
  font-size:.9rem;
}

.hero__media{ position:relative; }
.mediaCard{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.mediaCard img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
}
.mediaCard__cap{
  padding: .9rem 1rem 1rem;
  display:grid;
  gap:.15rem;
  background:linear-gradient(180deg, rgba(7,31,70,.0), rgba(7,31,70,.88));
}
.mediaCard__cap span{ color:rgba(255,255,255,.78); font-size:.92rem; }
.miniCards{
  display:flex;
  gap:.65rem;
  margin-top:.75rem;
}
.miniCard{
  flex:1;
  padding:.85rem .95rem;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.miniCard__title{ font-weight:900; color:var(--gold); display:block; }
.miniCard__sub{ color:rgba(255,255,255,.80); font-weight:600; font-size:.92rem; }

.hero__after{ margin-top:1rem; }
.scrollHint{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  opacity:.85;
  font-weight:700;
}
.scrollHint:hover{ opacity:1; text-decoration:underline; text-underline-offset:5px; }

/* SECTIONS */
.section{
  padding: clamp(2.3rem, 4.4vw, 3.4rem) 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(11,44,99,.04), rgba(11,44,99,.02));
  border-top:1px solid rgba(11,44,99,.06);
  border-bottom:1px solid rgba(11,44,99,.06);
}
.section__head{
  display:grid;
  gap:.35rem;
  margin-bottom:1.35rem;
}
.section__head h2{
  margin:0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing:-.02em;
}
.section__head p{
  margin:0;
  color:var(--muted);
  font-weight:600;
}

/* GRID + CARDS */
.grid{
  display:grid;
  gap:1rem;
}
.grid--2{ grid-template-columns: 1fr 1fr; }
.grid--4{ grid-template-columns: repeat(4, 1fr); }

.card{
  border-radius: var(--radius);
  border:1px solid rgba(11,44,99,.10);
  background:#fff;
  box-shadow: 0 14px 28px rgba(11,44,99,.06);
  padding: 1.15rem;
}
.card--soft{
  background:linear-gradient(180deg, rgba(11,44,99,.05), rgba(11,44,99,.02));
  border-color:rgba(11,44,99,.10);
}
.card--promo{
  padding:0;
  overflow:hidden;
}
.card--promo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.imageFrame{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(11,44,99,.10);
  background:rgba(11,44,99,.02);
}
.note{
  margin:.7rem 0 0;
  color:var(--muted);
  font-weight:600;
  font-size:.92rem;
}

/* LISTS */
.checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.6rem;
}
.checklist li{
  position:relative;
  padding-left:1.55rem;
  font-weight:650;
  color:#152238;
}
.checklist li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0;
  color:var(--gold);
  font-weight:900;
}
.checklist--dense{ gap:.5rem; }
.kicker{ margin:.2rem 0 .8rem; color:var(--navy); }

.ctaRow{
  margin-top:1rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.center{ margin-top:1.2rem; display:flex; justify-content:center; }

/* SERVICES */
.service{
  border-radius: var(--radius);
  border:1px solid rgba(11,44,99,.10);
  background:#fff;
  box-shadow: 0 14px 28px rgba(11,44,99,.06);
  padding: 1.1rem 1.1rem 1.15rem;
}
.service h3{
  margin:.1rem 0 .4rem;
  color:var(--navy);
  letter-spacing:-.01em;
}
.service p{ margin:0; color:var(--muted); font-weight:600; line-height:1.45; }

/* STEPS */
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:.85rem;
  margin: 1.2rem 0 1.2rem;
}
.step{
  border-radius: 16px;
  border:1px solid rgba(11,44,99,.12);
  background:#fff;
  padding: .95rem;
  display:flex;
  gap:.75rem;
  align-items:center;
}
.step__num{
  width:34px; height:34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, var(--gold), #d9a70b);
  color:#1c1503;
  font-weight:900;
}
.step__txt{ font-weight:750; color:#18243a; }

.split{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.split__cta{ display:flex; }

.muted{ color:var(--muted); font-weight:600; margin:.2rem 0 0; }
.strongLine{ margin:.9rem 0 0; font-weight:800; color:var(--navy); }

/* CONTACT */
.contact{ display:grid; gap:.9rem; }
.contact__row{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
}
.icon{
  width:38px; height:38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(242,194,48,.16);
  border:1px solid rgba(242,194,48,.22);
  flex:0 0 auto;
}
.contact__label{ font-size:.85rem; color:var(--muted); font-weight:700; }
.contact__value{ font-weight:800; color:var(--navy); line-height:1.35; }
.contact__value:hover{ text-decoration:underline; text-underline-offset:4px; }

.card--map{ padding: .9rem; }
.mapBox{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(11,44,99,.12);
  background: rgba(11,44,99,.02);
}
.mapBox iframe{
  width:100%;
  height: 330px;
  border:0;
}

/* FINAL CTA */
.finalCta{
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color:#fff;
  padding: 2.2rem 0;
}
.finalCta__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.2rem;
  flex-wrap:wrap;
}
.finalCta h2{ margin:0; letter-spacing:-.02em; }
.finalCta p{ margin:.35rem 0 0; color:rgba(255,255,255,.82); font-weight:600; }
.finalCta__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* FOOTER */
.footer{
  background:#051632;
  color:rgba(255,255,255,.82);
  padding: 1.25rem 0;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer__brand small{ display:block; color:rgba(255,255,255,.70); margin-top:.2rem; }
.footer__legal{ display:grid; gap:.2rem; text-align:right; }

/* MOBILE FIXED CTA */
.mobileCta{
  position:fixed;
  left:0; right:0;
  bottom:0;
  padding:.7rem .85rem max(.7rem, env(safe-area-inset-bottom));
  display:none;
  z-index:60;
  pointer-events:none;
}
.mobileCta__btn{
  pointer-events:auto;
  width: min(560px, 94vw);
  margin:0 auto;
  background:#0b2c63;
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
  border-radius: 18px;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.waIcon{
  width:38px; height:38px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, #2fe77c, #16c56b);
  color:#062113;
  font-weight:900;
}
.mobileCta__txt{ display:grid; gap:.1rem; }
.mobileCta__txt strong{ letter-spacing:.2px; }
.mobileCta__txt small{ color:rgba(255,255,255,.72); font-weight:650; }
.mobileCta__chev{
  margin-left:auto;
  font-size: 1.5rem;
  opacity:.85;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .hero__grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .topbar__cta{ display:none; }
  .hamburger{ display:inline-grid; place-items:center; }
}
@media (max-width: 640px){
  .grid--2{ grid-template-columns: 1fr; }
  .grid--4{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .footer__legal{ text-align:left; }
  .mobileCta{ display:block; }
  main{ padding-bottom: 84px; } /* space for mobile CTA */
}

/* CONTACT FORM */
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
.field{display:grid;gap:.35rem;}
label{font-weight:800;color:var(--navy);font-size:.92rem;}
input,select,textarea{font:inherit;padding:.78rem .85rem;border-radius:14px;border:1px solid rgba(11,44,99,.16);background:#fff;outline:none;}
textarea{min-height:120px;resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:rgba(242,194,48,.7);box-shadow:0 0 0 4px rgba(242,194,48,.18);}
.formActions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.8rem;}
.formStatus{margin-top:.6rem;font-weight:800;}
.formStatus--info{color:var(--muted);} .formStatus--ok{color:#0b6b3a;} .formStatus--err{color:#b42318;}
@media(max-width:640px){.formGrid{grid-template-columns:1fr;}}