/* ==========================================================================
   aiRA — Homepage
   Page-specific layout only. Anything reusable belongs in components.css.

   The hero carries the Tailark hero-block structure: beams and a vignette
   for atmosphere, an announcement pill, centred display serif, and the
   product surface in a wide app frame. Everything below it holds its own
   weight with typography and hairlines.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------
   Announcement pill, centred display serif with the trailing phrase in
   italic, framed CTA pair, then the product surface as the app-screen slot.
   ---------------------------------------------------------------------- */

/* The hero deliberately carries no padding overrides: it sits on the
   standard .section rhythm like every other block. */

/* Full-bleed vertical gradient: a quiet slate grey at the very top behind
   the transparent navbar, fading to the page ground before the how-it-fits
   section, with a whisper of brand tint at the top centre. Grey per the
   10 Sep direction change; indigo is accent-only on this page. */
.hero__grad {
  position: absolute;
  /* Overshoot the nav-height bleed by 2px: the nav is nav-h plus a 1px
     bottom border, and an exact bleed leaves a 1px page-bg line at y=0. */
  inset: calc(-1 * var(--nav-h) - 2px) 0 0;
  pointer-events: none;
  background:
    radial-gradient(64% 52% at 50% 0%,
      color-mix(in srgb, var(--indigo-500) 7%, transparent), transparent 72%),
    linear-gradient(180deg,
      var(--slate-200) 0%,
      var(--slate-100) 48%,
      var(--bg) 100%);
}
/* Positioned decor would otherwise paint over the static content wrappers. */
.hero > .padding-global { position: relative; }

/* Announcement pill: sparkle, claim, divider, then a circular port where
   the second arrow slides in on hover. */
.hero__announce {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-10);
  padding: 4px 4px 4px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  font-size: var(--t-body-sm);
  font-weight: 550;
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.hero__announce:hover { background: var(--slate-50); }

.hero__announce-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__announce-text .sparkle { width: 11px; height: 11px; color: var(--brand); flex: none; }

.hero__announce-sep {
  width: 1px;
  height: 14px;
  background: var(--border-strong);
}

.hero__announce-go {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  transition: background var(--dur) var(--ease);
}
.hero__announce:hover .hero__announce-go { background: var(--slate-200); }

.hero__announce-arrows {
  display: flex;
  width: 48px;
  transform: translateX(-50%);
  transition: transform var(--dur-slow) var(--ease);
}
.hero__announce:hover .hero__announce-arrows { transform: translateX(0); }
.hero__announce-arrows svg {
  width: 12px;
  height: 12px;
  margin: 6px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__announce,
  .hero__announce-go,
  .hero__announce-arrows { transition: none; }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display-0);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  color: var(--ink);
  max-width: 21ch;
  margin-bottom: var(--sp-6);
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--ink-3);
}

.hero__sub {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 36rem;
  margin-bottom: var(--sp-8);
  text-wrap: pretty;
}

.hero__cta {
  justify-content: center;
  margin-bottom: var(--sp-10);
}

/* Capability index: a mono label over a row of pill chips, in the same
   pill language as the announcement pill and the mechanism sources. */
.hero__asks {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__asks-label { margin-bottom: var(--sp-4); }

.hero__asklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
.hero__asklist li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-xs);
  font-size: var(--t-body-sm);
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
}
/* Official Phosphor icons (regular weight), inlined with currentColor. */
.hero__asklist svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--brand-ink);
}

/* ---- Hero product shot ---------------------------------------------------
   The real product screenshot in a hairline frame whose bottom fades into
   the page ground (Tailark hero-section treatment). The fade overlay
   overshoots the border by 1px so the frame dissolves with the image.
   ---------------------------------------------------------------------- */

.hero__shot {
  position: relative;
  margin-top: var(--sp-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--sp-2);
}
.hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-xl) - var(--sp-2));
}
.hero__shot-fade {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 45%, var(--bg) 100%);
}

@media (max-width: 768px) {
  .hero__shot { margin-top: var(--sp-10); padding: 4px; }
  .hero__shot img { border-radius: calc(var(--r-xl) - 4px); }
}

/* ---- Proof strip ------------------------------------------------------- */

.proof { padding-block: var(--sp-8); border-block: 1px solid var(--border); }
.proof__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6) var(--sp-10);
  flex-wrap: wrap;
}
.proof__label { flex: none; max-width: 15rem; }
.proof .logo-wall { flex: 1; min-width: 0; }

@media (max-width: 768px) {
  .proof__inner { gap: var(--sp-5); }
  /* flex:none plus max-content text overflowed narrow viewports */
  .proof__label { flex: 1 1 100%; max-width: none; }
  .proof .logo-wall { gap: var(--sp-3) var(--sp-6); }
}

/* ---- Mechanism: data -> judgement -> channels --------------------------
   Dark architecture diagram (Steep-style): source pills feed the aiRA core
   over dashed wires, and the core fans out to the channels. Neutral glyphs
   hold the seats in the pills and rows until the real brand logos arrive.
   ---------------------------------------------------------------------- */

.mech { overflow: hidden; }
.mech > .padding-global { position: relative; }

/* Violet glow rising from the bottom edge, mixed from the brand tokens. */
.mech__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 64% at 50% 112%,
      color-mix(in srgb, var(--indigo-500) 14%, transparent), transparent 72%),
    radial-gradient(46% 40% at 16% 116%,
      color-mix(in srgb, var(--indigo-400) 8%, transparent), transparent 75%);
}

