/* لایهٔ اتصال قالب پوشش به پلتفرم.
 *
 * main.css خروجی قالب مرجع (theme_html) است و با eng/sync-theme-assets.ps1 بازنویسی می‌شود؛
 * هرچه مخصوص CMS است اینجا می‌ماند تا همگام‌سازی آن را پاک نکند.
 */

/* ---------------------------------------------------------------- صفحه‌ساز -- */
/* گره‌های ساختاری صفحه‌ساز کلاس‌های شبکهٔ دوازده‌ستونی می‌سازند؛ قالب بوت‌استرپ را لود
   نمی‌کند، پس همان مجموعهٔ کوچک لازم اینجا تعریف می‌شود. */

.poshesh-builder-page > .poshesh-section:first-child {
  padding-block-start: 0;
}

.poshesh-section {
  position: relative;
}

.poshesh-section-muted {
  background-color: var(--surface-2);
}

.poshesh-section-dark {
  color: #fff;
  background-color: #04121a;
}

.poshesh-section-primary {
  color: var(--on-brand);
  background: var(--gradient-primary);
}

.poshesh-section-xl {
  padding-block: clamp(4rem, 9vw, 8rem);
}

.py-0 { padding-block: 0; }
.py-3 { padding-block: clamp(1rem, 2vw, 1.5rem); }
.py-4 { padding-block: clamp(2rem, 4vw, 3rem); }
.py-5 { padding-block: clamp(3rem, 6vw, 5rem); }

.poshesh-container {
  position: relative;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--pbx-gutter, 1.5rem) / -2);
}

.row > * {
  padding-inline: calc(var(--pbx-gutter, 1.5rem) / 2);
}

.g-0 { --pbx-gutter: 0; }
.g-1 { --pbx-gutter: .25rem; }
.g-2 { --pbx-gutter: .5rem; }
.g-3 { --pbx-gutter: 1rem; }
.g-4 { --pbx-gutter: 1.5rem; }
.g-5 { --pbx-gutter: 3rem; }

.row.g-1, .row.g-2, .row.g-3, .row.g-4, .row.g-5 {
  row-gap: var(--pbx-gutter);
}

.col { flex: 1 0 0%; }

.col-1 { inline-size: 8.3333%; }
.col-2 { inline-size: 16.6667%; }
.col-3 { inline-size: 25%; }
.col-4 { inline-size: 33.3333%; }
.col-5 { inline-size: 41.6667%; }
.col-6 { inline-size: 50%; }
.col-7 { inline-size: 58.3333%; }
.col-8 { inline-size: 66.6667%; }
.col-9 { inline-size: 75%; }
.col-10 { inline-size: 83.3333%; }
.col-11 { inline-size: 91.6667%; }
.col-12 { inline-size: 100%; }

@media (min-width: 36rem) {
  .col-sm-1 { inline-size: 8.3333%; }
  .col-sm-2 { inline-size: 16.6667%; }
  .col-sm-3 { inline-size: 25%; }
  .col-sm-4 { inline-size: 33.3333%; }
  .col-sm-5 { inline-size: 41.6667%; }
  .col-sm-6 { inline-size: 50%; }
  .col-sm-7 { inline-size: 58.3333%; }
  .col-sm-8 { inline-size: 66.6667%; }
  .col-sm-9 { inline-size: 75%; }
  .col-sm-10 { inline-size: 83.3333%; }
  .col-sm-11 { inline-size: 91.6667%; }
  .col-sm-12 { inline-size: 100%; }
}

@media (min-width: 48rem) {
  .col-md-1 { inline-size: 8.3333%; }
  .col-md-2 { inline-size: 16.6667%; }
  .col-md-3 { inline-size: 25%; }
  .col-md-4 { inline-size: 33.3333%; }
  .col-md-5 { inline-size: 41.6667%; }
  .col-md-6 { inline-size: 50%; }
  .col-md-7 { inline-size: 58.3333%; }
  .col-md-8 { inline-size: 66.6667%; }
  .col-md-9 { inline-size: 75%; }
  .col-md-10 { inline-size: 83.3333%; }
  .col-md-11 { inline-size: 91.6667%; }
  .col-md-12 { inline-size: 100%; }
}

