/* =========================================================================
   Hadron.Studio — Landing Page V2
   Built from Figma "Hadron Landing Page V2".
   Plain HTML/CSS, no build step, no dependencies.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Fonts

   The design uses "Circular Air Pro" (Light / Book / Medium), a commercial
   licensed typeface that cannot be redistributed here. We:
     (a) declare @font-face for Circular Air Pro pointing at /fonts/circular-air-pro/
         — drop the licensed .woff2 files in that folder and they take over
         automatically (no other change needed); and
     (b) bundle Poppins (open-source, geometric sans) as a close-matching
         fallback so the page looks right out of the box.
   ------------------------------------------------------------------------- */

/* --- Circular Air Pro (licensed — files supplied by the dev) --- */
@font-face {
  font-family: "Circular Air Pro";
  font-style: normal;
  font-weight: 300; /* Light */
  font-display: swap;
  src: url("../fonts/circular-air-pro/CircularAirPro-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Circular Air Pro";
  font-style: normal;
  font-weight: 400; /* Book */
  font-display: swap;
  src: url("../fonts/circular-air-pro/CircularAirPro-Book.woff2") format("woff2");
}
@font-face {
  font-family: "Circular Air Pro";
  font-style: normal;
  font-weight: 500; /* Medium */
  font-display: swap;
  src: url("../fonts/circular-air-pro/CircularAirPro-Medium.woff2") format("woff2");
}

/* --- Poppins (bundled fallback) --- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   2. Design tokens (mapped from the Figma file)
   ------------------------------------------------------------------------- */
:root {
  /* Colours */
  --color-bg: #030303;          /* page background */
  --color-text: #ffffff;        /* primary text on dark */
  --color-surface: #ffffff;     /* contact button background */
  --color-on-surface: #000000;  /* contact button text */

  /* Typeface stack — Circular Air Pro first, Poppins as bundled fallback */
  --font-sans: "Circular Air Pro", "Poppins", system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Tracking — all Figma layers use -0.05em (e.g. -3.65px @ 73px) */
  --tracking: -0.05em;

  /* Page gutter: 20px on mobile → 65px on desktop (Figma logo inset) */
  --gutter: clamp(1.25rem, 4.5vw, 4.0625rem);

  /* Header height reserved so hero content never sits under the nav */
  --header-h: 5rem; /* ~80px (video starts at y=80 in Figma) */

  /* Fluid type — scales smoothly between 360px and 1440px viewports.
     Max values match the Figma sizes exactly (73 / 26 / 30 / 18 px). */
  --fs-title: clamp(2.25rem, 1.479rem + 3.426vw, 4.5625rem);     /* 36 → 73px */
  --fs-subtitle: clamp(1.0625rem, 0.875rem + 0.833vw, 1.625rem); /* 17 → 26px */
  --fs-logo: clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);      /* 22 → 30px */
  --fs-contact: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);       /* 16 → 18px */
}

/* -------------------------------------------------------------------------
   3. Reset / base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  position: relative;
  z-index: 2;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
p {
  margin: 0;
}

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

/* -------------------------------------------------------------------------
   4. Header / navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0; /* top bar, full width, overlays the hero */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 1.6vw, 1.4rem) var(--gutter);
}

.site-header__logo {
  font-size: var(--fs-logo);
  font-weight: 500; /* Circular Air Pro Medium */
  letter-spacing: var(--tracking);
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
}

/* Contact button — white pill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  cursor: pointer;
  border: 0;
}

.btn--contact {
  padding: 0.625rem 2.375rem; /* 10px 38px */
  border-radius: 35px;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-size: var(--fs-contact);
  font-weight: 300; /* Circular Air Pro Light */
  letter-spacing: var(--tracking);
  line-height: 1.222; /* 22px @ 18px */
  white-space: nowrap;
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.btn--contact:hover {
  background-color: #ececec;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.btn--contact:active {
  transform: translateY(0);
}

.btn--contact:focus-visible {
  outline: 2px solid var(--color-surface);
  outline-offset: 3px;
}

.site-header__logo:focus-visible {
  outline: 2px solid var(--color-surface);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh; /* avoids mobile address-bar jump where supported */
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2.5rem;

  /* Full-bleed background captured from the Figma video frame.
     `cover` keeps the centred glow filling the viewport at any size.
     Swap to `100% auto` for the exact Figma framing (glow scales to width). */
  /* background-color: var(--color-bg);
  background-image: url("../images/hero-bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; */
}

.hero__content {
  width: 100%;
  max-width: 54.25rem; /* 868px — Figma headline width */
  margin-inline: auto;
}

.hero__title {
  font-size: var(--fs-title);
  font-weight: 400; /* Circular Air Pro Book */
  line-height: 1.05; /* Figma 1.0; +5% guards descenders from colliding */
  letter-spacing: var(--tracking);
  text-wrap: balance; /* keeps line lengths even as it reflows */
}

.hero__subtitle {
  max-width: 46rem; /* 736px — wraps to ~2 lines like the design */
  margin: clamp(1.5rem, 3vw, 3.4375rem) auto 0; /* ~55px gap @ desktop */
  font-size: var(--fs-subtitle);
  font-weight: 400; /* Circular Air Pro Book */
  line-height: 1.15; /* 30px @ 26px */
  letter-spacing: var(--tracking);
  text-wrap: balance;
}

.bg-video {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(500px, 150vw, 2500px);
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1.5);
}

/* -------------------------------------------------------------------------
   6. Small-screen refinements
   ------------------------------------------------------------------------- */
@media (max-width: 36rem) {
  .btn--contact {
    padding: 0.5rem 1.5rem;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}