:root {
  --green: #22C26C;
  --green-text: #28C26C;
  --bg-darker: #0E1822;
  --rail-width: 48px;
  --font-slab: "Arvo", Georgia, serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg-darker);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.about-rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--rail-width);
  z-index: 50;
  background: var(--green);
}

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-right: var(--rail-width);
  overflow: hidden;
}

.hero-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-darker);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.hero-video-scaler {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  min-width: 100vw;
  min-height: 56.25vw;
  transform: translate(-50%, -50%) scale(1.25);
}

.hero-video-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.hero-video-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a121a;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  filter: brightness(0.5);
}

.hero-bg-wrapper.is-playing .hero-video-fallback {
  opacity: 0;
  transition: opacity 1s ease;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top, rgba(14, 24, 34, 0.88) 0%, rgba(14, 24, 34, 0.15) 45%, rgba(14, 24, 34, 0.35) 100%),
    linear-gradient(to right, rgba(14, 24, 34, 0.45) 0%, transparent 40%, rgba(14, 24, 34, 0.25) 100%);
  pointer-events: none;
}

.hero-main-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px) calc(40px + var(--safe-bottom));
}

.hero-name {
  margin: 0;
  font-family: var(--font-slab);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--green-text);
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
  :root { --rail-width: 40px; }

  .hero-main-content {
    padding: 0 18px calc(28px + var(--safe-bottom));
  }

  .hero-name {
    font-size: clamp(2.6rem, 14vw, 3.8rem);
  }
}

@media (max-width: 420px) {
  :root { --rail-width: 34px; }
}

@media (max-height: 640px) and (orientation: landscape) {
  .hero-name { font-size: clamp(2.2rem, 9vh, 3.2rem); }
  .hero-main-content { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-video-fallback { opacity: 1 !important; }
}