﻿/* SOLUTIONS PAGES */
/* ===== SOLUTIONS PAGE Ã¢â‚¬â€ REDESIGNED ===== */

/* --- Solutions Hero --- */
.sol-hero {
  position: relative;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(170deg, #050c18 0%, var(--ink-900) 40%, #0c1e38 100%);
  overflow: hidden;
  padding: clamp(8rem, 10vw, 11rem) 0 clamp(5rem, 6vw, 7rem);
  text-align: center;
}

.sol-hero .hero-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.sol-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(5, 12, 24, 0.6) 100%);
  z-index: 1;
  pointer-events: none;
}

.sol-hero .container {
  position: relative;
  z-index: 2;
}

.sol-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ma-metadata);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8cb4e6;
  margin-bottom: 24px;
  padding: 8px 20px;
  background: rgba(140, 180, 230, 0.1);
  border: 1px solid rgba(140, 180, 230, 0.2);
  border-radius: 40px;
}

.sol-hero__eyebrow i {
  color: #8cb4e6;
  font-size: var(--ma-metadata);
}

.cs-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ma-metadata);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  padding: 8px 20px;
  background: rgba(140, 180, 230, 0.1);
  border: 1px solid rgba(140, 180, 230, 0.2);
  border-radius: 40px;
}

.cs-hero__eyebrow i {
  color: var(--accent);
  font-size: var(--ma-metadata);
}

.sol-hero h1 {
  font-size: var(--ma-hero-title);
  font-weight: 800;
  color: #e8eef6;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}

.sol-hero p {
  font-size: var(--ma-body-text);
  color: var(--text-on-dark-muted);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 auto 48px;
}

.sol-hero__segments {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sol-hero__seg-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--text-on-dark-muted);
  transition: all 300ms var(--ease-quart);
  text-decoration: none;
  cursor: pointer;
}

.sol-hero__seg-link:hover {
  background: rgba(3, 70, 148, 0.12);
  border-color: rgba(3, 70, 148, 0.3);
  color: #e8eef6;
  transform: translateY(-2px);
}

.sol-hero__seg-num {
  font-size: var(--ma-metadata);
  font-weight: 700;
  color: inherit;
  letter-spacing: 0.05em;
}

.sol-hero__seg-name {
  font-size: var(--ma-body-text);
  font-weight: 600;
}

/* --- Sticky Segment Nav --- */
.sol-seg-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 400ms var(--ease-quart), opacity 400ms var(--ease-quart);
}

.sol-seg-nav.stuck {
  transform: translateY(0);
  opacity: 1;
}

