/* GrowWise Omnix360 — WordPress-ready marketing styles */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --background: #FAFBFE;
  --foreground: #0A0D14;
  --card: #FFFFFF;
  --muted: #F1F4FA;
  --muted-foreground: #5C6370;
  --primary: #4F7CFF;
  --primary-soft: rgba(79, 124, 255, 0.08);
  --accent: #059669;
  --accent2: #7B5CF0;
  --destructive: #E85D24;
  --border: rgba(79, 124, 255, 0.18);
  --mockup-bg: #F4F6FB;
  --section-alt-bg: #F4F6FB;
  --fade-default: #FAFBFE;
  --fade-alt: #F4F6FB;
  --nav-bg: rgba(255, 255, 255, 0.94);
  --shadow-sm: 0 1px 3px rgba(10, 13, 20, 0.04);
  --shadow-md: 0 8px 30px rgba(10, 13, 20, 0.06);
  --shadow-lg: 0 24px 64px rgba(79, 124, 255, 0.1);
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'Inter', sans-serif;
  --max-width: 80rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }
::selection { background: rgba(79, 124, 255, 0.2); color: var(--foreground); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; height: auto; }

.container { max-width: var(--max-width); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.mono { font-family: var(--font-mono); }
.text-muted { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-destructive { color: var(--destructive); }

/* Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(79, 124, 255, 0.12);
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(79, 124, 255, 0.06);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  letter-spacing: -0.04em;
}

.logo-name { font-size: 1.25rem; font-weight: 900; color: var(--primary); }

.logo-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: rgba(79, 124, 255, 0.12);
  border: 1px solid rgba(79, 124, 255, 0.3);
  color: var(--primary);
}

.nav-links { display: none; align-items: center; gap: 1.75rem; }

.nav-links a {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active { color: var(--foreground); font-weight: 600; }

.nav-actions { display: none; align-items: center; gap: 0.75rem; }

.nav-signin {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: color 0.2s, background 0.2s;
}

.nav-signin:hover { color: var(--foreground); background: var(--primary-soft); }

.nav-cta { display: none; }

.menu-toggle {
  display: block;
  padding: 0.25rem;
  color: var(--muted-foreground);
}

.menu-toggle svg { width: 20px; height: 20px; }

.mobile-menu {
  display: none;
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid rgba(79, 124, 255, 0.12);
}

.mobile-menu.open { display: block; }

.mobile-menu a {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  padding: 0.25rem 0;
}

.mobile-menu .btn-demo { margin-top: 0.5rem; }

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-actions { display: flex; }
  .nav-cta { display: block; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* Buttons */
.btn-demo {
  font-weight: 700;
  border-radius: 0.5rem;
  transition: filter 0.2s, transform 0.1s;
  background: var(--primary);
  color: #FFFFFF;
  letter-spacing: -0.01em;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
}

.btn-demo:hover { filter: brightness(1.1); }
.btn-demo:active { transform: scale(0.98); }
.btn-demo-lg { padding: 1rem 2rem; font-size: 1rem; box-shadow: var(--shadow-md); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid rgba(79, 124, 255, 0.2);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-secondary:hover {
  border-color: rgba(79, 124, 255, 0.45);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active { transform: scale(0.98); }

.btn-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  transition: opacity 0.2s;
}

.btn-link:hover { opacity: 0.7; }

/* Footer */
.site-footer {
  border-top: 1px solid rgba(79, 124, 255, 0.1);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.footer-brand { font-size: 1.125rem; font-weight: 900; letter-spacing: -0.04em; margin-bottom: 0.25rem; }
.footer-tagline { font-size: 0.875rem; color: var(--muted-foreground); }
.footer-links { display: flex; flex-wrap: wrap; gap: 2rem; }
.footer-links a { font-size: 0.875rem; color: var(--muted-foreground); text-transform: capitalize; transition: color 0.2s; }
.footer-links a:hover { color: var(--foreground); }
.footer-copy { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(92, 99, 112, 0.55); }

@media (min-width: 768px) {
  .footer-inner { flex-direction: row; align-items: center; }
}

/* Sections */
.section-border {
  border-top: 1px solid rgba(79, 124, 255, 0.1);
  scroll-margin-top: 96px;
}
.section-alt { background: var(--section-alt-bg); }
.section-cta {
  background: var(--section-alt-bg);
  border-top: 1px solid rgba(79, 124, 255, 0.12);
  border-bottom: 1px solid rgba(79, 124, 255, 0.12);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Hero */
.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(79, 124, 255, 0.14), transparent 65%),
    radial-gradient(ellipse 45% 35% at 95% 40%, rgba(123, 92, 240, 0.08), transparent),
    radial-gradient(ellipse 40% 30% at 5% 60%, rgba(5, 150, 105, 0.07), transparent);
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(79, 124, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 124, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black, transparent);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.hero-inner-centered {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-title {
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--foreground);
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  margin-bottom: 1.5rem;
}

.hero-title .gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .hero-inner-centered .hero-actions { justify-content: center; }
  .hero-inner .hero-actions { justify-content: flex-start; }
}

.hero-hint {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
}

.hero-hint a {
  color: var(--primary);
  font-weight: 600;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(79, 124, 255, 0.12);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.trust-row-centered { justify-content: center; }

.trust-item-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.trust-item-inline svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  flex-shrink: 0;
}

.social-proof-card {
  margin: 2rem auto 2.5rem;
  max-width: 36rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(79, 124, 255, 0.15);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.social-proof-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--foreground);
  margin: 0;
}

.social-proof-card .attr {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: var(--primary);
  opacity: 0.6;
}

.section-header {
  max-width: 40rem;
  margin-bottom: 3rem;
}

.section-header-centered {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  text-align: center;
}

.section-desc {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
}

.page-title {
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--foreground);
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
}

.section-title {
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--foreground);
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
}