@media (min-width: 62rem) {
  .col-lg-1 { inline-size: 8.3333%; }
  .col-lg-2 { inline-size: 16.6667%; }
  .col-lg-3 { inline-size: 25%; }
  .col-lg-4 { inline-size: 33.3333%; }
  .col-lg-5 { inline-size: 41.6667%; }
  .col-lg-6 { inline-size: 50%; }
  .col-lg-7 { inline-size: 58.3333%; }
  .col-lg-8 { inline-size: 66.6667%; }
  .col-lg-9 { inline-size: 75%; }
  .col-lg-10 { inline-size: 83.3333%; }
  .col-lg-11 { inline-size: 91.6667%; }
  .col-lg-12 { inline-size: 100%; }
}

@media (min-width: 75rem) {
  .col-xl-1 { inline-size: 8.3333%; }
  .col-xl-2 { inline-size: 16.6667%; }
  .col-xl-3 { inline-size: 25%; }
  .col-xl-4 { inline-size: 33.3333%; }
  .col-xl-5 { inline-size: 41.6667%; }
  .col-xl-6 { inline-size: 50%; }
  .col-xl-7 { inline-size: 58.3333%; }
  .col-xl-8 { inline-size: 66.6667%; }
  .col-xl-9 { inline-size: 75%; }
  .col-xl-10 { inline-size: 83.3333%; }
  .col-xl-11 { inline-size: 91.6667%; }
  .col-xl-12 { inline-size: 100%; }
}

@media (min-width: 87.5rem) {
  .col-xxl-1 { inline-size: 8.3333%; }
  .col-xxl-2 { inline-size: 16.6667%; }
  .col-xxl-3 { inline-size: 25%; }
  .col-xxl-4 { inline-size: 33.3333%; }
  .col-xxl-5 { inline-size: 41.6667%; }
  .col-xxl-6 { inline-size: 50%; }
  .col-xxl-7 { inline-size: 58.3333%; }
  .col-xxl-8 { inline-size: 66.6667%; }
  .col-xxl-9 { inline-size: 75%; }
  .col-xxl-10 { inline-size: 83.3333%; }
  .col-xxl-11 { inline-size: 91.6667%; }
  .col-xxl-12 { inline-size: 100%; }
}

/* ویجت‌های تمام‌سکشن قالب، خودشان کانتینر دارند؛ کانتینر صفحه‌ساز نباید دوباره تنگشان کند. */
.pbx-flex > .hero,
.pbx-flex > .intro,
.pbx-flex > .expand,
.pbx-flex > .services,
.pbx-flex > .security,
.pbx-flex > .compare,
.pbx-flex > .gallery,
.pbx-flex > .marquee,
.pbx-flex > .section,
.pbx-flex > .stats-band,
.pbx-flex > .contact-cta,
.pbx-flex > .page-hero,
.pbx-flex > .feature-detail,
.pbx-flex > .error-page {
  margin-inline: calc(50% - 50vw);
  inline-size: 100vw;
}

/* ------------------------------------------------------ هدر و فوتر صفحه‌ساز -- */
/* وقتی هدر یا فوتر در صفحه‌ساز ساخته شده باشد، پلتفرم آن را در این دو کلاس می‌پیچد. */

.poshesh-layout-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
}

.poshesh-layout-footer {
  position: relative;
  overflow: hidden;
  color: var(--on-brand);
  background: var(--footer-bg, #04121a);
}

/* ------------------------------------------------------------- صفحه‌بندی -- */
/* Pager یک TagHelper در فریم‌ورک است و ویو ندارد؛ کلاس‌هایش به ظاهر قالب نگاشته می‌شوند. */

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

.pagination .page-item {
  margin: 0;
  list-style: none;
}

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: .75rem;
  color: var(--ink-soft);
  text-decoration: none;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui);
}

.pagination .page-link:hover {
  color: var(--interactive);
  background-color: var(--surface-2);
}

.pagination .page-item.active .page-link {
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-color: transparent;
}

.pagination .page-item.disabled .page-link {
  opacity: .5;
}

/* --------------------------------------------------- تکمیل کلاس‌های قالب -- */

.page-main {
  display: block;
}

.section__head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-end;
  justify-content: space-between;
  max-inline-size: none;
}

.section__head--split > div:first-child {
  max-inline-size: 38rem;
}

.services__title,
.compare__title {
  color: #fff;
}

