/* ==========================================================================
   base.css - variables, reset, typography, buttons, shared helpers
   ========================================================================== */

:root {
  --green: #075E54;
  --green-dark: #128C7E;
  --text: #17202a;
  --muted: #667085;
  --border: #e7eaee;
  --bg: #f7f9fb;
  --soft: #effdf4;
  --lime: #25D366;
  --ink: #04201c;
  --bubble: #D9FDD3;
  --wall: #ECE5DD;
  --r: 18px;
  --grad: linear-gradient(135deg, #128C7E, #075E54);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px}

/* Layout helpers */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:90px 0}
.head{max-width:680px;margin-bottom:44px}
.head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800}
.head p{color:var(--muted);margin-top:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;font:600 .95rem 'Poppins',sans-serif;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-g{background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(7,94,84,.28)}
.btn-w{background:#fff;color:var(--text);border-color:var(--border)}
.btn-l{background:var(--lime);color:var(--ink)}
.btn-o{border-color:rgba(255,255,255,.35);color:#fff}

/* Small label above page titles */
.eyebrow{display:inline-block;background:#ecfdf3;border:1px solid #d1fadf;color:#087443;padding:5px 14px;border-radius:99px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px}

/* Scroll reveal (class "in" is added by main.js) */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}