.sol-seg-nav__inner {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.sol-seg-nav__tab {
  padding: 10px 20px;
  font-size: var(--ma-body-text);
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: all 200ms;
  text-decoration: none;
  cursor: pointer;
}

.sol-seg-nav__tab:hover {
  color: var(--ink-900);
  background: var(--ink-50);
}

.sol-seg-nav__tab.active {
  color: var(--primary);
  background: var(--primary-dim);
}

/* --- Segment Section --- */
.sol-segment {
  padding: clamp(5rem, 9vw, 7rem) 0;
  background: var(--surface);
}

.sol-segment--alt {
  background: var(--surface-alt);
}

.sol-segment__header {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 48px;
}

.sol-segment__num {
  font-size: var(--ma-xl-numerics-limited);
  font-weight: 800;
  color: var(--ink-50);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
  min-width: 80px;
}

.sol-segment__intro h2 {
  font-size: var(--ma-greeting-title);
  color: var(--ink-900);
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.sol-segment__intro p {
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 64ch;
}

/* --- Flagship Solution Card --- */
.sol-flagship {
  background: linear-gradient(145deg, #0a1628 0%, #0f2847 50%, #0c1e38 100%);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.sol-flagship::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(3, 70, 148, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.sol-flagship__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ma-metadata);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: rgba(3, 70, 148, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 24px;
}

.sol-flagship__badge svg {
  width: 16px;
  height: 16px;
}

.sol-flagship__content {
  position: relative;
  z-index: 1;
}

.sol-flagship h3 {
  font-size: var(--ma-pane-header);
  color: #e8eef6;
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.sol-flagship__lead {
  font-size: var(--ma-body-text);
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 16px;
}

.sol-flagship p {
  font-size: var(--ma-body-text);
  color: var(--text-on-dark-muted);
  line-height: 1.7;
  max-width: 72ch;
}

.sol-flagship .sol-details {
  margin-top: 20px;
  border-color: rgba(255, 255, 255, 0.08);
}

.sol-flagship .sol-details summary {
  color: #e8eef6;
}

.sol-flagship .sol-details summary:hover {
  color: var(--primary);
}

.sol-flagship .sol-details[open] summary {
  border-color: rgba(255, 255, 255, 0.1);
}

.sol-flagship .sol-details li {
  color: var(--text-on-dark-muted);
}

.sol-flagship .sol-pills span {
  color: var(--text-on-dark-muted);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

/* --- Compact Solution Card --- */
.sol-compact {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 1px solid var(--ink-100);
  transition: transform 400ms var(--ease-quart), box-shadow 400ms var(--ease-quart);
}

.sol-compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.08);
}

.sol-compact--full {
  margin-bottom: 24px;
}

.sol-compact__tag {
  display: inline-block;
  font-size: var(--ma-metadata);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: var(--primary-dim);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.sol-compact h3 {
  font-size: var(--ma-header);
  color: var(--ink-900);
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.sol-compact p {
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* --- Mini Solution Card --- */
.sol-mini {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid var(--ink-100);
  transition: transform 400ms var(--ease-quart), box-shadow 400ms var(--ease-quart);
}

.sol-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(10, 22, 40, 0.07);
}

.sol-mini--tall {
  display: flex;
  flex-direction: column;
}

.sol-mini__tag {
  display: inline-block;
  font-size: var(--ma-metadata-limited);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.sol-mini h3 {
  font-size: var(--ma-header);
  color: var(--ink-900);
  margin-bottom: 8px;
  font-weight: 500;
}

.sol-mini p {
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}

/* --- Shared: Details, Pills, Grids --- */
.sol-details {
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}

.sol-details summary {
  padding: 14px 18px;
  font-size: var(--ma-body-text);
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  transition: color 200ms;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sol-details summary::-webkit-details-marker {
  display: none;
}

.sol-details summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink-50);
  font-size: var(--ma-body-text);
  font-weight: 400;
  color: var(--text-secondary);
  transition: all 200ms;
}

.sol-details[open] summary::before {
  content: 'Ã¢Ë†â€™';
  background: var(--primary-dim);
  color: var(--primary);
}

.sol-details summary:hover {
  color: var(--primary);
}

.sol-details[open] summary {
  border-bottom: 1px solid var(--ink-100);
}

.sol-details ul {
  list-style: none;
  padding: 16px 18px;
  margin: 0;
}

.sol-details li {
  position: relative;
  padding-left: 18px;
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 8px;
}

.sol-details li:last-child {
  margin-bottom: 0;
}

.sol-details li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.6;
}

.sol-flagship .sol-details li::before {
  background: var(--primary);
  opacity: 0.8;
}

.sol-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.sol-pills span {
  display: inline-block;
  font-size: var(--ma-metadata);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-alt);
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--ink-100);
  white-space: nowrap;
}

.sol-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.sol-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

/* --- Solutions Responsive --- */
@media (max-width: 1024px) {
  .sol-segment__header {
    flex-direction: column;
    gap: 16px;
  }

  .sol-grid-2 {
    grid-template-columns: 1fr;
  }

  .sol-cards-grid--bento,
  .sol-cards-grid--split {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-cards-grid--bento .sol-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 960px) {
  .sol-hero__segments {
    flex-direction: column;
    align-items: center;
  }

  .sol-hero__seg-link {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .sol-grid-3 {
    grid-template-columns: 1fr;
  }

  .sol-seg-nav__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {

  .sol-cards-grid--bento,
  .sol-cards-grid--split,
  .sol-cards-grid--3,
  .sol-cards-grid {
    grid-template-columns: 1fr;
  }

  .sol-cards-grid--bento .sol-card:nth-child(1) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .sol-cards-grid--split .sol-card:nth-child(1) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .sol-cards-grid--split .sol-card:nth-child(2),
  .sol-cards-grid--split .sol-card:nth-child(3) {
    grid-column: auto;
  }

  .sol-card--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {

  .hero,
  #hero {
    min-height: 60vh;
    padding: clamp(6rem, 8vw, 9rem) 0 clamp(3rem, 4vw, 5rem);
  }

  .sol-hero {
    min-height: 60vh;
    padding: clamp(6rem, 8vw, 9rem) 0 clamp(3rem, 4vw, 5rem);
  }

  .sol-hero h1 {
    font-size: var(--ma-greeting-title);
  }

  .sol-flagship {
    padding: 24px;
    border-radius: 18px;
  }

  .sol-compact {
    padding: 24px;
  }

  .mega-menu-wide {
    display: none;
  }
}



/* ── Editorial intro ── */
/* ===== EDITORIAL INTRO (shared by About, Products) ===== */
.abt-intro {
  padding: clamp(5rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.abt-intro__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: start;
}

.abt-intro__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ma-metadata);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 1.5rem;
  background: var(--primary-dim);
  padding: 8px 16px;
  border-radius: 10px;
}

.abt-intro__label i {
  font-size: var(--ma-metadata);
}

.abt-intro__headline {
  font-size: var(--ma-greeting-title);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.abt-intro__headline span {
  color: var(--primary);
}

.abt-intro__lead {
  font-size: var(--ma-pane-header);
  line-height: 1.75;
  color: #334155;
  margin-bottom: 1.25rem;
}

.abt-intro__accent {
  position: relative;
  padding-left: 2rem;
  border-left: 3px solid var(--primary);
}

.abt-intro__body {
  font-size: var(--ma-body-text);
  line-height: 1.8;
  color: #475569;
}

.abt-intro__highlights {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0;
}

.abt-intro__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(10, 30, 60, 0.04);
  transition: all 0.3s;
}

.abt-intro__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(10, 30, 60, 0.08);
  border-color: #cbd5e1;
}

.abt-intro__item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ma-body-text);
  flex-shrink: 0;
}

.abt-intro__item-text h3,
.abt-intro__item-text h4 {
  font-size: var(--ma-body-text);
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 3px;
}

.abt-intro__item-text p {
  font-size: var(--ma-body-text);
  color: #64748b;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .abt-intro__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.prd-segment {
  padding: clamp(5rem, 8vw, 7rem) 0;
  background: #ffffff;
  position: relative;
}

.prd-segment--alt {
  background: #edf5fc;
}

.prd-segment--bg3 {
  background: #f4f5f7;
}

/* --- Section Header: Number + Title --- */
.prd-segment__header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.prd-segment__num {
  font-size: var(--ma-header);
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-dim);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.prd-segment__intro h2 {
  font-size: var(--ma-greeting-title);
  color: var(--ink-900);
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.prd-segment__tagline {
  font-size: var(--ma-metadata);
  color: var(--primary);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* --- Cohesive Hero: Image + Content Panel --- */
.prd-segment__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
  margin-bottom: 4rem;
}

.prd-segment--alt .prd-segment__hero {
  direction: rtl;
}

.prd-segment--alt .prd-segment__hero>* {
  direction: ltr;
}

.prd-segment__visual {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(10, 30, 60, 0.12);
}

.prd-segment__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 30, 60, 0.12), transparent 55%);
  pointer-events: none;
}

.prd-segment__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.prd-segment__visual:hover img {
  transform: scale(1.04);
}

/* Right-side content panel */
.prd-hero-panel {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 2.5rem;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px rgba(10, 30, 60, 0.07);
}

