@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bg-body: #0a0a0f;
  --bg-surface: #111116;
  --bg-elevated: #1a1a1f;
  --bg-chip: #1a1a2a;
  --border: #1e1e2a;
  --border-subtle: #2a2a3e;
  --border-input: #2e2e4e;
  --text-primary: #f0f0f8;
  --text-secondary: #c0c0e0;
  --text-muted: #8080a0;
  --text-keycap: #a0a0c0;
  --nav-bg: rgba(10,10,15,0.85);
  --nav-link: #8080a0;
  --nav-link-hover: #f0f0f8;
  --card-hover-shadow: rgba(0,0,0,0.3);
  --hero-shadow: rgba(0,0,0,0.5);
  --logo-fill: #0d0d14;
  --founder-border: #2a2a3e;
  --footer-border: #1e1e2a;
  --demo-nav-active-text: #f0f0f8;
  --bg-card-inset: #111116;
  --platform-label: #c0c0e0;
  --platform-label-secondary: #8080a0;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-body: #f8f8fc;
    --bg-surface: #ffffff;
    --bg-elevated: #f0f0f8;
    --bg-chip: #eeeef6;
    --border: #e4e4f0;
    --border-subtle: #d4d4e0;
    --border-input: #d0d0e0;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #7a7a9a;
    --text-keycap: #4a4a6a;
    --nav-bg: rgba(248,248,252,0.88);
    --nav-link: #6a6a8a;
    --nav-link-hover: #1a1a2e;
    --card-hover-shadow: rgba(99,102,241,0.10);
    --hero-shadow: rgba(99,102,241,0.08);
    --logo-fill: #ffffff;
    --founder-border: #e4e4f0;
    --footer-border: #e4e4f0;
    --demo-nav-active-text: #1a1a2e;
    --bg-card-inset: #ffffff;
    --platform-label: #3a3a5a;
    --platform-label-secondary: #6a6a8a;
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans','Outfit',system-ui,sans-serif; background:var(--bg-body); color:var(--text-primary); -webkit-font-smoothing:antialiased; }

