/* Commerce: packages, services */
.packages-explorer-page {
  background: #f8fbff;
}
.packages-explorer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: .5rem;
}
.packages-explorer-hero h1 {
  margin: 0 0 .65rem;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  color: #111827;
}
.packages-explorer-hero p {
  margin: 0 0 1rem;
  color: #4b5563;
  max-width: 760px;
}
.packages-quick-nav {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
  padding: 1rem;
}
.packages-quick-nav h3 {
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: #6b7280;
}
.packages-quick-nav a {
  display: block;
  padding: .6rem .5rem;
  border-radius: 10px;
  font-weight: 600;
  color: #1f2937;
  background: transparent;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.packages-quick-nav a:hover {
  background: #eef2ff;
  color: var(--color-primary);
}
.packages-quick-nav a:focus-visible {
  outline: none;
  background: #eef2ff;
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.packages-quick-nav a.is-active {
  background: #eef2ff;
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.packages-filter-panel,
#packages-grid {
  scroll-margin-top: calc(var(--site-header-offset, 72px) + 18px);
}
.packages-explorer-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1.25rem;
  padding-top: .25rem;
}
.packages-filter-panel {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  position: sticky;
  top: calc(var(--site-header-offset, 72px) + 14px);
  max-height: calc(100vh - var(--site-header-offset, 72px) - 24px);
  overflow: auto;
  padding: 1rem;
}
.packages-filter-head {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  font-weight: 700;
  margin-bottom: .8rem;
}
.packages-filter-panel h4 {
  margin: 0 0 .7rem;
  font-size: .95rem;
}
.packages-filter-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 52vh;
  overflow: auto;
  padding-right: .25rem;
}
.packages-filter-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .35rem;
  color: #374151;
  font-size: .88rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.packages-filter-item:hover {
  background: #f1f5f9;
}
.packages-filter-item input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #9ca3af;
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  margin: 0;
  flex-shrink: 0;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.packages-filter-item input::before {
  content: '';
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform .15s ease-in-out;
  clip-path: polygon(14% 44%, 0 62%, 45% 100%, 100% 16%, 82% 0, 43% 62%);
  background: #fff;
}
.packages-filter-item input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.packages-filter-item input:checked::before {
  transform: scale(1);
}
.packages-filter-item span {
  font-weight: 600;
}
.packages-search-wrap {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1rem;
  background: #fff;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.packages-search-wrap svg {
  color: #6b7280;
  flex-shrink: 0;
}
.packages-search-wrap input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 1rem;
  background: transparent;
}
.packages-active-filters {
  min-height: 26px;
  margin: .55rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  position: relative;
  z-index: 1;
}
.packages-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .56rem;
  border-radius: 999px;
  font-size: .76rem;
  background: #eef2ff;
  color: #1e3a8a;
  font-weight: 600;
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 350px));
  justify-content: center;
  gap: 1.35rem;
  align-items: stretch;
}
.package-card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, #dbe7ff);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}
.package-card.is-filter-hidden,
.package-card[hidden] {
  display: none !important;
}
.package-card::before {
  content: '';
  position: absolute;
  inset: -20% -40%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 28%, transparent), transparent 58%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.package-card:hover {
  border-color: color-mix(in srgb, var(--color-secondary) 62%, transparent);
  transform: translateY(-8px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.package-card:hover::before { opacity: 1; }
.package-card.is-popular {
  transform: scale(1.03);
  border-color: color-mix(in srgb, var(--color-primary) 60%, #7dd3fc);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 45%, transparent),
    0 22px 40px color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.package-cart-form { margin: 0; width: 100%; }
.package-popular-badge {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: var(--site-btn-text, #fff);
  text-align: center;
  padding: .48rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.package-card-body {
  position: relative;
  z-index: 1;
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.package-category {
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-primary) 78%, #1d4ed8);
  letter-spacing: .14em;
}
.package-title {
  font-size: 1.28rem;
  font-weight: 800;
  color: #0f172a;
  margin: .45rem 0 .65rem;
}
.package-desc {
  color: #64748b;
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.package-price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: .9rem;
  letter-spacing: -0.02em;
}
.package-price-period {
  font-size: .84rem;
  font-weight: 600;
  color: #64748b;
}
.package-price .old {
  font-size: .95rem;
  color: #94a3b8;
  text-decoration: line-through;
  margin-left: .25rem;
}
.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}
.package-features li {
  position: relative;
  padding: .35rem 0 .35rem 1.2rem;
  font-size: .86rem;
  color: #334155;
}
.package-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: .35rem;
  color: var(--color-primary);
  font-weight: 800;
}
.package-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.package-card-btn-secondary,
.package-card-cta {
  padding: .78rem 1rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;
}
.package-card-btn-secondary {
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, #c7d2fe);
  background: #ffffff;
  color: var(--color-primary);
}
.package-card-btn-secondary:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  border-color: color-mix(in srgb, var(--color-primary) 52%, #93c5fd);
}
.package-card-cta {
  border: 1px solid color-mix(in srgb, var(--color-primary) 52%, transparent);
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: var(--site-btn-text, #fff);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 28%, transparent);
}
.package-card-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--color-primary) 36%, transparent);
}

/* Packages listing — grid background */
.packages-page {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 10% 12%, rgba(37, 99, 235, 0.10), transparent 36%),
    radial-gradient(circle at 88% 76%, rgba(59, 130, 246, 0.09), transparent 34%),
    #ffffff;
}

.packages-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 80%, rgba(147, 197, 253, 0.24), transparent 42%),
    radial-gradient(circle at 84% 16%, rgba(191, 219, 254, 0.20), transparent 40%);
}

