/* ============================================================
   Allion LLC — entry page
   Two doors. Each one carries real copy rather than a bare
   button, so the page still says what the company does to
   anyone (or any crawler) that lands here.
   ============================================================ */

:root {
  --ink:     #10161f;
  --ink-2:   #5b6675;
  --navy:    #0c1421;
  --navy-2:  #131f31;
  --blue:    #1358d6;
  --line:    rgba(0,0,0,.12);
  --ease:    cubic-bezier(.22,.61,.36,1);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: -6px; }

/* ── masthead ───────────────────────────────────────────── */
.mast {
  position: absolute;
  top: 0; left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 26px 30px;
  /* the masthead always sits over the dark voice panel — side-by-side on
     desktop, top of the stack on mobile — so plain white is safe.
     mix-blend-mode was inverting it to a muddy tan against the navy. */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.mark { display: grid; place-items: center; }
.mast .logo { width: 86px; height: auto; }
.mast__name b { color: #6ea8ff; font-weight: inherit; }
.mast__name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.mast__name span { font-weight: 500; opacity: .65; }

/* ── the two doors ──────────────────────────────────────── */
.doors {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 64px clamp(28px, 4.5vw, 64px) clamp(40px, 5vw, 64px);
  isolation: isolate;
  transition: flex-grow .5s var(--ease);
}

/* background wash, animated on hover without touching layout */
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.door--voice::before {
  background:
    radial-gradient(760px 380px at 30% 12%, rgba(19,88,214,.30), transparent 68%),
    linear-gradient(180deg, var(--navy), var(--navy-2));
}
.door--apps::before {
  background: linear-gradient(180deg, #fbfbfd, #eceef2);
}
.door:hover::before { transform: scale(1.04); }

.door--voice { color: #fff; }
.door--apps  { color: var(--ink); }

/* thin divider between the panels */
.door--apps { box-shadow: inset 1px 0 0 rgba(0,0,0,.14); }

/* ── decorative art ─────────────────────────────────────── */
.door__art {
  position: absolute;
  inset: auto 0 auto 0;
  top: clamp(90px, 16vh, 190px);
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.door--voice .door__art { color: #4d7fd6; opacity: .5; padding-inline: 8%; }
.door:hover .door__art { transform: translateY(-8px); }

.door__art--icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.8vw, 22px);
  opacity: .95;
}
.door__art--icons img {
  width: clamp(52px, 7vw, 84px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 23%;
  box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 16px 30px -12px rgba(0,0,0,.34);
}
.door__art--icons img:nth-child(1) { transform: translateY(-10px); }
.door__art--icons img:nth-child(3) { transform: translateY(-14px); }
.door__art--icons img:nth-child(4) { transform: translateY(4px); }

/* ── door copy ──────────────────────────────────────────── */
.door__body { max-width: 42ch; }
.door__kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.door--voice .door__kicker { color: #6ea8ff; }
.door--apps  .door__kicker { color: var(--blue); }

.door__title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 650;
  margin-bottom: 14px;
}
.door__lede { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; }
.door--voice .door__lede { color: #a6b3c4; }
.door--apps  .door__lede { color: var(--ink-2); }

.door__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.door__facts li {
  font-size: 12px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 980px;
  white-space: nowrap;
}
.door--voice .door__facts li { background: rgba(255,255,255,.11); color: #cfd8e4; }
.door--apps  .door__facts li { background: rgba(0,0,0,.055); color: var(--ink-2); }

.door__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-size: 16px;
  font-weight: 600;
}
.door--voice .door__go { color: #fff; }
.door--apps  .door__go { color: var(--blue); }
.door__go i {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.door:hover .door__go i { transform: rotate(45deg) translate(3px, -3px); }

/* ── footer ─────────────────────────────────────────────── */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: space-between;
  padding: 16px 30px;
  background: #08101b;
  color: #6f7d8f;
  font-size: 12.5px;
}
.foot a { color: #8fa2bd; }
.foot a:hover { color: #fff; }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; }
  .door {
    min-height: 62svh;
    padding-top: clamp(96px, 22vh, 190px);
    justify-content: flex-end;
  }
  .door--apps { box-shadow: inset 0 1px 0 rgba(0,0,0,.14); }
  .door__art { top: clamp(70px, 12vh, 120px); }
  .mast { padding: 20px 22px; }
}

/* a very short window can't fit two stacked panels plus art */
@media (max-height: 560px) and (min-width: 861px) {
  .door { padding-top: 40px; }
  .door__art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}