/* White theme (light) - solid colors only.
   Loaded after inline <style> in Oris-landingpage.html. */

html.theme-light {
  --primary: #2563eb;
  --heading: #0f172a;
  --body: #475569;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --ai-solid: #0f766e;
  --academy-solid: #4338ca;
  --rewards-solid: #b45309;
  --task-solid: #0369a1;
}

/* Disable the previous "invert" approach so we can fully control colors. */
html.theme-light #theme-invert-wrap {
  filter: none !important;
}

html.theme-light #theme-invert-wrap img,
html.theme-light #theme-invert-wrap video,
html.theme-light #theme-invert-wrap svg {
  filter: none !important;
}

html.theme-light .hero-light-area {
  filter: none !important;
}

html.theme-light #ai-hub-section {
  filter: none !important;
}

html.theme-light body {
  background: #ffffff !important;
  color: var(--body) !important;
}

/* Remove gradients completely in light mode. */
html.theme-light [style*="radial-gradient"] {
  background: none !important;
}

html.theme-light [style*="linear-gradient"] {
  background-image: none !important;
}

html.theme-light [class*="bg-gradient-to-"],
html.theme-light [class*="bg-gradient-"] {
  background-image: none !important;
  background: none !important;
}

/* Hide gradient overlays (shine/shimmer layers). */
html.theme-light [class*="absolute"][class*="inset-0"][class*="bg-gradient-to-"],
html.theme-light [class*="absolute"][class*="-inset-full"][class*="bg-gradient-to-"] {
  display: none !important;
}

/* Fix gradient text that relies on bg-clip + text-transparent. */
html.theme-light .bg-clip-text.text-transparent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--heading) !important;
  color: var(--heading) !important;
}

/* Typography */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4 {
  color: var(--heading) !important;
}

html.theme-light p,
html.theme-light li {
  color: var(--body) !important;
}

/* Keep typography metrics aligned with dark theme classes (no forced line-height/letter-spacing). */

/* Make most "white/slate-300" text readable on a white background (but keep button text white). */
html.theme-light #theme-invert-wrap .text-white,
html.theme-light #theme-invert-wrap .text-slate-300,
html.theme-light #theme-invert-wrap .text-slate-200 {
  color: var(--heading) !important;
}

html.theme-light button .text-white,
html.theme-light a .text-white {
  color: #ffffff !important;
}

html.theme-light #theme-invert-wrap .text-slate-400,
html.theme-light #theme-invert-wrap .text-gray-300,
html.theme-light #theme-invert-wrap .text-gray-400 {
  color: var(--body) !important;
}

/* Keep accent utility classes available for section-based theming. */
html.theme-light [class*="text-cyan-"],
html.theme-light [class*="text-blue-"],
html.theme-light [class*="text-indigo-"],
html.theme-light [class*="text-violet-"],
html.theme-light [class*="text-emerald-"],
html.theme-light [class*="text-green-"],
html.theme-light [class*="text-amber-"],
html.theme-light [class*="text-orange-"],
html.theme-light [class*="text-red-"] {
  color: inherit !important;
}

/* Icons should follow currentColor for clean consistency. */
html.theme-light svg {
  color: inherit !important;
  filter: none !important;
}

/* Header */
html.theme-light header {
  background: rgba(255, 255, 255, 0.74) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  z-index: 80 !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
}

html.theme-light header a,
html.theme-light header nav a {
  color: var(--primary) !important;
}

html.theme-light header a:hover,
html.theme-light header nav a:hover {
  color: #1d4ed8 !important;
}

html.theme-light header #lang-btn {
  border-color: var(--border) !important;
  background: #ffffff !important;
  color: var(--primary) !important;
}

html.theme-light #lang-dropdown,
html.theme-light #lang-dropdown-mobile,
html.theme-light #mobile-menu {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

html.theme-light #mobile-menu {
  border-top: 1px solid var(--border) !important;
}

html.theme-light #lang-dropdown button,
html.theme-light #lang-dropdown-mobile button,
html.theme-light #mobile-menu a {
  color: var(--heading) !important;
}

html.theme-light #lang-dropdown button:hover,
html.theme-light #lang-dropdown-mobile button:hover,
html.theme-light #mobile-menu a:hover {
  background: var(--surface-2) !important;
  color: var(--primary) !important;
}

