/**
 * Cyberspace Solution - Approved Reference Homepage Styles
 * Reference-inspired premium homepage design system
 */

/* ==========================================================================
   Hero Section: Cinematic Technology-Learning Scene
   ========================================================================== */
.cs-hero-section {
  position: relative;
  min-height: 85vh;
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 3.5rem;
  background-color: var(--color-midnight);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Layered Background Glows & Gradients */
.cs-hero-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cs-hero-glow-1 {
  position: absolute;
  top: 15%;
  left: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(52, 120, 246, 0.22) 0%, rgba(8, 14, 27, 0) 70%);
  filter: blur(60px);
}

.cs-hero-glow-2 {
  position: absolute;
  top: 20%;
  right: 20%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(57, 213, 255, 0.2) 0%, rgba(128, 87, 255, 0.15) 40%, rgba(8, 14, 27, 0) 75%);
  filter: blur(80px);
}

.cs-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(57, 213, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 213, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
}

/* Desktop 3-part layout: Left (Headline) - Center (Student) - Right (ERP Panel) */
.cs-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 1200px) {
  .cs-hero-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: 2.5rem;
  }
  .cs-erp-col {
    grid-column: span 2;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .cs-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cs-erp-col {
    grid-column: span 1;
    max-width: 100%;
  }
}

/* Hero Left Content */
.cs-hero-content {
  position: relative;
  z-index: 3;
}

.cs-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: rgba(19, 34, 59, 0.7);
  border: 1px solid rgba(57, 213, 255, 0.4);
  border-radius: var(--radius-full);
  color: var(--color-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 15px rgba(57, 213, 255, 0.2);
}

.cs-hero-badge-dot {
  width: 7px;
  height: 7px;
  background-color: var(--color-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-cyan);
  animation: cs-pulse 2s infinite ease-in-out;
}

@keyframes cs-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.cs-hero-title {
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.cs-hero-title .highlight-cyan {
  color: var(--color-cyan);
  text-shadow: 0 0 20px rgba(57, 213, 255, 0.5);
}

.cs-hero-title .highlight-blue {
  color: var(--color-electric-blue);
  text-shadow: 0 0 20px rgba(52, 120, 246, 0.5);
}

.cs-hero-title .highlight-gradient {
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-electric-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cs-hero-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: #94A3B8;
  max-width: 520px;
  margin-bottom: 1.75rem;
}

.cs-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

/* Hand-drawn Accents & Annotations */
.cs-hero-annotation-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  user-select: none;
}

.cs-annotation-arrow {
  color: var(--color-cyan);
  filter: drop-shadow(0 0 6px rgba(57, 213, 255, 0.5));
  transform: rotate(-3deg);
  flex-shrink: 0;
}

.cs-annotation {
  font-family: var(--font-accent);
  color: var(--color-cyan);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(57, 213, 255, 0.4);
  transform: rotate(-1.5deg);
}

.cs-annotation svg {
  display: inline-block;
  vertical-align: middle;
}

/* Hero Benefits Row */
.cs-hero-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 500px;
}

.cs-hero-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #CBD5E1;
}

.cs-hero-benefit-icon {
  color: var(--color-cyan);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Hero Center: Student Visual */
.cs-hero-student-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cs-hero-student-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 50px rgba(57, 213, 255, 0.22);
  border: 1.5px solid rgba(57, 213, 255, 0.35);
  background: var(--color-navy-surface);
}

.cs-hero-student-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cs-hero-student-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 14, 27, 0.04) 0%, rgba(8, 14, 27, 0.25) 60%, rgba(8, 14, 27, 0.85) 100%);
  pointer-events: none;
}

