/* =============================================
   BASE / SHARED STYLES
   fonts, variables, reset, fade-in animations,
   footer — used by every page (nav/header in nav.css)
   ============================================= */
@font-face {
  font-family: 'Segoe UI';
  src: url('../../fonts/Segoe UI.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('../../fonts/Segoe UI Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('../../fonts/Segoe UI Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('../../fonts/Segoe UI Bold Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --black: #030303;
  --white: #fff;
  --gray-bg: #f5f5f5;
  --blue-1: #1a7eab;
  --blue-cta: #006cb5;
  --red-team: #d84c0c;
  --integ-bg: #d8e3f6;
  /* Page side padding scales with viewport width: 130px @1920, 102px @1512 (≈6.77vw).
     Capped at 130px on ultrawide; floored at 24px on tiny screens. */
  --pad: clamp(20px, 6.77vw, 130px);

  /* Site-wide proportional type scale (Figma) — value @1920 / @1512 / mobile-floor */
  --fs-header: clamp(32px, 2.7778vw, 53.33px);    /* section/page titles: 53.33 / 42 / 32 */
  --fs-normal: clamp(18px, 1.3228vw, 25.3968px);  /* intro / lead text:   25.40 / 20 / 18 */
  --fs-card:   clamp(24px, 2.1164vw, 40.6349px);  /* card titles:         40.63 / 32 / 24 */
  --fs-body:   clamp(15px, 0.84vw, 16.13px);      /* dense body / bullets: 16.13 / 15 / 15 */
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge/IE */
}

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  overflow-x: clip;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge/IE */
}

/* Hide scrollbars site-wide — scrolling (wheel, drag, touch, keyboard) still works */
*::-webkit-scrollbar { display: none; width: 0; height: 0; }   /* Chrome / Safari / Edge */

img { max-width: 100%; height: auto; display: block; }

/* =============================================
   FADE-IN ANIMATIONS
   ============================================= */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--gray-bg);
  padding: 13px 0 0;
  border-top: 1px solid #ddd;
}
.footer__copy {
  text-align: center;
  font-size: 15px;
  line-height: 12px;
  color: var(--black);
  padding: 28px 0;
}


/* =============================================
   SHARED RESPONSIVE (footer)
   ============================================= */
@media (max-width: 870px) {
  .footer__copy {  text-align: center; justify-content: center; display: flex; flex-direction: column; color: black; font-size: 12px;font-weight: 400; line-height: 22px; word-wrap: break-word; }
}