/* =========================================================
   Services Page (sv-)
   File: /css/pages/services.css
   Premium / Investment-bank style + Image cards
========================================================= */

/* ---- safety vars (in case base missing) ---- */
:root{
  --bg:#f6f8fb;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#0b63f6;
  --border:#e6eaf2;
  --shadow: 0 18px 60px rgba(15,23,42,.10);
  --shadow2: 0 10px 30px rgba(15,23,42,.08);
}

/* =========================
   HERO
========================= */
.sv-hero{
  padding:78px 0 38px;
  background:
    radial-gradient(900px 450px at 12% 12%, rgba(11,99,246,.14), transparent 60%),
    radial-gradient(850px 420px at 92% 18%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}

.sv-bc{
  color:var(--muted);
  font-weight:900;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.sv-bc a{ color:inherit; text-decoration:none; }
.sv-bc a:hover{ color:var(--brand); text-decoration:underline; }
.sv-bc span{ opacity:.6; }

.sv-h1{
  margin:0 0 10px 0;
  font-size:44px;
  letter-spacing:-.6px;
  line-height:1.08;
  color:var(--text);
}
@media(max-width:560px){ .sv-h1{ font-size:34px; } }

.sv-sub{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  max-width:820px;
  font-size:1.05rem;
}

/* =========================
   GRID
========================= */
.sv-section{ padding:64px 0; background:var(--bg); }

.sv-grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media(max-width:980px){
  .sv-grid3{ grid-template-columns:1fr; }
}

/* =========================
   IMAGE CARDS (interactive)
========================= */
.sv-card{
  position:relative;
  display:block;
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  min-height:240px;
  background:#fff;
  border:1px solid rgba(230,234,242,.95);
  box-shadow: 0 10px 35px rgba(15,23,42,.06);
  transform:translateY(0);
  transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease;
}

/* image mode */
.sv-card--img{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-color: rgba(230,234,242,.70);
}

/* overlay (so text always readable) */
.sv-card--img::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 100%);
}

/* subtle glow */
.sv-card--img::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 22%, rgba(11,99,246,.22), transparent 62%),
    radial-gradient(520px 260px at 82% 18%, rgba(16,185,129,.16), transparent 62%);
  opacity:.55;
  pointer-events:none;
  filter: blur(8px);
}

/* inner content */
.sv-card__inner{
  position:relative;
  z-index:2;
  padding:22px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
}

.sv-card__h{
  font-weight:950;
  font-size:1.22rem;
  letter-spacing:-.2px;
  color:#fff;
}

.sv-card__p{
  margin:0;
  color:rgba(255,255,255,.86);
  line-height:1.7;
  font-size:.98rem;
  max-width:520px;
}

/* CTA text inside card */
.sv-card__more{
  margin-top:6px;
  font-weight:950;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.95;
}

/* hover */
.sv-card:hover{
  transform:translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(11,99,246,.26);
}
.sv-card:hover .sv-card__more{ opacity:1; }

/* backgrounds */
.sv-card--corporate{ background-image:url('/images/svc-corporate.jpg'); }
.sv-card--aiserve{   background-image:url('/images/svc-aiserve.jpg'); }
.sv-card--training{  background-image:url('/images/svc-training.jpg'); }

/* small top tag feel (optional look via border) */
.sv-card__inner{
  border-top:1px solid rgba(255,255,255,.10);
}

/* =========================
   CTA BAND
========================= */
.sv-cta{ padding:64px 0; background:var(--bg); }

.sv-ctaCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow: var(--shadow2);
  padding:22px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.sv-h2{
  margin:0;
  font-size:26px;
  font-weight:950;
  letter-spacing:-.3px;
  color:var(--text);
}

.sv-muted{
  margin-top:8px;
  color:var(--muted);
  line-height:1.7;
}

/* buttons */
.sv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  font-weight:950;
  text-decoration:none;
  background:var(--brand);
  color:#fff;
  border:1px solid transparent;
  box-shadow:0 14px 40px rgba(11,99,246,.18);
}
.sv-btn:hover{ filter:brightness(.98); }

.sv-btn--ghost{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .sv-card{ transition:none !important; }
}