.bento__orb,
.security__orb {
  inset-block-start: -10rem;
  inset-inline-start: -8rem;
  inline-size: 34rem;
  block-size: 34rem;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / 14%), transparent 70%);
}

.values--2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.values--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

.timeline-wrap {
  max-inline-size: 44rem;
  margin-inline: auto;
}

.work-card__chip--end {
  margin-inline-start: auto;
}

.filter-search {
  min-inline-size: min(22rem, 100%);
  margin: 0;
}

.doc-article__updated {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-block-start: 2rem;
  font-size: .875rem;
  color: var(--ink-muted);
}

/* ----------------------------------------------------- نوار لوگوی مشتریان -- */

.logos__title {
  margin-block-end: 1.5rem;
  font-size: .875rem;
  color: var(--ink-muted);
  text-align: center;
}

.logos__track {
  overflow: hidden;
}

.logos__row {
  display: flex;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.logos__track--animated .logos__row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  inline-size: max-content;
}

.logos__item img {
  block-size: 2rem;
  inline-size: auto;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity var(--duration-fast) var(--ease-ui), filter var(--duration-fast) var(--ease-ui);
}

.logos__item:hover img {
  opacity: 1;
  filter: none;
}

/* --------------------------------------------------------------- خطاها -- */

.error-page__support {
  margin-block-start: -2rem;
  text-align: center;
  color: var(--ink-muted);
}

.error-page__reference code {
  padding: .15rem .5rem;
  font-family: var(--font-mono, monospace);
  background-color: var(--surface-2);
  border-radius: var(--radius-sm);
}

.error-page__details {
  max-inline-size: 52rem;
  margin-inline: auto;
  margin-block-start: 2rem;
}

/* ------------------------------------------------------------- محتوا -- */

.article__password {
  margin-block: 2rem;
}

.article__tags {
  margin-block-start: 2rem;
}

.blog-card__title a {
  color: inherit;
}

/* --------------------------------------------------------------- دیدگاه‌ها -- */

.comments {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: clamp(2rem, 4vw, 3rem);
  border-block-start: 1px solid var(--border);
}

.comments__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 2rem;
}

.comments__title {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin: 0;
  font-size: 1.25rem;
}

.comments__count {
  padding: .15rem .75rem;
  font-size: .875rem;
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
}

.comments__empty {
  color: var(--ink-muted);
}

.comment-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.comment-list--children {
  padding-inline-start: clamp(1rem, 3vw, 2.5rem);
  border-inline-start: 1px solid var(--border);
}

.comment__card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  margin-block-end: 1rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.comment__body {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: .5rem;
}

.comment__author {
  font-weight: 600;
}

.comment__date {
  font-size: .8125rem;
  color: var(--ink-muted);
}

.comment__text {
  white-space: pre-line;
}

.comment__reply {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  margin-block-start: .75rem;
  font-size: .875rem;
  color: var(--interactive);
}

.comment-form {
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block-start: 2rem;
  background-color: var(--surface-2);
  border-radius: var(--radius-lg);
}

.comment-form__title {
  margin-block-start: 0;
  font-size: 1.125rem;
}

.comment-form__reply {
  font-size: .875rem;
  color: var(--ink-muted);
}

.poshesh-form-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ------------------------------------------------------------ کلید زبان -- */

.lang-switch__dropdown {
  position: relative;
}

.lang-switch__toggle {
  inline-size: auto;
  gap: .4rem;
  padding-inline: .75rem;
}

.lang-switch__menu {
  inset-block-start: calc(100% + .5rem);
  inset-inline-end: 0;
}