.packages-page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 22%, rgba(219, 234, 254, 0.45), transparent 32%),
    radial-gradient(circle at 72% 70%, rgba(186, 230, 253, 0.25), transparent 30%);
}

.packages-page > .container-custom {
  position: relative;
  z-index: 1;
}

.packages-page .package-card {
  height: 100%;
}

@media (max-width: 980px) {
  .packages-explorer-hero {
    grid-template-columns: 1fr;
  }
  .packages-explorer-layout {
    grid-template-columns: 1fr;
  }
  .packages-filter-panel {
    position: static;
  }
  .package-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
}

@media (max-width: 640px) {
  .packages-explorer-page {
    background: #ffffff;
  }
  .packages-explorer-hero {
    gap: 1rem;
    margin-bottom: 2.25rem;
  }
  .packages-explorer-hero h1 {
    font-size: 1.7rem;
  }
  .packages-filter-panel {
    padding: .85rem;
  }
  .package-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .package-card-body {
    padding: 1.2rem;
  }
  .package-price {
    font-size: 2rem;
  }
}

html[data-theme="dark"] .packages-explorer-page,
html[data-theme="dark"] .packages-page {
  background:
    radial-gradient(circle at 12% 16%, rgba(196, 239, 23, 0.1), transparent 38%),
    radial-gradient(circle at 84% 70%, rgba(196, 239, 23, 0.06), transparent 34%),
    #000000;
}

html[data-theme="dark"] .packages-page::before,
html[data-theme="dark"] .packages-page::after {
  opacity: .95;
}

