/* ═══════════════════════════════════════
   SMARTCORE — pages.css (inner pages)
   ═══════════════════════════════════════ */

/* ── Body override for light inner pages ── */
body.inner-page {
  background: white;
}

/* ── Active nav link ── */
.active-nav {
  color: var(--blue) !important;
}

/* ── Page Hero ── */
.page-hero {
  position: relative;
  background: var(--black);
  padding: calc(var(--nav-h) + 72px) 0 72px;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,196,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,196,255,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: rgba(255,255,255,.3);
}
.breadcrumb-nav a {
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb-nav a:hover { color: rgba(255,255,255,.7); }

.page-hero-label {
  font-family: 'Syne', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue);
}

.page-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.08;
  color: white;
  margin-bottom: 1rem;
}

.page-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.5);
  line-height: 1.75;
  font-weight: 300;
  max-width: 620px;
  margin: 0;
}

/* ── Service line sections ── */
.services-line-section {
  padding: 5rem 0;
  background: white;
}
.services-line-section.alt-bg {
  background: var(--surface);
}

.line-header {
  max-width: 680px;
  margin-bottom: 1rem;
}

.line-badge {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .9rem;
  border-radius: 100px;
  margin-bottom: .9rem;
}
.solutions-badge {
  background: rgba(21,101,216,.1);
  color: var(--blue);
  border: 1px solid rgba(21,101,216,.25);
}
.smartshift-badge {
  background: rgba(11,125,90,.1);
  color: #0b7d5a;
  border: 1px solid rgba(11,125,90,.25);
}

.line-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .6rem;
}

.line-desc {
  font-size: .98rem;
  color: var(--gray-mid);
  line-height: 1.7;
  margin: 0;
}

/* ── Service detail card ── */
.svc-detail-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.svc-detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
}

.sdc-img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #1565D8;
  flex-shrink: 0;
  transition: transform .4s ease;
}
.svc-detail-card:hover .sdc-img { transform: scale(1.03); }

.sdc-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sdc-icon {
  width: 46px; height: 46px;
  background: var(--blue-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.sdc-icon svg { width: 22px; height: 22px; stroke: var(--blue); }
.sdc-icon.smartshift-icon { background: rgba(11,125,90,.1); }
.sdc-icon.smartshift-icon svg { stroke: #0b7d5a; }

.sdc-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .6rem;
}

.sdc-desc {
  font-size: .9rem;
  color: var(--gray-mid);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.sdc-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.sdc-features li {
  font-size: .86rem;
  color: #555;
  line-height: 1.5;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sdc-features li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
}
.sdc-features li:last-child { border-bottom: none; }

.sdc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Syne', sans-serif;
  font-size: .84rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.sdc-cta:hover { color: var(--blue-dark); gap: 10px; }

/* ── Portfolio cards (portfolio.html) ── */
.portfolio-full-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  transition: all .3s ease;
}
.portfolio-full-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.1);
}

.pfc-img {
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--blue);
}

.pfc-body { padding: 1.75rem; }

.pfc-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .65rem;
  border-radius: 4px;
  margin-bottom: .6rem;
}
.pfc-tag.solutions { background: var(--blue-light); color: var(--blue); }
.pfc-tag.smartshift { background: rgba(11,125,90,.1); color: #0b7d5a; }

.pfc-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.pfc-desc {
  font-size: .9rem;
  color: var(--gray-mid);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.pfc-tech {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.pfc-tech span {
  background: var(--surface);
  font-size: .75rem;
  font-weight: 500;
  padding: .2rem .6rem;
  border-radius: 4px;
  color: #555;
}

/* ── CTA band ── */
.cta-band {
  padding: 6rem 2rem;
  background: var(--black);
}
.cta-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: white;
  margin-bottom: .8rem;
}
.cta-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-weight: 300;
}