:root{
  --bg:#ffffff;
  --alt:#f6f7fb;
  --ink:#0b1220;
  --muted:#5b6475;
  --line:rgba(15,23,42,.10);

  --navy:#0b1220;
  --navy2:#0f1b33;
  --orange:#ff6a00;
  --blue:#2b6cff;

  --shadow: 0 16px 50px rgba(11,18,32,.18);
  --shadow2: 0 10px 30px rgba(11,18,32,.14);
  --radius:18px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  text-rendering: optimizeLegibility;
}

a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 18px}

.topbar{
  position:sticky;top:0;z-index:10;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px}
.brand{display:flex;align-items:center;text-decoration:none}
.logo{
  height:64px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
  transform: translateZ(0);
}
.nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.nav a{
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  color:rgba(11,18,32,.88);
}
.nav a:hover{color:var(--navy)}
.nav__cta{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* HERO */
.hero{position:relative;min-height:620px;display:flex;align-items:center;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;z-index:0;
}
.hero__bg img{width:100%;height:100%;object-fit:cover;transform: scale(1.02)}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(1000px 520px at 15% 15%, rgba(43,108,255,.55), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(255,106,0,.45), transparent 58%),
    linear-gradient(90deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.55) 45%, rgba(11,18,32,.25) 100%);
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns: 1.2fr .8fr;
  gap:18px;
  padding: 64px 0;
}

.kicker{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.86);
  font-weight:700;
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
h1{
  font-size:46px;line-height:1.08;
  margin: 14px 0 10px;
  color:#fff;
  letter-spacing: -.3px;
}
.lead{
  margin:0 0 16px;
  color: rgba(255,255,255,.84);
  font-size:18px;
  max-width: 70ch;
}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin: 0 0 14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2); opacity:1}
.btn--primary{
  background: linear-gradient(135deg, var(--blue), var(--orange));
  color:#fff;
  border:none;
  box-shadow: var(--shadow);
}
.btn--ghost{
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
}
.btn--full{width:100%}

.hero__trust{
  display:grid;gap:10px;
  margin-top: 10px;
  color: rgba(255,255,255,.82);
  font-weight:600;
}
.trustItem{display:flex;align-items:center;gap:10px}
.trustItem .dot{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(135deg, var(--blue), var(--orange));
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* Hero card */
.hero__card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.32);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cardTop{padding:18px 18px 10px}
.cardTop h2{margin:0;font-size:20px;letter-spacing:-.2px}
.muted{color:var(--muted)}
.cardMid{padding: 10px 18px 0}
.miniRow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(15,23,42,.10)}
.miniLabel{color:var(--muted);font-weight:700;font-size:13px}
.miniValue{text-decoration:none;font-weight:800}
.cardBot{padding:18px;display:grid;gap:10px}