html.theme-light header #theme-toggle,
html.theme-light header #theme-toggle-mobile,
html.theme-light .header-mobile-actions button[aria-label="Toggle menu"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html.theme-light #theme-toggle svg,
html.theme-light #theme-toggle-mobile svg,
html.theme-light .header-mobile-actions button[aria-label="Toggle menu"] svg {
  color: var(--primary) !important;
}

/* Convert remaining dark slate surfaces/borders into light theme. */
html.theme-light [class*="bg-slate-950"] {
  background: #ffffff !important;
}

html.theme-light [class*="bg-slate-900"] {
  background: var(--surface-2) !important;
}

html.theme-light [class*="bg-slate-800"] {
  background: var(--surface-2) !important;
}

html.theme-light [class*="border-slate-700"] {
  border-color: var(--border) !important;
}

html.theme-light [class*="bg-black"] {
  background: #ffffff !important;
}

html.theme-light [class*="bg-white/"] {
  background: var(--surface-2) !important;
}

html.theme-light [class*="border-white/"] {
  border-color: var(--border) !important;
}

html.theme-light [class*="border-white"] {
  border-color: var(--border) !important;
}

html.theme-light [class*="backdrop-blur"] {
  backdrop-filter: none !important;
}

/* Text: unify muted/body colors in light mode. */
html.theme-light [class*="text-slate-300"],
html.theme-light [class*="text-slate-200"],
html.theme-light [class*="text-slate-400"],
html.theme-light [class*="text-white"] {
  color: var(--heading) !important;
}

html.theme-light [class*="text-gray-300"],
html.theme-light [class*="text-gray-400"] {
  color: var(--body) !important;
}

/* Keep section login CTAs same as dark theme in light mode */
html.theme-light .section-login-cta {
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22) !important;
}

html.theme-light .section-login-cta,
html.theme-light .section-login-cta * {
  color: #ffffff !important;
}

html.theme-light .section-login-cta .text-white,
html.theme-light .section-login-cta span,
html.theme-light .section-login-cta svg {
  color: #ffffff !important;
}

/* Keep CTA label/icons white even inside inverted light-theme sections */
html.theme-light #theme-invert-wrap .section-login-cta span,
html.theme-light #theme-invert-wrap .section-login-cta svg {
  color: #ffffff !important;
}

