/*
  Custom stylesheet for TrendPilot AI. This file contains the same styles
  as the original landing page but can be extended in the future to
  accommodate additional pages or components. Colours and typography
  variables are defined at the top for easy adjustment.
*/

:root {
  --bg: #0b0d12;
  --card: #11151e;
  --text: #e6e9ef;
  --muted: #a3aab7;
  --accent: #7c5cff;
  --accent-2: #00e0a4;
  --border: #1b2230;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #090b10, #0b0d12 200px);
  line-height: 1.5;
}

a {
  color: var(--text);
  text-decoration: none;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(9, 11, 16, 0.7);
  backdrop-filter: saturate(180%) blur(10px);
}

.nav nav a {
  margin: 0 10px;
  color: var(--muted);
}
.nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
  font-weight: 600;
}
.btn.small {
  padding: 8px 12px;
  font-size: 0.9rem;
}
.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: white;
}
.btn.primary:hover {
  filter: brightness(1.1);
}
.btn.ghost {
  background: transparent;
  color: var(--text);
}
.btn.ghost:hover {
  border-color: #2c3548;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  padding: 60px 20px 30px;
  max-width: 1100px;
  margin: 0 auto;
}
.hero h1 {
  font-size: clamp(2rem, 2.5vw + 1rem, 3.2rem);
  line-height: 1.1;
  margin: 0 0 10px;
}
.accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  color: var(--muted);
  font-size: 1.05rem;
}
.cta {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.trust-badges {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.95rem;
}
.mockup .card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ticks {
  padding-left: 18px;
}
.ticks li {
  margin: 6px 0;
}

.features,
.how,
.pricing,
.waitlist,
.faq {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}
.features h2,
.how h2,
.pricing h2,
.waitlist h2,
.faq h2 {
  font-size: 1.9rem;
  margin: 0 0 10px;
}
.features .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.feature {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 14px;
}
.feature .icon {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.how .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.how .note {
  color: var(--muted);
}

.pricing .plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}
.plan {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 14px;
  position: relative;
}
.plan .badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #f3b11b;
  color: #111;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
}
.plan.highlight {
  border-color: #3a3f55;
  box-shadow: 0 10px 40px rgba(124, 92, 255, 0.25);
}
.price {
  font-size: 2rem;
  font-weight: 800;
  margin: 12px 0;
}
.price span {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
.small {
  font-size: 0.95rem;
  color: var(--muted);
}
.center {
  text-align: center;
}
.waitlist .form {
  max-width: 760px;
  margin: 10px auto;
}
.form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
input,
select {
  background: #0d1117;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  outline: none;
  width: 100%;
}
input:focus,
select:focus {
  border-color: #2a3350;
}
.form-status {
  margin-top: 10px;
  color: var(--accent-2);
  min-height: 1.4em;
}
.hidden {
  display: none;
}
.footer {
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding: 20px;
}
.footer .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer .left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.footer .right a {
  margin-left: 12px;
  color: var(--muted);
}
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .features .grid {
    grid-template-columns: 1fr 1fr;
  }
  .how .steps {
    grid-template-columns: 1fr 1fr;
  }
  .pricing .plans {
    grid-template-columns: 1fr;
  }
  .form .row {
    grid-template-columns: 1fr;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fb;
    --card: #fff;
    --text: #0b1020;
    --muted: #5a6475;
    --border: #e6e8ee;
  }
  body {
    background: #f8f9fc;
  }
  .nav {
    background: #ffffffcc;
  }
  .btn.ghost {
    border-color: #dfe3ee;
  }
  input,
  select {
    background: #fff;
  }
}