.store-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(19, 88, 255, .13), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
.store-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(1360px, calc(100% - 56px));
  height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(18px);
}
.store-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.store-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  color: #162033;
  font-size: 14px;
  font-weight: 760;
}
.store-nav a.active,
.store-nav a:hover {
  color: #0f56ff;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(9,31,72,.06);
}
.store-nav span,
.cart-float b {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #0f56ff;
  font-size: 12px;
}
.store-main,
.product-main,
.cart-main {
  width: min(1360px, calc(100% - 56px));
  margin: 0 auto;
  padding: 36px 0 80px;
}
.store-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding: 42px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 20%, rgba(19,88,255,.12), transparent 34%),
    rgba(255,255,255,.76);
  box-shadow: 0 24px 80px rgba(32,78,148,.10);
}
.store-hero h1,
.product-copy h1,
.cart-head h1 {
  max-width: 920px;
  margin: 10px 0 0;
  font-size: clamp(42px, 4vw, 68px);
  line-height: .96;
  letter-spacing: -0.07em;
}
.store-hero p,
.product-copy p,
.cart-head p {
  max-width: 760px;
  margin: 18px 0 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.52;
}
.cart-float {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 16px;
  background: #fff;
  font-weight: 850;
  box-shadow: 0 16px 40px rgba(9,31,72,.08);
}
.market-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.filter-panel,
.cart-summary,
.detail-panel,
.pricing-panel {
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 60px rgba(32,78,148,.08);
}
.filter-panel {
  position: sticky;
  top: 86px;
  align-self: start;
  padding: 18px;
}
.top-search,
.filter-block,
.cart-summary label,
.cart-item label {
  display: grid;
  gap: 9px;
}
.top-search span,
.filter-block > span,
.cart-summary label span,
.cart-item label span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.top-search input,
.catalog-topline select,
.cart-summary select,
.cart-summary input,
.cart-item select {
  height: 44px;
  border: 1px solid rgba(11,32,68,.12);
  border-radius: 13px;
  padding: 0 13px;
  background: #fff;
  color: #0f172a;
  outline: none;
}
.filter-block { margin-top: 18px; }
.filter-panel .filter-block:first-child { margin-top: 0; }
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-chip {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}
.filter-chip.active {
  color: #fff;
  border-color: #0f56ff;
  background: #0f56ff;
}
.catalog-area {
  min-width: 0;
}
.catalog-topline {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(11,32,68,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 42px rgba(32,78,148,.06);
}
.catalog-topline p {
  grid-column: 1;
  margin: 0 0 0 4px;
  color: #64748b;
}
.catalog-topline b { color: #0f172a; }
.top-search {
  width: 100%;
  max-width: none;
}
.top-search input {
  height: 50px;
  border-radius: 16px;
  font-size: 15px;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.market-card {
  position: relative;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 38px rgba(9,31,72,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.market-card:hover {
  transform: translateY(-3px);
  border-color: rgba(19,88,255,.22);
  box-shadow: 0 24px 58px rgba(9,31,72,.10);
}
.market-card-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 18px 18px;
}
.market-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -22px;
  position: relative;
  z-index: 2;
}
.status-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #0f56ff;
  background: rgba(19,88,255,.08);
  font-size: 12px;
  font-weight: 850;
}
.product-art {
  position: relative;
  height: 170px;
  margin: 0 -18px 18px;
  border-radius: 24px 24px 18px 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--art-z) 78%, var(--art-d) 0 8%, transparent 33%),
    conic-gradient(from var(--art-skew) at 86% 84%, var(--art-d), var(--art-c), transparent 34%, transparent 100%),
    linear-gradient(105deg, #050915 0 20%, var(--art-a) 20% var(--art-x), var(--art-b) var(--art-x) var(--art-y), var(--art-c) 100%);
}
.product-art span {
  position: absolute;
  display: block;
  mix-blend-mode: screen;
}
.product-art span:nth-child(1) {
  right: -28px;
  bottom: -52px;
  width: 198px;
  height: 198px;
  border-radius: 50%;
  border: 36px solid color-mix(in srgb, var(--art-d) 72%, transparent);
  opacity: .86;
}
.product-art span:nth-child(2) {
  right: 86px;
  bottom: -18px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 26px solid color-mix(in srgb, var(--art-c) 66%, transparent);
  opacity: .58;
}
.product-art span:nth-child(3) {
  left: 20%;
  top: -24px;
  width: 95px;
  height: 230px;
  background: rgba(255,255,255,.10);
  transform: skewX(-13deg);
  opacity: .64;
}
.product-art span:nth-child(4) {
  left: var(--art-x);
  top: 22px;
  width: 128px;
  height: 128px;
  border-radius: var(--art-radius);
  background: rgba(255,255,255,.12);
  transform: rotate(var(--art-skew));
}
.product-art strong {
  position: absolute;
  left: 22px;
  bottom: 22px;
  max-width: calc(100% - 44px);
  color: #fff;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-shadow: 0 2px 18px rgba(0,0,0,.24);
}
.product-type {
  margin: 13px 0 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.market-card h2 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.market-card p:not(.product-type) {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.44;
}
.tag-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.tag-line span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #526173;
  background: #eef4fb;
  font-size: 11px;
  font-weight: 780;
}
.price-line {
  margin-top: auto;
  padding-top: 16px;
  color: #64748b;
  font-size: 14px;
}
.price-line b { color: #0f172a; }
.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 18px 18px;
}
.card-actions > * { flex: 1; }
.market-preview {
  width: min(1280px, calc(100% - 56px));
  margin: 70px auto 90px;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 18px;
}
.section-head {
  padding: 28px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 26px;
  background: rgba(255,255,255,.78);
}
.section-head h2 {
  margin: 10px 0 0;
  color: #071329;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.055em;
}
.section-head p {
  margin: 14px 0 22px;
  color: #64748b;
  line-height: 1.5;
}
.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.preview-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 15px 42px rgba(9,31,72,.06);
}
.preview-card b {
  margin-top: 18px;
  font-size: 19px;
  letter-spacing: -0.04em;
}
.preview-card small {
  margin-top: 9px;
  color: #64748b;
  line-height: 1.45;
}
.preview-card > span:last-child {
  margin-top: auto;
  color: #0f56ff;
  font-weight: 850;
}
.preview-card.is-accent {
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(125,178,255,.28), transparent 34%),
    linear-gradient(135deg, #0b1224, #0f56ff);
}
.preview-card.is-accent small,
.preview-card.is-accent > span:last-child { color: rgba(255,255,255,.78); }
.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 20px;
  align-items: stretch;
}
.product-copy,
.product-demo-card {
  padding: 38px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 20px 70px rgba(32,78,148,.08);
}
.back-link {
  display: inline-flex;
  margin-bottom: 24px;
  color: #0f56ff;
  font-weight: 850;
}
.demo-video {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 26px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, #0b1224, #0f56ff);
}
.play-dot {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.demo-video b {
  margin-top: 18px;
  font-size: 22px;
}
.demo-video p {
  max-width: 300px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.detail-panel,
.pricing-panel { padding: 28px; }
.workflow-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.workflow-list div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 16px;
  background: #f5f8fd;
}
.workflow-list span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0f56ff;
  background: #eaf2ff;
  font-weight: 900;
}
.workflow-list p { margin: 0; color: #334155; }
.outcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.outcome-grid span {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: #f5f8fd;
  color: #0f172a;
  font-weight: 800;
}
.pricing-panel {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}
.pricing-panel h2 {
  margin: 8px 0 0;
  font-size: 27px;
  letter-spacing: -0.045em;
}
.pricing-panel p {
  margin: 8px 0 0;
  color: #64748b;
  line-height: 1.45;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.plan-card {
  min-height: 150px;
  padding: 16px;
  text-align: left;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
}
.plan-card.active {
  border-color: rgba(15,86,255,.38);
  box-shadow: 0 16px 34px rgba(15,86,255,.12);
}
.plan-card span {
  color: #0f56ff;
  font-weight: 900;
}
.plan-card b {
  display: block;
  margin-top: 10px;
  font-size: 22px;
}
.plan-card small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  line-height: 1.35;
}
.cart-head {
  padding: 38px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
}
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  margin-top: 18px;
}
.cart-list {
  display: grid;
  gap: 12px;
}
.cart-item,
.empty-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
}
.cart-item h2,
.empty-cart h2 { margin: 6px 0 0; }
.cart-item p,
.empty-cart p { margin: 7px 0 0; color: #64748b; }
.cart-item button {
  height: 42px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.empty-cart {
  grid-template-columns: 1fr auto;
  min-height: 180px;
}
.cart-summary {
  position: sticky;
  top: 86px;
  align-self: start;
  display: grid;
  gap: 18px;
  padding: 20px;
}
.summary-lines {
  display: grid;
  gap: 10px;
}
.summary-lines div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #64748b;
}
.summary-lines b { color: #0f172a; }
.summary-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,32,68,.10);
  font-size: 20px;
  font-weight: 900;
}
.checkout-form {
  display: grid;
  gap: 10px;
}
@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-hero,
  .pricing-panel,
  .cart-layout,
  .market-preview { grid-template-columns: 1fr; }
}

