/* assets/css/app.css */

/* ====== Base ====== */
:root{
  --brand:#0A66FF;
  --brand-600:#0957db;
  --ink:#0b1220;
  --muted:#64748b;
  --surface:#f7faff;
  --card:#ffffff;
  --line:#e5e7eb;
  --shadow: 0 10px 30px rgba(2, 6, 23, .08);
  --radius:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  padding-top: 76px; /* space for fixed nav */
}

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

/* ====== Helpers ====== */
.section{ padding: 78px 0; }
.section-sm{ padding: 56px 0; }
.lead{ color: var(--muted); }
.muted{ color: var(--muted); }
.h2{ font-weight: 800; letter-spacing: -.02em; }
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10,102,255,.08);
  color: var(--brand-600);
  font-weight: 600;
  font-size: 13px;
}

/* ====== Navbar ====== */
.navbar{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229,231,235,.65);
}
.navbar .nav-link{
  color: #0b1220;
  font-weight: 600;
  opacity: .86;
}
.navbar .nav-link:hover{ opacity: 1; }
.navbar.is-scrolled{
  box-shadow: 0 10px 25px rgba(2,6,23,.08);
  background: rgba(255,255,255,.92);
}
.btn-nav{
  background: var(--brand);
  color:#fff !important;
  padding: 10px 14px !important;
  border-radius: 999px;
  font-weight: 700;
}
.btn-nav:hover{ background: var(--brand-600); }

/* Fix toggler icon in bootstrap when background is light */
.navbar-toggler{ border: 0; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{
  filter: contrast(120%);
}

/* ====== Hero ====== */
.hero{
  position: relative;
  padding: 92px 0 60px;
  background:
    radial-gradient(1100px 480px at 15% 10%, rgba(10,102,255,.18), transparent 55%),
    radial-gradient(900px 420px at 85% 20%, rgba(99,102,241,.12), transparent 60%),
    linear-gradient(#ffffff, #f7faff);
  overflow:hidden;
}
.hero h1{
  font-size: clamp(2rem, 2.8vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 14px 0 12px;
}
.hero p{ color: var(--muted); font-size: 1.05rem; }
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.btn-primary{
  background: var(--brand);
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
}
.btn-primary:hover{ background: var(--brand-600); }
.btn-soft{
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(229,231,235,.8);
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  color: #0b1220;
}
.btn-soft:hover{ background: rgba(2,6,23,.09); }

.trust-row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.trust-pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: 0 10px 25px rgba(2,6,23,.05);
  font-weight: 700;
  font-size: 13px;
}

/* hero card */
.hero-card{
  background: var(--card);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.hero-card h5{ font-weight: 800; }
.hero-card .form-control,
.hero-card .form-select{
  border-radius: 12px;
  border: 1px solid rgba(229,231,235,.95);
  padding: 12px 12px;
}
.hero-card .form-control:focus,
.hero-card .form-select:focus{
  border-color: rgba(10,102,255,.35);
  box-shadow: 0 0 0 .2rem rgba(10,102,255,.12);
}

/* ====== Logo Strip ====== */
.logo-strip{
  padding: 22px 0;
  background: #fff;
  border-top: 1px solid rgba(229,231,235,.9);
  border-bottom: 1px solid rgba(229,231,235,.9);
}
.strip-title{
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 14px;
}
.marquee{ overflow:hidden; position:relative; }
.marquee-track{
  display:flex;
  gap: 26px;
  align-items:center;
  width: max-content;
  animation: marquee 18s linear infinite;
}
.marquee-track img{
  height: 38px;
  filter: grayscale(25%);
  opacity: .95;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-35%); }
}

/* ====== Cards ====== */
.card-pro{
  background: var(--card);
  border: 1px solid rgba(229,231,235,.95);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  height:100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-pro:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}
.icon-badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(10,102,255,.10);
  color: var(--brand-600);
  margin-bottom: 12px;
  font-size: 18px;
}
.card-pro h5{ font-weight: 800; }
.card-pro p{ color: var(--muted); margin: 0; }
.card-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin-top: 14px;
  font-weight: 800;
  color: var(--brand-600);
}
.card-link i{ font-size: 14px; }

/* case thumb */
.case-thumb{
  height: 160px;
  border-radius: 14px;
  background:
    radial-gradient(900px 280px at 10% 10%, rgba(10,102,255,.18), transparent 55%),
    linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02));
  border: 1px solid rgba(229,231,235,.9);
}
.badge-soft{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(229,231,235,.9);
  font-weight: 800;
  font-size: 12px;
  margin-top: 14px;
}

