/* ═══════════════════════════════════════════════
   fyIT.io — Global Stylesheet
   All design tokens, base overrides, and
   reusable component classes live here.
   ═══════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────── */
:root {
  /* Brand */
  --primary:                   #0058bc;
  --on-primary:                #ffffff;

  /* Surface scale */
  --surface:                   #f9f9fb;
  --surface-lowest:            #ffffff;
  --surface-low:               #F5F5F7;
  --surface-mid:               #EBEBED;
  --surface-high:              #E2E2E6;
  --surface-highest:           #D2D2D7;
  --surface-variant:           #D2D2D7;
  --outline-variant:           #D2D2D7;

  /* Text */
  --on-surface:                #000000;
  --on-surface-variant:        #86868B;

  /* Typography */
  --font-headline:             "Manrope", sans-serif;
  --font-body:                 "Inter", sans-serif;

  /* Radii */
  --radius-sm:                 0.5rem;
  --radius-md:                 0.75rem;
  --radius-lg:                 1.5rem;
  --radius-xl:                 2rem;
  --radius-full:               9999px;

  /* Shadows */
  --shadow-pill-hover:         0 2px 12px rgba(0, 0, 0, 0.05);
}

/* ── Base ────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Filled icon variant — add alongside material-symbols-outlined */
.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

select option { color: #000; }

/* ── Layout helpers ──────────────────────────── */
.hero-gradient {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

/* ── Navigation ──────────────────────────────── */
.glass-nav {
  background: rgba(249, 249, 251, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Logo / image ────────────────────────────── */
/* Converts any coloured SVG to solid black */
.logo-grayscale {
  filter: grayscale(1) brightness(0);
}

/* ── Technology grid card ────────────────────── */
/* Used in the Technologies & Ecosystems 3-col grid */
.tech-card {
  background: var(--surface-low);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  cursor: default;
  transition: background 0.15s;
}
.tech-card:hover {
  background: var(--surface-mid);
}

/* ── Modal chip ──────────────────────────────── */
/* Each technology tag inside the expanded modal */
.modal-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-low);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  flex-shrink: 0;
}

/* ── Service pill ────────────────────────────── */
/* Used in all three Strategic Services cards */
.service-pill {
  background: var(--surface-low);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
  transition: background 0.15s, box-shadow 0.15s;
}
.service-pill:hover {
  background: var(--surface-mid);
  box-shadow: var(--shadow-pill-hover);
}

/* ── Industry card ───────────────────────────── */
.industry-card {
  background: var(--surface-low);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  transition: background 0.15s;
  cursor: default;
}
.industry-card:hover {
  background: var(--surface-mid);
}