body:has(.template-layout) .store-page {
  color: #071329;
  background:
    radial-gradient(circle at 13% 8%, rgba(19, 88, 255, .13), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(106, 130, 255, .10), transparent 34%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
body:has(.template-layout) .store-header {
  width: min(1360px, calc(100% - 56px));
  padding: 0 14px;
  border: 1px solid rgba(11,32,68,.08);
  border-radius: 0;
  background: rgba(255,255,255,.68);
  box-shadow: none;
}
body:has(.template-layout) .brand,
body:has(.template-layout) .store-nav a {
  color: #081327;
}
body:has(.template-layout) .brand-mark {
  filter: none;
  opacity: 1;
}
body:has(.template-layout) .store-nav a:hover,
body:has(.template-layout) .store-nav a.active {
  color: #0f56ff;
  background: rgba(255,255,255,.88);
}
.template-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
  width: min(1130px, 100%);
  margin: 38px auto 0;
}
.template-sidebar {
  position: sticky;
  top: 104px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 6px;
}
.template-sidebar .back-link {
  margin: 0 0 42px;
  color: #0f56ff;
}
.template-sidebar .status-badge {
  color: #0f56ff;
  background: rgba(19,88,255,.08);
  margin-bottom: 18px;
}
.template-sidebar .panel-kicker {
  color: #8a96aa;
}
.template-sidebar h1 {
  margin: 12px 0 0;
  max-width: 330px;
  color: #071329;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.065em;
}
.template-sidebar p {
  margin: 18px 0 0;
  max-width: 330px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.52;
}
.product-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.product-categories span:first-child {
  flex-basis: 100%;
  color: #8a96aa;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.product-categories span:not(:first-child) {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(15,86,255,.12);
  border-radius: 999px;
  color: #31506f;
  background:
    radial-gradient(circle at 16% 0%, rgba(15,86,255,.10), transparent 42%),
    rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 820;
}
.sidebar-purchase {
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
.sidebar-plan-tabs {
  display: flex;
  padding: 4px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
}
.sidebar-plan-tabs button {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #64748b;
  font-weight: 900;
  cursor: pointer;
}
.sidebar-plan-tabs button.active {
  color: #fff;
  background: #0f56ff;
  box-shadow: 0 10px 24px rgba(15,86,255,.18);
}
.selected-plan-card {
  padding: 16px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 40px rgba(32,78,148,.07);
}
.selected-plan-card div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}
.selected-plan-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.selected-plan-card b {
  color: #0f172a;
  font-size: 15px;
}
.selected-plan-card p {
  margin: 12px 0 0;
  color: #64748b;
  font-size: 13px;
}
.selected-plan-card ul {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.selected-plan-card li {
  position: relative;
  padding-left: 15px;
  color: #334155;
  font-size: 12.5px;
  line-height: 1.3;
}
.selected-plan-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f56ff;
}
.buy-anchor {
  min-width: 190px;
  background: linear-gradient(180deg, #1664ff 0%, #0b4de8 100%);
  box-shadow: 0 18px 42px rgba(13,78,232,.24);
}
.compare-link {
  color: #0f56ff;
  font-size: 13px;
  font-weight: 850;
}
.template-content {
  min-width: 0;
}
.template-video-card {
  padding: 8px 8px 12px;
  border-radius: 25px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 30px 100px rgba(32,78,148,.13), 0 8px 28px rgba(7,19,41,.07);
}
.template-video {
  position: relative;
  aspect-ratio: 16 / 10.6;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 19px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.96)),
    repeating-linear-gradient(135deg, rgba(11, 17, 32, .05) 0 2px, transparent 2px 6px);
}
.media-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.media-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.media-slide video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  background: #eaf2ff;
}
.media-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.72), transparent 42%, rgba(255,255,255,.10));
}
.mock-screen {
  position: absolute;
  inset: 0;
  padding: 28px;
  background:
    radial-gradient(circle at 82% 16%, rgba(15,86,255,.18), transparent 34%),
    linear-gradient(135deg, #f8fbff, #eaf2ff);
}
.mock-top {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(11,32,68,.08);
  border-radius: 16px;
  background: #fff;
}
.mock-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8fb3ff;
}
.mock-top b {
  margin-left: auto;
  color: #64748b;
  font-size: 13px;
}
.mock-body {
  display: grid;
  grid-template-columns: 170px minmax(0,1fr) 210px;
  gap: 14px;
  height: calc(100% - 72px);
  margin-top: 18px;
}
.mock-sidebar,
.mock-table,
.mock-panel {
  border: 1px solid rgba(11,32,68,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
}
.mock-sidebar {
  background:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(180deg, rgba(15,86,255,.22), rgba(34,211,238,.14)) border-box;
}
.mock-table {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.mock-table i {
  display: block;
  border-radius: 12px;
  background: #eef5ff;
}
.mock-panel {
  background:
    radial-gradient(circle at 50% 20%, rgba(15,86,255,.12), transparent 30%),
    rgba(255,255,255,.78);
}
.video-grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(11, 17, 32, .04) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(11, 17, 32, .035) 0 1px, transparent 1px 18px);
}
.video-grid span {
  position: absolute;
  display: block;
  border-radius: 34px;
  opacity: .85;
}
.video-grid span:nth-child(1) {
  width: 290px;
  height: 290px;
  right: -40px;
  bottom: 22px;
  background: linear-gradient(135deg, rgba(15,86,255,.24), rgba(34,211,238,.26));
  transform: rotate(18deg);
}
.video-grid span:nth-child(2) {
  width: 210px;
  height: 210px;
  left: 54px;
  top: 60px;
  background: rgba(15,86,255,.10);
}
.video-grid span:nth-child(3) {
  width: 180px;
  height: 180px;
  left: 230px;
  bottom: 86px;
  border: 34px solid rgba(16,185,129,.16);
  border-radius: 50%;
}
.video-grid span:nth-child(4) {
  width: 90px;
  height: 260px;
  left: 38%;
  top: -20px;
  background: rgba(15,23,42,.08);
  transform: skewX(-14deg);
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #0f56ff;
  box-shadow: 0 22px 55px rgba(15,86,255,.28);
  cursor: pointer;
}
.video-caption {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 26px;
  color: #111827;
  z-index: 2;
}
.media-arrows {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  gap: 8px;
}
.media-arrows button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 12px;
  color: #0f172a;
  background: rgba(255,255,255,.88);
  cursor: pointer;
  font-size: 24px;
}
.media-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.media-tabs button {
  min-height: 42px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 13px;
  color: #526173;
  background: rgba(255,255,255,.84);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}
