/* ===========================================================
   ElimuVate — Brand Foundation
   Elevate Education
   Design tokens, typography, buttons, cards, form controls.
   Scoped to .ev-brand wrapper so it never collides with the
   existing Tailwind-based product UI.
   =========================================================== */

.ev-brand {
  /* Brand green scale */
  --green-50:#ECFDF5;
  --green-100:#D1FAE5;
  --green-200:#A7F3D0;
  --green-300:#6EE7B7;
  --green-400:#34D399;
  --green-500:#10B981;
  --green-600:#059669;
  --green-700:#047857;
  --green-800:#065F46;
  --green-900:#064E3B;
  --green-950:#052E22;

  /* Brand semantic */
  --brand:#0E9E6A;
  --brand-strong:#047857;
  --forest:#06231C;
  --forest-2:#0A2C22;
  --ink:#0C1F18;

  /* Warm accent (joy / energy) */
  --amber-300:#FCD34D;
  --amber-400:#FBBF24;
  --amber-500:#F59E0B;
  --lime:#C7F25B;

  /* Neutrals (warm green-gray) */
  --paper:#F5F8F6;
  --surface:#FFFFFF;
  --surface-2:#FAFCFB;
  --line:#E4EBE7;
  --line-strong:#D3DDD8;
  --text:#1B2A24;
  --muted:#5E6F68;
  --muted-2:#849089;

  /* Type */
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-sans:'Plus Jakarta Sans', system-ui, sans-serif;

  /* Radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(12,31,24,.06);
  --shadow-sm:0 2px 8px rgba(12,31,24,.06);
  --shadow-md:0 10px 30px -10px rgba(12,31,24,.16);
  --shadow-lg:0 30px 60px -22px rgba(6,35,28,.30);
  --shadow-brand:0 18px 40px -14px rgba(5,150,105,.45);

  /* Layout */
  --container:1200px;

  font-family:var(--font-sans);
  color:var(--text);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.ev-brand *,.ev-brand *::before,.ev-brand *::after { box-sizing:border-box; }

.ev-brand h1,.ev-brand h2,.ev-brand h3,.ev-brand h4,.ev-brand h5 {
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.02em;
  margin:0;
  text-wrap:balance;
}

.ev-brand p { margin:0; text-wrap:pretty; }
.ev-brand a { color:inherit; text-decoration:none; }
.ev-brand img { max-width:100%; display:block; }
.ev-brand button { font-family:inherit; cursor:pointer; }

/* ---------- Layout helpers ---------- */
.ev-brand .container {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
.ev-brand .section { padding-block:96px; }

/* ---------- Eyebrow / badges ---------- */
.ev-brand .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-700);
}
.ev-brand .eyebrow::before {
  content:"";
  width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--green-500),var(--amber-400));
}
.ev-brand .pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 12px;
  border-radius:var(--r-pill);
  background:var(--green-50);
  border:1px solid var(--green-200);
  color:var(--green-800);
  font-weight:600; font-size:13px;
}
.ev-brand .pill .dot { width:7px;height:7px;border-radius:50%;background:var(--green-500); box-shadow:0 0 0 4px rgba(16,185,129,.18); }

/* ---------- Buttons ---------- */
.ev-brand .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans);
  font-weight:700; font-size:15.5px;
  padding:14px 22px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.ev-brand .btn svg { width:18px;height:18px; }
