/* ── Sessionz.ai page theme — dark + electric blue ── */
:root {
  --sz-bg:      #0f0f0f;
  --sz-surface: #1a1a1a;
  --sz-border:  #2a2a2a;
  --sz-blue:    #3b82f6;
  --sz-blue-h:  #60a5fa;
  --sz-text:    #ffffff;
  --sz-muted:   #9ca3af;
}

body {
  background: var(--sz-bg);
  color: var(--sz-text);
}

/* Nav */
nav {
  background: rgba(15,15,15,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sz-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand { color: var(--sz-text); }
.nav-links a { color: var(--sz-muted); }
.nav-links a:hover { color: var(--sz-blue); }

/* Links */
a { color: var(--sz-blue); }
a:hover { color: var(--sz-blue-h); }

/* Hero — full-viewport dark, centred */
.hero {
  background: var(--sz-bg);
  border-bottom: 1px solid var(--sz-border);
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
}
.hero h1 { color: var(--sz-text); }
.hero-sub { color: var(--sz-muted); }

/* Override lime tagline colour */
.hero-tagline { color: var(--sz-blue); font-style: normal; }

/* Sections */
section { background: var(--sz-bg); }
section:nth-child(even) { background: var(--sz-surface); }
section h2 { color: var(--sz-text); }

/* Feature cards */
.feature {
  background: var(--sz-surface);
  border-color: var(--sz-border);
}
.feature h3 { color: var(--sz-text); }
.feature p  { color: var(--sz-muted); }

/* Override lime primary button */
.btn-primary {
  background: var(--sz-blue);
  color: #fff;
}
.btn-primary:hover { background: var(--sz-blue-h); color: #fff; }

/* CTA strip */
.cta-strip {
  background: var(--sz-surface);
  border-top: 1px solid var(--sz-border);
  border-bottom: 1px solid var(--sz-border);
}
.cta-strip h2 { color: var(--sz-text); }
.cta-strip p  { color: var(--sz-muted); }

/* Page header (support/privacy) */
.page-header {
  background: var(--sz-surface);
  border-bottom: 1px solid var(--sz-border);
}
.page-header h1 { color: var(--sz-text); }
.page-header p  { color: var(--sz-muted); }

/* Page body */
.page-body { background: var(--sz-bg); }
.page-body h2 {
  color: var(--sz-text);
  border-bottom-color: var(--sz-border);
}
.page-body h3 { color: var(--sz-text); }
.page-body p  { color: var(--sz-muted); }
.page-body ul { color: var(--sz-muted); }
.page-body a  { color: var(--sz-blue); }

/* Q&A */
.qa dt { color: var(--sz-text); }
.qa dd { color: var(--sz-muted); }

/* Footer */
footer {
  background: #000;
  border-top: 1px solid var(--sz-border);
}

/* ── Screenshot carousel ── */
.sz-carousel-section {
  background: var(--sz-bg);
  padding: 3rem 0;
}

/* Container constrains to one screenshot width so scroll-snap kicks in */
.sz-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 320px;
  margin: 0 auto;
}
.sz-carousel::-webkit-scrollbar { display: none; }

/* Each item fills the full container width — one per "page" */
.sz-carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1rem;
  margin: 0;
}

.sz-carousel-item img {
  width: 260px;
  max-width: 90vw;
  border-radius: 36px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  display: block;
}

.sz-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sz-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #333;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.sz-dots button.active { background: var(--sz-blue); }