.lead { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.75; max-width: 36rem; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(79, 124, 255, 0.08);
  border: 1px solid rgba(79, 124, 255, 0.2);
  color: var(--primary);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Grid layouts */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-2-col { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-2-col { grid-template-columns: repeat(2, 1fr); }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.12);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(10, 13, 20, 0.04);
}

.card-body { padding: 1.25rem; }
.card-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }

.report-card {
  position: relative;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s;
}

.report-card-inner { display: flex; align-items: center; gap: 0.75rem; }
.report-card .icon { color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; }
.report-card-label { font-size: 0.875rem; font-weight: 500; }

.report-card-overlay {
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  opacity: 0;
  transition: opacity 0.2s;
}

.report-card:hover .report-card-overlay { opacity: 1; }
.report-card-overlay span { font-size: 0.875rem; font-weight: 600; color: var(--primary); }

/* UI Preview wrapper */
.ui-preview {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(79, 124, 255, 0.2);
}

.ui-preview-fade {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--fade-color, var(--background)));
}

.annotation-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.annotation-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.annotation-warning { background: rgba(255, 107, 53, 0.18); border: 1px solid var(--destructive); color: var(--destructive); }
.annotation-warning .dot { background: var(--destructive); }

.annotation-success { background: rgba(5, 150, 105, 0.1); border: 1px solid var(--accent); color: var(--accent); }
.annotation-success .dot { background: var(--accent); }

.annotation-info { background: rgba(79, 124, 255, 0.18); border: 1px solid var(--primary); color: var(--primary); }
.annotation-info .dot { background: var(--primary); }

/* UI Mockups */
.ui-mockup {
  padding: 1.5rem;
  background: var(--mockup-bg);
  min-height: 280px;
}

.ui-mockup-header {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

/* Teaching Journey */
.journey-line {
  position: absolute;
  left: 11px;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: rgba(79, 124, 255, 0.2);
}

.journey-steps { position: relative; }
.journey-step { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; position: relative; }

.step-circle {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.step-circle.done { background: rgba(5, 150, 105, 0.1); border: 1px solid var(--accent); color: var(--accent); }
.step-circle.active { background: rgba(232, 93, 36, 0.1); border: 1px solid var(--destructive); color: var(--destructive); animation: pulse 2s infinite; }
.step-circle.pending { background: var(--card); border: 1px solid rgba(92, 99, 112, 0.2); color: var(--muted-foreground); }

.step-label { font-size: 0.875rem; font-weight: 500; }
.step-label.pending { color: var(--muted-foreground); }
.step-sub { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.125rem; }

.step-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 107, 53, 0.1);
  border: 1px solid rgba(255, 107, 53, 0.4);
  color: var(--destructive);
  flex-shrink: 0;
}