html[data-theme="dark"] .packages-filter-panel,
html[data-theme="dark"] .packages-quick-nav,
html[data-theme="dark"] .packages-search-wrap,
html[data-theme="dark"] .package-card {
  background: #111111;
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .packages-explorer-hero h1,
html[data-theme="dark"] .packages-filter-panel h4,
html[data-theme="dark"] .packages-quick-nav a,
html[data-theme="dark"] .package-title,
html[data-theme="dark"] .package-features li {
  color: #ffffff;
}

html[data-theme="dark"] .packages-quick-nav h3 {
  color: #d4d4d8;
}

html[data-theme="dark"] .packages-explorer-hero p,
html[data-theme="dark"] .packages-filter-item,
html[data-theme="dark"] .package-desc,
html[data-theme="dark"] .package-price-period {
  color: #a1a1aa;
}

html[data-theme="dark"] .packages-quick-nav a:hover,
html[data-theme="dark"] .packages-quick-nav a:focus-visible,
html[data-theme="dark"] .packages-quick-nav a:active,
html[data-theme="dark"] .packages-quick-nav a.is-active {
  background: rgba(196, 239, 23, 0.14);
  color: #c4ef17;
  border-color: rgba(196, 239, 23, 0.28);
  transform: translateX(2px);
}

html[data-theme="dark"] .packages-filter-item:hover {
  background: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .packages-filter-item input {
  border-color: rgba(255, 255, 255, 0.16);
  background: #000000;
}

html[data-theme="dark"] .packages-search-wrap {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .package-card-btn-secondary {
  background: #000000;
  color: var(--color-primary);
  border-color: rgba(196, 239, 23, 0.45);
}

html[data-theme="dark"] .package-card-btn-secondary:hover {
  background: var(--color-primary);
  color: #000000;
  border-color: var(--color-primary);
}

.services-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.services-group-title { font-size: 1.5rem; font-weight: 800; color: var(--site-text-heading); margin-bottom: 1.5rem; }
.service-hub-card {
  display: block; padding: 1.5rem; border-radius: var(--radius-lg);
  background: var(--site-bg-card); border: 1px solid var(--site-border);
  margin-bottom: 1rem; transition: .3s;
}
.service-hub-card:hover { border-color: var(--color-primary); box-shadow: var(--site-shadow); transform: translateX(4px); }
.service-hub-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--site-text-heading); margin-bottom: .5rem; }
.service-hub-card p { font-size: .875rem; color: var(--muted); margin: 0; }

.service-tabs {
  position: sticky; top: 72px; z-index: 40;
  background: var(--site-header-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--site-border);
}
.service-tabs-inner {
  display: flex; align-items: center; gap: .35rem;
  padding-block: .65rem;
}
.service-tabs-viewport {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
}
.service-tabs-viewport::before,
.service-tabs-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.service-tabs-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--site-header-bg), transparent);
}
.service-tabs-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--site-header-bg), transparent);
}
.service-tabs-viewport.is-scroll-start::before { opacity: 0; }
.service-tabs-viewport.is-scroll-end::after { opacity: 0; }
.service-tabs-viewport:not(.is-scroll-start)::before { opacity: 1; }
.service-tabs-viewport:not(.is-scroll-end)::after { opacity: 1; }
.service-tabs-row {
  display: flex; gap: .5rem; overflow-x: auto; padding: .15rem .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-primary) 35%, transparent) transparent;
}
.service-tabs-row::-webkit-scrollbar { height: 4px; }
.service-tabs-row::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: 999px;
}
.service-tab {
  flex: 0 0 auto;
  padding: .65rem 1.15rem; border-radius: 999px; border: 1px solid var(--site-border);
  background: var(--site-bg-card); color: var(--site-text-heading);
  font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
  text-decoration: none; cursor: pointer;
}
.service-tab:active { transform: scale(.98); }
.service-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.service-tab.is-active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--site-btn-text, #fff); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.service-tabs-nav {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--site-border); background: var(--site-bg-card);
  color: var(--site-text-heading); cursor: pointer; transition: .2s;
}
.service-tabs-nav:hover:not(:disabled) {
  border-color: var(--color-primary); color: var(--color-primary);
}
.service-tabs-nav:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) {
  .service-tabs { top: 64px; }
  .service-tabs-nav { display: none; }
  .service-tabs-row { padding-inline: .5rem 1rem; }
}

[data-service-panels] .container-custom {
  display: grid;
}
.service-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .32s ease, transform .32s ease, visibility .32s ease;
  pointer-events: none;
}
.service-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.service-check { display: inline-flex; color: var(--color-primary); }
.service-panel-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 2rem 0;
}
.service-panel-card { max-width: 900px; margin: 0 auto; padding: 2.5rem; }
.service-benefits-box {
  margin-top: 2rem; padding: 1.5rem; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.service-benefits-box h3 {
  font-weight: 800; margin-bottom: 1rem; color: var(--site-text-heading);
}
.service-sidebar-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .15em; color: var(--muted);
}
.service-sidebar-price { margin: 1rem 0 1.5rem; }
.service-price-period { color: var(--muted); font-weight: 700; }
.service-sidebar-btn { margin-bottom: 1rem; }
.service-sidebar-note {
  text-align: center; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.service-sidebar-divider {
  border: none; border-top: 1px solid var(--site-border); margin: 1.5rem 0;
}
.service-sidebar-heading {
  font-size: .8rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--site-text-heading); margin-bottom: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .service-panel { transition: none; transform: none; }
  .service-tab { transition: none; }
  .service-tab:active { transform: none; }
}

.service-detail-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; align-items: start; }
.service-detail-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--site-text-heading); line-height: 1.15; margin-bottom: 1rem; }
.service-detail-desc { font-size: 1.05rem; color: var(--muted); line-height: 1.75; }
.service-features-heading { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 1rem; }
.service-features-heading span { width: 48px; height: 3px; background: var(--color-primary); border-radius: 2px; }
.service-features-heading h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--site-text-heading); }
.service-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.service-feature-item {
  display: flex; gap: .75rem; padding: 1rem; border-radius: var(--radius-lg);
  background: var(--site-bg-alt); border: 1px solid var(--site-border); transition: .2s;
}
.service-feature-item:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.service-sidebar {
  position: sticky; top: 160px; padding: 2rem; border-radius: var(--radius-lg);
  background: var(--site-bg-card); border: 1px solid var(--site-border); box-shadow: var(--site-shadow);
}
.service-price-big { font-size: 2.75rem; font-weight: 800; color: var(--color-primary); }
.service-benefits li { display: flex; gap: .75rem; align-items: center; padding: .5rem 0; font-size: .875rem; font-weight: 600; color: var(--site-text); }
.service-benefits li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }

/* About */
.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-hero-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--site-shadow); aspect-ratio: 1; }
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.about-stat-value { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; color: var(--color-primary); }
.about-stat-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin-top: .5rem; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.value-card { text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius-lg); background: var(--site-bg-card); border: 1px solid var(--site-border); transition: .3s; }
.value-card:hover { border-color: var(--color-primary); box-shadow: var(--site-shadow); }
.value-icon { width: 64px; height: 64px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-primary) 10%, transparent); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; }
.value-icon .site-icon { color: var(--color-primary); }
.value-icon .site-icon--star { color: var(--color-primary); }
.value-card h3 { font-weight: 700; color: var(--site-text-heading); margin-bottom: .5rem; }
.value-card p { font-size: .875rem; color: var(--muted); }
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.skill-row { margin-bottom: 1.25rem; }
.skill-row-header {
  display: flex; justify-content: space-between; font-weight: 600; color: var(--site-text);
}
.skill-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.skill-bar { height: 8px; background: var(--site-bg-alt); border-radius: 4px; overflow: hidden; margin-top: .5rem; }
.skill-bar-fill {
  width: 0; height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 4px;
  transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html.perf-lite .skill-bar-fill[data-target] { transition-duration: 0.9s; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.team-card { text-align: center; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--site-bg-card); border: 1px solid var(--site-border); }
.team-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 2px solid var(--site-border); }
.team-name { font-weight: 700; color: var(--site-text-heading); }
.team-role { font-size: .875rem; color: var(--color-primary); margin-bottom: 0.85rem; }
.team-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.team-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--site-border);
  background: var(--site-bg);
  color: var(--site-text-muted);
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}
.team-social-link svg {
  width: 16px;
  height: 16px;
  display: block;
}
.team-social-link:hover {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--site-border));
  background: color-mix(in srgb, var(--color-primary) 10%, var(--site-bg));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Legal */
.legal-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.legal-hub-card {
  display: block; padding: 2rem; border-radius: var(--radius-lg);
  background: var(--site-bg-card); border: 1px solid var(--site-border); transition: .3s;
}
.legal-hub-card:hover { border-color: var(--color-primary); box-shadow: var(--site-shadow); }
.legal-hub-card h3 { font-weight: 700; color: var(--site-text-heading); margin-bottom: .5rem; }
.legal-hub-card p { font-size: .875rem; color: var(--muted); }
.legal-prose { max-width: 800px; margin: 0 auto; color: var(--site-text); line-height: 1.8; }
.legal-prose h2 { color: var(--site-text-heading); margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; }
.legal-prose h3 { color: var(--site-text-heading); margin-top: 1.5rem; }
.legal-prose p, .legal-prose li { color: var(--muted); }
.legal-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 1rem; }

@media (max-width: 960px) {
  .package-grid, .services-hub-grid, .service-detail-grid, .about-hero-grid, .skills-grid { grid-template-columns: 1fr; }
  .about-stats-grid, .values-grid, .team-grid, .legal-hub-grid { grid-template-columns: 1fr 1fr; }
  .service-feature-grid { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
}
@media (max-width: 640px) {
  .values-grid, .team-grid, .legal-hub-grid, .package-grid { grid-template-columns: 1fr; }

  .about-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 0.85rem;
  }

  .about-stat-value {
    font-size: clamp(1.85rem, 8.5vw, 2.35rem);
    font-weight: 900;
    line-height: 1.1;
  }

  .about-stat-label {
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    margin-top: 0.4rem;
    line-height: 1.35;
  }
}

