/* ═══════════════════════════════════════════════════════
   landing.css — Immersive SaaS Page Additions (2026 Layout)
   ═══════════════════════════════════════════════════════ */

body {
  overflow-y: auto !important; /* Allow landing page scrolling */
  background: var(--bg-app);
}

/* ── Global Utilities & Overrides ─────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #fff 30%, var(--text-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.accent-gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Navigation Header ────────────────────────────────── */
.navbar-custom {
  background: rgba(20, 20, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  sticky: top;
  z-index: 1050;
  padding: 14px 0;
}
.nav-link-custom {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
  text-decoration: none;
}
.nav-link-custom:hover {
  color: var(--text-primary);
}

/* ── Hero Section ────────────────────────────────────── */
.hero-section {
  position: relative;
  padding: 140px 0 100px 0;
  background: var(--bg-header-bar);
  overflow: hidden;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to top, var(--bg-app), transparent);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(108, 99, 255, 0.12);
  border: 1px solid rgba(108, 99, 255, 0.25);
  color: var(--accent-hover);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 24px;
}
.hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.hero-desc {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 36px auto;
  line-height: 1.6;
}

/* ── Custom Buttons ───────────────────────────────────── */
.btn-saas-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.1s ease;
  text-decoration: none;
}
.btn-saas-primary:hover {
  background: var(--accent-hover);
  color: #fff;
  transform: translateY(-1px);
}
.btn-saas-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
}
.btn-saas-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* ── App Mockup Showcase ──────────────────────────────── */
.app-mockup-wrapper {
  position: relative;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  margin-top: 40px;
}
.app-mockup-header {
  height: 36px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-color);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 6px;
}
.app-mockup-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.placeholder-image-container {
  background: var(--bg-content);
  min-height: 480px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.wireframe-grid {
  display: flex;
  width: 100%;
  height: 480px;
}
.wireframe-sidebar {
  width: 200px;
  border-right: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  padding: 16px;
}
.wireframe-main {
  flex: 1;
  padding: 24px;
}

/* ── Feature Cards ────────────────────────────────────── */
.section-padding {
  padding: 100px 0;
}
.section-subtitle {
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.section-title {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 48px;
}
.feature-card {
  background: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 32px;
  height: 100%;
  transition: border-color 0.25s, transform 0.25s;
}
.feature-card:hover {
  border-color: rgba(108, 99, 255, 0.4);
  transform: translateY(-4px);
}
.feature-icon-wrapper {
  width: 44px;
  height: 44px;
  background: rgba(108, 99, 255, 0.08);
  border: 1px solid rgba(108, 99, 255, 0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 20px;
}
.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Interactive App Module Ticker ────────────────────── */
.module-badge {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px;
}
.module-badge i {
  color: var(--accent);
}

/* ── Footer ───────────────────────────────────────────── */
.footer-saas {
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border-color);
  padding: 60px 0 30px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.footer-brand-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   landing.css Addition — Pricing & Persona Target Layouts
   ═══════════════════════════════════════════════════════ */

/* ── Build By And For Section ────────────────────────── */
.built-by-for-showcase {
  background: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.persona-nav-link {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-left: 3px solid transparent;
  padding: 14px 20px;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.persona-nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}
.persona-nav-link.active {
  color: var(--accent-hover);
  background: rgba(108, 99, 255, 0.05);
  border-left-color: var(--accent);
}
.persona-pane {
  display: none;
  animation: fadeInPersona 0.4s ease forwards;
}
.persona-pane.active {
  display: block;
}
@keyframes fadeInPersona {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Modern Pricing Matrices (2026 Sandbox) ──────────── */
.pricing-card {
  background: var(--bg-content);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 40px 32px;
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 15px 50px rgba(108, 99, 255, 0.15);
}
.pricing-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
}
.pricing-price {
  font-size: 44px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  margin-top: 16px;
  margin-bottom: 4px;
}
.pricing-price span {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}
.pricing-features-list {
  list-style: none;
  padding-left: 0;
  margin: 32px 0;
  font-size: 14px;
  color: var(--text-muted);
}
.pricing-features-list li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-features-list li i {
  color: var(--accent-hover);
}

/* Simulated dynamic usage bars */
.pricing-usage-meter {
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  height: 6px;
  width: 100%;
  margin-top: 6px;
  overflow: hidden;
}
.pricing-usage-bar {
  background: var(--accent);
  height: 100%;
  border-radius: 4px;
}
/* ═══════════════════════════════════════════════════════
   Landing — Visual Showcase Additions
   ═══════════════════════════════════════════════════════ */

/* ── Animated Stats Counter ───────────────────────────── */
.stats-section { padding:80px 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); background:linear-gradient(135deg, rgba(108,99,255,.03) 0%, rgba(20,20,40,.4) 50%, rgba(58,170,80,.03) 100%); position:relative; overflow:hidden; }
.stats-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 50%, rgba(108,99,255,.06), transparent); pointer-events:none; }
.stat-item { text-align:center; position:relative; z-index:1; }
.stat-number { font-size:48px; font-weight:800; line-height:1; margin-bottom:6px; background:linear-gradient(135deg, #fff 20%, var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.stat-divider { width:1px; background:var(--border-color); align-self:stretch; }

/* ── Bento Grid Showcase ─────────────────────────────── */
.bento-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(140px,auto); gap:16px; }
.bento-card { background:var(--bg-content); border:1px solid var(--border-color); border-radius:10px; padding:28px; position:relative; overflow:hidden; transition:border-color .3s,transform .3s; }
.bento-card:hover { border-color:rgba(108,99,255,.35); transform:translateY(-2px); }
.bento-card .bento-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:16px; }
.bento-card h4 { font-size:16px; font-weight:600; margin-bottom:8px; color:var(--text-primary); }
.bento-card p { font-size:13px; color:var(--text-muted); line-height:1.6; margin-bottom:0; }
.bento-card .bento-visual { margin-top:16px; }

/* Bento grid responsive spans */
.bento-wide { grid-column:span 8; }
.bento-narrow { grid-column:span 4; }
.bento-half { grid-column:span 6; }
.bento-third { grid-column:span 4; }
@media(max-width:991px) { .bento-wide,.bento-narrow,.bento-half,.bento-third { grid-column:span 12; } }

/* Fake UI elements inside bento cards */
.mini-table { width:100%; border-collapse:separate; border-spacing:0 4px; }
.mini-table tr { background:rgba(255,255,255,.02); }
.mini-table td { padding:6px 10px; font-size:11px; color:var(--text-muted); }
.mini-table td:first-child { border-radius:4px 0 0 4px; }
.mini-table td:last-child { border-radius:0 4px 4px 0; }
.mini-badge { display:inline-block; font-size:9px; font-weight:600; padding:2px 7px; border-radius:3px; letter-spacing:.3px; }
.mini-badge-green { background:rgba(58,170,80,.12); color:#3aaa50; border:1px solid rgba(58,170,80,.2); }
.mini-badge-yellow { background:rgba(224,160,48,.12); color:#e0a030; border:1px solid rgba(224,160,48,.2); }
.mini-badge-red { background:rgba(232,68,74,.12); color:#e8444a; border:1px solid rgba(232,68,74,.2); }
.mini-badge-purple { background:rgba(108,99,255,.12); color:var(--accent); border:1px solid rgba(108,99,255,.2); }
.mini-badge-blue { background:rgba(42,125,225,.12); color:#2a7de1; border:1px solid rgba(42,125,225,.2); }

/* Mini kanban */
.mini-kanban { display:flex; gap:8px; }
.mini-kanban-col { flex:1; background:rgba(255,255,255,.02); border-radius:6px; padding:8px; border:1px solid var(--border-color); }
.mini-kanban-col h6 { font-size:9px; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); margin-bottom:6px; font-weight:700; }
.mini-kanban-card { background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:4px; padding:5px 8px; margin-bottom:4px; font-size:10px; color:var(--text-primary); }

/* Mini budget bars */
.mini-budget-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:11px; }
.mini-budget-label { width:60px; color:var(--text-muted); flex-shrink:0; }
.mini-budget-bar { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.mini-budget-fill { height:100%; border-radius:4px; transition:width 1.5s ease; }

/* Mini permission matrix */
.mini-perm-grid { display:grid; grid-template-columns:auto repeat(4,1fr); gap:0; font-size:10px; }
.mini-perm-cell { padding:4px 6px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-muted); text-align:center; }
.mini-perm-cell:first-child { text-align:left; color:var(--text-primary); }

/* ── Workflow Diagram ────────────────────────────────── */
.workflow-section { position:relative; }
.workflow-steps { display:flex; align-items:flex-start; justify-content:center; gap:0; position:relative; flex-wrap:wrap; }
.workflow-step { flex:0 0 200px; text-align:center; position:relative; z-index:1; }
.workflow-step-icon { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 16px; position:relative; transition:transform .3s,box-shadow .3s; }
.workflow-step-icon:hover { transform:scale(1.08); }
.workflow-step h5 { font-size:14px; font-weight:600; margin-bottom:6px; color:var(--text-primary); }
.workflow-step p { font-size:12px; color:var(--text-muted); line-height:1.5; padding:0 10px; }
.workflow-connector { flex:0 0 60px; display:flex; align-items:center; justify-content:center; padding-top:20px; }
.workflow-connector i { font-size:20px; color:var(--border-color); opacity:.6; }
@media(max-width:767px) { .workflow-connector { display:none; } .workflow-step { flex:0 0 100%; margin-bottom:24px; } }

/* ── Scroll-triggered fade-in ─────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ── Glow accents ─────────────────────────────────────── */
.glow-accent { position:relative; }
.glow-accent::after { content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(108,99,255,.08); filter:blur(60px); pointer-events:none; z-index:0; }
.glow-top-right::after { top:-80px; right:-60px; }
.glow-bottom-left::after { bottom:-80px; left:-60px; }