.prd-detail__overview h3 {
  font-size: var(--ma-body-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 1rem;
}

.prd-detail__overview p {
  font-size: var(--ma-body-text);
  line-height: 1.8;
  color: #3e4c5e;
}

.prd-detail__features h3 {
  font-size: var(--ma-body-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Full-width Offers Section */
.prd-detail__offers {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: 0 8px 32px rgba(10, 30, 60, 0.07);
}

.prd-detail__offers h3 {
  font-size: var(--ma-body-text);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.5rem;
  padding-left: 0.75rem;
}

.prd-detail__offers ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.prd-detail__offers li {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.5rem;
  font-size: var(--ma-body-text);
  line-height: 1.6;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  transition: background 200ms;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.prd-detail__offers li:nth-last-child(-n+2) {
  border-bottom: none;
}

.prd-detail__offers li::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--primary-dim);
}

.prd-detail__offers li::after {
  content: '\2713';
  position: absolute;
  left: calc(0.75rem + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ma-metadata);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.prd-detail__offers li:hover {
  background: rgba(59, 130, 246, 0.04);
}

/* Feature Tags */
.prd-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.prd-feature-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ma-metadata);
  font-weight: 600;
  color: #1e3a5f;
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  letter-spacing: 0.01em;
  transition: all 250ms;
}

.prd-feature-tags span:hover {
  background: var(--primary-dim);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--primary);
  transform: translateY(-2px);
  cursor: default;
}

/* --- Separator line between sections --- */
.prd-segment+.prd-segment::before {
  content: '';
  display: block;
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04) 30%, rgba(0, 0, 0, 0.04) 70%, transparent);
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* --- Legacy grid fallbacks --- */
.prd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.prd-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.prd-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  padding: 28px;
  transition: transform 400ms var(--ease-quart), box-shadow 400ms var(--ease-quart);
}

.prd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.08);
}

.prd-card--horizontal {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.prd-card--horizontal .prd-card__icon {
  flex-shrink: 0;
}

.prd-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-dim);
  color: var(--primary);
  border-radius: 12px;
  margin-bottom: 16px;
}

.prd-card h3 {
  font-size: var(--ma-header);
  font-weight: 500;
  color: var(--ink-900);
  margin-bottom: 8px;
  line-height: 1.3;
}

.prd-card p {
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.prd-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prd-card__specs span {
  font-size: var(--ma-metadata-limited);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-dim);
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .prd-segment__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .prd-segment--alt .prd-segment__hero {
    direction: ltr;
  }

  .prd-detail__offers ul {
    grid-template-columns: 1fr;
  }

  .prd-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .prd-grid,
  .prd-grid--2 {
    grid-template-columns: 1fr;
  }

  .prd-card--horizontal {
    flex-direction: column;
  }

  .prd-hero-panel {
    padding: 1.75rem;
    gap: 1.75rem;
  }

  .prd-detail__offers {
    padding: 1.75rem 2rem 1.75rem -16px;
  }
}

@media (max-width: 640px) {
  .prd-hero {
    min-height: 60vh;
    padding: clamp(6rem, 8vw, 9rem) 0 clamp(3rem, 4vw, 5rem);
  }

  .prd-hero h1 {
    font-size: var(--ma-greeting-title);
  }

  .prd-segment__header {
    flex-direction: column;
    gap: 12px;
  }

  .demo-hero {
    min-height: 60vh;
    padding: clamp(6rem, 8vw, 9rem) 0 clamp(3rem, 4vw, 5rem);
  }

  .demo-hero h1 {
    font-size: var(--ma-greeting-title);
  }

  .prd-detail__offers {
    padding: 1.5rem;
  }

  .prd-detail__offers li {
    padding-left: 3.25rem;
  }

  /* Left-align products page elements on mobile */
  .prd-hero,
  .prd-segment__header,
  .prd-segment__intro,
  .prd-detail,
  .prd-segment__visual,
  .prd-card,
  .sol-card--product {
    text-align: left !important;
  }

  .prd-hero h1,
  .prd-segment__intro h2,
  .prd-card h3,
  .sol-card--product h3 {
    text-align: left !important;
  }

  .prd-pills,
  .sol-card--product .sol-pills {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .prd-pills span,
  .sol-card--product .sol-pills span {
    display: inline-block;
    text-align: left !important;
  }
}



/* ── Solutions V2 ── */
/* ============ SOLUTIONS PAGE V2 ============ */

/* Segment Hero Ã¢â‚¬â€ Image + Text Side by Side */
.sol-segment__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

.sol-segment__hero-text {
  position: relative;
}

.sol-segment__hero-text .sol-segment__num {
  font-size: var(--ma-metadata);
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-dim);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 1rem;
  letter-spacing: 0.06em;
}

.sol-segment__hero-text h2 {
  margin-bottom: 1rem;
  font-size: var(--ma-greeting-title);
}

.sol-segment__hero-text p {
  color: var(--text-secondary);
  font-size: var(--ma-body-text);
  margin-bottom: 1.5rem;
  max-width: 48ch;
}

.sol-segment__hero-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.sol-segment__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  transition: transform 600ms var(--ease-expo);
}

.sol-segment__hero-img:hover img {
  transform: scale(1.03);
}

/* Segment Stats Row */
.sol-segment__stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sol-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  transition: all 300ms var(--ease-quart);
}

.sol-stat:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(3, 70, 148, 0.1);
  transform: translateY(-2px);
}

.sol-stat i {
  color: var(--primary);
  font-size: var(--ma-metadata);
}

.sol-stat strong {
  font-size: var(--ma-header);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.sol-stat span {
  font-size: var(--ma-metadata);
  color: var(--text-muted);
  font-weight: 500;
}

/* Solution Cards Grid */
.sol-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sol-cards-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Individual Solution Card */
.sol-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all 400ms var(--ease-quart);
  display: flex;
  flex-direction: column;
}

.sol-card:hover {
  border-color: rgba(3, 70, 148, 0.3);
  box-shadow: 0 8px 32px rgba(3, 70, 148, 0.1);
  transform: translateY(-6px);
}