.ev-brand .btn-primary {
  background:linear-gradient(180deg,var(--green-500),var(--green-600));
  color:#fff;
  box-shadow:var(--shadow-brand);
}
.ev-brand .btn-primary:hover { transform:translateY(-2px); box-shadow:0 24px 48px -14px rgba(5,150,105,.55); }
.ev-brand .btn-dark { background:var(--forest); color:#fff; }
.ev-brand .btn-dark:hover { transform:translateY(-2px); background:#0a3225; }
.ev-brand .btn-ghost {
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-xs);
}
.ev-brand .btn-ghost:hover { transform:translateY(-2px); border-color:var(--green-300); box-shadow:var(--shadow-sm); }
.ev-brand .btn-amber { background:var(--amber-400); color:#3a2606; }
.ev-brand .btn-amber:hover { transform:translateY(-2px); background:var(--amber-300); }
.ev-brand .btn-block { width:100%; }
.ev-brand .btn-lg { padding:17px 28px; font-size:16.5px; }

/* ---------- Cards ---------- */
.ev-brand .card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}

/* ---------- Inputs ---------- */
.ev-brand .field { display:flex; flex-direction:column; gap:7px; position:relative; }
.ev-brand .field label { font-weight:600; font-size:14px; color:var(--ink); }
.ev-brand .input, .ev-brand .select, .ev-brand textarea.input {
  font-family:var(--font-sans);
  font-size:15.5px;
  color:var(--text);
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:13px 15px;
  width:100%;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s;
}
.ev-brand .input::placeholder, .ev-brand textarea.input::placeholder { color:var(--muted-2); }
.ev-brand .input:focus, .ev-brand .select:focus, .ev-brand textarea.input:focus {
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(16,185,129,.16);
}
.ev-brand .field.invalid .input { border-color:#E5564B; box-shadow:0 0 0 4px rgba(229,86,75,.14); }
.ev-brand .field .err { color:#C8392E; font-size:13px; font-weight:600; min-height:0; display:none; }
.ev-brand .field.invalid .err { display:block; }

/* ---------- Logo wordmark ---------- */
.ev-brand .logo { display:inline-flex; align-items:center; gap:11px; }
.ev-brand .logo .mark { width:38px; height:38px; flex:none; }
.ev-brand .logo .wordmark {
  font-family:var(--font-display);
  font-weight:800;
  font-size:22px;
  letter-spacing:-0.025em;
  color:var(--ink);
  line-height:1;
}
.ev-brand .logo .wordmark .v { color:var(--green-600); }
.ev-brand .logo .tag {
  display:block;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:8.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-top:3px;
}
.ev-brand .logo--light .wordmark { color:#fff; }
.ev-brand .logo--light .wordmark .v { color:var(--green-300); }
.ev-brand .logo--light .tag { color:rgba(255,255,255,.55); }

/* ---------- Utility ---------- */
.ev-brand .text-grad {
  background:linear-gradient(120deg,var(--green-500),var(--green-700) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ev-brand .muted { color:var(--muted); }
.ev-brand .center { text-align:center; }

/* Scroll reveal — only hides when JS is confirmed on. */
.ev-brand.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.ev-brand.js .reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .ev-brand.js .reveal{ opacity:1; transform:none; }
  .ev-brand *{scroll-behavior:auto !important;}
}

/* ===========================================================
   Shared site chrome (nav + footer)
   =========================================================== */

.ev-brand .nav {
  position:sticky; top:0; z-index:50;
  background:rgba(245,248,246,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.ev-brand .nav.scrolled { border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(6,35,28,.4); }
.ev-brand .nav-inner {
  max-width:var(--container); margin-inline:auto;
  padding:14px 24px;
  display:flex; align-items:center; gap:24px;
}
.ev-brand .nav-links { display:flex; align-items:center; gap:6px; margin-inline:auto; }
.ev-brand .nav-links a {
  padding:9px 15px; border-radius:var(--r-pill);
  font-weight:600; font-size:15px; color:var(--text);
  transition:background .18s ease, color .18s ease;
  cursor:pointer;
}
.ev-brand .nav-links a:hover { background:var(--green-50); color:var(--green-800); }
.ev-brand .nav-cta { display:flex; align-items:center; gap:12px; }
.ev-brand .nav-cta .signin { font-weight:700; font-size:15px; padding:10px 8px; color:var(--ink); white-space:nowrap; cursor:pointer; }
.ev-brand .nav-cta .signin:hover { color:var(--green-700); }
.ev-brand .nav-burger {
  display:none; background:var(--surface); border:1px solid var(--line-strong);
  width:44px;height:44px;border-radius:12px; align-items:center; justify-content:center;
}
.ev-brand .nav-burger svg { width:22px;height:22px; stroke:var(--ink); }

.ev-brand .mobile-menu {
  display:none;
  position:fixed; inset:0; z-index:60;
  background:rgba(6,35,28,.4); backdrop-filter:blur(4px);
}
.ev-brand .mobile-menu.open { display:block; }
.ev-brand .mobile-panel {
  position:absolute; top:14px; right:14px; left:14px;
  background:var(--surface); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:6px;
}
.ev-brand .mobile-panel .mhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ev-brand .mobile-panel a.mlink { padding:14px 12px; border-radius:12px; font-weight:600; font-size:17px; cursor:pointer; }
.ev-brand .mobile-panel a.mlink:hover { background:var(--green-50); }
.ev-brand .mobile-panel .mclose { background:var(--paper); border:1px solid var(--line); width:42px;height:42px;border-radius:12px; display:flex;align-items:center;justify-content:center; }
.ev-brand .mobile-panel .mclose svg { width:20px;height:20px;stroke:var(--ink); }

@media (max-width:880px){
  .ev-brand .nav-links { display:none; }
  .ev-brand .nav-cta .signin, .ev-brand .nav-cta .btn:not(.book) { display:none; }
  .ev-brand .nav-burger { display:flex; }
  .ev-brand .nav-inner { gap:14px; }
  .ev-brand .logo .tag { display:none; }
}

.ev-brand .footer {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--forest),#041a14);
  color:rgba(255,255,255,.7);
  padding:72px 0 36px;
}
.ev-brand .footer::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 300px at 12% 0%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(600px 260px at 92% 8%, rgba(251,191,36,.10), transparent 60%);
  pointer-events:none;
}
.ev-brand .footer .container { position:relative; }
.ev-brand .footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.ev-brand .footer .blurb { color:rgba(255,255,255,.6); font-size:14.5px; margin-top:16px; max-width:280px; }
.ev-brand .footer h4 { color:#fff; font-family:var(--font-sans); font-weight:700; font-size:14px; letter-spacing:.04em; margin-bottom:16px; }
.ev-brand .footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ev-brand .footer ul a { color:rgba(255,255,255,.62); font-size:14.5px; transition:color .15s; cursor:pointer; }
.ev-brand .footer ul a:hover { color:var(--green-300); }
.ev-brand .footer-social { display:flex; gap:10px; margin-top:20px; }
.ev-brand .footer-social a { width:40px;height:40px;border-radius:11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); display:flex;align-items:center;justify-content:center; transition:background .18s, transform .18s; cursor:pointer; }
.ev-brand .footer-social a:hover { background:rgba(16,185,129,.22); transform:translateY(-2px); }
.ev-brand .footer-social svg { width:18px;height:18px;fill:#fff; }
.ev-brand .footer-bottom {
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:13.5px; color:rgba(255,255,255,.5);
}
.ev-brand .footer-bottom .legal { display:flex; gap:22px; }
.ev-brand .footer-bottom .legal a:hover { color:#fff; cursor:pointer; }
@media (max-width:760px){
  .ev-brand .footer-top { grid-template-columns:1fr 1fr; gap:30px; }
  .ev-brand .footer-bottom { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:460px){ .ev-brand .footer-top { grid-template-columns:1fr; } }