/* =========================
   NAVBAR
========================= */

.navbar-drive {

  position: fixed;
  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    linear-gradient(
      to bottom,
      rgba(8,10,14,0.82),
      rgba(8,10,14,0)
    );

  transition:
    background 1.2s ease,
    border-color 1.2s ease;
}

.navbar-drive::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background:
    rgba(255,255,255,0.05);

  opacity: 0.7;
}

.navbar-inner {

  height: var(--navbar-height);

  display: flex;

  align-items: center;
  justify-content: space-between;
}

/* =========================
   LOGO
========================= */

.drive-logo {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.78);

  text-decoration: none;
}

/* =========================
   NAV MENU
========================= */

.nav-menu {

  display: flex;

  align-items: center;

  gap: 2.8rem;
}

.nav-menu a {

  position: relative;

  font-family: var(--font-mono);

  color:
    rgba(255,255,255,0.38);

  font-size: 0.68rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  text-decoration: none;

  transition:
    color 0.8s ease;
}

.nav-menu a:hover {

  color:
    rgba(255,255,255,0.82);
}

/* =========================
   MOBILE TOGGLE
========================= */

.mobile-toggle {

  position: relative;

  width: 34px;
  height: 20px;

  display: none;

  background: transparent;

  border: none;

  cursor: pointer;
}

.mobile-toggle span:nth-child(1),
.mobile-toggle span:nth-child(2) {

  position: absolute;

  right: 0;

  height: 1px;

  background:
    rgba(255,255,255,0.72);
}

.mobile-toggle span:nth-child(1) {

  top: 4px;

  width: 26px;
}

.mobile-toggle span:nth-child(2) {

  bottom: 4px;

  width: 18px;
}

/* =========================
   HERO
========================= */

.hero-section {

  position: relative;

  min-height: calc(100vh - 72px);

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("../img/hero.jpg")
    center center / cover no-repeat;

  z-index: 2;

  transition:
    opacity 1.4s cubic-bezier(.16,.84,.44,1),
    filter 1.4s cubic-bezier(.16,.84,.44,1),
    transform 1.6s cubic-bezier(.16,.84,.44,1);
}

.hero-section.surface-hidden {

  opacity: 0;

  filter: blur(10px);

  transform:
    scale(1.01);

  pointer-events: none;
}

.hero-overlay {

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to right,
      rgba(8,10,14,0.88) 0%,
      rgba(8,10,14,0.58) 45%,
      rgba(8,10,14,0.24) 100%
    );
}

.hero-content {

  position: relative;

  z-index: 2;

  max-width: 760px;
}

.hero-label {

  font-family: var(--font-mono);

  font-size: 0.62rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.28);

  margin-bottom:
    1.4rem;
}

.hero-content h1 {

  font-size:
    clamp(3.2rem, 5vw, 5.1rem);

  line-height: 0.94;

  letter-spacing: -0.045em;

  margin-bottom:
    2rem;

  max-width: 16ch;
}

.hero-content p {

  max-width: 500px;

  line-height: 1.8;

  color:
    rgba(220,224,230,0.72);

  margin-bottom:
    3rem;
}

/* =========================
   BUTTONS
========================= */

.drive-button,
.drive-button-secondary {

  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 1rem;

  font-family: var(--font-mono);

  font-size: 0.72rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.72);

  text-decoration: none;

  padding-bottom: 1rem;
}

.drive-button span,
.drive-button-secondary span {

  position: absolute;

  left: 0;
  bottom: 0;

  width: 140px;
  height: 1px;

  background:
    rgba(255,255,255,0.14);
}

/* =========================
   ECOSYSTEM
========================= */

.ecosystem-section {

  position: fixed;

  inset: 0;

  z-index: 3;

  display: flex;

  align-items: center;
  justify-content: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  background:
    rgba(10,13,18,0.74);

  backdrop-filter:
    blur(24px);

  transition:
    opacity 1.4s cubic-bezier(.16,.84,.44,1),
    visibility 1.4s ease;
}

.ecosystem-visible {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.experiences-wrapper {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 1rem;
}

.experience-card {

  min-height: 420px;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.015);
}

.experience-content {

  min-height: 420px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  padding:
    2.2rem;
}

.experience-subtitle {

  font-family: var(--font-mono);

  font-size: 0.6rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.24);

  margin-bottom:
    1.4rem;
}

.experience-content h3 {

  font-family: var(--font-mono);

  font-size: 2rem;

  font-weight: 400;

  margin-bottom:
    1.6rem;
}

.experience-content p {

  line-height: 1.75;

  color:
    rgba(232,232,232,0.62);

  margin-bottom:
    3rem;
}

/* =========================
   FOOTER
========================= */

.drive-footer {

  position: fixed;

  left: 0;
  bottom: 0;

  width: 100%;

  z-index: 4;

  pointer-events: auto;

  border-top:
    1px solid rgba(255,255,255,0.05);

  background:
    linear-gradient(
      to top,
      rgba(10,13,18,0.88),
      rgba(10,13,18,0)
    );

  backdrop-filter:
    blur(14px);

  padding:
    1.2rem 0
    1rem;
}

.footer-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  align-items: center;
}

.footer-left,
.footer-status,
.footer-center a {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.34);

  text-decoration: none;
}

.footer-center {

  display: flex;

  justify-content: center;

  gap: 2rem;
}

.footer-status {

  justify-content: flex-end;

  display: flex;

  align-items: center;

  gap: 0.7rem;
}

/* =========================
   LEGAL OVERLAYS
========================= */

.legal-overlay {

  display: flex;

  visibility: hidden;

  pointer-events: none;

  position: fixed;

  inset: 0;

  z-index: 9999;

  align-items: center;
  justify-content: center;

  padding: 2rem;

  background:
    rgba(8,10,14,0.62);

  backdrop-filter:
    blur(18px);

  opacity: 0;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

.legal-overlay.active {

  visibility: visible;

  pointer-events: auto;

  opacity: 1;
}

.legal-panel {

  width: 100%;

  max-width: 860px;

  max-height: 78vh;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(14,18,24,0.94);
}

.legal-topbar {

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    1.4rem 1.6rem;

  border-bottom:
    1px solid rgba(255,255,255,0.06);
}

.legal-system-label,
.overlay-close {

  font-family: var(--font-mono);

  font-size: 0.68rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color:
    rgba(255,255,255,0.42);
}

.overlay-close {

  background: transparent;

  border: none;

  cursor: pointer;
}

.legal-scroll {

  padding:
    3rem 2rem 4rem;

  max-height: 68vh;

  overflow-y: auto;
}

.legal-scroll h2 {

  font-size:
    clamp(2.4rem, 4vw, 4rem);

  margin-bottom:
    2rem;
}

.legal-intro {

  line-height: 1.8;

  color:
    rgba(220,224,230,0.72);

  margin-bottom:
    4rem;
}

.legal-block {

  padding-top: 2rem;

  margin-bottom: 3rem;

  border-top:
    1px solid rgba(255,255,255,0.05);
}

.legal-block h3 {

  font-family: var(--font-mono);

  font-size: 0.76rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  margin-bottom:
    1.4rem;

  color:
    rgba(255,255,255,0.82);
}

.legal-block p {

  line-height: 1.85;

  color:
    rgba(220,224,230,0.66);
}

/* =========================
   SAFARI OVERLAY FIX
========================= */

#privacyOverlay {

  z-index: 10001 !important;

  isolation: isolate;
}

#termsOverlay {

  z-index: 10002 !important;

  isolation: isolate;
}

.legal-panel {

  position: relative;

  z-index: 2;
}