/* Checkout */
.checkout-section { min-height: calc(100vh - 72px); }
.checkout-layout {
  display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.checkout-eyebrow {
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-primary); margin-bottom: .5rem;
}
.checkout-title { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; color: var(--site-text-heading); margin: 0 0 .5rem; }
.checkout-sub { color: var(--muted); margin: 0.35rem 0 0; }
.checkout-block { margin-bottom: 1.75rem; }
.checkout-block h2 { font-size: 1rem; font-weight: 800; color: var(--site-text-heading); margin: 0 0 1rem; }
.checkout-form .form-control {
  width: 100%; padding: .875rem 1rem; border-radius: 14px;
  border: 1px solid var(--site-border); background: var(--site-bg-card);
  color: var(--site-text); font-family: inherit; font-size: .9375rem;
}
.payment-options { display: flex; flex-direction: column; gap: .75rem; }
.payment-option { cursor: pointer; }
.payment-option input { position: absolute; opacity: 0; pointer-events: none; }
.payment-option-card {
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 2px solid var(--site-border);
  background: var(--site-bg-card);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.payment-option-label { font-weight: 800; color: var(--site-text-heading); display: block; }
.payment-option-note { font-size: .8125rem; color: var(--muted); margin-top: .25rem; display: block; }
.bank-details {
  margin-top: 1rem; padding: 1rem 1.15rem; border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  font-size: .875rem; color: var(--site-text);
}
.checkout-submit { width: 100%; margin-top: .5rem; border-radius: 14px; }
.checkout-summary-card {
  position: sticky; top: 100px; padding: 1.5rem; border-radius: 20px;
  background: var(--site-bg-card); border: 1px solid var(--site-border); box-shadow: var(--site-shadow);
}
.checkout-summary-card h2 { font-size: 1rem; font-weight: 800; margin: 0 0 1rem; color: var(--site-text-heading); }
.checkout-items { list-style: none; padding: 0; margin: 0 0 1rem; }
.checkout-items li {
  display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0;
  border-bottom: 1px solid var(--site-border); font-size: .875rem;
}
.checkout-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1rem; font-size: 1.15rem; font-weight: 800; color: var(--color-primary);
}
.checkout-trust { margin: 1rem 0 0; font-size: .75rem; color: var(--muted); text-align: center; }
.checkout-muted { color: var(--muted); }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary-card { position: static; order: -1; }
}

/* Commerce pages — cart & checkout grid background */
.commerce-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--color-primary) 11%, transparent), transparent 38%),
    radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--color-secondary, #1e40af) 9%, transparent), transparent 36%),
    var(--site-bg-alt);
}

.commerce-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--site-grid-opacity, 0.44);
  background-image:
    linear-gradient(var(--site-grid-line, rgba(30, 64, 175, 0.11)) 1px, transparent 1px),
    linear-gradient(90deg, var(--site-grid-line, rgba(30, 64, 175, 0.11)) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 92% 88% at 50% 42%, #000 22%, transparent 86%);
}

.commerce-page > .container-custom {
  position: relative;
  z-index: 1;
}

.commerce-page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.commerce-page-head-compact {
  margin-bottom: 1.5rem;
}

.commerce-page-head-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.commerce-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.commerce-title {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 2.35rem);
  font-weight: 800;
  color: var(--site-text-heading);
  letter-spacing: -0.02em;
}

/* Cart */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.75rem;
  align-items: start;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon body price"
    "icon body remove";
  gap: 0.35rem 1rem;
  align-items: center;
  padding: 1.25rem 1.35rem;
  border-radius: 18px;
  background: var(--site-bg-card);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
}

.cart-item-icon {
  grid-area: icon;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.cart-item-body { grid-area: body; min-width: 0; }

.cart-item-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--site-text-heading);
}

.cart-item-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
}

.cart-item-price {
  grid-area: price;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
}

.cart-item-remove { grid-area: remove; justify-self: end; }

.cart-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #ef4444 28%, transparent);
  background: color-mix(in srgb, #ef4444 6%, transparent);
  color: #dc2626;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cart-remove-btn:hover {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border-color: color-mix(in srgb, #ef4444 40%, transparent);
}

.cart-summary-card,
.checkout-summary-card {
  position: sticky;
  top: 100px;
  padding: 1.5rem;
  border-radius: 20px;
  background: var(--site-bg-card);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
}

.cart-summary-title,
.checkout-summary-card h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 1rem;
  color: var(--site-text-heading);
}

.cart-summary-list,
.checkout-items {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.cart-summary-list li,
.checkout-items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--site-border);
  font-size: 0.875rem;
}

.cart-summary-total,
.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary);
}

.cart-checkout-btn,
.checkout-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1rem;
  border-radius: 14px;
}

.commerce-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 1rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}

