/* ============================================================= */
/* Section: 01-hero */
/* ============================================================= */
/* ============================================================= */
/* Hero — Figma node 12183:4947 (1440 x 725: 60/100px padding,    */
/* background SVG 12183:4948, container 12183:4954).              */
/* Copy column 588px + 60 gap + claim-file folder 592 x 637.54    */
/* (12208:2124). The folder overflows the 60px bottom padding in  */
/* Figma; the frame clips at 725.                                 */
/* ============================================================= */
.ai-hero {
  position: relative;
  overflow: hidden;
  background: #fbfbfe;
}

.ai-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none !important;
  pointer-events: none;
}

.ai-hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}


/* ---------- Copy (12183:5105) ---------- */
.ai-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  min-width: 0;
}

.ai-hero-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 510px;
  max-width: 100%;
}

.ai-hero-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 9.069px;
  background: rgba(39, 55, 117, 0.1);
  color: var(--ai-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 9.976px;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
}

.ai-hero-title {
  color: var(--ai-blue);
  font-size: 42px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -1px;
  white-space: nowrap;
}

.ai-hero-accent {
  color: var(--ai-orange);
}

.ai-hero-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ai-blue);
  font-size: 24px;
  font-weight: 600;
  line-height: 33.8px;
}

.ai-hero-sub-bar {
  flex: none;
  width: 6px;
  height: 32px;
  border-radius: 3px;
  background: var(--ai-orange);
}

.ai-hero-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 475px;
  max-width: 100%;
}

.ai-hero-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ai-text);
  font-size: 16px;
  line-height: 22.4px;
}

.ai-hero-check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--ai-blue);
}

.ai-hero-check img {
  display: block;
  width: 13px;
  height: 13px;
}

.ai-hero-actions {
  display: flex;
}

.ai-hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 19px 34px;
  overflow: hidden;
  border-radius: 42px;
  background: var(--ai-orange);
  box-shadow: 0 16px 17px rgba(252, 93, 97, 0.32);
  color: var(--ai-white);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ai-ease), box-shadow 0.3s var(--ai-ease), transform 0.3s var(--ai-ease);
}

.ai-hero-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  translate: -120% 0;
  pointer-events: none;
}

.ai-hero-btn-label {
  position: relative;
}

.ai-hero-btn-icon {
  position: relative;
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform 0.3s var(--ai-ease);
}

.ai-hero-btn:hover,
.ai-hero-btn:focus-visible {
  background: #ef4c51;
  color: var(--ai-white);
  box-shadow: 0 20px 26px rgba(252, 93, 97, 0.38);
  transform: translateY(-2px);
}

.ai-hero-btn:hover::after,
.ai-hero-btn:focus-visible::after {
  animation: ai-hero-shine 0.9s ease-out;
}

.ai-hero-btn:hover .ai-hero-btn-icon,
.ai-hero-btn:focus-visible .ai-hero-btn-icon {
  transform: translateX(4px);
}

.ai-hero-btn:focus-visible {
  outline: 2px solid var(--ai-blue);
  outline-offset: 3px;
}

/* ---------- Claim file folder (12208:2124), 592 x 637.54 ---------- */
.ai-hero-art {
  position: relative;
  flex: none;
  width: 592px;
  height: 637.538px;
}

.ai-hero-art-inner {
  position: relative;
  width: 592px;
  height: 637.538px;
}

.ai-hero-tab,
.ai-hero-cover,
.ai-hero-sheet-back,
.ai-hero-sheet,
.ai-hero-clip {
  position: absolute;
  display: block;
}

.ai-hero-tab {
  background: var(--ai-orange);
}

.ai-hero-tab--top {
  top: 0;
  left: 356.72px;
  width: 204.923px;
  height: 53.128px;
  border-radius: 18.215px 18.215px 0 0;
}

.ai-hero-tab--side {
  top: 356.72px;
  left: 584.41px;
  width: 16.697px;
  height: 91.077px;
  border-radius: 0 9.108px 9.108px 0;
}