/* Misconception radar grid */
.radar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

.radar-cell { padding: 0.625rem; border-radius: 0.5rem; }
.radar-cell .code { font-family: var(--font-mono); font-size: 10px; font-weight: 500; }
.radar-cell .label { font-size: 9px; margin-top: 0.125rem; color: var(--muted-foreground); }

.radar-l0 { background: rgba(5, 150, 105, 0.1); border: 1px solid rgba(5, 150, 105, 0.25); }
.radar-l0 .code { color: var(--accent); }
.radar-l1 { background: rgba(79, 124, 255, 0.08); border: 1px solid rgba(79, 124, 255, 0.2); }
.radar-l1 .code { color: var(--primary); }
.radar-l2 { background: rgba(232, 93, 36, 0.1); border: 1px solid rgba(232, 93, 36, 0.25); }
.radar-l2 .code { color: var(--destructive); }
.radar-l3 { background: rgba(232, 93, 36, 0.16); border: 1px solid var(--destructive); }
.radar-l3 .code { color: var(--destructive); }

/* Curriculum tree */
.curriculum-flow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

.pdf-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(79, 124, 255, 0.1);
  border: 1px solid rgba(79, 124, 255, 0.3);
  color: var(--primary);
}

.tree-node { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tree-node.depth-1 { padding-left: 20px; }
.tree-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.std-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: var(--accent);
}

/* Pacing calendar */
.cal-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }
.cal-header div { text-align: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.cal-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }

.cal-day {
  border-radius: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.12);
}

.cal-dot { width: 10px; height: 10px; border-radius: 50%; }
.cal-dot.done { background: var(--accent); }
.cal-dot.warning { background: var(--destructive); animation: pulse 2s infinite; }
.cal-dot.pending { background: rgba(92, 99, 112, 0.25); }
.cal-label { font-family: var(--font-mono); font-size: 8px; text-align: center; line-height: 1.2; color: var(--muted-foreground); }

/* Mastery bars */
.mastery-row { margin-bottom: 1.25rem; }
.mastery-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.bar-track { flex: 1; height: 8px; border-radius: 9999px; background: var(--muted); }
.bar-fill { height: 100%; border-radius: 9999px; }
.bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.bar-label { font-family: var(--font-mono); font-size: 10px; width: 2.5rem; text-align: right; color: var(--muted-foreground); }
.bar-pct { font-family: var(--font-mono); font-size: 10px; width: 2rem; }

/* Chat UI */
.chat-msg { margin-bottom: 0.75rem; }
.chat-msg.user { display: flex; justify-content: flex-end; }
.chat-msg.ai { display: flex; justify-content: flex-start; }

.chat-bubble {
  max-width: 72%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

.chat-bubble.user {
  background: rgba(79, 124, 255, 0.1);
  border: 1px solid rgba(79, 124, 255, 0.2);
  border-top-right-radius: 0.125rem;
  color: var(--foreground);
}

.chat-bubble.ai {
  max-width: 80%;
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.15);
  border-top-left-radius: 0.125rem;
  color: var(--foreground);
}

.chat-meta { font-family: var(--font-mono); font-size: 10px; color: var(--primary); margin-bottom: 0.25rem; }
.chat-footer { display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 10px; color: var(--muted-foreground); }

/* Heatmap table */
.heatmap-table { width: 100%; font-family: var(--font-mono); font-size: 0.75rem; border-collapse: collapse; }
.heatmap-table th { font-weight: 400; color: var(--muted-foreground); padding-bottom: 0.5rem; }
.heatmap-table td { padding: 0.375rem 0.25rem; }
.heat-cell { padding: 0.125rem 0.5rem; border-radius: 0.25rem; }

/* Standard mastery report */
.mastery-report-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.mastery-report-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); width: 11rem; flex-shrink: 0; }

/* At-risk list */
.at-risk-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--card);
  margin-bottom: 0.5rem;
}

.at-risk-row.high { border: 1px solid rgba(255, 107, 53, 0.3); }
.at-risk-row.medium { border: 1px solid rgba(79, 124, 255, 0.15); }
.risk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.risk-dot.high { background: var(--destructive); animation: pulse 2s infinite; }
.risk-dot.medium { background: var(--primary); }