::selection { background:#6366f1; color:#fff; }
::-moz-selection { background:#6366f1; color:#fff; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-subtle); border-radius:3px; }

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fadeInUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes shimmer { 0%{background-position:-200px 0} 100%{background-position:200px 0} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes scaleIn { from{transform:scale(0.95);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes checkDraw { from{stroke-dashoffset:60} to{stroke-dashoffset:0} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.container { max-width:1120px; margin:0 auto; padding:0 24px; }

.nav-link {
  color:var(--nav-link); text-decoration:none; font-size:14px;
  font-weight:500; transition:color 0.2s;
}
.nav-link:hover { color:var(--nav-link-hover); }

.footer-link {
  color:var(--text-muted); text-decoration:none; transition:color 0.2s;
}
.footer-link:hover { color:var(--text-secondary); }

.footer-link-accent {
  color:#6366f1; text-decoration:none; transition:color 0.2s; font-weight:500;
}
.footer-link-accent:hover { color:#818cf8; }
.gradient-text { background:linear-gradient(135deg,#6366f1,#8b5cf6,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section { padding:100px 0; }

.btn-primary {
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:white; border:none; padding:14px 32px; border-radius:10px;
  font-size:16px; font-weight:600; cursor:pointer; display:inline-flex;
  align-items:center; gap:8px; transition:all 0.25s;
  font-family:'DM Sans',sans-serif; text-decoration:none;
}
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,102,241,0.3); }

.btn-outline {
  background:transparent; color:var(--text-secondary); border:1px solid var(--border-subtle);
  padding:14px 32px; border-radius:10px; font-size:16px; font-weight:500;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:all 0.25s; font-family:'DM Sans',sans-serif; text-decoration:none;
}
.btn-outline:hover { border-color:#6366f1; color:var(--text-primary); }

.keycap {
  background:var(--bg-elevated); border:1px solid var(--border-input); border-bottom-width:2px;
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:3px 7px;
  border-radius:4px; display:inline-block; color:var(--text-keycap);
}

.tag-chip {
  display:inline-flex; align-items:center; gap:4px; padding:4px 12px;
  border-radius:12px; font-size:12px; font-weight:500;
  background:var(--bg-elevated); border:1px solid var(--border-subtle); color:var(--text-secondary);
}

.feature-card {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:16px;
  padding:32px; transition:all 0.3s;
}
.feature-card:hover { border-color:#6366f140; transform:translateY(-4px); box-shadow:0 12px 40px var(--card-hover-shadow); }

/* Contrast sections — alternate bg for visual rhythm */
.light-section { background:var(--bg-surface); color:var(--text-primary); }
.light-section-alt { background:var(--bg-elevated); color:var(--text-primary); }
.light-section h2, .light-section h3, .light-section-alt h2, .light-section-alt h3 { color:var(--text-primary); }
.light-section p, .light-section td, .light-section-alt p, .light-section-alt td { color:var(--text-secondary); }
.light-section .gradient-text, .light-section-alt .gradient-text { -webkit-text-fill-color:transparent; }

@media (prefers-color-scheme: light) {
  .light-section { background:#fafafa; color:#1a1a2e; }
  .light-section-alt { background:#f0f0f5; color:#1a1a2e; }
  .light-section h2, .light-section h3, .light-section-alt h2, .light-section-alt h3 { color:#1a1a2e; }
  .light-section p, .light-section td, .light-section-alt p, .light-section-alt td { color:#4a4a6a; }
}

.light-card {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:16px;
  padding:32px; transition:all 0.3s;
}
.light-card:hover { border-color:#6366f180; transform:translateY(-4px); box-shadow:0 12px 40px var(--card-hover-shadow); }

@media (prefers-color-scheme: light) {
  .light-card { background:white; border-color:#e2e2ea; }
}

.light-tag-chip {
  display:inline-flex; align-items:center; gap:4px; padding:4px 12px;
  border-radius:12px; font-size:12px; font-weight:500;
  background:var(--bg-chip); border:1px solid var(--border-subtle); color:var(--text-secondary);
}

.light-keycap {
  background:var(--bg-chip); border:1px solid var(--border-subtle); border-bottom-width:2px;
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:3px 7px;
  border-radius:4px; display:inline-block; color:var(--text-secondary);
}

@media (prefers-color-scheme: light) {
  .light-tag-chip { background:#f0f0f5; border-color:#e2e2ea; color:#4a4a6a; }
  .light-keycap { background:#f0f0f5; border-color:#d0d0da; color:#4a4a6a; }
}

/* Inline style overrides for theme-aware colors */
.text-muted { color:var(--text-muted) !important; }
.text-secondary { color:var(--text-secondary) !important; }
.text-primary { color:var(--text-primary) !important; }
.bg-chip { background:var(--bg-chip) !important; }
.bg-surface { background:var(--bg-surface) !important; }
.bg-elevated { background:var(--bg-elevated) !important; }
.border-theme { border-color:var(--border) !important; }
.border-subtle-theme { border-color:var(--border-subtle) !important; }

/* Social proof chip */
.social-proof-chip {
  display:inline-flex; align-items:center; gap:8px; padding:6px 16px;
  background:var(--bg-chip); border:1px solid var(--border-subtle);
  border-radius:20px; margin-bottom:28px; font-size:13px; color:var(--text-muted);
}

/* Hero screenshot shadow */
.hero-screenshot {
  width:100%; border-radius:16px;
  box-shadow:0 24px 80px var(--hero-shadow), 0 0 0 1px rgba(99,102,241,0.1);
}

/* Founder avatar border */
.founder-avatar {
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  flex-shrink:0; border:2px solid var(--founder-border);
}

/* Pricing card glow — subtler in light mode */
@media (prefers-color-scheme: light) {
  .pricing-glow { opacity:0.5; }
}

/* Breadcrumb (use-case/compare pages) */
.breadcrumb { font-size:13px; color:var(--text-muted); margin-bottom:24px; }
.breadcrumb a { color:#6366f1; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Social proof marquee */
.social-proof-marquee { overflow:hidden; white-space:nowrap; padding:20px 0; }
.social-proof-marquee-inner { display:inline-block; animation:marquee 30s linear infinite; }

/* Demo Window Transitions */
.demo-window-active { opacity:1 !important; transform:scale(1) !important; pointer-events:auto !important; }
#demo-window-browser.demo-window-hidden { visibility:hidden !important; pointer-events:none !important; }
#demo-window-app.demo-window-active { position:absolute !important; top:0; left:0; right:0; }

/* Animated Demo Phases */
.demo-phase { position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; transition:opacity 0.4s ease; }
.demo-phase.auto-animate { transition:none; }
@keyframes demoPhase2 { 0%{opacity:0} 33%{opacity:0} 36%{opacity:1} 61%{opacity:1} 66%{opacity:0} 100%{opacity:0} }
@keyframes demoPhase3 { 0%{opacity:0} 66%{opacity:0} 69%{opacity:1} 94%{opacity:1} 100%{opacity:0} }
@keyframes demoPulse { 0%{transform:scale(0.95);opacity:0.7} 50%{transform:scale(1);opacity:1} 100%{transform:scale(0.95);opacity:0.7} }
@keyframes demoTagIn { 0%,33%{transform:translateY(8px);opacity:0} 42%{transform:translateY(0);opacity:1} 61%{opacity:1} 66%{opacity:0} 100%{opacity:0} }
@keyframes demoTyping { 0%,66%{opacity:0;} 72%{opacity:1} 94%{opacity:1} 100%{opacity:0} }

/* Demo Step Buttons */
.demo-step { outline:none; }
.demo-step:hover { background:rgba(99,102,241,0.06) !important; }
.demo-step.active div:first-child { transform:scale(1.15); box-shadow:0 2px 8px rgba(99,102,241,0.3); }
.demo-step:not(.active) { opacity:0.55; }
.demo-step:not(.active):hover { opacity:0.85; }

/* Demo sidebar nav states */
.demo-nav-active { background:rgba(99,102,241,0.12) !important; color:var(--demo-nav-active-text) !important; }
.demo-nav-item { cursor:default; }

/* Mobile Responsive */
@media (max-width: 768px) {
  .container { padding:0 16px; }
  nav .container > div:last-child { gap:16px; flex-wrap:wrap; }
  nav .container > div:last-child .nav-link { display:none; }
  .steps-grid { grid-template-columns:1fr !important; }
  .pain-grid { grid-template-columns:1fr !important; }
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:24px !important; }
}
@media (max-width: 640px) {
  .section { padding:60px 0; }
  h1 { font-size:32px !important; }
  h2 { font-size:26px !important; }
  .hero-buttons { flex-direction:column; align-items:center; }
  .feature-grid { grid-template-columns:1fr !important; }
  .demo-sidebar { display:none !important; }
  .comparison-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .comparison-wrap table { min-width:540px; }
  .problem-grid { grid-template-columns:1fr !important; }
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:24px !important; }
}