.ai-hero-cover {
  top: 25.81px;
  left: 0;
  width: 592px;
  height: 611.733px;
  border-radius: 22.769px;
  background: var(--ai-blue);
  box-shadow: 0 30.359px 60.718px rgba(39, 55, 117, 0.28);
}

.ai-hero-sheet-back {
  top: 31.88px;
  left: 18.22px;
  width: 561.641px;
  height: 595.036px;
  border-radius: 16.697px;
  background: #dce2f0;
}

.ai-hero-sheet {
  top: 37.95px;
  left: 12.14px;
  width: 567.713px;
  height: 588.964px;
  overflow: hidden;
  border: 0.759px solid var(--ai-line);
  border-radius: 16.697px;
  background: #fcfdff;
}

.ai-hero-clip {
  top: 91.08px;
  left: 0;
  width: 30.359px;
  height: 56.164px;
  max-width: none !important;
}

/* Pieces inside the front sheet (positions from Figma, relative to the sheet). */
.ai-hero-file-head,
.ai-hero-photo,
.ai-hero-fields,
.ai-hero-divider,
.ai-hero-row {
  position: absolute;
  left: 24.29px;
  right: 24.29px;
}

.ai-hero-file-head {
  top: 19.73px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-hero-file-title {
  display: flex;
  align-items: center;
  gap: 12.144px;
  color: var(--ai-blue);
  font-size: 20.492px;
  font-weight: 700;
  line-height: 24.591px;
  letter-spacing: 0.3036px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ai-hero-file-bar {
  flex: none;
  width: 5.313px;
  height: 22.769px;
  border-radius: 3.036px;
  background: var(--ai-orange);
}

.ai-hero-file-badge {
  padding: 6.072px 12.903px 6.831px;
  border: 0.759px solid var(--ai-blue);
  border-radius: 7.59px;
  background: var(--ai-white);
  color: var(--ai-blue);
  font-size: 10.626px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.ai-hero-photo {
  top: 63px;
  height: 189.744px;
  overflow: hidden;
  border-radius: 6.072px;
  background: #dde3f1;
}

.ai-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--ai-ease);
}

.ai-hero-art:hover .ai-hero-photo img {
  scale: 1.03;
}

.ai-hero-fields {
  top: 269.44px;
  display: flex;
  align-items: stretch;
}

.ai-hero-field {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 16.697px;
}

.ai-hero-field > span {
  padding: 0.759px 0;
  color: var(--ai-blue);
  font-size: 11.385px;
  font-weight: 600;
  line-height: normal;
}

.ai-hero-field > i {
  display: block;
  height: 1.138px;
  background: #9aa3bf;
}

.ai-hero-field--1 { width: 166.215px; padding-right: 16.697px; }
.ai-hero-field--2 { width: 182.913px; padding: 0 16.697px; }
.ai-hero-field--3 { width: 166.215px; padding-left: 16.697px; }

.ai-hero-field-rule {
  flex: none;
  width: 1.138px;
  background: #c9d0e2;
}

.ai-hero-divider {
  top: 321.43px;
  display: block;
  height: 0.759px;
  background: #dde3f0;
}

.ai-hero-row {
  display: flex;
  align-items: center;
  height: 61.477px;
  padding-bottom: 0.759px;
  border-bottom: 0.759px solid var(--ai-line);
}

.ai-hero-row--1 { top: 322.18px; }
.ai-hero-row--2 { top: 383.66px; }
.ai-hero-row--3 { top: 445.14px; }

.ai-hero-row-key {
  display: flex;
  flex: none;
  align-items: center;
  width: 227.692px;
}

.ai-hero-row-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40.985px;
  height: 24.287px;
  border-radius: 6.831px;
  background: var(--ai-orange);
  color: var(--ai-white);
  font-size: 11.385px;
  font-weight: 600;
  line-height: normal;
}

.ai-hero-row-line {
  flex: none;
  width: 22.769px;
  height: 1.518px;
  background: var(--ai-blue);
  transform-origin: 0 50%;
}

