/* home — page composition mirroring the reference layout */

.page { position: relative; overflow: hidden; }
.page > header, .page > section, .page > footer { position: relative; z-index: 1; }

/* full-page ambient glow layer */
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient__dots { position: absolute; inset: 0; background-image: var(--dot-grid); background-size: 22px 22px; opacity: 0.35; }
.ambient__sheen { position: absolute; inset: 0; opacity: 0.6;
  background: linear-gradient(120deg, transparent 0%, rgba(13,27,255,0.11) 30%, rgba(72,145,249,0.07) 55%, rgba(0,224,199,0.04) 75%, transparent 100%); }
.aglow { position: absolute; border-radius: 50%; filter: blur(40px); will-change: transform; }
.g1 { top: -10rem; left: 6%;  width: 40rem; height: 40rem; background: radial-gradient(circle, rgba(13,27,255,0.40), transparent 70%); animation: drift-a 22s var(--ease) infinite alternate; }
.g2 { top: 8%;  right: 2%;  width: 35rem; height: 35rem; background: radial-gradient(circle, rgba(72,145,249,0.30), transparent 72%); animation: drift-b 26s var(--ease) infinite alternate; }
.g3 { top: 32%; left: 10%;  width: 55rem; height: 35rem; background: radial-gradient(circle, rgba(13,27,255,0.20), transparent 70%); animation: drift-c 30s var(--ease) infinite alternate; }
.g4 { top: 48%; right: 4%;  width: 32rem; height: 32rem; background: radial-gradient(circle, rgba(72,145,249,0.15), transparent 72%); animation: drift-b 28s var(--ease) infinite alternate; }
.g5 { top: 70%; left: 28%;  width: 55rem; height: 35rem; background: radial-gradient(circle, rgba(0,224,199,0.12), transparent 72%); animation: drift-c 32s var(--ease) infinite alternate; }
[data-theme="light"] .aglow { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .aglow { animation: none; } }

/* header nav uses the wide container with py-5 rhythm */
.page .site-header { height: auto; }
.page .site-header__inner { padding-block: 1.25rem; }

/* .home-hero, not .hero — legacy templates emit .hero too */
.home-hero { padding-top: 7rem; padding-bottom: 4rem; text-align: center; }
@media (max-width: 720px) { .home-hero { padding-top: 4rem; padding-bottom: 3rem; } }
.hero__title { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 3.75rem); font-weight: var(--fw-extrabold); line-height: 1.05; letter-spacing: var(--ls-tight); color: var(--text-strong); }
.hero__sub { max-width: 44rem; margin: 1.5rem auto 0; font-size: clamp(1.125rem, 1rem + 0.65vw, 1.5rem); line-height: 1.5; color: var(--text); font-weight: var(--fw-regular); }
.hero__form { max-width: 36rem; margin: 2.5rem auto 0; display: flex; gap: var(--space-3); }
.hero__form .input { flex: 1 1 auto; min-width: 0; border-radius: var(--radius-pill); padding: 0.95rem 1.4rem; }
.hero__form .btn { flex: 0 0 auto; }
@media (max-width: 540px) { .hero__form { flex-wrap: wrap; } .hero__form .btn { width: 100%; } }

/* features */
.features { padding-block: 5rem; }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
@media (min-width: 561px) and (max-width: 900px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features__grid { grid-template-columns: 1fr; } }

/* loop centerpiece section */
.loop { padding-top: 2.5rem; padding-bottom: 8rem; }
.loop__head { max-width: 56rem; margin-inline: auto; text-align: center; }
.loop__head h2 { font-size: clamp(2rem, 1rem + 4vw, 3.25rem); line-height: 1.05; letter-spacing: var(--ls-tight); }
.loop__head p { margin-top: 1.25rem; color: var(--text-muted); font-size: var(--fs-lead); max-width: 44rem; margin-inline: auto; }
.loop__visual { margin-top: 3rem; }

/* section head shared by lower sections */
.head-center { max-width: 52rem; margin-inline: auto; text-align: center; }
.head-center .eyebrow { justify-content: center; }
.head-center h2 { margin-top: 1rem; }
/* p defaults to text-wrap: pretty; centred copy wants even lines */
.head-center p { margin-top: 1rem; color: var(--text-muted); font-size: var(--fs-lead); text-wrap: balance; }

/* counters */
.stats { padding-block: 5rem; --stats-w: 60rem; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; max-width: var(--stats-w); margin-inline: auto; }
.stats__grid > * + * { border-left: 1px solid var(--border); }
.stats__grid .stat__label { max-width: 15rem; margin-inline: auto; }
.stats__note { max-width: var(--stats-w); margin: var(--space-7) auto 0; text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 720px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stats__grid > * + * { border-left: 0; border-top: 1px solid var(--border); padding-top: 2.5rem; margin-top: 2.5rem; }
}