.lang-switch__list {
  display: flex;
  gap: .75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropdown__link.is-current {
  color: var(--interactive);
  font-weight: 600;
}

/* ------------------------------------------------- ویجت‌های هستهٔ بازنویسی‌شده -- */

.widget-placeholder {
  padding: 1.5rem;
  color: var(--ink-muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.widget-divider {
  border: 0;
  border-block-start: 1px solid var(--border);
}

.widget-divider--dashed { border-block-start-style: dashed; }
.widget-divider--dotted { border-block-start-style: dotted; }

.widget-image__caption {
  margin-block-start: .5rem;
  font-size: .875rem;
  color: var(--ink-muted);
}

.widget-icon__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive);
}

.widget-icon__inner--circle,
.widget-icon__inner--square {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  background-color: var(--surface-2);
}

.widget-icon__inner--circle { border-radius: 50%; }
.widget-icon__inner--square { border-radius: var(--radius-md); }

.icon-list {
  display: grid;
  gap: .75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.icon-list--horizontal {
  grid-auto-flow: column;
  justify-content: start;
  gap: 1.5rem;
}

.icon-list__item {
  display: flex;
  gap: .625rem;
  align-items: center;
}

.icon-list__icon {
  display: inline-flex;
  color: var(--accent-600, var(--interactive));
}

.icon-list--divided .icon-list__item + .icon-list__item {
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--border);
}

.progress-meter__head {
  display: flex;
  justify-content: space-between;
  margin-block-end: .5rem;
  font-size: .875rem;
}

.progress-meter__track {
  block-size: .5rem;
  overflow: hidden;
  background-color: var(--surface-2);
  border-radius: var(--radius-pill);
}

.progress-meter__fill {
  display: block;
  block-size: 100%;
  background: var(--gradient-primary);
  border-radius: inherit;
}

.rating {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.rating__stars {
  display: inline-flex;
  gap: .15rem;
  color: var(--border);
}

.rating__star.is-filled {
  color: #f5b301;
}

.taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.taxonomy-list--list {
  flex-direction: column;
  flex-wrap: nowrap;
}

.taxonomy-list__item {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .35rem .85rem;
  font-size: .875rem;
  color: var(--ink-soft);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-inline-start: calc(var(--term-depth, 0) * 1rem);
}

.taxonomy-list__item:hover {
  color: var(--interactive);
}

.taxonomy-list__count {
  color: var(--ink-muted);
}

.video-frame,
.map-frame,
.audio-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.video-frame > video,
.video-frame > iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.map-frame > iframe {
  inline-size: 100%;
  block-size: var(--map-height, 22rem);
  border: 0;
}

.audio-frame > iframe {
  inline-size: 100%;
  border: 0;
}

.posts-widget__grid {
  display: grid;
  grid-template-columns: repeat(var(--posts-columns, 3), minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

@media (max-width: 62rem) {
  .posts-widget__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .posts-widget__grid { grid-template-columns: 1fr; }
}

.gallery-widget {
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
}

.work-card__caption {
  padding-block-start: .75rem;
  font-size: .875rem;
  color: var(--ink-muted);
}

.widget-menu .nav__list {
  flex-wrap: wrap;
}

.widget-menu--vertical .nav__list {
  flex-direction: column;
  align-items: flex-start;
}

.member--compact {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.slider-nav--end {
  justify-content: flex-end;
  margin-block-end: 1.5rem;
}

/* کارت مطلبی که تصویر شاخص ندارد، به‌جای قاب خالی با فاصلهٔ بیشتر شروع می‌شود. */
.blog-card--textonly .blog-card__body {
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
}

.portal-widget-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.portal-widget-grid--1 { grid-template-columns: 1fr; }
.portal-widget-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-widget-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-widget-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.portal-heading--compact .section__head {
  margin-block-end: 0;
}

.portal-heading--split .section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  max-inline-size: none;
  text-align: start;
}

.portal-heading--split .section__kicker,
.portal-heading--split .section__title {
  grid-column: 1;
}

.portal-heading--split .section__lead {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}

.portal-feature-card {
  min-block-size: 100%;
  overflow: hidden;
}

.portal-feature-card__content {
  position: relative;
  z-index: 2;
}

.portal-feature-card__media {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: clamp(10rem, 24vw, 16rem);
  margin-block-end: 1.25rem;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - .35rem);
}

.portal-feature-card--media-start {
  display: grid;
  grid-template-columns: minmax(7rem, .75fr) minmax(0, 1.25fr);
  gap: 1.25rem;
  align-items: center;
}

.portal-feature-card--media-start .portal-feature-card__media {
  block-size: 100%;
  min-block-size: 12rem;
  margin-block-end: 0;
}

.portal-feature-card--media-background {
  background-position: center;
  background-size: cover;
}

.portal-feature-card--media-background::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgb(4 18 26 / 42%), rgb(4 18 26 / 92%));
}

.portal-feature-card--media-background .feature-card__title,
.portal-feature-card--media-background .feature-card__text {
  color: #fff;
}

.portal-feature-card--solid {
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.portal-feature-card--outline {
  background: transparent;
  box-shadow: none;
}

.portal-feature-card--accent {
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-color: transparent;
}

.portal-feature-card--accent .feature-card__title,
.portal-feature-card--accent .feature-card__text,
.portal-feature-card--accent .feature-card__link {
  color: inherit;
}

.portal-widget-badge {
  display: inline-flex;
  padding: .25rem .7rem;
  margin-block-end: .75rem;
  font-size: .75rem;
  color: var(--interactive);
  background: rgb(var(--accent-rgb) / 12%);
  border: 1px solid rgb(var(--accent-rgb) / 20%);
  border-radius: var(--radius-pill);
}

.portal-feature-list--compact .feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem;
}

.portal-feature-list--compact .feature-card__icon {
  grid-row: 1 / span 3;
}

.portal-feature-list--media .portal-feature-card__media {
  aspect-ratio: 16 / 10;
}

.portal-quick-start--cards .steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1rem;
}