.commerce-trust svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.cart-empty {
  max-width: 420px;
  margin: 2rem auto 0;
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: 20px;
  background: var(--site-bg-card);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
}

.cart-empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.cart-empty h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--site-text-heading);
}

.cart-empty p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.cart-empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.checkout-block-card {
  padding: 1.35rem 1.4rem;
  border-radius: 18px;
  background: var(--site-bg-card);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
}

.checkout-block-card h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.checkout-block-card h2 svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.checkout-consent-card {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--site-bg-card));
}

.checkout-consent-list {
  display: grid;
  gap: 0.75rem;
}

.checkout-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--site-text);
}

.checkout-consent-item input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.checkout-consent-item a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-consent-note {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: var(--site-text-muted);
}

.payment-option-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.payment-option-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.payment-option-copy { flex: 1; min-width: 0; }
.payment-option-brand-logo {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.payment-option-check {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--site-btn-text, #fff);
  background: var(--color-primary);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.payment-option input:checked + .payment-option-card {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--site-bg-card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.payment-option input:checked + .payment-option-card .payment-option-check {
  opacity: 1;
  transform: scale(1);
}

html[data-theme="dark"] .commerce-page-head-icon,
html[data-theme="dark"] .cart-item-icon,
html[data-theme="dark"] .payment-option-icon {
  background: color-mix(in srgb, var(--color-primary) 16%, #0a0a0a);
}

.manual-payment-panel {
  margin-top: 1.25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--site-border));
  background: color-mix(in srgb, var(--color-primary) 4%, var(--site-bg-card));
}
.manual-payment-callout strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--site-text-heading);
}
.manual-payment-callout p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--site-text);
}
.manual-payment-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-primary);
}
.manual-payment-extra {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.manual-payment-fields {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}
.manual-payment-fields .form-group { margin: 0; }
.manual-payment-fields label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.manual-field-hint { margin-top: 0.35rem; font-size: 0.8rem; }
.manual-payment-callout--payoneer {
  border-left: 3px solid var(--color-primary);
  padding-left: 0.85rem;
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary-card { position: static; order: -1; }
  .cart-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon body"
      "price remove";
  }
  .cart-item-price { justify-self: start; }
  .cart-item-remove { justify-self: start; }
}

/* Order confirmation */
.order-confirmation-section { min-height: calc(100vh - 72px); }
.order-confirmation-wrap { max-width: 640px; margin: 0 auto; }
.order-confirmation-head { margin-bottom: 1.75rem; }
.order-confirmation-card {
  padding: 1.5rem;
  border-radius: 18px;
  background: var(--site-bg-card);
  border: 1px solid var(--site-border);
  box-shadow: var(--site-shadow);
  margin-bottom: 1.5rem;
}
.order-confirmation-card h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--site-text-heading);
}
.order-confirmation-meta {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}
.order-confirmation-meta div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--site-border);
}
.order-confirmation-meta div:last-child { border-bottom: 0; padding-bottom: 0; }
.order-confirmation-meta dt {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
}
.order-confirmation-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--site-text-heading);
  text-align: right;
}
.order-confirmation-meta code {
  font-size: 0.8125rem;
  word-break: break-all;
}
.order-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.order-confirmation-actions .btn { flex: 1 1 180px; justify-content: center; }

body.order-success-open { overflow: hidden; }
.order-success-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.order-success-modal[hidden] { display: none !important; }
.order-success-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}
.order-success-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
  text-align: center;
}
.order-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.order-success-dialog h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--site-text-heading, #111827);
}
.order-success-dialog p {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--site-text-muted, #6b7280);
}
.order-success-dialog .btn { min-width: 8rem; }
html[data-theme="dark"] .order-success-dialog { background: #111111; }

/* WhatsApp checkout verification */
.checkout-whatsapp-block.is-verified .wa-verify-actions,
.checkout-whatsapp-block.is-verified .wa-code-wrap { display: none; }
.wa-verify-actions { margin-top: 0.75rem; }
.wa-code-wrap { margin-top: 1rem; }
.wa-code-wrap label { display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: 600; }
.wa-code-row { display: flex; gap: 0.5rem; align-items: center; }
.wa-code-row .form-control { max-width: 9rem; letter-spacing: 0.15em; text-align: center; }
.wa-verify-status { margin-top: 0.75rem; font-size: 0.875rem; }
.wa-verify-status--success { color: #059669; }
.wa-verify-status--error { color: #dc2626; }
.wa-verify-status--info { color: var(--site-text-muted, #6b7280); }