.ai-hero-row-dot {
  flex: none;
  width: 6.072px;
  height: 6.072px;
  border-radius: 3.036px;
  background: var(--ai-blue);
}

.ai-hero-row-label {
  padding: 0.759px 0 0.759px 10.626px;
  color: var(--ai-blue);
  font-size: 14.421px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.2277px;
  text-transform: uppercase;
  white-space: nowrap;
}

.ai-hero-row-rule {
  flex: none;
  width: 17.836px;
  height: 34.913px;
  padding-right: 16.697px;
}

.ai-hero-row-rule::before {
  content: "";
  display: block;
  width: 1.138px;
  height: 100%;
  background: #c9d0e2;
}

.ai-hero-row-body {
  display: flex;
  flex-direction: column;
  gap: 3.036px;
}

.ai-hero-row-terms {
  display: flex;
  align-items: flex-start;
  gap: 4.554px;
  padding: 0.759px 0;
  color: var(--ai-blue);
  font-size: 13.662px;
  font-weight: 600;
  line-height: normal;
  white-space: pre;
}

.ai-hero-row-sep {
  color: var(--ai-orange);
}

.ai-hero-row-note {
  padding-bottom: 0.759px;
  color: var(--ai-text);
  font-size: 10.246px;
  line-height: normal;
  white-space: nowrap;
}

.ai-hero-file-foot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.108px;
  height: 50.092px;
  background: var(--ai-blue);
  color: var(--ai-white);
  font-size: 14.421px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}

.ai-hero-file-foot img {
  display: block;
  flex: none;
  width: 15.179px;
  height: 15.179px;
}

.ai-hero-file-foot span {
  padding: 0.759px 0;
}

/* ---------- Animation ---------- */
@keyframes ai-hero-shine {
  from { translate: -120% 0; }
  to   { translate: 220% 0; }
}

