/* =============================================
   SaaSInmob — Landing  (Luminal-inspired)
   Dark primary / Light secondary theme system
   ============================================= */

/* ===== THEME VARIABLES ===== */
:root {
  --bg-body: #0a0a0a;
  --bg-section: #0a0a0b;
  --bg-card: rgba(255,255,255,0.02);
  --bg-card-hover: rgba(255,255,255,0.04);
  --text-primary: #e5e5e5;
  --text-secondary: #a3a3a3;
  --text-muted: #737373;
  --text-faint: #525252;
  --border: rgba(255,255,255,0.10);
  --border-hover: rgba(255,255,255,0.20);
  --accent: #ef4444;
  --accent-hover: #dc2626;
  --accent-soft: rgba(239,68,68,0.10);
  --accent-glow: rgba(239,68,68,0.06);
  --accent-text: #f87171;
  --green: #22c55e;
  --green-soft: rgba(34,197,94,0.10);
  --green-text: #4ade80;
  --header-bg: rgba(10,10,10,0.80);
  --header-scroll: rgba(10,10,10,0.96);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.5);
  --fade-from: #0a0a0a;
  --ring-glow: 0 0 0 1px rgba(239,68,68,0.3), 0 0 40px rgba(239,68,68,0.08);
}
[data-theme="light"] {
  --bg-body: #ffffff;
  --bg-section: #fafafa;
  --bg-card: rgba(0,0,0,0.02);
  --bg-card-hover: rgba(0,0,0,0.04);
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-muted: #737373;
  --text-faint: #a3a3a3;
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.16);
  --accent-soft: rgba(220,38,38,0.06);
  --accent-glow: rgba(220,38,38,0.04);
  --accent-text: #dc2626;
  --green-text: #16a34a;
  --header-bg: rgba(255,255,255,0.80);
  --header-scroll: rgba(255,255,255,0.96);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --fade-from: #ffffff;
  --ring-glow: 0 0 0 1px rgba(220,38,38,0.2), 0 0 40px rgba(220,38,38,0.04);
}