/* Floating Student Badges */
.cs-floating-badge {
  position: absolute;
  padding: 0.45rem 0.85rem;
  background: rgba(16, 26, 45, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(57, 213, 255, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-white);
  z-index: 4;
}

.cs-floating-badge-top-left {
  top: 1rem;
  left: -0.75rem;
}

.cs-floating-badge-bottom-right {
  bottom: 1.5rem;
  right: -0.75rem;
  border-color: rgba(128, 87, 255, 0.45);
}

/* Hero Right: Institute Management ERP Showcase Card */
.cs-erp-col {
  position: relative;
}

.cs-erp-showcase-panel {
  background: rgba(16, 26, 45, 0.92);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(57, 213, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(57, 213, 255, 0.18);
  transition: transform var(--transition-normal);
}

.cs-erp-showcase-panel:hover {
  transform: translateY(-4px);
  border-color: var(--color-cyan);
}

.cs-erp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.cs-erp-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-white);
}

.cs-erp-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(57, 213, 255, 0.15);
  color: var(--color-cyan);
  border: 1px solid rgba(57, 213, 255, 0.35);
}

.cs-erp-mockup-thumb {
  width: 100%;
  height: 125px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #080E1B;
}

.cs-erp-mockup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-erp-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.cs-erp-feature-item {
  font-size: 0.75rem;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cs-erp-feature-item::before {
  content: '✓';
  color: var(--color-cyan);
  font-weight: 800;
}

.cs-erp-actions {
  display: flex;
  gap: 0.5rem;
}

.cs-erp-actions .cs-btn {
  flex: 1;
}

/* ==========================================================================
   Credibility Strip: High-Contrast Light Surface Below Hero
   ========================================================================== */
.cs-credibility-strip {
  background: var(--color-light-neutral);
  color: var(--color-text-dark);
  padding: 2.25rem 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
}

.cs-credibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: center;
}

