/* ==========================================================================
   KLASSA — OFFICIAL DESIGN SYSTEM & MOTION STYLESHEET
   Brand Foundation:
   - Deep Pine Teal: #0F766E
   - Soft Mint: #CCFBF1 & #14B8A6
   - Violet Indigo: #6366F1 (AI / Smart Automation)
   - Pure White: #FFFFFF
   - Dark Text: #073B3A & #0F172A
   
   Proportion:
   - 65–70% White / Very Light Mint Background
   - 20–25% Teal & Soft Mint
   - 5–10% Violet Accent (Semantic AI)
   ========================================================================== */

:root {
  /* Brand Palette */
  --teal-primary: #0F766E;
  --teal-dark: #073B3A;
  --teal-deep: #042F2E;
  --teal-hover: #0D9488;
  --teal-subtle: rgba(15, 118, 110, 0.08);

  --mint-primary: #14B8A6;
  --mint-soft: #CCFBF1;
  --mint-light: #F0FDF9;
  --mint-border: #99F6E4;

  --violet-ai: #6366F1;
  --violet-ai-hover: #4F46E5;
  --violet-subtle: rgba(99, 102, 241, 0.08);
  --violet-glow: rgba(99, 102, 241, 0.25);

  --white: #FFFFFF;
  --bg-main: #FFFFFF;
  --bg-light: #F8FAFA;
  --bg-card: #FFFFFF;
  
  --text-main: #073B3A;
  --text-dark: #0F172A;
  --text-muted: #475569;
  --text-subtle: #64748B;
  --text-white: #FFFFFF;
  --text-white-muted: #CCFBF1;

  --border-light: rgba(15, 118, 110, 0.12);
  --border-subtle: rgba(15, 23, 42, 0.08);

  /* Radius & Surfaces */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows (Subtle, Modern SaaS) */
  --shadow-sm: 0 2px 8px rgba(15, 118, 110, 0.04);
  --shadow-md: 0 8px 24px -4px rgba(15, 118, 110, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 40px -8px rgba(15, 118, 110, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --shadow-cockpit: 0 25px 60px -12px rgba(7, 59, 58, 0.16), 0 8px 20px -4px rgba(15, 118, 110, 0.08);
  --shadow-card-hover: 0 16px 36px -6px rgba(15, 118, 110, 0.14);

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  color: var(--text-main);
  background-color: var(--bg-main);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.65;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.25;
}

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Text Highlights */
.text-highlight-teal {
  color: var(--teal-primary);
  position: relative;
  display: inline-block;
}

.text-highlight-mint {
  color: var(--teal-primary);
  background: linear-gradient(120deg, var(--teal-primary) 0%, #0D9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scroll-Triggered Entrance Reveals (Majestic, Slow & Smooth) */
.reveal-on-scroll {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.reveal-on-scroll.revealed {
  opacity: 1;
}

/* Elements without continuous parallax slide up gently */
.reveal-on-scroll:not([data-parallax-depth]) {
  transform: translate3d(0, 48px, 0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll:not([data-parallax-depth]).revealed {
  transform: translate3d(0, 0, 0);
}

/* Continuous Parallax Elements (Zero CSS Transition on Transform to Prevent Jitter) */
[data-parallax-depth] {
  will-change: transform;
  transition-property: opacity, box-shadow, border-color, background-color !important;
}

/* Abstract K-Wing Background Aura Motifs */
.k-wing-background-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.k-wing-hero {
  position: absolute;
  top: 20px;
  right: -50px;
  width: 580px;
  height: 680px;
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.ambient-glow-top {
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 380px;
  background: radial-gradient(circle, rgba(204, 251, 241, 0.6) 0%, rgba(20, 184, 166, 0.08) 70%, transparent 100%);
}

.ambient-glow-mid {
  top: 1400px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.04) 0%, transparent 70%);
}

/* Buttons System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s var(--ease-smooth);
}

.btn-primary {
  background-color: var(--teal-primary);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

.btn-primary:hover {
  background-color: var(--teal-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35);
}

.btn-secondary {
  background-color: var(--white);
  color: var(--text-dark);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--mint-light);
  border-color: var(--mint-primary);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dark);
}

.btn-ghost:hover {
  color: var(--teal-primary);
  background-color: var(--teal-subtle);
}

.btn-outline {
  background: transparent;
  color: var(--teal-primary);
  border-color: var(--teal-primary);
}

.btn-outline:hover {
  background-color: var(--teal-subtle);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn-whatsapp {
  background-color: #25D366;
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp:hover {
  background-color: #20BA5A;
  transform: translateY(-2px);
}

/* AI Semantic Sparkle */
.ai-sparkle, .badge-icon-sparkle, .ai-sparkle-inline {
  color: var(--violet-ai);
  display: inline-block;
  font-weight: 700;
  animation: sparkle-pulse 2.4s ease-in-out infinite;
}

@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15) rotate(5deg); }
}

/* Badges */
.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background-color: var(--mint-soft);
  color: var(--teal-dark);
}

.badge-tag-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background-color: rgba(15, 118, 110, 0.1);
  color: var(--teal-primary);
}

.badge-tag-pine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background-color: rgba(204, 251, 241, 0.15);
  color: var(--mint-soft);
  border: 1px solid rgba(204, 251, 241, 0.25);
}

.section-badge-center {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* Section Common Titles */
.section-headline {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.headline-row {
  display: block;
  white-space: nowrap;
}

.section-subheadline {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 36px auto;
  line-height: 1.65;
}

.text-center {
  text-align: center;
}

/* ====================================================================
   4. NAVIGATION (Floating / Sticky)
   ==================================================================== */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 16px 0;
  transition: all 0.3s var(--ease-smooth);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-radius: var(--radius-xl);
  background-color: transparent;
  transition: all 0.3s var(--ease-smooth);
}

/* Scrolled state: white translucent navbar, subtle backdrop blur, soft border, subtle shadow */
.navbar-wrapper.scrolled {
  padding: 10px 0;
}

.navbar-wrapper.scrolled .navbar-container {
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 30px -5px rgba(15, 118, 110, 0.08);
}

.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo-img {
  height: 38px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-item {
  color: var(--text-main);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: var(--teal-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-nav-cta {
  padding: 10px 20px;
  font-size: 0.9rem;
}

.mobile-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-dark);
  cursor: pointer;
  padding: 6px;
}

/* Mobile Drawer Menu */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  background-color: var(--white);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
  z-index: 1100;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: right 0.35s var(--ease-smooth);
}

.mobile-menu-drawer.open {
  right: 0;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.drawer-logo {
  height: 32px;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dark);
}

.drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: auto;
}

.drawer-item {
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
}

.drawer-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

/* ====================================================================
   5. HERO SECTION — KLASSA CANONICAL 3D ATOMIC PRODUCT SCULPTURE
   - ONE Master Orbit Geometry: 440px x 196px (Ratio 0.445)
   - SHARED Center: (0, 0, 0) Coinciding with the KLASSA K Nucleus
   - 3 Distinct 3D Planes at 60°/120° intervals (No deformation during drag)
   - Consistent Translucent Acrylic/Glass Filament Material (2.5px thickness)
   - 12px Extruded KLASSA K Nucleus
   - Volumetric 10px 3D Glass Cards with Smart Partial Billboarding
   ==================================================================== */
.hero-section {
  position: relative;
  padding-top: 108px;
  padding-bottom: 44px;
  background: radial-gradient(120% 70% at 50% 0%, var(--mint-light) 0%, var(--white) 100%);
  overflow: hidden;
  z-index: 1;
}

.hero-ambient-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 950px;
  height: 650px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.14) 0%, rgba(99, 102, 241, 0.06) 45%, transparent 70%);
  filter: blur(65px);
  pointer-events: none;
  z-index: -1;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 36px;
  align-items: center;
  position: relative;
  min-height: 520px;
}

/* ====================================================================
   LEFT COLUMN: Copy, Spacing & CTA (100% Preserved)
   ==================================================================== */
.hero-content-col {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 5;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 20px;
}

.badge-tag-verified {
  background-color: var(--teal-primary);
  color: var(--white);
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.hero-headline {
  font-size: 2.85rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-dark);
  line-height: 1.18;
  margin-bottom: 12px;
}

.hero-subheading {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-dark);
  line-height: 1.28;
  margin-bottom: 20px;
}

.text-highlight-teal {
  color: var(--teal-primary);
}

.text-highlight-mint {
  color: var(--teal-hover);
  position: relative;
  display: inline-block;
}

.text-highlight-mint::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 6px;
  background: var(--mint-soft);
  border-radius: 4px;
  z-index: -1;
  opacity: 0.8;
}

.hero-subheadline {
  font-size: 1.06rem;
  color: var(--text-muted);
  line-height: 1.68;
  max-width: 500px;
  margin-bottom: 28px;
}

.hero-cta-group {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.cta-primary-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.cta-micro-guarantee {
  font-size: 0.74rem;
  color: var(--text-light);
  font-weight: 500;
  padding-left: 4px;
}

.btn-hero-primary {
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: var(--radius-full);
  gap: 8px;
  box-shadow: 0 10px 25px -4px rgba(15, 118, 110, 0.35);
}

.ai-sparkle-inline {
  color: #CCFBF1;
  font-size: 1.05rem;
  animation: pulse 2.2s infinite ease-in-out;
}

.btn-hero-secondary {
  padding: 14px 24px;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  gap: 10px;
}

.play-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-primary);
}

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.stars-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.star-filled {
  width: 16px;
  height: 16px;
  fill: #F59E0B;
  color: #F59E0B;
}

.social-proof-text {
  font-size: 0.85rem;
  color: var(--text-dark);
  line-height: 1.4;
  margin: 0;
}

.social-proof-note {
  display: block;
  font-size: 0.72rem;
  color: var(--text-light);
}

/* ====================================================================
   RIGHT COLUMN: KLASSA ATOMIC ECOSYSTEM HERO STAGE
   ==================================================================== */
.hero-ecosystem-col {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  z-index: 3;
}

.atomic-ecosystem-stage {
  position: relative;
  width: 580px;
  height: 500px;
  user-select: none;
  overflow: visible;
  padding: 0;
  margin: 0 auto;
  cursor: default;
}

/* Ambient Radial Glow */
.atomic-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.18) 0%, rgba(56, 189, 248, 0.09) 45%, rgba(99, 102, 241, 0.03) 68%, transparent 75%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 1;
}

/* ====================================================================
   MAIN ATOM CONTAINER & COMPACT GEOMETRY
   ==================================================================== */
.klassa-atom-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ====================================================================
   1. KLASSA 'K' LOGO NUCLEUS (Center Focal Point)
   ==================================================================== */
.atom-nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.nucleus-radial-aura {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.38) 0%, rgba(56, 189, 248, 0.20) 45%, rgba(99, 102, 241, 0.08) 68%, transparent 75%);
  filter: blur(24px);
  animation: nucleusAuraBreathe 4s ease-in-out infinite alternate;
  pointer-events: none;
}

.nucleus-inner-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(45, 212, 191, 0.45) 55%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
}

@keyframes nucleusAuraBreathe {
  0% { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.15); opacity: 1; }
}

.nucleus-k-box {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 24px rgba(15, 118, 110, 0.35)) drop-shadow(0 0 14px rgba(45, 212, 191, 0.45));
  z-index: 2;
}

.nucleus-k-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.6));
}

/* ====================================================================
   2. EXACTLY THREE ELEGANT ORBIT RINGS (Compact Cluster)
   ==================================================================== */
.atom-orbits-system {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}

.atom-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 170px;
  margin-left: -190px;
  margin-top: -85px;
  border-radius: 50%;
  border: 1.8px solid rgba(45, 212, 191, 0.48);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.18), inset 0 0 8px rgba(45, 212, 191, 0.10);
  pointer-events: none;
}

/* Orbit 1: Wide horizontal ellipse */
.orbit-ring-horizontal {
  transform: rotate(0deg);
}

/* Orbit 2: Diagonal ellipse tilted direction A */
.orbit-ring-diag-1 {
  transform: rotate(-38deg);
  border-color: rgba(45, 212, 191, 0.38);
}

/* Orbit 3: Diagonal ellipse tilted direction B */
.orbit-ring-diag-2 {
  transform: rotate(38deg);
  border-color: rgba(45, 212, 191, 0.38);
}

/* Glowing Traveling Electrons along the Elliptical Orbits */
.electron-glider {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #2DD4BF 55%, #0F766E 100%);
  box-shadow: 0 0 10px #2DD4BF, 0 0 4px #FFFFFF, 0 0 18px rgba(45, 212, 191, 0.6);
  pointer-events: none;
  animation: electronTravelEllipse 12s linear infinite;
  will-change: transform;
}

/* Staggered timings for the 6 gliders */
.glider-h1 { animation-delay: 0s; }
.glider-h2 { animation-delay: -6s; }

.glider-d1-a { animation-delay: -2s; animation-duration: 14s; }
.glider-d1-b { animation-delay: -9s; animation-duration: 14s; }

.glider-d2-a { animation-delay: -4s; animation-duration: 16s; }
.glider-d2-b { animation-delay: -12s; animation-duration: 16s; }

/* 380px x 170px Ellipse Path (a = 190px, b = 85px) */
@keyframes electronTravelEllipse {
  0%     { transform: translate(190px, 0px); }
  8.33%  { transform: translate(164.5px, 42.5px); }
  16.67% { transform: translate(95px, 73.6px); }
  25%    { transform: translate(0px, 85px); }
  33.33% { transform: translate(-95px, 73.6px); }
  41.67% { transform: translate(-164.5px, 42.5px); }
  50%    { transform: translate(-190px, 0px); }
  58.33% { transform: translate(-164.5px, -42.5px); }
  66.67% { transform: translate(-95px, -73.6px); }
  75%    { transform: translate(0px, -85px); }
  83.33% { transform: translate(95px, -73.6px); }
  91.67% { transform: translate(164.5px, -42.5px); }
  100%   { transform: translate(190px, 0px); }
}

/* ====================================================================
   3. SIX BALANCED FEATURE CARDS (Satellite Local Orbit / Micro-Sway)
   ==================================================================== */
.atomic-card {
  position: absolute;
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

/* TOP CENTER: AI Modul Ajar */
.card-pos-top {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: localOrbitTop 6s ease-in-out infinite;
}

/* UPPER LEFT: Nilai */
.card-pos-upper-left {
  top: 86px;
  left: -8px;
  animation: localOrbitUpperLeft 7s ease-in-out infinite 0.6s;
}

/* UPPER RIGHT: Presensi */
.card-pos-upper-right {
  top: 86px;
  right: -8px;
  animation: localOrbitUpperRight 6.6s ease-in-out infinite 1.2s;
}

/* LOWER LEFT: Analisis Siswa */
.card-pos-lower-left {
  bottom: 86px;
  left: -8px;
  animation: localOrbitLowerLeft 7.4s ease-in-out infinite 1.8s;
}

/* LOWER RIGHT: Ujian Anti-Contek */
.card-pos-lower-right {
  bottom: 86px;
  right: -8px;
  animation: localOrbitLowerRight 6.8s ease-in-out infinite 2.4s;
}

/* BOTTOM CENTER: Rapor */
.card-pos-bottom {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: localOrbitBottom 6.4s ease-in-out infinite 3s;
}

/* Satellite Local Elliptical Orbit Paths (~8-12px sway) */
@keyframes localOrbitTop {
  0%, 100% { transform: translateX(-50%) translate(0, 0); }
  25% { transform: translateX(-50%) translate(6px, -4px); }
  50% { transform: translateX(-50%) translate(0, -6px); }
  75% { transform: translateX(-50%) translate(-6px, -2px); }
}

@keyframes localOrbitUpperLeft {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-4px, 5px); }
  50% { transform: translate(-6px, 0px); }
  75% { transform: translate(-2px, -5px); }
}

@keyframes localOrbitUpperRight {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -5px); }
  50% { transform: translate(6px, 0px); }
  75% { transform: translate(2px, 5px); }
}

@keyframes localOrbitLowerLeft {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-5px, -4px); }
  50% { transform: translate(0px, -6px); }
  75% { transform: translate(4px, -2px); }
}

@keyframes localOrbitLowerRight {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(5px, 4px); }
  50% { transform: translate(0px, 6px); }
  75% { transform: translate(-4px, 2px); }
}

@keyframes localOrbitBottom {
  0%, 100% { transform: translateX(-50%) translate(0, 0); }
  25% { transform: translateX(-50%) translate(-6px, 4px); }
  50% { transform: translateX(-50%) translate(0, 6px); }
  75% { transform: translateX(-50%) translate(6px, 2px); }
}