.media-tabs button span {
  margin-right: 6px;
  color: #0f56ff;
}
.media-tabs button.active {
  color: #fff;
  border-color: #0f56ff;
  background: #0f56ff;
  box-shadow: 0 12px 28px rgba(15,86,255,.18);
}
.media-tabs button.active span { color: rgba(255,255,255,.72); }
.video-caption span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.video-caption b {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  letter-spacing: -0.055em;
}
.video-caption p {
  max-width: 430px;
  color: #64748b;
  line-height: 1.5;
}
.video-controls {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  gap: 10px;
}
.video-controls span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #111827;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(15,23,42,.10);
}
.template-description,
.instruction-panel,
.template-pricing {
  margin-top: 46px;
  color: #071329;
}
.template-description h2,
.instruction-panel h2,
.template-pricing h2 {
  margin: 0;
  color: #071329;
  font-size: 26px;
  letter-spacing: -0.04em;
}
.template-description > p,
.instruction-panel p,
.template-pricing p {
  max-width: 790px;
  color: #64748b;
  line-height: 1.65;
}
.process-board,
.template-pricing {
  padding: 24px;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
}
.process-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 18px;
  margin-top: 24px;
  overflow: hidden;
}
.process-head {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-content: start;
  padding: 18px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(125,178,255,.26), transparent 32%),
    linear-gradient(135deg, #071329, #0f56ff);
}
.process-head b {
  margin-top: 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.process-head p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.42;
}
.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.process-track::before { display: none; }
.process-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
  position: relative;
  min-height: 124px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 16%, rgba(15,86,255,.10), transparent 34%),
    #f5f8fd;
}
.process-step span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #0f56ff;
  background: #eaf2ff;
  font-weight: 900;
}
.process-step b {
  display: block;
  margin-top: 2px;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.28;
}
.process-step small {
  display: block;
  grid-column: 2;
  margin-top: 6px;
  color: #64748b;
  line-height: 1.35;
}
.result-stack {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, #eef5ff, #f8fbff);
}
.result-stack div {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(15,86,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  color: #0f172a;
  font-weight: 840;
}
.template-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.pricing-head {
  max-width: 790px;
}
.detailed-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.detailed-plan {
  min-width: 0;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  border-color: rgba(11,32,68,.10);
  background: #fff;
  color: #071329;
}
.detailed-plan.active {
  border-color: rgba(15,86,255,.38);
  box-shadow: 0 22px 48px rgba(15,86,255,.14);
}
.detailed-plan span {
  color: #0f56ff;
}
.detailed-plan b {
  color: #0f172a;
  font-size: 20px;
}
.detailed-plan small {
  color: #64748b;
}
.detailed-plan ul {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.detailed-plan li {
  position: relative;
  padding-left: 18px;
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
}
.detailed-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f56ff;
}
.template-pricing > .btn {
  justify-self: start;
  background: linear-gradient(180deg, #1664ff 0%, #0b4de8 100%);
  box-shadow: 0 18px 42px rgba(13,78,232,.24);
}
@media (max-width: 1100px) {
  .template-layout,
  .process-board,
  .detailed-plans {
    grid-template-columns: 1fr;
  }
  .template-sidebar {
    position: static;
    min-height: auto;
  }
}

/* Marketplace polish: light Ultramind product previews */
.market-layout {
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 22px;
}

.filter-panel {
  top: 92px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,251,255,.78)),
    radial-gradient(circle at 12% 0%, rgba(19,88,255,.10), transparent 42%);
  box-shadow: 0 22px 62px rgba(17, 67, 128, .08);
}