@media (max-width: 991px) {
  .cs-credibility-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (max-width: 576px) {
  .cs-credibility-grid {
    grid-template-columns: 1fr;
  }
}

.cs-credibility-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.cs-credibility-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(52, 120, 246, 0.1);
  color: var(--color-electric-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.cs-credibility-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 0.2rem;
}

.cs-credibility-desc {
  font-size: 0.8125rem;
  color: var(--color-text-dark-muted);
  line-height: 1.45;
  margin-bottom: 0;
}

/* ==========================================================================
   Three Editorial Feature Panels (Torn-edge / Brush Accents & Paint Patches)
   High-contrast light-neutral canvas with vibrant artistic editorial composition
   ========================================================================== */
.cs-editorial-section {
  padding: 4.5rem 0 6rem 0;
  background: var(--color-light-neutral);
  position: relative;
  overflow: hidden;
}

.cs-editorial-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

@media (max-width: 991px) {
  .cs-editorial-grid-3 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.cs-editorial-card-wrapper {
  position: relative;
}

/* Organic Paint Patches behind cards matching reference */
.cs-paint-patch {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 260px;
  height: 180px;
  pointer-events: none;
  z-index: 0;
  filter: blur(14px);
  opacity: 0.85;
  transform: rotate(-3deg);
  transition: transform var(--transition-normal);
}

.cs-paint-patch-violet {
  top: -16px;
  right: -16px;
  left: auto;
  transform: rotate(4deg);
}

.cs-paint-patch-warm {
  top: -20px;
  left: -16px;
  transform: rotate(-2.5deg);
}

.cs-editorial-card-wrapper:hover .cs-paint-patch {
  transform: scale(1.08) rotate(0deg);
  opacity: 1;
}

.cs-editorial-card {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.cs-editorial-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-electric-blue);
  box-shadow: 0 15px 35px rgba(52, 120, 246, 0.15);
}

.cs-editorial-thumb {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid #E2E8F0;
}

.cs-torn-edge {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

.cs-torn-edge svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cs-editorial-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.cs-editorial-card:hover .cs-editorial-thumb img {
  transform: scale(1.05);
}

.cs-editorial-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-editorial-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.cs-editorial-card .cs-badge-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(52, 120, 246, 0.08);
  color: var(--color-electric-blue);
  border: 1px solid rgba(52, 120, 246, 0.25);
}

.cs-editorial-card-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.cs-editorial-card-title .highlight-cyan {
  color: var(--color-electric-blue);
}

.cs-editorial-card-title .highlight-blue {
  color: var(--color-violet);
}

.cs-editorial-card-title .highlight-gradient {
  background: linear-gradient(135deg, var(--color-electric-blue) 0%, var(--color-violet) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cs-editorial-card-copy {
  font-size: 0.875rem;
  color: var(--color-text-dark-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

.cs-editorial-card-footer {
  margin-top: auto;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Dark Editorial CTAs matching reference */
.cs-btn-dark {
  background: #0B1329;
  color: #FFFFFF;
  border: 1px solid #1E293B;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.cs-btn-dark:hover {
  background: #111D38;
  color: var(--color-cyan);
  border-color: var(--color-cyan);
  box-shadow: 0 6px 18px rgba(57, 213, 255, 0.3);
  transform: translateY(-2px);
}

.cs-btn-outline-dark {
  background: transparent;
  color: #1E293B;
  border: 1.5px solid #CBD5E1;
}
.cs-btn-outline-dark:hover {
  background: #0B1329;
  color: #FFFFFF;
  border-color: #0B1329;
  transform: translateY(-2px);
}

.cs-editorial-card .cs-btn-secondary {
  background: #EDF2F7;
  color: #1A202C;
  border-color: #CBD5E0;
}
.cs-editorial-card .cs-btn-secondary:hover {
  background: #E2E8F0;
  color: #000;
}

/* Organic Brush-Edge Divider between Editorial and Dark Section (matches y=850 transition) */
.cs-brush-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 52px;
  line-height: 0;
  pointer-events: none;
  z-index: 5;
}

.cs-brush-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Dark Brand/Value Section: "More Than a Training Institute..."
   ========================================================================== */
.cs-brand-values-section {
  padding: 4.5rem 0;
  background: var(--color-midnight);
  position: relative;
  border-bottom: 1px solid rgba(57, 213, 255, 0.15);
}

.cs-brand-values-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
}

.cs-brand-values-title {
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.cs-brand-values-desc {
  font-size: 1rem;
  color: #94A3B8;
  line-height: 1.65;
}

.cs-brand-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

@media (max-width: 991px) {
  .cs-brand-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .cs-brand-values-grid {
    grid-template-columns: 1fr;
  }
}

.cs-value-card {
  background: rgba(19, 34, 59, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.cs-value-card:hover {
  background: rgba(19, 34, 59, 0.9);
  border-color: var(--color-cyan);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(57, 213, 255, 0.2);
}

.cs-value-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(57, 213, 255, 0.15) 0%, rgba(52, 120, 246, 0.15) 100%);
  border: 1px solid rgba(57, 213, 255, 0.3);
  color: var(--color-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}

.cs-value-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.6rem;
}

.cs-value-text {
  font-size: 0.8125rem;
  color: #94A3B8;
  line-height: 1.55;
  margin-bottom: 0;
}

.cs-brand-values-footer {
  text-align: center;
}

/* ==========================================================================
   Courses, Software & Services Grid Sections
   ========================================================================== */
.cs-section {
  padding: 5rem 0;
  position: relative;
}

.cs-section-header {
  margin-bottom: 3rem;
}

.cs-section-header.text-center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.cs-section-subtitle {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

.cs-section-title {
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

.cs-cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 991px) {
  .cs-cards-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .cs-cards-grid-3 {
    grid-template-columns: 1fr;
  }
}

.cs-course-card {
  background: rgba(16, 26, 45, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.cs-course-card:hover {
  border-color: rgba(57, 213, 255, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(57, 213, 255, 0.15);
}

.cs-course-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.cs-course-duration {
  font-size: 0.75rem;
  color: var(--color-cyan);
  font-weight: 600;
}

.cs-course-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.65rem;
}

.cs-course-card-desc {
  font-size: 0.8125rem;
  color: #94A3B8;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  flex: 1;
}

.cs-course-highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cs-course-highlight-item {
  font-size: 0.75rem;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.cs-course-highlight-item::before {
  content: '▸';
  color: var(--color-cyan);
}

.cs-course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ==========================================================================
   Software Grid
   ========================================================================== */
.cs-product-card {
  background: rgba(16, 26, 45, 0.85);
  border: 1px solid rgba(57, 213, 255, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.cs-product-card:hover {
  border-color: var(--color-cyan);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(57, 213, 255, 0.25);
  transform: translateY(-4px);
}

.cs-product-badge {
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(128, 87, 255, 0.2);
  color: #B197FF;
  border: 1px solid rgba(128, 87, 255, 0.4);
  margin-bottom: 0.85rem;
}

.cs-product-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 0.65rem;
}

.cs-product-desc {
  font-size: 0.875rem;
  color: #94A3B8;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.cs-product-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.75rem;
  flex: 1;
}

.cs-product-feature-item {
  font-size: 0.8125rem;
  color: #CBD5E1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.cs-product-feature-item::before {
  content: '✓';
  color: var(--color-cyan);
  font-weight: 800;
}

/* ==========================================================================
   CTA Banner Before Footer
   ========================================================================== */
.cs-cta-banner-section {
  padding: 4.5rem 0;
  background: var(--color-midnight);
  position: relative;
}

.cs-cta-banner-card {
  background: linear-gradient(135deg, rgba(19, 34, 59, 0.9) 0%, rgba(16, 26, 45, 0.95) 100%);
  border: 1.5px solid rgba(57, 213, 255, 0.35);
  border-radius: var(--radius-xl);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(57, 213, 255, 0.15);
}

.cs-cta-banner-title {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 900;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.cs-cta-banner-desc {
  font-size: 1.0625rem;
  color: #CBD5E1;
  max-width: 650px;
  margin: 0 auto 2rem auto;
}

.cs-cta-banner-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Mobile & Small Screen Optimizations
   ========================================================================== */
@media (max-width: 640px) {
  .cs-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .cs-hero-actions .cs-btn {
    width: 100%;
    justify-content: center;
  }
  .cs-hero-benefits {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .cs-hero-student-wrapper {
    max-width: 320px;
    margin: 0 auto;
  }
  .cs-hero-student-img {
    height: 320px;
  }
  .cs-floating-badge-top-left {
    left: 0.25rem;
    top: 0.5rem;
  }
  .cs-floating-badge-bottom-right {
    right: 0.25rem;
    bottom: 0.75rem;
  }
  .cs-erp-actions {
    flex-direction: column;
  }
  .cs-cta-banner-card {
    padding: 2.25rem 1.25rem;
  }
  .cs-cta-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .cs-cta-banner-actions .cs-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .cs-hero-title {
    font-size: 1.75rem;
  }
  .cs-hero-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.65rem;
  }
  .cs-annotation {
    font-size: 1.15rem;
  }
  .cs-editorial-card-body {
    padding: 1.25rem;
  }
  .cs-editorial-card-title {
    font-size: 1.2rem;
  }
}



/* =====================================================================
   Reference fidelity pass: layered cinematic hero, floating ERP card,
   brush-backed editorial cards, overlapping stat strip and mobile polish.
   This is intentionally a CSS-only visual layer over the existing theme.
   ===================================================================== */
.cs-site-header{background:rgba(5,12,24,.90);border-bottom-color:rgba(105,165,220,.12)}
.cs-header-inner{gap:1rem}
.cs-site-header .cs-brand-logo-mark{clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);border-radius:12px}
.cs-site-header .cs-brand-name{font-size:1.2rem;letter-spacing:-.045em}
.cs-site-header .cs-brand-tagline{color:#c1d2e7;letter-spacing:.035em;text-transform:none;font-weight:500}
.cs-hero-section{min-height:0;padding-top:calc(var(--header-height) + 1.25rem);padding-bottom:0;background:#061020;isolation:isolate}
.cs-hero-section:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,10,20,.9) 0%,rgba(4,10,20,.72) 31%,rgba(4,10,20,.2) 57%,rgba(4,10,20,.66) 100%),radial-gradient(ellipse at 53% 46%,rgba(26,88,152,.2),transparent 45%)}
.cs-hero-bg-layer{z-index:0}.cs-hero-grid-pattern{background-size:48px 48px;opacity:.32}
.cs-hero-inner{grid-template-columns:minmax(0,1.03fr) minmax(360px,.88fr);gap:2rem;min-height:510px;padding-bottom:3.25rem;align-items:center}
.cs-hero-content{z-index:4;max-width:590px;padding:1rem 0}
.cs-hero-badge{font-size:.66rem;letter-spacing:.035em;background:rgba(24,48,78,.88);border-color:#234a75;color:#d4e8ff;box-shadow:none;margin-bottom:1.15rem}
.cs-hero-title{font-size:clamp(2.65rem,4.1vw,4.1rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:1rem;text-wrap:balance}
.cs-hero-title .highlight-cyan{color:#77d9ff;text-shadow:none}.cs-hero-title .highlight-blue{color:#52c7ff;text-shadow:none}.cs-hero-title .highlight-gradient{background:linear-gradient(105deg,#55d5ff,#2788ff);-webkit-background-clip:text;background-clip:text}
.cs-hero-desc{font-size:.94rem;line-height:1.58;color:#d0d9e6;max-width:500px;margin-bottom:1.15rem}
.cs-hero-actions{gap:.7rem;margin-bottom:1rem}.cs-hero-actions .cs-btn{font-size:.83rem;padding:.8rem 1.25rem}.cs-hero-actions .cs-btn-gradient{background:linear-gradient(105deg,#f7fbff,#e9ddff);color:#11316a;box-shadow:0 8px 24px rgba(40,117,255,.2)}
.cs-hero-actions .cs-btn-outline{border-color:rgba(255,255,255,.82);background:rgba(6,14,27,.42);color:#fff}.cs-hero-actions .cs-btn-secondary{display:none}
.cs-hero-annotation-wrapper{margin:.35rem 0 1rem}.cs-annotation{font-size:1.05rem;color:#4ed7ff;text-shadow:none}.cs-annotation-arrow{width:28px;color:#4ed7ff}
.cs-hero-benefits{display:flex;flex-wrap:wrap;gap:.65rem 1.1rem;max-width:580px;padding-top:.9rem;border-top-color:rgba(255,255,255,.13)}.cs-hero-benefit-item{font-size:.68rem;gap:.35rem;white-space:nowrap}.cs-hero-benefit-icon{font-size:.9rem}
/* The student image becomes a cinematic central layer, not a separate card. */
.cs-hero-student-col{position:absolute;z-index:2;left:30%;top:0;bottom:0;width:38%;pointer-events:none;align-items:stretch;overflow:visible}
.cs-hero-student-wrapper{max-width:none;width:100%;height:100%;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.cs-hero-student-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 75%,transparent 100%)}
.cs-hero-student-overlay{background:linear-gradient(0deg,#061020 0%,rgba(6,16,32,.08) 35%,rgba(6,16,32,.05) 75%,#061020 100%),linear-gradient(90deg,transparent 60%,rgba(6,16,32,.65) 100%);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 72%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 72%,transparent)}
.cs-floating-badge{font-size:.68rem;backdrop-filter:blur(12px)}.cs-floating-badge-top-left{left:1rem;top:34%}.cs-floating-badge-bottom-right{right:1.25rem;bottom:16%}
.cs-erp-col{z-index:5;grid-column:2;max-width:520px;width:100%;margin-left:auto;transform:translateY(-.2rem)}
.cs-erp-showcase-panel{padding:1.15rem;background:rgba(5,17,33,.88);border:1px solid rgba(50,204,255,.85);border-radius:22px;box-shadow:0 16px 45px rgba(0,0,0,.42),0 0 25px rgba(34,180,255,.12);backdrop-filter:blur(12px);position:relative}
.cs-erp-showcase-panel:after{content:"";position:absolute;inset:5px;border:1px solid rgba(107,106,255,.45);border-radius:17px;pointer-events:none;transform:translate(4px,4px);z-index:-1}
.cs-erp-title{font-size:1.15rem}.cs-erp-pill{background:linear-gradient(110deg,#35d9ff,#8a5cff);color:#07152a;border-radius:7px;padding:.25rem .55rem;font-size:.62rem}
.cs-erp-mockup-thumb{height:150px;overflow:hidden;border-radius:9px;margin:.45rem 0 .65rem;background:#0d1a2b}.cs-erp-mockup-thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.cs-erp-features-list{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .65rem;margin:.8rem 0 1rem;padding:0;list-style:none}.cs-erp-feature-item{font-size:.68rem;color:#e3edf8;line-height:1.4}.cs-erp-feature-item:before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:6px;border-radius:50%;background:#43dec3;color:#06302e;font-weight:900}
.cs-erp-actions{display:flex;gap:.55rem}.cs-erp-actions .cs-btn{flex:1;justify-content:center;font-size:.72rem;padding:.7rem .65rem}.cs-erp-actions .cs-btn-gradient{background:#f6fbff;color:#102858}.cs-erp-actions .cs-btn-outline{border-color:#46d4f6;color:#fff}
/* Stats strip floats over the transition from the hero to the white area. */
.cs-credibility-strip{margin:-1.35rem auto 0;position:relative;z-index:10;width:min( calc(100% - 4rem), 1440px);border:1px solid #dce8f6;border-radius:17px;background:rgba(255,255,255,.98);padding:1.05rem 1.25rem;box-shadow:0 10px 30px rgba(12,38,75,.1)}
.cs-credibility-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}.cs-credibility-item{align-items:center;gap:.7rem}.cs-credibility-icon-box{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#e1fbff,#e8e8ff);color:#2868f5;font-size:1.2rem;font-weight:900}.cs-credibility-title{font-size:.86rem;line-height:1.25;margin:0 0 .18rem}.cs-credibility-desc{font-size:.69rem;line-height:1.35;color:#71819a}
/* Three white feature cards with paint accents and image-led composition. */
.cs-editorial-section{padding:2.2rem 0 3.6rem;background:#f7f9fd;overflow:hidden}
.cs-editorial-grid-3{gap:1.1rem;align-items:stretch}
.cs-editorial-card-wrapper{min-width:0}.cs-paint-patch{filter:blur(5px);opacity:.95;top:10%;left:25%;width:75%;height:75%;z-index:0}.cs-paint-patch-violet{left:auto;right:0;top:2%}.cs-paint-patch-warm{left:25%;top:10%}
.cs-editorial-card{min-height:270px;height:100%;border-radius:16px;border-color:#e3eaf5;box-shadow:0 8px 25px rgba(16,40,74,.055);overflow:hidden;background:#fff}
.cs-editorial-thumb{position:absolute;right:0;top:0;width:68%;height:100%;border:0;opacity:1;z-index:0}
.cs-editorial-thumb:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.93) 8%,rgba(255,255,255,.25) 48%,rgba(255,255,255,.02) 100%)}
.cs-editorial-thumb img{object-fit:cover;object-position:center;height:100%;width:100%;mix-blend-mode:multiply}
.cs-torn-edge{display:none}.cs-editorial-card-body{position:relative;z-index:2;width:73%;padding:1.35rem 1.15rem;display:flex;align-items:flex-start;background:transparent}
.cs-editorial-badges{order:0;gap:.35rem;margin-bottom:.65rem;max-width:100%}.cs-editorial-card .cs-badge-pill{font-size:.6rem;padding:.2rem .5rem;background:rgba(220,248,255,.95);border-color:#c7eefa;color:#123c6d}
.cs-editorial-card-title{font-size:1.35rem;line-height:1.1;letter-spacing:-.035em;margin-bottom:.55rem;color:#0d1b3a}.cs-editorial-card-copy{font-size:.75rem;line-height:1.45;max-width:245px;margin-bottom:.85rem;color:#526785}
.cs-editorial-card-footer{gap:.45rem}.cs-editorial-card-footer .cs-btn{font-size:.66rem;padding:.58rem .8rem}.cs-editorial-card .cs-btn-secondary,.cs-editorial-card .cs-btn-outline-dark{display:none}
/* Organic dark torn-edge divider and left-aligned brand section. */
.cs-editorial-section:after{content:"";position:absolute;left:-2%;right:-2%;bottom:-1px;height:24px;background:#061020;clip-path:polygon(0 35%,4% 20%,8% 55%,12% 28%,16% 45%,21% 10%,27% 38%,33% 25%,39% 60%,44% 18%,50% 42%,56% 20%,61% 54%,68% 24%,74% 45%,80% 12%,86% 40%,91% 22%,96% 48%,100% 20%,100% 100%,0 100%);z-index:4}
.cs-brand-values-section{padding:3.2rem 0 3.5rem;background:radial-gradient(ellipse at 20% 20%,rgba(24,73,117,.2),transparent 45%),#061020;border:0;position:relative}
.cs-brand-values-section .cs-container-wide{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(200px,.9fr) minmax(0,2.05fr);gap:1.2rem;align-items:center}
.cs-brand-values-header{display:contents}.cs-brand-values-header>.cs-badge-pill{grid-column:1;grid-row:1;justify-self:start;margin:0!important}.cs-brand-values-title{grid-column:1;grid-row:2;font-size:clamp(1.8rem,2.4vw,2.6rem);line-height:1.08;letter-spacing:-.045em;margin:0;color:#fff}.cs-brand-values-desc{grid-column:2;grid-row:1 / span 2;font-size:.78rem;line-height:1.6;color:#c0cde0;margin:0}
.cs-brand-values-grid{grid-column:3;grid-row:1 / span 3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0}
.cs-value-card{padding:1rem;background:linear-gradient(145deg,rgba(15,32,54,.95),rgba(8,21,38,.96));border:1px solid #243c58;border-radius:12px;min-width:0}.cs-value-icon{width:34px;height:34px;font-size:1rem;margin-bottom:.65rem;border:0;background:transparent}.cs-value-title{font-size:.82rem;margin-bottom:.35rem}.cs-value-text{font-size:.68rem;line-height:1.4}.cs-brand-values-footer{grid-column:1 / span 2;grid-row:3;text-align:left}.cs-brand-values-footer .cs-btn{font-size:.7rem;padding:.6rem 1rem}
/* Lower sections remain content-rich, but share the visual language. */
.cs-section{padding:4rem 0}.cs-section-header{margin-bottom:2rem}.cs-section-title{letter-spacing:-.035em}.cs-site-main{overflow:clip}
@media(max-width:1200px){.cs-hero-inner{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:1rem}.cs-hero-student-col{left:28%;width:39%}.cs-hero-content{max-width:530px}.cs-hero-title{font-size:clamp(2.45rem,4vw,3.35rem)}.cs-erp-showcase-panel{padding:1rem}.cs-editorial-card{min-height:260px}.cs-editorial-card-body{width:80%;padding:1.2rem .9rem}.cs-brand-values-section .cs-container-wide{grid-template-columns:1.15fr .85fr 1.7fr;gap:.8rem}}
@media(max-width:900px){.cs-hero-section{padding-top:calc(var(--header-height) + 1rem)}.cs-hero-inner{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);min-height:470px}.cs-hero-student-col{left:27%;width:42%;opacity:.75}.cs-hero-content{max-width:100%;padding-right:.5rem}.cs-hero-title{font-size:clamp(2.2rem,4.6vw,3.1rem)}.cs-hero-desc{font-size:.85rem}.cs-hero-benefits{gap:.55rem}.cs-hero-benefit-item{font-size:.62rem}.cs-erp-features-list{grid-template-columns:1fr}.cs-erp-mockup-thumb{height:125px}.cs-credibility-strip{width:calc(100% - 2rem)}.cs-credibility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-editorial-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.cs-editorial-card{min-height:280px}.cs-editorial-card-body{width:92%;padding:1rem .8rem}.cs-editorial-card-title{font-size:1.15rem}.cs-editorial-card-copy{font-size:.68rem}.cs-brand-values-section .cs-container-wide{grid-template-columns:1fr 1fr}.cs-brand-values-title{grid-column:1;grid-row:2}.cs-brand-values-desc{grid-column:2;grid-row:1 / span 2}.cs-brand-values-grid{grid-column:1 / -1;grid-row:4;grid-template-columns:repeat(4,minmax(0,1fr))}.cs-brand-values-footer{grid-row:3;grid-column:1 / -1}}
@media(max-width:640px){.cs-hero-section{padding-top:calc(var(--header-height) + .5rem)}.cs-hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:1rem;min-height:0;padding-bottom:2.3rem}.cs-hero-content{padding:.6rem 0 0}.cs-hero-badge{font-size:.56rem;white-space:normal;line-height:1.4;max-width:100%}.cs-hero-title{font-size:clamp(2.25rem,10vw,3.1rem);line-height:1.03;max-width:100%}.cs-hero-desc{font-size:.86rem;max-width:100%}.cs-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.cs-hero-actions .cs-btn{font-size:.72rem;padding:.75rem .7rem;justify-content:center}.cs-hero-actions .cs-btn-secondary{display:none}.cs-hero-annotation-wrapper{margin:.25rem 0 .7rem}.cs-annotation{font-size:.95rem}.cs-hero-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;padding-top:.8rem}.cs-hero-benefit-item{font-size:.68rem;white-space:normal}.cs-hero-student-col{position:relative;left:auto;top:auto;bottom:auto;width:100%;height:260px;opacity:1;order:2;pointer-events:none;margin-top:-.25rem}.cs-hero-student-wrapper{height:100%;overflow:hidden;border-radius:18px;border:1px solid rgba(57,213,255,.28)}.cs-hero-student-img{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);object-position:center 25%}.cs-hero-student-overlay{background:linear-gradient(0deg,#061020 0%,transparent 50%,rgba(6,16,32,.05) 80%,#061020 100%)}.cs-floating-badge-top-left{top:1rem;left:.75rem}.cs-floating-badge-bottom-right{right:.75rem;bottom:1rem}.cs-erp-col{width:100%;max-width:none;margin:0;transform:none;order:3}.cs-erp-showcase-panel{padding:1rem}.cs-erp-header{gap:.6rem}.cs-erp-title{font-size:1rem}.cs-erp-mockup-thumb{height:155px}.cs-erp-features-list{grid-template-columns:1fr 1fr}.cs-erp-feature-item{font-size:.65rem}.cs-credibility-strip{margin:-.8rem auto 0;width:calc(100% - 1.2rem);padding:.85rem;border-radius:14px}.cs-credibility-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.cs-credibility-item{gap:.5rem;align-items:flex-start}.cs-credibility-icon-box{width:32px;height:32px;font-size:.95rem;border-radius:9px}.cs-credibility-title{font-size:.68rem}.cs-credibility-desc{font-size:.58rem}.cs-editorial-section{padding:1.8rem 0 2.8rem}.cs-editorial-grid-3{grid-template-columns:1fr;gap:1rem}.cs-editorial-card{min-height:250px}.cs-editorial-thumb{width:67%}.cs-editorial-card-body{width:76%;padding:1.2rem 1rem}.cs-editorial-card-title{font-size:1.35rem}.cs-editorial-card-copy{font-size:.75rem;max-width:230px}.cs-editorial-card .cs-badge-pill{font-size:.58rem}.cs-brand-values-section{padding:2.5rem 0}.cs-brand-values-section .cs-container-wide{display:flex;flex-direction:column;align-items:stretch;gap:1rem}.cs-brand-values-header{display:flex;flex-direction:column;gap:.75rem}.cs-brand-values-header>.cs-badge-pill,.cs-brand-values-title,.cs-brand-values-desc{grid-column:auto;grid-row:auto}.cs-brand-values-title{font-size:2rem}.cs-brand-values-desc{font-size:.82rem}.cs-brand-values-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.cs-value-card{padding:.85rem}.cs-value-title{font-size:.78rem}.cs-value-text{font-size:.65rem}.cs-brand-values-footer{grid-column:auto;grid-row:auto}.cs-section{padding:3rem 0}}