.sol-card__icon {
  width: 48px;
  height: 48px;
  background: var(--primary-dim);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: all 300ms var(--ease-quart);
}

.sol-card:hover .sol-card__icon {
  background: var(--primary);
}

.sol-card__icon i {
  font-size: var(--ma-pane-header);
  color: var(--primary);
  transition: color 300ms;
}

.sol-card:hover .sol-card__icon i {
  color: #fff;
}

.sol-card h3 {
  font-size: var(--ma-header);
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.sol-card p {
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.sol-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
}

.sol-card__pills span {
  font-size: var(--ma-metadata-limited);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-dim);
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sol-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ma-metadata);
  font-weight: 600;
  color: var(--primary);
  transition: gap 300ms var(--ease-quart);
  margin-top: auto;
}

.sol-card__cta:hover {
  gap: 10px;
}

.sol-card__cta i {
  font-size: var(--ma-metadata);
  transition: transform 300ms;
}

.sol-card__cta:hover i {
  transform: translateX(3px);
}

/* ---- Bento Grid Variants ---- */
.sol-cards-grid--bento {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
}

.sol-cards-grid--bento .sol-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.sol-cards-grid--split {
  grid-template-columns: 2fr 1fr;
  grid-auto-flow: dense;
}

.sol-cards-grid--split .sol-card:nth-child(1) {
  grid-row: span 2;
}

.sol-cards-grid--split .sol-card:nth-child(2),
.sol-cards-grid--split .sol-card:nth-child(3) {
  grid-column: 2;
}

/* ---- Spotlight Hover Effect ---- */
.sol-card {
  position: relative;
  overflow: hidden;
}

.sol-card::before {
  content: '';
  position: absolute;
  top: var(--y, -999px);
  left: var(--x, -999px);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(3, 70, 148, 0.08) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 0;
}

.sol-card:hover::before {
  opacity: 1;
}

.sol-card>* {
  position: relative;
  z-index: 1;
}

/* ---- Animated Gradient Border for Featured ---- */
.sol-card--featured {
  grid-column: 1 / -1;
  background: linear-gradient(145deg, #f0f4fa 0%, #e8eef8 100%);
  border: none;
  padding: 2.5rem;
  position: relative;
  z-index: 1;
}

.sol-card--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1.5px;
  background: conic-gradient(from var(--angle, 0deg), rgba(3, 70, 148, 0.4), rgba(45, 212, 191, 0.4), rgba(3, 70, 148, 0.1), rgba(3, 70, 148, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: border-rotate 4s linear infinite;
}

@keyframes border-rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---- Staggered Reveal ---- */
.sol-cards-grid .sol-card.reveal {
  transition-delay: calc(var(--i, 0) * 80ms);
}

.sol-cards-grid .sol-card:nth-child(1) {
  --i: 0;
}

.sol-cards-grid .sol-card:nth-child(2) {
  --i: 1;
}

.sol-cards-grid .sol-card:nth-child(3) {
  --i: 2;
}

.sol-cards-grid .sol-card:nth-child(4) {
  --i: 3;
}

.sol-cards-grid .sol-card:nth-child(5) {
  --i: 4;
}

.sol-cards-grid .sol-card:nth-child(6) {
  --i: 5;
}

.sol-cards-grid .sol-card:nth-child(7) {
  --i: 6;
}

.sol-cards-grid .sol-card:nth-child(8) {
  --i: 7;
}

.sol-cards-grid .sol-card:nth-child(9) {
  --i: 8;
}

.sol-card--featured .sol-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ma-metadata);
  font-weight: 700;
  color: var(--primary);
  background: rgba(3, 70, 148, 0.1);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sol-card--featured .sol-card__badge i {
  font-size: var(--ma-metadata);
}

.sol-card--featured h3 {
  font-size: var(--ma-pane-header);
}

.sol-card--featured p {
  font-size: var(--ma-body-text);
  max-width: 64ch;
}

.sol-card__features {
  list-style: none;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

.sol-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ma-body-text);
  color: var(--text-secondary);
}

.sol-card__features li i {
  color: #059669;
  font-size: var(--ma-metadata);
}

/* Product Card Variant */
.sol-card--product {
  text-align: center;
  align-items: center;
}

.sol-card--product .sol-card__icon {
  width: 56px;
  height: 56px;
}

.sol-card--product .sol-card__icon i {
  font-size: var(--ma-section-title);
}

.sol-card--product .sol-card__pills {
  justify-content: center;
}

/* Products CTA centered */
.sol-products-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* Segment Alt Background */
.sol-segment--alt {
  background: var(--surface-alt);
}

/* Sol Segment Header (for segment 04) */
.sol-segment__header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.sol-segment__header .sol-segment__num {
  font-size: var(--ma-header);
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-dim);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.sol-segment__intro h2 {
  margin-bottom: 0.75rem;
}

.sol-segment__intro p {
  color: var(--text-secondary);
  max-width: 56ch;
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ Solutions Side-Nav Dots Ã¢â€â‚¬Ã¢â€â‚¬ */
.side-nav {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.side-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.15);
  cursor: pointer;
  transition: all 300ms var(--ease-quart);
  position: relative;
  border: 2px solid transparent;
}

.side-nav__dot.active {
  transform: scale(1.4);
  border-color: rgba(3, 70, 148, 0.25);
}

.side-nav__dot[data-seg="e-government"].active {
  background: #1A6FE0;
}

.side-nav__dot[data-seg="bfsi"].active {
  background: #0EA5A0;
}

.side-nav__dot[data-seg="enterprise"].active {
  background: #6C47E8;
}

.side-nav__label {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-900);
  color: #fff;
  font-size: var(--ma-metadata);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  letter-spacing: 0.02em;
}

.side-nav__dot:hover .side-nav__label {
  opacity: 1;
}

.side-nav__label::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ink-900);
}

@media (max-width: 1024px) {
  .side-nav {
    display: none;
  }
}