.portal-quick-start--cards .step,
.portal-quick-start--vertical .step {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.portal-quick-start--cards .steps__list::before,
.portal-quick-start--connector-off .steps__list::before {
  display: none;
}

.portal-quick-start--vertical .steps__list {
  display: grid;
  grid-template-columns: 1fr;
  max-inline-size: 48rem;
  margin-inline: auto;
}

.portal-quick-start__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: .75rem;
  color: var(--interactive);
  background: rgb(var(--accent-rgb) / 12%);
  border-radius: var(--radius-md);
}

.portal-portfolio-list--square .work-card__media { aspect-ratio: 1; }
.portal-portfolio-list--portrait .work-card__media { aspect-ratio: 4 / 5; }
.portal-portfolio-list--landscape .work-card__media { aspect-ratio: 16 / 10; }

.portal-portfolio-list .work-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.portal-pricing-card {
  min-block-size: 100%;
}

.portal-pricing-card--gradient {
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-color: transparent;
}

.portal-pricing-card--gradient .plan__name,
.portal-pricing-card--gradient .plan__price,
.portal-pricing-card--gradient .plan__feature {
  color: inherit;
}

.portal-pricing-card--minimal {
  background: transparent;
  box-shadow: none;
}

.portal-pricing-card__feature--excluded {
  opacity: .45;
  text-decoration: line-through;
}

.portal-video-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #04121a;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: clamp(1rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}

.portal-video-frame--16x9 { aspect-ratio: 16 / 9; }
.portal-video-frame--21x9 { aspect-ratio: 21 / 9; }
.portal-video-frame--4x3 { aspect-ratio: 4 / 3; }
.portal-video-frame--square { aspect-ratio: 1; }

.portal-video-frame video,
.portal-video-frame iframe {
  position: absolute;
  z-index: -2;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 0;
}

.portal-video-frame__overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(2 16 24 / var(--portal-video-overlay));
}

.portal-video-frame__badge {
  position: absolute;
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  padding: .55rem .9rem;
  color: #fff;
  background: rgb(8 35 46 / 72%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
}

.portal-video-frame__badge--top {
  inset-block-start: 1.5rem;
  inset-inline-end: 1.5rem;
}

.portal-video-frame__badge--side {
  inset-block-end: 1.5rem;
  inset-inline-start: 1.5rem;
}

.portal-testimonial-card {
  min-block-size: 100%;
}

.portal-testimonial-card--plain {
  background: transparent;
  box-shadow: none;
}

.portal-testimonial-card--accent {
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-color: transparent;
}

.portal-testimonial-card__logo {
  max-inline-size: 7rem;
  max-block-size: 2.5rem;
  margin-block-end: 1rem;
  object-fit: contain;
}

.portal-testimonial-card__avatar {
  object-fit: cover;
}

.portal-testimonial-card__rating {
  display: flex;
  gap: .15rem;
  margin-block-end: 1rem;
  color: #f5b301;
}

.portal-stat-card {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.portal-stat-card--compact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  align-items: center;
}

.portal-stat-card--accent {
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-color: transparent;
}

.portal-stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: 1.25rem;
  color: var(--interactive);
  background: rgb(var(--accent-rgb) / 12%);
  border-radius: var(--radius-lg);
}