.catalog-topline {
  grid-template-columns: minmax(420px, 1fr) auto auto;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 54px rgba(33, 88, 156, .08);
}

.catalog-topline p {
  grid-column: auto;
  margin: 0;
  white-space: nowrap;
}

.top-search input {
  height: 56px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #fff, #fbfdff),
    radial-gradient(circle at 8% 50%, rgba(19,88,255,.12), transparent 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.catalog-grid {
  gap: 18px;
}

.market-card {
  min-height: 438px;
  border-radius: 28px;
  border-color: rgba(19, 88, 255, .12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,255,.92)),
    radial-gradient(circle at 18% 0%, rgba(19,88,255,.08), transparent 38%);
  box-shadow:
    0 28px 80px rgba(31, 89, 162, .10),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.market-card:hover {
  transform: translateY(-5px);
  border-color: rgba(19, 88, 255, .28);
  box-shadow:
    0 34px 92px rgba(31, 89, 162, .16),
    0 0 0 5px rgba(19,88,255,.045),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.market-card-link {
  padding: 0 20px 20px;
}

.product-art {
  height: 176px;
  margin: 0 -20px 20px;
  border-radius: 28px 28px 20px 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px) 0 0 / 20px 100%,
    radial-gradient(circle at 82% 74%, rgba(255,255,255,.72) 0 8%, transparent 27%),
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.58) 0 7%, transparent 22%),
    conic-gradient(from var(--art-skew) at 84% 86%, var(--art-d), var(--art-c), rgba(255,255,255,.06) 35%, transparent 100%),
    linear-gradient(135deg, var(--art-a) 0%, var(--art-b) 36%, #d8eaff 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.55);
}

.product-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 0 36%, rgba(255,255,255,.40) 36% 47%, rgba(255,255,255,0) 47%),
    radial-gradient(circle at 72% 72%, rgba(19,88,255,.24), transparent 32%);
  opacity: .9;
}

