/* Kalbeja brand site — single shared stylesheet
   Brand: teal #00897B, warm white #FFFBF5, body #424242, accent #E65100
   Mobile-first; one media query at 720px lifts to 2-col layouts. */

:root {
  --teal: #00897B;
  --teal-dark: #00695C;
  --teal-bg: #E0F2F1;
  --warm-white: #FFFBF5;
  --card: #FFFFFF;
  --text: #212121;
  --text-soft: #616161;
  --border: #E0D8D0;
  --accent: #E65100;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img { max-width: 100%; height: auto; display: block; }

.container {
  /* Wide fluid container: scales with the viewport up to 1700px so the
     page actually fills modern wide displays instead of leaving big
     cream gutters either side. Side padding stays generous on giant
     screens via the max() so text never hugs the viewport edge. */
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 max(24px, 4vw);
}

/* ── Top nav ─────────────────────────────────────────── */
.topnav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topnav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--text);
  font-size: 18px;
}
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.topnav nav a {
  margin-left: 18px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
}
.topnav nav a:hover { color: var(--teal); text-decoration: none; }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  padding: 56px 0 48px;
  text-align: center;
}
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero-visual { flex: 0 0 auto; }
.hero-text { flex: 1 1 0; min-width: 0; }
.hero img.logo {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  margin: 0 auto 16px;
}
.hero h1 {
  font-size: 36px;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.5px;
}
.hero .tagline {
  font-size: 20px;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 12px;
}
.hero .subtitle {
  font-size: 16px;
  color: var(--text-soft);
  max-width: 560px;
  margin: 0 auto 28px;
}
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: var(--card);
  padding: 14px 22px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--teal-dark); text-decoration: none; }
.btn--outline {
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--teal);
}
.btn--outline:hover { background: var(--teal-bg); color: var(--teal-dark); }
.hero .free-note {
  font-size: 13px;
  color: var(--text-soft);
  font-style: italic;
  margin: 0;
}

/* ── Signup modal ────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  overflow-y: auto;
}
.modal-overlay[aria-hidden="false"] { display: flex; }
.modal {
  background: var(--card);
  border-radius: 16px;
  padding: 32px 28px 28px;
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-soft);
}
.modal-close:hover { background: var(--warm-white); color: var(--text); }
.modal h2 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--text);
}
.modal-lead {
  margin: 0 0 22px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.5;
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  font-weight: 600;
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-bg);
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 22px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--teal);
  cursor: pointer;
}
.consent strong { color: var(--text); font-weight: 600; }
.consent a { color: var(--teal); }
.modal-submit { width: 100%; justify-content: center; }
.modal-submit:disabled { opacity: 0.6; cursor: progress; }

/* Inline error message inside the modal form. */
.form-error {
  background: #FEEAEA;
  color: #B71C1C;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
  border: 1px solid #F5C2C2;
}

/* Success state shown inside the modal after AJAX submit. */
.modal-thanks { text-align: center; padding: 4px 0 4px; }
.modal-thanks-icon {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: var(--teal-bg);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  margin: 0 auto 16px;
}
.modal-thanks h2 { margin: 0 0 12px; font-size: 24px; color: var(--text); }
.modal-thanks p {
  margin: 0 0 22px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}
.modal-thanks .btn { width: 100%; justify-content: center; }

