/* =========================================================================
   Alphaiota Solution — the gateway
   A single deliberate choice. Nothing else on the page competes with it.
   ========================================================================= */
.gate-body { overflow-x: hidden; }

.gate {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(48px, 8vh, 96px) 0;
  background:
    radial-gradient(120% 90% at 50% -10%, #0A1224 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #05080F 60%, var(--bg) 100%);
  overflow: hidden;
}
.gate__aura {
  position: absolute; left: 50%; top: -22%; transform: translateX(-50%);
  width: 1100px; height: 1100px; max-width: 150vw; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(36,107,253,.16), transparent 58%),
    radial-gradient(circle at 62% 40%, rgba(122,92,255,.13), transparent 62%);
  animation: gateBreathe 11s var(--ease-in-out) infinite;
}
@keyframes gateBreathe { 0%,100% { opacity: .85; transform: translateX(-50%) scale(1); }
                          50%     { opacity: 1;   transform: translateX(-50%) scale(1.06); } }
.gate__grid-veil {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,163,194,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,194,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
}
.gate__inner { position: relative; z-index: 2; width: 100%; text-align: center; }

.gate__head { margin-bottom: clamp(30px, 6vh, 54px); }
.gate__logo {
  height: 30px; width: auto; margin: 0 auto;
  opacity: 0; animation: gateFade .9s var(--ease) .1s forwards;
}
@keyframes gateFade { to { opacity: 1; } }

.gate__lede { max-width: 780px; margin: 0 auto; }
.gate__eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: #6E8CFF; margin-bottom: 22px;
  opacity: 0; animation: gateFade .8s var(--ease) .25s forwards;
}
.gate__h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 5.6vw, 62px); line-height: 1.06; letter-spacing: -.035em;
  margin: 0 0 24px;
}
.gate__h1 .gl { display: block; overflow: hidden; }
.gate__h1 .gl > span {
  display: block; transform: translateY(105%);
  animation: glUp 1s var(--ease) forwards; animation-delay: var(--d, 0s);
}
@keyframes glUp { to { transform: none; } }
.gate__sub {
  color: var(--text-dim); font-size: clamp(15px, 1.6vw, 18px);
  max-width: 60ch; margin: 0 auto;
  opacity: 0; animation: gateFade .9s var(--ease) .55s forwards;
}

.gate__ask {
  margin: clamp(38px, 7vh, 66px) 0 24px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(15px, 1.7vw, 19px); color: var(--text);
  opacity: 0; animation: gateFade .8s var(--ease) .8s forwards;
  position: relative; display: inline-block;
}
.gate__ask::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 46px; height: 2px; border-radius: 2px; background: var(--grad-brand);
}

/* ---------------- the two doors ---------------- */
.gate__choices {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  max-width: 940px; margin: 34px auto 0; text-align: left;
}
.door {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(26px, 3.2vw, 38px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 30px);
  border-radius: 22px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(13,20,36,.86), rgba(6,10,19,.94));
  opacity: 0; transform: translateY(22px);
  animation: doorIn .9s var(--ease) forwards;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.door--plain { animation-delay: .95s; }
.door--dev   { animation-delay: 1.08s; }
@keyframes doorIn { to { opacity: 1; transform: none; } }

.door__glow {
  position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0;
  transition: opacity .5s var(--ease);
}
.door--plain .door__glow { background: radial-gradient(90% 70% at 20% 0%, rgba(36,107,253,.22), transparent 65%); }
.door--dev   .door__glow { background: radial-gradient(90% 70% at 80% 0%, rgba(122,92,255,.22), transparent 65%); }
.door:hover, .door:focus-visible { transform: translateY(-6px); border-color: rgba(122,92,255,.55); }
.door:hover { box-shadow: 0 40px 80px -50px rgba(60,90,255,.9); }
.door:hover .door__glow, .door:focus-visible .door__glow { opacity: 1; }

.door__num {
  position: absolute; top: 22px; right: 26px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--text-faint);
}
.door__ic {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center; color: #9FC0FF;
  background: rgba(36,107,253,.10); border: 1px solid rgba(36,107,253,.28);
}
.door--dev .door__ic { color: #C3AEFF; background: rgba(122,92,255,.10); border-color: rgba(122,92,255,.3); }
.door__ic svg { width: 22px; height: 22px; }
.door__t {
  font-family: var(--font-display); font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 700; letter-spacing: -.025em; margin: 0 0 10px; color: var(--text);
}
.door__d { color: var(--text-dim); font-size: 14.5px; margin: 0 0 20px; }
.door__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.door__tags i {
  font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px;
  background: rgba(255,255,255,.02);
}
.door__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--text);
}
.door__go svg { width: 17px; height: 17px; transition: transform .4s var(--ease); }
.door:hover .door__go svg { transform: translateX(5px); }
.door--plain .door__go { color: #9FC0FF; }
.door--dev   .door__go { color: #C3AEFF; }

.gate__foot {
  margin-top: clamp(30px, 5vh, 46px); font-size: 13px; color: var(--text-faint);
  opacity: 0; animation: gateFade .9s var(--ease) 1.3s forwards;
}

/* ---------------- responsive ---------------- */
@media (max-width: 760px) {
  .gate { padding: 70px 0 54px; align-items: flex-start; }
  .gate__choices { grid-template-columns: 1fr; max-width: 460px; }
  .door { padding: 24px 20px 20px; }
  .door__ic { width: 40px; height: 40px; margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gate__aura { animation: none; }
  .gate__logo, .gate__eyebrow, .gate__sub, .gate__ask, .gate__foot, .door {
    opacity: 1 !important; animation: none !important; transform: none !important;
  }
  .gate__h1 .gl > span { transform: none !important; animation: none !important; }
}

/* Without JS the doors are still plain links, so nothing here is required. */
.no-js .gate__logo, .no-js .gate__eyebrow, .no-js .gate__sub,
.no-js .gate__ask, .no-js .gate__foot, .no-js .door { opacity: 1; animation: none; }
.no-js .gate__h1 .gl > span { transform: none; animation: none; }

/* =========================================================================
   View switcher — shown on both inner sites so a reader can change lane
   ========================================================================= */
.viewswitch {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; z-index: 95;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px;
  background: rgba(7,11,20,.86); border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.9);
}
.viewswitch a {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.viewswitch a:hover { color: var(--text); }
.viewswitch a[aria-current="page"] { background: var(--grad-brand); color: #fff; }
.band-light .viewswitch { background: rgba(255,255,255,.9); }
@media (max-width: 620px) {
  .viewswitch { bottom: 12px; }
  .viewswitch a { padding: 7px 12px; font-size: 12px; }
}

/* Both inner lanes carry the fixed .viewswitch, so BOTH need clearance.
   This lives here (loaded by overview + engineering), not in engineering.css. */
.footer { padding-bottom: 84px; }
@media (max-width: 620px) { .footer { padding-bottom: 72px; } }