/* Homepage sections: AI workforce (media + accordion), system-of-action card stack, CTA */

/* ---------- AI workforce ---------- */
.workforce { position: relative; padding-block: var(--section-y); background: linear-gradient(180deg, var(--blue-50) 0%, #f9fbff 70%, #fff 100%); border-top: 1px solid rgba(214, 227, 245, 0.6); }
.wf { margin-top: var(--head-gap); display: grid; gap: 28px; align-items: center; }
.acc { border-top: 1px solid rgba(206, 222, 244, 0.7); }
.acc { display: grid; }

/* rows carry only the product name + disclosure control — no ordinals */
.acc__item { position: relative; border-bottom: 1px solid rgba(206, 222, 244, 0.7); border-radius: 0; transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.acc__item.is-open { background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); }
.acc__item.is-open::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--blue); }
.acc__btn { display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 18px 20px 18px 24px; text-align: left; border-radius: var(--r-md); }
.acc__name { font-size: 1.125rem; font-weight: 500; color: var(--navy); line-height: 1.3; letter-spacing: -0.005em; transition: color 0.2s; }
.is-open .acc__name { font-weight: 650; }
.acc__btn:hover .acc__name { color: var(--blue); }
.acc__chev { position: relative; width: 28px; height: 28px; border-radius: 50%; transition: background-color 0.3s; }
.acc__chev::before { content: ""; position: absolute; left: 10px; top: 8px; width: 7px; height: 7px; border: solid var(--navy); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.is-open .acc__chev { background: var(--blue-100); }
.is-open .acc__chev::before { top: 11px; transform: rotate(-135deg); border-color: var(--blue); }

.acc__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.5s var(--ease), visibility 0s linear 0.5s; }
.is-open > .acc__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
html:not(.js) .acc__panel { grid-template-rows: 1fr; visibility: visible; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__inner::after { content: ""; display: block; height: 22px; }
.acc__inner > * { margin-inline: 24px 28px; }
.acc__inner > p { color: var(--ink); font-size: 1rem; line-height: 1.65; max-width: 46ch; }
.acc__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-block: 6px; font-size: 0.9375rem; font-weight: 650; color: var(--blue); }
.acc__link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.acc__link:hover svg { transform: translateX(3px); }
.acc__slot { margin-top: 18px; margin-inline: 12px; }
.acc__slot:empty { display: none; }