/* Hover Lift Effect */
.card-pos-top:hover { transform: translateX(-50%) translateY(-6px) scale(1.02); }
.card-pos-upper-left:hover { transform: translateY(-6px) scale(1.02); }
.card-pos-upper-right:hover { transform: translateY(-6px) scale(1.02); }
.card-pos-lower-left:hover { transform: translateY(-6px) scale(1.02); }
.card-pos-lower-right:hover { transform: translateY(-6px) scale(1.02); }
.card-pos-bottom:hover { transform: translateX(-50%) translateY(-6px) scale(1.02); }

.atomic-card:hover .card-face-front {
  border-color: #0F766E;
  box-shadow: 0 20px 42px -6px rgba(15, 118, 110, 0.24), 0 0 16px rgba(20, 184, 166, 0.20), inset 0 1px 1px #FFFFFF;
}

/* Card Glass Surface */
.card-face-front {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 252, 251, 0.92) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.2px solid rgba(255, 255, 255, 0.98);
  border-radius: 14px;
  padding: 9px 13px;
  box-shadow: 0 14px 32px -6px rgba(15, 118, 110, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 1px #FFFFFF, inset 0 -1px 2px rgba(15, 118, 110, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Volumetric Spherical Orbit Node Anchor Dot */
.card-orbit-node-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #2DD4BF 45%, #0F766E 85%, #042F2E 100%);
  box-shadow: 0 0 9px #2DD4BF, 0 2px 4px rgba(0, 0, 0, 0.25);
  transform: translateZ(7px);
  pointer-events: none;
}

.dot-top { top: -5px; left: 50%; transform: translateX(-50%) translateZ(7px); }
.dot-right { right: -5px; top: 50%; transform: translateY(-50%) translateZ(7px); }
.dot-left { left: -5px; top: 50%; transform: translateY(-50%) translateZ(7px); }
.dot-bottom { bottom: -5px; left: 50%; transform: translateX(-50%) translateZ(7px); }

.card-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon-box i {
  width: 16px;
  height: 16px;
}

.icon-spark { font-size: 1rem; }
.icon-purple { background: #EEF2FF; color: #6366F1; }
.icon-teal-green { background: #DCFCE7; color: #16A34A; }
.icon-mint { background: #CCFBF1; color: #0F766E; }
.icon-indigo { background: #EDE9FE; color: #4F46E5; }
.icon-blue { background: #E0F2FE; color: #0284C7; }
.icon-amber { background: #FEF3C7; color: #D97706; }

.card-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
  white-space: nowrap;
}

.card-status-sub {
  font-size: 0.72rem;
  color: #64748B;
  white-space: nowrap;
  line-height: 1.2;
}

.highlight-teal { color: #0F766E; font-weight: 600; }
.alert-sub { color: #D97706; font-weight: 600; }

/* Distinct Card Dimensions - Widened proportionally */
.card-modul-ajar { width: 206px; }
.card-nilai-stats { width: 158px; }
.card-presensi-live { width: 194px; }
.card-analisis-radar { width: 196px; }
.card-ujian-guard { width: 216px; }
.card-rapor-doc { width: 166px; }

.card-progress-bar-wrap {
  position: relative;
  width: 100%;
  height: 7px;
  background: #F1F5F9;
  border-radius: 9999px;
  overflow: visible;
  margin-top: 2px;
}

.card-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #14B8A6 0%, #2DD4BF 100%);
}

.progress-pct {
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0F766E;
  font-family: 'JetBrains Mono', monospace;
}

.card-metric-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.metric-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.big-score {
  font-size: 1.38rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
  font-family: var(--font-heading);
}

.score-trend {
  font-size: 0.70rem;
  font-weight: 700;
  color: #16A34A;
}

.mini-bar-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
}

.mini-bar-bars span {
  width: 4px;
  background: #A7F3D0;
  border-radius: 2px;
}

.mini-bar-bars .bar-active { background: #10B981; }

.mini-avatar-cluster {
  display: flex;
  align-items: center;
  margin-top: 3px;
  margin-left: 2px;
}

.av-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1.5px solid #FFFFFF;
  margin-left: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

.av-1 { margin-left: 0; }

.av-more {
  font-size: 0.66rem;
  font-weight: 700;
  color: #0F766E;
  background: #CCFBF1;
  border: 1.5px solid #FFFFFF;
  border-radius: 9999px;
  padding: 1px 5px;
  margin-left: -4px;
}

.analisis-avatars-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
}

.av-warning-group {
  display: flex;
  align-items: center;
}

.btn-mini-arrow {
  color: #475569;
  display: flex;
  align-items: center;
}

.btn-mini-arrow i {
  width: 13px;
  height: 13px;
}

.ujian-live-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}

.mini-wave-svg {
  width: 58px;
  height: 14px;
}

.badge-aman-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #059669;
}

.dot-green {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 4px #10B981;
}

.mini-report-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 24px;
  margin-left: 6px;
}

.rpt-line {
  height: 2px;
  background: #FCD34D;
  border-radius: 1px;
}

.rpt-line.w-full { width: 100%; }
.rpt-line.w-half { width: 60%; }

.rpt-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  margin-top: 1px;
}

.rpt-bars span {
  width: 3px;
  background: #F59E0B;
  border-radius: 1px;
}

/* Responsive Breakpoints for Hero Section */
@media (max-width: 1024px) {
  .hero-section {
    padding-top: 96px;
    padding-bottom: 36px;
  }

  .hero-split-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }

  .problems-section,
  .time-paradox-section,
  .teacher-workload-section,
  .introducing-section,
  .feature-spotlight-section,
  .superpowers-section,
  .toolkit-section,
  .ecosystem-section,
  .comparison-section,
  .pricing-section,
  .faq-section {
    padding: 46px 0;
  }

  .mid-cta-section,
  .final-cta-section {
    padding: 40px 0;
  }

  .section-headline {
    font-size: 2.05rem;
    line-height: 1.25;
  }

  .hero-content-col {
    display: contents;
  }

  .hero-badge {
    order: 1;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-headline {
    order: 2;
    text-align: center;
    width: 100%;
  }

  .hero-subheading {
    order: 3;
    font-size: 1.68rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 580px;
    text-align: center;
    width: 100%;
  }

  .hero-ecosystem-col {
    order: 4;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-height: auto;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 6px;
    margin-bottom: 22px;
  }

  .hero-subheadline {
    order: 5;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
  }

  .hero-cta-group {
    order: 6;
    justify-content: center;
  }

  .cta-primary-wrap {
    align-items: center;
  }

  .hero-social-proof {
    order: 7;
    justify-content: center;
  }

  .atomic-ecosystem-stage {
    transform: scale(0.85);
    transform-origin: center center;
    flex-shrink: 0;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: 84px;
    padding-bottom: 28px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  .problems-section,
  .time-paradox-section,
  .teacher-workload-section,
  .introducing-section,
  .feature-spotlight-section,
  .superpowers-section,
  .toolkit-section,
  .ecosystem-section,
  .comparison-section,
  .pricing-section,
  .faq-section {
    padding: 36px 0;
  }

  .mid-cta-section,
  .final-cta-section {
    padding: 30px 0;
  }

  .mid-cta-box,
  .final-cta-container {
    padding: 38px 20px;
  }

  .site-footer {
    padding: 36px 0 24px 0;
  }

  .container {
    padding: 0 16px;
  }

  .section-headline {
    font-size: clamp(1.68rem, 5.8vw, 2.05rem);
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
  }

  .section-subheadline {
    margin-bottom: 24px;
  }

  .problem-timeline-nav {
    margin-bottom: 24px;
  }

  .hero-container {
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
  }

  .hero-badge {
    font-size: 0.76rem;
    padding: 6px 14px;
    gap: 6px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    line-height: 1.35;
    margin-bottom: 16px;
  }

  .badge-tag-verified {
    font-size: 0.65rem;
    padding: 2px 7px;
  }

  .hero-headline {
    font-size: 2rem;
    line-height: 1.24;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .hero-headline br {
    display: none;
  }

  .hero-subheading {
    font-size: 1.48rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    max-width: 100%;
  }

  .hero-subheadline {
    font-size: 0.95rem;
    line-height: 1.62;
    margin-bottom: 22px;
    max-width: 100%;
    padding: 0 4px;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
    margin-bottom: 22px;
  }

  .cta-primary-wrap {
    width: 100%;
    align-items: center;
  }

  .btn-hero-primary {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.98rem;
  }

  .btn-hero-secondary {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 0.92rem;
  }

  .cta-micro-guarantee {
    text-align: center;
    width: 100%;
    padding-left: 0;
    margin-top: 4px;
  }

  .hero-social-proof {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .social-proof-text {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .hero-ecosystem-col {
    height: 380px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 18px;
  }

  .atomic-ecosystem-stage {
    transform: scale(0.72);
    transform-origin: center center;
    flex-shrink: 0;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .hero-container {
    padding: 0 16px;
  }

  .hero-headline {
    font-size: 1.82rem;
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  .hero-subheading {
    font-size: 1.38rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 14px;
  }

  .hero-subheadline {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .hero-ecosystem-col {
    height: 350px;
    margin-top: 2px;
    margin-bottom: 16px;
  }

  .atomic-ecosystem-stage {
    transform: scale(0.66);
    transform-origin: center center;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding-top: 76px;
    padding-bottom: 20px;
  }

  .problems-section,
  .time-paradox-section,
  .teacher-workload-section,
  .introducing-section,
  .feature-spotlight-section,
  .superpowers-section,
  .toolkit-section,
  .ecosystem-section,
  .comparison-section,
  .pricing-section,
  .faq-section {
    padding: 30px 0;
  }

  .mid-cta-section,
  .final-cta-section {
    padding: 24px 0;
  }

  .mid-cta-box,
  .final-cta-container {
    padding: 30px 16px;
  }

  .container {
    padding: 0 14px;
  }

  .section-headline {
    font-size: clamp(1.52rem, 6.4vw, 1.76rem);
    line-height: 1.22;
    letter-spacing: -0.025em;
  }

  .hero-headline {
    font-size: 1.68rem;
    margin-bottom: 8px;
  }

  .hero-subheading {
    font-size: 1.28rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
  }

  .hero-badge {
    font-size: 0.72rem;
    padding: 5px 12px;
  }

  .hero-ecosystem-col {
    height: 325px;
    margin-top: 0;
    margin-bottom: 14px;
  }

  .atomic-ecosystem-stage {
    transform: scale(0.60);
    transform-origin: center center;
  }
}

@media (max-width: 380px) {
  .container {
    padding: 0 12px;
  }

  .hero-headline {
    font-size: 1.5rem;
    margin-bottom: 6px;
  }

  .hero-subheading {
    font-size: 1.18rem;
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .hero-badge {
    font-size: 0.68rem;
    padding: 4px 10px;
  }

  .hero-ecosystem-col {
    height: 295px;
    margin-top: 0;
    margin-bottom: 12px;
  }

  .atomic-ecosystem-stage {
    transform: scale(0.53);
    transform-origin: center center;
  }

  .section-headline {
    font-size: clamp(1.38rem, 6.2vw, 1.52rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
  }
}


/* ====================================================================
   6. PROBLEM SECTION — "FAKTA LAPANGAN GURU INDONESIA"
   ==================================================================== */
.problems-section {
  padding: 56px 0;
  background-color: var(--bg-main);
  position: relative;
  z-index: 1;
}

/* ============================================================================
   6. SYNCHRONIZED 5-POINT TIMELINE & CINEMATIC PROBLEM CAROUSEL
   ============================================================================ */

/* 5-Point Process Connector / Navigation Bar */
.problem-timeline-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 48px auto;
  max-width: 940px;
  position: relative;
  padding: 0 10px;
}

.problem-nav-node {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s var(--ease-smooth);
  user-select: none;
  position: relative;
  z-index: 2;
}

.problem-nav-node:hover {
  transform: translateY(-3px);
}

.problem-nav-node .node-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: #64748B;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.problem-nav-node:hover .node-circle {
  border-color: var(--teal-primary);
  color: var(--teal-primary);
}

.problem-nav-node.active .node-circle {
  background-color: var(--teal-primary);
  border-color: var(--teal-primary);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35);
  transform: scale(1.08);
}

.problem-nav-node.danger-node .node-circle {
  border-color: #FCA5A5;
  color: #EF4444;
}

.problem-nav-node.danger-node.active .node-circle {
  background-color: #EF4444;
  border-color: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

.problem-nav-node .node-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.problem-nav-node.active .node-label {
  color: #0F172A;
  font-weight: 800;
}

.problem-nav-node.danger-node.active .node-label {
  color: #DC2626;
}

/* Connecting Line Tracks Between Nodes */
.timeline-bar-track {
  flex: 1;
  height: 4px;
  background-color: #E2E8F0;
  margin: 0 10px;
  margin-bottom: 28px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.timeline-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #0F766E, #14B8A6);
  transition: width 0.4s ease;
}

.timeline-bar-fill.filled {
  width: 100%;
}

/* Cinematic Problem Agitation Carousel Container */
.problem-carousel-container {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.problem-carousel-viewport {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
}

.problem-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.problem-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 44px 48px;
  box-sizing: border-box;
}

.slide-content-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Left Column: Narrative & Pain Metric */
.slide-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slide-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--teal-primary);
  background-color: #F0FDFA;
  border: 1px solid var(--mint-primary);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  width: fit-content;
  letter-spacing: 0.5px;
}

.slide-step-badge.danger {
  color: #DC2626;
  background-color: #FEF2F2;
  border-color: #FCA5A5;
}

.slide-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}

.slide-desc {
  font-size: 0.96rem;
  color: #475569;
  line-height: 1.65;
}

.slide-quote-box {
  position: relative;
  background: #F8FAFC;
  border-left: 3px solid var(--teal-primary);
  border-radius: 0 12px 12px 0;
  padding: 12px 16px 12px 28px;
  margin-top: 4px;
}

.quote-mark {
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--teal-primary);
  opacity: 0.6;
  line-height: 1;
}

.quote-text {
  font-size: 0.88rem;
  color: #334155;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.slide-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #F0FDFA;
  border: 1px solid #CCFBF1;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.84rem;
  color: #0F766E;
  margin-top: 4px;
  width: fit-content;
}

.slide-stat-pill.danger {
  background: #FEF2F2;
  border-color: #FEE2E2;
  color: #B91C1C;
}

.slide-stat-pill .stat-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Right Column: Dramatized Visual Stage Canvas */
.slide-visual-stage {
  position: relative;
}

.visual-canvas {
  position: relative;
}

/* ========================================================
   REKOMENDASI 1: FRAMELESS EDGE-TO-EDGE CLEAN ARTWORK
   ======================================================== */
.visual-canvas.illustration-canvas {
  background: transparent;
  border: none;
  min-height: unset;
  padding: 0;
  overflow: visible;
  display: block;
  box-shadow: none;
}

.stage-artwork-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.12), 
              0 4px 14px -2px rgba(15, 23, 42, 0.05), 
              0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.visual-canvas.illustration-canvas:hover .stage-artwork-wrapper {
  transform: translateY(-5px);
  box-shadow: 0 30px 65px -15px rgba(15, 23, 42, 0.18), 
              0 10px 24px -4px rgba(15, 23, 42, 0.08), 
              0 0 0 1px rgba(15, 118, 110, 0.25);
}

.stage-artwork-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  transition: transform 0.6s var(--ease-smooth);
}

.visual-canvas.illustration-canvas:hover .stage-artwork-img {
  transform: scale(1.015);
}

/* HUD Top Badge */
.stage-hud-badge {
  position: absolute;
  top: 16px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  z-index: 5;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stage-hud-badge.warning {
  background: rgba(245, 158, 11, 0.9);
  color: #000000;
}

.stage-ambient-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  top: -40px;
  right: -40px;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.25) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(25px);
  z-index: 3;
}

.stage-ambient-glow.dark-midnight {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, transparent 70%);
}

.stage-ambient-glow.glow-danger {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
}

/* ========================================================
   REKOMENDASI 1: INTERACTIVE HOTSPOT PINS & CALLOUTS
   ======================================================== */
.hotspot-pin {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0.1s;
  animation: pin-float-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hotspot-pin:hover {
  transform: translateY(-4px) scale(1.04);
  z-index: 12;
}

/* Alignment Modifier: Pins positioned on the right side flip layout */
.hotspot-pin.pin-align-right {
  flex-direction: row-reverse;
  text-align: right;
}

/* Pulsing Hotspot Beacon Dot */
.pin-beacon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
}