/* Ã¢â€â‚¬Ã¢â€â‚¬ Segment Accent Modifiers Ã¢â€â‚¬Ã¢â€â‚¬ */
.sol-segment--bg-blue {
  background: var(--surface-blue-light);
}

.sol-segment--bg-white {
  background: var(--surface);
}

/* Card left-border accents per segment */
.sol-segment--accent-blue .sol-card {
  border-left: 3px solid #1A6FE0;
}

.sol-segment--accent-teal .sol-card {
  border-left: 3px solid #0EA5A0;
}

.sol-segment--accent-purple .sol-card {
  border-left: 3px solid #6C47E8;
}

/* Stat icon colors per segment */
.sol-segment--accent-blue .sol-stat i {
  color: #1A6FE0;
}

.sol-segment--accent-teal .sol-stat i {
  color: #0EA5A0;
}

.sol-segment--accent-purple .sol-stat i {
  color: #6C47E8;
}

/* Stat hover per segment */
.sol-segment--accent-blue .sol-stat:hover {
  border-color: rgba(26, 111, 224, 0.3);
  box-shadow: 0 4px 12px rgba(26, 111, 224, 0.1);
}

.sol-segment--accent-teal .sol-stat:hover {
  border-color: rgba(14, 165, 160, 0.3);
  box-shadow: 0 4px 12px rgba(14, 165, 160, 0.1);
}

.sol-segment--accent-purple .sol-stat:hover {
  border-color: rgba(108, 71, 232, 0.3);
  box-shadow: 0 4px 12px rgba(108, 71, 232, 0.1);
}

/* Card icon & pill accent per segment */
.sol-segment--accent-blue .sol-card:hover .sol-card__icon {
  background: #1A6FE0;
}

.sol-segment--accent-teal .sol-card:hover .sol-card__icon {
  background: #0EA5A0;
}

.sol-segment--accent-purple .sol-card:hover .sol-card__icon {
  background: #6C47E8;
}

.sol-segment--accent-blue .sol-card__pills span {
  color: #1A6FE0;
  background: rgba(26, 111, 224, 0.08);
  border-color: rgba(26, 111, 224, 0.15);
}

.sol-segment--accent-teal .sol-card__pills span {
  color: #0EA5A0;
  background: rgba(14, 165, 160, 0.08);
  border-color: rgba(14, 165, 160, 0.15);
}

.sol-segment--accent-purple .sol-card__pills span {
  color: #6C47E8;
  background: rgba(108, 71, 232, 0.08);
  border-color: rgba(108, 71, 232, 0.15);
}

/* Hero eyebrow accent per segment */
.sol-segment--accent-blue .sol-segment__hero-text .sol-segment__num {
  color: #1A6FE0;
  background: rgba(26, 111, 224, 0.1);
}

.sol-segment--accent-teal .sol-segment__hero-text .sol-segment__num {
  color: #0EA5A0;
  background: rgba(14, 165, 160, 0.1);
}

.sol-segment--accent-purple .sol-segment__hero-text .sol-segment__num {
  color: #6C47E8;
  background: rgba(108, 71, 232, 0.1);
}

/* Spotlight hover per segment */
.sol-segment--accent-teal .sol-card::before {
  background: radial-gradient(circle, rgba(14, 165, 160, 0.12) 0%, transparent 60%);
}

.sol-segment--accent-purple .sol-card::before {
  background: radial-gradient(circle, rgba(108, 71, 232, 0.12) 0%, transparent 60%);
}

/* ============ RESOURCES PAGE V2 ============ */
.res-card__thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin: -1.5rem -1.5rem 1rem -1.5rem;
  width: calc(100% + 3rem);
}

.res-card--has-thumb .res-card__inner {
  padding-top: 0;
}


/* ── Solutions V2 responsive ── */
/* ============ RESPONSIVE Ã¢â‚¬â€ SOLUTIONS V2 ============ */
@media (max-width: 1024px) {
  .sol-segment__hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sol-segment__hero-img {
    max-height: 300px;
  }

  .sol-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-card--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {

  .sol-cards-grid,
  .sol-cards-grid--3 {
    grid-template-columns: 1fr;
  }

  .sol-segment__stats {
    flex-direction: column;
  }

  .sol-card__features {
    grid-template-columns: 1fr;
  }

  .cs-page__features {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .sol-segment {
    padding: 3rem 0;
  }

  .sol-card {
    padding: 1.25rem;
  }

  .sol-card--featured {
    padding: 1.5rem;
  }

  /* Left-align solutions page elements on mobile */
  .sol-segment__header,
  .sol-segment__intro,
  .sol-flagship,
  .sol-card,
  .sol-card--featured,
  .sol-card--product {
    text-align: left !important;
  }

  .sol-segment__intro h2,
  .sol-flagship h3,
  .sol-card h3,
  .sol-card--featured h3,
  .sol-card--product h3 {
    text-align: left !important;
  }

  .sol-pills,
  .sol-card--featured .sol-pills,
  .sol-flagship .sol-pills {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .sol-pills span {
    display: inline-block;
    text-align: left !important;
  }
}


/* ── e-governance.html consolidated ── */
/* --- solutions/e-governance.html --- */

.sol-intro {
  padding: clamp(3rem, 5vw, 4rem) 0;
  background: #fff
}

.sol-intro__text {
  max-width: 860px;
  margin: 0 auto;
  text-align: center
}

.sol-intro__lead {
  font-size: var(--ma-pane-header);
  line-height: 1.75;
  color: #334155
}

.sol-segment {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: #ffffff;
  position: relative
}

.sol-segment--alt {
  background: #edf5fc
}

.sol-segment--bg3 {
  background: #f4f5f7
}

.sol-segment+.sol-segment::before {
  content: '';
  display: block;
  width: 60%;
  max-width: 800px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}

.sol-segment__header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 2.5rem
}

.sol-segment__num {
  font-size: var(--ma-header);
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-dim);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  letter-spacing: .02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.sol-segment__intro h2 {
  font-size: var(--ma-greeting-title);
  color: var(--ink-900);
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -.02em;
  line-height: 1.2
}

.sol-segment__tagline {
  font-size: var(--ma-metadata);
  color: var(--primary);
  font-weight: 600;
  font-style: italic
}

.sol-segment__hero {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 2.5rem
}

.sol-segment--alt .sol-segment__hero {
  direction: rtl
}

.sol-segment--alt .sol-segment__hero>* {
  direction: ltr
}

.sol-segment__visual {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(10, 30, 60, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px
}

.sol-segment__visual i {
  font-size: var(--ma-xl-numerics-limited);
  opacity: .4
}

.sol-segment__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0
}

/* .sol-segment__visual--blue {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #3b82f6
}

.sol-segment__visual--teal {
  background: linear-gradient(135deg, #ccfbf1, #f0fdfa);
  color: #14b8a6
}

.sol-segment__visual--sky {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  color: #0284c7
}

.sol-segment__visual--violet {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  color: #8b5cf6
}

.sol-segment__visual--amber {
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  color: #f59e0b
}

.sol-segment__visual--slate {
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
  color: #64748b
}

.sol-segment__visual--dark {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #94a3b8
} */

.sol-hero-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px rgba(10, 30, 60, .07)
}

.sol-detail__overview h3,
.sol-detail__features h3,
.sol-detail__offers h3 {
  font-size: var(--ma-body-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: .85rem
}

.sol-detail__overview p {
  font-size: var(--ma-body-text);
  line-height: 1.8;
  color: #3e4c5e
}

.sol-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem
}

.sol-feature-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ma-metadata);
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 10px;
  letter-spacing: .01em;
  transition: all .25s
}

