/* OpenAfterHours landing — Terminal Night */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--oah-slate-900); }
body { font-family: var(--font-sans); }

.lp-root {
  font-family: var(--font-sans);
  color: var(--fg);
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.lp-root a { color: inherit; text-decoration: none; }

:root { --lp-formula-mul: 1.6; }

/* ==================================================================
   TERMINAL NIGHT
   ================================================================== */

.t1 {
  background: var(--oah-slate-900);
  color: var(--oah-slate-100);
  min-height: 100%;
  position: relative;
  overflow: hidden;
}
.t1-fold {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.t1-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,200,87,.55), transparent 60%),
    radial-gradient(1px 1px at 78% 24%, rgba(255,200,87,.40), transparent 60%),
    radial-gradient(1px 1px at 92% 62%, rgba(255,200,87,.55), transparent 60%),
    radial-gradient(1px 1px at 6% 78%, rgba(255,200,87,.30), transparent 60%),
    radial-gradient(1px 1px at 44% 9%, rgba(255,200,87,.45), transparent 60%),
    radial-gradient(1px 1px at 62% 88%, rgba(255,200,87,.40), transparent 60%),
    radial-gradient(1px 1px at 30% 64%, rgba(255,200,87,.30), transparent 60%);
  pointer-events: none;
}

.t1-nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 56px;
  border-bottom: 1px solid rgba(216,222,233,0.08);
  z-index: 10;
}
.t1-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #fff; }
.t1-brand img { width: 28px; height: 28px; border-radius: 6px; }
.t1-brand .org { letter-spacing: -0.01em; }
.t1-nav-links { display: flex; align-items: center; gap: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--oah-slate-300); }
.t1-nav-links a:hover { color: var(--oah-orange); }
.t1-nav-links .gh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(216,222,233,0.18);
  border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: 13px;
  color: #fff;
  transition: border-color 200ms, background-color 200ms;
}
.t1-nav-links .gh-btn:hover { border-color: var(--oah-orange); background: rgba(255,145,0,0.08); }

.t1-hero {
  position: relative;
  padding: 64px 56px;
  text-align: center;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.t1-hero > * { position: relative; z-index: 1; }
.t1-hero > .t1-formula-layer { z-index: 0; }
.t1-formula-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.t1-formula-layer span {
  position: absolute;
  font-family: var(--font-mono);
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
  line-height: 1;
  transition: opacity 400ms var(--ease-out), color 200ms var(--ease-std);
  user-select: none;
  opacity: calc(var(--_op, 0.10) * var(--lp-formula-mul));
}
.t1-hero:hover .t1-formula-layer span { opacity: 0.16; }
.t1-formula-layer span.glow { color: var(--oah-orange) !important; opacity: 0.55 !important; }

.t1-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--oah-orange);
  margin-bottom: 24px;
  padding: 6px 14px;
  border: 1px solid rgba(255,145,0,0.3);
  border-radius: 999px;
  background: rgba(255,145,0,0.06);
}
.t1-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oah-terminal-green); box-shadow: 0 0 8px var(--oah-terminal-green); animation: t1-pulse 2.4s ease-in-out infinite; }
@keyframes t1-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.t1-owl-tile {
  width: 96px; height: 96px;
  margin: 0 auto 32px;
  border-radius: 22px;
  background: var(--oah-slate-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 60px rgba(255,145,0,0.18), inset 0 0 0 1px rgba(255,145,0,0.18);
  position: relative;
}
.t1-owl-tile img { width: 80px; height: 80px; border-radius: 16px; }
.t1-owl-tile::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 50%, rgba(255,145,0,0.25), transparent 70%);
  z-index: -1;
}

.t1-h1 {
  font-family: var(--font-display);
  font-size: 76px; line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: #fff;
  position: relative;
}
.t1-h1 .accent { color: var(--oah-orange); }
.t1-h1 .cursor {
  display: inline-block;
  width: 0.5ch;
  height: 0.85em;
  background: var(--oah-orange);
  vertical-align: -0.08em;
  margin-left: 6px;
  animation: t1-blink 1.05s steps(1, end) infinite;
}
@keyframes t1-blink { 50% { background: transparent; } }