html.theme-light .section-login-cta.section-login-cta--task {
  background: linear-gradient(to right, #06b6d4, #22d3ee) !important;
}

html.theme-light .section-login-cta.section-login-cta--task:hover {
  background: linear-gradient(to right, #0891b2, #06b6d4) !important;
}

html.theme-light .section-login-cta.section-login-cta--ai {
  background: linear-gradient(to right, #22c55e, #059669) !important;
}

html.theme-light .section-login-cta.section-login-cta--ai:hover {
  background: linear-gradient(to right, #16a34a, #047857) !important;
}

html.theme-light .section-login-cta.section-login-cta--academy,
html.theme-light .section-login-cta.section-login-cta--intego {
  background: linear-gradient(to right, #3b82f6, #4f46e5) !important;
}

html.theme-light .section-login-cta.section-login-cta--academy:hover,
html.theme-light .section-login-cta.section-login-cta--intego:hover {
  background: linear-gradient(to right, #2563eb, #4338ca) !important;
}

html.theme-light .section-login-cta.section-login-cta--rewards {
  background: linear-gradient(to right, #f59e0b, #ea580c) !important;
}

html.theme-light .section-login-cta.section-login-cta--rewards:hover {
  background: linear-gradient(to right, #d97706, #c2410c) !important;
}

/* Swiss certification progress track in light theme */
html.theme-light [class*="w-full"][class*="bg-slate-700"][class*="rounded-full"][class*="h-2"] {
  background: #d1d5db !important;
}

/* Primary buttons (convert every gradient button into solid primary). */
html.theme-light button[class*="bg-gradient-to-"],
html.theme-light a[class*="bg-gradient-to-"] {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html.theme-light button[class*="bg-gradient-to-"]:hover,
html.theme-light a[class*="bg-gradient-to-"]:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: none !important;
}

/* Underline highlights */
html.theme-light span[class*="bg-gradient-to-"] {
  background-image: none !important;
  background: var(--primary) !important;
}

/* Card surfaces */
html.theme-light .hero-feature-item,
html.theme-light .hero-cards-col .group.relative.rounded-2xl,
html.theme-light .group.relative.rounded-2xl,
html.theme-light .group.relative.overflow-hidden.rounded-2xl,
html.theme-light .relative.z-10.rounded-2xl {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: none !important;
}

/* Fallback: gradient-based card containers become solid surfaces. */
html.theme-light div[class*="rounded-2xl"][class*="bg-gradient-to-"] {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light div[class*="rounded-xl"][class*="bg-gradient-to-"] {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Hero: force single-brand palette */
html.theme-light .hero-badge {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

html.theme-light .hero-badge,
html.theme-light .hero-badge span {
  color: var(--primary) !important;
}

html.theme-light .hero-badge svg {
  color: var(--primary) !important;
  filter: none !important;
}

html.theme-light .hero-cta-buttons button {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html.theme-light .hero-cta-buttons button:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

html.theme-light .hero-cta-buttons button:nth-child(1),
html.theme-light .hero-cta-buttons button:nth-child(2),
html.theme-light .hero-cta-buttons button:nth-child(3) {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
}

html.theme-light .hero-cta-buttons button:nth-child(1):hover,
html.theme-light .hero-cta-buttons button:nth-child(2):hover,
html.theme-light .hero-cta-buttons button:nth-child(3):hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: none !important;
}

html.theme-light .hero-cards-col .group {
  border: 1px solid var(--border) !important;
}

html.theme-light .hero-cards-col .group:nth-child(1),
html.theme-light .hero-cards-col .group:nth-child(2),
html.theme-light .hero-cards-col .group:nth-child(3) {
  border: 1px solid var(--border) !important;
}

html.theme-light .hero-cards-col .group .w-14.rounded-xl {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html.theme-light .hero-cards-col .group:nth-child(1) .w-14.rounded-xl,
html.theme-light .hero-cards-col .group:nth-child(2) .w-14.rounded-xl,
html.theme-light .hero-cards-col .group:nth-child(3) .w-14.rounded-xl {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

html.theme-light .hero-cards-col .group .w-14.rounded-xl svg {
  color: var(--primary) !important;
  filter: none !important;
}

/* Hero feature icon tiles: remove any gradient-color-tint from inline rules. */
html.theme-light .hero-feature-item [class*="from-cyan"],
html.theme-light .hero-feature-item [class*="from-blue"],
html.theme-light .hero-feature-item [class*="from-violet"] {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

html.theme-light .hero-feature-item [class*="from-cyan"] svg,
html.theme-light .hero-feature-item [class*="from-blue"] svg,
html.theme-light .hero-feature-item [class*="from-violet"] svg {
  color: var(--primary) !important;
  filter: none !important;
}

html.theme-light .hero-light-area .max-w-3xl .relative.rounded-3xl,
html.theme-light .hero-light-area .relative.rounded-3xl {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}

/* Icon containers */
html.theme-light .w-12.h-12.rounded-xl,
html.theme-light .w-14.h-14.rounded-xl,
html.theme-light .w-14.h-14.rounded-2xl,
html.theme-light .w-10.h-10.rounded-lg,
html.theme-light .w-8.h-8.rounded-full {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* AI Hub: force consistent surfaces + brand accents */
html.theme-light #ai-hub-section .space-y-8 .grid .group {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #ai-hub-section .space-y-8 .grid .group svg {
  color: var(--primary) !important;
  filter: none !important;
}

html.theme-light #ai-hub-section .inline-flex.rounded-full {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}

html.theme-light #ai-hub-section .inline-flex.rounded-full span {
  color: var(--primary) !important;
}

/* Section layout: keep spacing same as dark theme; only change colors in light mode. */
html.theme-light section[class*="bg-gradient-to-"] {
  background: var(--surface) !important;
}

html.theme-light #ai-hub-section,
html.theme-light #features,
html.theme-light #benefits {
  background: var(--surface) !important;
}

html.theme-light #solution {
  background: #ffffff !important;
}

html.theme-light footer#about {
  background: #ffffff !important;
}

/* Default "border" class should be subtle. */
html.theme-light .border {
  border-color: var(--border) !important;
}

/* Neutralize any lingering gradient-based backgrounds used as hover effects. */
html.theme-light [class*="hover:bg-gradient-to-"]:hover {
  background-image: none !important;
  background: transparent !important;
}

/* Remove hover glow/shadows for a clean SaaS feel. */
html.theme-light [class*="hover:shadow"] {
  box-shadow: none !important;
}

/* Hero slider alignment helpers */
.hero-slider-shell {
  width: 100%;
}

.hero-slider-dot {
  transition: width 220ms ease, background-color 220ms ease;
}

/* Dots (light + dark) */
html.theme-light .hero-slider-dot--inactive {
  width: 0.625rem !important;
  background: #cbd5e1 !important;
}

html.theme-light .hero-slider-dot--active {
  width: 1.5rem !important;
  background: var(--primary) !important;
}

html.theme-light .hero-slider-dot[data-accent="ai"].hero-slider-dot--active {
  background: #059669 !important;
}

html.theme-light .hero-slider-dot[data-accent="academy"].hero-slider-dot--active {
  background: #4f46e5 !important;
}

html.theme-light .hero-slider-dot[data-accent="rewards"].hero-slider-dot--active {
  background: #d97706 !important;
}

html.theme-light .hero-slider-dot[data-accent="task"].hero-slider-dot--active {
  background: #059669 !important;
}

html:not(.theme-light) .hero-slider-dot--inactive {
  width: 0.625rem !important;
  background: rgba(148, 163, 184, 0.35) !important;
}

html:not(.theme-light) .hero-slider-dot--active {
  width: 1.5rem !important;
  background: #2563eb !important;
}

html:not(.theme-light) .hero-slider-dot[data-accent="ai"].hero-slider-dot--active {
  background: #059669 !important;
}

html:not(.theme-light) .hero-slider-dot[data-accent="academy"].hero-slider-dot--active {
  background: #4f46e5 !important;
}

html:not(.theme-light) .hero-slider-dot[data-accent="rewards"].hero-slider-dot--active {
  background: #d97706 !important;
}

html:not(.theme-light) .hero-slider-dot[data-accent="task"].hero-slider-dot--active {
  background: #059669 !important;
}

/* =========================
   Hero card slider theming
   ========================= */
/* Light theme */
html.theme-light #hero-card-slider {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 30px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light .hero-slide-title {
  color: #0f172a !important;
}

html.theme-light .hero-slide-desc {
  color: #475569 !important;
}

html.theme-light .hero-slide-badge {
  background: #f1f5f9 !important;
  color: var(--primary) !important;
}

html.theme-light .hero-slide-cta {
  background: #2563eb !important;
  color: #ffffff !important;
}

html.theme-light .hero-slide-cta:hover {
  background: #1d4ed8 !important;
}

/* Per-service accents in light */
html.theme-light .hero-slide-badge--ai {
  background: #dcfce7 !important;
  color: #047857 !important;
}

html.theme-light .hero-slide-cta--ai {
  background: #059669 !important;
}

html.theme-light .hero-slide-cta--ai:hover {
  background: #047857 !important;
}

html.theme-light .hero-slide-badge--academy {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}

html.theme-light .hero-slide-cta--academy {
  background: #4f46e5 !important;
}

html.theme-light .hero-slide-cta--academy:hover {
  background: #4338ca !important;
}

html.theme-light .hero-slide-badge--rewards {
  background: #fff7ed !important;
  color: #b45309 !important;
}

html.theme-light .hero-slide-cta--rewards {
  background: #d97706 !important;
}

html.theme-light .hero-slide-cta--rewards:hover {
  background: #c2410c !important;
}

html.theme-light .hero-slide-badge--task {
  background: #dcfce7 !important;
  color: #047857 !important;
}

html.theme-light .hero-slide-cta--task {
  background: #059669 !important;
}

html.theme-light .hero-slide-cta--task:hover {
  background: #047857 !important;
}

/* Hero slider image frame border by theme */
html:not(.theme-light) #hero-card-slider .hero-slide .h-full.w-full.rounded-xl {
  border-color: rgba(15, 23, 42, 0.9) !important;
}

html.theme-light #hero-card-slider .hero-slide .h-full.w-full.rounded-xl {
  border-color: #cbd5e1 !important;
}

/* Dark theme (default when .theme-light is NOT present) */
html:not(.theme-light) #hero-card-slider {
  background: #0b1e34 !important;
  border-color: rgba(226, 232, 240, 0.18) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 10px 35px rgba(0, 0, 0, 0.25) !important;
}

html:not(.theme-light) .hero-slide-title {
  color: #f8fafc !important;
}

html:not(.theme-light) .hero-slide-desc {
  color: rgba(148, 163, 184, 0.95) !important;
}

html:not(.theme-light) .hero-slide-badge {
  background: rgba(226, 232, 240, 0.08) !important;
  color: #93c5fd !important;
}

html:not(.theme-light) .hero-slide-cta {
  color: #ffffff !important;
  box-shadow: none !important;
}

/* Per-service accents in dark (match the Startup Rewards card tone) */
html:not(.theme-light) .hero-slide-badge--ai {
  background: rgba(5, 150, 105, 0.18) !important;
  color: #34d399 !important;
}

html:not(.theme-light) .hero-slide-cta--ai {
  background: #059669 !important;
}

html:not(.theme-light) .hero-slide-cta--ai:hover {
  background: #047857 !important;
}

html:not(.theme-light) .hero-slide-badge--academy {
  background: rgba(79, 70, 229, 0.18) !important;
  color: #a5b4fc !important;
}

html:not(.theme-light) .hero-slide-cta--academy {
  background: #4f46e5 !important;
}

html:not(.theme-light) .hero-slide-cta--academy:hover {
  background: #4338ca !important;
}

html:not(.theme-light) .hero-slide-badge--rewards {
  background: rgba(217, 119, 6, 0.18) !important;
  color: #fdba74 !important;
}

html:not(.theme-light) .hero-slide-cta--rewards {
  background: #d97706 !important;
}

html:not(.theme-light) .hero-slide-cta--rewards:hover {
  background: #c2410c !important;
}

html:not(.theme-light) .hero-slide-badge--task {
  background: rgba(5, 150, 105, 0.18) !important;
  color: #34d399 !important;
}

html:not(.theme-light) .hero-slide-cta--task {
  background: #059669 !important;
}

html:not(.theme-light) .hero-slide-cta--task:hover {
  background: #047857 !important;
}

/* =========================
   Light theme accent colors
   ========================= */
html.theme-light .hero-title {
  color: var(--heading) !important;
}

html.theme-light .hero-badge,
html.theme-light .hero-badge span,
html.theme-light .hero-badge svg {
  color: var(--primary) !important;
}

/* Hero slider service colors (titles + badges + actions) */
html.theme-light .hero-slide--ai .hero-slide-title {
  color: var(--ai-solid) !important;
}

html.theme-light .hero-slide--academy .hero-slide-title {
  color: var(--academy-solid) !important;
}

html.theme-light .hero-slide--rewards .hero-slide-title {
  color: var(--rewards-solid) !important;
}

html.theme-light .hero-slide--task .hero-slide-title {
  color: var(--task-solid) !important;
}

/* Mid-page service cards (AI, Academy, Rewards, Task) */
html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(1) h3,
html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(1) svg {
  color: var(--ai-solid) !important;
}

html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(2) h3,
html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(2) svg {
  color: var(--academy-solid) !important;
}

html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(3) h3,
html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(3) svg {
  color: var(--rewards-solid) !important;
}

html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(4) h3,
html.theme-light #features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4>.group:nth-child(4) svg {
  color: var(--task-solid) !important;
}

/* Slider animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

#full-coverage-slider-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

#full-coverage-slider-track>div {
  height: 100%;
}

#full-coverage-dots button.active {
  width: 2rem;
  background-color: white !important;
}

/* User Slider CSS */
.slider {
  width: 100%;
  aspect-ratio: 1558 / 550;
  height: auto;
}

/* Fill fixed-height hero slider — contain caused top/bottom letterboxing */
.full-coverage-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  /* 🔥 NO CROPPING */
  object-position: center;

}

#full-coverage-slider .full-coverage-img--slide-2 {
  object-fit: contain;
  /* no crop */
  object-position: center;
  /* keep centered */
  width: 100%;
  height: 100%;
}

/* Keep slide 2 full-bleed but preserve top content */
/* #full-coverage-slider .full-coverage-img--slide-2 {
  object-position: 22% top;
} */

/* Align slide 3 similarly so right edge doesn't get clipped */
#full-coverage-slider .full-coverage-img--slide-3 {
  object-fit: contain;
  object-position: center center;
  background-color: #020617;
}

/* Detail sections title + icon tones in light theme */
html.theme-light #ai-hub-section h2,
html.theme-light #ai-hub-section h3,
html.theme-light #ai-hub-section h4,
html.theme-light #ai-hub-section svg {
  color: var(--ai-solid) !important;
}

html.theme-light #task-engine-section h2,
html.theme-light #task-engine-section h3,
html.theme-light #task-engine-section h4,
html.theme-light #task-engine-section svg {
  color: var(--task-solid) !important;
}