.sol-feature-tags span:hover {
  background: var(--primary-dim);
  border-color: rgba(59, 130, 246, .3);
  color: var(--primary)
}

.sol-detail__offers {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: 0 8px 32px rgba(10, 30, 60, .07)
}

.sol-detail__offers h3 {
  padding-left: 0.75rem;
}

.sol-detail__offers ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0
}

.sol-detail__offers li {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.5rem;
  font-size: var(--ma-body-text);
  line-height: 1.6;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  transition: background .2s;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.sol-detail__offers li:nth-last-child(-n+2) {
  border-bottom: none
}

.sol-detail__offers li::before {
  content: '';
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--primary-dim)
}

.sol-detail__offers li::after {
  content: '\2713';
  position: absolute;
  left: calc(.75rem + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ma-metadata);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.sol-detail__offers li:hover {
  background: rgba(59, 130, 246, .04)
}

@media(max-width:1024px) {
  .sol-segment__hero {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .sol-segment--alt .sol-segment__hero {
    direction: ltr
  }

  .sol-detail__offers ul {
    grid-template-columns: 1fr
  }

  .sol-detail__offers li:nth-last-child(-n+2) {
    border-bottom: 1px solid #e2e8f0
  }

  .sol-detail__offers li:last-child {
    border-bottom: none
  }
}

@media(max-width:768px) {
  .sol-hero-panel {
    padding: 1.5rem;
    gap: 1.25rem
  }

  .sol-detail__offers {
    padding: 1.5rem 1.5rem 1.5rem -16px
  }

  .sol-detail__offers li {
    padding-left: 3rem
  }

  .sol-segment__header {
    flex-direction: column;
    gap: 8px
  }

  .sol-segment__visual {
    min-height: 180px
  }

  .sol-segment__visual i {
    font-size: var(--ma-hero-title)
  }
}


/* ── solutions.html consolidated ── */
/* --- solutions.html --- */

.sg-intro {
  padding: clamp(5rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.sg-intro__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: start;
}

.sg-intro__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ma-metadata);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 1.5rem;
  background: var(--primary-dim);
  padding: 8px 16px;
  border-radius: 10px;
}

.sg-intro__label i {
  font-size: var(--ma-metadata);
}

.sg-intro__headline {
  font-size: var(--ma-greeting-title);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.sg-intro__headline span {
  color: var(--primary);
}

.sg-intro__lead {
  font-size: var(--ma-pane-header);
  line-height: 1.75;
  color: #334155;
  margin-bottom: 1.25rem;
}

.sg-intro__body {
  font-size: var(--ma-body-text);
  line-height: 1.8;
  color: #475569;
}

.sg-intro__accent {
  position: relative;
  padding-left: 2rem;
  border-left: 3px solid var(--primary);
}

.sg-intro__accent::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  width: 3px;
  height: 40px;
  background: var(--primary);
  border-radius: 3px;
}

.sg-intro__highlights {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.sg-intro__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(10, 30, 60, 0.04);
  transition: all 0.3s;
}

.sg-intro__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(10, 30, 60, 0.08);
  border-color: #cbd5e1;
}

.sg-intro__item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ma-body-text);
  flex-shrink: 0;
}

.sg-intro__item-text h3,
.sg-intro__item-text h4 {
  font-size: var(--ma-body-text);
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 3px;
}

.sg-intro__item-text p {
  font-size: var(--ma-body-text);
  color: #64748b;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .sg-intro__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .sg-intro__accent {
    padding-left: 1.5rem;
  }
}

.sg-segments {
  padding: clamp(4rem, 6vw, 6rem) 0;
  background: #f8fafc;
}

.sg-segments__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.sg-segments__header h2 {
  font-size: var(--ma-greeting-title);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.sg-segments__header p {
  color: #64748b;
  font-size: var(--ma-body-text);
  max-width: 560px;
  margin: 0 auto;
}

.sg-showcase {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 2rem 2.5rem;
  margin-bottom: 1rem;
  text-decoration: none;
  transition: all 0.3s;
}

.sg-showcase:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 28px rgba(3, 70, 148, 0.07);
  transform: translateX(4px);
}

.sg-showcase__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ma-pane-header);
  flex-shrink: 0;
}

.sg-showcase__content {
  flex: 1;
}

