/* ===========================
   MaColX, global styles
   =========================== */

:root{
  --primary:#0d6efd;
  --dark:#0b2239;
  --accent:#198754;
  --muted:#6c757d;
  --card-radius:12px;
  --soft-shadow:0 10px 30px rgba(0,0,0,.08);
}

*,
*::before,
*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  color:#1f2937;
  background:#ffffff;
  line-height:1.55;
}

/* Navbar */
.navbar { backdrop-filter:saturate(1.2) blur(6px); }
.navbar-brand img{ height:36px; margin-right:8px; }

/* Section spacing */
.section{ padding:3.5rem 0; }
@media (min-width:1200px){ .section{ padding:4.25rem 0; } }

/* Utility */
.bg-cover{ background-size:cover; background-position:center; }
.object-fit-cover{ object-fit:cover; }

/* ---------------------------
   Hero section
   --------------------------- */
.hero-section{
  background:
    radial-gradient(80rem 40rem at -10% -10%, rgba(25,135,84,.06), transparent 60%),
    radial-gradient(80rem 40rem at 110% 110%, rgba(13,110,253,.06), transparent 60%);
}

.hero-section .row{ align-items:center; }
.hero-section .col-lg-7{
  display:flex; flex-direction:column; justify-content:center;
}
.hero-section .col-lg-5{
  display:flex; align-items:center;
}

.hero-card{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--soft-shadow);
  overflow:hidden;
}

.hero-metric{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:.5rem;
  align-items:baseline;
  margin:.4rem 0;
}
.metric-number{ font-weight:700; font-size:1.35rem; }
.metric-label{ color:var(--muted); }

/* Trust pills */
.trust-pill{
  font-size:.9rem;
  padding:.35rem .6rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:rgba(255,255,255,.7);
}

/* ---------------------------
   Pillars, cards, tiles
   --------------------------- */
.pillars .card{
  border:0;
  border-radius:var(--card-radius);
  box-shadow:var(--soft-shadow);
}

/* Equal height service and project cards */
.service-card,
.project-tile,
.card.h-100{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  min-height:290px;
  border-radius:var(--card-radius);
  border:0;
  box-shadow:var(--soft-shadow);
}

.service-card .card-body{ padding:1.25rem 1.25rem 1.35rem; }
.project-tile .card-body{ padding:1rem 1.1rem 1.3rem; }

/* Blog cards with tidy media */
.card .ratio{
  border-top-left-radius:var(--card-radius);
  border-top-right-radius:var(--card-radius);
  overflow:hidden;
}
.card .ratio img{ width:100%; height:100%; object-fit:cover; }

/* Content images inside posts */
.post-content img,
.card img,
article img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:.5rem;
}

.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote{ margin-bottom:.9rem; }

/* CTA */
.cta-box{
  background:linear-gradient(180deg, rgba(13,110,253,.06), rgba(25,135,84,.06));
  border-radius:16px;
  box-shadow:var(--soft-shadow);
}

