/*
  Stylesheet for the EXIT Framework landing page
  This file defines the dark, premium visual design and responsive layout.
*/

:root {
  --bg: #090d17;
  --bg-panel: #10172b;
  --card: rgba(17, 26, 49, 0.78);
  --text: #f7f9fc;
  --muted: #9caac7;
  --accent: #9cc8ff;
  --gold: #c4a36d;
  --radius: 20px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
}

/* Top navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(8, 12, 24, 0.72);
  border-bottom: 1px solid rgba(156, 200, 255, 0.12);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(156, 200, 255, 0.28), rgba(89, 168, 255, 0.18));
  border: 1px solid rgba(156, 200, 255, 0.24);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand-copy strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.brand-copy span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.nav a:hover {
  color: var(--text);
}

.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #dce8ff 100%);
  color: #08101c;
  box-shadow: 0 12px 36px rgba(156, 200, 255, 0.22);
}

.btn-secondary {
  background: rgba(17, 24, 45, 0.5);
  color: var(--text);
  border-color: rgba(156, 200, 255, 0.24);
}

.btn-primary:hover,
.btn-secondary:hover {
  opacity: 0.92;
}

/* Badge for hero */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 24, 45, 0.58);
  border: 1px solid rgba(156, 200, 255, 0.24);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  box-shadow: 0 0 0 5px rgba(156, 200, 255, 0.12);
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  padding: 96px 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/exit-hero.webp");
  background-size: cover;
  background-position: center;
  /*
    The hero image should feel fixed behind the content, following the scroll. Background-attachment
    set to fixed pins the image to the viewport, creating a subtle parallax effect. We also
    increase opacity further to make the image more prominent while still allowing overlays
    to preserve readability.
  */
  background-attachment: fixed;
  /* Increase opacity to make the hero image less transparent and more visible */
  opacity: 0.75;
  filter: contrast(1.08) saturate(0.9);
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /*
    Further lighten the overlay so the hero image stands out. Keep multiple gradients to maintain
    readability over text. Lower alpha values across the board to reveal more of the image and
    reinforce the identity.
  */
  background:
    /* Soften the dark overlay further by lowering the alpha values. This lets more of the
       underlying hero image shine through while still providing enough contrast for the text. */
    linear-gradient(90deg, rgba(3, 6, 12, 0.60) 0%, rgba(3, 6, 12, 0.40) 42%, rgba(3, 6, 12, 0.15) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0.05), rgba(3, 6, 12, 0.50));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero h1 {
  margin: 10px 0;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.hero .lead {
  font-size: clamp(1.1rem, 1.8vw, 1.28rem);
  max-width: 60ch;
  margin-bottom: 12px;
}

.hero .sublead {
  color: var(--muted);
  font-size: 1rem;
  max-width: 60ch;
  margin-bottom: 24px;
}

.microcopy {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Sections */
.section {
  padding: 84px 0;
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.section-title {
  margin: 10px 0 16px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 16ch;
}

/* Grid utilities */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Card component */
.card {
  background: var(--card);
  border: 1px solid rgba(156, 200, 255, 0.16);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), var(--shadow);
}

.card.dark {
  background: var(--bg-panel);
}

.card h3 {
  margin: 12px 0 10px;
  font-size: 1.2rem;
  letter-spacing: -0.035em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Icon style */
.icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(156, 200, 255, 0.2), rgba(201, 184, 255, 0.18));
  border: 1px solid rgba(156, 200, 255, 0.16);
  color: var(--accent);
  font-weight: 800;
  margin-bottom: 12px;
}

/* Price display */
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0;
}

.price strong {
  font-size: 2.2rem;
  letter-spacing: -0.05em;
}

.price span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Lists */
.clean-list,
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 0.95rem;
}

.clean-list li,
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.clean-list li::before,
.feature-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 0.48em;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  box-shadow: 0 0 0 5px rgba(156, 200, 255, 0.08);
}

/* FAQ */
.faq {
  display: grid;
  gap: 14px;
}

.faq-item {
  border: 1px solid rgba(156, 200, 255, 0.16);
  border-radius: 20px;
  background: rgba(12, 18, 35, 0.46);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 22px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.faq-q span:last-child {
  font-size: 1.4rem;
  color: var(--muted);
}

.faq-a {
  padding: 0 22px 22px;
  color: var(--muted);
  display: none;
}

/* Footer */
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(163, 186, 255, 0.12);
  font-size: 0.95rem;
  color: var(--muted);
}

/* Logo image inside brand */
.brand .logo-img {
  /* Increase the logo size to enhance brand visibility in the navigation */
  /* Slightly increase the logo size further for stronger brand presence */
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  /* Invert the dark logo to show on dark nav */
  filter: invert(1) brightness(1.2) contrast(0.9);
}

/* Watermark logo overlay in hero */
.logo-watermark {
  position: absolute;
  bottom: 0;
  right: 0;
  /* Use a large size relative to viewport to emphasise the brand */
  /* Enlarge the watermark so it becomes a stronger but still subtle backdrop */
  width: 60vw;
  max-width: 800px;
  aspect-ratio: 1/1;
  background-image: url("assets/exit-logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.09;
  pointer-events: none;
  z-index: 1;
  /* Lighten the watermark subtly without overpowering the hero content */
  filter: invert(1) brightness(1.3) contrast(0.9);
}

/* Responsive */
@media (max-width: 1120px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  Global background image and overlay
  ----------------------------------
  To maintain the hero image as a persistent backdrop throughout the entire page, we
  attach the hero asset to the body via ::before and ::after pseudo-elements. These
  elements are fixed to the viewport so that the same image and overlay remain
  visible while the user scrolls all the way down. The ::before layer holds the
  photo itself; the ::after layer applies a subtle dark gradient for contrast and
  readability. Both layers sit behind all other content using negative z-indices.
*/

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("assets/exit-hero.webp");
  background-size: cover;
  background-position: center;
  /* Use a higher opacity here to ensure the image is clearly visible across all sections */
  opacity: 0.75;
  filter: contrast(1.08) saturate(0.9);
  z-index: -2;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* This overlay creates a dark veil over the photo so that text and cards
     remain readable on top of the image across the entire page. Adjust alpha
     values to fine-tune brightness and contrast. */
  background:
    linear-gradient(90deg, rgba(3, 6, 12, 0.60) 0%, rgba(3, 6, 12, 0.40) 42%, rgba(3, 6, 12, 0.15) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0.05), rgba(3, 6, 12, 0.50));
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 1040px) {
  .hero {
    padding: 72px 0;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .section {
    padding: 64px 0;
  }
  .btns {
    width: 100%;
  }
  .btn {
    width: 100%;
  }
  .hero-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .microcopy {
    text-align: center;
  }
}