@keyframes ai-hero-tab-up {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes ai-hero-tab-out {
  from { opacity: 0; translate: -18px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes ai-hero-draw {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

@keyframes ai-hero-clip-in {
  from { opacity: 0; translate: 0 -30px; rotate: -12deg; }
  to   { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* Copy plays on load (it holds the LCP heading, so it is never hidden by JS). */
.ai-hero-head > *,
.ai-hero-sub,
.ai-hero-list li,
.ai-hero-actions {
  animation: ai-rise 0.75s var(--ai-ease) backwards;
}

.ai-hero-head > :nth-child(2) { animation-delay: 0.08s; }
.ai-hero-sub                  { animation-delay: 0.2s; }
.ai-hero-list li:nth-child(1) { animation-delay: 0.28s; }
.ai-hero-list li:nth-child(2) { animation-delay: 0.35s; }
.ai-hero-list li:nth-child(3) { animation-delay: 0.42s; }
.ai-hero-list li:nth-child(4) { animation-delay: 0.49s; }
.ai-hero-list li:nth-child(5) { animation-delay: 0.56s; }
.ai-hero-actions              { animation-delay: 0.66s; }

.ai-hero-list li .ai-hero-check {
  animation: ai-pop 0.5s var(--ai-ease) backwards;
  animation-delay: inherit;
}

@keyframes ai-hero-grow-y {
  from { scale: 1 0; }
  to   { scale: 1 1; }
}

.ai-hero-sub-bar {
  animation: ai-hero-grow-y 0.6s 0.3s var(--ai-ease) backwards;
  transform-origin: 50% 100%;
}

/* Folder: [data-bh-reveal] — hidden once armed, played on .is-in. */
.ai-hero-art.is-armed:not(.is-in) :is(
  .ai-hero-tab,
  .ai-hero-cover,
  .ai-hero-sheet-back,
  .ai-hero-sheet,
  .ai-hero-clip,
  .ai-hero-piece,
  .ai-hero-row,
  .ai-hero-file-foot
) {
  opacity: 0;
}

.ai-hero-art.is-in .ai-hero-cover {
  animation: ai-rise 0.8s 0.1s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-sheet-back {
  animation: ai-rise 0.8s 0.2s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-sheet {
  animation: ai-rise 0.8s 0.28s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-tab--side {
  animation: ai-hero-tab-out 0.7s 0.6s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-clip {
  animation: ai-hero-clip-in 0.7s 0.75s var(--ai-ease) backwards;
  transform-origin: 50% 0;
}

.ai-hero-art.is-in :is(.ai-hero-piece, .ai-hero-row, .ai-hero-file-foot) {
  animation: ai-rise 0.6s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-file-head { animation-delay: 0.45s; }
.ai-hero-art.is-in .ai-hero-photo     { animation-name: ai-fade; animation-duration: 0.9s; animation-delay: 0.55s; }
.ai-hero-art.is-in .ai-hero-fields    { animation-delay: 0.7s; }
.ai-hero-art.is-in .ai-hero-divider   { animation-name: ai-fade; animation-delay: 0.8s; }
.ai-hero-art.is-in .ai-hero-row--1    { animation-delay: 0.85s; }
.ai-hero-art.is-in .ai-hero-row--2    { animation-delay: 0.97s; }
.ai-hero-art.is-in .ai-hero-row--3    { animation-delay: 1.09s; }
.ai-hero-art.is-in .ai-hero-file-foot { animation-delay: 1.25s; }

.ai-hero-art.is-in .ai-hero-photo img {
  animation: ai-hero-zoom-out 1.4s 0.55s var(--ai-ease) backwards;
}

@keyframes ai-hero-zoom-out {
  from { scale: 1.12; }
  to   { scale: 1; }
}

/* Numbered steps: badge pops, connector draws, dot pops. */
.ai-hero-art.is-in .ai-hero-row-num {
  animation: ai-pop 0.45s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-row-line {
  animation: ai-hero-draw 0.45s ease-out backwards;
}

.ai-hero-art.is-in .ai-hero-row-dot {
  animation: ai-pop 0.35s var(--ai-ease) backwards;
}

.ai-hero-art.is-in .ai-hero-row--1 .ai-hero-row-num  { animation-delay: 1s; }
.ai-hero-art.is-in .ai-hero-row--1 .ai-hero-row-line { animation-delay: 1.15s; }
.ai-hero-art.is-in .ai-hero-row--1 .ai-hero-row-dot  { animation-delay: 1.4s; }
.ai-hero-art.is-in .ai-hero-row--2 .ai-hero-row-num  { animation-delay: 1.12s; }
.ai-hero-art.is-in .ai-hero-row--2 .ai-hero-row-line { animation-delay: 1.27s; }
.ai-hero-art.is-in .ai-hero-row--2 .ai-hero-row-dot  { animation-delay: 1.52s; }
.ai-hero-art.is-in .ai-hero-row--3 .ai-hero-row-num  { animation-delay: 1.24s; }
.ai-hero-art.is-in .ai-hero-row--3 .ai-hero-row-line { animation-delay: 1.39s; }
.ai-hero-art.is-in .ai-hero-row--3 .ai-hero-row-dot  { animation-delay: 1.64s; }

/* Gentle idle motion for the folder's coral tabs once everything has landed. */
.ai-hero-art.is-in .ai-hero-tab--top {
  animation:
    ai-hero-tab-up 0.7s 0.5s var(--ai-ease) backwards,
    ai-hero-bob 5s 2s ease-in-out infinite;
}

@keyframes ai-hero-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* Row hover: subtle highlight. */
.ai-hero-row {
  transition: background-color 0.3s var(--ai-ease);
}

.ai-hero-row:hover {
  background: #f5f7fc;
}

/* ---------- Responsive ---------- */
/* 1200–1279: the 1240 column no longer fits; shrink the folder in place. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .ai-hero-inner {
    gap: 40px;
  }

  .ai-hero-art {
    width: calc(592px * 0.9);
    height: calc(637.538px * 0.9);
  }

  .ai-hero-art-inner {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}

@media (max-width: 1199px) {
  .ai-hero-bg {
    object-fit: cover;
    object-position: 50% 100%;
  }

  .ai-hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 56px;
  }

  .ai-hero-copy {
    flex: none;
    max-width: 640px;
  }

  /* Folder scales with the available width (k = width / 601, capped at 1). */
  .ai-hero-art {
    --ai-hero-k: 1;
    width: 100%;
    max-width: 601px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 601.107 / 637.538;
  }

  @supports (width: calc(tan(atan2(1px, 1px)) * 1px)) {
    .ai-hero-art {
      container-type: inline-size;
    }

    .ai-hero-art-inner {
      --ai-hero-k: tan(atan2(100cqw, 601.107px));
    }
  }

  .ai-hero-art-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--ai-hero-k));
    transform-origin: 0 0;
  }
}

/* Mobile-only decorative waves (shown inside the <=767 block). */
.ai-hero-wave {
  display: none;
}

/* ---------- Phones — Figma mobile node 12183:2348 (hero 12183:2417, 440 wide, 20px gutters) ----------
   Copy column (12183:2418) gap 20; folder (12217:3983) 400 x 430.77 = the desktop folder scaled by 400/592,
   36px below the copy. Text that is one line in Figma is fitted to one line down to 360. */
@media (max-width: 767px) {
  .ai-hero {
    background: #fbfbfe;
  }

  .ai-hero-bg {
    display: none;
  }

  .ai-hero-wave {
    position: absolute;
    display: block;
    max-width: none !important;
    pointer-events: none;
  }

  /* 12217:3941: 238.3 x 46 at the top-right corner. */
  .ai-hero-wave--top {
    top: 0;
    right: 0;
    width: 54.16%;
    height: 46px;
  }

  /* 12217:3936: 593 x 41.8 along the bottom edge (wider than the frame, clipped). */
  .ai-hero-wave--bottom {
    bottom: 0;
    left: 0;
    width: 134.77%;
    height: 41.8px;
  }

  .ai-hero-inner {
    gap: 36px;
  }

  .ai-hero-copy {
    gap: 20px;
    max-width: none;
  }

  .ai-hero-head {
    gap: 16px;
    width: 100%;
  }

  .ai-hero-chip {
    height: 30px;
    padding: 6px 10px;
    font-size: min(12px, calc((100vw - 60px) * 12 / 272));
    line-height: 18px;
  }

  .ai-hero-title {
    font-size: min(32px, calc((100vw - 40px) * 32 / 388));
    line-height: 1.25;
    letter-spacing: -1.1px;
    white-space: nowrap;
  }

  .ai-hero-br {
    display: inline;
  }

  .ai-hero-sub {
    gap: 14px;
    font-size: 18px;
    line-height: 33.8px;
  }

  .ai-hero-sub-bar {
    height: 32px;
  }

  .ai-hero-list {
    gap: 10px;
    width: 100%;
  }

  .ai-hero-list li {
    gap: 14px;
    font-size: 14px;
    line-height: 22.4px;
  }

  .ai-hero-btn {
    gap: 16px;
    height: 50px;
    padding: 0 34px;
    border-radius: 52px;
    font-size: 14px;
  }

  /* Folder: k = column width / 592 (the navy cover); the side tab pokes 6px past it as in Figma. */
  .ai-hero-art {
    --ai-hero-k: 1;
    width: 100%;
    max-width: 592px;
    height: auto;
    margin: 0;
    aspect-ratio: 592 / 637.538;
  }

  @supports (width: calc(tan(atan2(1px, 1px)) * 1px)) {
    .ai-hero-art-inner {
      --ai-hero-k: tan(atan2(100cqw, 592px));
    }
  }
}

@supports not (width: calc(tan(atan2(1px, 1px)) * 1px)) {
  @media (max-width: 767px) {
    .ai-hero-art { max-width: 400px; }
    .ai-hero-art-inner { --ai-hero-k: 0.6757; }
  }

  @media (max-width: 439px) {
    .ai-hero-art { max-width: 320px; }
    .ai-hero-art-inner { --ai-hero-k: 0.5405; }
  }
}