@media (min-width: 900px) {
  .wf { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .acc__slot { display: none; }
}
@media (max-width: 899.98px) {
  .wf__media { display: none; }
  .acc__slot .frame { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
}

/* ---------- system of action: scroll-stacked card story ----------
   Same narrative on every device: each card is sticky, the next rises from below and settles over it,
   covered cards recede very slightly (scale + soft veil) and keep a visible layered edge.
   Motion values are driven continuously by main.js (smoothed, eased). Only prefers-reduced-motion
   (or a very short landscape viewport) turns the stack into a static overlapping deck. */
.story {
  --step: 12px;
  --stick: calc(var(--header-h) + 14px);
  --card-h: min(var(--card-max), calc(100vh - var(--header-h) - 14px - 3 * var(--step) - 18px));
  --card-max: 560px;
  position: relative; isolation: isolate; overflow: clip;
  padding-block: var(--section-y) calc(var(--section-y) * 0.5);
  background: linear-gradient(180deg, #fff 0%, #f3f8ff 30%, #f5f9ff 80%, #fff 100%);
}
@supports (height: 100svh) {
  .story { --card-h: min(var(--card-max), calc(100svh - var(--header-h) - 14px - 3 * var(--step) - 18px)); }
}
.story__waves { position: absolute; z-index: -1; left: -8%; right: -8%; bottom: 0; height: 560px; pointer-events: none; opacity: 0.5;
  background: url("../img/waves.svg") center bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); }
.stack { margin-top: var(--head-gap); }
.stack__item { position: relative; z-index: calc(var(--i) + 1); }

.scard {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border: 1px solid rgba(206, 222, 244, 0.55); border-radius: var(--r-xl);
  box-shadow: 0 -12px 32px -22px rgba(12, 26, 75, 0.12), 0 30px 60px -40px rgba(11, 111, 220, 0.22);
  transform-origin: 50% 0;
}
/* soft veil for receding cards (value set by main.js) */
.scard::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: #eef4fd; opacity: var(--veil, 0); }
.scard__h { font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.022em; }
.scard__p { margin-top: 10px; max-width: 34ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--ink); }
.scard__media { min-width: 0; display: flex; }
.scard .frame { flex: 1; min-width: 0; box-shadow: none; border-radius: var(--r-lg); border-color: transparent; }

/* stacked (default whenever motion is allowed and the viewport is tall enough to hold a card) */
@media (prefers-reduced-motion: no-preference) and (min-height: 540px) {
  .stack__item { position: sticky; top: calc(var(--stick) + var(--i) * var(--step)); }
  .stack__item + .stack__item { margin-top: clamp(64px, 14vh, 140px); }
  .scard { height: var(--card-h); will-change: transform; }
  .scard__media { flex: 1 1 0; min-height: 0; }
  .scard .frame { container-type: size; display: grid; place-items: center; }
}
/* static deck: reduced motion or very short (landscape phone) viewports */
@media (prefers-reduced-motion: reduce), (max-height: 539.98px) {
  .stack__item + .stack__item { margin-top: 20px; }
  .scard__media .frame { container-type: inline-size; }
}

@media (min-width: 600px) and (max-width: 899.98px) {
  .story { --card-max: 680px; }
  .scard { padding: 30px 30px 28px; }
}
@media (min-width: 900px) {
  .story { --step: 16px; --stick: calc(var(--header-h) + 20px); --card-h: min(640px, calc(100vh - var(--header-h) - 20px - 3 * var(--step) - 36px)); }
  @supports (height: 100svh) { .story { --card-h: min(640px, calc(100svh - var(--header-h) - 20px - 3 * var(--step) - 36px)); } }
  .scard { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(28px, 3vw, 40px); }
  .scard__text { padding-left: clamp(4px, 1.5vw, 24px); }
  .scard__p { margin-top: 16px; }
  .scard__media { height: 100%; }
}
@media (min-width: 1200px) {
  .scard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px), (max-height: 539.98px) and (min-width: 900px) {
  .scard { min-height: 520px; }
}

/* ---------- bottom CTA ---------- */
.cta-wrap { padding-block: clamp(40px, 5vw, 72px) var(--section-y); }
.cta {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 40px;
  padding: clamp(36px, 6vw, 88px) clamp(24px, 5.5vw, 88px) clamp(28px, 5vw, 80px);
  border: 1px solid #bcd4f5; border-radius: var(--r-xl);
  background: linear-gradient(125deg, #cfe2fc 0%, #deebfe 34%, #ecf4ff 68%, #f5f9ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 40px 80px -44px rgba(11, 111, 220, 0.45), 0 12px 28px -18px rgba(12, 26, 75, 0.12);
}
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(52% 70% at 18% 30%, rgba(255, 255, 255, 0.7), transparent 72%); }
.cta__waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70%; z-index: -1; pointer-events: none; opacity: 0.8;
  background: url("../img/cta-waves.svg") right bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%);
}
.cta__copy { max-width: 36rem; }
.cta__rule { display: block; width: 48px; height: 3px; margin-bottom: 26px; border-radius: 3px; background: var(--blue); }
.cta .h2 { font-size: clamp(2.125rem, 1.35rem + 2.3vw, 3.125rem); line-height: 1.06; letter-spacing: -0.026em; text-wrap: wrap; }
.cta__em { display: block; color: var(--blue); }
.cta .lead { margin: 20px 0 32px; max-width: 32ch; color: #33406b; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); }
.cta .btn { min-height: 56px; padding: 0 30px; font-size: 1rem; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.55), 0 2px 4px rgba(11, 111, 220, 0.28), 0 14px 30px rgba(11, 111, 220, 0.3); }
.cta .btn:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(11, 111, 220, 0.28), 0 18px 36px rgba(11, 111, 220, 0.36); }
.cta__media { min-width: 0; width: 100%; max-width: min(80%, 440px); justify-self: center; }

@media (max-width: 599.98px) {
  .cta { gap: 40px; padding-inline: 22px; padding-bottom: 36px; border-radius: var(--r-lg); }
  .cta__media { max-width: 75%; }
  .cta .btn { width: 100%; }
  .cta__waves { height: 55%; opacity: 0.55; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  .cta { gap: 52px; }
  .cta__media { max-width: min(78%, 440px); }
}
@media (min-width: 1100px) {
  .cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
  .cta__media { max-width: 500px; justify-self: end; }
  .cta__waves { height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%); mask-image: linear-gradient(90deg, transparent 10%, #000 55%); }
}