/* ── Thanks page (aciu.html) ─────────────────────────── */
.thanks {
  padding: 80px 0 96px;
  text-align: center;
}
.thanks-logo {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  margin: 0 auto 24px;
}
.thanks-title {
  font-size: 44px;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: -0.5px;
}
.thanks-tagline {
  font-size: 20px;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 20px;
}
.thanks-body {
  font-size: 16px;
  color: var(--text-soft);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.thanks-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ── Generic section ─────────────────────────────────── */
.section {
  padding: 64px 0;
}
/* Alternating section backgrounds give the page visual rhythm on wide
   screens. Default section is the warm cream page background; every
   other section gets a soft white panel that spans the full viewport
   width while content stays bounded by `.container`. */
.section--alt {
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section h2 {
  font-size: 28px;
  text-align: center;
  margin: 0 0 12px;
  color: var(--text);
}
.section .lead {
  text-align: center;
  color: var(--text-soft);
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: 16px;
}

/* ── Features grid ──────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px;
}
.feature .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--teal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 12px;
}
.feature h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}
.feature p {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Illustrated variant — used by the "Kodėl Kalbeja?" section. No card
   frame, no background — just a centered watercolor (about half the
   card width) above centered title + description. The illustration
   carries the visual weight; framing it would compete with it. The
   other .features grid (6-card "Ką siūlo Kalbeja?") keeps its framed
   emoji-icon cards untouched. */
.features--illustrated .feature {
  padding: 0;
  background: transparent;
  border: 0;
  text-align: center;
}
.feature-img {
  display: block;
  width: 55%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto 20px;
  border-radius: 16px;
}
.feature-body h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.feature-body p {
  margin: 0 auto;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 320px;
}

@media (min-width: 1280px) {
  .feature-img { max-width: 240px; }
  .feature-body h3 { font-size: 19px; }
  .feature-body p { font-size: 15px; max-width: 340px; }
}

/* ── Secondary feature chips (under "Ką siūlo Kalbeja?") ── */
.features-extra-intro {
  text-align: center;
  margin: 40px 0 18px;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 600;
}
.features-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
}
.chip {
  background: var(--teal-bg);
  color: var(--teal-dark);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── How it works ───────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step .num {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--teal-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}
.step h3 {
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--text);
}
.step p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
}

/* ── Screenshots ────────────────────────────────────── */
.screenshots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.screenshots img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}

/* Temporary placeholder — replace with .screenshots grid once real
   screenshots are captured. The dashed border signals "in progress"
   rather than permanent design. */