/* ===== BASE ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-body);
  color:var(--text-primary);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  transition:background .4s,color .4s;
}
a { color:inherit; text-decoration:none; }
button { background:none; border:none; font:inherit; cursor:pointer; color:inherit; padding:0; }
ul,ol { list-style:none; }
img { display:block; max-width:100%; }
.font-syne { font-family:'Syne',sans-serif!important; }

/* ===== ANIMATIONS ===== */
@keyframes beam-drop {
  0%{transform:translateY(-100%)}
  100%{transform:translateY(500%)}
}
@keyframes fadeInUpBlur {
  0%{opacity:0;transform:translateY(20px);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes border-spin {
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes marquee {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@keyframes pulse-dot {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.5)}
}

/* scroll reveal */
.reveal {
  opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity:1;transform:translateY(0); }
.animate-in { animation:fadeInUpBlur .8s cubic-bezier(.2,.8,.2,1) both; }

/* ===== HEADER ===== */
.header {
  background:var(--header-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:background .4s;
}
.header.scrolled { background:var(--header-scroll); }

.theme-btn {
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:all .3s;
}
.theme-btn:hover { color:var(--text-primary);border-color:var(--border-hover); }
[data-theme="dark"] .theme-btn .ic-moon { display:none; }
[data-theme="light"] .theme-btn .ic-sun { display:none; }

/* ===== BUTTONS ===== */
.btn-primary {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 28px;background:var(--accent);color:#fff;
  border-radius:6px;font-weight:600;font-size:14px;letter-spacing:.04em;
  transition:all .3s;border:none;cursor:pointer;
}
.btn-primary:hover { background:var(--accent-hover);transform:translateY(-1px); }

.btn-ghost {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;
  background:rgba(23,23,23,0.8);border:1px solid rgba(239,68,68,0.2);
  color:#fff;border-radius:6px;
  font-weight:500;font-size:14px;transition:all .3s;cursor:pointer;
}
.btn-ghost:hover { color:var(--accent-text);border-color:rgba(239,68,68,0.5); }
[data-theme="light"] .btn-ghost {
  background:rgba(23,23,23,0.85);
  color:#fff;
}

.btn-spin-wrap { position:relative;display:inline-flex; }
.btn-spin-wrap::before {
  content:'';position:absolute;inset:-1px;border-radius:6px;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,transparent 300deg,#ef4444 360deg);
  opacity:0;transition:opacity .3s;animation:border-spin 2s linear infinite;
  filter:blur(.5px);z-index:0;
}
.btn-spin-wrap:hover::before { opacity:1; }
.btn-spin-wrap > * { position:relative;z-index:1; }

/* ===== BEAM DIVIDERS ===== */
.beam-line {
  position:absolute;right:0;top:0;width:1px;height:100%;
  background:var(--border);overflow:hidden;
}
.beam-line::after {
  content:'';position:absolute;top:0;left:0;
  width:100%;height:160px;
  background:linear-gradient(to bottom,transparent,#ef4444,transparent);
  animation:beam-drop 5s cubic-bezier(.4,0,.2,1) infinite;opacity:.75;
}
.corner-plus {
  position:absolute;right:-5px;top:-5px;
  font-size:12px;color:rgba(255,255,255,0.3);z-index:20;
}

/* ===== GLOBAL BEAM LINES (vertical + horizontal) ===== */
.beam-section {
  position:relative;
}
.beam-v {
  position:absolute;top:0;width:1px;height:100%;
  background:var(--border);overflow:hidden;pointer-events:none;z-index:1;
}
.beam-v::after {
  content:'';position:absolute;top:0;left:0;
  width:100%;height:120px;
  background:linear-gradient(to bottom,transparent,#ef4444,transparent);
  animation:beam-drop 6s cubic-bezier(.4,0,.2,1) infinite;opacity:.6;
}
.beam-v.left { left:0; }
.beam-v.right { right:0; }
.beam-v.q1 { left:25%; }
.beam-v.q3 { left:75%; }
.beam-v.mid { left:50%; }
.beam-v.delay-1::after { animation-delay:1.2s; }
.beam-v.delay-2::after { animation-delay:2.5s; }
.beam-v.delay-3::after { animation-delay:3.8s; }

.beam-h {
  position:absolute;left:0;height:1px;width:100%;
  background:var(--border);overflow:hidden;pointer-events:none;z-index:1;
}
.beam-h::after {
  content:'';position:absolute;top:0;left:0;
  width:120px;height:100%;
  background:linear-gradient(to right,transparent,#ef4444,transparent);
  animation:beam-sweep 7s cubic-bezier(.4,0,.2,1) infinite;opacity:.6;
}
.beam-h.top { top:0; }
.beam-h.bottom { bottom:0; }
.beam-h.center { top:50%; }
.beam-h.delay-1::after { animation-delay:2s; }
.beam-h.delay-2::after { animation-delay:4s; }

@keyframes beam-sweep {
  0%{transform:translateX(-100%)}
  100%{transform:translateX(500%)}
}

/* ===== BADGE ===== */
.badge {
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 18px;border-radius:999px;
  border:1px solid var(--border);background:var(--accent-soft);
  font-size:12px;font-weight:500;color:var(--text-secondary);
}
.badge .dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--green);animation:pulse-dot 2s ease infinite;
}

/* ===== SECTION LABEL ===== */
.section-label {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:11px;color:var(--text-faint);
  letter-spacing:.02em;margin-bottom:16px;
}

/* ===== STAT NUMBER ===== */
.stat-num {
  font-family:'Syne',sans-serif;
  font-size:clamp(3rem,8vw,5rem);font-weight:600;
  color:var(--text-primary);letter-spacing:-.04em;line-height:.9;
}

/* ===== MARQUEE ===== */
.marquee-track {
  display:flex;gap:80px;
  animation:marquee 40s linear infinite;min-width:100%;
}
.marquee-track:hover { animation-play-state:paused; }
.fade-l { background:linear-gradient(to right,var(--fade-from),transparent); }
.fade-r { background:linear-gradient(to left,var(--fade-from),transparent); }

/* ===== FEATURE CARD ===== */
.feature-card {
  padding:32px;border:1px solid var(--border);
  background:var(--bg-card);transition:all .35s;
}
.feature-card:hover { background:var(--bg-card-hover);border-color:var(--border-hover); }
.feature-icon {
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--accent-text);margin-bottom:20px;
}

/* ===== COMPARE TABLE ===== */
.compare-row {
  display:grid;grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--border);
}
.compare-row:last-child { border-bottom:none; }
.compare-cell { padding:16px 20px;font-size:14px;color:var(--text-secondary); }
.compare-cell.label { color:var(--text-primary);font-weight:500; }
.compare-cell.bad { color:var(--accent-text); }
.compare-cell.good { color:var(--green-text); }

/* ===== PRICING ===== */
.pricing-card {
  padding:36px 28px;border:1px solid var(--border);
  background:var(--bg-card);display:flex;flex-direction:column;transition:all .35s;
}
.pricing-card:hover { border-color:var(--border-hover);transform:translateY(-3px); }
.pricing-card.featured {
  border-color:var(--accent);box-shadow:var(--ring-glow);
  background:linear-gradient(to bottom,var(--accent-soft),var(--bg-card));
}

/* ===== TESTIMONIAL ===== */
.testimonial-section-left {
  position:relative;z-index:10;
}
.testimonial-marquee-wrap {
  position:relative;overflow:hidden;
}
.testimonial-card {
  min-width:360px;max-width:420px;padding:48px;
  border-right:1px solid rgba(255,255,255,0.05);
  display:flex;flex-direction:column;justify-content:space-between;transition:all .5s;
  flex-shrink:0;
}
.testimonial-card:hover { background:var(--bg-card); }

/* ===== FAQ ===== */
.faq-item { border-bottom:1px solid var(--border);overflow:hidden; }
.faq-body { max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-body { max-height:350px; }
.faq-item.open .faq-chevron { transform:rotate(180deg); }
.faq-chevron { transition:transform .3s; }

/* ===== MOBILE OVERLAY ===== */
.mobile-overlay {
  background:var(--bg-body);transition:opacity .3s,visibility .3s;
}
.mobile-overlay.hidden { opacity:0;visibility:hidden; }
.mobile-overlay:not(.hidden) { opacity:1;visibility:visible; }

/* ===== INTERACTIVE MOCKUP ===== */
.mock-tab {
  color:var(--text-muted);
  background:transparent;
  border:none;
  cursor:pointer;
}
.mock-tab:hover {
  color:var(--text-primary);
  background:rgba(255,255,255,0.04);
}
.mock-tab.active {
  background:var(--accent-soft);
  color:var(--accent-text);
  font-weight:600;
}
.mock-tab-mobile {
  padding:6px 12px;
  border-radius:6px;
  font-size:10px;
  font-weight:500;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .2s;
}
.mock-tab-mobile.active {
  background:var(--accent-soft);
  color:var(--accent-text);
  border-color:var(--accent-text);
}
.mock-panel {
  display:none;
  opacity:0;
  animation:mockFadeIn .35s ease forwards;
}
.mock-panel.active {
  display:flex;
}
@keyframes mockFadeIn {
  from { opacity:0;transform:translateY(6px); }
  to   { opacity:1;transform:translateY(0); }
}

/* ===== HERO RESPONSIVE ===== */
/* Desktop: title stays centered absolutely over the 4-col grid */
.hero-title-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Mobile: title flows in-grid before tagline */
@media(max-width:767px) {
  .hero-title-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
    order: -1;
  }
  .hero-title-wrap h1 {
    font-size: 2.5rem;
  }
  .hero-col1 {
    order: 2;
    justify-content: flex-start;
  }
  .hero-col1 .mb-12 {
    margin-bottom: 2rem;
  }
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
  .compare-row { grid-template-columns:1fr 1fr; }
  .compare-cell.label { grid-column:1/-1;padding-bottom:0; }
  .testimonial-card { min-width:300px;padding:28px; }
}
@media(max-width:480px) {
  .stat-num { font-size:2.5rem!important; }
  .hero-title-wrap h1 {
    font-size: 2rem;
  }
}