/* SECTIONS */
.section{padding:64px 0}
.sectionHead{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
h2{font-size:32px;margin:0;letter-spacing:-.2px}
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.tile{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(11,18,32,.06);
  transition: transform .18s ease;
}
.tile:hover{transform: translateY(-2px)}
.tile h3{margin:0 0 8px;font-size:18px}
.tile p{margin:0;color:var(--muted)}

.split{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:stretch;
}
.split__media img{
  width:100%;height:100%;object-fit:cover;
  border-radius: var(--radius);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(11,18,32,.10);
}
.split__copy{
  background: #fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(11,18,32,.06);
}
.bullets{display:grid;gap:8px;margin-top: 12px;color: rgba(11,18,32,.90);font-weight:700}

/* Dark section */
.section--dark{
  background: radial-gradient(900px 420px at 15% 10%, rgba(43,108,255,.28), transparent 60%),
              radial-gradient(900px 420px at 85% 10%, rgba(255,106,0,.22), transparent 60%),
              linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  color:#fff;
}
.sectionHead--dark h2{color:#fff}
.muted--dark{color: rgba(255,255,255,.78)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin: 0 0 18px}
.chips span{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-weight:700;
  font-size:13px;
}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mediaCard{
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}
.mediaCard img{width:100%;height:220px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
.mediaCard figcaption{padding:12px 14px;border-top:1px solid rgba(255,255,255,.10);font-weight:700;color: rgba(255,255,255,.84)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.step{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(11,18,32,.06);
}
.step__num{
  width:36px;height:36px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(43,108,255,.10);
  border: 1px solid rgba(43,108,255,.18);
  color: var(--blue);
  font-weight:900;
}

/* Quote */
.alt{background:var(--alt);border-top:1px solid rgba(15,23,42,.06);border-bottom:1px solid rgba(15,23,42,.06)}
.quoteWrap{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}
.quoteForm{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 18px 60px rgba(11,18,32,.10);
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
label{font-weight:800;font-size:14px}
input, select, textarea{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:12px 12px;
  font-size:16px;
  outline:none;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus{border-color: rgba(43,108,255,.55); box-shadow: 0 0 0 4px rgba(43,108,255,.14)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

.sideCard{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(11,18,32,.10);
  position: sticky;
  top: 96px;
}
.sideCard__img img{width:100%;height:220px;object-fit:cover;display:block}
.sideCard__body{padding:16px}
.miniRow--tight{border-top:1px solid rgba(15,23,42,.10);margin-top:12px;padding-top:12px}

/* Footer */
.footer{border-top:1px solid rgba(15,23,42,.10);padding:22px 0;background:#fff}
.footer__inner{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer__links{display:flex;gap:14px}
.footer__links a{text-decoration:none;color:var(--muted);font-weight:800}
.footer__links a:hover{color:var(--ink)}
.footer__small{color:var(--muted);font-size:13px}

/* Reveal */
/* Reveal animations (only when JS is active). If JS fails, content remains visible. */
.reveal{opacity:1;transform:none;transition: opacity .55s ease, transform .55s ease}
.js .reveal{opacity:0;transform: translateY(10px)}
.js .reveal.is-visible{opacity:1;transform: translateY(0)}

@media (max-width: 980px){
  .hero{min-height:auto}
  .hero__inner{grid-template-columns:1fr}
  h1{font-size:36px}
  .grid--2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .quoteWrap{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .sideCard{position:static}
  .logo{height:56px}
}


/* FIXES: logo visibility + WhatsApp button contrast + concise subpoints */
.topbar{background: rgba(255,255,255,.94);}

.brandTag{
  margin-left:12px;
  font-weight:800;
  font-size:13px;
  color: rgba(11,18,32,.72);
  letter-spacing: .2px;
}
.subpoints{
  margin: 0 0 14px;
  color: rgba(255,255,255,.88);
  font-weight:700;
  font-size:14px;
}

@media (max-width: 980px){
  .brandTag{display:none;}
  .logo{height:62px;}
}


/* WhatsApp button - readable and familiar */
.btn--whatsapp{
  background: #25D366;
  color: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(37,211,102,.22);
}
.btn--whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(37,211,102,.26);
}


.logoBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(11,18,32,.08);
}
.logo{
  height:58px; /* actual logo is cropped now */
  width:auto;
  display:block;
}
@media (max-width: 980px){
  .logo{height:52px;}
}


/* ===== FINAL LOGO FIX ===== */
.logoBadge{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.logo{
  height: 96px;   /* bigger clean logo */
  width: auto;
  background: transparent !important;
}

.topbar{
  background: #f2f2f2;   /* clean bar matching your design */
}


/* Smooth in-page scrolling (nav links) */
html{
  scroll-behavior: smooth;
}

/* Prevent sticky header from covering anchor sections */
[id]{
  scroll-margin-top: 110px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none !important;}
  .btn{transition:none !important;}
}


/* ===== Mobile header fix ===== */
@media (max-width: 700px){
  .topbar__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
  }

  .brand{
    width: 100%;
    justify-content: center;
  }

  .logoBadge{
    width: 100%;
    display:flex;
    justify-content: center;
  }

  .logo{
    height: 56px !important; /* keeps logo readable but not huge */
  }

  .nav{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .nav a{
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(15,23,42,.08);
  }

  .nav__cta{
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
  }
}


/* ===== Mobile text alignment / edge spacing fix ===== */
@media (max-width: 700px){

  /* Give consistent side padding to ALL content */
  .container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Extra breathing room for hero text */
  .hero__inner{
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Prevent any text touching screen edge */
  .hero__copy,
  .section,
  .sectionHead,
  .lead,
  h1, h2, h3, p{
    margin-left: 0;
  }

}


.btn, button { touch-action: manipulation; }