.portal-stat-card__value {
  display: block;
  margin-block-end: .45rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
}

.portal-stat-card__title {
  margin: 0;
  font-size: 1.1rem;
}

.portal-stat-card__text {
  margin-block: .5rem 0;
  color: var(--ink-muted);
}

.portal-stat-card__progress {
  display: block;
  block-size: .4rem;
  margin-block-start: 1.25rem;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}

.portal-stat-card__progress span {
  display: block;
  block-size: 100%;
  background: var(--gradient-primary);
}

.portal-logo-cloud {
  display: grid;
  grid-template-columns: repeat(var(--portal-logo-columns, 5), minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}

.portal-logo-cloud--2 { --portal-logo-columns: 2; }
.portal-logo-cloud--3 { --portal-logo-columns: 3; }
.portal-logo-cloud--4 { --portal-logo-columns: 4; }
.portal-logo-cloud--5 { --portal-logo-columns: 5; }
.portal-logo-cloud--6 { --portal-logo-columns: 6; }
.portal-logo-cloud--7 { --portal-logo-columns: 7; }
.portal-logo-cloud--8 { --portal-logo-columns: 8; }

.portal-logo-cloud__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4.5rem;
  padding: 1rem;
  color: var(--ink-muted);
}

.portal-logo-cloud__item img {
  max-inline-size: 100%;
  max-block-size: 2.75rem;
  object-fit: contain;
  transition: opacity var(--duration-fast) var(--ease-ui), filter var(--duration-fast) var(--ease-ui);
}

.portal-logo-cloud--mono-on .portal-logo-cloud__item img {
  filter: grayscale(1);
  opacity: .62;
}

.portal-logo-cloud--mono-on .portal-logo-cloud__item:hover img {
  filter: none;
  opacity: 1;
}

.portal-logo-cloud--marquee {
  display: flex;
  overflow: hidden;
}

.portal-logo-cloud--marquee .portal-logo-cloud__item {
  flex: 0 0 min(12rem, 42vw);
}

.portal-action-card {
  position: relative;
  min-block-size: 18rem;
  padding: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--surface);
  background-position: center;
  background-size: cover;
  border: 1px solid var(--border);
  border-radius: clamp(1.25rem, 3vw, 2.5rem);
}

.portal-action-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.portal-action-card--gradient {
  color: var(--on-brand);
  background: var(--gradient-primary);
  border-color: transparent;
}

.portal-action-card--gradient::before {
  background: rgb(3 26 37 / 24%);
}

.portal-action-card--outline {
  background-color: transparent;
  border-color: var(--interactive);
}

.portal-action-card--center {
  text-align: center;
}

.portal-action-card__content {
  position: relative;
  z-index: 2;
  max-inline-size: 48rem;
}

.portal-action-card--center .portal-action-card__content {
  margin-inline: auto;
}

.portal-action-card__title {
  margin-block: 1rem;
  font-size: clamp(2rem, 5vw, 3.75rem);
}

.portal-action-card__text {
  color: inherit;
  opacity: .82;
}

.portal-action-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 1.5rem;
}

.portal-action-card--center .portal-action-card__actions {
  justify-content: center;
}

.portal-action-card__orb {
  position: absolute;
  z-index: 0;
  inline-size: 18rem;
  block-size: 18rem;
  background: rgb(var(--accent-rgb) / 18%);
  border-radius: 50%;
  filter: blur(30px);
}

.portal-action-card__orb--start {
  inset-block-start: -9rem;
  inset-inline-start: -7rem;
}

.portal-action-card__orb--end {
  inset-block-end: -10rem;
  inset-inline-end: -7rem;
}

@media (max-width: 62rem) {
  .portal-widget-grid--3,
  .portal-widget-grid--4,
  .portal-logo-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .portal-widget-grid,
  .portal-logo-cloud,
  .portal-heading--split .section__head,
  .portal-feature-card--media-start {
    grid-template-columns: 1fr;
  }

  .portal-heading--split .section__lead {
    grid-column: 1;
    grid-row: auto;
  }

  .portal-video-frame__badge--side {
    inset-block-end: 1rem;
    inset-inline-start: 1rem;
  }

  .portal-video-frame__badge--top {
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
  }
}

.blog-card--textonly .badge {
  align-self: flex-start;
  margin-block-end: .75rem;
}