.sg-showcase__num {
  font-size: var(--ma-metadata-limited);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}

.sg-showcase__content h3 {
  font-size: var(--ma-header);
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.sg-showcase__content p {
  color: #64748b;
  font-size: var(--ma-body-text);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.sg-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sg-showcase__tags span {
  font-size: var(--ma-metadata-limited);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}

.sg-showcase__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.06);
  color: #3b82f6;
  font-size: var(--ma-body-text);
  flex-shrink: 0;
  transition: all 0.3s;
}

.sg-showcase:hover .sg-showcase__arrow {
  background: #3b82f6;
  color: #fff;
}

@media (max-width: 768px) {
  .sg-showcase {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
  }

  .sg-showcase__arrow {
    align-self: flex-end;
  }
}

.sg-capabilities {
  padding: clamp(4rem, 6vw, 6rem) 0;
  background: #fff;
}

.sg-capabilities__header {
  text-align: center;
  margin-bottom: 3rem;
}

.sg-capabilities__header h2 {
  font-size: var(--ma-greeting-title);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

.sg-capabilities__header p {
  color: #64748b;
  font-size: var(--ma-body-text);
  max-width: 560px;
  margin: 0 auto;
}

.sg-cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.sg-cap {
  padding: 2rem 1.5rem;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.3s;
  text-align: center;
}

.sg-cap:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px rgba(3, 70, 148, 0.08);
  transform: translateY(-2px);
}

.sg-cap__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ma-pane-header);
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}

.sg-cap h3,
.sg-cap h4 {
  font-size: var(--ma-body-text);
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.sg-cap p {
  font-size: var(--ma-body-text);
  color: #64748b;
  line-height: 1.6;
}

.sg-stats {
  padding: clamp(3rem, 4vw, 4rem) 0;
  background: linear-gradient(170deg, #050c18 0%, #0a1628 40%, #0c1e38 100%);
}

.sg-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}

.sg-stat__number {
  font-size: var(--ma-hero-title);
  font-weight: 800;
  color: #e8eef6;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.sg-stat__label {
  font-size: var(--ma-metadata);
  color: rgba(232, 238, 246, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .sg-cards {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }

  .sg-cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sg-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .sg-cap-grid {
    grid-template-columns: 1fr;
  }

  .sg-stats__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}


/* ── enterprise-solution.html consolidated ── */
/* --- solutions/enterprise-solution.html --- */

.sol-intro {
  padding: clamp(3rem, 5vw, 4rem) 0;
  background: #fff
}

.sol-intro__text {
  max-width: 860px;
  margin: 0 auto;
  text-align: center
}

.sol-intro__lead {
  font-size: var(--ma-pane-header);
  line-height: 1.75;
  color: #334155
}

.sol-segment {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: #ffffff;
  position: relative
}

.sol-segment--alt {
  background: #edf5fc
}

.sol-segment--bg3 {
  background: #f4f5f7
}

.sol-segment+.sol-segment::before {
  content: '';
  display: block;
  width: 60%;
  max-width: 800px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}

.sol-segment__header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 2.5rem
}

.sol-segment__num {
  font-size: var(--ma-header);
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-dim);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  letter-spacing: .02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.sol-segment__intro h2 {
  font-size: var(--ma-greeting-title);
  color: var(--ink-900);
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -.02em;
  line-height: 1.2
}

.sol-segment__tagline {
  font-size: var(--ma-metadata);
  color: var(--primary);
  font-weight: 600;
  font-style: italic
}

.sol-segment__hero {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 2.5rem
}

.sol-segment--alt .sol-segment__hero {
  direction: rtl
}

.sol-segment--alt .sol-segment__hero>* {
  direction: ltr
}

.sol-segment__visual {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(10, 30, 60, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px
}

.sol-segment__visual i {
  font-size: var(--ma-xl-numerics-limited);
  opacity: .4
}

.sol-segment__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0
}

.sol-segment__visual--blue {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #3b82f6
}

.sol-segment__visual--teal {
  background: linear-gradient(135deg, #ccfbf1, #f0fdfa);
  color: #14b8a6
}

.sol-segment__visual--sky {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  color: #0284c7
}

.sol-segment__visual--violet {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  color: #8b5cf6
}

.sol-segment__visual--amber {
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  color: #f59e0b
}

.sol-segment__visual--slate {
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
  color: #64748b
}

.sol-segment__visual--dark {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #94a3b8
}

.sol-hero-panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px rgba(10, 30, 60, .07)
}

.sol-detail__overview h3,
.sol-detail__features h3,
.sol-detail__offers h3 {
  font-size: var(--ma-body-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: .85rem
}

.sol-detail__overview p {
  font-size: var(--ma-body-text);
  line-height: 1.8;
  color: #3e4c5e
}

.sol-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem
}

.sol-feature-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ma-metadata);
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 5px 10px;
  letter-spacing: .01em;
  transition: all .25s
}

.sol-feature-tags span:hover {
  background: var(--primary-dim);
  border-color: rgba(59, 130, 246, .3);
  color: var(--primary)
}

.sol-detail__offers {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: 0 8px 32px rgba(10, 30, 60, .07)
}

.sol-detail__offers h3 {
  padding-left: 0.75rem;
}

.sol-detail__offers ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0
}

.sol-detail__offers li {
  position: relative;
  padding: 1rem 1.25rem 1rem 3.5rem;
  font-size: var(--ma-body-text);
  line-height: 1.6;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  transition: background .2s;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.sol-detail__offers li:nth-last-child(-n+2) {
  border-bottom: none
}

.sol-detail__offers li::before {
  content: '';
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--primary-dim)
}