/* Global section headings on light theme */
html.theme-light #features>.max-w-7xl>.text-center h2,
html.theme-light #features>.max-w-7xl>.text-center h3 {
  color: var(--primary) !important;
}

html.theme-light #benefits h2,
html.theme-light #solution h2,
html.theme-light footer#about h2 {
  color: var(--heading) !important;
}

/* =========================
   Motion polish (CSS only)
   ========================= */
#hero-card-slider,
.hero-cards-col>.group,
#features .group.relative,
#ai-hub-section .group,
#task-engine-section .group {
  transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease, background-color 320ms ease;
  will-change: transform;
}

.hero-cards-col>.group:hover,
#features .group.relative:hover,
#ai-hub-section .group:hover,
#task-engine-section .group:hover {
  transform: translateY(-4px);
}

#hero-card-slider:hover {
  transform: translateY(-3px);
}

.hero-slide-cta,
#features a,
#ai-hub-section button,
#task-engine-section button {
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, color 220ms ease;
}

.hero-slide-cta:hover,
#ai-hub-section button:hover,
#task-engine-section button:hover {
  transform: translateY(-1px);
}

.hero-cards-col>.group::after,
#features .group.relative::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}

html:not(.theme-light) .hero-cards-col>.group::after,
html:not(.theme-light) #features .group.relative::after {
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25), 0 14px 30px rgba(8, 47, 73, 0.35);
}

