/* ═══════════════════════════════════════════
   NexusFlow AI — style.css  (Landing Page)
═══════════════════════════════════════════ */

:root {
  --indigo: #4F46E5;
  --indigo-dark: #4338CA;
  --indigo-soft: #EEF2FF;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --border: rgba(15,23,42,0.08);
  --border-strong: rgba(15,23,42,0.14);
  --bg-soft: #F8FAFC;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06),0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.07),0 1px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 8px 32px rgba(15,23,42,0.09),0 2px 8px rgba(15,23,42,0.04);
  --shadow-xl: 0 16px 48px rgba(15,23,42,0.1),0 4px 16px rgba(15,23,42,0.06);
  --t: 200ms cubic-bezier(0.4,0,0.2,1);
  --t-slow: 400ms cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(15,23,42,0.12); border-radius:3px; }
:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px; }

/* ══ NAVBAR ══════════════════════════════════ */
#site-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition: background-color var(--t), box-shadow var(--t), border-color var(--t);
}
#site-nav.nav-transparent { background:rgba(255,255,255,0); border-bottom:1px solid transparent; }
#site-nav.nav-scrolled {
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.nav-inner { max-width:1200px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.nav-logo { display:flex; align-items:center; gap:8px; text-decoration:none; flex-shrink:0; }
.nav-logo-mark { width:28px; height:28px; background:var(--indigo); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.nav-logo-text { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:-0.02em; }
.nav-links { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links a { display:block; padding:6px 12px; font-size:13.5px; font-weight:500; color:var(--text-secondary); text-decoration:none; border-radius:8px; transition:color var(--t),background-color var(--t); }
.nav-links a:hover { color:var(--text-primary); background:rgba(15,23,42,0.04); }
.nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.nav-login { padding:6px 14px; font-size:13.5px; font-weight:500; color:var(--text-secondary); background:transparent; border:none; border-radius:8px; cursor:pointer; font-family:inherit; transition:color var(--t),background-color var(--t); }
.nav-login:hover { color:var(--text-primary); background:rgba(15,23,42,0.04); }

.nav-mobile-toggle { display:none; flex-direction:column; gap:4.5px; background:transparent; border:none; cursor:pointer; padding:6px; border-radius:8px; transition:background-color var(--t); }
.nav-mobile-toggle:hover { background:rgba(15,23,42,0.04); }
.nav-mobile-toggle span { display:block; width:20px; height:1.5px; background:var(--text-primary); border-radius:2px; transition:transform var(--t),opacity var(--t); }
.nav-mobile-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.nav-mobile-toggle.open span:nth-child(2) { opacity:0; }
.nav-mobile-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }

.nav-mobile-drawer { display:none; position:fixed; top:64px; left:0; right:0; background:white; border-bottom:1px solid var(--border); padding:16px 24px 24px; transform:translateY(-8px); opacity:0; transition:transform var(--t),opacity var(--t); box-shadow:var(--shadow-lg); z-index:999; }
.nav-mobile-drawer.visible { transform:translateY(0); opacity:1; }
.nav-mobile-drawer a { display:block; padding:10px 0; font-size:15px; font-weight:500; color:var(--text-secondary); text-decoration:none; border-bottom:1px solid var(--border); }
.nav-mobile-drawer a:last-of-type { border-bottom:none; }

@media(max-width:768px) {
  .nav-links,.nav-login { display:none; }
  .nav-mobile-toggle { display:flex; }
  .nav-mobile-drawer { display:block; }
}

/* ══ BUTTONS ════════════════════════════════ */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:6px; background-color:var(--indigo); color:white; font-family:inherit; font-weight:600; cursor:pointer; border:none; text-decoration:none; transition:background-color var(--t),transform var(--t),box-shadow var(--t); box-shadow:0 1px 3px rgba(79,70,229,0.3); }
.btn-primary:hover { background-color:var(--indigo-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(79,70,229,0.3); }
.btn-primary:active { transform:translateY(0); }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--text-primary); font-family:inherit; font-weight:600; cursor:pointer; border:1px solid var(--border); text-decoration:none; transition:border-color var(--t),background-color var(--t),transform var(--t); }
.btn-outline:hover { border-color:var(--border-strong); background:var(--bg-soft); transform:translateY(-1px); }