/* customer logos */
.logos { padding-block: 3.5rem; text-align: center; }
.logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75rem 3rem; margin-top: 2rem; }
.logo-chip { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: var(--fw-bold); font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text-faint); opacity: 0.7; transition: all var(--dur) var(--ease); }
.logo-chip:hover { opacity: 1; color: var(--text-muted); }
.logo-chip svg { width: 22px; height: 22px; }

/* quotes */
.quotes { padding-block: 5rem; }
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
@media (max-width: 600px) { .quotes__grid { grid-template-columns: 1fr; } }
@media (min-width: 601px) and (max-width: 940px) { .quotes__grid { grid-template-columns: repeat(2, 1fr); } }
.quote { gap: var(--space-4); }
/* the quotation mark reads as punctuation, not as a card icon */
.quote .card__icon-art { width: 2rem; height: 2rem; margin-bottom: calc(var(--space-2) * -1); }
.quote__brand { display: flex; align-items: center; gap: 0.5rem; font-weight: var(--fw-bold); font-size: 1rem; letter-spacing: -0.02em; color: var(--text-faint); }
.quote__brand svg { width: 20px; height: 20px; }
.quote__text { border: 0; padding: 0; margin: 0; color: var(--text); font-size: var(--fs-lead); line-height: 1.6; }
.quote__foot { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.quote__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); background: var(--gradient-primary); }
.quote__name { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-sm); }
.quote__role { font-size: var(--fs-xs); color: var(--text-muted); }

/* cta band */
.cta { padding-block: 4rem 6rem; }
.cta__card { text-align: center; align-items: center; padding: 4rem 2rem; }

/* minimal footer — single centered line */
.footer-min { border-top: 1px solid var(--border); padding-block: 2.5rem; text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }

/* marketecture placeholder — square, empty */
.loop__visual .aqd { --aqd-max-width: 1000px; --aqd-bg: transparent; }

/* trust bar. Scoped: the about page has its own .awards div holding Bulma
   columns, and this grid made each .columns one cell wide. */
.logos .awards { list-style: none; padding: 0; margin: var(--space-7) auto 0; max-width: 64rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
.logos .awards .award_subtitle { font-size: var(--fs-sm); }
/* scoped to .logos: legacy-bridge owns bare .award_* for the about page and
   loads after this file, so unscoped rules here lose */
.logos .award_image_wrap {
  /* 1fr, not auto: an implicit column shrinks to the image's intrinsic
     width and then width:100% on it resolves against that */
  display: grid; grid-template-columns: 1fr; place-items: center;
  /* height:auto is load-bearing — legacy-bridge sets height:160px on the bare
     class, and an explicit height beats aspect-ratio */
  width: 100%; max-width: 240px; height: auto; aspect-ratio: 1;
  margin: 0 auto var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
/* square on purpose, so a tall or square mark drops in without relayout.
   The art is monochrome black, so tint rather than recolour. */
.logos .award_image { width: 100%; height: 100%; object-fit: contain; }
[data-theme="dark"] .logos .award_image { filter: brightness(0) invert(1); }
/* stands in until the badge artwork lands; the wrapper carries the border */
.logos .award__badge-todo {
  font-size: var(--fs-xs); line-height: var(--lh-snug); text-align: center;
  color: var(--text-faint);
}
@media (max-width: 860px) { .logos .awards { grid-template-columns: 1fr; max-width: 26rem; } }

/* problem cards — title, question, answer */
.problem { padding-block: 5rem; }
.problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.problem__card { height: 100%; gap: var(--space-5); }
.problem__title { font-size: var(--fs-h4); color: var(--accent); }
.problem__q { font-size: var(--fs-h5); font-weight: var(--fw-semibold); color: var(--text-strong); }
/* the card is flex with a gap; p + p would stack on top of it */
.problem__card .card__body { margin-top: 0; }
@media (max-width: 900px) { .problem__grid { grid-template-columns: 1fr; } }

/* why aqua */
.why { padding-block: 5rem; }
.why__grid { margin-top: 3rem; }

/* AI security */
.ai { padding-block: 5rem; }
.ai__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.ai__grid .card { height: 100%; }
@media (max-width: 900px) { .ai__grid { grid-template-columns: 1fr; } }

/* quote link under the attribution */
.quote__link { margin-top: var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--primary); }
.quote__link:hover { color: var(--accent); }

/* closing CTA — copy left, form right */
.demo { padding-block: 5rem; }
.demo__card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); padding: var(--space-9); align-items: center; }
.demo__title { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); margin-top: var(--space-4); }
.demo__sub { margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--text-muted); }
.demo__form { display: flex; flex-direction: column; gap: var(--space-4); }
.demo__form-title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); }
.demo__note { font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 900px) { .demo__card { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-7); } }

/* card icons */
/* Lottie draws these; base.css sets svg { fill: currentColor }, which beats the
   file's own fill="none", so put it back or every stroke fills solid. */
.card__icon-art {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.card__icon-art.is-ready { opacity: 1; }
.card__icon-art svg { width: 100%; height: 100%; display: block; fill: none; }