/* ============================================================
   Priotech — landing.css
   Landing page (/) where visitors choose between the AI site (/ai)
   and the ATEX site (/atex). Loaded after main.css, reuses its tokens.
   ============================================================ */

:root {
  --color-ex:      #F5B400;   /* ATEX amber, as in atex.css */
  --color-ex-ink:  #8A6400;
  --color-ex-dark: #18181B;
}

/* The landing has no menu, so the language switcher stays visible on mobile */
.nav--landing .lang-switcher {
  display: flex;
}

/* ── Hero ────────────────────────────────────────────────────── */
.landing {
  padding: calc(var(--nav-height) + 3.5rem) 0 4.5rem;
}

/* Second orb in ATEX amber — hints at the two areas */
.landing .hero__orb--2 {
  background: radial-gradient(circle, rgba(245, 180, 0, 0.12), transparent 70%);
}

.landing__content {
  width: 100%;
  max-width: 1040px;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.landing__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 2rem;
}

.landing__headline {
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  margin-bottom: 1.25rem;
}

.landing__sub {
  margin-bottom: 3.5rem;
}

/* ── Choice cards ────────────────────────────────────────────── */
.landing__choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.25rem 2.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}

/* Identity bar along the bottom edge: AI blue / ATEX hazard stripes */
.choice::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--color-accent);
}

.choice--ex::after {
  background: repeating-linear-gradient(-45deg,
    var(--color-ex) 0 10px, var(--color-ex-dark) 10px 20px);
}

.choice:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -20px rgba(0, 113, 227, 0.4);
}

.choice--ex:hover {
  box-shadow: 0 22px 48px -20px rgba(138, 100, 0, 0.45);
}

.choice:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.choice--ex:focus-visible {
  outline-color: var(--color-ex);
}

.choice__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.5rem;
}

.choice__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.choice--ex .choice__label {
  color: var(--color-ex-ink);
}

.choice__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--color-text);
  margin-bottom: 1rem;
}

/* Marker highlight, as used for <em> in the ATEX hero */
.choice__title .ex {
  background: linear-gradient(transparent 62%, var(--color-ex) 62%);
  padding: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.choice__desc {
  flex-grow: 1;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.choice__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.choice__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  background: var(--color-accent);
  color: white;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 24px rgba(0, 113, 227, 0.3);
}

.choice--ex .choice__cta {
  background: var(--color-ex-dark);
  box-shadow: 0 4px 24px rgba(24, 24, 27, 0.25);
}

.choice__cta svg {
  transition: transform var(--duration) var(--ease-out);
}

.choice:hover .choice__cta svg {
  transform: translateX(4px);
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer--landing .footer__logo {
  margin-bottom: 1rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .landing__choices {
    grid-template-columns: 1fr;
  }

  .choice {
    padding: 2rem 1.5rem 2.25rem;
  }

  .landing__sub {
    margin-bottom: 2.5rem;
  }
}