/* =============================================================
   VEDATRICKS v2 — Design System Base
   Ported from domains/ module. Manrope, green accent, white bg.
   ============================================================= */

:root {
  /* Palette */
  --bg:      #ffffff;
  --bg-off:  #f6f6f6;
  --bg-soft: #fafafa;
  --ink:     #1a1a1a;
  --ink-2:   #3a3a3a;
  --ink-3:   #6b6b6b;
  --ink-4:   #9a9a9a;
  --line:    #ebebeb;
  --line-2:  #f0f0f0;

  /* Signature green */
  --g:       #7BC142;
  --g-hover: #6aaf35;
  --g-dark:  #4d8a1f;
  --g-soft:  #e8f5da;

  /* Hero warm */
  --warm-1:  #2a1608;
  --warm-2:  #4e2b14;
  --warm-3:  #7a4a24;
  --warm-4:  #a26a38;
  --warm-hi: #d89b5a;

  /* Product card tints */
  --olive:     #d7e0b2;
  --olive-ink: #3a4318;
  --blue:      #0f3a52;
  --blue-ink:  #ffffff;
  --green:     #1f4a2b;
  --green-ink: #ffffff;
  --slate:     #2a2f3a;
  --slate-ink: #ffffff;

  /* Accent */
  --wa:      #25D366;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --info:    #3b82f6;

  /* Font */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --max:    1280px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Radius */
  --r-xs:   10px;
  --r-sm:   14px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-pill: 9999px;

  /* Shadow */
  --sh-1:    0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --sh-2:    0 4px 12px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --sh-3:    0 12px 40px rgba(0,0,0,.10);
  --sh-hero: 0 24px 80px rgba(40,20,8,.28);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.15s;
  --t-normal: 0.25s;
  --t-slow: 0.4s;
}

/* =============================================================
   RESET
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
*::selection { background: var(--g); color: var(--ink); }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  min-width: 320px;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.15; }
p { margin: 0; }
address { font-style: normal; }
fieldset { border: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; }

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 2px;
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 14px;
}
.skip-link:focus { top: 16px; }

/* =============================================================
   TYPOGRAPHY
   ============================================================= */

.t-hero {
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.t-h1 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.t-h2 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.t-h3 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.t-h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.t-body { font-size: 16px; font-weight: 500; line-height: 1.6; }
.t-body-lg { font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 1.6; }
.t-small { font-size: 14px; line-height: 1.5; }
.t-xs { font-size: 12px; line-height: 1.4; }
.t-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* Signature green dot */
.dot { color: var(--g); display: inline-block; }

/* =============================================================
   LAYOUT UTILITIES
   ============================================================= */

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(48px, 8vw, 96px) 0;
}

.section-head {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.section-sub {
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--ink-3);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Flex/Grid helpers */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* Text */
.text-center { text-align: center; }
.text-muted { color: var(--ink-3); }
.text-green { color: var(--g-dark); }
.text-white { color: #fff; }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================
   ANIMATIONS
   ============================================================= */

@keyframes heroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(123,193,66,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(123,193,66,0); }
  100% { box-shadow: 0 0 0 0 rgba(123,193,66,0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }