/* ==============================================
   SAAS MLM SOFTWARE PAGE
   saas.css — Page-specific styles
   Theme: Cloud Blue / Indigo / Cyan
   Extends: css/style.css + css/header.css
   ============================================== */

/* ===========================
   CSS VARIABLES (SaaS Theme)
   =========================== */
:root {
  --saas-primary:       #4f46e5;   /* Indigo */
  --saas-primary-dark:  #3730a3;
  --saas-primary-light: #818cf8;
  --saas-secondary:     #0ea5e9;   /* Sky blue */
  --saas-secondary-dark:#0284c7;
  --saas-accent:        #06b6d4;   /* Cyan */
  --saas-accent2:       #8b5cf6;   /* Violet */
  --saas-success:       #10b981;
  --saas-warning:       #f59e0b;
  --saas-dark:          #0a0e1a;
  --saas-dark-2:        #0f1629;
  --saas-dark-3:        #162040;
  --saas-glass:         rgba(255,255,255,0.05);
  --saas-glass-border:  rgba(255,255,255,0.10);
  --saas-gradient:      linear-gradient(135deg, #4f46e5 0%, #0ea5e9 60%, #06b6d4 100%);
  --saas-gradient-hero: linear-gradient(155deg, #060b18 0%, #0a1128 30%, #111a3e 60%, #1e1b4b 100%);
  --saas-gradient-text: linear-gradient(135deg, #a5b4fc 0%, #67e8f9 100%);
  --saas-shadow-glow:   0 0 40px rgba(79,70,229,0.25);
  --saas-shadow-card:   0 4px 24px rgba(0,0,0,0.18);
  --saas-radius-sm:     8px;
  --saas-radius-md:     12px;
  --saas-radius-lg:     16px;
  --saas-radius-xl:     24px;
  --saas-transition:    0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ===========================
   BREADCRUMB
   =========================== */
.saas-breadcrumb-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.625rem 0;
}
.saas-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.4rem; list-style: none; margin: 0; padding: 0;
  font-size: 0.8125rem;
}
.saas-breadcrumb a { color: #64748b; font-weight: 500; text-decoration: none; transition: color var(--saas-transition); }
.saas-breadcrumb a:hover { color: var(--saas-primary); }
.saas-breadcrumb li[aria-current="page"] { color: #0f172a; font-weight: 600; }
.saas-breadcrumb i { color: #94a3b8; font-size: 0.65rem; }

/* ===========================
   EEAT AUTHOR BOX
   =========================== */
.saas-eeat-box {
  display: flex; gap: 1.25rem;
  background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(14,165,233,0.05));
  border: 1px solid rgba(79,70,229,0.15);
  border-left: 4px solid var(--saas-primary);
  border-radius: var(--saas-radius-lg);
  padding: 1.5rem; margin-bottom: 3rem;
  align-items: flex-start;
}
.saas-eeat-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--saas-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.375rem; flex-shrink: 0;
}
.saas-eeat-name { font-weight: 700; font-size: 0.9375rem; color: #0f172a; margin-bottom: 0.5rem; }
.saas-eeat-creds { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-bottom: 0.625rem; }
.saas-eeat-creds span { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: #64748b; font-weight: 500; }
.saas-eeat-creds i { color: var(--saas-primary); font-size: 0.75rem; }
.saas-eeat-bio { font-size: 0.875rem; color: #475569; line-height: 1.65; margin: 0; }

/* ===========================
   HERO SECTION
   =========================== */
.hero-saas {
  background: var(--saas-gradient-hero);
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 6rem 0 4rem;
}
.hero-saas::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(79,70,229,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 70%, rgba(6,182,212,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-saas-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(79,70,229,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,70,229,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.hero-saas-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative; z-index: 1;
}
.hero-saas-copy { display: flex; flex-direction: column; gap: 1.5rem; }

.hero-badge-saas {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(79,70,229,0.18);
  border: 1px solid rgba(79,70,229,0.35);
  border-radius: 9999px;
  padding: 0.4rem 1rem; width: fit-content;
  font-size: 0.8125rem; font-weight: 600; color: #a5b4fc;
}
.hero-badge-saas i { color: #67e8f9; font-size: 0.8rem; }

.hero-headline-saas {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900; color: #fff; line-height: 1.12;
  letter-spacing: -0.02em; margin: 0;
}
.saas-gradient-text {
  background: var(--saas-gradient-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub-saas {
  font-size: 1.0625rem; color: rgba(255,255,255,0.68);
  line-height: 1.75; margin: 0;
}
.hero-sub-saas strong { color: rgba(255,255,255,0.92); }
.hero-actions-saas {
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.hero-trust-saas {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.trust-pill {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9999px;
  padding: 0.3rem 0.875rem;
  font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.78);
}
.trust-pill i { color: #67e8f9; font-size: 0.75rem; }

/* Hero Stats Row */
.hero-saas-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1rem; margin-top: 1rem;
}
.saas-stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--saas-radius-md);
  padding: 1.25rem;
  text-align: center;
  transition: background var(--saas-transition);
}
.saas-stat-card:hover { background: rgba(255,255,255,0.09); }
.saas-stat-num {
  font-size: 1.875rem; font-weight: 900; color: #fff;
  line-height: 1; margin-bottom: 0.25rem;
}
.saas-stat-num span { color: #67e8f9; }
.saas-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.55); font-weight: 500; }

/* ===========================
   ARCHITECTURE DIAGRAM
   =========================== */
.saas-arch-diagram {
  background: rgba(15,22,41,0.85);
  border: 1px solid rgba(79,70,229,0.3);
  border-radius: var(--saas-radius-xl);
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  box-shadow: var(--saas-shadow-glow), 0 24px 64px rgba(0,0,0,0.5);
}
.saas-arch-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 1.5rem;
}
.saas-arch-dots { display: flex; gap: 6px; }
.saas-arch-dots span {
  width: 10px; height: 10px; border-radius: 50%;
}
.saas-arch-dots span:nth-child(1) { background: #ff5f57; }
.saas-arch-dots span:nth-child(2) { background: #ffbd2e; }
.saas-arch-dots span:nth-child(3) { background: #28ca41; }
.saas-arch-title {
  font-size: 0.8125rem; font-weight: 700; color: rgba(255,255,255,0.65);
  flex: 1; text-align: center; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Arch Flow */
.saas-arch-flow {
  display: flex; flex-direction: column; gap: 0.625rem;
}
.saas-arch-row {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
}
.saas-arch-node {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(79,70,229,0.18);
  border: 1px solid rgba(79,70,229,0.4);
  border-radius: var(--saas-radius-md);
  padding: 0.6rem 1.1rem;
  font-size: 0.8rem; font-weight: 600; color: #c7d2fe;
  white-space: nowrap;
  transition: background var(--saas-transition);
}
.saas-arch-node:hover { background: rgba(79,70,229,0.32); }
.saas-arch-node i { font-size: 0.85rem; color: #818cf8; }
.saas-arch-node.cloud  { border-color: rgba(6,182,212,0.5); background: rgba(6,182,212,0.12); color: #a5f3fc; }
.saas-arch-node.cloud i { color: #67e8f9; }
.saas-arch-node.engine { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.1); color: #fde68a; }
.saas-arch-node.engine i { color: #fbbf24; }
.saas-arch-node.db     { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.1); color: #a7f3d0; }
.saas-arch-node.db i   { color: #34d399; }
.saas-arch-node.dash   { border-color: rgba(139,92,246,0.5); background: rgba(139,92,246,0.12); color: #ddd6fe; }
.saas-arch-node.dash i { color: #a78bfa; }
.saas-arch-arrow {
  color: rgba(255,255,255,0.3); font-size: 0.75rem;
}
.saas-arch-multi {
  display: flex; gap: 0.5rem; align-items: center; justify-content: center;
}

/* Arch Badges */
.saas-arch-badges {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center; margin-top: 1.25rem;
  padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.07);
}
.saas-arch-badge {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.6);
}
.saas-arch-badge i { font-size: 0.7rem; color: #67e8f9; }

/* Uptime bar */
.saas-uptime-bar {
  margin-top: 1.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--saas-radius-md);
  padding: 0.875rem 1rem;
}
.saas-uptime-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.55);
  margin-bottom: 0.5rem;
}
.saas-uptime-label span:last-child { color: #34d399; font-size: 0.875rem; font-weight: 800; }
.saas-uptime-track {
  height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 9999px; overflow: hidden;
}
.saas-uptime-fill {
  height: 100%; width: 99.9%; border-radius: 9999px;
  background: linear-gradient(90deg, #10b981, #34d399);
  position: relative;
}
.saas-uptime-fill::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}

/* ===========================
   SECTION: WHAT IS / DEFINITION
   =========================== */
.saas-definition-section {
  padding: 5rem 0;
  background: #fff;
}
.saas-section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(79,70,229,0.07);
  border: 1px solid rgba(79,70,229,0.18);
  border-radius: 9999px;
  padding: 0.3rem 0.875rem;
  font-size: 0.78rem; font-weight: 700; color: var(--saas-primary);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.saas-section-label i { font-size: 0.75rem; }
.saas-section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900; color: #0f172a; line-height: 1.2;
  margin-bottom: 1rem; letter-spacing: -0.02em;
}
.saas-section-title span { color: var(--saas-primary); }
.saas-section-intro {
  font-size: 1.0625rem; color: #475569; line-height: 1.75; margin-bottom: 2rem;
}

/* Definition Split */
.saas-def-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  align-items: start;
}
.saas-def-content p { font-size: 1rem; color: #475569; line-height: 1.8; margin-bottom: 1.25rem; }
.saas-def-content strong { color: #0f172a; }
.saas-highlight-box {
  background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(14,165,233,0.06));
  border: 1px solid rgba(79,70,229,0.15);
  border-left: 4px solid var(--saas-primary);
  border-radius: var(--saas-radius-lg);
  padding: 1.5rem; margin-top: 1.5rem;
}
.saas-highlight-box h4 { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin-bottom: 0.75rem; }
.saas-highlight-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.saas-highlight-box ul li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #475569; }
.saas-highlight-box ul li i { color: var(--saas-primary); font-size: 0.8rem; flex-shrink: 0; }

/* Comparison Cards */
.saas-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.saas-compare-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.saas-compare-card.featured {
  border-color: var(--saas-primary);
  background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(14,165,233,0.04));
  box-shadow: 0 4px 20px rgba(79,70,229,0.12);
}
.saas-compare-icon {
  width: 44px; height: 44px; border-radius: var(--saas-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; margin-bottom: 1rem;
}
.saas-compare-card.featured .saas-compare-icon { background: var(--saas-gradient); color: #fff; }
.saas-compare-card:not(.featured) .saas-compare-icon { background: #f1f5f9; color: #64748b; }
.saas-compare-card h4 { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin-bottom: 0.75rem; }
.saas-compare-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.saas-compare-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8375rem; color: #64748b; }
.saas-compare-list li.good { color: #0f172a; }
.saas-compare-list li i.good { color: var(--saas-primary); }
.saas-compare-list li i.bad  { color: #f87171; }

/* ===========================
   SECTION: HOW IT WORKS
   =========================== */
.saas-how-section {
  padding: 5rem 0;
  background: #f8fafc;
}
.saas-steps-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.saas-step-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.75rem;
  position: relative; overflow: hidden;
  transition: box-shadow var(--saas-transition), transform var(--saas-transition);
}
.saas-step-card:hover { box-shadow: 0 8px 32px rgba(79,70,229,0.12); transform: translateY(-3px); }
.saas-step-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--saas-gradient);
}
.saas-step-num {
  font-size: 2.5rem; font-weight: 900; color: rgba(79,70,229,0.12);
  line-height: 1; margin-bottom: 0.875rem; font-family: inherit;
}
.saas-step-icon {
  width: 44px; height: 44px; border-radius: var(--saas-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; margin-bottom: 1rem;
  background: var(--saas-gradient); color: #fff;
}
.saas-step-card h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.625rem; }
.saas-step-card p { font-size: 0.875rem; color: #475569; line-height: 1.7; margin: 0; }

/* ===========================
   SECTION: USE CASES
   =========================== */
.saas-usecases-section {
  padding: 5rem 0;
  background: #fff;
}
.saas-usecases-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.saas-usecase-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.75rem;
  transition: box-shadow var(--saas-transition), border-color var(--saas-transition), transform var(--saas-transition);
}
.saas-usecase-card:hover {
  box-shadow: 0 8px 32px rgba(79,70,229,0.10);
  border-color: rgba(79,70,229,0.3);
  transform: translateY(-2px);
}
.saas-usecase-icon {
  width: 52px; height: 52px; border-radius: var(--saas-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem; color: #fff; margin-bottom: 1.125rem;
}
.saas-usecase-card h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.625rem; }
.saas-usecase-card p  { font-size: 0.875rem; color: #475569; line-height: 1.7; margin-bottom: 1rem; }
.saas-usecase-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.saas-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(79,70,229,0.07); color: var(--saas-primary);
  border-radius: 9999px; padding: 0.2rem 0.625rem;
  font-size: 0.72rem; font-weight: 600;
}

/* ===========================
   SECTION: BENEFITS
   =========================== */
.saas-benefits-section {
  padding: 5rem 0;
  background: var(--saas-gradient-hero);
  position: relative; overflow: hidden;
}
.saas-benefits-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(79,70,229,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.saas-benefits-section .saas-section-label { background: rgba(165,180,252,0.15); border-color: rgba(165,180,252,0.25); color: #a5b4fc; }
.saas-benefits-section .saas-section-title { color: #fff; }
.saas-benefits-section .saas-section-title span { color: #67e8f9; }
.saas-benefits-section .saas-section-intro { color: rgba(255,255,255,0.65); }
.saas-benefits-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: 3rem; position: relative; z-index: 1;
}
.saas-benefit-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--saas-radius-lg);
  padding: 1.75rem;
  transition: background var(--saas-transition), transform var(--saas-transition);
}
.saas-benefit-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
.saas-benefit-icon {
  width: 48px; height: 48px; border-radius: var(--saas-radius-md);
  background: rgba(79,70,229,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #a5b4fc; margin-bottom: 1.125rem;
}
.saas-benefit-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.625rem; }
.saas-benefit-card p  { font-size: 0.875rem; color: rgba(255,255,255,0.62); line-height: 1.7; margin: 0; }
.saas-benefit-metric {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 9999px; padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 700; color: #6ee7b7;
  width: fit-content; margin-top: 0.875rem;
}
.saas-benefit-metric i { font-size: 0.7rem; }

/* ===========================
   SECTION: FEATURES (TABS)
   =========================== */
.saas-features-section {
  padding: 5rem 0;
  background: #f8fafc;
}
.saas-tabs-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 2.5rem; padding-bottom: 0;
}
.saas-tab-btn {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.875rem; font-weight: 600; color: #64748b;
  border: none; background: none; cursor: pointer;
  border-radius: var(--saas-radius-sm) var(--saas-radius-sm) 0 0;
  transition: color var(--saas-transition), background var(--saas-transition);
  position: relative; bottom: -2px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.saas-tab-btn i { font-size: 0.85rem; }
.saas-tab-btn:hover { color: var(--saas-primary); background: rgba(79,70,229,0.04); }
.saas-tab-btn.active {
  color: var(--saas-primary);
  border-bottom-color: var(--saas-primary);
  background: rgba(79,70,229,0.04);
}
.saas-tab-panel { display: none; }
.saas-tab-panel.active { display: block; animation: fadeInTab 0.3s ease; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.saas-feature-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem;
}
.saas-feature-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.5rem;
  transition: box-shadow var(--saas-transition), border-color var(--saas-transition), transform var(--saas-transition);
}
.saas-feature-card:hover {
  box-shadow: 0 8px 28px rgba(79,70,229,0.10);
  border-color: rgba(79,70,229,0.25);
  transform: translateY(-2px);
}
.saas-feature-icon {
  width: 44px; height: 44px; border-radius: var(--saas-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; margin-bottom: 1rem;
}
.saas-feature-card h4 { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
.saas-feature-card p  { font-size: 0.8125rem; color: #64748b; line-height: 1.65; margin: 0; }
.saas-feature-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(16,185,129,0.1); color: #059669;
  border-radius: 9999px; padding: 0.2rem 0.6rem;
  font-size: 0.72rem; font-weight: 700;
  margin-top: 0.75rem;
}

/* Feature panel 2-col layout */
.saas-feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.saas-feature-row-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.5rem; display: flex; gap: 1rem;
  transition: box-shadow var(--saas-transition), transform var(--saas-transition);
}
.saas-feature-row-card:hover { box-shadow: 0 4px 20px rgba(79,70,229,0.08); transform: translateY(-1px); }
.saas-feature-row-icon {
  width: 40px; height: 40px; border-radius: var(--saas-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.saas-feature-row-body h4 { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem; }
.saas-feature-row-body p  { font-size: 0.8125rem; color: #64748b; line-height: 1.65; margin: 0; }

/* ===========================
   SECTION: ARCHITECTURE
   =========================== */
.saas-arch-section {
  padding: 5rem 0;
  background: var(--saas-dark-2);
  position: relative; overflow: hidden;
}
.saas-arch-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(79,70,229,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 50%, rgba(6,182,212,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.saas-arch-section .saas-section-label { background: rgba(165,180,252,0.12); border-color: rgba(165,180,252,0.2); color: #a5b4fc; }
.saas-arch-section .saas-section-title { color: #fff; }
.saas-arch-section .saas-section-title span { color: #67e8f9; }
.saas-arch-section .saas-section-intro { color: rgba(255,255,255,0.6); }

.saas-tech-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem;
  align-items: center; margin-top: 3rem; position: relative; z-index: 1;
}
.saas-tech-layers { display: flex; flex-direction: column; gap: 1rem; }
.saas-tech-layer {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--saas-primary);
  border-radius: var(--saas-radius-md);
  padding: 1.25rem 1.5rem;
}
.saas-tech-layer.layer-security { border-left-color: var(--saas-accent); }
.saas-tech-layer.layer-data     { border-left-color: #10b981; }
.saas-tech-layer.layer-app      { border-left-color: #f59e0b; }
.saas-tech-layer-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: rgba(255,255,255,0.4); margin-bottom: 0.4rem;
}
.saas-tech-layer h4 { font-size: 0.9375rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.saas-tech-layer p  { font-size: 0.8125rem; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 0; }
.saas-tech-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.625rem; }
.saas-tech-tag {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px; padding: 0.2rem 0.6rem;
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.55);
}

/* Performance Metrics */
.saas-perf-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
}
.saas-perf-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--saas-radius-md);
  padding: 1.25rem; text-align: center;
}
.saas-perf-num {
  font-size: 1.625rem; font-weight: 900; color: #fff;
  line-height: 1; margin-bottom: 0.25rem;
}
.saas-perf-num.green { color: #34d399; }
.saas-perf-num.cyan  { color: #67e8f9; }
.saas-perf-num.violet{ color: #a78bfa; }
.saas-perf-num.amber { color: #fbbf24; }
.saas-perf-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); font-weight: 500; }

/* ===========================
   SECTION: WHY CHOOSE US
   =========================== */
.saas-why-section {
  padding: 5rem 0;
  background: #fff;
}
.saas-why-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.saas-why-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.75rem; text-align: center;
  transition: box-shadow var(--saas-transition), border-color var(--saas-transition), transform var(--saas-transition);
}
.saas-why-card:hover {
  box-shadow: 0 8px 32px rgba(79,70,229,0.10);
  border-color: rgba(79,70,229,0.25);
  transform: translateY(-3px);
}
.saas-why-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--saas-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem; color: #fff; margin: 0 auto 1.125rem;
  box-shadow: 0 4px 16px rgba(79,70,229,0.3);
}
.saas-why-card h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.625rem; }
.saas-why-card p  { font-size: 0.875rem; color: #475569; line-height: 1.7; margin: 0; }
.saas-why-num {
  font-size: 1.5rem; font-weight: 900; color: var(--saas-primary);
  margin-bottom: 0.375rem;
}

/* ===========================
   SECTION: CASE STUDY
   =========================== */
.saas-case-section {
  padding: 5rem 0;
  background: #f8fafc;
}
.saas-case-wrapper {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.saas-case-header {
  background: var(--saas-gradient);
  padding: 2rem 2.5rem; display: flex; align-items: center; gap: 1.5rem;
}
.saas-case-logo {
  width: 60px; height: 60px; border-radius: var(--saas-radius-md);
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.saas-case-header h3 { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 0.25rem; }
.saas-case-header p  { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin: 0; }
.saas-case-body { padding: 2.5rem; }
.saas-case-body > p { font-size: 1rem; color: #475569; line-height: 1.8; margin-bottom: 2rem; }
.saas-case-metrics {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem;
  margin-bottom: 2rem;
}
.saas-case-metric {
  background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(14,165,233,0.05));
  border: 1px solid rgba(79,70,229,0.15);
  border-radius: var(--saas-radius-lg);
  padding: 1.25rem; text-align: center;
}
.saas-case-metric .metric-num {
  font-size: 2rem; font-weight: 900; color: var(--saas-primary); line-height: 1; margin-bottom: 0.25rem;
}
.saas-case-metric .metric-label { font-size: 0.78rem; color: #64748b; font-weight: 500; }
.saas-case-quote {
  background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(14,165,233,0.04));
  border-left: 4px solid var(--saas-primary);
  border-radius: 0 var(--saas-radius-md) var(--saas-radius-md) 0;
  padding: 1.25rem 1.5rem;
}
.saas-case-quote p { font-size: 1rem; color: #334155; line-height: 1.75; font-style: italic; margin-bottom: 0.625rem; }
.saas-case-quote cite { font-size: 0.875rem; font-weight: 700; color: var(--saas-primary); font-style: normal; }

/* ===========================
   SECTION: COMPARISON TABLE
   =========================== */
.saas-comparison-section {
  padding: 5rem 0;
  background: #fff;
}
.saas-comparison-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: var(--saas-radius-lg);
  overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  margin-top: 2.5rem;
}
.saas-comparison-table thead tr {
  background: var(--saas-gradient);
}
.saas-comparison-table thead th {
  padding: 1.125rem 1.25rem; text-align: left;
  font-size: 0.875rem; font-weight: 700; color: #fff;
}
.saas-comparison-table thead th:first-child { width: 30%; }
.saas-comparison-table tbody tr:nth-child(even) { background: #f8fafc; }
.saas-comparison-table tbody tr:hover { background: rgba(79,70,229,0.04); }
.saas-comparison-table td {
  padding: 0.875rem 1.25rem; font-size: 0.875rem;
  color: #475569; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.saas-comparison-table td:first-child { font-weight: 600; color: #0f172a; }
.saas-comparison-table td.good { color: #059669; font-weight: 600; }
.saas-comparison-table td.bad  { color: #ef4444; }
.saas-comparison-table i.good  { color: #22c55e; }
.saas-comparison-table i.bad   { color: #ef4444; }

/* ===========================
   SECTION: SECURITY
   =========================== */
.saas-security-section {
  padding: 5rem 0;
  background: #f8fafc;
}
.saas-security-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  align-items: center; margin-top: 3rem;
}
.saas-security-list { display: flex; flex-direction: column; gap: 1.125rem; }
.saas-security-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem; background: #fff;
  border: 1px solid #e2e8f0; border-radius: var(--saas-radius-lg);
  transition: box-shadow var(--saas-transition);
}
.saas-security-item:hover { box-shadow: 0 4px 16px rgba(79,70,229,0.08); }
.saas-security-ico {
  width: 40px; height: 40px; border-radius: var(--saas-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.saas-security-item h4 { font-size: 0.9375rem; font-weight: 700; color: #0f172a; margin-bottom: 0.375rem; }
.saas-security-item p  { font-size: 0.8375rem; color: #64748b; line-height: 1.65; margin: 0; }
.saas-certif-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
}
.saas-certif-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.5rem; text-align: center;
  transition: box-shadow var(--saas-transition), transform var(--saas-transition);
}
.saas-certif-card:hover { box-shadow: 0 4px 20px rgba(79,70,229,0.08); transform: translateY(-2px); }
.saas-certif-icon {
  font-size: 2rem; margin-bottom: 0.75rem;
  background: var(--saas-gradient); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.saas-certif-card h4 { font-size: 0.9rem; font-weight: 700; color: #0f172a; margin-bottom: 0.35rem; }
.saas-certif-card p  { font-size: 0.8rem; color: #64748b; margin: 0; }

/* ===========================
   SECTION: TESTIMONIALS (SLIDER)
   =========================== */
.saas-testi-section {
  padding: 5rem 0;
  background: var(--saas-dark-2);
  position: relative; overflow: hidden;
}
.saas-testi-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(79,70,229,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.saas-testi-section .saas-section-label { background: rgba(165,180,252,0.12); border-color: rgba(165,180,252,0.2); color: #a5b4fc; }
.saas-testi-section .saas-section-title { color: #fff; }
.saas-testi-section .saas-section-title span { color: #67e8f9; }
.saas-testi-section .saas-section-intro { color: rgba(255,255,255,0.6); }

.saas-slider-wrapper { position: relative; overflow: hidden; margin-top: 3rem; }
.saas-slider-track {
  display: flex; transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.saas-slide {
  min-width: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  padding: 0 0.25rem;
}
.saas-testi-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--saas-radius-lg);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
  transition: background var(--saas-transition);
}
.saas-testi-card:hover { background: rgba(255,255,255,0.09); }
.saas-testi-stars { display: flex; gap: 0.2rem; }
.saas-testi-stars i { color: #fbbf24; font-size: 0.875rem; }
.saas-testi-text {
  font-size: 0.9375rem; color: rgba(255,255,255,0.78);
  line-height: 1.75; font-style: italic; flex: 1;
}
.saas-testi-text::before { content: '\201C'; }
.saas-testi-text::after  { content: '\201D'; }
.saas-testi-author { display: flex; align-items: center; gap: 0.875rem; }
.saas-testi-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.saas-testi-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.saas-testi-role { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.saas-testi-tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(79,70,229,0.25); border: 1px solid rgba(79,70,229,0.4);
  border-radius: 9999px; padding: 0.2rem 0.6rem;
  font-size: 0.72rem; font-weight: 600; color: #a5b4fc;
  width: fit-content;
}

/* Slider controls */
.saas-slider-controls {
  display: flex; justify-content: center; align-items: center;
  gap: 1rem; margin-top: 2rem; position: relative; z-index: 1;
}
.saas-slider-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.9rem;
  transition: background var(--saas-transition), color var(--saas-transition);
}
.saas-slider-btn:hover { background: rgba(79,70,229,0.4); color: #fff; }
.saas-slider-dots { display: flex; gap: 0.5rem; }
.saas-slider-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer; border: none;
  transition: background var(--saas-transition), width var(--saas-transition);
}
.saas-slider-dot.active { background: var(--saas-primary-light); width: 20px; border-radius: 9999px; }

/* ===========================
   SECTION: FAQ
   =========================== */
.saas-faq-section {
  padding: 5rem 0;
  background: #fff;
}
.saas-faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 3rem;
}
.saas-faq-item {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg); overflow: hidden;
  transition: box-shadow var(--saas-transition);
}
.saas-faq-item:hover { box-shadow: 0 4px 16px rgba(79,70,229,0.08); }
.saas-faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.5rem;
  font-size: 0.9375rem; font-weight: 600; color: #0f172a;
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: inherit;
  transition: color var(--saas-transition);
}
.saas-faq-question:hover { color: var(--saas-primary); }
.saas-faq-question.open { color: var(--saas-primary); }
.saas-faq-chevron { color: #94a3b8; font-size: 0.8rem; transition: transform 0.3s ease; flex-shrink: 0; }
.saas-faq-question.open .saas-faq-chevron { transform: rotate(180deg); color: var(--saas-primary); }
.saas-faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
  padding: 0 1.5rem;
  font-size: 0.875rem; color: #475569; line-height: 1.75;
}
.saas-faq-answer.open {
  max-height: 400px;
  padding: 0 1.5rem 1.25rem;
}
.saas-faq-divider { height: 1px; background: #f1f5f9; margin: 0 1.5rem; }

/* ===========================
   SECTION: FINAL CTA
   =========================== */
.saas-cta-section {
  padding: 5rem 0;
  background: var(--saas-gradient-hero);
  position: relative; overflow: hidden; text-align: center;
}
.saas-cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(79,70,229,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.saas-cta-content { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.saas-cta-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(79,70,229,0.25); border: 1px solid rgba(79,70,229,0.4);
  border-radius: 9999px; padding: 0.4rem 1rem;
  font-size: 0.8125rem; font-weight: 700; color: #a5b4fc;
  margin-bottom: 1.5rem;
}
.saas-cta-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 900; color: #fff; line-height: 1.15;
  margin-bottom: 1.25rem; letter-spacing: -0.02em;
}
.saas-cta-title span { color: #67e8f9; }
.saas-cta-sub {
  font-size: 1.0625rem; color: rgba(255,255,255,0.65);
  line-height: 1.7; margin-bottom: 2.5rem;
}
.saas-cta-btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.5rem; }
.saas-cta-trust { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.saas-cta-trust-item {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.65);
}
.saas-cta-trust-item i { color: #67e8f9; }

/* Demo Form */
.saas-demo-section {
  padding: 5rem 0;
  background: #f8fafc;
}
.saas-demo-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem;
  align-items: start;
}
.saas-demo-info h3 { font-size: 1.375rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.saas-demo-info > p { font-size: 1rem; color: #475569; line-height: 1.75; margin-bottom: 1.5rem; }
.saas-demo-features { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.625rem; }
.saas-demo-features li { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9rem; color: #334155; }
.saas-demo-features li i { color: var(--saas-primary); font-size: 0.85rem; width: 18px; flex-shrink: 0; }
.saas-demo-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.saas-demo-contact a {
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.9rem; font-weight: 600; color: #334155;
  text-decoration: none; transition: color var(--saas-transition);
}
.saas-demo-contact a:hover { color: var(--saas-primary); }
.saas-demo-contact a i { color: var(--saas-primary); width: 18px; }

.saas-demo-form {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-xl);
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.saas-demo-form h3 {
  font-size: 1.25rem; font-weight: 800; color: #0f172a;
  margin-bottom: 0.5rem;
}
.saas-demo-form > p { font-size: 0.875rem; color: #64748b; margin-bottom: 1.75rem; }
.saas-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.saas-form-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.saas-form-group label { font-size: 0.8125rem; font-weight: 600; color: #374151; }
.saas-form-group input,
.saas-form-group select,
.saas-form-group textarea {
  padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0;
  border-radius: var(--saas-radius-md);
  font-size: 0.9rem; color: #0f172a;
  background: #fff; font-family: inherit;
  transition: border-color var(--saas-transition), box-shadow var(--saas-transition);
  outline: none;
}
.saas-form-group input:focus,
.saas-form-group select:focus,
.saas-form-group textarea:focus {
  border-color: var(--saas-primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}
.saas-form-group textarea { resize: vertical; min-height: 80px; }
.saas-form-submit { width: 100%; }
.saas-form-disclaimer { font-size: 0.75rem; color: #94a3b8; text-align: center; margin-top: 0.875rem; }

/* ===========================
   STICKY BOTTOM BAR (mobile)
   =========================== */
.saas-sticky-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(10,14,26,0.96);
  border-top: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  padding: 0.75rem 1rem;
  z-index: 998;
  gap: 0.75rem;
}
.saas-back-top {
  position: fixed; bottom: 5rem; right: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--saas-gradient);
  color: #fff; border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 1rem; box-shadow: 0 4px 16px rgba(79,70,229,0.4);
  z-index: 997; transition: transform var(--saas-transition), opacity var(--saas-transition);
}
.saas-back-top:hover { transform: translateY(-2px); }
.saas-back-top.visible { display: flex; }

/* ===========================
   INTERNAL LINKS SECTION
   =========================== */
.saas-related-section {
  padding: 3.5rem 0;
  background: #fff;
  border-top: 1px solid #f1f5f9;
}
.saas-related-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
  margin-top: 2rem;
}
.saas-related-card {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: var(--saas-radius-lg);
  padding: 1.25rem; text-decoration: none;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: box-shadow var(--saas-transition), border-color var(--saas-transition), transform var(--saas-transition);
}
.saas-related-card:hover {
  box-shadow: 0 4px 20px rgba(79,70,229,0.10);
  border-color: rgba(79,70,229,0.25);
  transform: translateY(-2px);
}
.saas-related-card i { font-size: 1.25rem; color: var(--saas-primary); }
.saas-related-card h4 { font-size: 0.875rem; font-weight: 700; color: #0f172a; margin: 0; }
.saas-related-card p  { font-size: 0.8rem; color: #64748b; margin: 0; line-height: 1.5; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
  .hero-saas-container { grid-template-columns: 1fr; gap: 3rem; }
  .saas-arch-diagram { max-width: 560px; margin: 0 auto; }
  .saas-def-grid,
  .saas-tech-grid,
  .saas-security-grid,
  .saas-demo-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .saas-steps-grid,
  .saas-usecases-grid,
  .saas-benefits-grid,
  .saas-why-grid     { grid-template-columns: repeat(2,1fr); }
  .saas-feature-grid { grid-template-columns: repeat(2,1fr); }
  .saas-related-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .hero-saas        { padding: 5rem 0 3rem; min-height: auto; }
  .hero-saas-stats  { grid-template-columns: repeat(3,1fr); gap: 0.75rem; }
  .saas-steps-grid,
  .saas-usecases-grid,
  .saas-benefits-grid,
  .saas-why-grid     { grid-template-columns: 1fr; }
  .saas-feature-grid { grid-template-columns: 1fr; }
  .saas-feature-row  { grid-template-columns: 1fr; }
  .saas-case-metrics { grid-template-columns: repeat(2,1fr); }
  .saas-compare-grid { grid-template-columns: 1fr; }
  .saas-faq-grid     { grid-template-columns: 1fr; }
  .saas-perf-grid    { grid-template-columns: repeat(2,1fr); }
  .saas-certif-grid  { grid-template-columns: repeat(2,1fr); }
  .saas-related-grid { grid-template-columns: 1fr 1fr; }
  .saas-slide        { grid-template-columns: 1fr; }
  .saas-form-row     { grid-template-columns: 1fr; }
  .saas-sticky-bar   { display: flex; }
  .saas-eeat-box     { flex-direction: column; }
}
@media (max-width: 480px) {
  .hero-saas-stats   { grid-template-columns: 1fr; }
  .saas-case-metrics { grid-template-columns: 1fr 1fr; }
  .saas-related-grid { grid-template-columns: 1fr; }
  .saas-certif-grid  { grid-template-columns: 1fr; }
}