/* ===== Responsive foundations ===== */
html,
body{
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html{
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

img, video, canvas, svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== Layout ===== */
.container{
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/*
  Main-page hero/top-section styling now lives only in:
  /assets/css/hero_main.css

  Do not add .hero--full, .hero--main, .hero-inner, hero button,
  Contact hero, or About hero rules in this file.
*/


/* ===== Sections ===== */
.hero{ padding:40px 20px; text-align:center; }
h1{ margin:0 0 10px 0; font-size: clamp(24px, 3.5vw, 33px); }
h2{ margin:0px 0 10px 0; font-size: clamp(22px, 3vw, 30px); }
h3{ font-size: clamp(18px, 2vw, 22px); }
p{ color: var(--muted); margin:8px 0; font-size: clamp(14px, 1vw, 16px); }

.card{ background:var(--panel); border:1px solid #131923; border-radius:16px; padding:18px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:9999px;
  color:#0b0d10; background:linear-gradient(180deg,#ffffff, #ffffff); border:0px solid #1b2430; text-decoration:none; font-weight: 550; }
.btn.blue{ background:#131922; padding:8px 12px; border:1.5px solid #9aa4b2; color: #e8eef6; font-weight: 250; }

/* Touch-friendly link/button targets on mobile */
@media (max-width: 768px){
  a, button, [role="button"], input[type="submit"]{
    min-height: var(--touch-min, 44px);
  }
}

/* 1) Headings / brand font stack (Windows 11 native, no web fonts) */
h1, h2 {
  font-family:
    "Segoe UI Variable Display",
    "Segoe UI Variable Text",
    Bahnschrift,
    "Segoe UI",
    system-ui, -apple-system, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

/* Optional: H2 a touch lighter */
h2 { font-weight: 600; }

/* 2) Let variable fonts use their optical sizing if available */
h1, h2 { font-optical-sizing: auto; }

/* 3) Progressive enhancement: only applies when variable fonts are supported */
@supports (font-variation-settings: normal) {
  h1, h2 {
    font-variation-settings: "wght" 700, "opsz" 32;
  }
}