/* ══════════════════════════════════════════════════════════════════════════
   SENTALON — Light Theme Overrides
   Apply after styles.css to switch to the light design.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Token Overrides ──────────────────────────────────────────────── */
:root {
  --color-bg:             #ededf2;
  --color-surface:        #ffffff;
  --color-surface-raised: #e4e4eb;
  --color-border:         rgba(0, 0, 0, 0.09);
  --color-border-bright:  rgba(0, 0, 0, 0.16);
  --color-text-primary:   #0f0f14;
  --color-text-secondary: #4a4a62;
  --color-text-muted:     #8888a8;
  --color-accent:         #5b4ae8;
  --color-accent-light:   #7c70f0;
  --color-accent-dim:     #3d30c0;
  --color-accent-glow:    rgba(91, 74, 232, 0.22);
  --color-accent-subtle:  rgba(91, 74, 232, 0.08);
  --color-cyan:           #0891b2;
  --color-cyan-glow:      rgba(8, 145, 178, 0.12);
}

/* ── Noise overlay — lighter on light bg ─────────────────────────────────── */
body::after { opacity: 0.10; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav.scrolled {
  background: rgba(237, 237, 242, 0.92);
}

.nav-logo {
  background: linear-gradient(135deg, #0f0f14 0%, #5b4ae8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-dropdown-menu {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.nav-mobile {
  background: rgba(255, 255, 255, 0.98);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(237, 237, 242, 0.12) 0%,
    rgba(237, 237, 242, 0.55) 100%
  );
}

.hero-badge {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: var(--color-text-secondary);
}

.hero-badge-dot {
  background: var(--color-accent);
}

.hero-scroll-line {
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

.hero-scroll-indicator span {
  color: var(--color-text-muted);
}

/* ── Gradient text — fix near-white start on light bg ────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 50%, var(--color-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Marquee ─────────────────────────────────────────────────────────────── */
.marquee-wrap {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-bright);
  border-bottom: 1px solid var(--color-border-bright);
}

.marquee-item {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.marquee-dot {
  background: var(--color-accent);
}

/* ── Section labels ──────────────────────────────────────────────────────── */
.section-label {
  color: var(--color-accent) !important;
}

/* ── Service cards ───────────────────────────────────────────────────────── */
.service-card {
  background: var(--color-surface);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
  box-shadow:
    0 2px 4px rgba(91, 74, 232, 0.08),
    0 8px 32px rgba(91, 74, 232, 0.14),
    0 20px 60px rgba(91, 74, 232, 0.08);
  border-color: rgba(91, 74, 232, 0.25);
}

.service-icon {
  color: var(--color-accent) !important;
  background: rgba(91, 74, 232, 0.08) !important;
  border-color: rgba(91, 74, 232, 0.14) !important;
}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.stats-section {
  background: var(--color-surface);
}

.stat-cell {
  border-color: rgba(0, 0, 0, 0.10);
}

.stat-cell:hover {
  background: rgba(91, 74, 232, 0.04);
}

.stat-number {
  color: var(--color-accent) !important;
}

/* ── Grid bg — dark lines on light bg ───────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.6;
  filter: none;
}

/* ── Why Sentalon ────────────────────────────────────────────────────────── */
.why-visual {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

.why-visual-glow {
  background: radial-gradient(circle at center, rgba(91, 74, 232, 0.14), transparent 70%);
}

.why-glass-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.10);
}

.why-panel-label { color: var(--color-text-muted); }
.why-panel-value { color: var(--color-accent); }
.why-panel-sub   { color: var(--color-text-secondary); }

.why-point-num {
  color: var(--color-accent) !important;
}

/* ── Testimonial cards ───────────────────────────────────────────────────── */
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.05);
}

.testimonial-card:hover {
  box-shadow:
    0 2px 4px rgba(91, 74, 232, 0.06),
    0 8px 32px rgba(91, 74, 232, 0.12),
    0 20px 60px rgba(91, 74, 232, 0.06);
  border-color: rgba(91, 74, 232, 0.20);
}

.testimonial-stars {
  color: var(--color-accent) !important;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta-section {
  background: var(--color-bg);
}

.cta-inner {
  background: var(--color-surface);
  border: 1px solid rgba(91, 74, 232, 0.18);
  box-shadow:
    0 2px 8px rgba(91, 74, 232, 0.06),
    0 12px 48px rgba(91, 74, 232, 0.10);
}

.cta-glow {
  background: radial-gradient(ellipse at 50% 0%, rgba(91, 74, 232, 0.14), transparent 65%);
}

.cta-note {
  color: var(--color-text-muted);
}

/* ── Page hero variants (services, about, etc.) ──────────────────────────── */
.page-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.page-hero-eyebrow { color: var(--color-accent) !important; }

/* ── Feature cards / process cards ──────────────────────────────────────── */
.feature-card,
.process-card,
.pricing-card,
.value-card,
.team-card,
.contact-card {
  background: var(--color-surface);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.06);
}

.feature-card:hover,
.process-card:hover,
.pricing-card:hover,
.value-card:hover,
.team-card:hover,
.contact-card:hover {
  box-shadow:
    0 2px 4px rgba(91, 74, 232, 0.06),
    0 8px 32px rgba(91, 74, 232, 0.12);
  border-color: rgba(91, 74, 232, 0.20);
}

.feature-icon,
.process-icon,
.step-icon {
  color: var(--color-accent) !important;
  background: rgba(91, 74, 232, 0.08) !important;
  border-color: rgba(91, 74, 232, 0.14) !important;
}

/* ── Pricing cards ───────────────────────────────────────────────────────── */
.pricing-card.featured {
  border-color: rgba(91, 74, 232, 0.30);
  box-shadow:
    0 4px 16px rgba(91, 74, 232, 0.10),
    0 16px 48px rgba(91, 74, 232, 0.12);
}

/* ── Contact form ────────────────────────────────────────────────────────── */
.form-input,
.form-select,
.form-textarea,
.form-field input,
.form-field textarea,
.form-field select {
  background: var(--color-bg) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: var(--color-text-primary) !important;
}

.form-input::placeholder,
.form-textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 74, 232, 0.10) !important;
}

.form-label,
.form-field label {
  color: var(--color-text-secondary);
}

/* ── About page specifics ────────────────────────────────────────────────── */
.about-visual,
.mission-visual {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

/* ── Footer stays dark ───────────────────────────────────────────────────── */
.footer {
  background: #0f0f14;
}