html.theme-light .hero-cards-col>.group::after,
html.theme-light #features .group.relative::after {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 10px 24px rgba(15, 23, 42, 0.12);
}

.hero-cards-col>.group:hover::after,
#features .group.relative:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  #hero-card-slider,
  .hero-cards-col>.group,
  #features .group.relative,
  #ai-hub-section .group,
  #task-engine-section .group,
  .hero-slide-cta,
  #features a,
  #ai-hub-section button,
  #task-engine-section button {
    transition: none !important;
    transform: none !important;
  }
}


/* Polso Section Theme Fixes */
html.theme-light #polso-section {
  background: #f8fafc !important;
}

html.theme-light #polso-section h2 {
  color: #0f172a !important;
}

html.theme-light #polso-section h4 {
  color: #4338ca !important;
  /* Indigo for titles in light mode */
}

html.theme-light #polso-section p {
  color: #475569 !important;
}

html.theme-light .polso-video-container {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light #polso-section .group {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.theme-light #polso-section .text-violet-400,
html.theme-light #polso-section .text-indigo-400 {
  color: #7c3aed !important;
  /* Force violet/indigo colors on icons/text */
}

html.theme-light #polso-section .bg-violet-500\/10,
html.theme-light #polso-section .bg-indigo-500\/10 {
  background: #f5f3ff !important;
  /* Light violet bg for icons */
}

html.theme-light #polso-section video {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.theme-light #polso-section [class*="bg-gradient-to-t"] {
  display: none !important;
}

html.theme-light #polso-section .section-login-cta--polso,
html.theme-light .section-login-cta--polso {
  display: flex !important;
  background: #7c3aed !important;
  /* Fallback */
  background-image: linear-gradient(to right, #7c3aed, #4f46e5) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.4) !important;
  -webkit-print-color-adjust: exact;
}

html.theme-light #polso-section .section-login-cta--polso span,
html.theme-light #polso-section .section-login-cta--polso svg,
html.theme-light .section-login-cta--polso span,
html.theme-light .section-login-cta--polso svg {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}