.product-art span {
  mix-blend-mode: normal;
}

.product-art span:nth-child(1) {
  right: -42px;
  bottom: -66px;
  width: 228px;
  height: 228px;
  border: 34px solid rgba(19,88,255,.16);
  background: rgba(255,255,255,.12);
}

.product-art span:nth-child(2) {
  right: 94px;
  bottom: -24px;
  width: 154px;
  height: 154px;
  border: 25px solid rgba(34,211,238,.20);
}

.product-art span:nth-child(3) {
  left: 22%;
  width: 88px;
  height: 248px;
  background: rgba(255,255,255,.24);
  transform: skewX(-15deg);
}

.product-art span:nth-child(4) {
  background: rgba(19,88,255,.12);
  box-shadow: 0 22px 70px rgba(19,88,255,.20);
}

.product-art strong {
  left: 24px;
  bottom: 34px;
  max-width: 72%;
  color: #061632;
  font-size: 25px;
  line-height: .98;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.product-art small {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 2;
  color: rgba(7, 19, 41, .60);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.market-card-top {
  margin-top: -42px;
}

.market-card-top .agent-token {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  color: #fff;
  box-shadow: 0 16px 32px rgba(19,88,255,.22);
}

.status-badge {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(19,88,255,.10);
  background: rgba(237,246,255,.92);
  color: #1255f0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.product-type {
  margin-top: 18px;
  color: #55708f;
}

.market-card h2 {
  margin-top: 9px;
  font-size: 21px;
  letter-spacing: -0.045em;
}

.market-card p:not(.product-type) {
  min-height: 46px;
  font-size: 13.5px;
}

.tag-line span {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(19,88,255,.08);
  background: linear-gradient(180deg, #f3f8ff, #eaf3ff);
  color: #4d6280;
  font-weight: 800;
}

.price-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

.price-line b {
  font-size: 19px;
  letter-spacing: -0.035em;
}

.price-line em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #37618f;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.card-actions {
  padding: 0 20px 20px;
}

.card-actions .store-primary,
.card-actions .store-secondary {
  min-height: 46px;
  border-radius: 15px;
}

.card-actions .store-primary {
  box-shadow: 0 18px 38px rgba(19,88,255,.22);
}

@media (max-width: 1120px) {
  .catalog-topline {
    grid-template-columns: 1fr;
  }
  .catalog-topline p {
    grid-column: 1;
  }
}

/* Product page v2: sales-first composition */
body:has(.product-showcase) .store-page {
  color: #071329;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.86) 58%, #fff 100%),
    radial-gradient(circle at 22% 9%, rgba(213, 233, 255, .98), transparent 42%),
    radial-gradient(circle at 6% 42%, rgba(186, 218, 255, .48), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}

body:has(.product-showcase) .store-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10,36,85,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,36,85,.035) 1px, transparent 1px);
  background-size: 108px 108px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

body:has(.product-showcase) .product-main {
  width: min(1440px, calc(100% - 64px));
  padding: 34px 0 96px;
}

.product-showcase {
  position: relative;
  display: grid;
  gap: 28px;
}

.product-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 28px;
  min-height: 620px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 34px;
  background:
    radial-gradient(circle at 74% 20%, rgba(19,88,255,.14), transparent 34%),
    radial-gradient(circle at 8% 8%, rgba(120,191,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,251,255,.82));
  box-shadow:
    0 36px 120px rgba(32,78,148,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.product-hero-card::before,
.product-hero-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.product-hero-card::before {
  inset: 0;
  opacity: .46;
  background-image:
    linear-gradient(rgba(19,88,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,88,255,.055) 1px, transparent 1px);
  background-size: 76px 76px;
}

.product-hero-card::after {
  right: -120px;
  bottom: -190px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  border: 88px solid rgba(19,88,255,.08);
  box-shadow: inset 0 0 90px rgba(34,211,238,.14);
}

.product-hero-copy,
.purchase-card {
  position: relative;
  z-index: 1;
}

.product-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 12px 0 12px 10px;
}

.product-hero-copy .back-link {
  align-self: flex-start;
  margin-bottom: 34px;
  color: #0f56ff;
  font-size: 14px;
  font-weight: 850;
}

.product-badges,
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.product-badges span:not(.status-badge),
.hero-tags span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(19,88,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #4c607a;
  font-size: 12px;
  font-weight: 850;
}

.product-title-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}