.beacon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  animation: beacon-pulse 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.beacon-dot {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 12px currentColor;
  transition: transform 0.25s ease;
}

.hotspot-pin:hover .beacon-dot {
  transform: scale(1.2);
}

/* Beacon Color Themes */
.pin-danger .beacon-ring { background: rgba(239, 68, 68, 0.4); }
.pin-danger .beacon-dot { background: #EF4444; color: #EF4444; }

.pin-warning .beacon-ring { background: rgba(245, 158, 11, 0.4); }
.pin-warning .beacon-dot { background: #F59E0B; color: #F59E0B; }

.pin-success .beacon-ring { background: rgba(34, 197, 94, 0.4); }
.pin-success .beacon-dot { background: #22C55E; color: #22C55E; }

.pin-info .beacon-ring { background: rgba(56, 189, 248, 0.4); }
.pin-info .beacon-dot { background: #38BDF8; color: #38BDF8; }

.pin-purple .beacon-ring { background: rgba(168, 85, 247, 0.4); }
.pin-purple .beacon-dot { background: #A855F7; color: #A855F7; }

@keyframes beacon-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Glassmorphism Callout Tag */
.pin-callout {
  background: rgba(15, 23, 42, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 8px 12px;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  max-width: 215px;
}

.hotspot-pin:hover .pin-callout {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 255, 0.08);
}

.pin-danger .pin-callout { border-left: 3px solid #EF4444; }
.pin-warning .pin-callout { border-left: 3px solid #F59E0B; }
.pin-success .pin-callout { border-left: 3px solid #22C55E; }
.pin-info .pin-callout { border-left: 3px solid #38BDF8; }
.pin-purple .pin-callout { border-left: 3px solid #A855F7; }

.pin-align-right.pin-danger .pin-callout { border-left: 1px solid rgba(255, 255, 255, 0.16); border-right: 3px solid #EF4444; }
.pin-align-right.pin-warning .pin-callout { border-left: 1px solid rgba(255, 255, 255, 0.16); border-right: 3px solid #F59E0B; }
.pin-align-right.pin-success .pin-callout { border-left: 1px solid rgba(255, 255, 255, 0.16); border-right: 3px solid #22C55E; }
.pin-align-right.pin-info .pin-callout { border-left: 1px solid rgba(255, 255, 255, 0.16); border-right: 3px solid #38BDF8; }
.pin-align-right.pin-purple .pin-callout { border-left: 1px solid rgba(255, 255, 255, 0.16); border-right: 3px solid #A855F7; }

.pin-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.pin-align-right .pin-header {
  justify-content: flex-end;
}

.pin-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pin-danger .pin-icon { color: #F87171; }
.pin-warning .pin-icon { color: #FBBF24; }
.pin-success .pin-icon { color: #4ADE80; }
.pin-info .pin-icon { color: #38BDF8; }
.pin-purple .pin-icon { color: #C084FC; }

.pin-title {
  font-family: var(--font-mono);
  color: #F8FAFC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pin-badge-tag {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-left: 4px;
  white-space: nowrap;
  letter-spacing: 0.4px;
}

.pin-badge-tag.danger {
  background: rgba(239, 68, 68, 0.25);
  color: #FCA5A5;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.pin-badge-tag.warning {
  background: rgba(245, 158, 11, 0.25);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.pin-sub {
  font-size: 0.65rem;
  color: #94A3B8;
  margin: 3px 0 0 0;
  line-height: 1.35;
}

/* Bottom Summary Strip - Anchored cleanly at the foot of each slide */
.stage-bottom-banner {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 8px 14px;
  border-radius: 10px;
  color: #FCA5A5;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.stage-bottom-banner svg {
  width: 14px;
  height: 14px;
  color: #EF4444;
  flex-shrink: 0;
}

@keyframes pin-float-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .visual-canvas {
    min-height: 380px;
  }
  .pin-callout {
    max-width: 155px;
    padding: 6px 9px;
  }
  .pin-header {
    font-size: 0.66rem;
  }
  .pin-sub {
    font-size: 0.58rem;
  }
  .stage-bottom-banner {
    font-size: 0.65rem;
    padding: 6px 10px;
  }
}

/* Side Floating Navigators (Option 3) */
.carousel-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.14), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-side-btn.side-prev {
  left: -26px;
}

.carousel-side-btn.side-next {
  right: -26px;
}

.carousel-side-btn:hover {
  background: var(--teal-primary, #0D9488);
  border-color: var(--teal-primary, #0D9488);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 14px 28px -4px rgba(13, 148, 136, 0.38), 0 6px 12px -2px rgba(13, 148, 136, 0.2);
}

.carousel-side-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-side-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.carousel-side-btn.side-prev:hover svg {
  transform: translateX(-2px);
}

.carousel-side-btn.side-next:hover svg {
  transform: translateX(2px);
}

/* Minimalist Bottom Bar */
.problem-carousel-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}
.old-problem-carousel-controls-unused {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.carousel-nav-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F172A;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.25s var(--ease-smooth);
}

.carousel-nav-btn:hover {
  background: var(--teal-primary);
  border-color: var(--teal-primary);
  color: #FFFFFF;
  transform: scale(1.06);
}

.carousel-nav-btn svg {
  width: 18px;
  height: 18px;
}

.problem-carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CBD5E1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.carousel-dot-btn:hover {
  background: #94A3B8;
}

.carousel-dot-btn.active {
  width: 28px;
  border-radius: 99px;
  background: var(--teal-primary);
}

.carousel-dot-btn.danger-dot.active {
  background: #EF4444;
}

/* Mobile active topic indicator under timeline */
.problem-active-topic-mobile {
  display: none;
}

/* Bottom bar prev/next navigation buttons */
.carousel-bar-nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0;
}

.carousel-bar-nav-btn:hover {
  background: var(--teal-primary, #0F766E);
  color: #FFFFFF;
  border-color: var(--teal-primary, #0F766E);
}

/* Responsive Breakpoints for Problem Section */
@media (max-width: 960px) {
  /* 1. All 5 timeline nodes fit cleanly without horizontal scrolling */
  .problem-timeline-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 380px;
    margin: 0 auto 8px auto;
    padding: 0 4px;
    overflow: visible;
  }

  .timeline-bar-track {
    display: block;
    flex: 1;
    height: 3px;
    margin: 0 4px;
    margin-bottom: 0;
    align-self: center;
  }

  .problem-nav-node {
    gap: 0;
    flex-shrink: 0;
  }

  .problem-nav-node .node-circle {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    border-width: 2px;
  }

  .problem-nav-node .node-label {
    display: none;
  }

  /* Single centered active topic title under the 5 nodes */
  .problem-active-topic-mobile {
    display: block;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--teal-primary);
    margin: 0 auto 16px auto;
    letter-spacing: 0.02em;
    min-height: 20px;
    transition: color 0.3s ease;
  }

  /* 2. Slide Content: Reorder so visual is placed right below the title! */
  .slide-content-split {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .slide-narrative {
    display: contents; /* children become direct flex items */
  }

  /* 3. Tidy 1-line badge dialog */
  .slide-step-badge {
    order: 1;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 10px;
    gap: 6px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
  }

  .slide-step-badge .badge-dot {
    font-size: 0.65rem;
    opacity: 0.7;
  }

  .slide-title {
    order: 2;
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  /* Visual is now at order: 3 (right below title)! */
  .slide-visual-stage {
    order: 3;
    width: 100%;
    margin: 6px 0 8px 0;
  }

  .visual-canvas {
    min-height: unset;
  }

  .stage-artwork-wrapper {
    border-radius: 14px;
    box-shadow: 0 10px 25px -6px rgba(15, 23, 42, 0.12);
  }

  .stage-artwork-img {
    aspect-ratio: 16 / 9;
    max-height: 215px;
    object-fit: cover;
    border-radius: 14px;
  }

  .slide-desc {
    order: 4;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
    margin-bottom: 2px;
  }

  .slide-quote-box {
    order: 5;
    padding: 10px 14px 10px 24px;
    margin-top: 2px;
    border-radius: 0 10px 10px 0;
  }

  .quote-mark {
    font-size: 1.4rem;
    top: 2px;
    left: 8px;
  }

  .quote-text {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .slide-stat-pill {
    order: 6;
    font-size: 0.78rem;
    padding: 8px 12px;
    gap: 8px;
    margin-top: 2px;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  /* 4. Compact vertical padding to avoid overly long sections */
  .problem-slide {
    padding: 20px 18px 22px 18px;
  }

  /* Hide floating side buttons that covered text on mobile */
  .carousel-side-btn {
    display: none !important;
  }

  /* Bottom bar navigation controls */
  .problem-carousel-bottom-bar {
    padding: 12px 20px;
    gap: 16px;
    justify-content: center;
  }

  .carousel-bar-nav-btn {
    display: inline-flex !important;
  }
}

@media (max-width: 480px) {
  .problem-timeline-nav {
    max-width: 320px;
  }

  .problem-nav-node .node-circle {
    width: 32px;
    height: 32px;
    font-size: 0.74rem;
  }

  .timeline-bar-track {
    margin: 0 2px;
  }

  .slide-title {
    font-size: 1.2rem;
  }

  .stage-artwork-img {
    max-height: 180px;
  }

  .problem-slide {
    padding: 16px 14px 18px 14px;
  }
}

/* ====================================================================
   7. PARADOKS WAKTU GURU — 40% MENGAJAR VS 60% ADMINISTRASI
   ==================================================================== */
.time-paradox-section {
  position: relative;
  padding: 56px 0;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 60%, #F0FDFA 100%);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(204, 251, 241, 0.8);
  overflow: hidden;
  z-index: 2;
}

.time-paradox-ambient-glow {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 450px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.05) 0%, rgba(20, 184, 166, 0.05) 50%, transparent 70%);
  filter: blur(75px);
  pointer-events: none;
  z-index: -1;
}

.badge-tag-alert {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1px solid #FECACA !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot-red {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #EF4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: pulse-red-anim 2s infinite;
}

@keyframes pulse-red-anim {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.text-highlight-danger {
  color: #DC2626;
  position: relative;
  display: inline-block;
}

.text-highlight-danger::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(239, 68, 68, 0.22);
  border-radius: 2px;
  z-index: -1;
}

/* ====================================================================
   DOMINANT STEPPED PIE INFOGRAPHIC SHOWCASE & POINTER LINES
   ==================================================================== */
.infographic-showcase-wrap {
  display: grid;
  grid-template-columns: minmax(220px, 270px) auto minmax(220px, 270px);
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1140px;
  margin: 48px auto 36px auto;
  position: relative;
}

/* Side Annotation Columns (Lightweight & Clean) */
.infographic-side-col {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

.infographic-side-col.col-left {
  justify-content: flex-end;
  text-align: right;
}

.infographic-side-col.col-right {
  justify-content: flex-start;
  text-align: left;
}

.side-annotation-content {
  max-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.col-left .side-annotation-content {
  align-items: flex-end;
}

.col-right .side-annotation-content {
  align-items: flex-start;
}

/* Annotation Badges */
.annotation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}

.badge-admin {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.badge-teaching {
  background: #F0FDFA;
  color: #0F766E;
  border: 1px solid #99F6E4;
}

.dot-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-red {
  background: #EF4444;
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}

.dot-teal {
  background: #0F766E;
  box-shadow: 0 0 5px rgba(15, 118, 110, 0.5);
}

.annotation-title {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
}

.text-danger { color: #DC2626; }
.text-teal { color: #0F766E; }

.annotation-time {
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748B;
  margin-top: -2px;
  margin-bottom: 2px;
}

/* Checklist Points (Clean & Lightweight) */
.annotation-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 4px 0 0 0;
}

.annotation-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.81rem;
  color: #334155;
  line-height: 1.4;
  text-wrap: pretty;
}

.annotation-checklist li span {
  text-wrap: pretty;
}

.col-left .annotation-checklist li {
  flex-direction: row-reverse;
  text-align: right;
}

.check-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

.icon-danger { color: #EF4444; }
.icon-teal { color: #0F766E; }

/* Pointer Leader Lines */
.pointer-line {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pointer-left {
  flex-direction: row;
}

.pointer-right {
  flex-direction: row;
}

.pointer-bar {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.4), #CBD5E1);
  position: relative;
}

.pointer-left .pointer-bar {
  background: linear-gradient(90deg, #CBD5E1, #FCA5A5);
}

.pointer-right .pointer-bar {
  background: linear-gradient(90deg, #99F6E4, #CBD5E1);
}

.pointer-beacon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.beacon-red {
  background: #EF4444;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25), 0 2px 6px rgba(239, 68, 68, 0.4);
}

.beacon-teal {
  background: #0F766E;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25), 0 2px 6px rgba(15, 118, 110, 0.4);
}

/* CENTER DOMINANT PIE STAGE */
.infographic-center-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
}

.stepped-pie-wrapper {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 22px 40px rgba(15, 23, 42, 0.1));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stepped-pie-wrapper:hover {
  transform: scale(1.02);
}

.stepped-pie-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.pie-slice-path {
  transition: transform 0.35s ease, filter 0.35s ease;
  cursor: pointer;
  transform-origin: 210px 210px;
}

.pie-slice-path.slice-admin:hover {
  transform: scale(1.03) translate(3px, -3px);
  filter: drop-shadow(0 14px 22px rgba(239, 68, 68, 0.35));
}

.pie-slice-path.slice-teach:hover {
  transform: scale(1.03) translate(-3px, 3px);
  filter: drop-shadow(0 14px 22px rgba(15, 118, 110, 0.35));
}

.slice-label-group text {
  user-select: none;
  pointer-events: none;
}

.center-hub-content text {
  user-select: none;
  pointer-events: none;
}

/* BOTTOM CALLOUT (Centered & Minimalist) */
.infographic-bottom-callout {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.callout-pill-box {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #FFFBEB;
  border: 1.5px solid #FDE68A;
  padding: 14px 24px;
  border-radius: 99px;
  box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.08);
  max-width: 680px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.callout-pill-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(217, 119, 6, 0.12);
}

.callout-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.callout-icon {
  width: 18px;
  height: 18px;
  color: #D97706;
}

.callout-text {
  font-size: 0.92rem;
  color: #92400E;
  line-height: 1.5;
  margin: 0;
}

.callout-text strong {
  color: #78350F;
  font-weight: 800;
}

/* Responsive Styles for Stepped Pie Infographic */
@media (max-width: 1024px) {
  .infographic-showcase-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .infographic-side-col {
    justify-content: center !important;
    text-align: center !important;
  }

  .col-left .side-annotation-content,
  .col-right .side-annotation-content {
    align-items: center;
    text-align: center;
    max-width: 330px;
    width: 100%;
  }

  .annotation-checklist {
    width: 100%;
  }

  .col-left .annotation-checklist li,
  .col-right .annotation-checklist li {
    flex-direction: row;
    text-align: left;
    width: 100%;
  }

  .pointer-line {
    display: none;
  }

  .stepped-pie-wrapper {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .callout-icon-circle {
    display: none !important;
  }

  .callout-pill-box {
    border-radius: 16px;
    padding: 14px 20px;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .time-paradox-section {
    padding: 36px 0;
  }

  .stepped-pie-wrapper {
    width: 300px;
    height: 300px;
  }
}

/* ====================================================================
   8. MEMPERKENALKAN KLASSA — 4 RUANG EKOSISTEM (INTERACTIVE TABS)
   ==================================================================== */
.introducing-section {
  padding: 56px 0;
  background-color: var(--bg-main, #FFFFFF);
  position: relative;
  z-index: 1;
}

.intro-header-wrapper {
  max-width: 860px;
  margin: 0 auto 44px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-eyebrow {
  margin-bottom: 18px;
}

.intro-eyebrow-pill {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-primary, #0D9488);
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.22);
  padding: 6px 18px;
  border-radius: 99px;
}

.intro-logo-brand {
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
}

.intro-brand-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
}

.intro-headline-statement {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.55;
  color: #1E293B;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.intro-headline-statement em {
  font-style: normal;
  color: var(--teal-primary, #0D9488);
  font-weight: 800;
}

.intro-lead-in {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.6;
}

.intro-lead-in strong {
  color: #0F172A;
  font-weight: 700;
}

/* 4-Tab Navigation Bar */
.ruang-tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: #F1F5F9;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  max-width: 1080px;
  margin: 0 auto 28px auto;
}

.ruang-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  color: #475569;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ruang-tab-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #0F172A;
}

.tab-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: #E2E8F0;
  color: #64748B;
  transition: all 0.25s ease;
}

.tab-icon {
  font-size: 1.1rem;
}

.tab-title {
  white-space: nowrap;
}

/* Active Tab Styles */
.ruang-tab-btn.active {
  background: #FFFFFF;
  box-shadow: 0 6px 18px -4px rgba(15, 23, 42, 0.1), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
}

.ruang-tab-btn.tab-blue.active {
  color: #2563EB;
  border-color: #BFDBFE;
}
.ruang-tab-btn.tab-blue.active .tab-badge {
  background: #EFF6FF;
  color: #2563EB;
}

.ruang-tab-btn.tab-rose.active {
  color: #E11D48;
  border-color: #FECDD3;
}
.ruang-tab-btn.tab-rose.active .tab-badge {
  background: #FFF1F2;
  color: #E11D48;
}

.ruang-tab-btn.tab-purple.active {
  color: #7C3AED;
  border-color: #DDD6FE;
}
.ruang-tab-btn.tab-purple.active .tab-badge {
  background: #F5F3FF;
  color: #7C3AED;
}

.ruang-tab-btn.tab-amber.active {
  color: #D97706;
  border-color: #FDE68A;
}
.ruang-tab-btn.tab-amber.active .tab-badge {
  background: #FFFBEB;
  color: #D97706;
}

/* Showcase Panels */
.ruang-showcase-container {
  max-width: 1080px;
  margin: 0 auto;
}

.ruang-panel {
  display: none;
}

.ruang-panel.active {
  display: block;
  animation: panelFadeSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panelFadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ruang-panel-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 36px;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  padding: 38px 40px;
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.02);
  position: relative;
}

.panel-blue { border-color: #DBEAFE; }
.panel-rose { border-color: #FFE4E6; }
.panel-purple { border-color: #EDE9FE; }
.panel-amber { border-color: #FEF3C7; }

/* Left Column Info */
.panel-header-badge {
  margin-bottom: 12px;
}

.panel-pill {
  display: inline-block;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 99px;
}

.pill-blue { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.pill-rose { background: #FFF1F2; color: #E11D48; border: 1px solid #FECDD3; }
.pill-purple { background: #F5F3FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.pill-amber { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }

.panel-headline {
  font-family: var(--font-heading, sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.panel-desc {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Feature Chips Grid */
.panel-feature-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.f-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  transition: all 0.2s ease;
}

.f-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.chip-blue svg { color: #2563EB; }
.chip-rose svg { color: #E11D48; }
.chip-purple svg { color: #7C3AED; }
.chip-amber svg { color: #D97706; }

.panel-sync-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0D9488;
  padding-top: 14px;
  border-top: 1px dashed #E2E8F0;
}

.panel-sync-badge svg {
  width: 15px;
  height: 15px;
  color: #0D9488;
  flex-shrink: 0;
}

/* Right Column Mockup Card */
.mockup-cockpit-card {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.mockup-blue { border-top: 3px solid #2563EB; }
.mockup-rose { border-top: 3px solid #E11D48; }
.mockup-purple { border-top: 3px solid #7C3AED; }
.mockup-amber { border-top: 3px solid #D97706; }

.mockup-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mockup-dot.red { background: #EF4444; }
.mockup-dot.yellow { background: #F59E0B; }
.mockup-dot.green { background: #10B981; }

.mockup-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  margin-left: 6px;
}

.mockup-body {
  padding: 18px;
}

.mockup-row-highlight {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.m-badge-ai {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563EB;
  background: #EFF6FF;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.m-topic {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
}

.mockup-mini-attendance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: #FFFFFF;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px dashed #CBD5E1;
}

.att-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

.att-pills {
  display: flex;
  gap: 6px;
}

.att-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.tag-h { background: #ECFDF5; color: #059669; }
.tag-s { background: #EFF6FF; color: #2563EB; }
.tag-i { background: #FFFBEB; color: #D97706; }

.mockup-status-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}

.status-time, .status-done, .status-verified, .status-ready {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.status-time { background: #F1F5F9; color: #475569; }
.status-done { background: #ECFDF5; color: #059669; }
.status-verified { background: #F5F3FF; color: #7C3AED; }
.status-ready { background: #FFFBEB; color: #D97706; }

/* Rose Panel Radar Specifics */
.radar-status-active {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #0F172A;
  margin-bottom: 4px;
}

.radar-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
}

.radar-clean {
  font-size: 0.78rem;
  color: #059669;
  font-weight: 600;
}

.score-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.score-stat {
  background: #F8FAFC;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
}

.s-label {
  display: block;
  font-size: 0.68rem;
  color: #64748B;
  margin-bottom: 2px;
}

.s-val {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 800;
}
.val-green { color: #059669; }
.val-blue { color: #2563EB; }
.val-rose { color: #E11D48; }

/* Purple Panel Student Specifics */
.student-mini-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F5F3FF;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.student-avatar-box {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EDE9FE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.student-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #4C1D95;
}

.student-presence {
  font-size: 0.75rem;
  color: #6D28D9;
}

.task-submit-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.task-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  display: block;
  margin-bottom: 4px;
}

.task-photo-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #059669;
}

.task-photo-status svg {
  width: 14px;
  height: 14px;
}

/* Amber Panel Admin Specifics */
.report-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.doc-badge-excel {
  font-size: 0.82rem;
  font-weight: 700;
  color: #92400E;
}

.btn-download-mini {
  font-size: 0.72rem;
  font-weight: 700;
  background: #10B981;
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: 6px;
}

.ai-narration-box {
  background: #F8FAFC;
  border-left: 3px solid #D97706;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}

.narr-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #D97706;
  margin-bottom: 4px;
}

.narr-text {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.45;
  font-style: italic;
}

/* Responsive Breakpoints for 4-Tab Switcher */
@media (max-width: 960px) {
  .ruang-tabs-nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .ruang-panel-layout {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 28px;
  }
  .panel-feature-chips {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ruang-tabs-nav {
    grid-template-columns: 1fr;
  }
  .ruang-tab-btn {
    justify-content: flex-start;
  }
  .intro-headline-statement {
    font-size: 1.2rem;
  }
}

/* ====================================================================
   9. THREE SUPERPOWERS (LARGE ALTERNATING FEATURE SECTIONS)
   ==================================================================== */
.superpowers-section {
  padding: 56px 0;
  background-color: var(--bg-light);
  position: relative;
  z-index: 1;
}

.superpower-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  margin-bottom: 120px;
}

.superpower-block.reverse-block {
  direction: rtl;
}

.superpower-block.reverse-block .superpower-content,
.superpower-block.reverse-block .superpower-mockup-wrapper {
  direction: ltr;
}

.superpower-block:last-child {
  margin-bottom: 0;
}

.feature-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal-primary);
  background-color: var(--mint-soft);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.superpower-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.superpower-description {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 28px;
}

.feature-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.feature-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-dark);
  font-weight: 500;
}

.check-icon {
  width: 18px;
  height: 18px;
  color: var(--teal-primary);
  flex-shrink: 0;
}

/* Feature 1: AI Simulator UI */
.interactive-ai-card {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.card-head-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 18px;
}

.card-head-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--teal-dark);
}

.badge-verified {
  font-size: 0.72rem;
  background-color: var(--mint-soft);
  color: var(--teal-dark);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.simulator-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.input-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.input-item label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.sim-select, .sim-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-dark);
  background-color: #F8FAFA;
}

.btn-generate-sim {
  width: 100%;
  margin-top: 6px;
  background-color: var(--teal-primary);
}

.ai-generation-steps {
  background-color: #F8FAFA;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.step-item.done {
  color: var(--teal-primary);
  font-weight: 600;
}

.step-status-icon {
  width: 16px;
  height: 16px;
}

.sim-doc-preview {
  background-color: var(--mint-light);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: var(--radius-md);
  padding: 14px;
}

.doc-icon-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.preview-filename {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-dark);
}

.download-badge {
  margin-left: auto;
  font-size: 0.7rem;
  background-color: var(--white);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--teal-primary);
  font-weight: 700;
}

.doc-snippet {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Feature 2: Assessment Split Mockup */
.assessment-split-mockup {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
}

.teacher-quiz-pane {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-md);
}

.pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.live-dot-pulse {
  width: 8px;
  height: 8px;
  background-color: #10B981;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.quiz-metrics-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: #F8FAFA;
  padding: 12px;
  border-radius: var(--radius-md);
}

.metric-block .val {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-dark);
}

.metric-block .lbl {
  font-size: 0.7rem;
  color: var(--text-subtle);
}

.animated-flow-indicator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  background-color: var(--mint-light);
  padding: 10px;
  border-radius: var(--radius-sm);
}

/* Student Phone Mockup */
.student-phone-mockup {
  background-color: #0F172A;
  border-radius: 28px;
  padding: 10px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.phone-speaker {
  width: 40px;
  height: 4px;
  background-color: #334155;
  border-radius: 2px;
  margin: 6px auto 10px auto;
}

.phone-screen {
  background-color: var(--white);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.phone-exam-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-subtle);
}

.phone-question {
  font-size: 0.75rem;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.4;
}

.phone-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opt-item {
  font-size: 0.72rem;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.opt-item.selected {
  background-color: var(--mint-soft);
  border-color: var(--teal-primary);
  font-weight: 700;
  color: var(--teal-dark);
}

.tab-warning-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: #10B981;
  background-color: #ECFDF5;
  padding: 4px 8px;
  border-radius: 4px;
}

.btn-phone-submit {
  margin-top: auto;
  background-color: var(--teal-primary);
  color: var(--white);
  border: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
}

/* Feature 3: Attendance Phone Mockup */
.attendance-phone-frame {
  max-width: 320px;
  margin: 0 auto;
  background-color: #0F172A;
  border-radius: 36px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
}

.phone-screen-container {
  background-color: var(--white);
  border-radius: 26px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.att-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text-dark);
}

.att-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.quick-status-buttons {
  display: flex;
  gap: 8px;
}

.status-btn {
  flex: 1;
  padding: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #F8FAFA;
  cursor: pointer;
}

.status-btn.active {
  background: var(--teal-primary);
  color: var(--white);
  border-color: var(--teal-primary);
}

.students-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background-color: #F8FAFA;
  border-radius: var(--radius-sm);
}

.student-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal-subtle);
  color: var(--teal-primary);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-name {
  font-size: 0.78rem;
  color: var(--text-dark);
  font-weight: 600;
}

.status-pill {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.status-hadir {
  background-color: #DCFCE7;
  color: #15803D;
}

.status-sakit {
  background-color: #FEF3C7;
  color: #B45309;
}

.journal-toast-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--mint-soft);
  border: 1px solid var(--teal-primary);
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: 0.75rem;
  color: var(--teal-dark);
  font-weight: 600;
  animation: toast-glow 2s infinite alternate;
}

@keyframes toast-glow {
  0% { box-shadow: 0 0 0 rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 12px rgba(20, 184, 166, 0.4); }
}

/* ====================================================================
   10. COMPLETE TOOLKIT (Bento Grid)
   ==================================================================== */
.toolkit-section {
  padding: 56px 0;
  background-color: var(--mint-light);
  position: relative;
  z-index: 1;
}

.bento-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bento-card {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}

.bento-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--mint-primary);
}

.card-prota {
  grid-column: span 1;
}

.card-media {
  grid-column: span 2;
}

.card-analytics {
  grid-column: span 2;
}

.card-remedial {
  grid-column: span 1;
}

.bento-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-primary);
  margin-bottom: 12px;
}

.bento-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.bento-card-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.bento-visual-prota {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #F8FAFA;
  padding: 12px;
  border-radius: var(--radius-md);
}

.prota-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dark);
}

.prota-weeks {
  color: var(--teal-primary);
}

.media-pills-row {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.media-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--mint-soft);
  color: var(--teal-dark);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
}

.student-mini-chart {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 80px;
  padding: 10px 20px 0 20px;
  background-color: #F8FAFA;
  border-radius: var(--radius-md);
}

.chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  width: 32px;
}

.chart-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--teal-primary), var(--mint-primary));
  border-radius: 4px 4px 0 0;
}

.col-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-subtle);
}

.remedial-alert-box {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.8rem;
}

.remedial-sub {
  font-size: 0.72rem;
  color: #78350F;
}

/* ====================================================================
   11. TEACHER + STUDENT ECOSYSTEM (Split Screen)
   ==================================================================== */
.ecosystem-section {
  padding: 56px 0;
  background-color: var(--bg-main);
  position: relative;
  z-index: 1;
}

/* 3-Column Ecosystem Stage Layout (Left Text - Center 3D Stage - Right Text) */
.ecosystem-stage-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(380px, 1fr) minmax(260px, 320px);
  align-items: center;
  gap: 32px;
  margin-bottom: 48px;
  position: relative;
}

.eco-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eco-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  width: fit-content;
}

.student-badge {
  background-color: var(--mint-soft);
  color: var(--teal-dark);
}

.teacher-badge {
  background-color: rgba(99, 102, 241, 0.1);
  color: var(--violet-ai);
}

.eco-col-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
}

.eco-col-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.eco-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eco-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
}

.check-circle-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--mint-soft);
  color: var(--teal-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-circle-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.ai-circle-icon {
  background-color: rgba(99, 102, 241, 0.15);
  color: var(--violet-ai);
  font-size: 0.8rem;
  font-weight: 800;
}

.eco-features-list strong {
  display: block;
  color: var(--text-dark);
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.eco-features-list span {
  color: var(--text-muted);
  line-height: 1.4;
}

.eco-interaction-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal-primary);
  padding: 8px 14px;
  background-color: #F0FDFA;
  border: 1px dashed var(--mint-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.25s var(--ease-smooth);
  margin-top: 8px;
  width: fit-content;
}

.eco-interaction-hint:hover {
  background-color: var(--mint-soft);
  transform: translateX(4px);
  border-color: var(--teal-primary);
}

/* Center Stage & 2D SaaS Product Showcase */
.eco-stage-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.eco-sync-pill {
  position: relative;
  margin-bottom: 22px;
  background: rgba(15, 118, 110, 0.95);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 15;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.eco-sync-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35);
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #34D399;
  box-shadow: 0 0 8px #34D399;
  animation: sync-pulse 1.8s infinite;
}

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

/* 2D SaaS Showcase Stage Canvas */
.eco-showcase-stage {
  position: relative;
  width: 100%;
  max-width: 530px;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
  padding-bottom: 12px;
}

/* Soft Ambient Mint/Teal Glow */
.eco-showcase-glow {
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 440px;
  height: 290px;
  background: radial-gradient(ellipse at center, rgba(204, 251, 241, 0.65) 0%, rgba(240, 253, 250, 0.45) 45%, transparent 72%);
  filter: blur(38px);
  z-index: 0;
  pointer-events: none;
}

/* 1. TEACHER PORTAL (MINIMAL BROWSER FRAME) */
.showcase-browser-frame {
  position: relative;
  width: 460px;
  max-width: 100%;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 18px 38px -12px rgba(15, 23, 42, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.showcase-browser-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -12px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* Minimal Browser Header Chrome */
.browser-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 12px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.browser-window-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot-close {
  background-color: #EF4444;
}

.dot-minimize {
  background-color: #F59E0B;
}

.dot-expand {
  background-color: #10B981;
}

.browser-address-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 0.65rem;
  color: #475569;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.browser-lock-icon {
  width: 10px;
  height: 10px;
  color: #0F766E;
}

.browser-badge-live {
  font-size: 0.62rem;
  font-weight: 700;
  color: #0F766E;
  background: #ECFDF5;
  padding: 2px 8px;
  border-radius: 99px;
}

/* Teacher Cockpit UI (100% Flat, Crisp & Legible) */
.browser-window-content {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}

.mac-app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #0F766E;
  color: #FFFFFF;
}

.mac-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mac-logo-dot {
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  color: #0F766E;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mac-brand-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.mac-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
}

.mac-teacher-name {
  color: rgba(255, 255, 255, 0.9);
}

.mac-cockpit-grid {
  display: grid;
  grid-template-columns: 86px 1fr;
  min-height: 255px;
  background: #FFFFFF;
  overflow: hidden;
}

.mac-sidebar {
  background: #F8FAFC;
  border-right: 1px solid #E2E8F0;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mac-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #64748B;
  transition: all 0.2s ease;
}

.mac-nav-item i {
  width: 11px;
  height: 11px;
}

.mac-nav-item.active {
  background: #0F766E;
  color: #FFFFFF;
}

.mac-main-panel {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.mac-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mac-class-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.2;
}

.mac-topic {
  font-size: 0.6rem;
  color: #64748B;
}

.mac-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #6366F1;
  background: #EEF2FF;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid #C7D2FE;
}

.ai-sparkle {
  color: #6366F1;
}

.mac-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mac-card-stat {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 5px 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.stat-lbl {
  display: block;
  font-size: 0.56rem;
  font-weight: 600;
  color: #64748B;
}

.stat-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0F172A;
}

.stat-sub {
  display: block;
  font-size: 0.52rem;
  color: #10B981;
  font-weight: 600;
}

.stat-progress {
  width: 100%;
  height: 3px;
  background: #E2E8F0;
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  background: #10B981;
  border-radius: 2px;
}

.mac-submission-stream {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 6px 8px;
}

.stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.stream-badge-pulse {
  font-size: 0.53rem;
  color: #10B981;
  background: #ECFDF5;
  padding: 2px 6px;
  border-radius: 99px;
  font-weight: 700;
}

.stream-items-row {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

.stream-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  font-size: 0.58rem;
  white-space: nowrap;
}

.student-mini-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0F766E;
  color: #FFF;
  font-size: 0.46rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-pill-name {
  font-weight: 600;
  color: #1E293B;
}

.pill-score {
  font-weight: 800;
  color: #10B981;
}

.score-wait {
  color: #F59E0B;
}

/* 2. STUDENT PORTAL (CLEAN 2D MOBILE FRAME) */
.showcase-mobile-frame {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 152px;
  height: 312px;
  background: #0F172A;
  border-radius: 24px;
  padding: 4px 4px 6px 4px;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.28), 0 4px 14px rgba(15, 23, 42, 0.14);
  z-index: 10;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.showcase-mobile-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -10px rgba(15, 23, 42, 0.35);
}

.mobile-speaker-notch {
  width: 36px;
  height: 3px;
  background: #334155;
  border-radius: 99px;
  margin: 3px auto 4px auto;
  flex-shrink: 0;
}

.mobile-frame-content {
  flex: 1;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 8px 7px 8px 7px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
}

.phone-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.54rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
}

.phone-icons-pack {
  display: flex;
  align-items: center;
  gap: 3px;
}

.phone-quiz-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.phone-quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-badge {
  font-size: 0.55rem;
  font-weight: 800;
  color: #0F766E;
  background: #CCFBF1;
  padding: 2px 5px;
  border-radius: 4px;
}

.quiz-timer {
  font-size: 0.52rem;
  font-weight: 700;
  color: #EF4444;
}

.phone-q-num {
  font-size: 0.53rem;
  color: #64748B;
  font-weight: 600;
}

.phone-question-text {
  font-size: 0.58rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.phone-options-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.phone-opt-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  font-size: 0.55rem;
  font-weight: 600;
  color: #334155;
  transition: all 0.2s ease;
  cursor: pointer;
}

.phone-opt-btn.active {
  border-color: #0F766E;
  background: #F0FDFA;
  color: #0F766E;
}

.opt-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-size: 0.46rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-opt-btn.active .opt-bullet {
  background: #0F766E;
  color: #FFFFFF;
}

.opt-check {
  margin-left: auto;
  font-size: 0.58rem;
  color: #0F766E;
  font-weight: 800;
}

.phone-submit-btn {
  margin-top: auto;
  width: 100%;
  padding: 5px;
  border-radius: 6px;
  background: #0F766E;
  color: #FFFFFF;
  border: none;
  font-size: 0.56rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.phone-submit-btn:hover {
  background: #0D655E;
}

/* Real-Time Sync Pulse Beam (Connecting Mobile to Browser) */
.eco-data-beam {
  position: absolute;
  left: 140px;
  bottom: 78px;
  width: 140px;
  height: 3px;
  background: linear-gradient(90deg, #10B981, #6366F1);
  border-radius: 3px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.85);
}

.eco-data-beam.firing {
  animation: fire-data-beam 1.4s ease-out forwards;
}

@keyframes fire-data-beam {
  0% { opacity: 0; transform: scaleX(0); }
  30% { opacity: 1; transform: scaleX(1); }
  70% { opacity: 1; transform: scaleX(1) translateX(45px); }
  100% { opacity: 0; transform: scaleX(1) translateX(95px); }
}

/* Action Badge Below Mockup */
.mockup-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-primary);
  background-color: #F0FDFA;
  border: 1px solid var(--mint-primary);
  border-radius: var(--radius-full);
  padding: 8px 18px;
  margin-top: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
  transition: all 0.25s var(--ease-smooth);
}

.mockup-action-badge:hover {
  background-color: var(--teal-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.25);
}

@media (max-width: 1024px) {
  .ecosystem-stage-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .eco-column-left {
    order: 1;
    text-align: center;
    align-items: center;
  }
  .eco-stage-center {
    order: 2;
  }
  .eco-column-right {
    order: 3;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .eco-showcase-stage {
    transform: scale(0.85);
    transform-origin: center center;
    margin: -15px 0;
  }
}

@media (max-width: 460px) {
  .eco-showcase-stage {
    transform: scale(0.72);
    transform-origin: center center;
    margin: -35px 0;
  }
}

/* Family Monitoring Box */
.family-monitoring-box {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: var(--mint-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px 30px;
  max-width: 900px;
  margin: 0 auto;
}

.family-icon-box {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.family-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--teal-dark);
  margin-bottom: 4px;
}

.family-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ====================================================================
   12. BEFORE VS AFTER COMPARISON TABLE
   ==================================================================== */
.comparison-section {
  padding: 56px 0;
  background-color: var(--bg-light);
  position: relative;
  z-index: 1;
}

.comparison-table-wrapper {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.comparison-table th {
  padding: 18px 24px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  background-color: #F8FAFA;
  border-bottom: 1px solid var(--border-subtle);
}

.col-aspect { width: 25%; color: var(--text-dark); }
.col-before { width: 37.5%; color: var(--text-subtle); }
.col-after { width: 37.5%; color: var(--teal-primary); background-color: var(--mint-light) !important; }

.table-row-item td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.55;
}

.table-row-item:last-child td {
  border-bottom: none;
}

.aspect-cell strong {
  color: var(--text-dark);
  font-size: 1rem;
}

.before-cell {
  color: var(--text-muted);
}

.after-cell {
  background-color: rgba(204, 251, 241, 0.2);
  color: var(--text-dark);
}

.cell-status-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.tag-old {
  background-color: #F1F5F9;
  color: #64748B;
}

.tag-new {
  background-color: var(--mint-soft);
  color: var(--teal-dark);
}

.tag-eff {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25);
  margin-bottom: 6px;
  margin-left: 4px;
}

.table-row-item:hover td {
  background-color: #F8FAFC;
}

.table-row-item:hover .after-cell {
  background-color: rgba(204, 251, 241, 0.35);
}

/* Comparison Summary Card */
.comparison-summary-card {
  margin-top: 40px;
  background: linear-gradient(135deg, #073B3A 0%, #0F766E 100%);
  border-radius: var(--radius-xl);
  padding: 36px 44px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.comparison-summary-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.summary-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.summary-card-content {
  flex: 1 1 480px;
}

.summary-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #A7F3D0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.summary-card-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 8px;
}

.summary-card-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  margin: 0;
}

.summary-stats-box {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 20px 26px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.stat-item-block {
  text-align: center;
}

.stat-item-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #CBD5E1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.stat-item-val {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.stat-val-old {
  color: #FCA5A5;
  text-decoration: line-through;
}

.stat-val-new {
  color: #34D399;
}

.stat-arrow-separator {
  font-size: 1.5rem;
  color: #94A3B8;
  font-weight: 300;
}

.stat-val-savings {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-block;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

@media (max-width: 768px) {
  .comparison-summary-card {
    padding: 28px 22px;
  }
  .summary-card-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .summary-stats-box {
    width: 100%;
    justify-content: space-around;
  }
}

/* ====================================================================
   13. MID-PAGE CTA SECTION (Deep Pine Teal Glow)
   ==================================================================== */
.mid-cta-section {
  padding: 48px 0;
  position: relative;
  z-index: 1;
}

.mid-cta-box {
  background: linear-gradient(135deg, #073B3A 0%, #0F766E 100%);
  border-radius: var(--radius-xl);
  padding: 54px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.mid-cta-kwing {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 400px;
  height: 400px;
  pointer-events: none;
}

.mid-cta-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.mid-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mint-soft);
  background-color: rgba(204, 251, 241, 0.15);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}

.mid-headline {
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 16px;
}

.mid-subheadline {
  font-size: 1.1rem;
  color: var(--mint-soft);
  margin-bottom: 36px;
  opacity: 0.9;
}

.btn-mid-primary {
  background-color: var(--mint-soft);
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 16px 36px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-mid-primary:hover {
  background-color: var(--white);
  transform: translateY(-2px);
}

.mid-guarantee-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(204, 251, 241, 0.8);
}

/* ====================================================================
   14. PRICING SECTION
   ==================================================================== */
.pricing-section {
  padding: 56px 0;
  background-color: var(--bg-main);
  position: relative;
  z-index: 1;
}

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto 50px auto;
}

.pricing-card {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}

.pricing-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--teal-primary);
}

.featured-annual-card {
  border: 2px solid var(--teal-primary);
  box-shadow: 0 16px 36px rgba(15, 118, 110, 0.12);
  background: linear-gradient(180deg, rgba(204, 251, 241, 0.1) 0%, #FFFFFF 100%);
}

.featured-badge-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--teal-primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

.plan-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.plan-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.price-box {
  margin-bottom: 24px;
}

.old-price {
  font-size: 0.85rem;
  color: #94A3B8;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.price-val {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-dark);
}

.amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}

.period {
  font-size: 0.95rem;
  color: var(--text-subtle);
}

.daily-equivalent {
  font-size: 0.8rem;
  color: var(--teal-primary);
  font-weight: 600;
  margin-top: 4px;
}

.savings-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--teal-dark);
  background-color: var(--mint-soft);
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
}

.exclusive-bonus-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--mint-light);
  border: 1px dashed var(--teal-primary);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.82rem;
  color: var(--teal-dark);
  margin-bottom: 24px;
}

.plan-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.plan-features-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-dark);
}

.p-check {
  width: 16px;
  height: 16px;
  color: var(--teal-primary);
  flex-shrink: 0;
}

.btn-outline-pricing {
  margin-top: auto;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--teal-primary);
  color: var(--teal-primary);
  border-radius: var(--radius-md);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline-pricing:hover {
  background-color: var(--teal-subtle);
}

.btn-annual-select {
  margin-top: auto;
  width: 100%;
  padding: 12px;
}

/* Satisfaction Guarantee Card */
.satisfaction-guarantee-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #F8FAFA;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px 32px;
  max-width: 900px;
  margin: 0 auto;
}

.guarantee-shield-box {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--mint-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guarantee-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--teal-dark);
  margin-bottom: 4px;
}

.guarantee-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ====================================================================
   15. FINAL CTA SECTION — "THE HEROIC DAWN HORIZON"
   ==================================================================== */
.final-cta-section {
  padding: 48px 0;
  position: relative;
  z-index: 1;
}

.final-cta-container {
  background: radial-gradient(100% 120% at 50% 0%, var(--mint-soft) 0%, var(--white) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 54px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.final-cta-bg-kwing {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  pointer-events: none;
}

.final-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.final-headline {
  font-size: 2.85rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 18px 0;
  letter-spacing: -0.02em;
}

.final-subheadline {
  font-size: 1.15rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 36px;
}

.final-buttons-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.btn-final-primary {
  padding: 16px 36px;
  font-size: 1.1rem;
}

.final-guarantee-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

/* ====================================================================
   16. FAQ SECTION (Accordion)
   ==================================================================== */
.faq-section {
  padding: 56px 0;
  background-color: var(--bg-main);
  position: relative;
  z-index: 1;
}

.faq-container {
  max-width: 820px;
}

.faq-simple-title {
  font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-dark, #0F172A);
  text-align: center;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accordion-item {
  background-color: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.accordion-item.active {
  border-color: var(--teal-primary);
  box-shadow: var(--shadow-md);
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
}

.accordion-arrow {
  width: 20px;
  height: 20px;
  color: var(--teal-primary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.accordion-item.active .accordion-arrow {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease-smooth);
}

.accordion-item.active .accordion-body {
  max-height: 250px;
}

.accordion-body p {
  padding: 0 24px 22px 24px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ====================================================================
   17. FOOTER
   ==================================================================== */
.site-footer {
  background-color: #07191A;
  color: #94A3B8;
  padding: 48px 0 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
}

.footer-logo {
  height: 36px;
  margin-bottom: 12px;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--mint-soft);
  margin-bottom: 14px;
}

.footer-statement {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #94A3B8;
  margin-bottom: 24px;
  max-width: 380px;
}

.copyright-text {
  font-size: 0.78rem;
  color: #64748B;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 18px;
}

.footer-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-menu a {
  color: #94A3B8;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: var(--mint-soft);
}

/* ====================================================================
   19. STICKY BOTTOM MOBILE CTA (Triggered on Scroll)
   ==================================================================== */
.sticky-bottom-mobile-cta {
  position: fixed;
  bottom: -80px;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  padding: 12px 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 999;
  transition: bottom 0.3s var(--ease-smooth);
}

.sticky-bottom-mobile-cta.visible {
  bottom: 0;
}

.mobile-cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-cta-text strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dark);
}

.mobile-cta-text span {
  font-size: 0.75rem;
  color: var(--text-subtle);
}

/* ====================================================================
   INTERACTIVE MODALS
   ==================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(7, 25, 26, 0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-card {
  background-color: var(--white);
  border-radius: var(--radius-xl);
  padding: 36px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: modal-enter 0.3s var(--ease-smooth);
}

@keyframes modal-enter {
  0% { opacity: 0; transform: scale(0.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-subtle);
  cursor: pointer;
}

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal-primary);
  background-color: var(--mint-soft);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}

.modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.modal-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.modal-input, .modal-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.btn-modal-submit {
  width: 100%;
  padding: 12px;
  font-size: 0.95rem;
}

.modal-footer-note {
  font-size: 0.75rem;
  color: var(--text-subtle);
  text-align: center;
}

/* Demo Video Modal */
.modal-video-card {
  max-width: 640px;
}

.player-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.player-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
}

.demo-screen-content {
  background-color: #07191A;
  border-radius: var(--radius-lg);
  padding: 32px;
  color: var(--white);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}

.flow-icon-circle {
  width: 50px;
  height: 50px;
  background: rgba(99, 102, 241, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.demo-timer-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
}

.demo-timer-progress {
  width: 35%;
  height: 100%;
  background: var(--mint-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.demo-player-actions {
  display: flex;
  justify-content: space-between;
}

/* ====================================================================
   RESPONSIVE DESIGN (Mobile First Tweaks)
   ==================================================================== */
@media (max-width: 1024px) {
  .hero-headline {
    font-size: 2.6rem;
  }
  .cockpit-layout {
    grid-template-columns: 1fr;
  }
  .cockpit-sidebar {
    display: none;
  }
  .problem-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .problem-card-wide {
    grid-column: span 2;
    flex-direction: column;
    align-items: flex-start;
  }
  .storytelling-panels-grid {
    grid-template-columns: 1fr;
  }
  .principles-grid {
    grid-template-columns: 1fr;
  }
  .superpower-block {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .superpower-block.reverse-block {
    direction: ltr;
  }
  .bento-toolkit-grid {
    grid-template-columns: 1fr;
  }
  .card-prota, .card-media, .card-analytics, .card-remedial {
    grid-column: span 1;
  }
  .split-ecosystem-wrapper {
    grid-template-columns: 1fr;
  }
  .ecosystem-connector-pulse {
    display: none;
  }
  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }
  .footer-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links, .btn-nav-cta {
    display: none;
  }
  .mobile-toggle-btn {
    display: block;
  }
  .floating-chip {
    display: none;
  }
  .problem-cards-grid {
    grid-template-columns: 1fr;
  }
  .problem-card-wide {
    grid-column: span 1;
  }
  .workflow-connector-container {
    flex-direction: column;
    gap: 16px;
  }
  .connector-line-track {
    width: 3px;
    height: 30px;
    margin: 0;
  }
  .assessment-split-mockup {
    grid-template-columns: 1fr;
  }
  .cockpit-kpi-row {
    grid-template-columns: 1fr;
  }
  .final-buttons-row {
    flex-direction: column;
    align-items: stretch;
  }
  .final-headline {
    font-size: 2.1rem;
  }
  .mid-headline {
    font-size: 1.8rem;
  }
  .comparison-table-wrapper {
    overflow-x: auto;
  }
  .comparison-table {
    min-width: 600px;
  }
}

/* ==========================================================================
   THE HIDDEN WORKLOAD OF TEACHERS SECTION STYLES
   ========================================================================== */
.teacher-workload-section {
  position: relative;
  padding: 56px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDFA 35%, #F8FAFC 70%, #FFFFFF 100%);
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
  overflow: hidden;
}

.workload-ambient-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 550px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.08) 0%, rgba(13, 148, 136, 0.03) 45%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.workload-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Section Header */
.section-header-centered {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px auto;
}

.badge-tag-turquoise {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #CCFBF1;
  color: #0F766E;
  border: 1px solid #99F6E4;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.1);
  margin-bottom: 18px;
}

.pulse-dot-teal {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0D9488;
  box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.7);
  animation: pulseTealGlow 2s infinite;
}

@keyframes pulseTealGlow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(13, 148, 136, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}

.text-teal-gradient {
  background: linear-gradient(135deg, #0D9488 0%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

@media (max-width: 640px) {
  .hide-mobile {
    display: none;
  }
}

.section-supporting-desc {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.65;
  margin-top: 14px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   4 WORKLOAD STORY CARDS (EDITORIAL LAYOUT)
   ========================================================================== */
.workload-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 60px;
}

/* Mobile Carousel Dots (hidden by default on desktop/tablet) */
.workload-carousel-dots {
  display: none;
}

.workload-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.04), 0 2px 6px -2px rgba(15, 23, 42, 0.02);
}

.workload-card:hover {
  transform: translateY(-5px);
  border-color: #CBD5E1;
  box-shadow: 0 20px 35px -8px rgba(15, 23, 42, 0.08), 0 6px 12px -3px rgba(15, 23, 42, 0.03);
}

/* Card Themes */
.card-theme-turquoise { border-top: 4px solid #0D9488; }
.card-theme-peach { border-top: 4px solid #EA580C; }
.card-theme-blue { border-top: 4px solid #4F46E5; }
.card-theme-lavender { border-top: 4px solid #9333EA; }

/* Card Top Row */
.workload-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-num-indicator {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  color: #94A3B8;
  letter-spacing: -0.02em;
}

.card-metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.card-metric-badge .metric-icon {
  width: 13px;
  height: 13px;
}

.badge-turquoise { background: #CCFBF1; color: #0F766E; }
.badge-peach { background: #FFEDD5; color: #9A3412; }
.badge-blue { background: #EEF2FF; color: #3730A3; }
.badge-lavender { background: #FAF5FF; color: #6B21A8; }

/* Heading Group */
.card-heading-group {
  margin-bottom: 14px;
}

.workload-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 4px;
}

.workload-card-subtitle {
  font-size: 0.82rem;
  color: #64748B;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}

/* 3D Diorama Miniature Stage */
.workload-illustration-stage {
  border-radius: 16px;
  padding: 0;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #F8FAFC;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.8);
  aspect-ratio: 1 / 0.92;
  position: relative;
}

.stage-turquoise { background: linear-gradient(135deg, #F0FDFA 0%, #E6FFFA 100%); border-color: rgba(204, 251, 241, 0.9); }
.stage-peach { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border-color: rgba(255, 237, 213, 0.9); }
.stage-blue { background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%); border-color: rgba(224, 231, 255, 0.9); }
.stage-lavender { background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%); border-color: rgba(243, 232, 255, 0.9); }

.diorama-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.workload-diorama-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.workload-card:hover .workload-diorama-img {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .workload-diorama-img {
    transition: none;
  }
}

/* Card Bottom & Calculation Context */
.workload-card-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calculation-context-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px;
}

.calc-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.calc-desc {
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.5;
  margin: 0;
}

.calc-math-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.math-item {
  font-size: 0.8rem;
  color: #1E293B;
  line-height: 1.4;
}

.math-item strong {
  color: #0F172A;
  font-weight: 800;
}

.math-estimate {
  font-size: 0.76rem;
  color: #64748B;
  line-height: 1.4;
}

.workload-small-copy {
  font-size: 0.75rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

/* ==========================================================================
   5. INTERACTIVE WORKLOAD CALCULATOR PANEL
   ========================================================================== */
.workload-calculator-panel {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  margin-bottom: 50px;
}

.calculator-panel-inner {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 32px;
  padding: 38px 36px;
  align-items: stretch;
}

/* Left Column: Intro */
.calc-col-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid #F1F5F9;
  padding-right: 28px;
}

.calc-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FDFA;
  color: #0F766E;
  border: 1px solid #CCFBF1;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  width: fit-content;
}

.calc-badge-icon {
  width: 14px;
  height: 14px;
}

.calc-intro-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0F172A;
  line-height: 1.25;
  margin: 0;
}

.calc-intro-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.calc-formula-tip {
  margin-top: auto;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: #64748B;
  line-height: 1.45;
}

.tip-icon {
  width: 16px;
  height: 16px;
  color: #0D9488;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Center Column: Interactive Sliders */
.calc-col-sliders {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1E293B;
}

.slider-val-bubble {
  background: #0F766E;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: 'Plus Jakarta Sans', monospace;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25);
}

.workload-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: #E2E8F0;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.workload-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #0D9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.workload-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  border-color: #0F766E;
}

.workload-range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #0D9488;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  cursor: pointer;
}

.slider-scale-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #94A3B8;
  font-weight: 600;
}

/* Right Column: Calculated Results & Total Hero */
.calc-col-results {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.results-heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.calc-breakdown-toggle-btn {
  display: none !important;
}

.calc-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.breakdown-metric-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.metric-task-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 2px;
}

.metric-task-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0F172A;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.2;
}

.metric-task-sub {
  font-size: 0.66rem;
  color: #94A3B8;
  margin-top: 2px;
}

/* Total Hero Panel */
.calc-total-hero-panel {
  background: linear-gradient(135deg, #0F172A 0%, #134E4A 100%);
  border-radius: 14px;
  padding: 16px 18px;
  color: #FFFFFF;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.total-hero-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #99F6E4;
  text-transform: uppercase;
}

.total-hero-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.total-hero-number {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.02em;
}

.total-hero-unit {
  font-size: 0.85rem;
  font-weight: 800;
  color: #5EEAD4;
}

.total-hero-students-tag {
  font-size: 0.78rem;
  color: #E2E8F0;
  margin: 0;
}

.total-hero-students-tag strong {
  color: #FEF08A;
}

.total-hero-disclaimer {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.68rem;
  color: #94A3B8;
  line-height: 1.45;
}

.disc-icon {
  width: 12px;
  height: 12px;
  color: #5EEAD4;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ==========================================================================
   7. TRANSITION TO KLASSA SOLUTION
   ========================================================================== */
.workload-solution-transition {
  margin-top: 20px;
  text-align: center;
}

.transition-card-inner {
  background: #FFFFFF;
  border: 1.5px solid #CCFBF1;
  border-radius: 20px;
  padding: 36px 30px 28px 30px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 10px 30px -5px rgba(13, 148, 136, 0.08);
  position: relative;
}

.transition-mark-glow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F0FDFA;
  border: 1.5px solid #99F6E4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.15);
}

.klassa-k-mark {
  color: #0D9488;
  font-size: 1.3rem;
  font-weight: 800;
}

.transition-headline {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 10px;
}

.transition-subtext {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 20px auto;
}

.transition-arrow-down {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0D9488;
  font-size: 0.85rem;
  font-weight: 800;
}

.bounce-arrow {
  width: 16px;
  height: 16px;
  animation: bounceDown 1.8s infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ==========================================================================
   RESPONSIVENESS FOR TEACHER WORKLOAD SECTION
   ========================================================================== */
@media (max-width: 1100px) {
  .workload-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .calculator-panel-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 24px;
  }
  .calc-col-intro {
    border-right: none;
    border-bottom: 1px solid #F1F5F9;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .teacher-workload-section {
    padding: 36px 0;
    overflow-x: clip;
  }

  .workload-cards-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 10px 16px 20px 16px;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 8px;
    scrollbar-width: none;
  }

  .workload-cards-grid::-webkit-scrollbar {
    display: none;
  }

  .workload-card {
    flex: 0 0 86% !important;
    max-width: 86% !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 22px 18px;
    margin: 0;
    border-radius: 20px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .workload-cards-grid::before,
  .workload-cards-grid::after {
    content: '';
    flex: 0 0 2px;
  }

  .workload-illustration-stage {
    min-height: 200px;
    max-height: 230px;
    margin: 12px 0 16px 0;
  }

  .workload-diorama-img {
    max-height: 220px;
    object-fit: contain;
  }

  /* Mobile Carousel Dots */
  .workload-carousel-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px auto 36px auto;
  }

  .workload-dot {
    width: 24px;
    height: 6px;
    border-radius: 99px;
    background: #CBD5E1;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .workload-dot.active {
    width: 42px;
    background: #0D9488;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.35);
  }
  .calculator-panel-inner {
    padding: 18px 16px;
    gap: 14px;
    border-radius: 20px;
  }
  .calc-col-intro {
    padding-bottom: 8px;
    gap: 6px;
  }
  .calc-badge-tag {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .calc-intro-title {
    font-size: 1.25rem;
    font-weight: 800;
  }
  .calc-intro-desc {
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .calc-formula-tip {
    display: none !important;
  }

  /* Sliders: compact spacing & hide repetitive min/max scale labels on mobile */
  .calc-col-sliders {
    gap: 10px;
  }
  .slider-group {
    gap: 4px;
  }
  .slider-label {
    font-size: 0.82rem;
  }
  .slider-val-bubble {
    font-size: 0.72rem;
    padding: 2px 8px;
  }
  .workload-range-slider {
    height: 6px;
  }
  .workload-range-slider::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  .slider-scale-row {
    display: none !important;
  }

  /* Results Column: seamless blend on mobile, remove double-box border/padding */
  .calc-col-results {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 4px;
    gap: 10px;
  }
  .results-heading {
    display: none !important;
  }

  /* Kotak Total Hasil langsung pindah tepat di bawah sliders */
  .calc-total-hero-panel {
    order: -1;
    margin-bottom: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0F172A 0%, #0F766E 100%);
    box-shadow: 0 6px 20px -3px rgba(15, 118, 110, 0.35);
  }
  .total-hero-top {
    margin-bottom: 2px;
  }
  .total-hero-label {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: #99F6E4;
  }
  .total-hero-number-wrap {
    gap: 6px;
  }
  .total-hero-number {
    font-size: 2.2rem;
    line-height: 1;
  }
  .total-hero-unit {
    font-size: 0.78rem;
    color: #5EEAD4;
  }
  .total-hero-students-tag {
    font-size: 0.74rem;
    color: #CCFBF1;
    margin-top: 4px;
  }
  .total-hero-disclaimer {
    display: none !important;
  }

  /* Tombol Toggle Dropdown Rincian */
  .calc-breakdown-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1E293B;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  }
  .calc-breakdown-toggle-btn:hover {
    background: #F8FAFC;
    border-color: #0F766E;
  }
  .calc-breakdown-toggle-btn.open {
    background: #F0FDFA;
    border-color: #99F6E4;
    color: #0F766E;
  }
  .calc-breakdown-toggle-btn .breakdown-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
  }
  .calc-breakdown-toggle-btn.open .breakdown-toggle-icon {
    transform: rotate(180deg);
  }

  /* Rincian 4 kartu tersembunyi default di HP */
  .calc-breakdown-grid {
    display: none;
  }
  .calc-breakdown-grid.open {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 2px;
    animation: fadeIn 0.25s ease;
  }
  .breakdown-metric-card {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
  }
  .metric-task-title {
    font-size: 0.66rem;
    font-weight: 700;
  }
  .metric-task-val {
    font-size: 0.98rem;
    font-weight: 800;
  }
  .metric-task-sub {
    font-size: 0.62rem;
    color: #94A3B8;
  }
  .transition-card-inner {
    padding: 24px 18px;
  }
  .transition-headline {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* ============================================================================
   8. SYNCHRONIZED 4-POINT TIMELINE & 4 RUANG EKOSISTEM CAROUSEL
   ============================================================================ */

/* Timeline Navigation Bar */
.ruang-timeline-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 42px auto;
  max-width: 960px;
  position: relative;
  padding: 0 10px;
}

.ruang-nav-node {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s var(--ease-smooth);
  user-select: none;
  position: relative;
  z-index: 2;
}

.ruang-nav-node:hover {
  transform: translateY(-3px);
}

.ruang-nav-node .node-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--white);
  border: 2px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ruang-nav-node .node-icon {
  font-size: 1.15rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ruang-nav-node .node-num {
  display: none;
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
}

/* Node Color Variants when Active */
.ruang-nav-node.node-blue.active .node-circle {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  border-color: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
  transform: scale(1.10);
}

.ruang-nav-node.node-rose.active .node-circle {
  background: linear-gradient(135deg, #E11D48, #F43F5E);
  border-color: #E11D48;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.35);
  transform: scale(1.10);
}

.ruang-nav-node.node-purple.active .node-circle {
  background: linear-gradient(135deg, #7C3AED, #8B5CF6);
  border-color: #7C3AED;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
  transform: scale(1.10);
}

.ruang-nav-node.node-amber.active .node-circle {
  background: linear-gradient(135deg, #D97706, #F59E0B);
  border-color: #D97706;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);
  transform: scale(1.10);
}

.ruang-nav-node .node-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.ruang-nav-node.active .node-label {
  font-weight: 800;
}

.ruang-nav-node.node-blue.active .node-label { color: #1D4ED8; }
.ruang-nav-node.node-rose.active .node-label { color: #BE123C; }
.ruang-nav-node.node-purple.active .node-label { color: #6D28D9; }
.ruang-nav-node.node-amber.active .node-label { color: #B45309; }

/* ====================================================================
   14. KLASSA INTEGRATED ECOSYSTEM SHOWCASE SECTION STYLES
   ==================================================================== */
.introducing-section {
  position: relative;
  padding: 56px 0;
  background: radial-gradient(130% 80% at 50% -10%, #F0FDFA 0%, #FFFFFF 55%, #F8FAFC 100%);
  overflow: hidden;
}

.intro-header-wrapper {
  max-width: 860px;
  margin: 0 auto 36px auto;
}

.intro-eyebrow {
  margin-bottom: 20px;
}

.intro-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 148, 136, 0.08);
  color: #0F766E;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 6px 16px;
  border-radius: 99px;
  border: 1px solid rgba(13, 148, 136, 0.22);
}

.intro-logo-brand {
  margin-bottom: 20px;
}

.intro-official-logo {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(15, 118, 110, 0.12));
}

.intro-headline-statement {
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: #0F172A;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}

.intro-subheadline {
  font-size: clamp(1.15rem, 2vw, 1.32rem);
  font-weight: 700;
  line-height: 1.55;
  color: #334155;
  letter-spacing: -0.01em;
  max-width: 620px;
  margin: 0 auto;
}

/* 4. Large Premium 3D Ecosystem Visualization */
.ecosystem-3d-visual-container {
  position: relative;
  max-width: 1040px;
  margin: 0 auto 40px auto;
  border-radius: 28px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 253, 250, 0.6));
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.ecosystem-3d-glow-aura {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 184, 166, 0.22) 0%, rgba(56, 189, 248, 0.12) 45%, rgba(255, 255, 255, 0) 80%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 1;
}

.ecosystem-3d-stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  z-index: 2;
  background: #FFFFFF;
}

.ecosystem-3d-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  transform: scale(1.002);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ecosystem-3d-hero-img:hover {
  transform: scale(1.015);
}

/* Subtle Floating Badges on 3D stage */
.eco-floating-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0F172A;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.9);
  pointer-events: none;
  z-index: 3;
}

.eco-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.eco-badge-dot.dot-blue { background: #2563EB; box-shadow: 0 0 8px #3B82F6; }
.eco-badge-dot.dot-rose { background: #E11D48; box-shadow: 0 0 8px #F43F5E; }
.eco-badge-dot.dot-purple { background: #7C3AED; box-shadow: 0 0 8px #8B5CF6; }
.eco-badge-dot.dot-amber { background: #D97706; box-shadow: 0 0 8px #F59E0B; }

.badge-room1 { top: 6%; left: 4%; }
.badge-room2 { top: 6%; right: 4%; }
.badge-room3 { bottom: 8%; left: 4%; }
.badge-room4 { bottom: 8%; right: 4%; }

/* 5. Supporting Explanation */
.intro-supporting-box {
  max-width: 820px;
  margin: 0 auto 36px auto;
}

.intro-lead-in {
  font-size: 1.15rem;
  line-height: 1.65;
  color: #475569;
}

.badge-input-once-highlight {
  display: inline-block;
  background: linear-gradient(135deg, #0F766E, #0D9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  padding: 0 4px;
  position: relative;
}

.badge-input-once-highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #0D9488, #14B8A6);
  border-radius: 2px;
}

/* 6. Four Workspace Toggle Buttons (Desktop: 4 Full Cards) */
.workspace-toggles-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1040px;
  margin: 0 auto 32px auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.workspace-toggle-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  outline: none;
}

.workspace-toggle-btn:hover {
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.workspace-toggle-btn:focus-visible {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
}

.workspace-toggle-btn.active {
  background: #FFFFFF;
  border-color: #0D9488;
  box-shadow: 0 10px 25px -4px rgba(13, 148, 136, 0.18), 0 0 0 1.5px #0D9488;
  transform: translateY(-2px);
}

.toggle-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.workspace-toggle-btn:hover .toggle-icon-wrap {
  transform: scale(1.08);
}

.toggle-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.toggle-icon-wrap.icon-blue { background: #EFF6FF; color: #2563EB; }
.toggle-icon-wrap.icon-rose { background: #FFF1F2; color: #E11D48; }
.toggle-icon-wrap.icon-purple { background: #F5F3FF; color: #7C3AED; }
.toggle-icon-wrap.icon-amber { background: #FFFBEB; color: #D97706; }

.workspace-toggle-btn.active .toggle-icon-wrap.icon-blue { background: #2563EB; color: #FFFFFF; }
.workspace-toggle-btn.active .toggle-icon-wrap.icon-rose { background: #E11D48; color: #FFFFFF; }
.workspace-toggle-btn.active .toggle-icon-wrap.icon-purple { background: #7C3AED; color: #FFFFFF; }
.workspace-toggle-btn.active .toggle-icon-wrap.icon-amber { background: #D97706; color: #FFFFFF; }

.toggle-num-mobile {
  display: none;
}

.toggle-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.toggle-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.05em;
}

.workspace-toggle-btn.active .toggle-tag {
  color: #0D9488;
}

.toggle-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 7. Product Showcase Master Card */
.product-showcase-master-card {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  box-sizing: border-box;
}

.showcase-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  min-height: 520px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* LEFT COLUMN */
.showcase-left-col {
  padding: 36px 32px;
  background: #FAFCFD;
  border-right: 1px solid #F1F5F9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.showcase-room-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  width: fit-content;
}

.showcase-room-badge.theme-blue { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.showcase-room-badge.theme-rose { background: #FFF1F2; color: #BE123C; border: 1px solid #FECDD3; }
.showcase-room-badge.theme-purple { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }
.showcase-room-badge.theme-amber { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

.showcase-headline {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.28;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin-top: -6px;
}

.showcase-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
  margin-top: -10px;
}

/* LEVEL 2: Nested Feature Highlight Selectors (Desktop: Full Stacked Cards) */
.showcase-features-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}

.feature-highlight-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.feature-highlight-btn:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: translateX(3px);
}

.feature-highlight-btn.active {
  background: #FFFFFF;
  border-color: #0D9488;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12), 0 0 0 1px #0D9488;
  transform: translateX(4px);
}

.feat-icon-bubble {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #F1F5F9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.feat-icon-bubble svg {
  width: 16px;
  height: 16px;
}

.feature-highlight-btn.active .feat-icon-bubble {
  background: #0D9488;
  color: #FFFFFF;
}

.feat-text-wrap {
  flex: 1;
}

.feat-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.feat-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
}

.feat-micro-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #F1F5F9;
  color: #64748B;
  white-space: nowrap;
  flex-shrink: 0;
}

.feature-highlight-btn.active .feat-micro-badge {
  background: #CCFBF1;
  color: #0F766E;
}

.feat-desc {
  font-size: 0.78rem;
  color: #64748B;
  line-height: 1.4;
  margin: 0;
}

/* Mobile-Only Active Feature Detail (Hidden on Desktop) */
.mobile-active-feature-detail {
  display: none;
}

/* Value statement */
.showcase-value-statement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #166534;
}

.showcase-value-statement .val-icon {
  width: 15px;
  height: 15px;
  color: #16A34A;
  flex-shrink: 0;
}

/* Data flow indicator */
.showcase-data-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
}

.flow-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0D9488;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flow-icon-circle svg {
  width: 14px;
  height: 14px;
}

.flow-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.76rem;
}

.flow-label {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #0D9488;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.flow-statement {
  color: #334155;
  font-weight: 600;
}

/* RIGHT COLUMN: Browser Frame */
.showcase-right-col {
  padding: 24px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.authentic-app-browser-frame {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 480px;
  min-width: 0;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.app-browser-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  gap: 12px;
}

.browser-traffic-lights {
  display: flex;
  align-items: center;
  gap: 6px;
}

.traffic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.traffic-dot.red { background: #EF4444; }
.traffic-dot.yellow { background: #F59E0B; }
.traffic-dot.green { background: #10B981; }

.browser-url-pill {
  flex: 1;
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #64748B;
}

.url-lock-icon {
  width: 12px;
  height: 12px;
  color: #10B981;
}

.browser-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0F766E;
  background: #CCFBF1;
  padding: 3px 8px;
  border-radius: 4px;
}

.live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0D9488;
  animation: pulseLiveDot 1.8s infinite;
}

@keyframes pulseLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Screen Viewport */
.app-browser-viewport {
  flex: 1;
  padding: 20px;
  background: #FFFFFF;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.mock-screen-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.mock-screen-view.fade-in {
  animation: fadeInViewport 0.25s ease-out forwards;
}

@keyframes fadeInViewport {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.mock-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.mock-title-group .mock-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}

.mock-badge.badge-blue { background: #EFF6FF; color: #1D4ED8; }
.mock-badge.badge-rose { background: #FFF1F2; color: #BE123C; }
.mock-badge.badge-purple { background: #F5F3FF; color: #6D28D9; }
.mock-badge.badge-amber { background: #FFFBEB; color: #B45309; }

.mock-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.mock-subheading {
  font-size: 0.76rem;
  color: #64748B;
  margin: 2px 0 0 0;
}

.mock-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  background: #F0FDF4;
  color: #166534;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #BBF7D0;
}

.mock-pill-status .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
}

/* Timeline bars in viewport */
.mock-timeline-track-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.timeline-step {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.timeline-step.completed { background: #F1F5F9; color: #64748B; }
.timeline-step.current { background: #2563EB; color: #FFFFFF; font-weight: 700; }
.timeline-step.pending { background: #F8FAFC; color: #94A3B8; border: 1px dashed #CBD5E1; }

.mock-session-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
}

.mock-session-card.highlight-focus {
  border-color: #38BDF8;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.12);
}

.session-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.session-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.session-icon-box.blue { background: #EFF6FF; color: #2563EB; }

.session-icon-box svg {
  width: 18px;
  height: 18px;
}

.session-topic-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
}

.session-topic-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
}

.session-time {
  font-size: 0.72rem;
  color: #64748B;
}

.tag-verified {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  background: #CCFBF1;
  color: #0F766E;
  padding: 3px 8px;
  border-radius: 4px;
}

.session-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #E2E8F0;
}

.att-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
}

.att-item svg {
  width: 13px;
  height: 13px;
  color: #0D9488;
}

/* Presence Matrix */
.mock-presence-matrix {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
}

.presence-row {
  display: grid;
  grid-template-columns: 45% 30% 25%;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.76rem;
}

.presence-row.header {
  background: #F8FAFC;
  font-weight: 700;
  color: #475569;
}

.presence-row.warning-row {
  background: #FFFBEB;
}

.student-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-cell {
  display: flex;
  gap: 4px;
}

.btn-att-h, .btn-att-s, .btn-att-i {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.btn-att-h.active { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.btn-att-s.active { background: #FEF08A; color: #854D0E; border-color: #FDE047; }
.btn-att-h, .btn-att-s, .btn-att-i { background: #F1F5F9; color: #64748B; }

.mock-counter-pill {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: #EFF6FF;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #BFDBFE;
}

.counter-bold { font-size: 1.1rem; font-weight: 800; color: #1D4ED8; }
.counter-label { font-size: 0.72rem; font-weight: 600; color: #3B82F6; }

/* Journal View */
.mock-journal-box {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge-autosaved {
  font-size: 0.7rem;
  font-weight: 700;
  color: #10B981;
}

.journal-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 4px;
}

.journal-text-preview {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #1E293B;
}

.journal-text-preview.reflection {
  background: #FFFBEB;
  border-color: #FEF08A;
}

.journal-footer-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #64748B;
  padding-top: 8px;
  border-top: 1px solid #E2E8F0;
}

/* Grade Table */
.mock-grade-table-wrap {
  position: relative;
  width: 100%;
}

.mock-grade-table {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.74rem;
  background: #FFFFFF;
}

.grade-table-header,
.grade-table-row {
  display: grid;
  grid-template-columns: 130px 45px 45px 65px 65px 75px 65px;
  min-width: 490px;
  padding: 8px 12px;
  align-items: center;
}

.grade-table-header {
  background: #F8FAFC;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #E2E8F0;
}

.grade-table-row {
  border-bottom: 1px solid #F1F5F9;
}

.grade-table-row.remedi-row {
  background: #FFF1F2;
}

.col-name {
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}

.col-sc {
  text-align: center;
  white-space: nowrap;
  color: #334155;
}

.col-final {
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
}

.col-status {
  text-align: center;
  white-space: nowrap;
}

.badge-tuntas { 
  display: inline-block;
  background: #DCFCE7; 
  color: #166534; 
  padding: 2px 7px; 
  border-radius: 4px; 
  font-weight: 700; 
  font-size: 0.66rem; 
  white-space: nowrap;
}

.badge-remed { 
  display: inline-block;
  background: #FFE4E6; 
  color: #9F1239; 
  padding: 2px 7px; 
  border-radius: 4px; 
  font-weight: 700; 
  font-size: 0.66rem; 
  white-space: nowrap;
}

.table-scroll-hint {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.65rem;
  color: #94A3B8;
  font-weight: 600;
  margin-top: 5px;
}

/* Weight Sliders */
.mock-weight-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F8FAFC;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.weight-item .w-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.weight-item .w-bar {
  height: 8px;
  background: #E2E8F0;
  border-radius: 99px;
  overflow: hidden;
}

.weight-item .w-fill {
  height: 100%;
  border-radius: 99px;
}

.mock-formula-box {
  background: #0F172A;
  color: #38BDF8;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}

/* Remedial Tracker */
.mock-remedial-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.remed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.remed-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.remed-sub {
  font-size: 0.7rem;
  color: #9F1239;
  margin: 0;
}

.btn-action-mini {
  font-size: 0.68rem;
  font-weight: 700;
  background: #E11D48;
  color: #FFFFFF;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.kktp-threshold-tag {
  font-size: 0.72rem;
  background: #FFF1F2;
  color: #9F1239;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #FECDD3;
}

/* Profile 360 */
.mock-profile-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
}

.prof-card-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prof-stat-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.prof-stat-box .lbl { font-size: 0.68rem; color: #64748B; font-weight: 600; }
.prof-stat-box .val { font-size: 1.2rem; font-weight: 800; }
.prof-stat-box .sub { font-size: 0.66rem; color: #94A3B8; }

.prof-tag-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.trait-tag {
  font-size: 0.68rem;
  font-weight: 700;
  background: #F5F3FF;
  color: #7C3AED;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #DDD6FE;
}

.prof-notes-text {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #334155;
  background: #FFFFFF;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  margin: 0;
}

/* Monitoring Log */
.mock-monitoring-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.log-entry {
  background: #F8FAFC;
  border-left: 3px solid #7C3AED;
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  border-top: 1px solid #F1F5F9;
  border-right: 1px solid #F1F5F9;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.74rem;
}

.log-meta { font-size: 0.68rem; color: #64748B; margin-bottom: 2px; }
.log-title { font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.log-desc { color: #475569; line-height: 1.4; }

.tag-resolved { color: #166534; font-weight: 700; }
.tag-info { color: #7C3AED; font-weight: 700; }

/* Parent Portal */
.mock-parent-phone-view {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parent-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
}

.badge-sync-live {
  font-size: 0.66rem;
  background: #DCFCE7;
  color: #166534;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.parent-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.p-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
}

.p-card span { color: #64748B; font-size: 0.66rem; }
.p-card strong { font-size: 0.88rem; color: #0F172A; margin-top: 2px; }

.parent-msg-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.p-msg-label { font-weight: 700; color: #7C3AED; font-size: 0.68rem; }
.parent-msg-box p { margin: 2px 0 0 0; color: #334155; }

/* CP & TP Tree */
.mock-cptp-tree {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
}

.tree-node.parent {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.74rem;
}

.node-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #B45309;
  margin-bottom: 2px;
}

.tree-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px dashed #CBD5E1;
}

.tree-node.child {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.tp-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  background: #EFF6FF;
  color: #1D4ED8;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Export Grid */
.mock-export-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.exp-icon { font-size: 1.3rem; flex-shrink: 0; }
.exp-info { flex: 1; display: flex; flex-direction: column; }
.exp-info strong { color: #0F172A; }
.exp-info span { font-size: 0.68rem; color: #64748B; }

.btn-download-tag {
  font-size: 0.68rem;
  font-weight: 700;
  background: #0D9488;
  color: #FFFFFF;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Import Wizard */
.mock-import-wizard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px;
}

.import-dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 2px dashed #14B8A6;
  padding: 12px;
  border-radius: 8px;
}

.upload-icon {
  width: 28px;
  height: 28px;
  color: #0D9488;
  flex-shrink: 0;
}

.drop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.74rem;
}

.drop-text strong { color: #0F172A; }
.drop-text span { font-size: 0.68rem; color: #64748B; }

.badge-success-pill {
  font-size: 0.68rem;
  font-weight: 700;
  background: #DCFCE7;
  color: #166534;
  padding: 4px 8px;
  border-radius: 4px;
}

.mapped-columns-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.map-tag {
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  padding: 3px 6px;
  border-radius: 4px;
  color: #475569;
}

/* Focus Callout */
.mock-focus-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  border-radius: 8px;
  font-size: 0.74rem;
  color: #1E40AF;
  line-height: 1.4;
}

.mock-focus-callout svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #2563EB;
}

.mock-focus-callout.rose {
  background: #FFF1F2;
  border-color: #FECDD3;
  color: #9F1239;
}
.mock-focus-callout.rose svg { color: #E11D48; }

.mock-focus-callout.purple {
  background: #F5F3FF;
  border-color: #DDD6FE;
  color: #5B21B6;
}
.mock-focus-callout.purple svg { color: #7C3AED; }

.mock-focus-callout.amber {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.mock-focus-callout.amber svg { color: #D97706; }

/* 8. Section Transition */
.ecosystem-section-transition {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.transition-connector-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, #CBD5E1 0%, rgba(203, 213, 225, 0) 100%);
}

.transition-micro-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .showcase-card-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }
  .showcase-left-col {
    border-right: none;
    border-bottom: none;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    background: #FFFFFF;
  }
  .showcase-right-col {
    background: #FFFFFF;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .workspace-toggles-bar {
    gap: 8px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .introducing-section {
    padding: 36px 0;
    overflow-x: hidden;
  }
  .intro-headline-statement {
    font-size: 1.45rem;
    line-height: 1.28;
    margin-bottom: 8px;
  }
  .intro-subheadline {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
    color: #334155;
  }
  .intro-lead-in {
    font-size: 0.98rem;
  }
  .workspace-toggles-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: transparent;
    border: none;
    padding: 8px 0;
    box-shadow: none;
    max-width: 100%;
    margin-bottom: 24px;
    position: relative;
  }
  .workspace-toggles-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #E2E8F0;
    z-index: 0;
    transform: translateY(-50%);
  }
  .workspace-toggle-btn {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #E2E8F0;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  }
  .workspace-toggle-btn:hover {
    border-color: #0D9488;
    transform: translateY(-2px);
  }
  .workspace-toggle-btn.active {
    background: #0D9488;
    border-color: #0D9488;
    transform: scale(1.12) translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
  }
  .toggle-icon-wrap {
    width: 100%;
    height: 100%;
    background: transparent !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .toggle-icon-wrap svg {
    display: none !important;
  }
  .toggle-num-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: #475569;
  }
  .workspace-toggle-btn.active .toggle-num-mobile {
    color: #FFFFFF !important;
  }
  .toggle-text-wrap {
    display: none !important;
  }
  .showcase-left-col {
    padding: 24px 18px 10px 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #FFFFFF !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  .showcase-room-badge {
    margin: 0 auto 2px auto !important;
  }
  .showcase-headline {
    font-size: 1.35rem;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .showcase-desc {
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .showcase-features-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px 0 10px 0;
  }
  .feature-highlight-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transform: none !important;
  }
  .feature-highlight-btn:hover {
    border-color: #CBD5E1;
    color: #0F172A;
    background: #F8FAFC;
    transform: translateY(-2px) !important;
  }
  .feature-highlight-btn.active {
    color: #FFFFFF;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 20px -2px rgba(15, 23, 42, 0.18);
  }
  .feature-highlight-btn.theme-blue.active {
    background: #2563EB;
    border-color: #2563EB;
    box-shadow: 0 8px 20px -2px rgba(37, 99, 235, 0.38);
  }
  .feature-highlight-btn.theme-rose.active {
    background: #E11D48;
    border-color: #E11D48;
    box-shadow: 0 8px 20px -2px rgba(225, 29, 72, 0.38);
  }
  .feature-highlight-btn.theme-purple.active {
    background: #7C3AED;
    border-color: #7C3AED;
    box-shadow: 0 8px 20px -2px rgba(124, 58, 237, 0.38);
  }
  .feature-highlight-btn.theme-amber.active {
    background: #D97706;
    border-color: #D97706;
    box-shadow: 0 8px 20px -2px rgba(217, 119, 6, 0.38);
  }
  .feat-icon-bubble {
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  .feat-icon-bubble svg {
    width: 22px;
    height: 22px;
  }
  .feat-text-wrap {
    display: none !important;
  }
  .mobile-active-feature-detail {
    display: block !important;
    margin: 8px 0 0 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .feat-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .feat-detail-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
  }
  .feat-detail-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #CCFBF1;
    color: #0F766E;
    white-space: nowrap;
  }
  .feat-detail-desc {
    margin: 0;
    font-size: 0.82rem;
    color: #64748B;
    line-height: 1.45;
  }
  .showcase-value-statement,
  .showcase-data-flow {
    display: none !important;
  }
  .showcase-right-col {
    padding: 6px 14px 24px 14px;
    background: #FFFFFF;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .authentic-app-browser-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
  }
  .app-browser-topbar {
    padding: 8px 12px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .browser-url-pill {
    min-width: 0;
    flex: 1;
    padding: 4px 8px;
  }
  .url-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .browser-live-badge {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 2px 6px;
    font-size: 0.62rem;
  }
  .app-browser-viewport {
    padding: 14px 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mock-header-row {
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .mock-title-group {
    min-width: 0;
    flex: 1;
  }
  .mock-heading {
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.95rem;
  }
  .mock-avg-pill {
    white-space: nowrap;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
  .mock-grade-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .mock-grade-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mock-focus-callout {
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 0.72rem;
    padding: 8px 10px;
  }
  .eco-floating-badge {
    display: none;
  }
  .grade-table-header, .grade-table-row {
    font-size: 0.68rem;
  }
  .table-scroll-hint {
    display: flex;
  }
}

@media (max-width: 480px) {
  .workspace-toggles-bar {
    gap: 14px;
    margin-bottom: 20px;
  }
  .workspace-toggles-bar::before {
    left: 15%;
    right: 15%;
  }
  .workspace-toggle-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  .browser-traffic-lights {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-3d-hero-img,
  .workspace-toggle-btn,
  .feature-icon-btn,
  .mock-screen-view.fade-in {
    transition: none !important;
    animation: none !important;
  }
}

/* ====================================================================
   15. KLASSA FEATURE SPOTLIGHT (LIGHT PREMIUM BROWSER FRAME)
   ==================================================================== */
.feature-spotlight-section {
  position: relative;
  padding: 56px 0;
  background: radial-gradient(120% 75% at 50% 0%, #F0FDF9 0%, #FFFFFF 40%, #F8FAFC 100%);
  overflow: hidden;
  border-top: 1px solid rgba(20, 184, 166, 0.15);
}

.spotlight-ambient-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 600px;
  background: radial-gradient(50% 50% at 50% 45%, rgba(20, 184, 166, 0.1) 0%, rgba(99, 102, 241, 0.05) 50%, transparent 80%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.spotlight-container {
  max-width: 1280px;
  position: relative;
  z-index: 2;
}

.spotlight-header {
  max-width: 840px;
  margin: 0 auto 60px auto;
  position: relative;
  z-index: 2;
}

.spotlight-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal-primary);
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.04);
}

.spotlight-eyebrow-pill .eyebrow-sparkle {
  color: var(--mint-primary);
  font-size: 14px;
}

.spotlight-headline {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}

.spotlight-description {
  font-size: clamp(15.5px, 1.2vw, 18px);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 740px;
  margin: 0 auto;
}

/* Two-Column Composition (40% Left Controls / 60% Browser Showcase) */
.spotlight-layout {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* LEFT: Heading, Descriptions & Navigation */
.spotlight-left-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.spotlight-header-block {
  text-align: left;
}

.spotlight-header-block .spotlight-eyebrow-pill {
  margin-bottom: 14px;
}

.spotlight-header-block .spotlight-headline {
  text-align: left;
  font-size: clamp(26px, 2.6vw, 38px);
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}

.spotlight-header-block .spotlight-description {
  text-align: left;
  margin: 0;
  max-width: 100%;
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.6;
}

.spotlight-nav-wrapper {
  position: relative;
}

.spotlight-nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.spotlight-nav-item {
  width: 100%;
  text-align: left;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.spotlight-nav-item:not(.active) {
  opacity: 0.7;
}

.spotlight-nav-item:not(.active):hover {
  opacity: 1;
  background: #FFFFFF;
  border-color: rgba(20, 184, 166, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.06);
}

.spotlight-nav-item:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 2px;
}

.spotlight-nav-item.active {
  opacity: 1;
  background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%);
  border-color: rgba(20, 184, 166, 0.45);
  border-left: 4px solid var(--teal-primary);
  box-shadow: 0 10px 24px -4px rgba(15, 118, 110, 0.12), 0 2px 6px rgba(0, 0, 0, 0.03);
  transform: translateX(4px);
}

.timeline-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1.5px solid rgba(15, 118, 110, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  transition: all 0.25s ease;
}

.spotlight-nav-item.active .timeline-node {
  background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
  border-color: #14B8A6;
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(20, 184, 166, 0.5);
}

.node-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(20, 184, 166, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.spotlight-nav-item.active .node-pulse {
  opacity: 1;
  animation: nodeAura 2.5s infinite ease-out;
}

@keyframes nodeAura {
  0% { transform: scale(0.95); opacity: 0.8; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.timeline-content {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.feature-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  text-align: left;
}

.feature-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal-primary);
  background: rgba(15, 118, 110, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

.feature-badge.badge-purple {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.1);
}

.feature-time-tag {
  font-size: 11px;
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.feature-time-tag svg,
.feature-time-tag i {
  width: 12px;
  height: 12px;
  color: var(--teal-primary);
}

.feature-nav-headline {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  text-align: left;
  margin: 0;
  transition: color 0.2s ease;
}

.spotlight-nav-item.active .feature-nav-headline {
  color: var(--teal-dark);
}

/* Expandable Details for Active Item */
.feature-expandable-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.35s ease;
  text-align: left;
}

.spotlight-nav-item.active .feature-expandable-details {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

.feature-nav-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  text-align: left;
  margin: 0;
}

.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-dark);
  background: rgba(204, 251, 241, 0.6);
  border: 1px solid rgba(20, 184, 166, 0.22);
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pill-tag svg,
.pill-tag i {
  width: 11px;
  height: 11px;
  color: var(--teal-primary);
}

.spotlight-nav-item[data-feature="2"] .pill-tag {
  background: rgba(238, 242, 255, 0.7);
  border-color: rgba(99, 102, 241, 0.25);
  color: #3730A3;
}

.spotlight-nav-item[data-feature="2"] .pill-tag svg,
.spotlight-nav-item[data-feature="2"] .pill-tag i {
  color: #6366F1;
}

/* RIGHT: Light Premium Floating Browser Showcase (~65%) */
.spotlight-showcase-col {
  position: relative;
}

.spotlight-stage-aura {
  position: absolute;
  inset: -15px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(20, 184, 166, 0.15) 0%, rgba(99, 102, 241, 0.06) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Light Browser Frame */
.spotlight-browser-frame {
  position: sticky;
  top: 96px;
  z-index: 1;
  border-radius: 22px;
  background: #F8FAFC;
  border: 1px solid rgba(20, 184, 166, 0.22);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 25px 60px -12px rgba(15, 118, 110, 0.14),
    0 10px 24px -4px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(226, 232, 240, 0.9);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Browser Toolbar (Light, Polished) */
.browser-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-bottom: 1px solid #E2E8F0;
  gap: 12px;
}

/* Window Control Dots */
.browser-window-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15);
}

.window-dot.dot-red { background: #EF4444; border: 1px solid #DC2626; }
.window-dot.dot-amber { background: #F59E0B; border: 1px solid #D97706; }
.window-dot.dot-green { background: #10B981; border: 1px solid #059669; }

/* Address Pill */
.browser-address-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(203, 213, 225, 0.85);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  max-width: 320px;
}

.address-lock-icon {
  width: 12px;
  height: 12px;
  color: var(--teal-primary);
  flex-shrink: 0;
}

.address-url {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.address-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--teal-primary);
  background: #CCFBF1;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Browser Action Buttons */
.browser-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.browser-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.browser-action-btn:hover {
  background: #F0FDFA;
  border-color: #14B8A6;
  color: #0F766E;
  transform: translateY(-1px);
}

.browser-action-btn svg,
.browser-action-btn i {
  width: 13px;
  height: 13px;
}

/* Quiz 3-Step Chapter Sequence Strip */
.browser-chapter-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #F1F5F9;
  border-bottom: 1px solid #E2E8F0;
  gap: 10px;
}

.chapter-strip-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748B;
  flex-shrink: 0;
}

.chapter-strip-label svg,
.chapter-strip-label i {
  width: 12px;
  height: 12px;
  color: var(--teal-primary);
}

.chapter-strip-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.chapter-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-heading);
  white-space: nowrap;
}

.chapter-nav-pill:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  color: #0F172A;
}

.chapter-nav-pill.active {
  background: #CCFBF1;
  border-color: #14B8A6;
  color: #0F766E;
  box-shadow: 0 1px 4px rgba(20, 184, 166, 0.2);
}

.c-num {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 800;
}

.chapter-nav-pill.active .c-num {
  background: #0F766E;
  color: #FFFFFF;
}

/* 16:9 Inner Video Surface */
.browser-inner-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0B132B;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* YouTube Iframe Embed */
.spotlight-youtube-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #050C1A;
}

/* Premium Branded Coming Soon Card */
.spotlight-coming-soon-card {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 15%, #FFFFFF 0%, #F0FDF9 50%, #E6FFFA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.coming-soon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  height: 340px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(99, 102, 241, 0.2) 0%, rgba(20, 184, 166, 0.12) 50%, transparent 80%);
  filter: blur(44px);
  pointer-events: none;
}

.coming-soon-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  gap: 12px;
}

.coming-soon-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  color: #6366F1;
}

.coming-soon-badge-pill .cs-badge-icon {
  width: 16px;
  height: 16px;
}

.coming-soon-headline {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin: 0;
}

.coming-soon-desc {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.coming-soon-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.cs-hl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 184, 166, 0.25);
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.05);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--teal-dark);
}

.cs-hl-item svg,
.cs-hl-item i {
  width: 13px;
  height: 13px;
  color: var(--mint-primary);
}

.browser-play-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  border-radius: 20px;
  background: var(--teal-primary);
  color: #FFFFFF;
  border: 1px solid var(--teal-primary);
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.browser-play-toggle-btn:hover {
  background: var(--teal-hover);
  border-color: var(--teal-hover);
  transform: translateY(-1px);
}

.browser-play-toggle-btn:active {
  transform: scale(0.97);
}

.browser-play-toggle-btn.is-playing {
  background: rgba(15, 118, 110, 0.12);
  color: var(--teal-primary);
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: none;
}

.browser-play-toggle-btn svg,
.browser-play-toggle-btn i {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.browser-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.2);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--teal-primary);
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-primary);
  box-shadow: 0 0 6px var(--mint-primary);
  animation: pulseDot 2s infinite ease-in-out;
}

.feature-badge-soon {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #6366F1;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 5px;
}

.browser-video-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B132B;
}

.browser-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0B132B;
  outline: none;
}

/* Slim Bottom Timeline Progress */
.browser-video-timeline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 5;
}

.browser-video-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #14B8A6 0%, #2DD4BF 100%);
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.8);
  transition: width 0.1s linear;
}

/* Fallback Manual Play Overlay */
.browser-manual-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  z-index: 10;
}

.light-play-orb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #14B8A6;
  box-shadow: 0 8px 24px rgba(15, 118, 110, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F766E;
  transition: transform 0.2s ease;
}

.light-play-orb:hover {
  transform: scale(1.08);
}

.orb-play-icon {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.orb-hint {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(15, 23, 42, 0.75);
  padding: 4px 12px;
  border-radius: 20px;
}

.browser-error-fallback {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.98);
  color: #DC2626;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  padding: 24px;
  text-align: center;
}

/* Light KLASSA Agent Preview Stage */
.agent-light-preview-stage {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #F0FDF9 60%, #E2E8F0 100%);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 30px;
  overflow: hidden;
  box-sizing: border-box;
}

.agent-light-glow {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 280px;
  height: 280px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 80%);
  filter: blur(40px);
  pointer-events: none;
}

.agent-light-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 12px;
}

.agent-light-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-brand-pill {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-orb-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.agent-orb-icon svg,
.agent-orb-icon i {
  width: 20px;
  height: 20px;
}

.agent-brand-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.agent-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6366F1;
}

.agent-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.agent-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #EDE9FE;
  border: 1px solid #DDD6FE;
  font-size: 11px;
  font-weight: 700;
  color: #6D28D9;
}

.agent-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7C3AED;
}

.agent-quote-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  padding: 10px 14px;
  position: relative;
}

.agent-quote-sparkle {
  position: absolute;
  top: 8px;
  right: 12px;
  color: #6366F1;
  font-size: 13px;
}

.agent-quote-p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.agent-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.agent-feat-box {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feat-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat-icon-wrap.icon-teal { background: #CCFBF1; color: #0F766E; }
.feat-icon-wrap.icon-indigo { background: #EDE9FE; color: #6D28D9; }
.feat-icon-wrap.icon-purple { background: #FAE8FF; color: #A21CAF; }

.feat-icon-wrap svg,
.feat-icon-wrap i {
  width: 14px;
  height: 14px;
}

.feat-text-wrap strong {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.feat-text-wrap span {
  display: block;
  font-size: 10.5px;
  color: var(--text-subtle);
  line-height: 1.35;
}

.agent-stage-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-subtle);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding-top: 8px;
}

.agent-stage-footer svg,
.agent-stage-footer i {
  width: 13px;
  height: 13px;
  color: #10B981;
}

/* ====================================================================
   RESPONSIVE LAYOUT
   ==================================================================== */
@media (max-width: 1024px) {
  .spotlight-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .spotlight-left-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .spotlight-header-block {
    margin-bottom: 0;
  }

  .spotlight-nav-wrapper {
    width: 100%;
  }

  .spotlight-showcase-col {
    width: 100%;
  }

  .spotlight-browser-frame {
    position: static;
  }

  .agent-features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .agent-quote-card {
    display: none;
  }
}

@media (max-width: 768px) {
  .feature-spotlight-section {
    padding: 32px 0;
  }

  .spotlight-nav-item {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 14px;
  }

  .timeline-node {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
  }

  .browser-toolbar {
    padding: 8px 10px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .browser-window-dots {
    gap: 4px;
    flex-shrink: 0;
  }

  .window-dot {
    width: 8px;
    height: 8px;
  }

  .browser-address-pill {
    flex: 1;
    min-width: 0;
    max-width: 150px;
    font-size: 9.5px;
    padding: 3px 8px;
  }

  .address-badge {
    display: none;
  }

  .browser-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .browser-play-toggle-btn {
    padding: 3px 9px;
    font-size: 10.5px;
    flex-shrink: 0;
  }

  .browser-status-chip {
    display: none; /* Hide 16:9 Showcase chip on mobile to prevent overflow */
  }

  .chapter-strip-nav {
    width: 100%;
    overflow-x: auto;
  }

  .agent-light-preview-stage {
    padding: 16px;
  }

  .agent-title {
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-progress-beam,
  .spotlight-nav-item,
  .timeline-node,
  .chapter-nav-pill,
  .feature-expandable-details {
    transition: none !important;
    animation: none !important;
  }
}