/* ============================================================
   FEKRA — Base Styles: Body, Utilities, Loader, Cursor
   ============================================================ */

/* ── Body ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.7;
  cursor: none;
}

img, video, svg { max-width: 100%; }

/* ── Noise overlay ──────────────────────────────────────────── */
.noise {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
}

/* ── Page loader ────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { text-align: center; }
.loader-logo-wrap {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  animation: spinSlow 3s linear infinite;
}
.loader-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.loader-text {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .5em;
  color: var(--text);
  margin-bottom: 24px;
}
.loader-bar {
  width: 180px; height: 1px;
  background: var(--border);
  margin: 0 auto;
  overflow: hidden;
}
.loader-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--lime));
  width: 0;
  transition: width .05s;
}

/* ── Custom cursor ──────────────────────────────────────────── */
.cursor {
  width: 10px; height: 10px;
  background: var(--lime);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  mix-blend-mode: difference;
}
.cursor-follower {
  width: 32px; height: 32px;
  border: 1px solid rgba(1,251,29,0.35);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform .12s ease-out, width .3s, height .3s, opacity .3s;
}
.cursor.hovering       { width: 18px; height: 18px; }
.cursor-follower.hovering { width: 52px; height: 52px; border-color: rgba(1,251,29,0.55); }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Global utilities ───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--green) 0%, var(--lime) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-center   { text-align: center; }
.bg-surface-2  { background: var(--bg-2); }

.divider {
  height: 1px;
  background: var(--border);
  max-width: 1200px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}

/* ── Page-level hero helpers (shared across pages) ──────────── */
.hero-bg-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-content-wrap {
  position: relative;
  z-index: 2;
}
.footer-contact-link {
  color: var(--text-3);
  text-decoration: none;
}