.t1-sub {
  font-size: 19px; line-height: 1.55;
  color: var(--oah-slate-300);
  max-width: 640px; margin: 0 auto 36px;
  font-family: var(--font-sans);
}

.t1-hero-cta {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.t1-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--oah-orange); color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  transition: background-color 200ms, box-shadow 200ms, transform 200ms;
  border: none; cursor: pointer;
}
.t1-cta-primary:hover { background: var(--oah-orange-bright); box-shadow: 0 8px 24px rgba(255,145,0,0.35); }
.t1-cta-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  border: 1px solid rgba(216,222,233,0.22);
  border-radius: 10px;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  color: #fff;
  transition: border-color 200ms, color 200ms;
}
.t1-cta-secondary:hover { border-color: var(--oah-orange); color: var(--oah-orange); }
.t1-icn { width: 16px; height: 16px; flex-shrink: 0; }

.t1-meta-strip {
  display: flex; justify-content: center; gap: 48px;
  padding: 28px 56px;
  border-top: 1px solid rgba(216,222,233,0.08);
  border-bottom: 1px solid rgba(216,222,233,0.08);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--oah-slate-400);
  position: relative; z-index: 2;
  background: rgba(13,14,17,0.7);
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.t1-meta-strip span { display: inline-flex; align-items: center; gap: 8px; }
.t1-meta-strip span strong { color: var(--oah-slate-100); font-weight: 600; }
.t1-meta-strip .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oah-terminal-green); box-shadow: 0 0 6px var(--oah-terminal-green); }

/* Project cards — flip on hover */
.t1-projects {
  position: relative;
  padding: 96px 56px 32px;
  z-index: 2;
}
.t1-section-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oah-orange); margin-bottom: 12px;
}
.t1-section-h2 {
  font-family: var(--font-display); font-size: 36px; line-height: 1.15; font-weight: 700;
  letter-spacing: -0.025em; color: #fff; margin: 0 0 48px;
  max-width: 720px;
}
.t1-section-h2 em { font-style: normal; color: var(--oah-orange); }

.t1-card-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.t1-flip {
  perspective: 1600px;
  height: 360px;
  cursor: pointer;
}
.t1-flip-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}
.t1-flip:hover .t1-flip-inner,
.t1-flip.is-flipped .t1-flip-inner { transform: rotateY(180deg); }

.t1-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  background: var(--oah-slate-850);
  border: 1px solid rgba(216,222,233,0.10);
  padding: 32px;
  display: flex; flex-direction: column;
}
.t1-flip-face.back {
  transform: rotateY(180deg);
  background: #06070a;
  border-color: rgba(255,145,0,0.32);
  box-shadow: 0 0 0 1px rgba(255,145,0,0.08), 0 24px 48px rgba(0,0,0,0.6);
}
.t1-flip-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255,145,0,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.t1-flip-name {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oah-slate-300); margin-bottom: 8px;
}
.t1-flip-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; }
.t1-flip-desc { font-size: 14px; line-height: 1.6; color: var(--oah-slate-300); margin: 0 0 18px; flex: 1; }
.t1-flip-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.t1-flip-tag {
  font-family: var(--font-mono); font-size: 10px; padding: 3px 8px;
  background: rgba(216,222,233,0.06); color: var(--oah-slate-200);
  border-radius: 4px;
}
.t1-flip-flipnote {
  font-family: var(--font-mono); font-size: 11px; color: var(--oah-orange);
  display: inline-flex; align-items: center; gap: 6px;
}
.t1-flip-flipnote::before { content: "▸"; }

