/* =========================================================
   Krishivaas — Base styles, design tokens, typography
   ========================================================= */

@import url('../fonts/fonts.css');

:root{
  /* Brand palette (extracted from the original site's design tokens) */
  --green-900:#0D1A14;
  --green-800:#0F5132;
  --green-700:#0f5c35;
  --green-600:#22A07A;
  --mint:#4CC9A0;
  --mint-bright:#49d8c1;
  --teal-light:#55e3c0;
  --dark-900:#0D1A14;
  --dark-800:#1C2526;
  --dark-750:#1a2324;
  --ink:#000000;
  --text-body:#5A6A6E;
  --text-muted:#5e6b78;
  --bg-cream:#F5F2EE;
  --bg-mint-tint:#F2FAF5;
  --bg-faint-green:#0F513205;
  --bg-soft:#FAF9F6;
  --white:#FFFFFF;
  --border-soft:#e8e8e8;

  --blue-accent:#3f8cff;
  --orange-accent:#d58b18;
  --purple-accent:#b05cff;

  --font-heading:'Sora', sans-serif;
  --font-body:'Roboto', sans-serif;
  --font-label:'Roboto Slab', serif;
  --font-accent:'Lora', Georgia, serif;

  --container:1140px;
  --container-wide:1300px;
  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:12px;

  --shadow-soft:0 5px 25px rgba(0,0,0,.05);
  --shadow-card:0 15px 40px rgba(0,0,0,.12);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }

h1,h2,h3,h4,h5{
  font-family:var(--font-heading);
  color:var(--ink);
  margin:0;
  line-height:1.15;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.container-wide{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:0 24px;
}

section{ position:relative; }

/* Section color variants (mirrors alternating dark/light sections in the original) */
.sec-dark{ background:var(--dark-800); color:rgba(255,255,255,.75); }
.sec-darker{ background:var(--dark-900); color:rgba(255,255,255,.75); }
.sec-light{ background:var(--bg-cream); }
.sec-mint{ background:var(--bg-mint-tint); }
.sec-white{ background:var(--white); }
.sec-faint{ background:var(--bg-faint-green); }

.pad-lg{ padding:88px 0; }
.pad-md{ padding:65px 0; }
.pad-sm{ padding:40px 0; }

@media (max-width:900px){
  .pad-lg{ padding:60px 0; }
  .pad-md{ padding:48px 0; }
}

/* ---- Eyebrow / label ---- */
.eyebrow{
  display:block;
  font-family:var(--font-label);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:14px;
}
.sec-light .eyebrow, .sec-mint .eyebrow, .sec-white .eyebrow, .sec-faint .eyebrow{
  color:var(--green-600);
}

/* ---- Heading with italic accent (mirrors <em> styling across the site) ---- */
.heading-xl{
  font-family:var(--font-heading);
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  color:var(--ink);
}
.sec-dark .heading-xl, .sec-darker .heading-xl{ color:var(--white); }

.heading-xl em, h2 em, h1 em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  color:var(--green-800);
}
.sec-dark .heading-xl em, .sec-darker .heading-xl em{ color:var(--mint); }

.lede{
  font-size:17px;
  line-height:1.8;
  color:var(--text-body);
  max-width:640px;
}
.sec-dark .lede, .sec-darker .lede{ color:rgba(255,255,255,.68); }

.section-head{
  max-width:720px;
  margin:0 0 48px;
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ---- Buttons / pills ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  border-radius:18px;
  font-family:var(--font-label);
  font-weight:700;
  font-size:14px;
  letter-spacing:.3px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:var(--white);
  color:var(--green-800);
}
.btn-primary:hover{ box-shadow:0 12px 30px rgba(0,0,0,.18); }

.btn-solid{
  background:var(--green-800);
  color:var(--white);
}
.btn-solid:hover{ background:var(--green-700); box-shadow:0 12px 30px rgba(15,81,50,.28); }

.btn-secondary{
  color:var(--white);
  border-color:rgba(255,255,255,.4);
  background:transparent;
}
.btn-secondary:hover{ background:rgba(255,255,255,.08); }

.btn-outline-dark{
  color:var(--green-800);
  border-color:rgba(15,81,50,.3);
  background:transparent;
}
.btn-outline-dark:hover{ background:rgba(15,81,50,.06); }

.btn-sm{
  padding:11px 20px;
  border-radius:16px 16px 16px 0;
  font-size:11px;
  background:var(--white);
  color:var(--green-800);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.pill-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  border-radius:50px;
  border:1px solid rgba(255,255,255,.3);
  color:var(--mint-bright);
  font-family:var(--font-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  margin-bottom:26px;
}
.pill-tag-soft{
  background:rgba(76,201,160,.12);
  border-color:transparent;
  color:var(--mint);
}

/* ---- Scroll reveal (JS toggles .is-visible) ---- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-stagger.is-visible > *{ transition-delay:calc(var(--i,0) * 80ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---- Utility grids ---- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }

@media (max-width:1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:1fr; }
}

.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }