/* viai.club — light, warm, easy.
   Sand background, ocean accents, sunset highlight, lush greens.
   Subtle reggae stripe under the hero. Conversational typography. */

:root {
  --sand:        #fef9ec;
  --sand-deep:   #f5ecd0;
  --paper:       #ffffff;
  --ink:         #1f2937;
  --ink-soft:    #4b5563;
  --muted:       #6b7280;
  --hairline:    #e7d9b1;
  --ocean:       #0ea5e9;
  --ocean-deep:  #0369a1;
  --sunset:      #fb7185;
  --lush:        #10b981;
  --reggae-red:  #d62828;
  --reggae-yel:  #f6c026;
  --reggae-grn:  #2a9d4a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--sand);
  color: var(--ink);
  font-family: "Source Serif Pro", "Georgia", "Iowan Old Style", serif;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: var(--ocean-deep); }
a:hover { color: var(--sunset); }

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--hairline);
  background: var(--sand);
}
.logo-mark {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.logo-mark .ai { color: var(--sunset); }
.topbar nav { display: flex; gap: 18px; align-items: center; }
.topbar nav a {
  font-family: "Inter", sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.topbar nav a.cta {
  background: var(--ocean); color: white;
  padding: 8px 16px; border-radius: 999px; font-weight: 600;
}
.topbar nav a.cta:hover { background: var(--sunset); color: white; }

/* main */
main { flex: 1; max-width: 980px; margin: 0 auto; padding: 30px clamp(16px, 4vw, 40px) 60px; width: 100%; }

/* hero */
.hero { padding: 40px 0 30px; position: relative; }
.hero h1 {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05; letter-spacing: -1px;
  margin: 16px 0 18px;
}
.hero .lead {
  font-size: clamp(18px, 2.2vw, 22px);
  max-width: 680px; color: var(--ink-soft); margin-bottom: 26px;
}
.big-cta {
  display: inline-block;
  background: var(--ocean); color: white !important;
  padding: 14px 28px; border-radius: 999px;
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 17px;
  text-decoration: none; border: none; cursor: pointer;
}
.big-cta:hover { background: var(--sunset); }
button.big-cta { font-family: "Inter", sans-serif; }

/* reggae stripe under hero */
.stripe {
  position: absolute;
  top: 0; left: -16px; right: -16px;
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right,
    var(--reggae-red) 0%,    var(--reggae-red) 33%,
    var(--reggae-yel) 33%,   var(--reggae-yel) 66%,
    var(--reggae-grn) 66%,   var(--reggae-grn) 100%);
  opacity: 0.55;
}

/* feature cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin: 40px 0;
}
.cards article {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 14px; padding: 22px;
}
.cards h3 {
  margin: 0 0 8px 0;
  font-family: "Inter", sans-serif;
  font-size: 18px; font-weight: 700; color: var(--ocean-deep);
}
.cards p { margin: 0; color: var(--ink-soft); }

/* examples strip */
.strip {
  background: var(--sand-deep);
  border-radius: 16px; padding: 22px 26px; margin: 30px 0;
}
.strip p { margin: 0 0 8px 0; font-weight: 600; color: var(--ink); }
.examples {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.examples li { color: var(--ink-soft); font-style: italic; }

/* ask page */
.ask-page main h1 {
  font-family: "Inter", sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800; margin: 12px 0 8px; letter-spacing: -0.5px;
}
.ask-main .lead { color: var(--ink-soft); margin-bottom: 22px; max-width: 640px; }
.ask-form {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 14px; padding: 18px; margin-bottom: 18px;
}
.ask-form textarea {
  width: 100%; font: inherit; font-size: 17px;
  background: transparent; border: none; resize: vertical;
  outline: none; color: var(--ink);
}
.ask-form .row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }

/* answer block */
.answer {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--lush);
  border-radius: 14px; padding: 22px 26px; margin: 18px 0;
}
.answer h2 {
  font-family: "Inter", sans-serif;
  font-size: 16px; font-weight: 700; color: var(--lush);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 0 0 10px;
}
.answer-body { color: var(--ink); white-space: pre-wrap; }
.answer h3 {
  margin: 16px 0 6px;
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 700; color: var(--ocean-deep);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.sources {
  list-style: none; padding: 0; margin: 0;
  font-family: "Inter", sans-serif; font-size: 13px;
}
.sources li {
  padding: 5px 0;
  border-top: 1px dashed var(--hairline);
  color: var(--muted);
}
.sources li:first-child { border-top: none; }
.disclaimer { margin-top: 18px; font-style: italic; }

/* examples box */
.examples-box {
  background: var(--sand-deep);
  border-radius: 12px; padding: 12px 18px; margin: 18px 0 0;
}
.examples-box summary {
  font-family: "Inter", sans-serif;
  font-weight: 600; cursor: pointer; color: var(--ink-soft);
}
.examples-box .examples { margin-top: 10px; }
.examples button.example {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px; padding: 8px 14px;
  font: inherit; font-style: italic; color: var(--ink-soft);
  cursor: pointer; text-align: left; margin-bottom: 4px;
}
.examples button.example:hover {
  background: var(--sand);
  border-color: var(--ocean); color: var(--ink);
}

/* helpers */
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* footer */
footer {
  border-top: 1px solid var(--hairline);
  padding: 22px clamp(16px, 4vw, 40px);
  font-size: 13px; color: var(--muted);
  background: var(--sand-deep); text-align: center;
}