@import url('./portraits.css');
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('./assets/sora-latin.woff2') format('woff2'); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; --nav-height: 81px; }
body { margin: 0; background: #fbfbf9; }
.homepage { width: 100%; margin: 0; }
.section { padding-inline: max(56px, calc((100% - 1168px) / 2)) !important; }
.navigation {
  position: sticky !important;
  top: 0;
  z-index: 100 !important;
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  padding: 20px 56px !important;
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(13,19,33,.09);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 4px 16px rgba(13,19,33,.04);
}
.section { scroll-margin-top: calc(var(--nav-height) + 24px); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.brand img { display: block; width: 168px; height: auto; }
#footer .brand img { width: 200px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #1f5cff; outline-offset: 6px; border-radius: 8px; }
#footer a:focus-visible { outline-color: #8fb0ff; }
button { font: inherit; cursor: pointer; }
.menu-toggle { display: none; padding: 8px; border: 1px solid #dfe1e5; background: #fff; border-radius: 10px; color: #0d1321; }
.hero-backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: calc(720px + var(--nav-height));
  overflow: hidden;
  pointer-events: none;
}
.hero-backdrop canvas { width: 100% !important; height: 100% !important; }
.hero-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 4% 6%, #ffe8c9 0, transparent 48%),
    radial-gradient(ellipse at 96% 85%, #e6defe 0, transparent 50%),
    radial-gradient(ellipse at 100% 8%, #fce1ec 0, transparent 42%),
    #fffdfb;
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero h1 {
  margin-top: 0 !important;
  width: calc(100% - 40px);
  max-width: 1100px !important;
  font-size: clamp(30px, 6.1vw, 88px) !important;
  line-height: 1.04 !important;
}
.hero-lead { display: block; white-space: nowrap; }
.hero-words { justify-items: center; }
.hero-word { opacity: 0 !important; transform: translateY(.5em) !important; filter: blur(6px) !important; }
.hero-word.is-active { opacity: 1 !important; transform: none !important; filter: none !important; }
.hero-community { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 44px; color: #4b5363; font-size: 13px; line-height: 1.5; }
.community-avatars { display: flex; flex-shrink: 0; padding-left: 9px; }
.community-avatar { display: block; width: 44px; height: 44px; margin-left: -9px; overflow: hidden; border: 2px solid #fffdfb; border-radius: 50%; background: #e6defe; }
.community-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--portrait-scale, 1)); transform-origin: var(--portrait-origin, center); }
.portrait-tile { flex-shrink: 0; }
.portrait-tile svg { width: 56px; height: 56px; }
.agent-portrait svg { width: 100%; height: auto; max-width: 160px; }
.agent-name { flex-wrap: wrap; gap: 4px 8px; }
.agent-name > span:last-child { font-size: 9px !important; letter-spacing: .04em !important; }
.faq-item { border-top: 1px solid rgba(13,19,33,.1); padding: 24px 0; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { flex: none; width: 32px; height: 32px; border: 1px solid rgba(13,19,33,.14); border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #4b5363; }
.faq-icon::before { content: '+'; }
.faq-item[open] .faq-icon::before { content: '−'; }
.faq-item p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: #4b5363; font-weight: 300; max-width: 620px; }
.scroll-reveal { animation: none !important; opacity: 0; }
.scroll-reveal.is-visible { animation: scroll-reveal .7s var(--reveal-delay, 0ms) cubic-bezier(.2,.7,.2,1) both !important; }
.scroll-reveal:focus-within { opacity: 1; }
@keyframes scroll-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1150px) {
  .navigation { padding: 20px 32px !important; gap: 20px; }
  .nav-links { gap: 22px !important; }
  .section { padding-left: 32px !important; padding-right: 32px !important; }
  .bento-grid > div { padding: 26px !important; }
  .team-bento { gap: 20px; }
  .portrait-grid { grid-template-columns: repeat(5, 46px) !important; gap: 8px !important; }
  .portrait-tile { width: 46px !important; height: 46px !important; border-radius: 14px !important; }
  .portrait-tile svg { width: 46px; height: 46px; }
  .capability-row, .why-grid, .faq-grid { gap: 44px !important; }
  .bento-grid > div:nth-child(3) > div:nth-child(2) { flex-wrap: wrap; gap: 4px 10px !important; }
  .bento-grid > div:nth-child(3) > div:nth-child(2) > span:first-child { font-size: 44px !important; }
  .agent-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .agent-name > span:last-child { font-size: 10px !important; }
}
@media (max-width: 850px) {
  .navigation { flex-wrap: wrap; gap: 16px; }
  .nav-actions { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .nav-links { display: none !important; order: 4; flex-basis: 100%; padding: 12px 0 0; justify-content: space-between; }
  .nav-links.is-open { display: flex !important; }
  .section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .section-heading { flex-direction: column; align-items: flex-start !important; gap: 20px !important; }
  .section-heading p { max-width: 600px !important; }
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(250px,auto) !important; }
  .bento-grid > div { grid-column: span 1 !important; }
  .bento-grid > .team-bento { grid-column: span 2 !important; }
  .portrait-grid { grid-template-columns: repeat(5, 50px) !important; }
  .portrait-tile, .portrait-tile svg { width: 50px !important; height: 50px !important; }
  #features { gap: 64px !important; }
  .capability-row, .why-grid, .faq-grid { grid-template-columns: minmax(0,1fr) !important; gap: 32px !important; }
  .capability-row p { max-width: none !important; }
  .integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #footer { padding-bottom: 0 !important; }
  #footer > div:first-child { padding-bottom: 72px !important; }
  #footer h2 { font-size: 56px !important; }
}
@media (max-width: 600px) {
  .navigation { width: calc(100% - 24px); padding: 18px 16px !important; gap: 10px; border-radius: 0 0 18px 18px; }
  .brand img { width: 130px; }
  .nav-actions { gap: 0 !important; }
  .nav-actions > a { padding: 10px !important; font-size: 12px !important; }
  .nav-actions > a:first-child { display: none; }
  .nav-links { font-size: 13px !important; gap: 10px !important; }
  .hero { height: 680px !important; }
  .hero-content { padding: 0 20px 36px !important; }
  .hero h1 { font-size: clamp(26px, 7.6vw, 44px) !important; line-height: 1.06 !important; letter-spacing: -.055em !important; width: 100%; }
  .hero p { font-size: 17px !important; }
  .hero-actions { flex-direction: column; gap: 12px !important; margin-top: 28px !important; width: 100%; max-width: 320px; }
  .hero-actions a { font-size: 14px !important; padding: 15px 20px !important; }
  .hero-community { max-width: 280px; margin-top: 32px; gap: 10px; font-size: 12px; }
  .section { padding: 56px 20px !important; }
  .section h2 { font-size: 34px !important; line-height: 1.1 !important; }
  .section h3 { font-size: 31px !important; }
  .section-heading { margin-bottom: 30px !important; }
  .section-heading p { font-size: 16px !important; }
  .bento-grid { gap: 12px !important; grid-auto-rows: auto !important; }
  .bento-grid > div { padding: 22px !important; min-height: 250px; }
  .bento-grid > .team-bento { flex-direction: column; align-items: center; gap: 24px; }
  .team-bento > div:first-child { max-width: none !important; width: 100%; }
  .portrait-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; width: 100%; max-width: 340px; gap: 8px !important; }
  .portrait-tile, .portrait-tile svg { width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .bento-grid > div:not(.team-bento) { grid-column: span 2 !important; min-height: 240px; }
  .bento-grid > div:nth-child(3) > div:nth-child(2) { flex-wrap: nowrap; }
  .bento-grid > div:nth-child(3) > div:nth-child(2) > span:first-child { font-size: 52px !important; }
  #features { gap: 52px !important; }
  .integration-grid { gap: 12px !important; }
  .integration-grid > div { padding: 18px !important; border-radius: 16px !important; }
  .integration-grid > div > div:last-child > div:first-child { font-size: 15px !important; }
  .integration-grid > div > div:last-child > div:last-child { font-size: 13px !important; }
  .agent-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
  .agent-card { padding: 14px !important; border-radius: 18px !important; }
  .agent-name { flex-direction: column; gap: 5px; }
  .agent-name > span:last-child { font-size: 9px !important; }
  .agent-card > div:last-child > div:last-child { font-size: 13px !important; }
  .pillar-grid { grid-template-columns: minmax(0,1fr) !important; }
  .faq-item summary { font-size: 17px; gap: 16px; }
  .faq-item p { font-size: 15px; }
  #footer { padding-bottom: 0 !important; }
  #footer > div:first-child { padding-bottom: 56px !important; }
  #footer h2 { font-size: 42px !important; }
  #footer > div:first-child p { font-size: 17px !important; }
  .footer-columns { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 30px 20px !important; padding-top: 40px !important; }
  .footer-columns > div:first-child { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; gap: 16px; font-size: 11px !important; }
}
@media (max-width: 380px) {
  .navigation { gap: 6px; padding: 14px 12px !important; }
  .navigation .brand img { width: 100px; }
  .nav-actions > a { padding: 8px !important; font-size: 11px !important; }
  .menu-toggle { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scroll-reveal, .scroll-reveal.is-visible { opacity: 1; transform: none; animation: none !important; }
}