/* PDF course */
.pdf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pdf-panel { padding: 0.75rem; border-radius: 0.5rem; background: var(--card); }
.pdf-panel.before { border: 1px solid rgba(92, 99, 112, 0.15); }
.pdf-panel.after { border: 1px solid rgba(5, 150, 105, 0.25); }

/* Lesson card */
.lesson-card {
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.15);
}

.lesson-std {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: var(--accent);
}

/* Quote */
.quote { font-size: 1.875rem; font-weight: 900; line-height: 1.25; letter-spacing: -0.025em; margin-bottom: 1.5rem; }
.quote-attr { font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted-foreground); }

/* CTA band */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 5rem 0;
}

.cta-title { font-weight: 900; font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 0.5rem; }

@media (min-width: 768px) {
  .cta-band { flex-direction: row; }
}

/* Comparison cards */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 42rem; }
@media (min-width: 768px) { .compare-grid { grid-template-columns: 1fr 1fr; } }

.compare-card { padding: 1.5rem; border-radius: 0.75rem; background: var(--card); box-shadow: 0 1px 3px rgba(10, 13, 20, 0.04); }
.compare-card.sis { border: 1px solid rgba(92, 99, 112, 0.12); }
.compare-card.omnix { border: 1px solid rgba(79, 124, 255, 0.3); }

/* Governance callout */
.governance {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  max-width: 32rem;
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.governance .icon { color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

/* Enterprise trust strip */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.15);
  box-shadow: 0 1px 3px rgba(10, 13, 20, 0.04);
}

.trust-item .icon { color: var(--primary); width: 16px; height: 16px; }

/* Architecture diagram */
.arch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 0;
}

.arch-box {
  padding: 1rem;
  border-radius: 0.75rem;
  text-align: center;
}

.arch-arrow {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  color: var(--primary);
  font-size: 14px;
}

.arch-line {
  height: 1px;
  width: 2.5rem;
  background: linear-gradient(to right, rgba(79, 124, 255, 0.3), rgba(79, 124, 255, 0.7));
}

.arch-line.reverse { background: linear-gradient(to right, rgba(79, 124, 255, 0.7), rgba(79, 124, 255, 0.3)); }

.district-stack { display: flex; flex-direction: column; gap: 0.625rem; }

.district-box {
  width: 7rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
  background: var(--card);
  border: 1px solid rgba(5, 150, 105, 0.2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}

/* Booking widget */
.booking-widget {
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(79, 124, 255, 0.15);
  box-shadow: 0 1px 3px rgba(10, 13, 20, 0.04);
}

.booking-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(79, 124, 255, 0.12);
}

.booking-body { padding: 1.5rem; }

.date-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }

.date-btn {
  height: 2.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: all 0.2s;
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid rgba(79, 124, 255, 0.12);
}

.date-btn.selected {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  font-weight: 700;
}

.time-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }

.time-btn {
  padding: 0.625rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: all 0.2s;
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid rgba(79, 124, 255, 0.12);
}

.time-btn.selected {
  background: rgba(5, 150, 105, 0.1);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-confirm {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  background: var(--primary);
  color: #FFFFFF;
  transition: filter 0.2s;
}

.btn-confirm:hover { filter: brightness(1.1); }

.booking-empty {
  text-align: center;
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(92, 99, 112, 0.55);
}

.booking-confirmed { text-align: center; padding: 2rem; }

.confirm-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 1.25rem;
}

.checklist { margin-bottom: 2rem; }
.checklist-item { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }

.check-num {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  flex-shrink: 0;
  background: rgba(79, 124, 255, 0.12);
  border: 1px solid rgba(79, 124, 255, 0.35);
  color: var(--primary);
}

.highlight-box {
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.highlight-box .title { font-weight: 700; font-size: 0.875rem; color: var(--accent); margin-bottom: 0.25rem; }

/* Problem / value cards */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .problem-grid { grid-template-columns: repeat(3, 1fr); }
}

.problem-card {
  position: relative;
  padding: 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(79, 124, 255, 0.12);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  overflow: hidden;
}

.problem-card:hover {
  border-color: rgba(79, 124, 255, 0.28);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.problem-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  background: var(--primary-soft);
  color: var(--primary);
}

.problem-card-icon.accent { background: rgba(5, 150, 105, 0.1); color: var(--accent); }
.problem-card-icon.purple { background: rgba(123, 92, 240, 0.1); color: var(--accent2); }