.product-hero-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 22px 54px rgba(19,88,255,.22);
}

.product-hero-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-title-row h1 {
  margin: 0;
  max-width: 820px;
  color: #071329;
  font-size: clamp(52px, 5.6vw, 92px);
  line-height: .88;
  letter-spacing: -0.075em;
}

.product-title-row p {
  max-width: 710px;
  margin: 22px 0 0;
  color: #5f7088;
  font-size: 20px;
  line-height: 1.48;
}

.product-hero-copy .hero-tags {
  margin-top: 28px;
}

.hero-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  max-width: 860px;
}

.hero-result-grid div {
  min-height: 98px;
  padding: 16px;
  border: 1px solid rgba(11,32,68,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.hero-result-grid span {
  display: block;
  color: #7a8aa1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-result-grid b {
  display: block;
  margin-top: 8px;
  color: #0d1a32;
  font-size: 15px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.product-actions {
  margin-top: 30px;
}

.product-actions .btn {
  min-width: 210px;
}

.purchase-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(19,88,255,.14);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,250,255,.88)),
    radial-gradient(circle at 80% 0%, rgba(19,88,255,.12), transparent 36%);
  box-shadow:
    0 30px 90px rgba(31,89,162,.13),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.purchase-card-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.purchase-card-top b {
  color: #0f56ff;
  font-size: 14px;
  text-align: right;
}

.purchase-card .sidebar-plan-tabs {
  margin-top: 20px;
}

.purchase-price {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 12px;
  margin-top: 18px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0b2b67, #1358ff);
  color: #fff;
  box-shadow: 0 24px 54px rgba(19,88,255,.24);
}

.purchase-price span {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.purchase-price b {
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.055em;
}

.purchase-price em {
  grid-column: 2;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.purchase-card p {
  margin: 18px 0 0;
  color: #56677f;
  font-size: 14px;
  line-height: 1.52;
}

.purchase-card ul {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.purchase-card li {
  position: relative;
  padding-left: 20px;
  color: #26364c;
  font-size: 13.5px;
  line-height: 1.34;
}

.purchase-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f56ff;
  box-shadow: 0 0 0 4px rgba(19,88,255,.10);
}

.purchase-card .buy-anchor {
  width: 100%;
  margin-top: auto;
}

.product-demo-section,
.product-flow-section,
.product-showcase .template-pricing {
  padding: 34px 30px;
  border: 1px solid rgba(11,32,68,.09);
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 80px rgba(31,89,162,.09);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 26px;
}

.section-heading h2 {
  margin: 8px 0 0;
  color: #071329;
  max-width: 760px;
  font-size: clamp(34px, 3.25vw, 52px);
  line-height: .98;
  letter-spacing: -0.06em;
}

.section-heading p {
  margin: 0;
  color: #65738a;
  font-size: 16px;
  line-height: 1.55;
}

.product-demo-section .section-heading h2 {
  justify-self: start;
}

.product-demo-section .section-heading {
  grid-template-columns: minmax(0, 780px);
  align-items: start;
}

.product-demo-section .section-heading p {
  max-width: 660px;
}

.demo-composition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: stretch;
}

.demo-composition .template-video-card {
  padding: 10px 10px 14px;
  border-radius: 28px;
  background: rgba(255,255,255,.88);
}

.demo-composition .template-video {
  min-height: 520px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
}

.demo-side {
  padding: 22px;
  border: 1px solid rgba(11,32,68,.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 8%, rgba(19,88,255,.10), transparent 36%),
    linear-gradient(180deg, #fff, #f7fbff);
}

.demo-side h3 {
  margin: 12px 0 0;
  color: #071329;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.04em;
}

.demo-side-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.demo-side-list div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 12px;
  padding: 14px;
  border-radius: 16px;
  background: #f1f6ff;
}

.demo-side-list span {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: #0f56ff;
  font-weight: 900;
}

.demo-side-list b {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.2;
}

.demo-side-list small {
  color: #64748b;
  font-size: 12.5px;
}

.product-flow-section .process-board {
  grid-template-columns: minmax(0, 1fr) 310px;
  margin-top: 0;
}

.product-flow-section .process-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-showcase .template-pricing {
  margin-top: 0;
}

.product-showcase .detailed-plan {
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

@media (max-width: 1180px) {
  .product-hero-card,
  .demo-composition,
  .product-flow-section .process-board,
  .section-heading {
    grid-template-columns: 1fr;
  }

  .product-flow-section .process-track,
  .hero-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:has(.product-showcase) .product-main {
    width: min(100% - 28px, 1440px);
  }

  .product-hero-card,
  .product-demo-section,
  .product-flow-section,
  .product-showcase .template-pricing {
    padding: 18px;
    border-radius: 24px;
  }

  .product-title-row {
    grid-template-columns: 1fr;
  }

  .hero-result-grid,
  .product-flow-section .process-track,
  .media-tabs {
    grid-template-columns: 1fr;
  }
}

/* Product page refinements */
.product-title-row {
  display: block;
  margin-top: 20px;
}

.product-title-row h1 {
  max-width: 850px;
}

.product-title-row p {
  max-width: 760px;
  margin-top: 24px;
}

.hero-output-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  max-width: 860px;
  margin-top: 30px;
  padding: 14px 16px;
  border: 1px solid rgba(19,88,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 16px 42px rgba(31,89,162,.06);
}

.hero-output-strip > span {
  color: #7a8aa1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-output-strip > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-output-strip b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(19,88,255,.08);
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
  color: #14223a;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.custom-player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 40%, rgba(19,88,255,.08), transparent 38%),
    linear-gradient(180deg, #f8fbff, #eaf3ff);
}

.custom-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-player::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 13, 31, .66));
}

.player-topline,
.player-controls,
.player-main-play {
  position: absolute;
  z-index: 3;
}

.player-topline {
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.player-topline span,
.player-topline b {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 34px rgba(7,19,41,.08);
}

.player-topline span {
  color: #0f56ff;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.player-main-play {
  left: 50%;
  top: 50%;
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,246,255,.88));
  color: #0f56ff;
  transform: translate(-50%, -50%);
  box-shadow: 0 26px 78px rgba(19,88,255,.22);
  cursor: pointer;
}

