.aiandme-products,
.aiandme-products * { box-sizing: border-box; }
.aiandme-products {
  --products-chrome: 91px;
  --products-primary-height: 62px;
  --products-secondary-height: 211.5px;
  padding: 72px 20px;
  background: radial-gradient(circle at 18% 12%, rgb(32 213 245 / 8%), transparent 30%), #05090f;
  color: #f5fbff;
  font-family: "SF Pro", -apple-system, BlinkMacSystemFont, sans-serif;
}
.aiandme-products [hidden] { display: none; }
.aiandme-products__intro { max-width: 980px; margin: 0 auto 64px; text-align: center; }
.aiandme-products__intro h1 { margin: 20px 0 16px; color: #f6fbff; font: 500 42px/50px Geist, sans-serif; letter-spacing: -.04em; }
.aiandme-products__intro > p:last-child { max-width: 720px; margin: 0 auto; color: #8fa3b8; font-size: 16px; line-height: 1.7; }
.aiandme-products__badge { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: #20d5f5; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.aiandme-products__badge::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }
.aiandme-products__plane { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; max-width: 1240px; margin: 0 auto; align-items: start; }
.aiandme-products__groups { grid-column: 1 / -1; position: sticky; top: var(--products-chrome); z-index: 20; width: 640px; max-width: 100%; margin: 0 auto; padding: 9px 12px; display: flex; justify-content: center; gap: 80px; background: #000; border: 1px solid rgb(255 255 255 / 6%); border-radius: 15px; }
.aiandme-products button { position: relative; min-width: 0; border: 0; border-radius: 999px; padding: 9px 10px; background: transparent; color: #dce6ef; font: 600 13px/1.1 "SF Pro", sans-serif; text-transform: none; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; }
.aiandme-products button::after { content: ""; position: absolute; inset: -6px 0; min-height: 44px; }
.aiandme-products button[aria-current="true"] { background: #1fc3de; color: #06131a; border-color: #1fc3de; }
.aiandme-products__groups button[aria-current="true"] { color: #fff; }
.aiandme-products button:hover { border-color: #1fc3de; }
.aiandme-products button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #126878; }
.aiandme-products__tabs { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--products-chrome) + var(--products-primary-height) + max(24px, (100svh - var(--products-chrome) - var(--products-primary-height) - var(--products-secondary-height)) / 2)); display: grid; grid-template-rows: repeat(3, minmax(58.5px, auto)); align-items: center; gap: 18px; z-index: 19; }
.aiandme-products__tabs button { width: 100%; min-height: 54px; padding: 11px 13px; border: 1px solid #17313d; border-radius: 7px; background: #111a23; color: #e7eef5; font-size: 15px; font-weight: 500; line-height: 1.15; letter-spacing: normal; white-space: normal; text-align: left; }
.aiandme-products__tabs button::after { inset: 0; }
.aiandme-products__panels { grid-column: 2; grid-row: 2; display: grid; gap: 76px; min-width: 0; }
.aiandme-products__panel { position: relative; min-width: 0; min-height: 450px; margin: 0; padding: 22px 30px 30px; border: 1px solid rgb(74 212 247 / 15%); border-radius: 24px; background: linear-gradient(135deg, #08111e, #050619); box-shadow: 0 28px 90px rgb(0 0 0 / 28%); scroll-margin-top: calc(var(--products-chrome) + var(--products-primary-height) + 18px); }
.aiandme-products__panel > p { margin: 0 0 30px; color: #8fa3b9; font-size: 17px; line-height: 1.6; }
.aiandme-products__panel img { display: block; width: 100%; height: auto; border-radius: 18px; object-fit: contain; }
.aiandme-products .aiandme-products__video-trigger { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: #020812; color: #fff; line-height: 1; white-space: normal; box-shadow: none; }
.aiandme-products .aiandme-products__video-trigger::after { content: none; }
.aiandme-products .aiandme-products__video-trigger:hover { border: 0; }
.aiandme-products .aiandme-products__video-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 4px; box-shadow: 0 0 0 7px #126878; }
.aiandme-products__video-trigger img { width: 100%; margin: 0; transition: filter 180ms ease; }
.aiandme-products__video-trigger:hover img { filter: brightness(.9); }
.aiandme-products__play { position: absolute; left: 50%; top: 50%; display: grid; width: 72px; height: 72px; place-items: center; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: rgb(248 246 239 / 90%); color: #5d6367; box-shadow: 0 3px 12px rgb(0 0 0 / 20%); transition: transform 180ms ease, background 180ms ease, color 180ms ease; pointer-events: none; }
.aiandme-products__video-trigger:hover .aiandme-products__play { transform: translate(-50%, -50%) scale(1.05); background: rgb(255 255 255 / 96%); color: #42484c; }
.aiandme-products__play svg { display: block; width: 32px; height: 32px; fill: currentColor; }
.aiandme-products__video-dialog { width: min(1120px, calc(100vw - 48px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid rgb(32 213 245 / 38%); border-radius: 20px; background: #06101a; color: #f5fbff; box-shadow: 0 30px 100px rgb(0 0 0 / 72%), 0 0 48px rgb(32 213 245 / 14%); }
.aiandme-products__video-dialog:not([open]) { display: none; }
.aiandme-products__video-dialog::backdrop { background: rgb(0 5 12 / 84%); backdrop-filter: blur(7px); }
.aiandme-products__video-shell { position: relative; padding: 56px 14px 14px; }
.aiandme-products .aiandme-products__video-close { position: absolute; z-index: 2; top: 8px; right: 10px; display: grid; width: 44px; height: 44px; min-height: 44px; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; background: #0d1d29; color: #fff; font: 400 30px/1 Arial, sans-serif; }
.aiandme-products .aiandme-products__video-close::after { inset: 0; }
.aiandme-products .aiandme-products__video-close:hover { border-color: #20d5f5; background: #12303d; }
.aiandme-products__video-dialog video { display: block; width: 100%; max-height: calc(100svh - 118px); aspect-ratio: 1898 / 984; border-radius: 12px; background: #000; object-fit: contain; }
.aiandme-products__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.aiandme-products-modal-open,
html.aiandme-products-modal-open body { overflow: hidden; scrollbar-gutter: stable; }
.aiandme-products__feature-title { margin: 0 0 16px; color: #f5fbff; font: 600 18px/1.3 Geist, sans-serif; }
.aiandme-products[data-products-ready] .aiandme-products__feature-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aiandme-products:not([data-products-ready]) .aiandme-products__panels { grid-column: 1 / -1; }
@media (min-width: 1025px) {
  .aiandme-products__panel img { width: 73.8%; margin-inline: auto; }
  .aiandme-products .aiandme-products__video-trigger { width: 73.8%; margin-inline: auto; }
  .aiandme-products .aiandme-products__video-trigger img { width: 100%; margin: 0; }
}
@media (max-width: 1024px) {
  .aiandme-products { padding: 64px 16px; }
  .aiandme-products__intro h1 { font-size: 34px; line-height: 42px; }
  .aiandme-products__intro > p:last-child { font-size: 15px; }
  .aiandme-products__plane { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .aiandme-products__groups { width: 80%; max-width: 350px; gap: 6px; padding: 7px 8px; }
  .aiandme-products__groups button { min-height: 44px; padding: 10px 7px; font-size: 11px; }
  .aiandme-products__groups button::after { inset: 0; }
  .aiandme-products__tabs { grid-column: 1; grid-row: 2; top: calc(var(--products-chrome) + var(--products-primary-height)); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; align-items: stretch; gap: 6px; padding: 12px 0; background: #05090f; }
  .aiandme-products__tabs button { min-height: 40px; padding: 6px; font-size: 15px; line-height: 1.08; letter-spacing: -.015em; text-align: center; border-radius: 9px; }
  .aiandme-products__tabs button::after { inset: -2px 0; }
  .aiandme-products__panels { grid-column: 1; grid-row: 3; gap: 48px; }
  .aiandme-products__panel { min-height: 0; padding: 16px 18px 18px; scroll-margin-top: calc(var(--products-chrome) + var(--products-primary-height) + var(--products-secondary-height) + 30px); }
  .aiandme-products__panel > p { margin: 0 0 28px; font-size: 16px; }
}
@media (max-width: 767px) {
  .aiandme-products { padding: 48px 9px; }
  .aiandme-products__intro { margin-bottom: 38px; text-align: left; }
  .aiandme-products__intro h1 { font-size: 28px; line-height: 35px; }
  .aiandme-products__intro > p:last-child { font-size: 14px; }
  .aiandme-products__badge { font-size: 10px; letter-spacing: .12em; }
  .aiandme-products__plane { row-gap: 6px; }
  .aiandme-products__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: none; gap: 4px; padding: 4px; border-color: #1d3444; border-radius: 12px; background: #0b1725; }
  .aiandme-products__groups button { min-height: 44px; padding: 4px; border-radius: 8px; color: #b3c4d6; font: 600 clamp(12.5px, 3.6vw, 14px)/1.2 Geist, sans-serif; letter-spacing: -.015em; white-space: normal; text-wrap: balance; }
  .aiandme-products__groups button[aria-current="true"] { color: #06131a; }
  .aiandme-products__tabs { gap: 5px; padding: 6px 0 0; }
  .aiandme-products__tabs button { min-height: 44px; padding: 4px 3px; border-color: #1c3142; border-radius: 8px; background: #0c1724; color: #a6bbce; font: 500 clamp(12px, 3.05vw, 13px)/1.2 Geist, sans-serif; letter-spacing: -.015em; text-wrap: balance; }
  .aiandme-products__tabs button[aria-current="true"] { border-color: #238596; background: #103340; color: #9eecf6; }
  .aiandme-products__tabs button::after { inset: 0; }
  .aiandme-products__panels { gap: 32px; }
  .aiandme-products__panel { padding: 12px; border-radius: 18px; }
  .aiandme-products__panel img { border-radius: 12px; }
  .aiandme-products .aiandme-products__video-trigger { border-radius: 12px; }
  .aiandme-products__play { width: 58px; height: 58px; }
  .aiandme-products__play svg { width: 27px; height: 27px; }
  .aiandme-products__video-dialog { width: calc(100vw - 16px); max-height: calc(100svh - 16px); border-radius: 14px; }
  .aiandme-products__video-shell { padding: 52px 8px 8px; }
  .aiandme-products__video-dialog video { max-height: calc(100svh - 84px); border-radius: 8px; }
}
@media (max-width: 359px) {
  .aiandme-products__tabs { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.15fr); }
  .aiandme-products__tabs button { padding-inline: 1px; }
}