.problem-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

.problem-pain {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.problem-solution {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--foreground);
  margin: 0;
}

/* Role tiles */
.role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .role-grid { grid-template-columns: repeat(2, 1fr); }
}

.role-tile {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(79, 124, 255, 0.12);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.role-tile h4 {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.role-tile h4.admin { color: var(--primary); }
.role-tile h4.instructor { color: var(--accent); }
.role-tile h4.learner { color: var(--accent2); }
.role-tile h4.it { color: var(--muted-foreground); }

.role-tile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-tile li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-bottom: 0.625rem;
}

.role-tile li svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  opacity: 0.55;
}

.roles-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .roles-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; }
}

/* Demo video slots (Supademo embeds on Platform sections) */
.demo-video-slot {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(79, 124, 255, 0.18);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.omnix-site .demo-video-slot--live {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.omnix-site .grid-2-col > div {
  min-width: 0;
}

/* Supademo official ratio 2.10:1 — height derived from width, no letterboxing */
.omnix-site .demo-video-embed-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2.1 / 1;
  background: #0a0d14;
  overflow: hidden;
  line-height: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.omnix-site .demo-video-slot--live .demo-video-meta {
  border: 1px solid rgba(79, 124, 255, 0.18);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.omnix-site .platform-chapter-demo-media .demo-video-slot--live {
  border: 1px solid rgba(79, 124, 255, 0.18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.omnix-site .platform-chapter-demo-media .demo-video-slot--live .demo-video-meta {
  border: none;
  border-top: 1px solid rgba(79, 124, 255, 0.1);
  border-radius: 0;
  box-shadow: none;
}

.omnix-site .demo-video-embed-wrap .demo-video-embed,
.omnix-site iframe.demo-video-embed,
.elementor-widget-html .demo-video-embed-wrap iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Platform demo chapters — text + full-width video stack */
.omnix-site .platform-chapter-demo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.omnix-site .platform-chapter-demo-copy {
  max-width: 40rem;
}

.omnix-site .platform-chapter-demo-media {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 992px) {
  .omnix-site .platform-chapter-demo-layout {
    gap: 2.5rem;
  }

  .omnix-site .platform-chapter-demo-media .demo-video-embed-wrap {
    border-radius: var(--radius-xl);
  }

  .omnix-site .platform-chapter-demo-media .demo-video-slot--live .demo-video-meta {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
}

.demo-video-poster {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(145deg, rgba(79, 124, 255, 0.08) 0%, rgba(244, 246, 251, 1) 45%, rgba(5, 150, 105, 0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-video-poster-inner { text-align: center; padding: 1.5rem; }

.demo-video-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.demo-video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 24px rgba(79, 124, 255, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}

a.demo-video-play { text-decoration: none; }

.demo-video-play:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(79, 124, 255, 0.4);
}

.demo-video-play svg { width: 1.25rem; height: 1.25rem; margin-left: 0.15rem; }

.demo-video-duration {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  font-size: 0.6875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(79, 124, 255, 0.15);
  color: var(--muted-foreground);
}

.demo-video-embed {
  border: 0;
  display: block;
}

.demo-video-meta {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(79, 124, 255, 0.1);
}

.demo-video-meta strong {
  display: block;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.demo-video-meta p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.demo-video-note {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(92, 99, 112, 0.75);
}

.chapter-media-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chapter-media-stack .ui-preview { box-shadow: var(--shadow-sm); }

/* Peek cards enhancement */
.peek-card {
  transition: transform 0.25s, box-shadow 0.25s;
}

.peek-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* AI feature cards */
.ai-feature-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ai-feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.ai-feature-card {
  padding: 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(79, 124, 255, 0.12);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.ai-feature-card .num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.ai-feature-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.ai-feature-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.hidden { display: none !important; }

/* Spacing utilities */
.pt-24 { padding-top: 6rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-16 { padding-top: 4rem; }
.pt-14 { padding-top: 3.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ─── WordPress + Elementor full-width overrides ─────────────────────────── */
/* Wrap ALL page HTML in: <div class="omnix-site"> ... </div> */
/* In Elementor: Section → Layout → Content Width = Full Width, Stretch = ON */

.omnix-site {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--foreground);
}

/* Elementor — remove boxed constraints (do NOT use left:-50vw tricks) */
.elementor-section,
.elementor-section.elementor-section-boxed,
.elementor-section.elementor-section-stretched,
.elementor-section .elementor-container,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-widget-container,
.elementor-widget-html,
.e-con,
.e-con-inner {
  max-width: none !important;
  width: 100% !important;
}

.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section.elementor-section-stretched > .elementor-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-widget-html .elementor-widget-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WordPress block editor */
.entry-content > .omnix-site,
.wp-block-html > .omnix-site,
.is-layout-constrained > .omnix-site {
  max-width: none !important;
  width: 100% !important;
}

body.page .entry-content,
body.page .wp-block-post-content,
body.page .site-main,
body.page article.page,
body.page .content-area,
body.page #content,
body.page #primary,
body.page .site-content,
body.page .ast-container,
body.home .entry-content,
body.home .wp-block-post-content,
body.home .site-main,
body.home article.page,
body.home .content-area,
body.home #content,
body.home #primary,
body.home .site-content,
body.home .ast-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.page .entry-content > .wp-block-html,
body.page .wp-block-html,
body.home .entry-content > .wp-block-html,
body.home .wp-block-html {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page,
body.home {
  background: var(--background) !important;
}

body.page .site-header,
body.page .entry-header,
body.page .page-header,
body.page h1.entry-title,
body.page .wp-block-post-title,
body.page .elementor-page-title,
body.home .site-header,
body.home .entry-header,
body.home .page-header,
body.home h1.entry-title,
body.home .wp-block-post-title {
  display: none !important;
}

/* Remove WordPress empty paragraphs that push nav down */
.entry-content > p:empty,
.entry-content > p:has(> br:only-child) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Sticky nav below WP admin bar when logged in */
.admin-bar .site-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-nav {
    top: 46px;
  }
}

.omnix-site .section-border,
.omnix-site .section-cta,
.omnix-site .section-alt,
.omnix-site .px-6 {
  width: 100%;
}

@media (min-width: 768px) {
  .grid-2[style*="grid-template-columns"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ─── WordPress theme color/layout reset (fixes invisible hero text + nav) ── */

.omnix-site h1,
.omnix-site h2,
.omnix-site h3,
.omnix-site h4,
.omnix-site .hero-title,
.omnix-site .page-title,
.omnix-site .section-title,
.omnix-site .quote,
.omnix-site .cta-title,
.omnix-site .card-title,
.omnix-site .footer-brand {
  color: #0A0D14 !important;
}

.omnix-site .hero-title .text-primary,
.omnix-site .page-title .text-primary,
.omnix-site .text-primary {
  color: #4F7CFF !important;
}

.omnix-site .text-accent,
.omnix-site .page-title .text-accent {
  color: #059669 !important;
}

.omnix-site .text-muted,
.omnix-site .lead,
.omnix-site .quote-attr,
.omnix-site .section-label,
.omnix-site .footer-tagline,
.omnix-site .footer-links a {
  color: #5C6370 !important;
}

.omnix-site .text-destructive {
  color: #E85D24 !important;
}

.omnix-site p {
  color: inherit;
}

/* WordPress auto-wraps links in <p> — breaks flex nav */
.omnix-site .site-nav p,
.omnix-site .nav-inner p,
.omnix-site .nav-links p,
.omnix-site .nav-cta p,
.omnix-site .nav-actions p,
.omnix-site .mobile-menu p,
.omnix-site .footer-inner p {
  margin: 0 !important;
  padding: 0 !important;
  display: contents;
}

.omnix-site .nav-links {
  align-items: center;
}

.omnix-site .site-nav {
  margin: 0 !important;
  padding: 0 !important;
}

.omnix-site .nav-inner {
  min-height: 4rem;
  height: 4rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

@media (min-width: 768px) {
  .omnix-site .nav-links {
    display: flex !important;
    align-items: center !important;
  }

  .omnix-site .nav-cta {
    display: block !important;
  }

  .omnix-site .nav-actions {
    display: flex !important;
    align-items: center !important;
  }
}

.omnix-site .btn-demo {
  color: #FFFFFF !important;
}

.omnix-site .footer-links a:hover {
  color: #0A0D14 !important;
}

/* ─── Illustrative platform preview (GrowWise School design) ─────────────── */

.preview-illustrative {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.omnix-site .preview-illustrative-title {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  text-align: center;
  line-height: 1.1 !important;
}

.omnix-site .illustrative-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .omnix-site .illustrative-flow {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
}

.omnix-site .illustrative-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 2.25rem;
  border: 1px solid rgba(79, 124, 255, 0.1);
  box-shadow: 0 8px 32px rgba(10, 13, 20, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.omnix-site .illustrative-card:hover {
  box-shadow: 0 12px 40px rgba(79, 124, 255, 0.1);
  transform: translateY(-2px);
}

.omnix-site .illustrative-card-icon {
  margin-bottom: 1.5rem;
}

.omnix-site .illustrative-card--has-media .illustrative-card-icon {
  display: none;
}

.omnix-site .illustrative-card-media {
  width: 100%;
  margin: -0.5rem 0 1.25rem;
  border-radius: calc(var(--radius-lg) - 4px);
  overflow: hidden;
  background: #eef3ff;
  border: 1px solid rgba(79, 124, 255, 0.12);
  aspect-ratio: 16 / 10;
  position: relative;
}

.omnix-site .illustrative-card-embed,
.omnix-site .illustrative-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

.omnix-site .illustrative-card-media--embed {
  pointer-events: none;
}

.omnix-site .illustrative-card--has-media:hover .illustrative-card-media--embed {
  pointer-events: auto;
}

.omnix-site .illustrative-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0A0D14 !important;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.omnix-site .illustrative-card p {
  font-size: 0.875rem;
  color: #5C6370 !important;
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.omnix-site .illustrative-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4F7CFF !important;
  text-decoration: none;
}

.omnix-site .illustrative-card-link svg {
  flex-shrink: 0;
}

.omnix-site .illustrative-flow-arrow {
  display: none;
}

@media (min-width: 768px) {
  .omnix-site .illustrative-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    flex-shrink: 0;
    margin-top: -1.5rem;
  }
}

.omnix-site .illustrative-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(79, 124, 255, 0.1);
}

@media (min-width: 640px) {
  .omnix-site .illustrative-footer {
    flex-direction: row;
  }
}

.omnix-site .illustrative-ai-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #7B5CF0 !important;
}

.omnix-site .illustrative-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.omnix-site .illustrative-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4F7CFF !important;
  text-decoration: none;
}

.omnix-site .illustrative-disclaimer {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(92, 99, 112, 0.45) !important;
}

/* ─── Supademo step modal (homepage card CTAs) ─────────────────────────────── */
/* Modal is moved to document.body via JS — styles use #id to beat Elementor. */

html.growwise-demo-modal-open,
body.growwise-demo-modal-open {
  overflow: hidden !important;
}

#growwise-demo-modal.growwise-demo-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.25rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  transform: none !important;
}

#growwise-demo-modal.growwise-demo-modal.is-open {
  display: flex !important;
}

#growwise-demo-modal.growwise-demo-modal[hidden] {
  display: none !important;
}

#growwise-demo-modal .growwise-demo-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10, 13, 20, 0.78) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#growwise-demo-modal .growwise-demo-modal-panel {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(1100px, calc(100vw - 2.5rem)) !important;
  height: min(85vh, 820px) !important;
  height: min(85dvh, 820px) !important;
  max-width: none !important;
  max-height: none !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 80px rgba(10, 13, 20, 0.35) !important;
  overflow: hidden !important;
}

#growwise-demo-modal .growwise-demo-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-shrink: 0 !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid rgba(79, 124, 255, 0.12) !important;
  background: #fff !important;
}

#growwise-demo-modal .growwise-demo-modal-title {
  margin: 0 !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: #0A0D14 !important;
  line-height: 1.3 !important;
}

#growwise-demo-modal .growwise-demo-modal-close {
  flex-shrink: 0 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(79, 124, 255, 0.1) !important;
  color: #4F7CFF !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

#growwise-demo-modal .growwise-demo-modal-close:hover {
  background: rgba(79, 124, 255, 0.18) !important;
}

#growwise-demo-modal .growwise-demo-modal-body {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #0A0D14 !important;
}

#growwise-demo-modal .growwise-demo-modal-iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
  border: 0 !important;
  display: block !important;
  max-width: none !important;
}