:root{
  --ce-bg:#f3f7fc;
  --ce-surface:#ffffff;
  --ce-surface-2:#f8fbff;
  --ce-text:#0f172a;
  --ce-muted:#5b6b83;
  --ce-line:#dbe6f3;
  --ce-line-2:#e8eef7;
  --ce-navy:#0b1f3f;
  --ce-navy-2:#102b57;
  --ce-gold:#d7b24d;
  --ce-gold-2:#e6c76f;
  --ce-shadow:0 18px 40px rgba(8,22,48,.08);
  --ce-shadow-lg:0 26px 60px rgba(8,22,48,.12);
  --ce-radius:22px;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(215,178,77,.14), transparent 58%),
    radial-gradient(900px 420px at 100% 0%, rgba(16,43,87,.10), transparent 55%),
    linear-gradient(180deg,#f8fbff 0%, #f3f7fc 42%, #eff4fa 100%);
  color:var(--ce-text);
}
.container{max-width:1240px;padding:0 24px}
.muted,.sub,.lead,.step p,.feature p,.panel ul,.panel li,.k .t,.stat .lbl,.quote,.who{color:var(--ce-muted)!important}
.h1{font-size:clamp(2.6rem,4.5vw,4.6rem);line-height:1.02;margin:18px 0 18px;max-width:12ch}
.h2{font-size:clamp(2rem,3.1vw,3rem);line-height:1.08}
.h3{font-size:1.55rem;font-weight:800;color:var(--ce-text)}
.lead{font-size:1.16rem;line-height:1.75;max-width:62ch}
.section{padding:88px 0;position:relative}
.section__head{margin-bottom:28px;align-items:end}
.section__head .btn{margin-left:auto}