.player-main-play span {
  margin-left: 4px;
  font-size: 28px;
  line-height: 1;
}

.custom-player.is-playing .player-main-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.92);
}

.player-controls {
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 18px;
  background: rgba(7, 19, 41, .62);
  backdrop-filter: blur(16px);
}

.player-controls button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: #fff;
  color: #0f56ff;
  font-weight: 950;
  cursor: pointer;
}

.player-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  cursor: pointer;
}

.player-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ec5ff, #fff);
}

.player-controls time {
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.flow-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: stretch;
}

.flow-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.flow-steps::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 45px;
  height: 2px;
  background: linear-gradient(90deg, rgba(19,88,255,.10), rgba(19,88,255,.55), rgba(19,88,255,.10));
}

.flow-step {
  position: relative;
  min-height: 168px;
  padding: 16px;
  border: 1px solid rgba(19,88,255,.10);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(19,88,255,.10), transparent 36%),
    linear-gradient(180deg, #fff, #f3f8ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.flow-step span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #0f56ff;
  color: #fff;
  font-weight: 950;
  box-shadow: 0 16px 32px rgba(19,88,255,.18);
}

.flow-step b {
  display: block;
  margin-top: 24px;
  color: #071329;
  font-size: 18px;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.flow-step small {
  display: block;
  margin-top: 12px;
  color: #65738a;
  font-size: 13px;
  line-height: 1.35;
}

.flow-output {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(19,88,255,.10);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(19,88,255,.14), transparent 38%),
    linear-gradient(180deg, #edf6ff, #f8fbff);
}

.flow-output div {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(19,88,255,.08);
  border-radius: 16px;
  background: #fff;
  color: #071329;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.pricing-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.pricing-choice {
  min-height: 124px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 22px;
  background: #fff;
  cursor: pointer;
}

.pricing-choice.active {
  border-color: rgba(19,88,255,.42);
  background:
    radial-gradient(circle at 84% 0%, rgba(19,88,255,.14), transparent 36%),
    #fff;
  box-shadow: 0 22px 50px rgba(19,88,255,.12);
}

.pricing-choice span,
.pricing-choice b,
.pricing-choice small {
  display: block;
}

.pricing-choice span {
  color: #0f56ff;
  font-weight: 950;
}

.pricing-choice b {
  margin-top: 10px;
  color: #071329;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.pricing-choice small {
  margin-top: 8px;
  color: #65738a;
  font-size: 13px;
  line-height: 1.35;
}

.comparison-table {
  display: grid;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid rgba(11,32,68,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
}

.comparison-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, 1fr));
  min-height: 58px;
  border-top: 1px solid rgba(11,32,68,.08);
}

