/* Alix Energy — coming-soon page (standalone HTML/CSS port)
   Brand tokens and layout mirror the app version 1:1.
   NOTE: the background video is H.264 .mov (plays in Chrome/Safari). In
   browsers that can't play it (e.g. Firefox) the poster image is shown. */

:root {
  --blue: #113e56;
  --green: #a2c748;
  --yellow: #ecc741;
  --white-50: #fdfdfd;
  --ink-soft: rgba(30, 30, 28, 0.8);

  --font-heading: "Asap", system-ui, sans-serif;
  --font-body: "Raleway", system-ui, sans-serif;

  /* 144px side margin at a 1440px viewport → floors at 16px on mobile */
  --page-margin: clamp(16px, calc(12.0188vw - 29.07px), 144px);
}

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

html,
body {
  margin: 0;
}

body {
  background: var(--white-50);
  color: var(--ink-soft);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 16px padding all around the band on desktop */
.page {
  padding: 16px;
}

/* ── Hero band ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100dvh - 32px);
  overflow: hidden;
  border-radius: 24px;
}

.hero__video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

/* Two-column row: justify-between pushes columns apart, gap is the 80px floor */
.hero__inner {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  width: min(calc(100vw - 2 * var(--page-margin)), 1440px);
  min-height: calc(100dvh - 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding-block: 64px;
}

/* Left column */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  max-width: 560px;
  color: var(--white-50);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--white-50);
}

.accent-green {
  font-style: italic;
  color: var(--green);
}

.hero__lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
}

/* Logo — kept inside a white container so it reads on the dark video.
   Crops the full logo.png lockup to a 190×50 window (matches the app). */
.logo {
  align-self: flex-start;
  display: inline-flex;
  background: var(--white-50);
  border-radius: 16px;
  padding: 16px;
}

.logo__crop {
  position: relative;
  display: block;
  height: 50px;
  width: 190px;
  overflow: hidden;
}

.logo__crop img {
  position: absolute;
  left: -2.09%;
  top: -24.75%;
  height: 150.5%;
  width: 107.83%;
  max-width: none;
  object-fit: cover;
}

/* Right column — glass card */
.glass {
  flex-shrink: 0;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid rgba(253, 253, 253, 0.16);
  background: rgba(253, 253, 253, 0.08);
  padding: 32px;
  box-shadow: 0 4px 16px rgba(253, 253, 253, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--white-50);
}

.glass__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glass__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white-50);
}

.accent-yellow {
  color: var(--yellow);
}

.glass__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.glass__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--white-50);
  text-decoration: none;
  background-image: linear-gradient(
    121deg,
    #ecc741 0.7%,
    #a2c748 33.2%,
    #58a893 65.8%,
    #113e56 99.3%
  );
  transition: opacity 0.15s ease;
}

.glass__cta:hover {
  opacity: 0.95;
}

.arrow {
  height: 12px;
  width: 25px;
  flex-shrink: 0;
}

/* ── Mobile (< lg / 1024px) ────────────────────────────────── */
@media (max-width: 1023.98px) {
  .page {
    padding: 0; /* band goes edge-to-edge */
  }

  .hero {
    min-height: 100dvh;
    border-radius: 0;
  }

  .hero__inner {
    width: 100%;
    min-height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px; /* equal 16px on all four sides */
  }

  .hero__title {
    font-size: 44px;
  }

  .glass {
    width: 100%;
  }
}