/* ══ HERO ════════════════════════════════════ */
.hero-ambient { position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 70% 30%,rgba(79,70,229,0.06) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 85% 70%,rgba(139,92,246,0.04) 0%,transparent 60%); pointer-events:none; }
.waitlist-input { border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:border-color var(--t),box-shadow var(--t); background:white; }
.waitlist-input:focus { outline:none; border-color:var(--indigo); box-shadow:0 0 0 3px rgba(79,70,229,0.1); }

/* ─── Dashboard Mockup ─── */
.dashboard-mockup { position:relative; filter:drop-shadow(0 24px 48px rgba(15,23,42,0.1)); }
.mockup-window { background:white; border-radius:18px; border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-xl); }
.mockup-titlebar { background:#F8FAFC; border-bottom:1px solid var(--border); padding:10px 16px; display:flex; align-items:center; gap:6px; }
.dot { width:10px; height:10px; border-radius:50%; }
.dot-red { background:#FF5F57; } .dot-yellow { background:#FEBC2E; } .dot-green { background:#28C840; }
.metric-card { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:12px; }
.ai-activity-card { background:white; border:1px solid var(--border); border-radius:10px; padding:12px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#22C55E; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4);} 50%{box-shadow:0 0 0 4px rgba(34,197,94,0);} }
.activity-row { display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px; transition:background-color var(--t); }
.activity-row:hover { background:var(--bg-soft); }
.activity-icon { width:16px; height:16px; border-radius:4px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chart-card-landing { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:12px; }
.chart-bar { flex:1; background:rgba(79,70,229,0.15); border-radius:3px 3px 0 0; transition:background-color var(--t); }
.chart-bar-active { background:var(--indigo); }
.chart-bar:hover { background:rgba(79,70,229,0.3); }
.float-card { position:absolute; background:white; border:1px solid var(--border); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow-md); animation:float-gentle 5s ease-in-out infinite; }
.float-card-1 { top:-16px; right:-20px; animation-delay:0s; }
.float-card-2 { bottom:24px; left:-20px; animation-delay:2.5s; }
@keyframes float-gentle { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* ══ TRUST BAR ══════════════════════════════ */
.trust-logo { font-size:14px; font-weight:700; color:var(--text-secondary); opacity:0.38; letter-spacing:-0.02em; cursor:default; user-select:none; transition:opacity var(--t); }
.trust-logo:hover { opacity:0.65; }

/* ══ SECTION COMMON ═════════════════════════ */
.section-eyebrow { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--indigo); margin-bottom:12px; }
.section-heading { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(30px,4vw,44px); font-weight:400; line-height:1.1; letter-spacing:-0.02em; color:var(--text-primary); margin-bottom:16px; }
.section-subtext { font-size:16px; color:var(--text-secondary); line-height:1.65; max-width:480px; margin:0 auto; }
.container { max-width:1200px; margin-left:auto; margin-right:auto; }

/* ══ FEATURE CARDS ══════════════════════════ */
.feature-card { padding:28px; border:1px solid var(--border); border-radius:20px; background:white; transition:border-color var(--t),box-shadow var(--t),transform var(--t); cursor:default; }
.feature-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.feature-icon-wrap { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.feature-icon { width:20px; height:20px; }
.feature-title { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:-0.01em; margin-bottom:10px; }
.feature-desc { font-size:13.5px; color:var(--text-secondary); line-height:1.65; margin-bottom:20px; }
.feature-link { font-size:12.5px; font-weight:600; color:var(--indigo); text-decoration:none; transition:opacity var(--t); }
.feature-link:hover { opacity:0.7; }

/* ══ MARQUEE ════════════════════════════════ */
.marquee-wrapper { overflow:hidden; mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%); -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%); }
.marquee-track { display:flex; width:max-content; animation:marquee-scroll 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-items { display:flex; align-items:center; gap:12px; padding-right:12px; }
@keyframes marquee-scroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.integration-pill { display:inline-flex; align-items:center; padding:8px 18px; border:1px solid var(--border); border-radius:100px; background:white; font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; cursor:default; transition:border-color var(--t),color var(--t); }
.integration-pill:hover { border-color:var(--border-strong); color:var(--text-primary); }

/* ══ METRICS CARDS ══════════════════════════ */
.metrics-card { padding:32px 28px; border:1px solid var(--border); border-radius:20px; background:white; transition:box-shadow var(--t),transform var(--t); }
.metrics-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.metrics-number { font-family:'DM Serif Display',Georgia,serif; font-size:48px; font-weight:400; color:var(--indigo); line-height:1; letter-spacing:-0.02em; margin-bottom:8px; }
.metrics-label { font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.metrics-desc { font-size:12.5px; color:var(--text-secondary); line-height:1.6; }

/* ══ PRICING ════════════════════════════════ */
.pricing-toggle-wrap { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:24px; }
.pricing-toggle-label { font-size:13.5px; font-weight:500; color:var(--text-secondary); transition:color var(--t); }
.pricing-toggle-label.active { color:var(--text-primary); font-weight:600; }
.pricing-toggle-btn { position:relative; width:44px; height:24px; background:var(--border-strong); border:none; border-radius:100px; cursor:pointer; transition:background-color var(--t); padding:0; }
.pricing-toggle-btn[aria-checked="true"] { background:var(--indigo); }
.pricing-toggle-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; background:white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.15); transition:transform var(--t); }
.pricing-toggle-btn[aria-checked="true"] .pricing-toggle-knob { transform:translateX(20px); }
.pricing-save-badge { font-size:11px; font-weight:700; color:#059669; background:rgba(5,150,105,0.08); border:1px solid rgba(5,150,105,0.2); padding:3px 8px; border-radius:100px; transition:opacity var(--t); }
.pricing-save-badge.hidden { opacity:0; }
.pricing-card { background:white; border:1px solid var(--border); border-radius:20px; padding:32px; transition:box-shadow var(--t),transform var(--t); position:relative; }
.pricing-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pricing-card.featured { border-color:var(--indigo); box-shadow:0 0 0 1px rgba(79,70,229,0.1),var(--shadow-lg); }
.pricing-card.featured:hover { box-shadow:0 0 0 1px rgba(79,70,229,0.15),var(--shadow-xl); transform:translateY(-4px); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--indigo); color:white; font-size:11px; font-weight:700; padding:4px 12px; border-radius:100px; letter-spacing:0.04em; white-space:nowrap; }
.pricing-tier-name { font-size:13px; font-weight:700; color:var(--text-secondary); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:8px; }
.pricing-price { display:flex; align-items:baseline; gap:2px; margin-bottom:6px; }
.pricing-currency { font-size:16px; font-weight:600; color:var(--text-primary); margin-top:6px; }
.pricing-amount { font-family:'DM Serif Display',Georgia,serif; font-size:44px; font-weight:400; color:var(--text-primary); line-height:1; transition:all 250ms ease; }
.pricing-period { font-size:13px; color:var(--text-secondary); }
.pricing-desc { font-size:13px; color:var(--text-secondary); line-height:1.55; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.pricing-features { list-style:none; padding:0; margin:0 0 28px; }
.pricing-feature { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text-secondary); padding:5px 0; }
.pricing-feature-check { width:16px; height:16px; border-radius:50%; background:rgba(79,70,229,0.1); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7'%3E%3Cpath d='M1 3.5l2 2 4-4.5' stroke='%234F46E5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; flex-shrink:0; margin-top:1px; }
.pricing-cta { width:100%; padding:11px 20px; border-radius:12px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all var(--t); }
.pricing-cta-default { background:var(--bg-soft); border:1px solid var(--border); color:var(--text-primary); }
.pricing-cta-default:hover { background:#EEF0F4; border-color:var(--border-strong); }
.pricing-cta-featured { background:var(--indigo); border:1px solid transparent; color:white; box-shadow:0 1px 3px rgba(79,70,229,0.3); }
.pricing-cta-featured:hover { background:var(--indigo-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(79,70,229,0.3); }

/* ══ TESTIMONIALS ═══════════════════════════ */
.testimonials-masonry { columns:1; column-gap:20px; }
@media(min-width:640px)  { .testimonials-masonry { columns:2; } }
@media(min-width:1024px) { .testimonials-masonry { columns:3; } }
.testimonial-card { break-inside:avoid; page-break-inside:avoid; background:white; border:1px solid var(--border); border-radius:20px; padding:24px; margin-bottom:20px; transition:box-shadow var(--t),transform var(--t); }
.testimonial-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stars { font-size:12px; color:#F59E0B; letter-spacing:2px; margin-bottom:14px; }
.testimonial-text { font-size:13.5px; color:var(--text-secondary); line-height:1.7; }
.testimonial-author { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.testimonial-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.author-name { font-size:12.5px; font-weight:700; color:var(--text-primary); }
.author-title { font-size:11.5px; color:var(--text-secondary); margin-top:1px; }

/* ══ FAQ ════════════════════════════════════ */
.faq-list { border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:transparent; border:none; cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--text-primary); text-align:left; transition:background-color var(--t); }
.faq-question:hover { background:var(--bg-soft); }
.faq-icon { flex-shrink:0; color:var(--text-secondary); transition:transform var(--t); }
.faq-item.open .faq-icon { transform:rotate(180deg); }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows 300ms cubic-bezier(0.4,0,0.2,1); }
.faq-item.open .faq-answer { grid-template-rows:1fr; }
.faq-answer > div { overflow:hidden; }
.faq-answer p { padding:0 24px 20px; font-size:14px; color:var(--text-secondary); line-height:1.7; }

/* ══ FINAL CTA ══════════════════════════════ */
.cta-banner { position:relative; background:var(--bg-soft); border:1px solid var(--border); border-radius:24px; padding:80px 48px; overflow:hidden; text-align:center; }
.cta-ambient { position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(79,70,229,0.06) 0%,transparent 70%); pointer-events:none; }
@media(max-width:640px) { .cta-banner { padding:48px 24px; } }

/* ══ FOOTER ═════════════════════════════════ */
#site-footer { background:var(--bg-soft); border-top:1px solid var(--border); }
.footer-inner { max-width:1200px; margin:0 auto; padding:64px 24px 40px; }
.footer-top { display:grid; grid-template-columns:1fr; gap:48px; margin-bottom:48px; }
@media(min-width:768px) { .footer-top { grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; } }
.footer-brand-desc { font-size:13.5px; color:var(--text-secondary); line-height:1.65; max-width:260px; margin-top:12px; }
.footer-col-title { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-primary); margin-bottom:16px; }
.footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:13.5px; color:var(--text-secondary); text-decoration:none; transition:color var(--t); }
.footer-links a:hover { color:var(--text-primary); }
.footer-bottom { border-top:1px solid var(--border); padding-top:28px; display:flex; flex-direction:column; gap:12px; }
@media(min-width:640px) { .footer-bottom { flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-copyright { font-size:12.5px; color:var(--text-secondary); }
.footer-social { display:flex; gap:8px; }
.footer-social-link { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:white; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); text-decoration:none; transition:border-color var(--t),color var(--t); font-size:12px; font-weight:700; }
.footer-social-link:hover { border-color:var(--border-strong); color:var(--text-primary); }
.footer-newsletter { display:flex; gap:8px; margin-top:16px; }
.footer-newsletter input { flex:1; padding:8px 12px; font-size:13px; border:1px solid var(--border); border-radius:8px; background:white; color:var(--text-primary); font-family:inherit; transition:border-color var(--t); }
.footer-newsletter input:focus { outline:none; border-color:var(--indigo); }
.footer-newsletter button { padding:8px 14px; font-size:12.5px; font-weight:600; background:var(--indigo); color:white; border:none; border-radius:8px; cursor:pointer; font-family:inherit; transition:background-color var(--t); white-space:nowrap; }
.footer-newsletter button:hover { background:var(--indigo-dark); }

/* ══ SCROLL REVEAL ══════════════════════════ */
.reveal-up { opacity:0; transform:translateY(24px); transition:opacity 600ms cubic-bezier(0.4,0,0.2,1),transform 600ms cubic-bezier(0.4,0,0.2,1); }
.reveal-up.revealed { opacity:1; transform:translateY(0); }
.reveal-up-delay { opacity:0; transform:translateY(24px); transition:opacity 600ms 150ms cubic-bezier(0.4,0,0.2,1),transform 600ms 150ms cubic-bezier(0.4,0,0.2,1); }
.reveal-up-delay.revealed { opacity:1; transform:translateY(0); }