/* ===== Werlog shared theme — matches the mobile app (green / teal) ===== */
:root {
  --wl-ink:        #0E3D2E;   /* dark forest header cards / headings   */
  --wl-ink-2:      #123F31;
  --wl-green:      #1E9E6A;   /* primary action green                  */
  --wl-green-dark: #178055;
  --wl-mint:       #17B890;   /* bright accent                         */
  --wl-mint-soft:  #D8EFE2;   /* chip / soft fill                      */
  --wl-bg:         #EAF4EE;   /* app mint background                   */
  --wl-bg-2:       #F4FAF6;
  --wl-muted:      #5E7268;
  --wl-line:       #DCEAE2;
}

* { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
body { color: var(--wl-ink); background: #fff; }

.text-green { color: var(--wl-green) !important; }
.bg-mint { background: var(--wl-bg) !important; }
.bg-mint-2 { background: var(--wl-bg-2) !important; }
.bg-ink { background: var(--wl-ink) !important; }

a { text-decoration: none; }

/* ---- Buttons ---- */
.btn-wl {
  background: var(--wl-green); border: none; color: #fff; font-weight: 600;
  border-radius: 14px; padding: .7rem 1.5rem;
}
.btn-wl:hover { background: var(--wl-green-dark); color: #fff; }
.btn-wl-ink { background: var(--wl-ink); border: none; color: #fff; font-weight: 600; border-radius: 14px; padding: .7rem 1.5rem; }
.btn-wl-ink:hover { background: #0a2c21; color: #fff; }
.btn-wl-outline {
  background: #fff; border: 1.5px solid var(--wl-green); color: var(--wl-green);
  font-weight: 600; border-radius: 14px; padding: .7rem 1.5rem;
}
.btn-wl-outline:hover { background: var(--wl-green); color: #fff; }
.btn-wl-soft {
  background: var(--wl-mint-soft); border: none; color: var(--wl-green-dark);
  font-weight: 600; border-radius: 14px; padding: .7rem 1.5rem;
}
.btn-wl-soft:hover { background: #c7e7d6; color: var(--wl-green-dark); }

/* ---- Nav ---- */
.navbar { background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(10px); }
.navbar-brand { font-weight: 800; font-size: 1.4rem; letter-spacing: -.5px; color: var(--wl-ink) !important; }
.navbar-brand .dot { color: var(--wl-green); }
.nav-link { font-weight: 500; color: var(--wl-ink); }
.nav-link:hover, .nav-link.active { color: var(--wl-green); }

/* ---- Eyebrow chip ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--wl-mint-soft); color: var(--wl-green-dark);
  font-weight: 600; font-size: .82rem; padding: .4rem .9rem; border-radius: 100px;
}

/* ---- Hero ---- */
.hero { background: radial-gradient(1100px 460px at 82% -8%, var(--wl-mint-soft), transparent), linear-gradient(180deg,#fff, var(--wl-bg)); }
.display-wl { font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; font-size: clamp(2.1rem,5vw,3.5rem); }

/* ---- Cards ---- */
.card-wl { background:#fff; border:1px solid var(--wl-line); border-radius:20px; padding:1.75rem; height:100%; transition:transform .18s, box-shadow .18s; }
.card-wl:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -26px rgba(14,61,46,.35); }
.ico-wl { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--wl-mint-soft); color:var(--wl-green-dark); font-size:1.55rem; margin-bottom:1rem; }

/* ---- Page header band ---- */
.page-band { background: linear-gradient(180deg, var(--wl-bg), #fff); }

/* ---- Ink panel (dark teal card like the app's tax card) ---- */
.ink-panel { background: var(--wl-ink); color:#fff; border-radius:24px; }
.ink-panel .chip { background: rgba(255,255,255,.12); color:#CFEADB; }

/* ---- Steps ---- */
.step-num { width:46px; height:46px; border-radius:50%; background:var(--wl-green); color:#fff; display:grid; place-items:center; font-weight:700; }

/* ---- Pricing ---- */
.price-card { border:1px solid var(--wl-line); border-radius:22px; padding:2rem; background:#fff; height:100%; }
.price-card.popular { border:2px solid var(--wl-green); box-shadow:0 30px 60px -30px rgba(30,158,106,.4); position:relative; }
.price-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--wl-green); color:#fff; font-size:.78rem; font-weight:600; padding:.3rem .9rem; border-radius:100px; }
.price-amt { font-size:2.6rem; font-weight:800; letter-spacing:-1px; color:var(--wl-ink); }

/* ---- Flags / stats ---- */
.flag-pill { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--wl-line); border-radius:100px; padding:.4rem .9rem; font-weight:600; font-size:.9rem; }
.stat-num { font-size:2.4rem; font-weight:800; color:var(--wl-green); letter-spacing:-1px; }

/* ---- Accordion ---- */
.accordion-button:not(.collapsed){ background:var(--wl-mint-soft); color:var(--wl-green-dark); font-weight:600; }
.accordion-button:focus{ box-shadow:none; }
.accordion-item{ border:1px solid var(--wl-line); border-radius:14px !important; margin-bottom:.75rem; overflow:hidden; }

/* ---- Forms ---- */
.form-control, .form-select { border-radius:12px; border:1px solid var(--wl-line); padding:.7rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--wl-green); box-shadow: 0 0 0 .2rem rgba(30,158,106,.15); }
.form-label { font-weight:600; font-size:.8rem; letter-spacing:.03em; text-transform:uppercase; color:var(--wl-muted); }

/* ---- Footer ---- */
footer { background: var(--wl-ink); color:#BFD8CC; }
footer a { color:#BFD8CC; }
footer a:hover { color:#fff; }

/* ---- CTA band ---- */
.cta-band { background: linear-gradient(120deg, var(--wl-ink), #14523C); border-radius:28px; }

/* ---- Contact info tiles ---- */
.contact-tile { border:1px solid var(--wl-line); border-radius:18px; padding:1.5rem; background:#fff; height:100%; }
.contact-tile .ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--wl-mint-soft); color:var(--wl-green-dark); font-size:1.3rem; }

section { scroll-margin-top: 84px; }