/* ============================================================================
   KOVAI PREMIUM — shared design system (PLATFORM-PLAN.md, phase 1)
   One CSS file, zero build step. Include AFTER the page's own <style> so these
   classes are available without overriding existing page styles.
   Per-site accent: set --kp-primary / --kp-accent on :root in the page if needed.
   Defaults below are KovaiKadai (green + amber).
   ========================================================================== */
:root{
  --kp-primary:#166534;         /* deep green (KovaiKadai) */
  --kp-primary-strong:#0b1f16;
  --kp-accent:#f59e0b;          /* energetic amber */
  --kp-accent-strong:#d97706;
  --kp-paper:#F8F5F2;           /* warm off-white */
  --kp-ink:#1c2520;
  --kp-soft:#5b6b62;
  --kp-line:#e4ece6;
  --kp-gold:#D4AF88;
  --kp-r-sm:12px; --kp-r-md:16px; --kp-r-lg:24px;
  --kp-shadow-1:0 1px 2px rgba(11,31,22,.06),0 4px 16px rgba(11,31,22,.08);
  --kp-shadow-2:0 4px 12px rgba(11,31,22,.10),0 12px 32px rgba(11,31,22,.12);
}
@media (prefers-reduced-motion: reduce){
  .kp-btn,.kp-card,.kp-reveal{transition:none!important;animation:none!important}
}

/* ---- Buttons: 48px targets, lift + glow, loading, focus ------------------- */
.kp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border:none;border-radius:var(--kp-r-md);
  font:700 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  cursor:pointer;text-decoration:none;
  background:linear-gradient(135deg,var(--kp-primary),#16a34a);color:#fff;
  box-shadow:var(--kp-shadow-1);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.kp-btn:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--kp-shadow-2);filter:brightness(1.05)}
.kp-btn:active{transform:scale(.98)}
.kp-btn:focus-visible{outline:3px solid var(--kp-accent);outline-offset:2px}
.kp-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.kp-btn--accent{background:linear-gradient(135deg,var(--kp-accent),var(--kp-accent-strong))}
.kp-btn--ghost{background:#fff;color:var(--kp-primary);border:1.5px solid var(--kp-line);box-shadow:none}
.kp-btn--ghost:hover{border-color:var(--kp-primary)}
.kp-btn--wa{background:linear-gradient(135deg,#16a34a,#128C7E)}
.kp-btn .kp-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:kp-rot .7s linear infinite}
@keyframes kp-rot{to{transform:rotate(360deg)}}

/* ---- Cards ----------------------------------------------------------------- */
.kp-card{
  background:#fff;border:1px solid var(--kp-line);border-radius:var(--kp-r-md);
  box-shadow:var(--kp-shadow-1);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.kp-card:hover{transform:translateY(-3px);box-shadow:var(--kp-shadow-2);border-color:var(--kp-gold)}

/* ---- Trust bar -------------------------------------------------------------- */
.kp-trustbar{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--kp-line);border-radius:var(--kp-r-md);
  box-shadow:var(--kp-shadow-1);padding:12px 18px;
  font:600 13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--kp-ink);
}
.kp-trustbar span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.kp-trustbar b{color:var(--kp-primary)}

/* ---- WhatsApp floating action button ---------------------------------------- */
.kp-wa-fab{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;font-size:28px;text-decoration:none;
  box-shadow:0 6px 20px rgba(18,140,126,.45);
  transition:transform .15s ease,box-shadow .15s ease;
}
.kp-wa-fab:hover{transform:scale(1.08);box-shadow:0 10px 28px rgba(18,140,126,.55)}
.kp-wa-fab:focus-visible{outline:3px solid var(--kp-accent);outline-offset:2px}

/* ---- Skeleton loading -------------------------------------------------------- */
.kp-skeleton{
  background:linear-gradient(90deg,#eef2ee 25%,#f7faf7 50%,#eef2ee 75%);
  background-size:200% 100%;animation:kp-sheen 1.2s ease-in-out infinite;
  border-radius:var(--kp-r-sm);color:transparent!important;
}
@keyframes kp-sheen{to{background-position:-200% 0}}

/* ---- Scroll reveal (add .kp-reveal; JS below toggles .kp-in) ------------------ */
.kp-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.kp-reveal.kp-in{opacity:1;transform:none}

/* ---- Section rhythm ------------------------------------------------------------ */
.kp-eyebrow{font:800 11px/1 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--kp-accent-strong)}
.kp-kolam{height:3px;border-radius:2px;max-width:120px;
  background:repeating-linear-gradient(90deg,var(--kp-gold) 0 8px,transparent 8px 14px)}