/* Hero — positions come from the Figma frame (1309 x 707, grid lines at x=0 / x=1309) */
.hero {
  position: relative;
  border-bottom: 1px solid var(--color-line);
  /* keep the stage inside the 1440 container with the gutter lines, but let the bottom line run full width */
  padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.hero__stage {
  position: relative;
  /* the hero always fills the viewport under the sticky nav (dynamic units so mobile browser bars don't cut it) */
  min-height: max(640px, calc(100vh - var(--nav-h) - 1px));
  min-height: max(640px, calc(100svh - var(--nav-h) - 1px));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden;
  border-inline: 1px solid var(--color-line);
}

/* ---- background ---- */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__grid { position: absolute; left: calc(50% - 654.5px - 128px); top: -232px; width: 1775px; height: 1533px; opacity: .09; }
.hero__grid-v { position: absolute; left: 46.6px; top: 182.8px; width: 1533px; height: 1167px; max-width: none; }
.hero__grid-h { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* natural size so the rotated lines keep the same 80.7px pitch as the vertical ones (square cells);
   the -16.5px shift snaps the lines to the shaded blocks */
.hero__grid-h img { width: 1564.53px; height: 1775.06px; max-width: none; transform: translateY(-16.5px) rotate(-90deg); transform-origin: center; }
/* blocks + decor are laid out in the 1309px Figma frame, kept centred so they stay clear of the chat at any width */
.hero__blocks { position: absolute; top: 50%; height: 707px; margin-top: -353.5px; left: 50%; width: 1309px; margin-left: -654.5px; opacity: .5; }
.hero__blocks i { position: absolute; background: rgba(17, 17, 17, 0.05); }
/* light pulses travelling along the grid lines (js/pulses.js) */
.hero__pulses { position: absolute; top: 50%; height: 707px; margin-top: -353.5px; left: 50%; width: 1309px; margin-left: -654.5px; overflow: visible; }
.pulse { position: absolute; display: block; border-radius: 2px; opacity: .85; will-change: transform; }
.pulse--h { left: 0; width: 96px; height: 2px; background: linear-gradient(90deg, transparent, var(--c)); }
.pulse--v { top: 0; height: 96px; width: 2px; background: linear-gradient(180deg, transparent, var(--c)); }
.pulse--h.is-rev { background: linear-gradient(270deg, transparent, var(--c)); }
.pulse--v.is-rev { background: linear-gradient(0deg, transparent, var(--c)); }
.hero__fade {
  position: absolute;
  left: calc(50% + 4.5px); top: calc(50% - 3px);
  width: 840px; height: 513px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #fff 0%, rgba(255,255,255,0) 100%);
}

/* ---- decor: tiles + flowing dashed lines ---- */
.hero__decor { position: absolute; z-index: 1; top: 50%; height: 707px; margin-top: -353.5px; left: 50%; width: 1309px; margin-left: -654.5px; pointer-events: none; }

.dash { position: absolute; display: block; }
.dash-h {
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 8px);
  animation: dash-h 1s linear infinite;
}
.dash-v {
  width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--c) 0 4px, transparent 4px 8px);
  animation: dash-v 1s linear infinite;
}
.dash-h--rev { animation-direction: reverse; }
.dash-v--up  { animation-direction: reverse; }
@keyframes dash-h { to { background-position-x: 8px; } }
@keyframes dash-v { to { background-position-y: 8px; } }

/* arrowheads: tiny triangles */
.head { position: absolute; display: block; background: var(--c); }
.head--down { width: 11.55px; height: 10px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.head--up   { width: 11.55px; height: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.head--left { width: 10px; height: 11.55px; clip-path: polygon(0 50%, 100% 0, 100% 100%); }

.tile {
  position: absolute; display: block; overflow: hidden;
  /* the tile gets "hit" by its arrow, is pushed away, then springs back */
  animation: tile-hit 2.4s cubic-bezier(.3, 0, .3, 1) infinite;
}
.tile img { position: absolute; max-width: none; }
@keyframes tile-hit {
  0%, 58%  { transform: translate(0, 0) scale(1); }
  66%      { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.96); }
  78%      { transform: translate(calc(var(--dx, 0) * -.35), calc(var(--dy, 0) * -.35)) scale(1.02); }
  90%, 100%{ transform: translate(0, 0) scale(1); }
}

.tile--pdf { left: 157px; top: 171px; width: 69px; height: 45px; --dy: 6px; }
.tile--pdf img { width: 141.19%; height: 127.36%; left: -20.81%; top: -16.86%; }
.tile--ppt { left: 158px; top: 503px; width: 69px; height: 45px; --dy: -6px; animation-delay: -0.6s; }
.tile--ppt img { width: 143.9%; height: 126.93%; left: -20.91%; top: -17.2%; }
.tile--txt { right: 158px; top: 65px; width: 69px; height: 45px; --dx: -6px; animation-delay: -1.2s; }
.tile--txt img { width: 145.09%; height: 127.66%; left: -21.59%; top: -17.66%; }
.tile--fcs { right: 254px; top: 547px; width: 69px; height: 40px; --dx: -6px; animation-delay: -1.8s; }
.tile--fcs img { width: 105.19%; height: 115.32%; left: -3.01%; top: -5.88%; }

/* ---- content ---- */
.hero__content {
  position: relative;
  z-index: 2;                        /* copy, chat and buttons always sit above the moving lines */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 24px 0 64px;               /* the extra bottom space nudges the group up, as in the Figma */
  margin-left: 4.5px;
}
.hero__copy { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(558px, 100%); text-align: center; }
.hero__title {
  margin: 0;
  font: 500 var(--fs-display)/var(--lh-display) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}
.hero__title > span { display: block; }
.hero__title em { font-style: normal; }
.hero__sub { margin: 0; }
.hero__cta { display: flex; gap: 10px; align-items: center; margin-top: 34px; }
.hero__cta + .chat { margin-top: 34px; }

/* ---- chat ---- */
@property --chat-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.chat {
  position: relative;
  width: min(666px, 100%);
  min-height: 113px;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 10px 14px;
  background: #fff;
  border: 1px solid rgba(35, 92, 251, 0.55);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(35, 92, 251, 0.25),
    0 6px 16px rgba(35, 92, 251, 0.18),
    0 14px 32px rgba(35, 92, 251, 0.10);
}
/* thin #235CFB highlight travelling around the border + a soft glow */
.chat::before, .chat::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--chat-angle), transparent 0 72%, rgba(35, 92, 251, 0.15) 82%, #235CFB 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: chat-orbit 5s linear infinite;
  pointer-events: none;
}
.chat::after { filter: blur(4px); opacity: .7; padding: 2px; inset: -2px; }
@keyframes chat-orbit { to { --chat-angle: 360deg; } }

.chat__field { position: relative; flex: 1; }
.chat__input,
.chat__ghost {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0;
  font: 400 16px/24px var(--font-ui);
}
.chat__input {
  position: relative;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  caret-color: var(--color-primary);
}
.chat__input::placeholder { color: #A3A3A3; opacity: 1; }
/* auto-typed prompt sits in a ghost layer so the visitor's field stays empty */
.chat__ghost { position: absolute; inset: 0; color: #A3A3A3; pointer-events: none; white-space: pre-wrap; }
.chat__caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--color-ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chat.is-auto .chat__input::placeholder { color: transparent; }
.chat:not(.is-auto) .chat__ghost { display: none; }

.chat__actions { display: flex; justify-content: space-between; margin-top: 8px; }
.chat__btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px;
  background: #F5F5F5;
  color: #8a8a8a;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.chat__btn:hover { background: #ECECEC; }
.chat__btn:active { transform: scale(.94); }
.chat__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.chat__btn--send:disabled { cursor: default; }
.chat__btn--send:not(:disabled) { background: var(--color-primary); color: #fff; }

.chat__files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat__file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-warm);
  border: 1px solid var(--color-line-soft);
  font: 500 13px/16px var(--font-ui);
  color: var(--color-text);
}
.chat__file button { border: 0; background: none; padding: 0 4px; font-size: 16px; line-height: 1; color: #8a8a8a; cursor: pointer; }

.chat__thread { display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow: auto; margin-bottom: 10px; }
.chat__msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; font: 400 15px/22px var(--font-ui); }
.chat__msg--me { align-self: flex-end; background: var(--color-primary); color: #fff; }
.chat__msg--ai { align-self: flex-start; background: #F5F5F5; color: var(--color-text); }

/* ---- responsive ---- */
@media (max-width: 1023px) {
  .hero__stage { min-height: max(560px, calc(100vh - var(--nav-h) - 1px)); min-height: max(560px, calc(100svh - var(--nav-h) - 1px)); }
  .hero__content { margin-left: 0; padding: 92px 16px 56px; }       /* clear the floating nav bar */
  .hero__decor { display: none; }
}
@media (max-width: 599px) {
  .hero__content { padding: 76px 12px 40px; }
  .hero__cta { flex-direction: column; width: 100%; }
  .hero__cta .btn { width: 100%; }
  .chat { padding: 12px 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash, .tile, .chat::before, .chat::after, .chat__caret { animation: none; }
  .chat::before { --chat-angle: 280deg; }
  .chat::after  { display: none; }
}