/* Footer */
.footer{
  background:var(--dark);
  color:#fff;
  padding:30px 0;
}
.footer a{ color:#cfe2ff; text-decoration:none; }

/* Headings polish */
.section h2.h1{ font-weight:700; letter-spacing:-0.3px; }

/* Buttons, small lift on hover */
.btn{
  border-radius:10px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(13,110,253,.16);
}

/* Cards hover */
.project-tile:hover,
.service-card:hover{
  transform:translateY(-2px);
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 14px 38px rgba(0,0,0,.10);
}

/* Grid gutters a touch wider on xl for air */
@media (min-width:1200px){
  .row.g-4{ --bs-gutter-x:1.75rem; --bs-gutter-y:1.75rem; }
}

/* Blog teaser footer meta */
.card-footer{ border-top:0; background:transparent; }

/* Images in the hero right card */
.hero-card .ratio{ background:#f5f7fb; }

/* Make sections anchor friendly under sticky nav */
.section{ scroll-margin-top:100px; }

/* Subtle divider spacing under sections that follow a gray block */
.section.bg-light + .section{ padding-top:3rem; }

/* Tighten top padding on small screens */
@media (max-width:991.98px){
  .hero-section{ padding-top:2.25rem; padding-bottom:2.25rem; }
  .metric-number{ font-size:1.2rem; }
}

/* Make blog, services, projects grids breathe better on mobile */
@media (max-width:575.98px){
  .service-card,
  .project-tile{ min-height:unset; }
}
/* ===== Section title effects ===== */
.section-title{
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
  background: linear-gradient(90deg, #0d6efd 0%, #198754 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}

/* animated underline */
.section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 4px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(13,110,253,.25), rgba(25,135,84,.25));
  transition: width .7s cubic-bezier(.2,.7,.2,1);
}

/* reveal state set by JS when in view */
.section-title.reveal-in{
  transform: translateY(0);
  opacity: 1;
}
.section-title.reveal-in::after{
  width: 88%;
}

/* optional hover polish on large screens */
@media (hover: hover) and (pointer: fine){
  .section-title.reveal-in:hover::after{ width: 100%; }
}

/* ===== Section title reveal ===== */
.section-title{
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
  background: linear-gradient(90deg, #0d6efd 0%, #198754 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(15px);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(.23,1,.32,1),
    opacity 0.8s ease;
}

.section-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 4px;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(13,110,253,.35), rgba(25,135,84,.35));
  transition: width 1s cubic-bezier(.23,1,.32,1);
}

.section-title.reveal-in{
  transform: translateY(0);
  opacity: 1;
}
.section-title.reveal-in::after{
  width: 90%;
}

@media (hover: hover) and (pointer: fine){
  .section-title.reveal-in:hover::after{ width: 100%; }
}
/* ===== Grid item reveal, cards and tiles ===== */
.reveal-item{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.23,1,.32,1);
  will-change: transform, opacity;
}
.reveal-item.in{
  opacity: 1;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-item{ transition: none; transform: none; opacity: 1; }
}
/* ========= Partners strip hard reset / layout ========= */
.section-partners{
  position: relative;
  padding-top: 2.4rem;
  padding-bottom: 2.6rem;
  background:
    radial-gradient(900px 520px at 0% -20%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(900px 520px at 100% -10%, rgba(16,185,129,0.08), transparent 60%),
    linear-gradient(to bottom, #f9fafb, #eef2ff);
  overflow: hidden;
}

.partners-label{
  font-weight: 600;
  letter-spacing: .18em;
  color: #6b7280;
}

.partners-sub{
  color: #4b5563;
}

.partners-row{
  position: relative;
  z-index: 1;
}

.partners-marquee{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 10%, black 90%, transparent 100%);
}

.partners-track{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-block: .4rem;
  animation: mxPartnersScroll 32s linear infinite;
}

@keyframes mxPartnersScroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Each logo pill */
.partner-pill{
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  padding: .55rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,184,0.22), transparent 55%),
    radial-gradient(circle at 100% 120%, rgba(15,23,42,1), #020617);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.75),
    0 0 0 1px rgba(15,23,42,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease;
}

/* subtle inner glow */
.partner-glow{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 15% 0%, rgba(255,255,255,0.16), transparent 55%);
  opacity: .65;
  pointer-events: none;
}

/* Logo size clamp */
.partner-logo{
  position: relative;
  max-height: 38px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.15) brightness(1.08);
  opacity: .9;
  transition:
    filter .22s ease,
    opacity .22s ease,
    transform .22s ease;
}

/* Hover – subtle lift */
.partner-pill:hover{
  transform: translateY(-3px) translateZ(0);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.9),
    0 0 0 1px rgba(59,130,246,0.65);
  border-color: rgba(59,130,246,0.8);
}

.partner-pill:hover .partner-logo{
  filter: grayscale(0) brightness(1.12);
  opacity: 1;
  transform: translateY(-1px);
}

/* Dark mode tweak */
@media (prefers-color-scheme: dark){
  .section-partners{
    background:
      radial-gradient(900px 520px at 0% -20%, rgba(37,99,235,0.35), transparent 60%),
      radial-gradient(900px 520px at 100% -10%, rgba(16,185,129,0.28), transparent 60%),
      linear-gradient(to bottom, #020617, #020617 50%, #020617);
  }
  .partners-label{ color:#9ca3af; }
  .partners-sub{ color:#e5e7eb; opacity:.86; }
}

html[data-theme="dark"] .section-partners{
  background:
    radial-gradient(900px 520px at 0% -20%, rgba(37,99,235,0.40), transparent 60%),
    radial-gradient(900px 520px at 100% -10%, rgba(16,185,129,0.32), transparent 60%),
    linear-gradient(to bottom, #020617, #020617 50%, #020617);
}