.sol-detail__offers li::after {
  content: '\2713';
  position: absolute;
  left: calc(.75rem + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ma-metadata);
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.sol-detail__offers li:hover {
  background: rgba(59, 130, 246, .04)
}

@media(max-width:1024px) {
  .sol-segment__hero {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }

  .sol-segment--alt .sol-segment__hero {
    direction: ltr
  }

  .sol-detail__offers ul {
    grid-template-columns: 1fr
  }

  .sol-detail__offers li:nth-last-child(-n+2) {
    border-bottom: 1px solid #e2e8f0
  }

  .sol-detail__offers li:last-child {
    border-bottom: none
  }
}

@media(max-width:768px) {
  .sol-hero-panel {
    padding: 1.5rem;
    gap: 1.25rem
  }

  .sol-detail__offers {
    padding: 1.5rem 1.5rem 1.5rem -16px
  }

  .sol-detail__offers li {
    padding-left: 3rem
  }

  .sol-segment__header {
    flex-direction: column;
    gap: 8px
  }

  .sol-segment__visual {
    min-height: 180px
  }

  .sol-segment__visual i {
    font-size: var(--ma-hero-title)
  }
}



/* ══════════════════════════════════════════════════════════════
   SOLUTIONS PAGE — MISSING / STRENGTHENED RESPONSIVE RULES
   ══════════════════════════════════════════════════════════════ */

/* ── Solutions hub showcase list ── */
@media (max-width: 768px) {
  .sg-showcase {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
  }

  .sg-showcase__arrow {
    align-self: flex-end;
  }
}

/* ── SG capabilities grid: 4 → 2 → 1 ── */
@media (max-width: 1024px) {
  .sg-cap-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 560px) {
  .sg-cap-grid {
    grid-template-columns: 1fr;
  }
}

/* ── SG stats grid: 4 → 2 → 1 ── */
@media (max-width: 900px) {
  .sg-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .sg-stats__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .sg-stat__number {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

/* ── SG intro grid: 2-col → 1-col ── */
@media (max-width: 1024px) {
  .sg-intro__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ── Solutions sol-cards-grid: 3 → 2 → 1 ── */
@media (max-width: 1024px) {
  .sol-cards-grid,
  .sol-cards-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-card--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .sol-cards-grid,
  .sol-cards-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ── Bento grid specific ── */
@media (max-width: 900px) {
  .sol-cards-grid--bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-cards-grid--bento .sol-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 560px) {
  .sol-cards-grid--bento {
    grid-template-columns: 1fr;
  }

  .sol-cards-grid--bento .sol-card:nth-child(1) {
    grid-column: span 1;
  }
}

/* ── Split grid ── */
@media (max-width: 900px) {
  .sol-cards-grid--split {
    grid-template-columns: 1fr;
  }

  .sol-cards-grid--split .sol-card:nth-child(1) {
    grid-row: span 1;
  }

  .sol-cards-grid--split .sol-card:nth-child(2),
  .sol-cards-grid--split .sol-card:nth-child(3) {
    grid-column: auto;
  }
}

/* ── Sol hero segment links ── */
@media (max-width: 768px) {
  .sol-hero__segments {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    justify-items: stretch;
  }

  .sol-hero__seg-link {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    padding: 10px 16px;
  }
}

@media (max-width: 480px) {
  .sol-hero__segments {
    grid-template-columns: 1fr;
  }
}

/* ── Sol hero size ── */
@media (max-width: 768px) {
  .sol-hero {
    min-height: 55vh;
    padding: clamp(5.5rem, 9vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem);
  }

  .sol-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .sol-hero p {
    font-size: var(--ma-body-text);
    margin-bottom: 2rem;
  }
}

/* ── Sol segment header: flex → column ── */
@media (max-width: 768px) {
  .sol-segment__header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 2rem;
  }

  .sol-segment__num {
    font-size: clamp(2rem, 8vw, 3.5rem);
    min-width: auto;
  }
}

/* ── Sol grid-2 and grid-3 ── */
@media (max-width: 900px) {
  .sol-grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sol-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .sol-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Sol segment padding on mobile ── */
@media (max-width: 640px) {
  .sol-segment {
    padding: 3rem 0;
  }

  .sol-flagship {
    padding: 1.5rem;
    border-radius: 14px;
  }

  .sol-compact {
    padding: 1.5rem;
  }
}

/* ── Sol segment hero image ── */
@media (max-width: 768px) {
  .sol-segment__hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .sol-segment--alt .sol-segment__hero {
    direction: ltr;
  }

  .sol-segment__hero-img {
    max-height: 260px;
  }

  .sol-segment__stats {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ── Prd segment hero ── */
@media (max-width: 900px) {
  .prd-segment__hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .prd-segment--alt .prd-segment__hero {
    direction: ltr;
  }
}

@media (max-width: 640px) {
  .prd-segment__header {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 2rem;
  }

  .prd-hero-panel {
    padding: 1.25rem;
    gap: 1.5rem;
  }

  .prd-detail__offers {
    padding: 1.25rem;
  }

  .prd-detail__offers ul {
    grid-template-columns: 1fr;
  }
}

/* ── Prd grid ── */
@media (max-width: 900px) {
  .prd-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .prd-grid {
    grid-template-columns: 1fr;
  }

  .prd-card--horizontal {
    flex-direction: column;
  }
}

/* ── Sol detail offers: 2-col → 1-col ── */
@media (max-width: 900px) {
  .sol-detail__offers ul {
    grid-template-columns: 1fr;
  }

  .sol-detail__offers li:nth-last-child(-n+2) {
    border-bottom: 1px solid #e2e8f0;
  }

  .sol-detail__offers li:last-child {
    border-bottom: none;
  }
}

/* ── Sol hero panel padding ── */
@media (max-width: 640px) {
  .sol-hero-panel {
    padding: 1.25rem;
    gap: 1.25rem;
  }
}

/* ── Side nav: hide on mobile/tablet ── */
@media (max-width: 1100px) {
  .side-nav {
    display: none;
  }
}

/* ── Sol segment nav: scrollable ── */
@media (max-width: 768px) {
  .sol-seg-nav__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
  }

  .sol-seg-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .sol-seg-nav__tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: var(--ma-metadata);
    padding: 8px 14px;
  }
}