/* Back face: terminal */
.t1-term {
  font-family: var(--font-mono); font-size: 13px;
  background: #06070a; border-radius: 10px;
  padding: 16px;
  flex: 1;
  border: 1px solid rgba(216,222,233,0.10);
  overflow: hidden;
}
.t1-term-row { display: flex; gap: 8px; align-items: baseline; line-height: 1.7; }
.t1-term .pr { color: var(--oah-terminal-green); flex-shrink: 0; }
.t1-term .cmd { color: var(--oah-slate-100); }
.t1-term .out { color: var(--oah-slate-400); padding-left: 0; }
.t1-term .hl { color: var(--oah-orange); }
.t1-term .yl { color: var(--oah-owl-eye); }
.t1-term .gn { color: var(--oah-terminal-green); }
.t1-flip-back-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.t1-flip-back-head .name { font-family: var(--font-mono); font-size: 11px; color: var(--oah-slate-400); letter-spacing: 0.1em; text-transform: uppercase; }
.t1-flip-back-head .gh-link {
  font-family: var(--font-sans); font-size: 12px;
  color: var(--oah-orange);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Mission */
.t1-mission {
  position: relative; z-index: 2;
  padding: 96px 56px;
  border-top: 1px solid rgba(216,222,233,0.08);
  margin-top: 64px;
}
.t1-mission-grid {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px;
  align-items: start;
}
.t1-pillar { padding: 24px 0; border-top: 1px solid rgba(216,222,233,0.10); }
.t1-pillar:first-child { border-top: none; padding-top: 0; }
.t1-pillar h4 {
  font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #fff;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.t1-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--oah-slate-300); margin: 0; max-width: 56ch; }
.t1-pillar .num { font-family: var(--font-mono); font-size: 11px; color: var(--oah-orange); letter-spacing: 0.1em; margin-bottom: 6px; display: block; }

/* Footer */
.t1-foot {
  position: relative; z-index: 2;
  padding: 56px 56px 48px;
  border-top: 1px solid rgba(216,222,233,0.08);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--oah-slate-400);
}
.t1-foot .prompt { color: var(--oah-terminal-green); }
.t1-foot .col-r { text-align: right; }
.t1-foot a:hover { color: var(--oah-orange); }
.t1-foot-tag { color: var(--oah-slate-200); margin-bottom: 4px; }


/* ==================================================================
   Responsive
   ================================================================== */

@media (max-width: 880px) {
  .t1-nav { padding: 20px 24px; }
  .t1-hero { padding: 48px 24px; }
  .t1-h1 { font-size: 52px; letter-spacing: -0.03em; }
  .t1-sub { font-size: 17px; }
  .t1-meta-strip { gap: 20px 28px; padding: 20px 24px; font-size: 11px; }
  .t1-projects { padding: 72px 24px 24px; }
  .t1-section-h2 { font-size: 28px; margin-bottom: 32px; }
  .t1-card-grid { grid-template-columns: 1fr; }
  .t1-mission { padding: 72px 24px; margin-top: 32px; }
  .t1-mission-grid { grid-template-columns: 1fr; gap: 32px; }
  .t1-foot { padding: 40px 24px 32px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .t1-foot .col-r { text-align: left; }
}

@media (max-width: 560px) {
  .t1-nav-links { gap: 0; }
  .t1-nav-links a:not(.gh-btn) { display: none; }
  .t1-h1 { font-size: 40px; }
  .t1-owl-tile { width: 80px; height: 80px; margin-bottom: 24px; }
  .t1-owl-tile img { width: 64px; height: 64px; }
  .t1-formula-layer span:nth-child(2n) { display: none; }
  .t1-flip { height: 380px; }
  .t1-flip-face { padding: 24px; }
  .t1-flip-title { font-size: 22px; }
}

@media (hover: none) {
  .t1-flip-flipnote { display: none; }
  .t1-flip:hover .t1-flip-inner { transform: none; }
  .t1-flip.is-flipped .t1-flip-inner { transform: rotateY(180deg); }
}