.comparison-row:first-child {
  border-top: 0;
}

.comparison-row > * {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-left: 1px solid rgba(11,32,68,.08);
  color: #23344d;
  font-size: 14px;
  font-weight: 760;
}

.comparison-row > *:first-child {
  justify-content: flex-start;
  border-left: 0;
  color: #071329;
  font-weight: 850;
}

.comparison-head {
  min-height: 86px;
  background: linear-gradient(180deg, #f8fbff, #eef6ff);
}

.comparison-head button {
  flex-direction: column;
  gap: 6px;
  border: 0;
  border-left: 1px solid rgba(11,32,68,.08);
  background: transparent;
  cursor: pointer;
}

.comparison-head button.active {
  color: #0f56ff;
  background: rgba(19,88,255,.07);
}

.comparison-head button span {
  color: inherit;
  font-weight: 950;
}

.comparison-head button b {
  color: #071329;
  font-size: 16px;
  letter-spacing: -0.03em;
}

.feature-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 950;
}

.feature-mark.yes {
  background: rgba(16,185,129,.12);
  color: #059669;
}

.feature-mark.no {
  background: rgba(100,116,139,.10);
  color: #94a3b8;
}

.feature-text {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d5edc;
  font-size: 12px;
  font-weight: 900;
}

.product-showcase .template-pricing > .btn {
  margin-top: 20px;
}

@media (max-width: 1180px) {
  .flow-board,
  .flow-steps {
    grid-template-columns: 1fr;
  }

  .flow-steps::before {
    display: none;
  }

  .pricing-choice-row {
    grid-template-columns: 1fr;
  }

  .comparison-table {
    overflow-x: auto;
  }

  .comparison-row {
    min-width: 760px;
  }
}