/* Homepage. Brand only: navy, amber, teal. Scoped so other pages are untouched. */

body:has(.home) .footer { margin-top: 0; }
.home .close { margin-bottom: 0; }
.home .close p:last-child { margin-bottom: 0; }

.home {
  --ink: #f4f6f8;
  --navy: #0c1420;
  --navy-2: #131e2e;
  --amber: #f2a032;
  --amber-2: #f8b65c;
  --teal: #1a8fa3;
}

.home h2 {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.kicker {
  margin: 0 0 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #9a6212;
}
.kicker--on-dark { color: var(--amber-2); }
.lede { font-size: 17px; line-height: 1.5; max-width: 46ch; color: var(--text-muted); }
.home .kicker--on-dark + h2,
.gap h2, .proof h2, .who h2, .close h2 { color: var(--ink); }

/* --- Hero ------------------------------------------------------------------ */
.stage {
  position: relative;
  overflow: hidden;
  padding: 36px 0 72px;
  color: var(--ink);
  background:
    radial-gradient(820px 480px at 80% 10%, rgba(242, 160, 50, .28), transparent 60%),
    radial-gradient(640px 420px at 8% 90%, rgba(10, 110, 128, .28), transparent 58%),
    linear-gradient(180deg, #070d16 0%, var(--navy) 55%, #16283a 100%);
}
.stage__glow {
  position: absolute; inset: -30% -10% auto; height: 80%;
  background: conic-gradient(from 80deg, transparent, rgba(242, 160, 50, .2), transparent 42%, rgba(26, 143, 163, .18), transparent 72%);
  animation: spin 32s linear infinite;
  pointer-events: none;
}
.stage__orb {
  position: absolute; border-radius: 50%; filter: blur(8px); pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}
.stage__orb--a { width: 220px; height: 220px; right: 8%; top: 12%; background: rgba(242, 160, 50, .16); }
.stage__orb--b { width: 160px; height: 160px; left: 6%; bottom: 10%; background: rgba(26, 143, 163, .18); animation-delay: -5s; }
.stage__grid { position: relative; z-index: 1; }

.home .aihero--stage {
  background: none; border-radius: 0; margin: 0; padding: 8px 0 0;
  overflow: visible;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.1fr);
  gap: 28px; align-items: center;
}
.home .aihero--stage::after { display: none; }
.home .aihero--stage h1 {
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: 0 0 16px;
}
.home .aihero--stage h1 em { color: var(--amber-2); }
.home .aihero--stage .aihero__lede { font-size: 16.5px; max-width: 42ch; color: #c5ced8; }
.home .aihero__eyebrow { color: #f8e2c0; background: rgba(242, 160, 50, .16); border-color: rgba(242, 160, 50, .4); }
.home .aihero__eyebrow i { background: var(--amber); box-shadow: 0 0 0 0 rgba(242, 160, 50, .55); }

.stage__pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.stage__pills li {
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
}
.stage__show { position: relative; min-width: 0; }
.home .stage__show .aiconsole {
  border-radius: 22px;
  border-color: rgba(242, 160, 50, .35);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.orbit {
  position: relative; z-index: 1; margin-top: 22px;
  width: 118px; height: 118px; border-radius: 28px;
  display: grid; place-items: center;
  background: rgba(19, 30, 46, .72);
  border: 1px solid rgba(242, 160, 50, .45);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  pointer-events: none;
}
.orbit span {
  position: absolute; inset: 10px; border-radius: 50%;
  border: 1px dashed rgba(248, 182, 92, .7);
  animation: spin 12s linear infinite;
}
.orbit span:nth-child(2) { inset: 22px; animation-duration: 8s; animation-direction: reverse; border-color: rgba(26, 143, 163, .8); }
.orbit span:nth-child(3) { inset: 34px; animation-duration: 5s; border-style: solid; border-color: rgba(242, 160, 50, .9); }
.orbit b { position: relative; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-2); }

/* --- Ribbon ---------------------------------------------------------------- */
.ribbon { overflow: hidden; background: var(--navy-2); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.ribbon__track { display: flex; gap: 28px; width: max-content; padding: 14px 0; animation: ticker 36s linear infinite; }
.ribbon span {
  color: #d5dde6; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.ribbon span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 28px; border-radius: 50%; background: var(--amber); vertical-align: middle; }

/* --- Why: overlapping stamps on a giant word --------------------------- */
.why { position: relative; overflow: hidden; background: #f4efe6; color: #151a1f; padding: 64px 0 36px; }
.why__mesh, .why__ghost { position: absolute; pointer-events: none; }
.why__mesh {
  inset: auto -10% -30% -10%; height: 55%;
  background: radial-gradient(500px 240px at 20% 60%, rgba(242, 160, 50, .35), transparent 70%);
  animation: mesh 16s ease-in-out infinite alternate;
}
.why__ghost {
  right: -2%; top: 40px; margin: 0;
  font-size: clamp(140px, 22vw, 320px); font-weight: 800; letter-spacing: -.06em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(19, 30, 46, .18);
}
.why .wrap { position: relative; z-index: 1; max-width: 640px; margin-right: auto; }
.why__cluster {
  position: relative; height: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 920px; margin: 28px auto 0; padding: 0 20px 8px;
}
.why__stamp {
  position: relative; width: auto; min-height: 0; left: auto; right: auto; top: auto; bottom: auto;
  border-radius: 28px; padding: 26px 24px 22px;
  box-shadow: 0 24px 50px rgba(16, 24, 32, .16);
  animation: floaty 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
.why__stamp b { font-size: 13px; letter-spacing: .12em; }
.why__stamp h3 { margin: 8px 0; font-size: 22px; letter-spacing: -.03em; }
.why__stamp p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.why__stamp:nth-child(1) { background: #131e2e; color: #f4f6f8; transform: rotate(-1.5deg); z-index: 1; }
.why__stamp:nth-child(2) { background: #f2a032; color: #21180a; transform: rotate(1.5deg); z-index: 2; }
.why__stamp:nth-child(3) { background: #0a6e80; color: #f4f6f8; transform: rotate(1deg); z-index: 3; }
.why__stamp:nth-child(4) { background: #fff; color: #151a1f; transform: rotate(-1deg); z-index: 2; }

/* --- Gap ------------------------------------------------------------------- */
.gap {
  position: relative; overflow: hidden; color: var(--ink);
  padding: 84px 0;
  background: linear-gradient(165deg, #0e1724, #1a1208 80%);
}
.gap__glow {
  position: absolute; width: 520px; height: 520px; right: -80px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 160, 50, .28), transparent 68%);
  animation: pulse 8s ease-in-out infinite;
  pointer-events: none;
}
.gap .wrap { position: relative; }
.gap__stage {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch;
  max-width: 1100px; margin: 36px auto 0; padding: 0 28px;
}
.gap__mail, .gap__brief { border-radius: 22px; padding: 22px; min-height: 340px; }
.gap__mail { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.2); transform: rotate(-1.5deg); }
.gap__mail header, .gap__brief header { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #a9b6c6; margin-bottom: 18px; }
.gap__mail header i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.gap__from { margin: 0; color: #a9b6c6; font-size: 13px; }
.gap__mail blockquote { margin: 14px 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.gap__missing { display: flex; flex-wrap: wrap; gap: 8px; }
.gap__missing s { color: #8b98a8; text-decoration-thickness: 2px; font-size: 14px; }
.gap__wait { margin: 18px 0 0; color: #f8b65c; font-weight: 700; }
.gap__beam { display: grid; place-items: center; width: 84px; }
.gap__beam span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  letter-spacing: .2em; text-transform: uppercase; font-size: 11px; font-weight: 800; color: var(--amber-2);
}
.gap__beam::before { content: ""; display: block; width: 2px; height: 70px; margin: 0 auto 10px; background: linear-gradient(var(--amber), transparent); animation: beam 1.8s ease-in-out infinite; }
.gap__brief {
  background: linear-gradient(180deg, #1d3148, #14202e);
  border: 1px solid rgba(242, 160, 50, .4);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transform: rotate(1deg);
}
.gap__brief header { color: var(--amber-2); }
.gap__row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.gap__row b { font-size: 13px; color: #a9b6c6; font-weight: 600; }
.gap__row em {
  font-style: normal; font-weight: 700;
  display: block; overflow: hidden; white-space: nowrap;
  animation: fill 4.5s ease infinite;
  animation-delay: calc(var(--i) * .35s);
}

/* --- Proof ----------------------------------------------------------------- */
.proof { position: relative; overflow: hidden; color: var(--ink); background: #101820; padding-top: 72px; }
.proof__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(242, 160, 50, .08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: sheen 9s linear infinite;
}
.proof__head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 28px; }
.proof__head h2 { margin: 0; }
.band { position: relative; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.band__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 42px 28px;
  display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: 18px; align-items: center;
}
.band b { font-size: clamp(48px, 6vw, 84px); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(248, 182, 92, .7); }
.band h3 { margin: 0; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.03em; }
.band p { margin: 0; color: #c5ced8; font-size: 16px; max-width: 42ch; }
.band:nth-child(odd) { background: rgba(242, 160, 50, .06); }
.band:nth-child(even) .band__inner { direction: rtl; }
.band:nth-child(even) .band__inner > * { direction: ltr; }

/* --- Path ------------------------------------------------------------------ */
.path { position: relative; overflow: hidden; background: #fff; padding: 80px 0; color: #151a1f; }
.path__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(480px 200px at 0% 0%, rgba(242, 160, 50, .18), transparent 70%),
    radial-gradient(420px 220px at 100% 100%, rgba(10, 110, 128, .12), transparent 70%);
  animation: mesh 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.path__head { position: relative; text-align: center; }
.path__line {
  position: relative; list-style: none; margin: 10px auto 0; padding: 10px 0 20px;
  max-width: 920px;
}
.path__line::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(#f2a032, #0a6e80);
  transform: translateX(-50%);
}
.path__line li { position: relative; width: 50%; padding: 18px 48px; }
.path__line .is-left { text-align: right; }
.path__line .is-right { margin-left: 50%; }
.path__line span {
  position: absolute; top: 28px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: #f2a032; color: #21180a; font-weight: 800;
  box-shadow: 0 0 0 6px #fff;
  animation: beacon 2.6s ease-out infinite;
  animation-delay: calc(var(--i) * .3s);
}
.path__line .is-left span { right: -21px; }
.path__line .is-right span { left: -21px; }
.path__line h3 { margin: 0 0 4px; font-size: 22px; }
.path__line p { margin: 0; color: #5a646f; }

/* --- Who ------------------------------------------------------------------- */
.who {
  position: relative; overflow: hidden; color: var(--ink); padding: 80px 0;
  background: #0c1420;
}
.who__glow {
  position: absolute; inset: auto 0 0; height: 50%;
  background: radial-gradient(600px 220px at 50% 100%, rgba(242, 160, 50, .22), transparent 70%);
  animation: pulse 7s ease-in-out infinite;
  pointer-events: none;
}
.who .wrap { position: relative; }
.who__bento {
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 240px 200px; gap: 12px;
}
.who__bento article {
  position: relative; overflow: hidden; border-radius: 26px; padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid rgba(255,255,255,.08);
}
.who__bento article:nth-child(1) { grid-row: 1 / 3; background: linear-gradient(160deg, #1d3148, #0c1420); }
.who__bento article:nth-child(2) { background: #f2a032; color: #21180a; }
.who__bento article:nth-child(3) { background: #0a6e80; }
.who__bento article:nth-child(4) { grid-column: 1 / -1; min-height: 160px; background: linear-gradient(90deg, #1a1208, #131e2e); }
.who__bento em {
  position: absolute; right: -6px; top: -18px; font-style: normal; font-weight: 800;
  font-size: clamp(64px, 8vw, 120px); letter-spacing: -.05em; line-height: .8; opacity: .16;
}
.who__bento h3 { position: relative; margin: 0 0 6px; font-size: 28px; }
.who__bento p { position: relative; margin: 0; max-width: 46ch; }
.who__bento article:nth-child(2) p { color: #3a2a10; }

/* --- Honest ---------------------------------------------------------------- */
.honest { position: relative; overflow: hidden; background: #f4f7f8; padding: 80px 0; color: #151a1f; }
.honest__mesh {
  position: absolute; width: 460px; height: 460px; left: -120px; bottom: -180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 110, 128, .16), transparent 68%);
  animation: drift 12s ease-in-out infinite;
  pointer-events: none;
}
.honest .wrap { position: relative; }
.manifesto { list-style: none; margin: 28px 0 0; padding: 0; position: relative; }
.manifesto li {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center;
  padding: 22px 8vw; border-top: 1px solid rgba(19, 30, 46, .1);
}
.manifesto li:last-child { border-bottom: 1px solid rgba(19, 30, 46, .1); }
.manifesto strong {
  font-size: clamp(28px, 4vw, 52px); letter-spacing: -.04em; line-height: 1;
  text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: #f2a032;
}
.manifesto span { color: #5a646f; font-size: 16px; }

/* --- Close ----------------------------------------------------------------- */
.close {
  position: relative; overflow: hidden; text-align: center; color: var(--ink);
  padding: 96px 0;
  background:
    radial-gradient(700px 320px at 50% 120%, rgba(242, 160, 50, .35), transparent 60%),
    radial-gradient(500px 240px at 50% -20%, rgba(26, 143, 163, .25), transparent 60%),
    #0b121c;
}
.close__glow {
  position: absolute; inset: -20%;
  background: conic-gradient(from 0deg, transparent, rgba(242, 160, 50, .15), transparent 40%, rgba(26, 143, 163, .12), transparent 75%);
  animation: spin 26s linear infinite;
  pointer-events: none;
}
.close__inner { position: relative; max-width: 760px; }
.close__inner h2 { margin-left: auto; margin-right: auto; }
.close__inner p { color: #c5ced8; font-size: 17px; }

@keyframes spin { to { transform: rotate(1turn); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drift {
  50% { transform: translate3d(12px, -16px, 0); }
}
@keyframes mesh { to { transform: translate3d(0, -12px, 0) scale(1.05); } }
@keyframes pulse { 50% { opacity: .55; transform: scale(1.06); } }
@keyframes sheen { to { background-position: -200% 0; } }
@keyframes liveglow {
  50% { box-shadow: 0 0 0 1px rgba(242, 160, 50, .35), 0 16px 40px rgba(242, 160, 50, .12); }
}
@keyframes beacon {
  70% { box-shadow: 0 0 0 8px rgba(242, 160, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 160, 50, 0); }
}
@keyframes floaty {
  50% { translate: 0 -8px; }
}
@keyframes beam { 50% { opacity: .3; transform: scaleY(.6); } }
@keyframes fill {
  0% { max-width: 0; }
  40%, 100% { max-width: 100%; }
}

@media (max-width: 1100px) {
  .home .aihero--stage { grid-template-columns: 1fr; }
  .why { min-height: 0; }
  .why__cluster { height: auto; display: grid; gap: 12px; padding: 0 20px 20px; }
  .why__stamp, .why__stamp:nth-child(1), .why__stamp:nth-child(2), .why__stamp:nth-child(3), .why__stamp:nth-child(4) {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none;
  }
  .gap__stage, .band__inner, .manifesto li { grid-template-columns: 1fr; }
  .gap__beam { width: auto; height: 48px; }
  .gap__beam span { writing-mode: horizontal-tb; transform: none; }
  .gap__beam::before { display: none; }
  .who__bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .who__bento article:nth-child(1), .who__bento article:nth-child(4) { grid-row: auto; grid-column: auto; min-height: 180px; }
  .path__line::before { left: 20px; }
  .path__line li, .path__line .is-right { width: auto; margin: 0; text-align: left; padding: 12px 12px 12px 64px; }
  .path__line .is-left span, .path__line .is-right span { left: 0; right: auto; }
}
@media (max-width: 700px) {
  .home .aihero--stage h1 { font-size: 36px; }
  .why__ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage__glow, .stage__orb, .orbit span, .ribbon__track, .why__mesh, .why__stamp,
  .gap__glow, .gap__beam::before, .gap__row em, .proof__wash, .path__mesh, .path__line span,
  .who__glow, .honest__mesh, .close__glow {
    animation: none !important;
  }
}