/* ============ BASE / GLOBAL ============ */
:root {
  --background: #f5f8fb;
  --foreground: #12212e;
  --card: #ffffff;
  --card-foreground: #12212e;
  --primary: #0e76bc;
  --primary-foreground: #ffffff;
  --secondary: #8dc741;
  --secondary-foreground: #16210c;
  --danger : #dc3545;
  --success : #8dc741;
  --muted: #e6ebf0;
  --muted-foreground: #5b6b78;
  --accent: #ffbf2b;
  --accent-foreground: #2a2410;
  --border: #ced7de;
  --radius: 1rem;



  /* hero cinematic tones */
  --hero-deep: #062a45;
}

* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--primary); color: #fff; }

/* Fonts */
.font-display { font-family: "Cabinet Grotesk", ui-sans-serif, sans-serif; font-weight: 900; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Layout helpers */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .container { padding: 0 2rem; } }
.section { padding: 6rem 0; position: relative; }
@media (min-width: 640px) { .section { padding: 8rem 0; } }

/* Overline label */
.overline {
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.72rem;
  color: var(--primary);
  margin: 0 0 1rem;
}

/* Section heading */
.h2 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  margin: 0;
}

/* Organic clip shapes */
.clip-organic { border-radius: 4px 3rem 3rem 3rem; }
.clip-organic-alt { border-radius: 3rem 4px 3rem 3rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  border-radius: 999px; font-weight: 600; font-size: 1rem;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.btn-primary { background: var(--primary); color: #fff; padding: .75rem .75rem .75rem 1.75rem; }
.btn-primary:hover { background: var(--foreground); }
.btn-secondary-fill { background: var(--secondary); color: var(--secondary-foreground); padding: .75rem .75rem .75rem 1.75rem; }
.btn-secondary-fill:hover { background: #fff; color: var(--primary); }
.btn-outline { border: 2px solid var(--foreground); color: var(--foreground); padding: .75rem 1.5rem; }
.btn-outline:hover { background: var(--foreground); color: var(--background); }
.btn-icon {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 999px; background: var(--background); color: var(--foreground);
  transition: transform .3s ease;
}
.btn-primary:hover .btn-icon { transform: rotate(45deg); }

/* Grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lucide icon sizing default */
[data-lucide] { width: 20px; height: 20px; }

/* ============ SCROLL REVEAL (IntersectionObserver) ============ */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* ============ TOASTS ============ */
#toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 10000; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  min-width: 240px; max-width: 360px; padding: .85rem 1rem; border-radius: .75rem;
  color: #fff; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.2);
  transform: translateX(120%); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.toast.show { transform: translateX(0); }
.toast.success { background: #16a34a; }
.toast.error { background: #dc2626; }