/* ============================================================
   Gemisa Studio V3 — Base
   Variables, Reset, Typography, Layout, Buttons, Reveal
   ============================================================ */

:root {
  --teal:          #4B8E8D;
  --teal-hover:    #3a7a79;
  --ink:           #1A1A1A;
  --ink-muted:     #6B6B6B;
  --off-white:     #F8F7F4;
  --white:         #FFFFFF;
  --border:        #E8E6E1;
  --border-dark:   #D0CEC9;

  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'Space Grotesk', sans-serif;

  --max-width:     1200px;
  --section-gap:   90px;
  --px:            48px;

  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;

  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--px);
}

.section { padding: var(--section-gap) 0; }

/* Structural wrapper shared by hero, services, and proof */
.hero-services-wrap { position: relative; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.3s;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-primary:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(75, 142, 141, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-dark);
}
.btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn-ghost-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.25);
}
.btn-ghost-white:hover {
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
}

/* ── Reveal Animations ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }