.front-hero__content {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 3rem;
  min-height: 650px;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.front-hero__shade {
  background: linear-gradient(100deg, rgba(5, 13, 25, .92), rgba(5, 13, 25, .74) 54%, rgba(5, 13, 25, .66));
}

.front-hero__copy { min-width: 0; }
.front-hero h1 { font-size: 3.4rem; line-height: 1.08; letter-spacing: -.035em; }
.front-hero__lead { font-size: 1.08rem; margin-bottom: 0; max-width: 29rem; }

.hero-demo {
  --demo-progress: 0%;
  --demo-ink: #e9effb;
  --demo-muted: #9faec6;
  --demo-line: #25334a;
  --demo-accent: #7eaaff;
  background: #0d1625;
  border: 1px solid #34445f;
  border-radius: 16px;
  box-shadow: 0 25px 80px #0006, 0 0 60px #3a79ff10;
  color: var(--demo-ink);
  font-size: .8rem;
  line-height: 1.5;
  min-width: 0;
  overflow: hidden;
  position: relative;
  text-align: left;
}

.hero-demo [hidden] { display: none !important; }
.hero-demo button { font: inherit; }
.hero-demo button:focus-visible, .hero-demo__viewport:focus-visible { outline: 2px solid #8bb6ff; outline-offset: -3px; }
.hero-demo__header { align-items: center; background: #121e30; border-bottom: 1px solid var(--demo-line); display: flex; gap: .75rem; justify-content: space-between; padding: 1.15rem 1.25rem; }
.hero-demo__identity { align-items: center; display: flex; gap: .75rem; min-width: 0; }
.hero-demo__mark { align-items: center; background: #377af225; border: 1px solid #508cf544; border-radius: 10px; color: #8bb4ff; display: flex; flex: 0 0 36px; height: 36px; justify-content: center; }
.hero-demo__mark svg { width: 24px; height: 24px; }
.hero-demo__app-name { color: var(--demo-muted); display: block; font-size: .64rem; letter-spacing: .07em; margin-bottom: .1rem; text-transform: uppercase; }
.hero-demo h2 { color: #f0f5ff; font-size: .87rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; margin: 0; }
.hero-demo__connection { align-items: center; color: #8fd5b8; display: flex; flex: 0 0 auto; font-size: .64rem; gap: .35rem; white-space: nowrap; }
.hero-demo__connection > span { background: #67c6a2; border-radius: 50%; box-shadow: 0 0 0 3px #68c6a213; height: 5px; width: 5px; }
.hero-demo__stories { background: #101a2a; border-bottom: 1px solid var(--demo-line); display: flex; gap: .3rem; padding: .65rem 1.15rem; }
.hero-demo__stories button { background: transparent; border: 1px solid transparent; border-radius: 6px; color: #a9b7cc; flex: 1; font-size: .72rem; font-weight: 500; padding: .45rem .5rem; transition: background .15s, color .15s, border-color .15s; }
.hero-demo__stories button span { color: #71839f; font-size: .62rem; margin-right: .25rem; }
.hero-demo__stories button[aria-pressed="true"] { background: #3479f21f; border-color: #4386f64a; color: #b7d1ff; }
.hero-demo__stories button[aria-pressed="true"] span { color: #7eabf7; }
.hero-demo__stories button:hover { background: #24344d; color: #edf3ff; }
.hero-demo__viewport { height: 344px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem 1.25rem; scrollbar-color: #3e506c transparent; scrollbar-width: thin; }
.hero-demo__story { display: flex; flex-direction: column; gap: .85rem; }
.hero-demo__message { min-width: 0; }
.hero-demo__message p { color: var(--demo-ink); font-size: .8rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.hero-demo__message strong { color: #f0f5ff; font-weight: 600; }
.hero-demo__sender { color: #8a9cb8; display: block; font-size: .62rem; font-weight: 600; letter-spacing: .055em; margin-bottom: .3rem; text-transform: uppercase; }
.hero-demo__message--user { background: #1a2b47; border: 1px solid #2b4266; border-radius: 10px 10px 3px 10px; margin-left: 2rem; padding: .7rem .85rem; }
.hero-demo__message--user .hero-demo__sender { color: #97bfff; }
.hero-demo__message--assistant { padding: .15rem 0; }
.hero-demo__message--assistant .hero-demo__sender { color: #97bfff; }
.hero-demo__tool { align-items: flex-start; color: #aab9cf; display: flex; font-size: .67rem; gap: .5rem; line-height: 1.65; padding: 0 .05rem; }
.hero-demo__tool code { background: #18243a; border: 1px solid #2b3b56; border-radius: 4px; color: #a8c5f7; display: inline-block; font-size: .59rem; line-height: 1.6; margin-left: .3rem; overflow-wrap: anywhere; padding: .05rem .3rem; }
.hero-demo__tool-protocol { border: 1px solid #3c4e69; border-radius: 4px; color: #bac8de; font-size: .57rem; letter-spacing: .03em; margin-left: .3rem; padding: .1rem .25rem; }
.hero-demo__tool-icon { border: 1px solid #4d856f; border-radius: 50%; color: #7bd5ac; display: inline-flex; flex: 0 0 14px; height: 14px; margin-top: 2px; position: relative; }
.hero-demo__tool-icon::before { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; content: ""; height: 6px; left: 4px; position: absolute; top: 2px; transform: rotate(45deg); width: 3px; }
.hero-demo__tool.is-working .hero-demo__tool-icon { animation: hero-demo-spin .85s linear infinite; border-color: #75a9ff36; border-top-color: #80afff; }
.hero-demo__tool.is-working .hero-demo__tool-icon::before { display: none; }
.hero-demo__table-wrap { border: 1px solid var(--demo-line); border-radius: 8px; margin-top: .7rem; overflow: hidden; }
.hero-demo .hero-demo__table { border-collapse: collapse; color: #dce5f5; font-size: .72rem; margin: 0; width: 100%; }
.hero-demo__table th, .hero-demo__table td { border: 0; border-bottom: 1px solid #25334a; padding: .55rem .7rem; }
.hero-demo__table thead { background: #152136; color: #a6b6d0; }
.hero-demo__table thead th { font-size: .6rem; font-weight: 500; }
.hero-demo__table th:first-child { width: 50%; }
.hero-demo__table th:last-child, .hero-demo__table td:last-child { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hero-demo__table tbody th { font-weight: 500; }
.hero-demo__table small { color: #92a3bd; display: block; font-size: .6rem; font-weight: 400; margin-top: .1rem; }
.hero-demo__table tfoot { background: #142238; }
.hero-demo__table tfoot th, .hero-demo__table tfoot td { border: 0; color: #e5edfb; font-weight: 600; }
.hero-demo__status { background: #d59c3714; border: 1px solid #c9973433; border-radius: 4px; color: #edc079; display: inline-block; font-size: .56rem; font-weight: 500; padding: .1rem .35rem; white-space: nowrap; }
.hero-demo__status--ready { background: #56bc9420; border-color: #56bc9433; color: #8adbb8; }
.hero-demo__drafts { display: grid; gap: .5rem; margin-top: .65rem; }
.hero-demo__draft { background: #142035; border: 1px solid #2a3c58; border-left: 2px solid #6298f7; border-radius: 6px; padding: .65rem .75rem; }
.hero-demo__draft > span { align-items: center; color: #a8b8d0; display: flex; font-size: .63rem; justify-content: space-between; margin-bottom: .25rem; }
.hero-demo__draft b { color: #a9c9ff; font-size: .54rem; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; }
.hero-demo__draft > strong { display: block; font-size: .71rem; margin-bottom: .2rem; }
.hero-demo__draft p { color: #b4c2d8; font-size: .69rem; line-height: 1.6; }
.hero-demo__outcome { align-items: flex-start; background: #48b58b0e; border: 1px solid #4ba58133; border-radius: 6px; color: #a4ddc6; display: flex; font-size: .68rem; gap: .4rem; line-height: 1.6; margin: 0; padding: .5rem .65rem; }
.hero-demo__outcome > span { color: #78d8ae; }
.hero-demo__chart { background: #142035; border: 1px solid #2b3c59; border-radius: 8px; margin: .75rem 0 0; padding: 1rem; }
.hero-demo__chart figcaption { align-items: center; display: flex; gap: .6rem; justify-content: space-between; margin-bottom: 1.25rem; }
.hero-demo__chart figcaption > span { color: #d2dff2; font-size: .7rem; }
.hero-demo__chart figcaption > strong { color: #83d5b3; font-size: 1.05rem; font-weight: 600; }
.hero-demo__chart figcaption strong span { color: #95a7c0; font-size: .59rem; font-weight: 400; }
.hero-demo__bar-row { align-items: center; display: grid; font-size: .66rem; gap: .7rem; grid-template-columns: 65px minmax(0, 1fr) 34px; margin-bottom: .75rem; }
.hero-demo__bar-row > span { color: #a4b4cc; }
.hero-demo__bar-row > div { background: #24324a; border-radius: 3px; height: 21px; overflow: hidden; }
.hero-demo__bar-row i { background: #4c648c; border-radius: 3px; display: block; height: 100%; width: var(--bar-size); }
.hero-demo__bar-row--current i { background: linear-gradient(90deg, #397aed, #7eacff); }
.hero-demo__bar-row--current > span { color: #d8e7ff; }
.hero-demo__bar-row > strong { color: #dce8ff; font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; }
.hero-demo__chart > p { border-top: 1px solid #2a3a54; color: #9cafd0; font-size: .62rem; margin-top: 1rem; padding-top: .65rem; }
.hero-demo__insight { background: #142035; border: 1px solid #2b3c59; border-radius: 8px; padding: .85rem 1rem; }
.hero-demo__card-label { color: #91b8fb; display: block; font-size: .59rem; font-weight: 600; letter-spacing: .075em; margin-bottom: .4rem; text-transform: uppercase; }
.hero-demo h3 { color: #e9f0fc; font-size: .83rem; font-weight: 600; line-height: 1.5; margin: 0 0 .6rem; }
.hero-demo__insight ul { color: #b7c6dc; display: grid; font-size: .72rem; gap: .45rem; margin: 0; padding-left: 1.05rem; }
.hero-demo__insight li::marker { color: #7aabff; }
.hero-demo__tasks { border: 1px solid #2b3c59; border-radius: 8px; margin-top: .7rem; overflow: hidden; }
.hero-demo__task { align-items: center; background: #142035; border-bottom: 1px solid #2b3c59; display: flex; gap: .6rem; padding: .75rem; }
.hero-demo__task:last-child { border-bottom: 0; }
.hero-demo__task > div { flex: 1; min-width: 0; }
.hero-demo__task strong { display: block; font-size: .72rem; font-weight: 500; }
.hero-demo__task p { color: #9caec9; font-size: .62rem; margin-top: .1rem; }
.hero-demo__task-dot { border: 1px solid #70b79d; border-radius: 50%; flex: 0 0 8px; height: 8px; }
.hero-demo__task-dot--blocked { background: #e8b266; border-color: #e8b266; }
.hero-demo__priorities { counter-reset: demo-priority; display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.hero-demo__priorities li { counter-increment: demo-priority; padding-left: 1.85rem; position: relative; }
.hero-demo__priorities li::before { align-items: center; background: #4387fc24; border-radius: 5px; color: #99bfff; content: counter(demo-priority); display: flex; font-size: .65rem; height: 22px; justify-content: center; left: 0; position: absolute; top: 1px; width: 22px; }
.hero-demo__priorities strong { display: block; font-size: .73rem; }
.hero-demo__priorities span { color: #a8b9d2; display: block; font-size: .66rem; margin-top: .1rem; }
.hero-demo__composer { align-items: center; background: #152136; border: 1px solid #32435e; border-radius: 8px; color: #9bacC6; display: flex; gap: .6rem; margin: .2rem 1.25rem .8rem; min-height: 40px; padding: .45rem .6rem; }
.hero-demo__composer > span:nth-child(2) { flex: 1; font-size: .7rem; }
.hero-demo__composer-plus { color: #a7b7cf; font-size: 1.2rem; font-weight: 300; line-height: 1; }
.hero-demo__send { align-items: center; background: #345b91; border-radius: 5px; color: #d3e3ff; display: flex; font-size: 1rem; height: 24px; justify-content: center; width: 24px; }
.hero-demo__idle-cursor { background: #85adf1; display: inline-block; height: .8rem; margin-left: 4px; vertical-align: -.1rem; width: 1px; }
.hero-demo.is-animated .hero-demo__idle-cursor { animation: hero-demo-caret 1.1s steps(1) infinite; }
.hero-demo.is-animated .is-typing::after { animation: hero-demo-caret .8s steps(1) infinite; background: #96bcff; content: ""; display: inline-block; height: 1em; margin-left: 2px; vertical-align: -.12em; width: 2px; }
.hero-demo.is-paused *, .hero-demo.is-paused *::before, .hero-demo.is-paused *::after { animation-play-state: paused !important; }
.hero-demo__footer { align-items: center; border-top: 1px solid #22314a; display: flex; gap: .5rem; justify-content: space-between; padding: .75rem 1.25rem; }
.hero-demo__footer > div:first-child { display: grid; gap: .2rem; }
.hero-demo__story-label { color: #b8cbea; font-size: .61rem; font-weight: 500; }
.hero-demo__fiction { color: #8f9fb8; font-size: .57rem; }
.hero-demo__playback { display: flex; gap: .3rem; }
.hero-demo__playback button { background: transparent; border: 1px solid #34445f; border-radius: 5px; color: #b6c4db; font-size: .62rem; min-height: 30px; padding: .3rem .55rem; }
.hero-demo__playback button:hover { background: #253651; border-color: #58739b; color: #e2edff; }
.hero-demo__progress { background: #1b2a41; height: 3px; overflow: hidden; }
.hero-demo__progress::after { background: linear-gradient(90deg, #377bf1, #91b9ff); content: ""; display: block; height: 100%; width: var(--demo-progress); }
.hero-demo__noscript { color: #9fb0c9; font-size: .65rem; margin: 0; padding: .6rem 1.25rem; }
.hero-demo__sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@keyframes hero-demo-caret { 50% { opacity: 0; } }
@keyframes hero-demo-spin { to { transform: rotate(360deg); } }

@media (max-width: 1199.98px) {
  .front-hero__content { gap: 2rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .front-hero h1 { font-size: 2.9rem; }
  .hero-demo__header { gap: .5rem; padding-left: 1rem; padding-right: 1rem; }
  .hero-demo__connection { font-size: .59rem; }
  .hero-demo h2 { font-size: .78rem; }
  .hero-demo__identity { gap: .55rem; }
  .hero-demo__mark { flex-basis: 30px; height: 30px; }
}

@media (max-width: 991.98px) {
  .front-hero__content { gap: 2.5rem; grid-template-columns: minmax(0, 1fr); padding-top: 3rem; padding-bottom: 3rem; }
  .front-hero__copy { max-width: 640px; }
  .front-hero h1 { font-size: 3.25rem; max-width: 640px; }
  .front-hero__lead { max-width: 600px; }
  .hero-demo { max-width: 680px; width: 100%; }
  .hero-demo__header { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero-demo h2 { font-size: .87rem; }
  .hero-demo__connection { font-size: .64rem; }
}

@media (max-width: 575.98px) {
  .front-hero__content { gap: 1.75rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .front-hero h1 { font-size: 2.5rem; max-width: 400px; }
  .front-hero__lead { font-size: 1rem; }
  .hero-demo { border-radius: 12px; }
  .hero-demo__header { align-items: flex-start; padding: 1rem .85rem; }
  .hero-demo__identity { gap: .5rem; }
  .hero-demo__mark { flex-basis: 26px; height: 29px; }
  .hero-demo__mark svg { height: 21px; width: 21px; }
  .hero-demo__app-name { font-size: .54rem; }
  .hero-demo h2 { font-size: .7rem; max-width: 160px; }
  .hero-demo__connection { font-size: .52rem; gap: .3rem; margin-top: .15rem; }
  .hero-demo__connection > span { height: 4px; width: 4px; }
  .hero-demo__stories { gap: .15rem; padding: .6rem .65rem; }
  .hero-demo__stories button { font-size: .66rem; padding: .4rem .2rem; }
  .hero-demo__stories button span { font-size: .55rem; margin-right: .1rem; }
  .hero-demo__viewport { height: 350px; padding: 1rem .85rem; }
  .hero-demo__message--user { margin-left: 1rem; padding: .65rem .7rem; }
  .hero-demo__message p { font-size: .75rem; }
  .hero-demo__tool { font-size: .63rem; }
  .hero-demo__tool code { font-size: .55rem; }
  .hero-demo__table th, .hero-demo__table td { padding: .5rem .4rem; }
  .hero-demo .hero-demo__table { font-size: .66rem; }
  .hero-demo__table th:first-child { width: 46%; }
  .hero-demo__table thead th { font-size: .55rem; }
  .hero-demo__status { font-size: .51rem; padding: .1rem .25rem; }
  .hero-demo__task { gap: .45rem; padding: .65rem .55rem; }
  .hero-demo__task strong { font-size: .67rem; }
  .hero-demo__task p { font-size: .59rem; }
  .hero-demo__chart { padding: .85rem .7rem; }
  .hero-demo__chart figcaption { align-items: flex-start; }
  .hero-demo__chart figcaption strong span { display: block; font-size: .55rem; }
  .hero-demo__bar-row { gap: .5rem; grid-template-columns: 61px minmax(0, 1fr) 30px; }
  .hero-demo__insight { padding: .8rem; }
  .hero-demo__draft p { font-size: .65rem; }
  .hero-demo__composer { margin-left: .85rem; margin-right: .85rem; }
  .hero-demo__composer > span:nth-child(2) { font-size: .64rem; }
  .hero-demo__footer { padding: .65rem .85rem; }
  .hero-demo__fiction { font-size: .52rem; }
  .hero-demo__playback button { font-size: .59rem; padding-left: .4rem; padding-right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-demo *, .hero-demo *::before, .hero-demo *::after { animation: none !important; transition: none !important; }
}