.mech__diagram {
  position: relative;   /* the measured wires overlay anchors to this */
  display: grid;
  grid-template-columns:
    minmax(180px, 0.9fr) minmax(60px, 1fr) auto
    minmax(60px, 1fr) minmax(210px, 0.9fr);
  align-items: center;
}
.mech__sources { grid-column: 1; }
.mech__core { grid-column: 3; }
.mech__dest { grid-column: 5; }

.mech__col-label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-inv-3);
  margin-bottom: var(--sp-4);
}

/* Bare brand lockups (dark-surface variants), no pill chrome. Heights are
   set per logo in the markup: the stacked lockups (BigQuery, Redshift)
   need more height than the single-line ones to read optically equal. */
.mech__sources {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
}
.mech__sources .mech__col-label { margin-bottom: 0; }
.mech__sources img { display: block; }

/* Dashed wires, generated by js/diagram.js from measured logo and node
   positions so every line terminates on the thing it connects. */
.mech__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.mech__wires path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
}

/* Animated beams (Magic UI AnimatedBeam, in CSS): each wire carries a
   duplicate path normalised to pathLength=100 whose dash pattern sums to
   exactly 100, so sliding the offset one period per loop sends a single
   pulse start-to-end seamlessly. Delays are staggered inline per path. */
.mech__wires .mech__beam {
  /* Not a solid comet: three faint dots glide along the wire. The pattern
     still sums to exactly 100 so each loop stays seamless. */
  stroke: color-mix(in srgb, var(--indigo-300) 70%, transparent);
  stroke-width: 2;
  stroke-dasharray: 0.5 2.5 0.5 2.5 0.5 93.5;
  animation: mech-beam 6s linear infinite;
}
@keyframes mech-beam {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mech__wires .mech__beam { display: none; }
}

/* The core as a compact node (Tailark illustration style): the aiRA mark
   in a circle with a dashed halo ring, a soft indigo glow, an orbiting
   border beam, and a mono label hung beneath. */
.mech__core {
  position: relative;
  display: flex;
  justify-content: center;
}

.mech__core-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 80px color-mix(in srgb, var(--indigo-500) 28%, transparent);
}
.mech__core-node img { width: 40px; height: 40px; }

/* Dashed halo ring around the node. */
.mech__core-node::after {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

/* Hung below the node so the circle stays on the wires' centre line. */
.mech__core-label {
  position: absolute;
  top: calc(100% + var(--sp-8));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--ink-inv-3);
}

/* Border beam (Magic UI BorderBeam, in CSS): a lit segment of a conic
   gradient orbits the node's border, masked to a 1px ring. */
@property --mech-orbit {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.mech__core-node::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--mech-orbit),
    transparent 0deg 300deg,
    color-mix(in srgb, var(--indigo-300) 90%, transparent) 330deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: mech-orbit 8s linear infinite;
}
@keyframes mech-orbit {
  to { --mech-orbit: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .mech__core-node::before { display: none; }
}

/* Channel logos mirror the sources: bare lockups, right-aligned. */
.mech__dest {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-6);
}
.mech__dest .mech__col-label { margin-bottom: 0; }
.mech__dest img { display: block; }

.mech__foot { margin-top: var(--sp-10); color: var(--ink-inv-3); }

@media (max-width: 991px) {
  .mech__diagram { grid-template-columns: 1fr; gap: var(--sp-6); }
  .mech__sources, .mech__core, .mech__dest { grid-column: auto; }
  .mech__wires { display: none; }
  .mech__sources, .mech__dest {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-5) var(--sp-8);
  }
  .mech__sources .mech__col-label, .mech__dest .mech__col-label { width: 100%; }
  /* The hung label needs cleared space when the diagram stacks. */
  .mech__core { margin-block: var(--sp-6) var(--sp-16); }
}

/* ---- Questions ---------------------------------------------------------- */

.asks { background: var(--bg-subtle); }
.asks__note { margin-top: var(--sp-6); }

/* ---- Differentiators ----------------------------------------------------
   Three arguments as editorial rows: figure, claim, case. Hairlines, not
   card chrome.
   ---------------------------------------------------------------------- */

.diff__list { border-top: 1px solid var(--border-strong); }

.diff__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 0.95fr) minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-10);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--border);
}
.diff__n { color: var(--brand); padding-top: 8px; }
.diff__claim {
  font-size: var(--t-display-3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--tr-title);
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.diff__body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  align-self: center;
  max-width: 36rem;
  text-wrap: pretty;
}
.diff__body strong { color: var(--ink); font-weight: 600; }

.diff__cta { margin-top: var(--sp-8); }

@media (max-width: 991px) {
  .diff__row { grid-template-columns: 3rem minmax(0, 1fr); }
  .diff__n { padding-top: 4px; }
  .diff__body { grid-column: 2; }
}

/* ---- Closing CTA --------------------------------------------------------
   The offer on the left, the three terms as a thread on the right. The
   thread is the reasoning trace made visual; here it carries the promises.
   ---------------------------------------------------------------------- */

.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--sp-12) var(--sp-20);
  align-items: center;
}

.close__title {
  font-size: var(--t-display-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.close__sub {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-inv-2);
  max-width: 36rem;
  margin-bottom: var(--sp-8);
  text-wrap: pretty;
}

.close__thread { max-width: 28rem; }

@media (max-width: 991px) {
  .close__grid { grid-template-columns: 1fr; }
}