/* ---------- Base / tokens ---------- */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #111111;
  --muted: #555555;
  --surface: #f8f9fa;
  --border: #e6e6e6;
  
  /* spacing */
  --space-1: clamp(8px, 1.2vw, 16px);
  --space-2: clamp(16px, 2vw, 32px);
  --space-3: clamp(32px, 4vw, 60px);

  /* container */
  --container-max: 1140px;

  /* type scale */
  --text-xxl: clamp(0.8rem, 3vw, 2rem);   /* hero h1/h2 */
  --text-xl:  clamp(0.8rem, 3vw, 2rem);  /* section h2 */
  --text-lg:  clamp(0.8rem, 2.6vw, 1.5rem);    /* h3 / lead */
  --text-md:  clamp(0.6rem, 2.2vw, 1rem);    /* body */
  --text-sm:  clamp(0.75rem, 1.8vw, 0.9rem); /* tiny */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --fg: #e9e9ee;
    --muted: #a4a7b0;
    --surface: #151922;
    --border: #242a36;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.5;
  color: var(--fg);
}

.img-invert-dark { transition: filter .2s ease; }
@media (prefers-color-scheme: dark) {
  .img-invert-dark {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* ---------- Layout ---------- */
.section-full { width: 100%; }
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 15px;
}

/* ---------- Hero ---------- */
.top-content {
  text-align: center;
  padding: var(--space-3) var(--space-2);
}
.text-above-logo {
  font-size: var(--text-xxl);
  margin: 0.5em 0 0.35em;
  white-space: nowrap;   /* single string */
  overflow-x: auto;      /* horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
.top-content img {
  max-width: clamp(180px, 60vw, 500px);
  height: auto;
  display: block;
  margin: var(--space-2) auto;
}
.text-below-logo {
  font-size: var(--text-xxl);
  margin: 0.35em 0 0.5em;
  white-space: nowrap;   /* single string */
  overflow-x: auto;       /* horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

/* ---------- Partners ---------- */
#partners {
  background-color: var(--surface);
  padding: var(--space-3) 0;
}
#partners h2 {
  text-align: center;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xl);
  font-weight: 800;
}
.partners-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2); 
}
.partner-item {
  flex: 1 1 260px;
  max-width: 360px;
  padding: 0 15px;
  text-align: center;
}
.partner-logo {
  width: min(200px, 60%);
  height: auto;
  display: block;
  margin: 0 auto var(--space-1);
}
.partner-description {
  font-size: var(--text-md);
  color: var(--muted);
  margin: 0;
}

/* Fallback for narrow screens — single row */
@media (max-width: 767px) {
  .partner-item {
    flex: 1 1 100%;
    max-width: 520px;
  }
}

/* ---------- Social ---------- */
#social-links {
  background-color: var(--bg);
  padding: var(--space-2) 0 var(--space-3);
  text-align: center;
}
#social-links h3 {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0 0 var(--space-1);
}
#social-links .social-icon {
  width: 40px;
  height: auto;
  margin: 0 10px;
  display: inline-block;
}

/* ---------- Footer ---------- */
.footer-company-text {
  font-size: var(--text-sm);
  color: var(--muted);
}
#footer-company {
  text-align: center;
  padding: var(--space-3) var(--space-2);
}

/* ---------- A11y / motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}