/* ! tailwindcss v4 - This is a standalone static CSS file, not a Tailwind project */

@font-face {
  font-family: 'BundesSans';
  src: url('./fonts/BundesSans/BundesSans-Web-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'BundesSans';
  src: url('./fonts/BundesSans/BundesSans-Web-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'BundesSans';
  src: url('./fonts/BundesSans/BundesSans-Web-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

:root {
  --spacing-04: 0.0625rem;
  --spacing-03: 0.125rem;
  --spacing-02: 0.25rem;
  --spacing-01: 0.5rem;
  --spacing-00: 1rem;
  --spacing-10: 2rem;
  --spacing-20: 4rem;
  --spacing-30: 8rem;
  --spacing-40: 16rem;
  --text-00: 1rem;
  --text-10: 1.5rem;
  --text-20: 2rem;
  --text-30: 3rem;
  --color-brand-bg: rgb(59, 177, 244);
}

/* Tailwind spacing utilities */
.p-0 { padding: 0; }
.p-01 { padding: var(--spacing-01); }
.p-00 { padding: var(--spacing-00); }
.p-10 { padding: var(--spacing-10); }
.px-00 { padding-left: var(--spacing-00); padding-right: var(--spacing-00); }
.px-01 { padding-left: var(--spacing-01); padding-right: var(--spacing-01); }
.px-10 { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }
.py-00 { padding-top: var(--spacing-00); padding-bottom: var(--spacing-00); }
.py-01 { padding-top: var(--spacing-01); padding-bottom: var(--spacing-01); }
.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
.pt-00 { padding-top: var(--spacing-00); }
.pt-01 { padding-top: var(--spacing-01); }
.pt-10 { padding-top: var(--spacing-10); }
.pt-20 { padding-top: var(--spacing-20); }
.pb-00 { padding-bottom: var(--spacing-00); }
.pb-10 { padding-bottom: var(--spacing-10); }
.gap-00 { gap: var(--spacing-00); }
.gap-01 { gap: var(--spacing-01); }
.gap-10 { gap: var(--spacing-10); }

@media (min-width: 48rem) {
  :root {
    --text-00: 1.25rem;
    --text-10: 2rem;
    --text-20: 4rem;
    --text-30: 6rem;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: BundesSans, sans-serif;
  line-height: 1.5;
  color: white;
  background-color: var(--color-brand-bg);
}

/* Outer wrapper */
.intro-wrapper {
  position: relative;
  min-height: 95vh;
  padding-bottom: var(--spacing-00);
  margin-top: calc(45px + var(--spacing-01) * 2);
}

@media (min-width: 48rem) {
  .intro-wrapper {
    height: 95vh;
    padding-bottom: var(--spacing-20);
    margin-top: calc(45px + var(--spacing-00) * 2);
  }
}

/* Section wrapper */
.intro-section {
  position: relative;
  height: 100%;
  padding-left: var(--spacing-00);
  padding-right: var(--spacing-00);
  padding-top: var(--spacing-10);
  padding-bottom: 0;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 48rem) {
  .intro-section {
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10);
    padding-top: var(--spacing-10);
  }
}

/* Intro banner wrapper */
.intro-banner {
  position: relative;
  height: 100%;
}

/* Text content wrapper - direct CSS for inline classes */
.relative {
  position: relative;
}
.z-10 {
  z-index: 10;
}
.z-0 {
  z-index: 0;
}
.p-0 {
  padding: 0;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.gap-00 {
  gap: var(--spacing-00);
}
.pt-10 {
  padding-top: var(--spacing-10);
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

/* Typography utilities */
.header {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.125;
  max-width: 24em;
  text-wrap: balance;
}

.text-balanced {
  text-wrap: balance;
}
.text-00 {
  font-size: var(--text-00);
}
.text-10 {
  font-size: var(--text-10);
}
.text-20 {
  font-size: var(--text-20);
}

/* Reset paragraph defaults that add unwanted spacing */
p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/* Responsive utilities */
@media (min-width: 48rem) {
  .md\:max-w-1\/2 {
    max-width: 50%;
  }
}

/* Lottie animation container */
.intro-illustration {
  position: relative;
  height: 50vh;
  width: 100%;
  z-index: 0;
}

@media (min-width: 48rem) {
  .intro-illustration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

/* Description paragraph */
.intro-description {
  font-size: 18px;
  max-width: 500px;
  line-height: 1.4;
}

/* Header styles - visual copy from main project */
.header-main {
  position: fixed;
  top: var(--spacing-01);
  left: var(--spacing-01);
  right: var(--spacing-01);
  z-index: 100;
}

@media (min-width: 48rem) {
  .header-main {
    top: var(--spacing-00);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - var(--spacing-20));
    max-width: calc(1280px - var(--spacing-00) * 2);
  }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
}

.logo-wrapper {
  display: flex;
  align-items: center;
}

.logo {
  width: 120px;
  height: auto;
  cursor: pointer;
}