/* Fonts (self-hosted, latin subset) */
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('asset/fonts/michroma-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('asset/fonts/saira-variable.woff2') format('woff2');
}

/* Tokens — desktop (Figma frame 1440×960) */
:root {
  --black: #000;
  --white: #fff;
  --yellow: #ffed00;
  --yellow-tint: rgba(255, 237, 0, 0.1);

  --font-display: 'Michroma', sans-serif;
  --font-body: 'Saira', sans-serif;

  /* vertical rhythm: design gaps in px, used as fr so they scale with the viewport height */
  --gap-top: 60fr;
  --gap-logo: 45fr;
  --gap-title: 203fr;
  --gap-text: 87fr;
  --gap-footer: 70fr;
  --gap-bottom: 54fr;
  --space-actions: 12px;

  --title-size: clamp(28px, calc((100vw - 32px) / 10.6), 64px);
  --title-lh: 1.1;
  --text-size: 28px;
  --text-lh: 1.35;
  --text-weight: 500;
  --text-width: 785px;
  --footer-size: 16px;

  /* background video (rotated 16:9 box) */
  --bg-w: 106.9vw;
  --bg-ratio: 16 / 9;
  --bg-x: 53.9%;
  --bg-y: 29.6%;
  --bg-rotate: 11.9deg;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows:
    minmax(12px, var(--gap-top)) auto
    minmax(8px, var(--gap-logo)) auto
    minmax(16px, var(--gap-title)) auto
    minmax(16px, var(--gap-text)) auto
    minmax(16px, var(--gap-footer)) auto
    minmax(12px, var(--gap-bottom));
  justify-items: center;
  height: 100vh;
  height: 100dvh;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* Background video */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg__video {
  position: absolute;
  left: var(--bg-x);
  top: var(--bg-y);
  width: var(--bg-w);
  aspect-ratio: var(--bg-ratio);
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(var(--bg-rotate));
}

/* Hero */
/* main is flattened so its children sit directly on the body grid */
.hero {
  display: contents;
}

.hero > *,
.footer {
  position: relative;
  z-index: 1;
}

.hero__logo { grid-row: 2; }
.hero__title { grid-row: 4; }
.hero__text { grid-row: 6; }
.hero__actions { grid-row: 8; }
.footer { grid-row: 10; }

.hero__logo {
  display: block;
  width: 200px;
  height: auto;
  /* the exported SVG is vertically mirrored, as in Figma */
  transform: scaleY(-1);
}

.hero__title {
  max-width: min(11em, calc(100vw - 32px));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--title-size);
  line-height: var(--title-lh);
  text-transform: uppercase;
}

.hero__text {
  max-width: min(var(--text-width), calc(100vw - 32px));
  font-size: var(--text-size);
  font-weight: var(--text-weight);
  line-height: var(--text-lh);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-actions);
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid var(--btn-bg);
  transition: color 0.3s ease, border-color 0.35s ease;
}

.btn::before,
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.35s ease;
}

.btn::before {
  background: var(--btn-bg);
}

.btn::after {
  background: var(--yellow-tint);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(100%);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(-100%);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateY(0);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--yellow);
}

.btn:focus-visible {
  outline: 1px solid var(--yellow);
  outline-offset: 4px;
}

.btn--light {
  --btn-bg: var(--white);
  color: var(--black);
}

.btn--light:hover,
.btn--light:focus-visible {
  color: var(--yellow);
}

.btn--dark {
  --btn-bg: var(--black);
  color: var(--yellow);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  border-color: var(--black);
  color: var(--white);
}

/* Footer */
.footer {
  width: 100%;
  padding: 0 16px;
}

.footer p {
  max-width: 1007px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--footer-size);
  line-height: 1.4;
}

/* the VAT number must not look like a phone link (iOS data detectors) */
.footer a[x-apple-data-detectors],
.footer a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

/* Tablet */
@media (max-width: 1199px) {
  :root {
    --bg-w: 170vw;
    --bg-x: 52%;
    --bg-y: 29%;
    --bg-rotate: 13.5deg;
  }
}

/* Mobile (Figma frame 402×863) */
@media (max-width: 767px) {
  :root {
    --gap-top: 58fr;
    --gap-logo: 24fr;
    --gap-title: 170fr;
    --gap-text: 84fr;
    --gap-footer: 61fr;
    --gap-bottom: 23fr;
    --space-actions: 14px;

    --title-lh: 1.19;
    --text-size: 20px;
    --text-lh: 1.5;
    --text-weight: 400;
    --text-width: 312px;
    --footer-size: 14px;

    /* mobile file is a 2304×1872 centre crop of the source, same scale as before */
    --bg-w: 190.4vw;
    --bg-ratio: 2304 / 1872;
    --bg-x: 50%;
    --bg-y: 28.3%;
    --bg-rotate: 15.41deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn::after {
    transition: none;
  }
}