.screenshots-placeholder {
  background: var(--teal-bg);
  border: 2px dashed rgba(0, 137, 123, 0.3);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.placeholder-icon { font-size: 48px; margin-bottom: 14px; }
.screenshots-placeholder h3 {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 20px;
}
.screenshots-placeholder p {
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 15px;
  max-width: 480px;
  line-height: 1.55;
}

/* ── Trust ──────────────────────────────────────────── */
.trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.trust-card {
  background: var(--teal-bg);
  border-radius: 16px;
  padding: 22px 20px;
  border-left: 4px solid var(--teal);
}
.trust-card h3 {
  margin: 0 0 6px;
  color: var(--teal-dark);
  font-size: 16px;
}
.trust-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

/* ── Team ───────────────────────────────────────────── */
.team {
  display: grid;
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
  gap: 24px;
}
.member {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
}
.member .avatar {
  width: 140px;
  height: 140px;
  border-radius: 70px;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 4px solid var(--teal-bg);
  background: var(--teal-bg);
}
.member .name {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--text);
}
.member .role {
  font-size: 14px;
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.member .bio {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0 0 16px;
  text-align: left;
}
.member .achievements {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.member .achievements li {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}
.member .achievements li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 700;
}

/* ── Roadmap ────────────────────────────────────────── */
.roadmap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.phase {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px;
}
.phase-when {
  display: inline-block;
  background: var(--teal-bg);
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.phase h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--text);
}
.phase p {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* ── FAQ ────────────────────────────────────────────── */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-item[open] { border-color: var(--teal); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
  list-style: none;
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: var(--teal);
  font-weight: 300;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item summary:hover { background: var(--warm-white); }
.faq-item p {
  margin: 0;
  padding: 0 22px 18px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

@media (min-width: 720px) {
  .faq-item summary { font-size: 17px; padding: 20px 60px 20px 24px; }
  .faq-item p { padding: 0 24px 20px; font-size: 15.5px; }
}

/* ── Cookie consent banner ──────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 14px 0;
  z-index: 90;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  display: none;
}
.cookie-banner[aria-hidden="false"] { display: block; }
.cookie-banner-content {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-banner p {
  margin: 0;
  font-size: 14px;
  color: var(--text-soft);
  flex: 1 1 280px;
  line-height: 1.5;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-banner .btn {
  padding: 11px 20px;
  font-size: 14px;
}
.btn--ghost {
  background: transparent;
  color: var(--text-soft);
  border: 2px solid var(--border);
}
.btn--ghost:hover {
  background: var(--warm-white);
  color: var(--text);
  border-color: var(--text-soft);
}

/* ── Footer ─────────────────────────────────────────── */
.footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 32px 0 24px;
  margin-top: 48px;
  font-size: 14px;
  color: var(--text-soft);
}
.footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}
.footer .links a { margin-right: 16px; }
.footer .disclaimer {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
}

/* ── Privacy policy specific ────────────────────────── */
.policy {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  margin: 32px 0;
}
.policy .meta {
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.policy h2 {
  font-size: 18px;
  color: var(--teal-dark);
  margin: 32px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.policy h2:first-of-type { border-top: 0; padding-top: 0; }
.policy h3 {
  font-size: 15px;
  color: var(--text);
  margin: 16px 0 6px;
}
.policy p { margin: 8px 0; line-height: 1.65; }
.policy ul { padding-left: 22px; margin: 8px 0; }
.policy li { margin: 6px 0; line-height: 1.6; }
.policy table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.policy th, .policy td {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.policy th {
  background: var(--teal-bg);
  font-weight: 700;
  color: var(--teal-dark);
}
.policy .toc {
  background: var(--warm-white);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14px;
  margin: 0 0 28px;
}
.policy .toc strong { color: var(--text); }
.policy .toc ol { margin: 8px 0 0; padding-left: 22px; }
.policy .back {
  font-size: 14px;
  margin-bottom: 12px;
}

/* ── Responsive: 2-col layouts on wider screens ─────── */
@media (min-width: 720px) {
  .hero { padding: 80px 0 64px; }
  .hero h1 { font-size: 44px; }
  .features { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .screenshots { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .trust { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .roadmap { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .team {
    /* auto-fit means: 1 member centers nicely, 2 members form a row.
       No HTML/CSS change needed when the second member is added. */
    grid-template-columns: repeat(auto-fit, minmax(360px, 480px));
    gap: 28px;
  }
  .step { flex-direction: column; }
  .step .num { margin-bottom: 6px; }

  /* Bigger card padding on wide screens — small cards in a wide grid
     look spindly. */
  .feature { padding: 28px 26px; }
  .trust-card { padding: 28px 26px; }
}

@media (min-width: 1280px) {
  /* Very wide screens: let the rhythm of the page expand. Bigger gaps,
     larger card content so sections don't look like little islands. */
  .features { gap: 32px; }
  .steps { gap: 48px; }
  .trust { gap: 32px; }
  .roadmap { gap: 24px; }
  .phase { padding: 28px 26px; }
  .phase h3 { font-size: 19px; }
  .phase p { font-size: 15px; }
  .feature { padding: 32px 30px; }
  .feature h3 { font-size: 19px; }
  .feature p { font-size: 15px; }
  .trust-card { padding: 32px 30px; }
  .trust-card h3 { font-size: 18px; }
  .trust-card p { font-size: 15px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 16px; }
  .section { padding: 88px 0; }
  .section h2 { font-size: 32px; }
}

@media (min-width: 960px) {
  /* Hero spreads to the edges of the wide container: logo pinned far
     left, text block pinned far right, flexible gap in between. Uses
     space-between rather than `center + gap` so the two blocks expand
     to use whatever width the viewport gives. */
  .hero { padding: 96px 0 88px; text-align: left; }
  .hero-grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
  }
  .hero img.logo {
    width: 260px;
    height: 260px;
    border-radius: 52px;
    margin: 0;
  }
  .hero-text { max-width: 720px; }
  .hero h1 { font-size: 56px; margin-bottom: 12px; }
  .hero .tagline { font-size: 22px; margin-bottom: 16px; }
  .hero .subtitle { margin-left: 0; margin-right: 0; max-width: 640px; }
  .hero .cta-row { justify-content: flex-start; }
  .hero-text .reminder-form {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
  .hero-text .free-note { text-align: left; }
}

@media (min-width: 1400px) {
  /* On really wide screens, push the hero further: bigger logo, bigger
     heading. Lead paragraphs stay readable because they have their own
     max-widths — we only let visually anchoring elements grow. */
  .hero { padding: 120px 0 104px; }
  .hero img.logo { width: 320px; height: 320px; border-radius: 64px; }
  .hero h1 { font-size: 68px; }
  .hero .tagline { font-size: 24px; }
}