/* topbar */
.topbar{
  background:linear-gradient(90deg,#08182f 0%, #0b2244 55%, #0e2b56 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{min-height:58px;padding:10px 0}
.pill{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  padding:10px 16px;
  font-size:.82rem;
}
.toplink{font-weight:600;letter-spacing:.01em}

/* nav */
.nav{
  top:0;
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(15,23,42,.06);
  box-shadow:none;
}
.nav.is-scrolled{box-shadow:0 14px 36px rgba(15,23,42,.08)!important}
.nav__inner{min-height:84px;gap:22px}
.logo__mark{
  width:58px;height:58px;border-radius:18px;
  background:linear-gradient(135deg,#0b1f3f 0%, #173b72 100%);
  box-shadow:0 14px 30px rgba(11,31,63,.2);
  font-size:1.25rem;
}
.logo__text{font-size:1.75rem;font-weight:800;letter-spacing:-.03em}
.logo__sub{font-size:.8rem;letter-spacing:.12em;color:#66758d}
.menu{gap:4px}
.menu a{
  padding:12px 16px;
  border-radius:14px;
  color:#2d4261;
  font-weight:700;
  font-size:1rem;
}
.menu a:hover,.menu a.is-active{
  background:#eef4fb;
  color:var(--ce-navy);
}
.nav__actions .btn--navy{
  padding:13px 20px;
  border-radius:16px;
  background:linear-gradient(135deg,#081b39 0%, #12376d 100%);
}

/* buttons */
.btn{
  min-height:50px;
  padding:14px 20px;
  border-radius:16px;
  font-weight:800;
  letter-spacing:-.01em;
}
.btn--gold{
  background:linear-gradient(135deg,var(--ce-gold) 0%, var(--ce-gold-2) 100%)!important;
  color:#1f1808!important;
  box-shadow:0 16px 34px rgba(215,178,77,.24)!important;
}
.btn--navy{
  background:linear-gradient(135deg,#081b39 0%, #12376d 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 36px rgba(8,27,57,.18)!important;
}
.btn--ghost{
  background:#fff!important;
  color:var(--ce-navy)!important;
  border:1px solid var(--ce-line)!important;
}

/* hero */
.hero{
  padding:84px 0 54px;
  background:
    radial-gradient(720px 360px at 0% 10%, rgba(215,178,77,.16), transparent 58%),
    radial-gradient(760px 400px at 100% 0%, rgba(11,31,63,.09), transparent 60%),
    linear-gradient(180deg,#fbfdff 0%, #f4f8fd 100%);
}
.hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(350px,.88fr);gap:28px;align-items:stretch}
.h-eyebrow{
  padding:10px 16px;
  background:#fff;
  border:1px solid #e7edf7;
  box-shadow:0 10px 24px rgba(8,22,48,.05);
}
.hero__panel,
.card{
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  border:1px solid var(--ce-line)!important;
  border-radius:var(--ce-radius)!important;
  box-shadow:var(--ce-shadow)!important;
}
.hero__panel{padding:30px!important}
.hero__panel::before,
.card::before{display:none!important}
.hero__cta{margin-top:28px;gap:14px}
.badges{margin-top:18px;gap:12px}
.badge{
  background:#f8fbff!important;
  border:1px solid var(--ce-line)!important;
  border-radius:999px!important;
  padding:10px 14px!important;
  color:#314662!important;
  font-weight:700!important;
}
.kpi{gap:14px;margin-top:20px}
.kpi .k{
  padding:18px 16px!important;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%)!important;
  border:1px solid var(--ce-line)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.kpi .n{font-size:1.35rem!important}

/* trust bar */
.trustbar{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(15,23,42,.05);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.trustbar__row{padding:16px 0;gap:20px}
.trustbar__label{font-weight:800;color:var(--ce-navy)}
.trust-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--ce-line);
  font-weight:700;color:#304663;
}

/* grids/cards */
.stats,.grid3,.grid4,.timeline,.diff,.citygrid{gap:18px}
.stat,.feature,.panel,.step,.mini,.rc-card,.pricing__card,.trust-chip{padding:26px!important}
.stat .num{font-size:clamp(2.2rem,3.3vw,3.4rem);margin-bottom:6px}
.stat:before{width:200px;height:200px;background:radial-gradient(circle, rgba(215,178,77,.18) 0%, rgba(215,178,77,0) 64%);top:-50px;right:-30px;inset:auto auto auto auto}
.icon,.step .icon{
  width:54px!important;height:54px!important;border-radius:16px!important;
  background:linear-gradient(135deg, rgba(215,178,77,.16), rgba(11,31,63,.08))!important;
  border:1px solid rgba(215,178,77,.2);
  color:var(--ce-navy)!important;
  margin-bottom:18px!important;
}
.feature h3,.step h3,.panel h3{font-size:1.25rem;margin-bottom:10px}
.timeline{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{min-height:100%}

/* calculator */
.note{
  background:#fff9e8!important;
  border:1px solid #ecd89e!important;
  color:#5f5121!important;
  border-radius:16px;
  padding:14px 16px;
}
.mt-12{margin-top:18px!important}
.mt-14{margin-top:14px!important}
.mt-18{margin-top:20px!important}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust-chip{
  background:#fff;border:1px solid var(--ce-line);font-weight:700;color:#2a3f5f;
  box-shadow:0 10px 24px rgba(8,22,48,.05);
}
.trust-ico{width:28px;height:28px;border-radius:50%;background:#f3ebd0;color:#6a5311}

/* CTA band */
.cta-band{
  background:
    radial-gradient(520px 260px at 10% 10%, rgba(215,178,77,.22), transparent 58%),
    linear-gradient(135deg,#0a1d3a 0%, #112e5d 100%)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:var(--ce-shadow-lg)!important;
  padding:34px!important;
}
.cta-band .h3{color:#fff!important;font-size:2rem}
.cta-band .sub{color:rgba(255,255,255,.86)!important;max-width:60ch}
.cta-band .btn{margin-top:18px}

/* diff section */
.diff .panel ul{padding-left:20px;margin-top:12px}
.diff .panel li{margin:12px 0}
.mock{border-radius:18px;background:#f7fbff;border:1px solid var(--ce-line)}

/* locations */
.locations{padding:24px!important}
.citygrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.city{
  min-height:96px;
  display:flex;align-items:center;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%)!important;
  border:1px solid var(--ce-line)!important;
  border-radius:18px!important;
  padding:18px 44px 18px 18px!important;
  font-size:1.1rem;line-height:1.2;
}
.city:after{font-size:1.15rem;right:16px}
.city:hover{background:#fff6df!important;box-shadow:0 16px 28px rgba(8,22,48,.08)!important}

/* forms/modal */
.modal__panel{border-radius:28px!important;max-width:720px}
.form{padding:24px!important}
.form label{font-size:.95rem!important;font-weight:800!important;color:#163257!important}
.form input,.form textarea,.form select{
  margin-top:8px;border-radius:16px!important;border:1px solid var(--ce-line)!important;
  background:#fbfdff!important;padding:14px 16px!important;
}
.iconbtn{background:#f4f8fc!important;border:1px solid var(--ce-line)!important}

/* footer */
.footer{
  margin-top:46px;
  background:linear-gradient(180deg,#08172f 0%, #0a1e3d 100%)!important;
  color:#fff!important;
  position:relative;
  overflow:hidden;
}
.footer:before{
  content:"";position:absolute;inset:auto -10% 72% auto;width:420px;height:420px;
  background:radial-gradient(circle, rgba(215,178,77,.18) 0%, rgba(215,178,77,0) 68%);
  pointer-events:none;
}
.footer__grid{padding:36px 0 24px;gap:34px;position:relative}
.footer__brand .logo__mark{width:52px;height:52px;border-radius:16px}
.footer__title{font-size:1.2rem;font-weight:800;margin-bottom:2px}
.footer__heading{font-size:1.08rem;margin-bottom:14px}
.footer .muted{color:rgba(255,255,255,.78)!important;font-size:1rem;line-height:1.6}
.footer a{color:#fff!important;opacity:.92;font-weight:600;margin:0!important}
.footer__grid > div:nth-child(2), .footer__grid > div:nth-child(3){gap:12px}
.trust-strip{
  padding:20px 0!important;
  border-top:1px solid rgba(255,255,255,.1)!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
}
.trust-strip__item{
  padding:18px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.05)!important;
  gap:8px!important;
}
.trust-badge{font-size:1.05rem;font-weight:800;color:#fff!important}
.footer__bottom{padding:18px 0 4px;position:relative}
.footer__bottom .muted{font-size:.96rem}

/* whatsapp */
.whatsapp{
  right:22px!important;bottom:22px!important;
  padding:14px 16px!important;
  border-radius:16px!important;
  font-size:1rem;
  background:linear-gradient(135deg,#1fb955 0%, #17a34a 100%)!important;
  box-shadow:0 20px 34px rgba(0,0,0,.16)!important;
}

/* responsive */
@media (max-width:1180px){
  .menu a{padding:10px 12px;font-size:.94rem}
  .logo__text{font-size:1.55rem}
  .citygrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .section{padding:72px 0}
  .stats,.timeline,.trust-grid{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .citygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav__inner{min-height:74px}
  .menu{top:82px!important;padding:18px!important;gap:8px!important}
}
@media (max-width:680px){
  .container{padding:0 18px}
  .topbar__inner{gap:8px}
  .topbar__left,.topbar__right{width:100%;justify-content:flex-start}
  .logo__mark{width:50px;height:50px}
  .logo__text{font-size:1.5rem}
  .h1{max-width:none}
  .stats,.timeline,.trust-grid,.diff,.citygrid,.kpi{grid-template-columns:1fr!important}
  .section__head{align-items:flex-start}
  .section__head .btn{margin-left:0}
  .cta-band .h3{font-size:1.55rem}
  .whatsapp{padding:13px 14px!important;right:14px!important;bottom:14px!important}
}