/* ============================================================
   Groke Digital — Design System v2
   V2 canonical tokens + legacy aliases for zero-break migration.
   Every page imports this file first.
   ============================================================ */

:root {
  /* ── V2 Brand Colors ── */
  --primary:        #ff6b00;
  --primary-hover:  #e55f00;
  --primary-light:  #fff3ec;
  --primary-dark:   #cc5500;

  /* ── V2 Backgrounds ── */
  --bg-primary:   #f6f3ed;
  --bg-secondary: #ffffff;
  --bg-dark:      #0d0d0d;
  --bg-dark-2:    #141414;
  --bg-dark-3:    #1a1a1a;
  --bg-card:      #ffffff;

  /* ── V2 Text ── */
  --text-primary:       #0d0d0d;
  --text-secondary:     #4a4a4a;
  --text-muted:         #888888;
  --text-on-dark:       #ffffff;
  --text-on-dark-muted: #a0a0a0;

  /* ── V2 Borders ── */
  --border-light:  #e8e5df;
  --border-medium: #d0cdc7;
  --border-dark:   #2a2a2a;

  /* ── V2 Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── V2 Section Spacing ── */
  --section-padding:    96px;
  --section-padding-sm: 64px;
  --section-padding-xs: 48px;

  /* ── V2 Container ── */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:  900px;
  --container-padding: 24px;

  /* ── V2 Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── V2 Typography ── */
  --font-sans:  'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'Geist Mono', 'Fira Code', monospace;

  /* ── V2 Font Sizes (fluid) ── */
  --text-xs:   clamp(11px, 1vw, 12px);
  --text-sm:   clamp(13px, 1.2vw, 14px);
  --text-base: clamp(15px, 1.4vw, 16px);
  --text-lg:   clamp(17px, 1.6vw, 18px);
  --text-xl:   clamp(19px, 1.8vw, 20px);
  --text-2xl:  clamp(22px, 2.2vw, 24px);
  --text-3xl:  clamp(26px, 3vw, 30px);
  --text-4xl:  clamp(32px, 4vw, 40px);
  --text-5xl:  clamp(40px, 5vw, 56px);
  --text-6xl:  clamp(48px, 6.5vw, 72px);
  --text-7xl:  clamp(56px, 8vw, 96px);

  /* ── V2 Font Weights ── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── V2 Line Heights ── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── V2 Letter Spacing ── */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── V2 Shadows ── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:      0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.10);
  --shadow-xl:      0 16px 64px rgba(0,0,0,.12);
  --shadow-primary: 0 8px 32px rgba(255,107,0,.25);

  /* ── V2 Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 400ms cubic-bezier(.34,1.56,.64,1);

  /* ── V2 Z-Index ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Status ── */
  --green-live:    #16a34a;
  --whatsapp:      #25d366;
  --color-whatsapp:#25d366;
  --color-stars:   #f59e0b;
  --linkedin:      #0a66c2;

  /* ════════════════════════════════════════════════════════
     LEGACY ALIASES — old variable names mapped to new ones.
     Keeps existing header.html / footer.html from breaking.
     Remove these once all components are fully rewritten.
     ════════════════════════════════════════════════════════ */
  --bg:           var(--bg-primary);
  --bg-tinted:    #ece9e1;
  --bg-elev:      var(--bg-secondary);
  --ink:          var(--text-primary);
  --ink-2:        var(--text-secondary);
  --ink-3:        var(--text-muted);
  --ink-4:        #aaaaaa;
  --line:         var(--border-light);
  --line-2:       var(--border-medium);
  --accent:       var(--primary);
  --accent-ink:   var(--text-on-dark);
  --accent-soft:  rgba(255,107,0,.08);
  --accent-soft-2:rgba(255,107,0,.16);
  --accent-glow:  0 0 0 1px rgba(255,107,0,.18), 0 18px 60px -22px rgba(255,107,0,.40);
  --dark-bg:      var(--bg-dark);
  --dark-bg-2:    var(--bg-dark-2);
  --dark-line:    var(--border-dark);
  --dark-ink-2:   rgba(255,255,255,.72);
  --dark-ink-3:   var(--text-on-dark-muted);
  --r-card:       var(--radius-lg);
  --r-card-lg:    var(--radius-xl);
  --r-pill:       var(--radius-full);
  --r-input:      var(--radius-md);
  --sec-y:        var(--section-padding);
  --sec-y-compact:var(--section-padding-sm);
  --sec-y-comfy:  160px;
  --shadow-1:     var(--shadow-sm);
  --shadow-2:     var(--shadow-lg);
  --shadow-3:     var(--shadow-xl);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

body {
  font-family: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
}

a { color: inherit; text-decoration: none; }

/* ── Text balance ── */
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
.lead { text-wrap: pretty; }

/* ── Type scale ── */
.h1 {
  font-size: clamp(46px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.h4 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}
.stat-num {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ── Font families ── */
.font-mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
}
.font-serif-italic {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--accent);
}

/* ── Eyebrow ── */
.eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist', ui-sans-serif, sans-serif;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  padding: 11px 22px;
  box-shadow: var(--accent-glow);
}
.btn-primary-lg {
  font-size: 16px;
  padding: 14px 28px;
}
.btn-primary-sm {
  font-size: 13.5px;
  padding: 8px 16px;
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  padding: 10px 22px;
  border: 1px solid var(--line-2);
}
.btn-secondary:hover { border-color: var(--ink-4); }

/* ── Cards ── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--ink-4); }

.card-lg {
  border-radius: var(--r-card-lg);
  padding: 40px;
}

/* ── Layout ── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.section-y  { padding-top: var(--sec-y);         padding-bottom: var(--sec-y); }
.section-y-c { padding-top: var(--sec-y-compact); padding-bottom: var(--sec-y-compact); }
.section-y-x { padding-top: var(--sec-y-comfy);   padding-bottom: var(--sec-y-comfy); }

/* ── Sticky nav ── */
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: rgba(250,249,244,.88);
  border-bottom: 1px solid var(--line);
}

/* ── Image placeholder boxes ── */
.img-placeholder {
  background: var(--bg-tinted);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--ink-4);
}

/* ── Live dot ── */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .6; }
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--green-live);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── WhatsApp float ── */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: var(--whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  z-index: 999;
  transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ── Dark band utilities ── */
.dark-band {
  background: var(--dark-bg);
  color: var(--dark-ink-2);
  position: relative;
  overflow: hidden;
}
.dark-band::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,88,12,.09) 0%, transparent 70%);
  pointer-events: none;
}
.dark-band::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,88,12,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Arrow icon hover ── */
.arrow-icon { transition: transform .15s ease; }
a:hover .arrow-icon, button:hover .arrow-icon { transform: translateX(2px); }

/* ── Chip / badge ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  background: var(--bg-tinted);
  color: var(--ink-3);
  border: 1px solid var(--line);
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  :root {
    --sec-y:         80px;
    --sec-y-compact: 56px;
    --sec-y-comfy:   96px;
  }
  .container { padding: 0 20px; }
  .lead { font-size: 17px; }
}