/* ====== Stats (Better) ====== */
.stats-wrap{
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(10,102,255,.14), transparent 60%),
    linear-gradient(#ffffff, #f7faff);
  border-top: 1px solid rgba(229,231,235,.9);
  border-bottom: 1px solid rgba(229,231,235,.9);
}
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-inner{
  background: #fff;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}
.stat-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.num{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.label{
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}
.stat-ic{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(10,102,255,.10);
  color: var(--brand-600);
  flex: 0 0 auto;
}
.stat-sub{
  margin-top: 12px;
  color: rgba(100,116,139,.95);
  font-weight: 600;
  font-size: 13px;
}

/* responsive stats */
@media (max-width: 991px){
  .stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px){
  .stats{ grid-template-columns: 1fr; }
}

/* ====== Process ====== */
.process{ background: #fff; }
.step-card{
  background: var(--card);
  border: 1px solid rgba(229,231,235,.95);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  height: 100%;
}
.step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.step-num{
  font-weight: 900;
  color: rgba(2,6,23,.35);
  letter-spacing:.06em;
}
.step-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(10,102,255,.10);
  color: var(--brand-600);
}
.step-card h6{
  font-weight: 900;
  margin-bottom: 6px;
}
.step-card p{ color: var(--muted); margin: 0; }

/* ====== CTA blocks ====== */
.cta{
  background:
    radial-gradient(900px 320px at 20% 10%, rgba(10,102,255,.16), transparent 55%),
    linear-gradient(135deg, rgba(2,6,23,.06), rgba(2,6,23,.02));
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 14px 34px rgba(2,6,23,.08);
}

/* ====== Team ====== */
.team{ background: var(--surface); border-top: 1px solid rgba(229,231,235,.9); }
.team-card{
  background: #fff;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
  text-align:center;
  height: 100%;
}
.team-photo{
  width: 88px;
  height: 88px;
  border-radius: 22px;
  overflow:hidden;
  margin: 0 auto 12px;
  border: 1px solid rgba(229,231,235,.95);
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-name{ font-weight: 900; }
.team-role{ color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 2px; }
.team-links{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top: 12px;
}
.team-links a{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(229,231,235,.9);
  color: #0b1220;
}
.team-links a:hover{
  background: rgba(10,102,255,.10);
  color: var(--brand-600);
  border-color: rgba(10,102,255,.25);
}

/* CEO card - separate and bigger */
.ceo-card{
  background: #fff;
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  text-align:center;
  position: relative;
}
.ceo-badge{
  position:absolute;
  top: 14px;
  left: 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background: rgba(10,102,255,.10);
  border: 1px solid rgba(10,102,255,.18);
  color: var(--brand-600);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
}
.ceo-photo{
  width: 110px;
  height: 110px;
  border-radius: 28px;
  overflow:hidden;
  margin: 16px auto 12px;
  border: 1px solid rgba(229,231,235,.95);
}
.ceo-photo img{ width:100%; height:100%; object-fit:cover; }
.ceo-name{ font-weight: 900; font-size: 18px; }
.ceo-role{ color: var(--muted); font-weight: 650; }

/* ====== Footer (FORCED BLACK) - upgraded to "screenshot style" ====== */
.footer.footer-dark{
  background: #000 !important;
  color: rgba(255,255,255,.86);
  padding: 64px 0 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* footer headings with underline like screenshot */
.footer-title{
  font-weight: 800;
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
}
.footer-title::after{
  content:"";
  display:block;
  width: 38px;
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  margin-top: 10px;
}

/* footer links */
.footer-links a{
  color: rgba(255,255,255,.78);
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-links a:hover{ color:#fff; }
.footer-links i{ color: rgba(255,255,255,.70); }

/* socials as round pills */
.footer-social{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
.footer-social:hover{
  background: rgba(10,102,255,.22);
  border-color: rgba(10,102,255,.25);
  color:#fff;
}

/* contact icon bubble */
.footer-contact .footer-ic{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  flex: 0 0 auto;
}

/* bottom bar */
.footer-bottom{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
}
.footer-bottom a{
  color: rgba(255,255,255,.78);
  font-weight: 650;
}
.footer-bottom a:hover{ color:#fff; }
.footer-bottom-links .sep{
  color: rgba(255,255,255,.35);
  margin: 0 8px;
}

/* keep old footer .divider safe (for pages still using it) */
.footer.footer-dark .divider{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer.footer-dark .muted{ color: rgba(255,255,255,.72); }

/* ====== Small fixes ====== */
.section-title{
  margin-bottom: 26px;
}
.section-title .lead{
  max-width: 820px;
}

/* =========================================================
   ACCREDITATION SECTION – EXACT "SCREENSHOT" LOOK
   Use with:
   <section class="section-sm accredit-section">
     <div class="container">
       <div class="accredit-card">
         <div class="row align-items-center g-4">
           <div class="col-lg-7"> ... text ... </div>
           <div class="col-lg-5">
             <div class="accredit-logos"> ... logo items ... </div>
           </div>
         </div>
       </div>
     </div>
   </section>
   ========================================================= */

.accredit-section{
  background: #fff;
  border-top: 1px solid rgba(229,231,235,.9);
}

.accredit-card{
  background: linear-gradient(135deg, #eef5ff, #f6f7fb);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 26px;
  padding: 34px 38px;
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}

/* right-side logo grid */
.accredit-logos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: center;
}

/* container for each logo (keeps things clean) */
.accredit-logo{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(229,231,235,.85);
  border-radius: 14px;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* PERFECT SIZE (not too big, not too small) */
.accredit-logo img{
  height: 54px;      /* main desktop size */
  width: 100%;
  max-width: 160px;  /* prevents huge logos */
  object-fit: contain;
  display:block;
}

/* tablet */
@media (max-width: 991px){
  .accredit-card{ padding: 28px; }
  .accredit-logos{ gap: 14px; }
  .accredit-logo{ padding: 10px; }
  .accredit-logo img{
    height: 50px;
    max-width: 150px;
  }
}

/* mobile */
@media (max-width: 575px){
  .accredit-card{
    padding: 22px;
    border-radius: 20px;
  }

  .accredit-logos{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
  }

  .accredit-logo{
    padding: 10px;
    border-radius: 14px;
  }

  .accredit-logo img{
    height: 48px;
    max-width: 140px;
  }
}