/* ===== style.css ===== */
/* pvapixel - Premium Digital Storefront */
/* ======================================== */

/* CSS Variables */
:root {
  /* Core Colors */
  --white: #FFFFFF;
  --soft-ivory: #FBFBF9;
  --stone-mist: #F4F5F2;
  --soft-mineral: #E8EBE4;
  --deep-forest: #101514;
  --rich-graphite: #1B2422;
  --slate-green: #34423F;
  --muted-stone: #66706D;
  --light-border: #D6DDD7;
  --fine-divider: #EAEDE8;
  
  /* Accent Colors */
  --emerald-depth: #0F7A5A;
  --premium-green: #159A74;
  --champagne-gold: #D4A94D;
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Spacing */
  --section-padding: 100px;
  --container-max: 1280px;
  --container-narrow: 980px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(16, 21, 20, 0.06);
  --shadow-md: 0 4px 20px rgba(16, 21, 20, 0.08);
  --shadow-lg: 0 8px 40px rgba(16, 21, 20, 0.12);
  --shadow-xl: 0 16px 60px rgba(16, 21, 20, 0.15);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Rich homepage content sections */
.home-section {
  padding: 96px 0;
  position: relative;
}

.home-heading {
  max-width: 760px;
  margin: 0 auto 46px;
}

.home-heading.text-center {
  text-align: center;
}

.wide-heading {
  max-width: 900px;
  text-align: center;
}

.split-home-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 48px;
  align-items: end;
  max-width: none;
}

.home-snapshot {
  margin-top: -1px;
  padding: 28px 0;
  background: #061B2E;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.snapshot-item {
  padding: 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  text-align: center;
}

.snapshot-item strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
  margin-bottom: 8px;
}

.snapshot-item span {
  color: rgba(224,230,242,.66);
  font-size: .86rem;
  font-weight: 700;
}

.home-starter-pricing {
  background:
    radial-gradient(circle at 12% 0%, rgba(212, 169, 77, .15), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgba(15, 122, 90, .08), transparent 26rem),
    linear-gradient(180deg, #FFFFFF 0%, #FBFBF9 100%);
  border-bottom: 1px solid var(--fine-divider);
}

.starter-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.starter-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--fine-divider);
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 54px rgba(16, 21, 20, .07);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.starter-price-card::before {
  content: '';
  position: absolute;
  inset: -70px -80px auto auto;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: rgba(212, 169, 77, .13);
}

.starter-price-card.featured {
  border-color: rgba(212, 169, 77, .48);
  background:
    radial-gradient(circle at top right, rgba(212, 169, 77, .16), transparent 15rem),
    #FFFFFF;
}

.starter-price-card:hover {
  transform: translateY(-6px);
  border-color: rgba(15, 122, 90, .34);
  box-shadow: 0 28px 76px rgba(16, 21, 20, .11);
}

.starter-price-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.starter-logo {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--deep-forest), var(--slate-green));
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(16, 21, 20, .16);
}

.starter-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(212, 169, 77, .14);
  color: #7A5A12;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.starter-price-card h3 {
  position: relative;
  min-height: 52px;
  margin-bottom: 18px;
  font-size: 1.12rem;
}

.starter-price {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--fine-divider);
  border-radius: 20px;
  background: #FBFBF9;
}

.starter-price strong {
  color: var(--deep-forest);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1;
}

.starter-price span {
  color: var(--muted-stone);
  font-size: .84rem;
  font-weight: 800;
}

.starter-table,
.starter-details {
  position: relative;
  width: 100%;
  margin-bottom: 22px;
}

.starter-table {
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
}

.starter-details {
  display: grid;
  gap: 10px;
}

.starter-details div {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  background: rgba(251, 251, 249, .76);
}

.starter-details dt,
.starter-details dd {
  margin: 0;
  font-size: .84rem;
}

.starter-details dt {
  color: var(--deep-forest);
  font-weight: 900;
}

.starter-details dd {
  color: var(--muted-stone);
}

.starter-table tr {
  border-bottom: 1px solid var(--fine-divider);
}

.starter-table tr:last-child {
  border-bottom: 0;
}

.starter-table th,
.starter-table td {
  padding: 11px 0;
  vertical-align: top;
  text-align: left;
  font-size: .84rem;
}

.starter-table th {
  width: 68px;
  color: var(--deep-forest);
  font-weight: 900;
}

.starter-table td {
  color: var(--muted-stone);
}

.starter-actions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 10px;
  margin-top: auto;
}

.starter-actions .btn {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: .86rem;
}

.starter-view-btn {
  border: 1px solid var(--light-border);
  background: #fff;
  color: var(--deep-forest);
}

.starter-view-btn:hover {
  border-color: rgba(15, 122, 90, .32);
  color: var(--emerald-depth);
  transform: translateY(-2px);
}

.starter-order-btn {
  background: linear-gradient(135deg, var(--deep-forest), var(--slate-green));
  color: #fff;
  box-shadow: 0 14px 30px rgba(16, 21, 20, .18);
}

.starter-order-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(16, 21, 20, .24);
}

.starter-pricing-note {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--fine-divider);
  border-radius: 18px;
  background: #fff;
  color: var(--muted-stone);
  text-align: center;
  font-size: .94rem;
}

.home-categories {
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
}

.home-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.home-category-card {
  position: relative;
  min-height: 300px;
  padding: 30px;
  border: 1px solid rgba(207, 224, 246, .9);
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(6, 27, 46, .08);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.home-category-card::before {
  content: '';
  position: absolute;
  inset: auto -24% -34% auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: var(--card-glow, rgba(11,76,255,.12));
  filter: blur(4px);
  opacity: .9;
}

.home-category-card:hover {
  transform: translateY(-7px);
  border-color: rgba(11, 76, 255, .38);
  box-shadow: 0 28px 85px rgba(6, 27, 46, .13);
}

.home-category-card.social { --card-glow: rgba(228, 64, 95, .16); }
.home-category-card.email { --card-glow: rgba(11, 76, 255, .15); }
.home-category-card.ai { --card-glow: rgba(16, 163, 127, .17); }
.home-category-card.creator { --card-glow: rgba(139, 92, 246, .16); }
.home-category-card.messaging { --card-glow: rgba(37, 211, 102, .16); }
.home-category-card.business { --card-glow: rgba(246, 200, 95, .20); }

.home-card-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11, 76, 255, .08);
  color: var(--emerald-depth);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-category-card h3,
.home-service-card h3,
.usecase-card h3,
.quality-grid h3,
.process-timeline h3 {
  font-size: 1.22rem;
  margin-bottom: 12px;
}

.home-category-card p {
  position: relative;
  margin-bottom: 22px;
  color: var(--muted-stone);
}

.home-category-card strong {
  position: relative;
  color: var(--emerald-depth);
  font-size: .92rem;
}

.home-featured-services {
  background:
    radial-gradient(circle at 90% 10%, rgba(212, 169, 77, .10), transparent 24rem),
    #fff;
}

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.home-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  border: 1px solid var(--fine-divider);
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #FBFBF9);
  box-shadow: 0 14px 36px rgba(16, 21, 20, .045);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(15, 122, 90, .30);
  box-shadow: 0 24px 58px rgba(16, 21, 20, .10);
}

.home-service-card > span,
.service-brand-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--service-bg, #fff);
  color: var(--service-color, var(--deep-forest));
  font-weight: 900;
  font-size: .82rem;
  box-shadow: 0 12px 28px var(--service-shadow, rgba(16, 21, 20, .12));
}

.home-service-card > span {
  margin-bottom: 18px;
}

.service-brand-icon {
  flex: 0 0 auto;
}

.service-brand-icon::before {
  content: var(--service-mark, '•');
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1;
}

.service-brand-icon--instagram {
  --service-mark: '◎';
  --service-bg: radial-gradient(circle at 28% 105%, #FEDA75 0 24%, #FA7E1E 38%, #D62976 58%, #962FBF 78%, #4F5BD5 100%);
  --service-color: #fff;
  --service-shadow: rgba(214, 41, 118, .24);
}

.service-brand-icon--threads {
  --service-mark: '@';
  --service-bg: #101010;
  --service-color: #fff;
  --service-shadow: rgba(16, 16, 16, .20);
}

.service-brand-icon--tiktok {
  --service-mark: '♪';
  --service-bg: linear-gradient(135deg, #111 0 54%, #FE2C55 54% 72%, #25F4EE 72%);
  --service-color: #fff;
  --service-shadow: rgba(254, 44, 85, .18);
}

.service-brand-icon--gmail {
  --service-mark: 'M';
  --service-bg: conic-gradient(from 225deg, #EA4335 0 25%, #FBBC04 0 39%, #34A853 0 58%, #4285F4 0 78%, #EA4335 0);
  --service-color: #fff;
  --service-shadow: rgba(66, 133, 244, .16);
}

.service-brand-icon--facebook {
  --service-mark: 'f';
  --service-bg: #1877F2;
  --service-color: #fff;
  --service-shadow: rgba(24, 119, 242, .18);
}

.service-brand-icon--x {
  --service-mark: '𝕏';
  --service-bg: #111;
  --service-color: #fff;
  --service-shadow: rgba(17, 17, 17, .20);
}

.service-brand-icon--youtube {
  --service-mark: '▶';
  --service-bg: #FF0000;
  --service-color: #fff;
  --service-shadow: rgba(255, 0, 0, .18);
}

.service-brand-icon--reddit {
  --service-mark: 'r';
  --service-bg: #FF4500;
  --service-color: #fff;
  --service-shadow: rgba(255, 69, 0, .20);
}

.service-brand-icon--telegram {
  --service-mark: '✈';
  --service-bg: #F7FAF8;
  --service-color: #229ED9;
  --service-shadow: rgba(34, 158, 217, .14);
}

.service-brand-icon--discord {
  --service-mark: '☯';
  --service-bg: #5865F2;
  --service-color: #fff;
  --service-shadow: rgba(88, 101, 242, .18);
}

.service-brand-icon--openai {
  --service-mark: '✺';
  --service-bg: #111;
  --service-color: #fff;
  --service-shadow: rgba(17, 17, 17, .18);
}

.service-brand-icon--canva {
  --service-mark: 'C';
  --service-bg: linear-gradient(135deg, #00C4CC, #7D2AE8);
  --service-color: #fff;
  --service-shadow: rgba(125, 42, 232, .18);
}

.service-brand-icon--linkedin {
  --service-mark: 'in';
  --service-bg: #0A66C2;
  --service-color: #fff;
  --service-shadow: rgba(10, 102, 194, .18);
}

.service-brand-icon--amazon {
  --service-mark: 'a';
  --service-bg: #232F3E;
  --service-color: #FF9900;
  --service-shadow: rgba(35, 47, 62, .18);
}

.service-brand-icon--paypal {
  --service-mark: 'P';
  --service-bg: #FFFFFF;
  --service-color: #003087;
  --service-shadow: rgba(0, 48, 135, .14);
  border: 1px solid rgba(0, 48, 135, .14);
}

.home-service-card p,
.usecase-card p,
.quality-grid p,
.process-timeline p {
  color: var(--muted-stone);
  font-size: .92rem;
}

.home-usecases {
  background: radial-gradient(circle at 12% 12%, rgba(56,189,248,.12), transparent 28rem), #F8FBFF;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.usecase-card {
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(207, 224, 246, .88);
  box-shadow: 0 18px 54px rgba(6, 27, 46, .07);
}

.usecase-card div {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--emerald-depth);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 900;
}

.home-quality {
  background: #061B2E;
  overflow: hidden;
}

.home-quality::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -120px;
  border-radius: 999px;
  background: rgba(56, 189, 248, .18);
  filter: blur(10px);
}

.quality-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 56px;
  align-items: center;
}

.quality-copy h2,
.quality-copy .section-title {
  color: #fff;
}

.quality-copy p,
.quality-copy .section-description {
  color: rgba(224,230,242,.72);
  margin-bottom: 28px;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.quality-grid article {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
}

.quality-grid span {
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #38BDF8;
  box-shadow: 0 0 0 8px rgba(56,189,248,.12);
}

.quality-grid h3 {
  color: #fff;
}

.quality-grid p {
  color: rgba(224,230,242,.68);
}

.home-process {
  background: #fff;
}

.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  counter-reset: process;
}

.process-timeline article {
  position: relative;
  padding: 30px 26px;
  border-radius: 28px;
  background: #F8FBFF;
  border: 1px solid var(--fine-divider);
}

.process-timeline span {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--emerald-depth);
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
}

.home-why {
  background: linear-gradient(180deg, #F8FBFF, #FFFFFF);
}

.why-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
  gap: 54px;
  align-items: center;
  padding: 54px;
  border-radius: 36px;
  background: #fff;
  border: 1px solid var(--fine-divider);
  box-shadow: var(--shadow-lg);
}

.why-panel p {
  margin-top: 18px;
}

.why-list {
  display: grid;
  gap: 16px;
}

.why-list div {
  padding: 22px;
  border-radius: 22px;
  background: #F8FBFF;
  border: 1px solid var(--fine-divider);
}

.why-list strong {
  display: block;
  color: var(--deep-forest);
  margin-bottom: 6px;
}

.why-list span {
  color: var(--muted-stone);
  font-size: .94rem;
}

.home-faq {
  background: #F8FBFF;
}

.home-final-cta {
  background: #fff;
}

@media (max-width: 1100px) {
  .home-category-grid,
  .starter-pricing-grid,
  .home-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usecase-grid,
  .process-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-layout,
  .why-panel,
  .split-home-heading {
    grid-template-columns: 1fr;
  }

  .quality-layout {
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .home-section {
    padding: 72px 0;
  }

  .snapshot-grid,
  .starter-pricing-grid,
  .home-category-grid,
  .home-service-grid,
  .usecase-grid,
  .quality-grid,
  .process-timeline {
    grid-template-columns: 1fr;
  }

  .home-heading,
  .split-home-heading {
    margin-bottom: 34px;
  }

  .home-category-card {
    min-height: auto;
    padding: 26px;
  }

  .starter-price-card h3 {
    min-height: 0;
  }

  .why-panel {
    padding: 30px;
    border-radius: 28px;
  }
}

@media (max-width: 480px) {
  .home-section {
    padding: 60px 0;
  }

  .snapshot-item,
  .starter-price-card,
  .home-service-card,
  .usecase-card,
  .quality-grid article,
  .process-timeline article {
    padding: 22px;
  }
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  background-color: var(--white);
  color: var(--rich-graphite);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--deep-forest);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
  color: var(--slate-green);
  line-height: 1.7;
}

/* Utility Classes */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: var(--section-padding) 0;
}

.section-padding-sm {
  padding: 60px 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  transition: all var(--transition-base);
}

.btn-primary {
  background: var(--emerald-depth);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--premium-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--white);
  color: var(--deep-forest);
  border: 1.5px solid var(--light-border);
}

.btn-secondary:hover {
  border-color: var(--emerald-depth);
  color: var(--emerald-depth);
}

.btn-gold {
  background: var(--champagne-gold);
  color: var(--deep-forest);
}

.btn-gold:hover {
  background: #c49a3d;
  transform: translateY(-2px);
}

/* Top Utility Strip */
.top-strip {
  background: var(--soft-ivory);
  border-bottom: 1px solid var(--fine-divider);
  padding: 10px 0;
}

.top-strip-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted-stone);
}

.top-strip-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-strip-item svg {
  width: 14px;
  height: 14px;
  color: var(--emerald-depth);
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--fine-divider);
  z-index: 1000;
  transition: box-shadow var(--transition-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-sm);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--deep-forest);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition-fast), transform var(--transition-base);
}

.logo:hover {
  color: var(--emerald-depth);
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--emerald-depth), var(--premium-green));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px rgba(15, 122, 90, 0.18);
  transition: transform var(--transition-base), box-shadow var(--transition-base), filter var(--transition-base);
}

.logo:hover .logo-icon {
  transform: translateY(-1px) scale(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 28px rgba(15, 122, 90, 0.24);
  filter: saturate(1.08);
}

.logo-icon svg {
  width: 20px;
  height: 20px;
  color: var(--white);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate-green);
  position: relative;
  padding: 8px 0;
}

.nav-link:hover {
  color: var(--deep-forest);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--emerald-depth);
  transition: width var(--transition-base);
}

.nav-link:hover::after {
  width: 100%;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.dropdown:hover .dropdown-toggle svg {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 720px;
  max-width: min(900px, calc(100vw - 40px));
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-base);
  max-height: 70vh;
  overflow-y: auto;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.dropdown-menu-services {
  min-width: 860px;
  max-width: min(980px, calc(100vw - 40px));
  padding: 20px;
}

.dropdown-grid-services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
}

.dropdown-section {
  min-width: 0;
}

.dropdown-section-title {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fine-divider);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--deep-forest);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dropdown-section-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate-green);
  transition: all var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--soft-ivory);
  color: var(--deep-forest);
}

.dropdown-item svg {
  width: 18px;
  height: 18px;
  color: var(--emerald-depth);
}

.dropdown-view-all {
  display: block;
  margin-top: 16px;
  padding: 12px;
  background: var(--soft-ivory);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: var(--emerald-depth);
}

.dropdown-view-all:hover {
  background: rgba(15, 122, 90, 0.1);
}

/* Mobile Menu */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--deep-forest);
  transition: all var(--transition-fast);
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Hero Section */
.hero {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--white) 0%, var(--soft-ivory) 100%);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content {
  max-width: 560px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--emerald-depth);
  margin-bottom: 24px;
}

.hero-badge svg {
  width: 14px;
  height: 14px;
}

.hero-title {
  margin-bottom: 20px;
  line-height: 1.1;
}

.hero-title span {
  color: var(--emerald-depth);
}

.hero-description {
  font-size: 1.1rem;
  color: var(--muted-stone);
  margin-bottom: 32px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--slate-green);
}

.trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--emerald-depth);
}

/* Hero Visual */
.hero-visual {
  position: relative;
  height: 500px;
}

.hero-card {
  position: absolute;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 20px;
}

.hero-card-1 {
  top: 0;
  left: 0;
  width: 280px;
}

.hero-card-2 {
  top: 60px;
  right: 0;
  width: 240px;
}

.hero-card-3 {
  bottom: 80px;
  left: 40px;
  width: 260px;
}

.hero-card-4 {
  bottom: 0;
  right: 20px;
  width: 200px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon svg {
  width: 22px;
  height: 22px;
}

.card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--deep-forest);
}

.card-subtitle {
  font-size: 0.75rem;
  color: var(--muted-stone);
}

.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 12px;
  background: var(--soft-ivory);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--slate-green);
}

.chip-featured {
  background: rgba(15, 122, 90, 0.1);
  color: var(--emerald-depth);
}

/* Section Intro */
.section-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--emerald-depth);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.section-title {
  margin-bottom: 16px;
}

.section-description {
  font-size: 1.05rem;
  color: var(--muted-stone);
}

/* Category Cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.category-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  padding: 28px;
  transition: all var(--transition-base);
}

.category-card:hover {
  border-color: var(--light-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.category-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.category-icon svg {
  width: 28px;
  height: 28px;
}

.category-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 8px;
}

.category-desc {
  font-size: 0.9rem;
  color: var(--muted-stone);
  margin-bottom: 16px;
}

.category-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.category-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--emerald-depth);
}

.category-link:hover {
  gap: 10px;
}

.category-link svg {
  width: 16px;
  height: 16px;
}

/* Service Finder */
.finder-box {
  background: var(--soft-ivory);
  border-radius: 20px;
  padding: 40px;
}

.finder-search {
  position: relative;
  margin-bottom: 32px;
}

.finder-search input {
  width: 100%;
  padding: 18px 24px 18px 56px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  font-size: 1rem;
  color: var(--deep-forest);
  transition: all var(--transition-fast);
}

.finder-search input:focus {
  outline: none;
  border-color: var(--emerald-depth);
  box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.1);
}

.finder-search svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--muted-stone);
}

.finder-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--slate-green);
  transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--emerald-depth);
  border-color: var(--emerald-depth);
  color: var(--white);
}

.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.finder-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all var(--transition-base);
}

.finder-card:hover {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-md);
}

.finder-card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.finder-card-icon svg {
  width: 24px;
  height: 24px;
}

.finder-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-forest);
  margin-bottom: 4px;
}

.finder-card-type {
  font-size: 0.75rem;
  color: var(--muted-stone);
}

/* Featured Destinations */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.featured-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  padding: 28px;
  transition: all var(--transition-base);
  position: relative;
}

.featured-card:hover {
  border-color: var(--light-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.featured-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  background: rgba(212, 169, 77, 0.15);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--champagne-gold);
}

.featured-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.featured-icon svg {
  width: 28px;
  height: 28px;
}

.featured-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 8px;
}

.featured-desc {
  font-size: 0.85rem;
  color: var(--muted-stone);
  margin-bottom: 16px;
}

.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--emerald-depth);
}

.featured-cta:hover {
  gap: 10px;
}

.featured-cta svg {
  width: 16px;
  height: 16px;
}

/* Why Structure Section */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.why-card {
  display: flex;
  gap: 20px;
}

.why-number {
  width: 48px;
  height: 48px;
  background: var(--emerald-depth);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.why-content h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.why-content p {
  font-size: 0.9rem;
  color: var(--muted-stone);
}

/* Order Flow */
.order-flow {
  background: var(--soft-ivory);
}

.flow-steps {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

.flow-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 60px;
  right: 60px;
  height: 2px;
  background: var(--light-border);
  z-index: 0;
}

.flow-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.flow-step-number {
  width: 50px;
  height: 50px;
  background: var(--white);
  border: 2px solid var(--emerald-depth);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--emerald-depth);
  margin: 0 auto 16px;
}

.flow-step-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-forest);
  margin-bottom: 8px;
}

.flow-step-desc {
  font-size: 0.85rem;
  color: var(--muted-stone);
}

/* Advantage Board */
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.advantage-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 12px;
  padding: 24px;
  transition: all var(--transition-base);
}

.advantage-card:hover {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-sm);
}

.advantage-icon {
  width: 44px;
  height: 44px;
  background: rgba(15, 122, 90, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.advantage-icon svg {
  width: 22px;
  height: 22px;
  color: var(--emerald-depth);
}

.advantage-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-forest);
  margin-bottom: 6px;
}

.advantage-desc {
  font-size: 0.85rem;
  color: var(--muted-stone);
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  padding: 28px;
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.testimonial-stars svg {
  width: 18px;
  height: 18px;
  color: var(--champagne-gold);
}

.testimonial-text {
  font-size: 1rem;
  color: var(--slate-green);
  margin-bottom: 20px;
  line-height: 1.7;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--emerald-depth), var(--premium-green));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.testimonial-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-forest);
}

.testimonial-meta {
  font-size: 0.8rem;
  color: var(--muted-stone);
}

/* FAQ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--fine-divider);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--deep-forest);
  text-align: left;
}

.faq-question svg {
  width: 22px;
  height: 22px;
  color: var(--emerald-depth);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.faq-item.active .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding-bottom: 24px;
  font-size: 0.95rem;
  color: var(--muted-stone);
}

/* Final CTA */
.final-cta {
  background: var(--deep-forest);
  padding: 100px 0;
  text-align: center;
}

.final-cta-title {
  color: var(--white);
  margin-bottom: 16px;
}

.final-cta-desc {
  color: var(--muted-stone);
  font-size: 1.1rem;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  transition: all var(--transition-base);
}

.cta-btn-whatsapp {
  background: #25D366;
  color: var(--white);
}

.cta-btn-whatsapp:hover {
  background: #1faa52;
  transform: translateY(-2px);
}

.cta-btn-telegram {
  background: #0088cc;
  color: var(--white);
}

.cta-btn-telegram:hover {
  background: #006ba3;
  transform: translateY(-2px);
}

.cta-btn-email {
  background: var(--white);
  color: var(--deep-forest);
}

.cta-btn-email:hover {
  background: var(--soft-ivory);
  transform: translateY(-2px);
}

.cta-btn svg {
  width: 20px;
  height: 20px;
}

/* Floating Contact Stack */
.floating-contacts {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
}

.floating-btn:hover {
  transform: scale(1.1);
}

.floating-btn svg {
  width: 24px;
  height: 24px;
}

.floating-whatsapp {
  background: #25D366;
  color: var(--white);
}

.floating-telegram {
  background: #0088cc;
  color: var(--white);
}

.floating-email {
  background: var(--white);
  color: var(--deep-forest);
  border: 1px solid var(--light-border);
}

/* Order Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 21, 20, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--white);
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  padding: 40px;
  position: relative;
  transform: scale(0.95);
  transition: transform var(--transition-base);
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--soft-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--fine-divider);
}

.modal-close svg {
  width: 18px;
  height: 18px;
  color: var(--slate-green);
}

.modal-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.modal-subtitle {
  font-size: 0.95rem;
  color: var(--muted-stone);
  margin-bottom: 32px;
}

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.modal-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--soft-ivory);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.modal-option:hover {
  background: var(--fine-divider);
}

.modal-option-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-option-icon svg {
  width: 24px;
  height: 24px;
}

.modal-option-info {
  flex: 1;
}

.modal-option-label {
  font-size: 0.8rem;
  color: var(--muted-stone);
  margin-bottom: 2px;
}

.modal-option-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-forest);
}

.modal-option-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--muted-stone);
}

.modal-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted-stone);
  padding-top: 20px;
  border-top: 1px solid var(--fine-divider);
}

/* Footer */
.footer {
  background: var(--soft-ivory);
  border-top: 1px solid var(--fine-divider);
  padding: 80px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--muted-stone);
  margin-top: 16px;
  max-width: 280px;
}

.footer-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  font-size: 0.9rem;
  color: var(--slate-green);
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--emerald-depth);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--fine-divider);
}

.footer-copyright {
  font-size: 0.85rem;
  color: var(--muted-stone);
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  background: var(--white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background: var(--emerald-depth);
  color: var(--white);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

/* Service Page Styles */
.page-header {
  background: linear-gradient(180deg, var(--soft-ivory) 0%, var(--white) 100%);
  padding: 60px 0 40px;
  text-align: center;
}

.page-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.page-icon svg {
  width: 40px;
  height: 40px;
}

.page-title {
  margin-bottom: 12px;
}

.page-subtitle {
  font-size: 1.1rem;
  color: var(--muted-stone);
  max-width: 600px;
  margin: 0 auto;
}

/* Value Strip */
.value-strip {
  background: var(--deep-forest);
  padding: 20px 0;
}

.value-strip-content {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.value-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--white);
}

.value-strip-item svg {
  width: 18px;
  height: 18px;
  color: var(--emerald-depth);
}

/* Package Cards */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.package-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  padding: 32px;
  transition: all var(--transition-base);
  position: relative;
}

.package-card:hover {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-md);
}

.package-card.featured {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-lg);
}

.package-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: var(--emerald-depth);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
}

.pricing-section .package-badge {
  display: none !important;
}

.package-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 8px;
  text-align: center;
}

.package-desc {
  font-size: 0.9rem;
  color: var(--muted-stone);
  text-align: center;
  margin-bottom: 24px;
}

.package-price {
  text-align: center;
  margin-bottom: 24px;
}

.package-price-value {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--deep-forest);
}

.package-price-unit {
  font-size: 0.9rem;
  color: var(--muted-stone);
}

.package-features {
  margin-bottom: 28px;
}

.package-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.9rem;
  color: var(--slate-green);
  border-bottom: 1px solid var(--fine-divider);
}

.package-feature:last-child {
  border-bottom: none;
}

.package-feature svg {
  width: 18px;
  height: 18px;
  color: var(--emerald-depth);
  flex-shrink: 0;
}

.package-btn {
  width: 100%;
}

/* Related Services */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.related-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all var(--transition-base);
}

.related-card:hover {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-sm);
}

.related-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.related-icon svg {
  width: 22px;
  height: 22px;
}

.related-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--deep-forest);
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  transition: all var(--transition-base);
}

.contact-card:hover {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-md);
}

.contact-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.contact-icon svg {
  width: 32px;
  height: 32px;
}

.contact-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 8px;
}

.contact-detail {
  font-size: 0.95rem;
  color: var(--slate-green);
  margin-bottom: 20px;
}

.contact-btn {
  width: 100%;
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--deep-forest);
  margin-bottom: 8px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--light-border);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--deep-forest);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--emerald-depth);
  box-shadow: 0 0 0 3px rgba(15, 122, 90, 0.1);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Blog Cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 16px;
  overflow: hidden;
  transition: all var(--transition-base);
}

.blog-card:hover {
  border-color: var(--light-border);
  box-shadow: var(--shadow-md);
}

.blog-image {
  height: 180px;
  background: var(--soft-ivory);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-image svg {
  width: 48px;
  height: 48px;
  color: var(--light-border);
}

.blog-content {
  padding: 24px;
}

.blog-category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(15, 122, 90, 0.1);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--emerald-depth);
  margin-bottom: 12px;
}

.blog-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-forest);
  margin-bottom: 10px;
  line-height: 1.4;
}

.blog-excerpt {
  font-size: 0.9rem;
  color: var(--muted-stone);
  margin-bottom: 16px;
}

.blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--emerald-depth);
}

.blog-link:hover {
  gap: 10px;
}

.blog-link svg {
  width: 16px;
  height: 16px;
}

/* Privacy Policy */
.privacy-content {
  max-width: 800px;
  margin: 0 auto;
}

.privacy-section {
  margin-bottom: 40px;
}

.privacy-section h3 {
  margin-bottom: 16px;
}

.privacy-section p {
  margin-bottom: 12px;
}

.privacy-section ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.privacy-section li {
  font-size: 0.95rem;
  color: var(--slate-green);
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  
  .hero-visual {
    display: none;
  }
  
  .dropdown-menu {
    min-width: 620px;
  }
  
  .dropdown-menu-services {
    min-width: min(100%, 720px);
    max-width: calc(100vw - 32px);
    padding: 16px;
  }
  
  .dropdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dropdown-grid-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }
  
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .top-strip {
    display: none;
  }

  .navbar-content {
    height: 64px;
  }

  .logo {
    font-size: 1.25rem;
  }

  .logo-icon {
    width: 32px;
    height: 32px;
  }

  .logo-icon svg {
    width: 18px;
    height: 18px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 20px 16px 24px;
    gap: 16px;
    border-bottom: 1px solid var(--fine-divider);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .mobile-menu-btn {
    display: flex;
    padding: 6px;
  }

   .nav-link,
   .dropdown-toggle,
   .btn {
    width: 100%;
   }

   .dropdown-toggle {
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
   }
  
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    min-width: 100%;
    max-width: 100%;
    max-height: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    transition: max-height var(--transition-slow), padding var(--transition-base);
    border-top: 0;
    margin-top: 0;
  }
  
  .dropdown.active .dropdown-menu {
    padding: 12px 0;
    border-top: 1px solid var(--fine-divider);
    margin-top: 4px;
  }
  
  .dropdown-grid {
    grid-template-columns: 1fr;
  }
  
  .dropdown-grid-services {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .dropdown-menu-services {
    padding: 0;
  }

  .dropdown.active .dropdown-menu-services {
    padding: 12px 0;
  }
  
  .dropdown-section {
    padding: 0 0 8px;
  }

   .dropdown-item {
    padding: 12px;
   }
  
  .dropdown-section-title {
    padding: 0 12px 8px;
  }
  
  .flow-steps {
    flex-direction: column;
    gap: 32px;
  }
  
  .flow-steps::before {
    display: none;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .floating-contacts {
    bottom: 16px;
    left: 16px;
  }
  
  .floating-btn {
    width: 44px;
    height: 44px;
  }
  
  .floating-btn svg {
    width: 20px;
    height: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    padding: 28px;
  }
}

@media (max-width: 480px) {
  .hero-buttons {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
  
  .final-cta-buttons {
    flex-direction: column;
  }
  
  .cta-btn {
    width: 100%;
    justify-content: center;
  }
}


/* Pricing Tables & Tabs */
.pricing-tabs-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pricing-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.pricing-tab {
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--light-border);
  background: var(--white);
  color: var(--slate-green);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.pricing-tab:hover,
.pricing-tab.active {
  background: var(--emerald-depth);
  border-color: var(--emerald-depth);
  color: var(--white);
}

.pricing-panel {
  display: none;
}

.pricing-panel.active {
  display: block;
}

.pricing-panel-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
}

.pricing-panel-title {
  font-size: 1.45rem;
  margin-bottom: 8px;
}

.pricing-panel-description {
  font-size: 0.95rem;
  color: var(--muted-stone);
}

.pricing-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.pricing-section .package-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-section .package-price {
  text-align: center;
}

.pricing-section .package-price-unit {
  display: inline-block;
  margin-left: 4px;
}

.pricing-section .package-features {
  flex: 1;
}

.pricing-section .package-btn {
  width: 100%;
  margin-top: auto;
}

.platform-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.platform-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100%;
  padding: 28px 20px 22px;
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.platform-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 122, 90, 0.28);
  box-shadow: var(--shadow-md);
}

.platform-service-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--logo-start), var(--logo-end));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 28px rgba(16, 21, 20, 0.12);
}

.platform-service-logo span {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}

.platform-service-name {
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: center;
  margin: 0;
  min-height: 2.85em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-price {
  margin: 0 0 18px;
}

.platform-price .package-price-value {
  font-size: clamp(1.55rem, 1.3vw + 1rem, 2rem);
}

.platform-price .package-price-unit {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
}

.platform-card-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}

.platform-action-btn {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
}

@media (max-width: 1100px) {
  .platform-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .platform-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

.monthly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.monthly-card {
  background: var(--white);
  border: 1px solid var(--fine-divider);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.monthly-card.featured {
  border-color: var(--emerald-depth);
  box-shadow: var(--shadow-md);
}

.monthly-duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(15, 122, 90, 0.08);
  color: var(--emerald-depth);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.service-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.service-overview-card {
  background: var(--soft-ivory);
  border: 1px solid var(--fine-divider);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.service-overview-title {
  font-size: 1.15rem;
  margin-bottom: 14px;
}

.service-overview-text {
  color: var(--slate-green);
}

.service-overview-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-overview-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--slate-green);
  line-height: 1.65;
}

.service-overview-item svg {
  width: 18px;
  height: 18px;
  color: var(--emerald-depth);
  flex-shrink: 0;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .pricing-tab {
    width: 100%;
    text-align: center;
  }

  .platform-service-card {
    padding: 20px 14px 16px;
    gap: 12px;
  }

  .platform-service-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .platform-service-name {
    font-size: 0.95rem;
    min-height: 2.7em;
  }

  .platform-price .package-price-value {
    font-size: 1.3rem;
  }

  .platform-price .package-price-unit {
    font-size: 0.78rem;
  }

  .platform-card-actions {
    gap: 8px;
  }

  .platform-action-btn {
    padding: 10px 8px;
    font-size: 0.84rem;
  }

  .service-overview-card {
    padding: 24px;
  }
}


/* pvapixel homepage redesign */
.orbit-hero{position:relative;overflow:hidden;padding:110px 0 92px;background:radial-gradient(circle at top left,rgba(45,212,191,.26),transparent 34%),radial-gradient(circle at bottom right,rgba(99,102,241,.22),transparent 34%),linear-gradient(135deg,#061b2e 0%,#0a2a3f 46%,#101514 100%);color:var(--white)}
.orbit-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.2))}
.orbit-glow{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(42px);opacity:.35}.orbit-glow-one{background:#2dd4bf;top:-110px;right:14%}.orbit-glow-two{background:#8b5cf6;bottom:-150px;left:6%}
.orbit-hero-container{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);gap:68px;align-items:center}.orbit-hero-copy{max-width:690px}.orbit-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);color:#dffcf7;font-size:.86rem;font-weight:700;margin-bottom:26px}.orbit-pulse{width:9px;height:9px;border-radius:999px;background:#37f8c7;box-shadow:0 0 0 8px rgba(55,248,199,.12)}
.orbit-title{color:#fff;font-size:clamp(3rem,6vw,5.8rem);line-height:.95;letter-spacing:-.07em;margin-bottom:24px}.orbit-lead{font-size:1.18rem;max-width:640px;color:#cbd7dc;margin-bottom:34px}.orbit-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}.orbit-primary{background:linear-gradient(135deg,#21c89a,#6ee7b7);color:#042018;box-shadow:0 20px 48px rgba(45,212,191,.28)}.orbit-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}.orbit-proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:620px}.orbit-proof-row div{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.07)}.orbit-proof-row strong{display:block;color:#fff;font-size:1.55rem;font-family:var(--font-heading)}.orbit-proof-row span{color:#b9cbd0;font-size:.84rem}
.orbit-dashboard{position:relative;padding:26px;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:0 30px 80px rgba(0,0,0,.34);backdrop-filter:blur(16px)}.orbit-dashboard-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.orbit-mini-label,.orbit-status{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:800;color:#8df7db}.orbit-dashboard h2{color:#fff;margin-top:8px}.orbit-status{padding:8px 12px;border-radius:999px;background:rgba(55,248,199,.12)}
.orbit-rings{position:relative;height:390px;margin:12px 0}.orbit-ring{position:absolute;inset:50%;border:1px solid rgba(255,255,255,.17);border-radius:50%;transform:translate(-50%,-50%)}.orbit-ring-outer{width:340px;height:340px}.orbit-ring-mid{width:220px;height:220px}.orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:108px;height:108px;border-radius:32px;background:linear-gradient(135deg,#2dd4bf,#a7f3d0);color:#062034;display:grid;place-items:center;font-weight:900;font-size:1.7rem;box-shadow:0 20px 42px rgba(45,212,191,.32)}.orbit-node{position:absolute;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#fff;color:#061b2e;font-weight:900;box-shadow:0 18px 36px rgba(0,0,0,.24)}.orbit-node-1{left:10%;top:20%}.orbit-node-2{right:14%;top:14%}.orbit-node-3{left:52%;top:3%}.orbit-node-4{left:12%;bottom:18%}.orbit-node-5{right:10%;bottom:20%}.orbit-node-6{left:48%;bottom:2%}.orbit-dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.orbit-dashboard-grid div{padding:14px;border-radius:16px;background:rgba(255,255,255,.09)}.orbit-dashboard-grid span{display:block;color:#b8cdd1;font-size:.75rem}.orbit-dashboard-grid strong{color:#fff;font-size:.86rem}
.orbit-section{padding:100px 0}.split-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:44px}.orbit-promise-section{background:linear-gradient(180deg,#fff,#f7fbfa)}.orbit-promise-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px}.orbit-promise-card{padding:30px;border:1px solid var(--fine-divider);border-radius:26px;background:#fff;box-shadow:0 20px 60px rgba(6,27,46,.06)}.orbit-promise-card.featured{background:linear-gradient(135deg,#eefdfa,#fff)}.orbit-card-icon{width:50px;height:50px;border-radius:16px;background:#061b2e;color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:22px}.orbit-promise-card h3{font-size:1.35rem;margin-bottom:10px}.orbit-promise-card p{color:var(--muted-stone)}
.orbit-dark-section{background:#061b2e;color:#fff;position:relative;overflow:hidden}.orbit-dark-section:before{content:"";position:absolute;inset:auto -20% -35% -20%;height:360px;background:radial-gradient(circle,rgba(45,212,191,.22),transparent 62%)}.orbit-dark-section .container{position:relative}.light-heading .section-title{color:#fff}.light-heading .section-description{color:#bfd0d5}.orbit-lanes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.orbit-lane-card{min-height:330px;padding:26px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.13);display:flex;flex-direction:column;justify-content:flex-end;transition:.25s ease}.orbit-lane-card:hover{transform:translateY(-7px);border-color:rgba(110,231,183,.52)}.orbit-lane-card span{color:#8df7db;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:900;margin-bottom:18px}.orbit-lane-card h3{color:#fff;font-size:1.35rem;margin-bottom:12px}.orbit-lane-card p{color:#bed0d6}.orbit-lane-card.social{background:linear-gradient(160deg,rgba(228,64,95,.42),rgba(255,255,255,.06))}.orbit-lane-card.email{background:linear-gradient(160deg,rgba(66,133,244,.38),rgba(255,255,255,.06))}.orbit-lane-card.ai{background:linear-gradient(160deg,rgba(16,163,127,.42),rgba(255,255,255,.06))}.orbit-lane-card.messaging{background:linear-gradient(160deg,rgba(34,158,217,.42),rgba(255,255,255,.06))}
.orbit-pricing-section{background:#f8fbfb}.orbit-finder-section{background:#fff}.orbit-finder-box{background:linear-gradient(135deg,#f4fffc,#f7f8ff);border:1px solid #e6f1ef;box-shadow:0 26px 70px rgba(6,27,46,.08)}.finder-card-icon span{color:#fff;font-weight:900;font-size:.9rem}.orbit-process-section{background:#fbfbf9}.orbit-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.orbit-process-grid article{padding:34px;border-radius:28px;background:#fff;border:1px solid var(--fine-divider);box-shadow:0 18px 50px rgba(6,27,46,.06)}.orbit-process-grid span{display:inline-flex;margin-bottom:18px;color:var(--emerald-depth);font-weight:900}.orbit-process-grid h3{margin-bottom:10px}.orbit-testimonial-section{background:#fff}.orbit-testimonial-panel{display:grid;grid-template-columns:1fr 280px;gap:38px;align-items:center;padding:46px;border-radius:34px;background:linear-gradient(135deg,#061b2e,#123b50);box-shadow:0 30px 80px rgba(6,27,46,.18)}.orbit-testimonial-panel h2{color:#fff;font-size:clamp(2rem,4vw,3.3rem);margin-bottom:18px}.orbit-testimonial-panel p{color:#d6e4e7;font-size:1.1rem}.orbit-rating-card{padding:28px;border-radius:26px;background:rgba(255,255,255,.12);text-align:center}.orbit-rating-card strong{display:block;color:#fff;font-size:3rem;font-family:var(--font-heading)}.orbit-rating-card span{color:#cbdadd}.orbit-stars{color:#facc15;margin-top:14px;letter-spacing:3px}.orbit-faq-section{background:#f8fbfb}.orbit-final-cta{padding:90px 0;background:#fff}.orbit-final-card{text-align:center;padding:60px 24px;border-radius:36px;background:radial-gradient(circle at top,#e7fffa,transparent 45%),linear-gradient(135deg,#061b2e,#0f3c4d);box-shadow:0 30px 90px rgba(6,27,46,.2)}.orbit-final-card h2{color:#fff;font-size:clamp(2.3rem,5vw,4.4rem);margin:12px 0}.orbit-final-card p{color:#d7e5e8;max-width:650px;margin:0 auto 28px}
@media (max-width:1024px){.orbit-hero-container,.split-heading,.orbit-testimonial-panel{grid-template-columns:1fr}.orbit-lanes-grid,.orbit-promise-grid{grid-template-columns:repeat(2,1fr)}.orbit-visual{max-width:620px}.orbit-proof-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.orbit-hero{padding:76px 0}.orbit-title{font-size:clamp(2.7rem,13vw,4.2rem)}.orbit-proof-row,.orbit-dashboard-grid,.orbit-promise-grid,.orbit-lanes-grid,.orbit-process-grid{grid-template-columns:1fr}.orbit-rings{height:330px}.orbit-ring-outer{width:280px;height:280px}.orbit-ring-mid{width:190px;height:190px}.orbit-node{width:50px;height:50px}.orbit-section{padding:72px 0}}

/* Premium blue service-page refresh */
:root {
  --white: #FFFFFF;
  --soft-ivory: #F8FBFF;
  --stone-mist: #EEF5FF;
  --soft-mineral: #D8E7FF;
  --deep-forest: #061B2E;
  --rich-graphite: #0B1F35;
  --slate-green: #40536B;
  --muted-stone: #6B7D93;
  --light-border: #CFE0F6;
  --fine-divider: #E5EEF9;
  --emerald-depth: #0B4CFF;
  --premium-green: #38BDF8;
  --champagne-gold: #F6C85F;
  --shadow-sm: 0 8px 24px rgba(6, 27, 46, 0.07);
  --shadow-md: 0 16px 42px rgba(6, 27, 46, 0.11);
  --shadow-lg: 0 24px 70px rgba(6, 27, 46, 0.16);
  --shadow-xl: 0 34px 100px rgba(6, 27, 46, 0.22);
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.08), transparent 28rem),
    radial-gradient(circle at 90% 12%, rgba(56, 189, 248, 0.12), transparent 30rem),
    var(--white);
}

.top-strip {
  background: linear-gradient(90deg, #061B2E, #0B4CFF 48%, #063B7A);
  border-bottom: 0;
}

.top-strip-content,
.top-strip-item svg {
  color: rgba(255, 255, 255, 0.88);
}

.navbar {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(207, 224, 246, 0.74);
  backdrop-filter: blur(18px);
}

.navbar.scrolled {
  box-shadow: 0 18px 46px rgba(6, 27, 46, 0.10);
}

.logo-icon,
.testimonial-avatar {
  background: linear-gradient(135deg, #061B2E, #0B4CFF 58%, #38BDF8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 34px rgba(11, 76, 255, 0.26);
}

.btn-primary {
  background: linear-gradient(135deg, #0B4CFF, #2563EB 55%, #38BDF8);
  box-shadow: 0 14px 32px rgba(11, 76, 255, 0.22);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #063BCE, #0B4CFF 58%, #22D3EE);
  box-shadow: 0 18px 42px rgba(11, 76, 255, 0.30);
}

.btn-secondary:hover,
.nav-link:hover,
.footer-link:hover,
.category-link,
.featured-cta,
.blog-link {
  color: var(--emerald-depth);
}

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 92px 0 74px;
  background:
    radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.26), transparent 26rem),
    radial-gradient(circle at 82% 4%, rgba(11, 76, 255, 0.34), transparent 28rem),
    linear-gradient(135deg, #061B2E 0%, #0A2A4A 46%, #0B4CFF 125%);
  color: var(--white);
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.2));
}

.page-header::after {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  right: -90px;
  bottom: -190px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.28);
  filter: blur(34px);
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-icon {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 24px 60px rgba(0, 0, 0, 0.22);
  transform: rotate(-3deg);
}

.page-title {
  color: var(--white);
  letter-spacing: -0.045em;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.page-subtitle {
  max-width: 760px;
  color: #D7E7F6;
  font-size: clamp(1.05rem, 1.2vw + 0.78rem, 1.28rem);
}

.value-strip {
  background: linear-gradient(90deg, #07182A, #0A315A 45%, #07182A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.value-strip-content {
  gap: 18px;
}

.value-strip-item {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #EAF6FF;
  font-weight: 700;
}

.value-strip-item svg {
  color: #7DD3FC;
}

.section-padding.pricing-section,
.pricing-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(11, 76, 255, 0.09), transparent 35rem),
    linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 72%);
}

.section-label {
  padding: 8px 13px;
  border: 1px solid rgba(11, 76, 255, 0.14);
  border-radius: 999px;
  background: rgba(11, 76, 255, 0.07);
  color: var(--emerald-depth);
}

.section-title {
  letter-spacing: -0.035em;
}

.pricing-tabs-wrap {
  position: relative;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(207, 224, 246, 0.9);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 26px 80px rgba(6, 27, 46, 0.09);
  backdrop-filter: blur(14px);
}

.pricing-tabs {
  padding: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(207, 224, 246, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF, #F3F8FF);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 28px rgba(6, 27, 46, 0.06);
}

.pricing-tab {
  border: 0;
  background: transparent;
  color: #40536B;
}

.pricing-tab:hover,
.pricing-tab.active {
  background: linear-gradient(135deg, #061B2E, #0B4CFF 72%, #38BDF8);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 12px 30px rgba(11, 76, 255, 0.26);
}

.pricing-panel.active {
  animation: pricingPanelIn 0.32s ease both;
}

@keyframes pricingPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.pricing-panel-intro {
  padding-top: 4px;
}

.pricing-panel-title {
  color: #061B2E;
}

.packages-grid,
.pricing-card-grid,
.monthly-grid,
.platform-pricing-grid,
.service-overview-grid,
.related-grid {
  perspective: 1200px;
}

.package-card,
.monthly-card,
.platform-service-card,
.service-overview-card,
.related-card,
.category-card,
.featured-card,
.contact-card,
.blog-card,
.advantage-card,
.testimonial-card {
  border-color: rgba(207, 224, 246, 0.86);
  box-shadow: 0 14px 44px rgba(6, 27, 46, 0.06);
}

.package-card {
  overflow: hidden;
  border-radius: 24px;
  padding-top: 46px;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(145deg, rgba(207, 224, 246, 0.9), rgba(255, 255, 255, 0.45), rgba(56, 189, 248, 0.34)) border-box;
}

.package-card > * {
  position: relative;
  z-index: 1;
}

.package-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #061B2E, #0B4CFF, #38BDF8);
  pointer-events: none;
}

.package-card::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -110px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.18);
  transition: transform var(--transition-base), opacity var(--transition-base);
  pointer-events: none;
}

.package-card:hover {
  transform: translateY(-8px);
  border-color: rgba(11, 76, 255, 0.36);
  box-shadow: 0 28px 76px rgba(6, 27, 46, 0.14);
}

.package-card:hover::after {
  opacity: 0.95;
  transform: scale(1.22);
}

.package-card.featured,
.monthly-card.featured {
  border-color: rgba(11, 76, 255, 0.46);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 14rem),
    linear-gradient(180deg, #FFFFFF, #F8FBFF);
  box-shadow: 0 30px 86px rgba(11, 76, 255, 0.16);
}

.package-badge,
.monthly-duration,
.blog-category,
.featured-badge {
  background: linear-gradient(135deg, #0B4CFF, #38BDF8);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(11, 76, 255, 0.26);
}

.package-badge {
  top: 16px;
  z-index: 2;
}

.package-price-value,
.platform-price .package-price-value {
  background: linear-gradient(135deg, #061B2E, #0B4CFF 54%, #0284C7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.package-feature {
  border-bottom-color: rgba(229, 238, 249, 0.9);
}

.package-feature svg,
.service-overview-item svg,
.faq-question svg,
.trust-item svg,
.advantage-icon svg,
.dropdown-item svg {
  color: var(--emerald-depth);
}

.platform-service-card {
  border-radius: 24px;
}

.platform-service-card:hover,
.related-card:hover,
.service-overview-card:hover,
.category-card:hover,
.featured-card:hover,
.contact-card:hover,
.advantage-card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11, 76, 255, 0.32);
  box-shadow: 0 24px 70px rgba(6, 27, 46, 0.12);
}

.platform-service-logo,
.advantage-icon,
.why-number,
.orbit-card-icon {
  background: linear-gradient(135deg, #061B2E, #0B4CFF 66%, #38BDF8);
}

.service-overview-section {
  background:
    radial-gradient(circle at left top, rgba(56, 189, 248, 0.10), transparent 26rem),
    #FFFFFF;
}

.service-overview-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
}

.service-overview-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0B4CFF, #38BDF8);
}

.service-overview-title {
  color: #061B2E;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  border: 1px solid rgba(207, 224, 246, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 34px rgba(6, 27, 46, 0.05);
  overflow: hidden;
}

.faq-question {
  padding: 22px 24px;
}

.faq-answer p {
  padding: 0 24px 24px;
}

.faq-item.active {
  border-color: rgba(11, 76, 255, 0.28);
  box-shadow: 0 20px 52px rgba(11, 76, 255, 0.10);
}

.related-card {
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF, #F7FBFF);
}

.related-icon {
  box-shadow: 0 14px 28px rgba(6, 27, 46, 0.13);
}

section[style*="var(--soft-ivory)"] {
  background: linear-gradient(180deg, #F5F9FF, #EEF5FF) !important;
}

section[style*="var(--deep-forest)"] {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.24), transparent 24rem),
    linear-gradient(135deg, #061B2E, #0B315A 58%, #0B4CFF) !important;
}

section[style*="var(--deep-forest)"] h2 {
  color: var(--white) !important;
}

section[style*="var(--deep-forest)"] p {
  color: #CFE0F6 !important;
}

section[style*="var(--deep-forest)"] .btn-primary {
  background: linear-gradient(135deg, #FFFFFF, #DFF3FF) !important;
  color: #061B2E !important;
}

table,
.pricing-table,
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(207, 224, 246, 0.9);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 18px 56px rgba(6, 27, 46, 0.09);
}

thead,
table th,
.pricing-table th,
.comparison-table th {
  background: linear-gradient(135deg, #061B2E, #0B4CFF);
  color: var(--white);
}

th,
td,
.pricing-table th,
.pricing-table td,
.comparison-table th,
.comparison-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(229, 238, 249, 0.95);
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #F8FBFF;
}

tbody tr:hover {
  background: #EEF5FF;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.finder-search input:focus {
  border-color: var(--emerald-depth);
  box-shadow: 0 0 0 4px rgba(11, 76, 255, 0.12);
}

.footer {
  background: linear-gradient(180deg, #F8FBFF, #EEF5FF);
}

.footer-social a:hover {
  background: linear-gradient(135deg, #061B2E, #0B4CFF);
}

@media (max-width: 768px) {
  .page-header {
    padding: 72px 0 54px;
  }

  .page-icon {
    width: 76px;
    height: 76px;
    border-radius: 22px;
  }

  .pricing-tabs {
    width: 100%;
    border-radius: 24px;
  }

  .pricing-tab {
    flex: 1 1 calc(50% - 8px);
  }

  .pricing-tabs-wrap {
    border-radius: 24px;
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .pricing-tab {
    flex-basis: 100%;
  }

  .package-card {
    padding: 30px 22px 24px;
  }

  th,
  td,
  .pricing-table th,
  .pricing-table td,
  .comparison-table th,
  .comparison-table td {
    padding: 13px 14px;
  }
}

/* pvapixel homepage theme refresh */
:root {
  --shore-ink: #07111F;
  --shore-navy: #0A1833;
  --shore-violet: #D9FF43;
  --shore-cyan: #20E4C7;
  --shore-coral: #FF7A59;
  --shore-sand: #FFF7EA;
  --emerald-depth: #D9FF43;
  --premium-green: #20E4C7;
  --champagne-gold: #FFB84D;
}

.logo {
  letter-spacing: -0.035em;
}

.logo-icon {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--shore-ink), var(--shore-violet) 52%, var(--shore-cyan));
  border-radius: 13px 18px 13px 18px;
}

.logo-icon svg { display: none; }

.logo-icon::before {
  content: 'PV';
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: #fff;
}

.top-strip {
  background: linear-gradient(90deg, #07111F, #3B2C89 46%, #0E8C86);
}

.navbar {
  background: rgba(255, 255, 255, 0.9);
}

.btn-primary {
  background: linear-gradient(135deg, var(--shore-violet), #4558FF 52%, var(--shore-cyan));
}

.btn-primary:hover {
  background: linear-gradient(135deg, #5847E8, var(--shore-violet), #19C9B0);
}

.shore-hero {
  min-height: calc(100svh - 118px);
  display: flex;
  align-items: center;
  padding: clamp(34px, 5vh, 58px) 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(32, 228, 199, 0.26), transparent 26rem),
    radial-gradient(circle at 86% 16%, rgba(109, 93, 252, 0.35), transparent 30rem),
    radial-gradient(circle at 52% 100%, rgba(255, 122, 89, 0.18), transparent 26rem),
    linear-gradient(135deg, #07111F 0%, #101B3D 48%, #042F36 100%);
}

.shore-hero::before {
  opacity: 0.65;
  background-size: 42px 42px;
}

.shore-wave {
  position: absolute;
  inset: auto -8% -120px -8%;
  height: 240px;
  background: radial-gradient(ellipse at center, rgba(32, 228, 199, 0.20), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

.shore-hero-container {
  gap: clamp(28px, 5vw, 64px);
}

.shore-hero-copy {
  max-width: 660px;
}

.shore-hero .orbit-eyebrow {
  margin-bottom: clamp(14px, 2.4vh, 22px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: #DFFCF8;
}

.shore-hero .orbit-title {
  font-size: clamp(2.45rem, 5.2vw, 5.45rem);
  line-height: 0.95;
  letter-spacing: -0.075em;
  color: #fff;
  margin-bottom: clamp(14px, 2vh, 20px);
}

.shore-hero .orbit-lead {
  max-width: 620px;
  margin-bottom: clamp(18px, 3vh, 28px);
  color: #C9D7E8;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.shore-hero .orbit-actions {
  margin-bottom: clamp(18px, 3vh, 28px);
}

.shore-hero .orbit-proof-row {
  max-width: 560px;
}

.shore-hero .orbit-proof-row div {
  padding: 16px;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.14);
}

.shore-visual {
  height: auto;
}

.shore-brand-card {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.shore-brand-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.shore-brand-top h2 {
  margin-top: 4px;
  color: #fff;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
}

.shore-logo-mark {
  width: clamp(86px, 10vw, 116px);
  height: clamp(86px, 10vw, 116px);
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: 26px 38px 26px 38px;
  background: linear-gradient(135deg, #fff, #DDFBFF 35%, #A69DFF);
  color: var(--shore-ink);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.12em;
  box-shadow: 0 24px 60px rgba(32, 228, 199, 0.18);
}

.shore-service-stack {
  display: grid;
  gap: 10px;
}

.shore-service-stack a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(7, 17, 31, 0.30);
  color: #fff;
}

.shore-service-stack span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--shore-violet), var(--shore-cyan));
  font-weight: 900;
  font-size: 0.78rem;
}

.shore-service-stack strong {
  font-size: 0.96rem;
}

.shore-service-stack em {
  color: #9FEFE4;
  font-style: normal;
  font-size: 0.78rem;
  white-space: nowrap;
}

.shore-promise-section {
  background: linear-gradient(180deg, #FFF7EA 0%, #FFFFFF 76%);
}

.shore-services-section {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 122, 89, 0.20), transparent 24rem),
    radial-gradient(circle at 82% 16%, rgba(32, 228, 199, 0.20), transparent 24rem),
    linear-gradient(135deg, #07111F, #171239 54%, #04373A);
}

.shore-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.shore-service-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.shore-service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(32, 228, 199, 0.54);
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.24);
}

.shore-service-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 900;
}

.shore-service-card h3 {
  margin: 24px 0 10px;
  color: #fff;
  font-size: 1.18rem;
}

.shore-service-card p {
  color: #C7D8E6;
  font-size: 0.92rem;
}

.shore-service-card.gmail { background: linear-gradient(160deg, rgba(234,67,53,.34), rgba(66,133,244,.18)); }
.shore-service-card.facebook { background: linear-gradient(160deg, rgba(24,119,242,.42), rgba(255,255,255,.06)); }
.shore-service-card.instagram { background: linear-gradient(160deg, rgba(225,48,108,.40), rgba(131,58,180,.20)); }
.shore-service-card.fresh { background: linear-gradient(160deg, rgba(255,122,89,.42), rgba(32,228,199,.12)); }
.shore-service-card.yahoo { background: linear-gradient(160deg, rgba(96,1,210,.44), rgba(255,255,255,.06)); }
.shore-service-card.outlook { background: linear-gradient(160deg, rgba(0,120,212,.42), rgba(32,228,199,.10)); }
.shore-service-card.telegram { background: linear-gradient(160deg, rgba(34,158,217,.42), rgba(255,255,255,.06)); }
.shore-service-card.twitter { background: linear-gradient(160deg, rgba(0,0,0,.50), rgba(109,93,252,.16)); }

.shore-process-section {
  background: #FFFFFF;
}

.shore-final-cta {
  background: linear-gradient(180deg, #FFFFFF, #FFF7EA);
}

.shore-final-cta .orbit-final-card {
  background:
    radial-gradient(circle at top left, rgba(32, 228, 199, 0.28), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255, 122, 89, 0.22), transparent 35%),
    linear-gradient(135deg, #07111F, #271B58 58%, #064348);
}

@media (max-width: 1100px) {
  .shore-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) and (max-height: 780px) {
  .shore-hero .orbit-title { font-size: clamp(2.35rem, 4.5vw, 4.6rem); }
  .shore-logo-mark { width: 82px; height: 82px; font-size: 2.1rem; margin-bottom: 16px; }
  .shore-service-stack a { padding: 9px 10px; }
  .shore-service-stack span { width: 38px; height: 38px; }
}

@media (max-width: 1024px) {
  .shore-hero { min-height: auto; padding: 76px 0; }
  .shore-visual { max-width: 620px; width: 100%; }
}

@media (max-width: 768px) {
  .shore-hero .orbit-title { font-size: clamp(2.5rem, 12vw, 4.1rem); }
  .shore-services-grid { grid-template-columns: 1fr; }
  .shore-service-card { min-height: 210px; }
  .shore-service-stack a { grid-template-columns: 42px 1fr; }
  .shore-service-stack em { grid-column: 2; }
}

/* Vectara-inspired pvapixel homepage hero */
.pv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: clamp(42px, 6vh, 72px) 0 30px;
  background:
    radial-gradient(circle at 10% 22%, rgba(109, 93, 252, 0.20), transparent 28rem),
    radial-gradient(circle at 84% 28%, rgba(32, 228, 199, 0.13), transparent 30rem),
    linear-gradient(180deg, #0E1016 0%, #0D1016 58%, #0A0C11 100%);
  color: #fff;
}

.pv-hero::before,
.pv-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -2;
}

.pv-hero::before {
  inset: 16% -16% 17% 42%;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: clamp(74px, 7.5vw, 112px) clamp(74px, 7.5vw, 112px);
  opacity: .42;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.pv-hero::after {
  left: 0;
  right: 0;
  bottom: 86px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .7;
}

.pv-hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(48px);
  opacity: .38;
  pointer-events: none;
  z-index: -1;
}

.pv-hero-orb-one {
  width: 360px;
  height: 360px;
  right: 18%;
  top: 18%;
  background: #0B70FF;
}

.pv-hero-orb-two {
  width: 300px;
  height: 300px;
  right: -5%;
  bottom: 20%;
  background: #FFB84D;
  opacity: .22;
}

.pv-hero-shell {
  width: 100%;
}

.pv-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.pv-hero-copy {
  max-width: 560px;
  padding-top: 0;
}

.pv-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(14px, 2vh, 20px);
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: rgba(234, 242, 255, .86);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: blur(14px);
}

.pv-hero-kicker span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #D9FF43, #20E4C7 70%, #FFB84D);
  box-shadow: 0 0 0 7px rgba(32,228,199,.12), 0 0 22px rgba(32,228,199,.55);
}

.pv-hero-title {
  max-width: 580px;
  color: #fff;
  font-size: clamp(2.85rem, 4.35vw, 5.15rem);
  line-height: .96;
  letter-spacing: -.072em;
  margin: 0 0 clamp(14px, 2vh, 20px);
}

.pv-hero-lead {
  max-width: 540px;
  color: rgba(236, 242, 250, .78);
  font-size: clamp(.96rem, .28vw + .9rem, 1.08rem);
  line-height: 1.62;
  margin: 0 0 clamp(18px, 3vh, 28px);
}

.pv-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: clamp(18px, 3vh, 28px);
}

.pv-hero-primary,
.pv-hero-secondary {
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem;
}

.pv-hero-primary {
  background: #2383FF;
  color: #fff;
  box-shadow: 0 22px 50px rgba(35, 131, 255, .32);
}

.pv-hero-primary:hover {
  background: #4B99FF;
  color: #fff;
  transform: translateY(-2px);
}

.pv-hero-secondary {
  position: relative;
  background: transparent;
  color: #fff;
  border: 1px solid transparent;
}

.pv-hero-secondary::after {
  content: '›';
  margin-left: 4px;
  font-size: 1.8rem;
  line-height: 0;
  transform: translateY(-1px);
}

.pv-hero-secondary:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
}

.pv-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 520px;
}

.pv-hero-proof div {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(14px);
}

.pv-hero-proof strong,
.pv-hero-proof span {
  display: block;
}

.pv-hero-proof strong {
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(1.08rem, 1vw, 1.36rem);
  line-height: 1;
  margin-bottom: 8px;
}

.pv-hero-proof span {
  color: rgba(231, 238, 249, .62);
  font-size: .76rem;
  line-height: 1.35;
}

.pv-hero-visual {
  position: relative;
  min-height: clamp(420px, 43vw, 590px);
  margin-right: min(-5vw, -46px);
}

.pv-visual-grid {
  position: absolute;
  inset: 7% 0 8% -2%;
  border: 1px solid rgba(255,255,255,.16);
  background-image:
    linear-gradient(rgba(255,255,255,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.20) 1px, transparent 1px);
  background-size: clamp(74px, 7.5vw, 112px) clamp(74px, 7.5vw, 112px);
  opacity: .46;
  mask-image: radial-gradient(ellipse at 52% 48%, #000 44%, rgba(0,0,0,.6) 64%, transparent 86%);
}

.pv-service-cloud {
  position: absolute;
  inset: 3% -6% 2% -4%;
  filter: drop-shadow(0 54px 72px rgba(0,0,0,.42));
  transform: rotate(-2deg);
}

.pv-service-cloud::before,
.pv-service-cloud::after,
.pv-blob {
  content: '';
  position: absolute;
  display: block;
  border-radius: 43% 57% 54% 46% / 45% 42% 58% 55%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.96), rgba(255,255,255,.18) 12%, transparent 20%),
    radial-gradient(circle at 63% 48%, rgba(255,255,255,.44), transparent 18%),
    linear-gradient(135deg, #BDF5FF 0%, #42BBFF 32%, #075CF6 64%, #0035A8 100%);
  box-shadow:
    inset 10px 16px 34px rgba(255,255,255,.34),
    inset -22px -28px 48px rgba(0,37,124,.58),
    0 20px 46px rgba(0,77,255,.24);
}

.pv-service-cloud::before {
  width: 58%;
  height: 45%;
  left: 16%;
  top: 22%;
}

.pv-service-cloud::after {
  width: 47%;
  height: 32%;
  right: 5%;
  top: 25%;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.80), transparent 16%),
    linear-gradient(135deg, #69E2FF 0%, #076DFF 48%, #001B8F 100%);
}

.pv-blob-1 { width: 31%; height: 25%; left: 4%; top: 33%; transform: rotate(-15deg); }
.pv-blob-2 { width: 24%; height: 24%; left: 23%; top: 12%; transform: rotate(22deg); }
.pv-blob-3 { width: 19%; height: 18%; left: 42%; top: 13%; }
.pv-blob-4 { width: 17%; height: 18%; right: 18%; top: 12%; transform: rotate(28deg); }
.pv-blob-5 { width: 24%; height: 21%; right: -1%; top: 25%; transform: rotate(16deg); }
.pv-blob-6 { width: 26%; height: 27%; left: 19%; bottom: 12%; transform: rotate(14deg); }
.pv-blob-7 { width: 30%; height: 20%; left: 41%; bottom: 8%; transform: rotate(-8deg); background: linear-gradient(135deg, #C4F6FF, #1B87FF 58%, #0044D8); }
.pv-blob-8 { width: 26%; height: 23%; right: 8%; bottom: 9%; transform: rotate(18deg); background: linear-gradient(135deg, #FFE083 0%, #FFB22E 36%, #FF6E2E 64%, #0B65FF 100%); }
.pv-blob-9 { width: 15%; height: 16%; left: 48%; top: 44%; background: linear-gradient(135deg, #F7FFF9, #FFE15E 45%, #FF8A2F 100%); }
.pv-blob-10 { width: 13%; height: 15%; left: 35%; top: 47%; background: linear-gradient(135deg, #F6FFFF, #6FEAFF 45%, #187BFF 100%); }
.pv-blob-11 { width: 12%; height: 12%; right: 27%; top: 42%; background: linear-gradient(135deg, #D8FFFF, #FFE267 55%, #FF8A24); }
.pv-blob-12 { width: 14%; height: 12%; left: 10%; bottom: 21%; }
.pv-blob-13 { width: 11%; height: 12%; right: 0; bottom: 24%; }
.pv-blob-14 { width: 12%; height: 13%; right: 22%; bottom: 4%; background: linear-gradient(135deg, #FFEBA3, #FF762E 58%, #0C55D9); }
.pv-blob-15 { width: 10%; height: 10%; left: 11%; top: 24%; background: linear-gradient(135deg, #DFFFFD, #FFE563 52%, #37A3FF); }
.pv-blob-16 { width: 10%; height: 11%; right: 13%; top: 36%; background: linear-gradient(135deg, #A5FAFF, #0D6AFF 68%, #00269E); }

.pv-service-cloud .pv-blob:nth-child(odd) {
  border-radius: 57% 43% 41% 59% / 52% 55% 45% 48%;
}

.pv-play-order {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-42%, -44%);
  width: clamp(106px, 10vw, 148px);
  height: clamp(106px, 10vw, 148px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 31% 22%, rgba(255,255,255,.95), rgba(255,255,255,.32) 28%, transparent 42%),
    linear-gradient(145deg, rgba(124,217,255,.92), rgba(233,251,255,.98) 52%, rgba(255,211,93,.78));
  box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.34);
  z-index: 4;
  transition: transform .25s ease, box-shadow .25s ease;
}

.pv-play-order:hover {
  transform: translate(-42%, -46%) scale(1.035);
  box-shadow: 0 30px 86px rgba(11,112,255,.32), inset 0 0 0 1px rgba(255,255,255,.44);
}

.pv-play-order span {
  position: absolute;
  left: 53%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: clamp(22px, 2vw, 31px) solid transparent;
  border-bottom: clamp(22px, 2vw, 31px) solid transparent;
  border-left: clamp(34px, 3vw, 48px) solid #0E1016;
}

.pv-floating-chip {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(13,16,22,.58);
  color: rgba(255,255,255,.92);
  font-size: .85rem;
  font-weight: 800;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.pv-floating-chip:hover {
  color: #fff;
  border-color: rgba(255,255,255,.34);
  transform: translateY(-2px);
}

.pv-floating-chip span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2383FF, #20E4C7);
  color: #fff;
  font-size: .72rem;
}

.pv-chip-gmail { left: 5%; top: 24%; }
.pv-chip-instagram { right: 7%; top: 20%; }
.pv-chip-facebook { right: 13%; bottom: 18%; }

.pv-hero-service-rail {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  margin-top: clamp(14px, 3vh, 28px);
  padding-top: clamp(16px, 3vh, 26px);
  border-top: 1px solid rgba(255,255,255,.08);
}

.pv-hero-service-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  color: rgba(224, 230, 242, .52);
  font-family: var(--font-heading);
  font-size: clamp(.72rem, .68vw, .9rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: -.02em;
}

.pv-hero-service-rail a:hover {
  color: #fff;
  border-color: rgba(35, 131, 255, .45);
  background: rgba(35, 131, 255, .10);
  transform: translateY(-2px);
}

@media (min-width: 1280px) {
  .pv-hero .container {
    max-width: 1440px;
  }
}

@media (min-width: 1025px) and (max-height: 820px) {
  .pv-hero {
    padding-top: 34px;
  }

  .pv-hero-title {
    font-size: clamp(2.55rem, 4vw, 4.55rem);
  }

  .pv-hero-visual {
    min-height: 390px;
  }

  .pv-hero-proof div {
    padding: 14px;
  }
}

@media (max-width: 1180px) {
  .pv-hero-layout {
    grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  }

  .pv-hero-title {
    font-size: clamp(2.65rem, 4.8vw, 4.65rem);
  }
}

@media (max-width: 1024px) {
  .pv-hero {
    min-height: auto;
    padding: 56px 0 28px;
  }

  .pv-hero::before {
    inset: 38% -18% 12% -18%;
    opacity: .35;
  }

  .pv-hero-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pv-hero-copy {
    max-width: 690px;
    text-align: center;
    margin: 0 auto;
  }

  .pv-hero-kicker,
  .pv-hero-actions {
    justify-content: center;
  }

  .pv-hero-lead,
  .pv-hero-proof {
    margin-left: auto;
    margin-right: auto;
  }

  .pv-hero-visual {
    width: min(100%, 680px);
    min-height: 390px;
    margin: 0 auto;
  }

  .pv-hero-service-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .pv-hero {
    padding: 38px 0 24px;
  }

  .pv-hero::after {
    bottom: 72px;
  }

  .pv-hero-title {
    font-size: clamp(2.12rem, 10.2vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -.058em;
  }

  .pv-hero-lead {
    font-size: .95rem;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  .pv-hero-actions {
    gap: 12px;
  }

  .pv-hero-primary,
  .pv-hero-secondary {
    flex: 1 1 190px;
    min-height: 48px;
    padding: 12px 18px;
  }

  .pv-hero-proof {
    display: none;
  }

  .pv-hero-visual {
    min-height: clamp(245px, 62vw, 360px);
    width: min(108%, 520px);
    left: 50%;
    transform: translateX(-50%);
  }

  .pv-service-cloud {
    inset: 5% -18% 4% -18%;
  }

  .pv-visual-grid {
    inset: 12% -10% 12% -10%;
    background-size: 62px 62px;
  }

  .pv-play-order {
    width: clamp(68px, 19vw, 92px);
    height: clamp(68px, 19vw, 92px);
  }

  .pv-floating-chip {
    display: none;
  }

  .pv-hero-service-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
  }

  .pv-hero-service-rail a {
    min-height: 38px;
    border-radius: 12px;
    font-size: .76rem;
  }

  .pv-hero-service-rail a:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 480px) {
  .pv-hero {
    padding-top: 30px;
  }

  .pv-hero .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .pv-hero-kicker {
    max-width: 100%;
    font-size: .72rem;
    text-align: left;
  }

  .pv-hero-title {
    font-size: clamp(2rem, 11.5vw, 2.85rem);
  }

  .pv-hero-actions {
    align-items: center;
  }

  .pv-hero-primary,
  .pv-hero-secondary {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
    font-size: .92rem;
  }

  .pv-hero-visual {
    min-height: 238px;
    margin-top: 0;
  }

  .pv-service-cloud {
    inset: 7% -30% 3% -30%;
  }
}


/* pvapixel elegant service pages and pricing refresh */
.page-header {
  padding: clamp(74px, 10vw, 118px) 0 clamp(62px, 8vw, 92px);
  background:
    radial-gradient(circle at 16% 18%, rgba(32, 228, 199, 0.24), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(109, 93, 252, 0.34), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(255, 122, 89, 0.16), transparent 26rem),
    linear-gradient(135deg, #07111F 0%, #101B3D 52%, #04373A 100%);
}

.page-header::before {
  background-size: 42px 42px;
  opacity: 0.72;
}

.page-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  border-radius: 24px 34px 24px 34px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 28px 74px rgba(0,0,0,.28);
}

.page-title {
  max-width: 900px;
  margin: 0 auto 16px;
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  letter-spacing: -0.07em;
  line-height: 0.96;
}

.page-subtitle {
  max-width: 760px;
  margin: 0 auto;
  color: #C9D7E8;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
}

.value-strip {
  position: relative;
  z-index: 4;
  margin-top: -28px;
  background: transparent;
  border: 0;
}

.value-strip-content {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(207, 224, 246, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 22px 70px rgba(6, 27, 46, 0.12);
  backdrop-filter: blur(16px);
}

.value-strip-item {
  justify-content: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF, #F7FAFF);
  color: #07111F;
  font-weight: 800;
}

.value-strip-item svg {
  color: var(--shore-violet, #D9FF43);
}

.pricing-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 12%, rgba(109, 93, 252, 0.10), transparent 25rem),
    radial-gradient(circle at 92% 20%, rgba(32, 228, 199, 0.12), transparent 25rem),
    linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
}

.pricing-section .section-intro {
  max-width: 820px;
}

.pricing-section .section-title {
  font-size: clamp(2.15rem, 4vw, 4rem);
}

.pricing-tabs-wrap {
  gap: 30px;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid rgba(207, 224, 246, 0.92);
  border-radius: 34px;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, rgba(109, 93, 252, 0.28), rgba(32, 228, 199, 0.22), rgba(255, 122, 89, 0.18)) border-box;
  box-shadow: 0 28px 90px rgba(6, 27, 46, 0.10);
}

.pricing-tabs {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid rgba(207, 224, 246, 0.92);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF, #F3F7FF);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 36px rgba(6,27,46,.07);
}

.pricing-tab {
  border: 0;
  background: transparent;
  color: #52637A;
  font-weight: 800;
}

.pricing-tab:hover,
.pricing-tab.active {
  background: linear-gradient(135deg, var(--shore-violet, #D9FF43), #4558FF 52%, var(--shore-cyan, #20E4C7));
  color: #fff;
  box-shadow: 0 14px 32px rgba(109, 93, 252, 0.28);
}

.pricing-panel.active {
  animation: pvapixelPanelIn .28s ease both;
}

@keyframes pvapixelPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.pricing-panel-intro {
  margin-bottom: 30px;
}

.pricing-panel-title {
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
  letter-spacing: -0.04em;
}

.pricing-panel-description {
  max-width: 650px;
  margin: 0 auto;
  color: #66758A;
}

.pricing-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 18px;
}

.package-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(207, 224, 246, 0.92);
  background:
    radial-gradient(circle at 100% 0%, rgba(32, 228, 199, 0.14), transparent 12rem),
    linear-gradient(180deg, #FFFFFF, #F9FBFF);
  box-shadow: 0 18px 56px rgba(6, 27, 46, 0.08);
}

.package-card::before {
  height: 6px;
  background: linear-gradient(90deg, var(--shore-violet, #D9FF43), var(--shore-cyan, #20E4C7), var(--shore-coral, #FF7A59));
}

.package-card::after {
  background: radial-gradient(circle, rgba(109, 93, 252, 0.18), transparent 68%);
}

.package-card.featured {
  border-color: rgba(109, 93, 252, 0.48);
  box-shadow: 0 28px 86px rgba(109, 93, 252, 0.16);
  transform: translateY(-4px);
}

.package-name {
  letter-spacing: -0.035em;
}

.package-desc {
  min-height: 0;
  color: #66758A;
}

.package-price {
  padding: 16px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, #F7FAFF, #FFFFFF);
  border: 1px solid rgba(207, 224, 246, 0.82);
}

.package-price-value,
.platform-price .package-price-value {
  background: linear-gradient(135deg, #07111F, var(--shore-violet, #D9FF43) 58%, #0E8C86);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.package-feature {
  align-items: flex-start;
  color: #40536B;
}

.package-feature svg {
  margin-top: 2px;
  color: var(--shore-cyan, #20E4C7);
}

.package-btn {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(109, 93, 252, 0.22);
}

.service-overview-section {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 122, 89, 0.09), transparent 24rem),
    #FFFFFF;
}

.service-overview-grid {
  gap: 20px;
}

.service-overview-card,
.related-card,
.faq-item {
  border-color: rgba(207, 224, 246, 0.88);
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF, #F9FBFF);
  box-shadow: 0 16px 48px rgba(6, 27, 46, 0.06);
}

.service-overview-title {
  letter-spacing: -0.035em;
}

section[style*="var(--deep-forest)"] .btn[data-order] {
  width: auto;
  min-width: 180px;
}

.modal-overlay {
  background: rgba(7, 17, 31, 0.72);
  backdrop-filter: blur(10px);
}

.modal-content {
  max-width: 520px;
  border: 1px solid rgba(207, 224, 246, 0.86);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(32, 228, 199, 0.14), transparent 13rem),
    radial-gradient(circle at 100% 0%, rgba(109, 93, 252, 0.16), transparent 14rem),
    #FFFFFF;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.34);
}

.modal-title {
  font-size: 1.85rem;
  letter-spacing: -0.045em;
}

.modal-option {
  border: 1px solid rgba(207, 224, 246, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(6, 27, 46, 0.05);
}

.modal-option:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: rgba(109, 93, 252, 0.32);
  box-shadow: 0 18px 42px rgba(6, 27, 46, 0.10);
}

.modal-option-icon {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 12px 24px rgba(6,27,46,.12);
}

@media (max-width: 900px) {
  .value-strip-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .page-header { padding: 72px 0 62px; }
  .value-strip { margin-top: -18px; }
  .pricing-tabs { width: 100%; border-radius: 24px; }
  .pricing-tab { flex: 1 1 calc(50% - 8px); }
  .modal-content { border-radius: 24px; }
}

@media (max-width: 520px) {
  .value-strip-content { grid-template-columns: 1fr; }
  .pricing-tab { flex-basis: 100%; }
}


/* pvapixel premium custom-quote service cards */
.premium-access-grid,
.monthly-grid {
  gap: 20px;
}

.monthly-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(207, 224, 246, 0.92);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(32, 228, 199, 0.13), transparent 13rem),
    linear-gradient(180deg, #FFFFFF, #F9FBFF);
  box-shadow: 0 18px 56px rgba(6, 27, 46, 0.08);
}

.monthly-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--shore-violet, #D9FF43), var(--shore-cyan, #20E4C7), var(--shore-coral, #FF7A59));
}

.monthly-card.featured {
  border-color: rgba(109, 93, 252, 0.48);
  box-shadow: 0 28px 86px rgba(109, 93, 252, 0.16);
}

.monthly-card .package-price {
  text-align: center;
}

.monthly-card .package-btn {
  width: 100%;
  margin-top: auto;
}

/* Service-specific branded pricing redesign */
.pricing-section.pricing-theme {
  --service-accent: var(--shore-violet, #D9FF43);
  --service-accent-2: var(--shore-cyan, #20E4C7);
  --service-accent-rgb: 109, 93, 252;
  --service-ink: #07111F;
  --service-soft: rgba(var(--service-accent-rgb), 0.10);
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--service-accent-rgb), 0.14), transparent 28rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--service-accent-2) 18%, transparent), transparent 28rem),
    linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
}

.pricing-section.pricing-theme .section-label {
  border-color: rgba(var(--service-accent-rgb), 0.20);
  background: rgba(var(--service-accent-rgb), 0.09);
  color: var(--service-accent);
}

.pricing-section.pricing-theme .pricing-tabs-wrap {
  border-color: rgba(var(--service-accent-rgb), 0.24);
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 44%, transparent), color-mix(in srgb, var(--service-accent-2) 34%, transparent)) border-box;
  box-shadow: 0 28px 90px rgba(var(--service-accent-rgb), 0.12);
}

.pricing-section.pricing-theme .pricing-tabs {
  border-color: rgba(var(--service-accent-rgb), 0.18);
  background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--service-accent) 7%, #FFFFFF));
}

.pricing-section.pricing-theme .pricing-tab:hover,
.pricing-section.pricing-theme .pricing-tab.active {
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2));
  color: #FFFFFF;
  box-shadow: 0 14px 32px rgba(var(--service-accent-rgb), 0.26);
}

.pricing-section.pricing-theme .package-card,
.pricing-section.pricing-theme .monthly-card {
  border-color: rgba(var(--service-accent-rgb), 0.20);
}

.pricing-section.pricing-theme .package-card::before,
.pricing-section.pricing-theme .monthly-card::before {
  background: linear-gradient(90deg, var(--service-accent), var(--service-accent-2));
}

.pricing-section.pricing-theme .monthly-duration {
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2));
  box-shadow: 0 10px 26px rgba(var(--service-accent-rgb), 0.24);
}

.pricing-section.pricing-theme .package-price-value {
  background: linear-gradient(135deg, var(--service-ink), var(--service-accent) 58%, var(--service-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pricing-section.pricing-theme .package-feature svg {
  color: var(--service-accent);
}

.pricing-section.pricing-theme .package-btn,
.pricing-section.pricing-theme .btn-primary.package-btn {
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2));
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 16px 36px rgba(var(--service-accent-rgb), 0.24);
}

.pricing-section.pricing-theme .package-btn:hover,
.pricing-section.pricing-theme .btn-primary.package-btn:hover {
  filter: saturate(1.08) brightness(1.02);
  transform: translateY(-2px);
}

.pricing-section.pricing-theme-social .pricing-tabs-wrap {
  border-radius: 38px;
  background:
    radial-gradient(circle at 6% 0%, rgba(var(--service-accent-rgb), 0.12), transparent 15rem),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--service-accent-2) 14%, transparent), transparent 16rem),
    #FFFFFF;
}

.pricing-section.pricing-theme-social .package-card {
  padding-top: 50px;
  border-radius: 30px 18px 30px 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--service-accent-2) 18%, transparent), transparent 13rem),
    linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--service-accent) 5%, #FFFFFF));
}

.pricing-section.pricing-theme-social .package-card.featured {
  transform: translateY(-8px) rotate(-0.5deg);
}

.pricing-section.pricing-theme-email .pricing-tabs-wrap {
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #F5FAFF);
}

.pricing-section.pricing-theme-email .pricing-card-grid {
  gap: 14px;
}

.pricing-section.pricing-theme-email .package-card {
  padding-top: 32px;
  border-radius: 18px;
  border-left: 7px solid var(--service-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--service-accent) 8%, #FFFFFF), #FFFFFF 44%);
}

.pricing-section.pricing-theme-email .package-card::before {
  height: 0;
}

.pricing-section.pricing-theme-ai {
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--service-accent-rgb), 0.32), transparent 24rem),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--service-accent-2) 22%, transparent), transparent 24rem),
    linear-gradient(180deg, #07111F 0%, #0B1424 48%, #F8FBFF 48%, #FFFFFF 100%);
}

.pricing-section.pricing-theme-ai .section-title,
.pricing-section.pricing-theme-ai .section-description {
  color: #FFFFFF;
}

.pricing-section.pricing-theme-ai .pricing-tabs-wrap,
.pricing-section.pricing-theme-ai .monthly-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 70%, transparent), color-mix(in srgb, var(--service-accent-2) 46%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.pricing-section.pricing-theme-ai .package-card,
.pricing-section.pricing-theme-ai .monthly-card {
  color: #DCE8F7;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--service-accent-2) 18%, transparent), transparent 14rem),
    linear-gradient(180deg, #101B2C, #0C1625);
  border-color: rgba(255,255,255,0.13);
}

.pricing-section.pricing-theme-ai .package-name,
.pricing-section.pricing-theme-ai .package-desc,
.pricing-section.pricing-theme-ai .package-feature,
.pricing-section.pricing-theme-ai .pricing-panel-title,
.pricing-section.pricing-theme-ai .pricing-panel-description {
  color: #EEF6FF;
}

.pricing-section.pricing-theme-ai .package-price {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.pricing-section.pricing-theme-ai .package-price-value {
  background: linear-gradient(135deg, #FFFFFF, var(--service-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
}

.pricing-section.pricing-theme-creator .pricing-tabs-wrap {
  border-radius: 42px;
  background:
    conic-gradient(from 130deg at 16% 10%, color-mix(in srgb, var(--service-accent) 14%, transparent), transparent 18%, color-mix(in srgb, var(--service-accent-2) 12%, transparent), transparent 48%),
    #FFFFFF;
}

.pricing-section.pricing-theme-creator .package-card,
.pricing-section.pricing-theme-creator .monthly-card {
  border-radius: 22px 36px 22px 36px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 10%, #FFFFFF), #FFFFFF 48%, color-mix(in srgb, var(--service-accent-2) 10%, #FFFFFF));
}

.pricing-section.pricing-theme-creator .package-card:nth-child(even),
.pricing-section.pricing-theme-creator .monthly-card:nth-child(even) {
  border-radius: 36px 22px 36px 22px;
}

.pricing-section.pricing-theme-messaging .pricing-tabs-wrap {
  border-radius: 36px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 6%, #FFFFFF), #FFFFFF);
}

.pricing-section.pricing-theme-messaging .package-card {
  border-radius: 34px 34px 10px 34px;
  background:
    radial-gradient(circle at 18px 18px, rgba(var(--service-accent-rgb), 0.12) 0 7px, transparent 8px),
    linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--service-accent) 5%, #FFFFFF));
}

.pricing-section.pricing-theme-messaging .package-card:nth-child(even) {
  border-radius: 34px 34px 34px 10px;
}

.pricing-section.pricing-theme-developer .pricing-tabs-wrap,
.pricing-section.pricing-theme-developer .package-card {
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, #0B1220, #111827);
  background-size: 22px 22px, auto;
  color: #DDE7F4;
}

.pricing-section.pricing-theme-developer {
  background:
    radial-gradient(circle at 16% 6%, rgba(var(--service-accent-rgb), 0.34), transparent 24rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--service-accent-2) 22%, transparent), transparent 23rem),
    linear-gradient(180deg, #070B12 0%, #111827 52%, #F8FBFF 52%, #FFFFFF 100%);
}

.pricing-section.pricing-theme-developer .section-title,
.pricing-section.pricing-theme-developer .section-description,
.pricing-section.pricing-theme-developer .pricing-panel-title,
.pricing-section.pricing-theme-developer .pricing-panel-description,
.pricing-section.pricing-theme-developer .package-name,
.pricing-section.pricing-theme-developer .package-desc,
.pricing-section.pricing-theme-developer .package-feature {
  color: #F2F7FF;
}

.pricing-section.pricing-theme-developer .package-price {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

.pricing-section.pricing-theme-business .pricing-tabs-wrap {
  border-radius: 20px;
  background: #FFFFFF;
}

.pricing-section.pricing-theme-business .package-card {
  border-radius: 16px;
  border-top: 0;
  border-left: 5px solid var(--service-accent);
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
}

.pricing-section.pricing-theme-business .package-card::before {
  height: 0;
}

.pricing-section.pricing-theme-ecommerce .pricing-tabs-wrap {
  border-style: dashed;
  border-width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent-2) 8%, #FFFFFF), #FFFFFF);
}

.pricing-section.pricing-theme-ecommerce .package-card {
  border-radius: 26px;
  border-style: dashed;
  border-width: 2px;
  background:
    radial-gradient(circle at left 50%, #FFFFFF 0 15px, transparent 16px),
    radial-gradient(circle at right 50%, #FFFFFF 0 15px, transparent 16px),
    linear-gradient(180deg, color-mix(in srgb, var(--service-accent-2) 10%, #FFFFFF), #FFFFFF);
}

.pricing-section.pricing-theme-finance {
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--service-accent) 30%, transparent), transparent 25rem),
    linear-gradient(180deg, #090B10 0%, #151A22 52%, #F7FAFF 52%, #FFFFFF 100%);
}

.pricing-section.pricing-theme-finance .section-title,
.pricing-section.pricing-theme-finance .section-description {
  color: #FFFFFF;
}

.pricing-section.pricing-theme-finance .pricing-tabs-wrap,
.pricing-section.pricing-theme-finance .package-card {
  background:
    linear-gradient(180deg, #171C24, #0F141B) padding-box,
    linear-gradient(135deg, var(--service-accent), #FFFFFF33, var(--service-accent-2)) border-box;
  border: 1px solid transparent;
}

.pricing-section.pricing-theme-finance .pricing-panel-title,
.pricing-section.pricing-theme-finance .pricing-panel-description,
.pricing-section.pricing-theme-finance .package-name,
.pricing-section.pricing-theme-finance .package-desc,
.pricing-section.pricing-theme-finance .package-feature {
  color: #F7F1D6;
}

.pricing-section.pricing-theme-finance .package-price {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.pricing-section.pricing-theme-entertainment .pricing-tabs-wrap {
  border-radius: 34px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--service-accent-rgb), 0.18), transparent 16rem),
    linear-gradient(135deg, #141827, #FFFFFF 44%);
}

.pricing-section.pricing-theme-entertainment .package-card {
  border-radius: 32px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 14%, #111827), color-mix(in srgb, var(--service-accent-2) 9%, #FFFFFF) 42%, #FFFFFF);
}

.pricing-section.pricing-theme-monthly .monthly-grid:not(.premium-access-grid) {
  max-width: 620px;
  margin: 0 auto;
}

.pricing-section.pricing-theme-monthly .monthly-grid:not(.premium-access-grid) .monthly-card {
  padding: clamp(30px, 4vw, 48px);
  text-align: center;
  border-radius: 38px;
}

.pricing-section.pricing-theme-monthly .monthly-duration {
  font-size: 1rem;
}

.pricing-section.pricing-theme-premium .premium-access-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.pricing-section.pricing-theme-premium .monthly-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pricing-section.pricing-theme-premium .monthly-card .package-features {
  flex: 1;
}

.pricing-section.pricing-theme-premium .package-price-value {
  font-size: clamp(1.55rem, 2vw, 2.25rem);
}

@media (max-width: 768px) {
  .pricing-section.pricing-theme-ai,
  .pricing-section.pricing-theme-finance {
    background:
      radial-gradient(circle at 20% 0%, rgba(var(--service-accent-rgb), 0.24), transparent 20rem),
      linear-gradient(180deg, #07111F 0%, #101B2C 38%, #F8FBFF 38%, #FFFFFF 100%);
  }

  .pricing-section.pricing-theme .pricing-tabs-wrap {
    border-radius: 24px;
  }

  .pricing-section.pricing-theme .package-card,
  .pricing-section.pricing-theme .monthly-card {
    border-radius: 22px;
  }
}
/* End service-specific branded pricing redesign */

/* Pro brand and pricing refresh */
:root {
  --brand-ink: #07111F;
  --brand-lime: #D9FF43;
  --brand-cyan: #20E4C7;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-logo-image {
  display: block;
  width: clamp(154px, 16vw, 188px);
  height: auto;
  max-height: 46px;
  transition: transform .2s ease, filter .2s ease;
}

.logo:hover .brand-logo-image {
  transform: translateY(-1px);
  filter: drop-shadow(0 10px 18px rgba(7, 17, 31, .14));
}

.brand-page-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 24px;
  background:
    linear-gradient(var(--brand-tile, #fff), var(--brand-tile, #fff)) padding-box,
    linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) border-box !important;
  border: 2px solid transparent;
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--brand-color) 23%, transparent),
    inset 0 1px 0 rgba(255,255,255,.8);
  transform: rotate(-2deg);
}

.brand-page-icon img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  transform: rotate(2deg);
}

.service-brand-icon {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(7,17,31,.09);
  color: transparent !important;
}

.service-brand-icon::before {
  display: none !important;
}

.service-brand-icon img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.popular-category-card .service-brand-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.popular-category-card .service-brand-icon img {
  width: 31px;
  height: 31px;
}

.pricing-section.pricing-theme {
  --service-contrast: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 9%, rgba(var(--service-accent-rgb), .18), transparent 28rem),
    radial-gradient(circle at 92% 11%, color-mix(in srgb, var(--service-accent-2) 18%, transparent), transparent 25rem),
    linear-gradient(180deg, #FFFFFF 0%, color-mix(in srgb, var(--service-accent) 4%, #F8FBFF) 52%, #FFFFFF 100%) !important;
}

.pricing-section.pricing-theme::before,
.pricing-section.pricing-theme::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(1px);
  pointer-events: none;
}

.pricing-section.pricing-theme::before {
  width: 180px;
  height: 180px;
  left: -54px;
  top: 18%;
  border: 1px solid color-mix(in srgb, var(--service-accent) 30%, transparent);
}

.pricing-section.pricing-theme::after {
  width: 310px;
  height: 310px;
  right: -160px;
  bottom: 5%;
  background: color-mix(in srgb, var(--service-accent-2) 7%, transparent);
}

.pricing-section.pricing-theme .section-intro {
  max-width: 790px;
  margin-inline: auto;
  text-align: center;
}

.pricing-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 auto 17px;
  padding: 9px 16px 9px 9px;
  border: 1px solid color-mix(in srgb, var(--service-accent) 22%, #E5EAF2);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 30px rgba(var(--service-accent-rgb), .10);
  text-align: left;
  backdrop-filter: blur(12px);
}

.pricing-brand-mark {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 15px;
  background: var(--service-icon-tile, #fff);
  border: 1px solid color-mix(in srgb, var(--service-accent) 18%, #E5EAF2);
}

.pricing-brand-mark img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.pricing-brand-lockup small,
.pricing-brand-lockup strong {
  display: block;
  line-height: 1.15;
}

.pricing-brand-lockup small {
  margin-bottom: 3px;
  color: #6B7688;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.pricing-brand-lockup strong {
  color: var(--brand-ink);
  font-size: .93rem;
}

.pricing-section.pricing-theme .section-title,
.pricing-section.pricing-theme .section-description,
.pricing-section.pricing-theme .pricing-panel-title,
.pricing-section.pricing-theme .pricing-panel-description,
.pricing-section.pricing-theme .package-name,
.pricing-section.pricing-theme .package-desc,
.pricing-section.pricing-theme .package-feature {
  color: inherit;
}

.pricing-section.pricing-theme .section-title {
  color: var(--brand-ink) !important;
}

.pricing-section.pricing-theme .section-description {
  color: #66758A !important;
}

.pricing-section.pricing-theme .pricing-tabs-wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.5vw, 30px);
  border: 1px solid transparent !important;
  border-radius: 32px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.88)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 48%, #E5EAF2), color-mix(in srgb, var(--service-accent-2) 42%, #E5EAF2)) border-box !important;
  box-shadow:
    0 30px 90px rgba(7,17,31,.10),
    0 12px 36px rgba(var(--service-accent-rgb), .10) !important;
  backdrop-filter: blur(16px);
}

.pricing-section.pricing-theme .pricing-tabs {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--service-accent) 16%, #DFE5EE) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--service-accent) 6%, #F7F9FC) !important;
  box-shadow: inset 0 1px 4px rgba(7,17,31,.04);
}

.pricing-section.pricing-theme .pricing-tab {
  min-height: 42px;
  border-radius: 13px !important;
  color: #4F5D70;
  font-weight: 800;
}

.pricing-section.pricing-theme .pricing-tab:hover,
.pricing-section.pricing-theme .pricing-tab.active {
  color: var(--service-contrast) !important;
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2)) !important;
  box-shadow: 0 11px 25px rgba(var(--service-accent-rgb), .28) !important;
}

.pricing-section.pricing-theme .pricing-panel {
  padding-top: clamp(25px, 3vw, 40px);
}

.pricing-section.pricing-theme .pricing-panel-intro {
  max-width: 720px;
  margin: 0 auto 23px;
  text-align: center;
}

.pricing-section.pricing-theme .pricing-card-grid,
.pricing-section.pricing-theme .monthly-grid,
.pricing-section.pricing-theme .premium-access-grid {
  gap: 19px;
}

.pricing-section.pricing-theme .package-card,
.pricing-section.pricing-theme .monthly-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100%;
  padding: 33px 27px 27px;
  border: 1px solid color-mix(in srgb, var(--service-accent) 20%, #DEE5EE) !important;
  border-radius: 25px !important;
  color: var(--brand-ink) !important;
  background:
    radial-gradient(circle at 102% -2%, color-mix(in srgb, var(--service-accent-2) 14%, transparent), transparent 12rem),
    linear-gradient(155deg, color-mix(in srgb, var(--service-accent) 6%, #fff), #fff 55%, color-mix(in srgb, var(--service-accent-2) 5%, #fff)) !important;
  box-shadow: 0 15px 42px rgba(7,17,31,.07) !important;
  transform: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pricing-section.pricing-theme .package-card::before,
.pricing-section.pricing-theme .monthly-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 6px !important;
  background: linear-gradient(90deg, var(--service-accent), var(--service-accent-2)) !important;
}

.pricing-section.pricing-theme .package-card::after,
.pricing-section.pricing-theme .monthly-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 72px;
  height: 72px;
  right: 17px;
  top: 20px;
  border-radius: 19px;
  background-color: var(--service-icon-tile, #fff) !important;
  background-image: var(--service-icon) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 36px 36px !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 14%, #E4E9F0);
  opacity: .12;
  pointer-events: none;
  transform: rotate(7deg);
  transition: opacity .22s ease, transform .22s ease;
}

.pricing-section.pricing-theme .package-card > *,
.pricing-section.pricing-theme .monthly-card > * {
  position: relative;
  z-index: 1;
}

.pricing-section.pricing-theme .package-card:hover,
.pricing-section.pricing-theme .monthly-card:hover {
  border-color: color-mix(in srgb, var(--service-accent) 48%, #CBD5E1) !important;
  box-shadow: 0 27px 64px rgba(var(--service-accent-rgb), .17) !important;
  transform: translateY(-7px) !important;
}

.pricing-section.pricing-theme .package-card:hover::after,
.pricing-section.pricing-theme .monthly-card:hover::after {
  opacity: .22;
  transform: rotate(0) scale(1.08);
}

.pricing-section.pricing-theme .package-card.featured,
.pricing-section.pricing-theme .monthly-card.featured {
  border-color: color-mix(in srgb, var(--service-accent) 58%, #CBD5E1) !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--service-accent-2) 21%, transparent), transparent 13rem),
    linear-gradient(150deg, color-mix(in srgb, var(--service-accent) 11%, #fff), #fff 50%, color-mix(in srgb, var(--service-accent-2) 10%, #fff)) !important;
  box-shadow: 0 25px 68px rgba(var(--service-accent-rgb), .18) !important;
}

.pricing-section.pricing-theme .package-card.featured .package-name::before,
.pricing-section.pricing-theme .monthly-card.featured .package-name::before {
  content: "Popular";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 11px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--service-contrast);
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2));
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(var(--service-accent-rgb), .22);
}

.pricing-section.pricing-theme .package-name {
  max-width: calc(100% - 48px);
  color: var(--brand-ink) !important;
}

.pricing-section.pricing-theme .package-desc,
.pricing-section.pricing-theme .package-feature,
.pricing-section.pricing-theme .pricing-panel-description {
  color: #657287 !important;
}

.pricing-section.pricing-theme .package-price {
  margin-block: 20px;
  padding: 16px 17px;
  border: 1px solid color-mix(in srgb, var(--service-accent) 15%, #E4EAF2) !important;
  border-radius: 17px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 9%, #fff), color-mix(in srgb, var(--service-accent-2) 7%, #fff)) !important;
}

.pricing-section.pricing-theme .package-price-value,
.pricing-section.pricing-theme .platform-price .package-price-value {
  color: var(--service-accent) !important;
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.pricing-section.pricing-theme .package-feature svg {
  width: 21px;
  height: 21px;
  padding: 4px;
  border-radius: 999px;
  color: var(--service-accent) !important;
  background: color-mix(in srgb, var(--service-accent) 11%, #fff);
  flex: 0 0 auto;
}

.pricing-section.pricing-theme .package-btn,
.pricing-section.pricing-theme .btn-primary.package-btn {
  min-height: 48px;
  border: 0 !important;
  border-radius: 14px;
  color: var(--service-contrast) !important;
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2)) !important;
  box-shadow: 0 15px 32px rgba(var(--service-accent-rgb), .24) !important;
}

.pricing-section.pricing-theme .package-btn:hover,
.pricing-section.pricing-theme .btn-primary.package-btn:hover {
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-2px);
  box-shadow: 0 19px 38px rgba(var(--service-accent-rgb), .31) !important;
}

@media (max-width: 768px) {
  .brand-logo-image {
    width: 146px;
    max-height: 40px;
  }

  .brand-page-icon {
    width: 66px;
    height: 66px;
    border-radius: 21px;
  }

  .brand-page-icon img {
    width: 37px;
    height: 37px;
  }

  .pricing-section.pricing-theme {
    background:
      radial-gradient(circle at 16% 2%, rgba(var(--service-accent-rgb), .16), transparent 18rem),
      linear-gradient(180deg, #fff, color-mix(in srgb, var(--service-accent) 4%, #F8FBFF), #fff) !important;
  }

  .pricing-brand-lockup {
    max-width: 100%;
  }

  .pricing-section.pricing-theme .pricing-tabs-wrap {
    padding: 15px;
    border-radius: 24px !important;
  }

  .pricing-section.pricing-theme .pricing-tabs {
    width: 100%;
  }

  .pricing-section.pricing-theme .pricing-tab {
    flex: 1 1 calc(50% - 6px);
    padding-inline: 10px;
  }

  .pricing-section.pricing-theme .package-card,
  .pricing-section.pricing-theme .monthly-card {
    padding: 29px 22px 23px;
    border-radius: 22px !important;
  }
}

@media (max-width: 430px) {
  .brand-logo-image {
    width: 137px;
  }

  .pricing-brand-lockup {
    border-radius: 20px;
  }

  .pricing-section.pricing-theme .pricing-tab {
    flex-basis: 100%;
  }

  .pricing-section.pricing-theme .package-card::after,
  .pricing-section.pricing-theme .monthly-card::after {
    width: 60px;
    height: 60px;
    background-size: 30px 30px !important;
  }
}
/* End pro brand and pricing refresh */


/* ===== pvapixel.css ===== */
/*
 * PVA PIXEL — 2026 storefront design system
 * A premium, high-contrast visual layer shared by the complete static site.
 */

:root {
  --white: #ffffff;
  --soft-ivory: #f6f7f2;
  --stone-mist: #eef0e9;
  --soft-mineral: #dfe4da;
  --deep-forest: #090b0d;
  --rich-graphite: #111519;
  --slate-green: #273139;
  --muted-stone: #66717a;
  --light-border: #dce1d8;
  --fine-divider: #e5e9e1;
  --emerald-depth: #0a9b81;
  --premium-green: #22e6b1;
  --champagne-gold: #d9ff43;
  --ink: #090b0d;
  --ink-soft: #13181c;
  --acid: #d9ff43;
  --cyan: #25e7c5;
  --paper: #f6f7f2;
  --paper-2: #eef0e9;
  --text: #111519;
  --text-soft: #66717a;
  --line: rgba(9, 11, 13, .12);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Space Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container-max: 1240px;
  --section-padding: 96px;
  --shadow-sm: 0 8px 24px rgba(9, 11, 13, .06);
  --shadow-md: 0 18px 50px rgba(9, 11, 13, .10);
  --shadow-lg: 0 30px 80px rgba(9, 11, 13, .14);
  --transition-fast: .15s ease;
  --transition-base: .25s cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
::selection { color: var(--ink); background: var(--acid); }

.container {
  width: min(calc(100% - 40px), var(--container-max));
  margin-inline: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.04em;
}
p { margin: 0; }

.top-strip {
  position: relative;
  z-index: 102;
  height: 34px;
  overflow: hidden;
  color: rgba(255,255,255,.72);
  background: #050607;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.top-strip-content {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.top-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.top-strip-item svg { width: 12px; color: var(--acid); }

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  color: #fff;
  background: rgba(9, 11, 13, .88);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(160%);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.navbar.scrolled {
  background: rgba(9, 11, 13, .97);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.navbar-content {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.055em;
  text-transform: lowercase;
}
.logo::after {
  content: '.com';
  margin-left: -8px;
  color: var(--acid);
  font-size: 12px;
  letter-spacing: -.02em;
  transform: translateY(3px);
}
.logo-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(var(--acid), var(--acid)) 5px 5px / 10px 10px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 19px 5px / 10px 10px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 5px 19px / 10px 10px no-repeat,
    linear-gradient(var(--acid), var(--acid)) 19px 19px / 10px 10px no-repeat,
    #151a1e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(217,255,67,.10);
}
.logo-icon svg { display: none; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 650;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }
.nav-link svg { width: 13px; }
.nav-links > .btn { margin-left: 8px; }

.btn {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: var(--ink) !important;
  background: var(--acid) !important;
  border-color: var(--acid) !important;
  box-shadow: 0 10px 30px rgba(217,255,67,.15);
}
.btn-primary:hover { background: #e5ff7d !important; box-shadow: 0 14px 36px rgba(217,255,67,.25); }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(1180px, calc(100vw - 40px));
  max-height: min(72vh, 680px);
  padding: 20px;
  overflow: auto;
  color: var(--text);
  background: rgba(246,247,242,.98);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  box-shadow: 0 34px 100px rgba(0,0,0,.30);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown-grid-services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dropdown-section {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
}
.dropdown-section-title {
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dropdown-section-links { display: grid; gap: 2px; }
.dropdown-item {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: #59636a;
  font-size: 12px;
  line-height: 1.3;
}
.dropdown-item:hover { color: var(--ink); background: rgba(37,231,197,.12); }
.dropdown-view-all {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  color: var(--ink);
  background: var(--acid);
  font-size: 12px;
  font-weight: 900;
}
.mobile-menu-btn { display: none; }

/* Homepage hero */
.pv-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 30%, rgba(37,231,197,.17), transparent 30rem),
    radial-gradient(circle at 20% 90%, rgba(217,255,67,.10), transparent 28rem),
    #090b0d;
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
}
.pv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #090b0d 0%, rgba(9,11,13,.92) 42%, rgba(9,11,13,.15) 100%);
  pointer-events: none;
}
.pv-hero-shell { position: relative; z-index: 2; }
.pv-hero-layout {
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr);
  align-items: center;
  gap: 70px;
  padding: 84px 0 60px;
}
.pv-hero-copy { max-width: 700px; }
.pv-hero-kicker,
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #47736b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pv-hero-kicker { color: var(--acid); }
.pv-hero-kicker span { width: 7px; height: 7px; background: var(--acid); box-shadow: 0 0 0 6px rgba(217,255,67,.10); }
.pv-hero-title {
  max-width: 780px;
  margin: 22px 0 24px;
  color: #fff;
  font-size: clamp(3.6rem, 6.3vw, 6.8rem);
  line-height: .89;
  letter-spacing: -.075em;
}
.pv-hero-title em { color: var(--acid); font-style: normal; }
.pv-hero-lead { max-width: 620px; color: rgba(255,255,255,.62); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.7; }
.pv-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.pv-hero-primary { min-height: 54px; padding-inline: 24px; color: var(--ink); background: var(--acid); }
.pv-hero-primary::after { content: '↗'; font-size: 18px; }
.pv-hero-secondary { min-height: 54px; padding-inline: 24px; color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.pv-hero-secondary:hover { background: rgba(255,255,255,.12); }
.pv-hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 54px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.12); }
.pv-hero-proof div { padding: 16px 18px; background: rgba(9,11,13,.92); }
.pv-hero-proof strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 16px; }
.pv-hero-proof span { color: rgba(255,255,255,.45); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.pv-hero-visual { position: relative; min-height: 510px; }
.pv-visual-grid { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.025); backdrop-filter: blur(10px); }
.pv-visual-grid::before {
  content: 'LIVE CATALOG  /  60+ SERVICES';
  position: absolute;
  inset: 0 0 auto;
  padding: 16px 20px;
  color: rgba(255,255,255,.52);
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.pv-service-cloud { position: absolute; inset: 65px 26px 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv-blob {
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
  opacity: 1 !important;
  animation: none !important;
}
.pv-blob:nth-child(3n+1) { background: linear-gradient(145deg, rgba(217,255,67,.20), rgba(217,255,67,.02)) !important; }
.pv-blob:nth-child(4n+2) { background: linear-gradient(145deg, rgba(37,231,197,.18), rgba(37,231,197,.02)) !important; }
.pv-play-order { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 82px; height: 82px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--ink); background: var(--acid); box-shadow: 0 0 0 16px rgba(217,255,67,.08), 0 20px 60px rgba(0,0,0,.4); }
.pv-play-order span::before { content: 'ORDER'; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.pv-floating-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 10px 13px; color: #fff; background: rgba(14,18,21,.94); border: 1px solid rgba(255,255,255,.13); border-radius: 10px; font-size: 11px; font-weight: 800; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.pv-floating-chip span { display: grid; place-items: center; width: 25px; height: 25px; color: var(--ink); background: var(--acid); border-radius: 6px; font-size: 9px; }
.pv-chip-gmail { top: 94px; left: -22px; }
.pv-chip-instagram { right: -18px; top: 44%; }
.pv-chip-facebook { left: 16px; bottom: 12px; }
.pv-hero-service-rail { display: flex; align-items: center; gap: 0; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.11); }
.pv-hero-service-rail::before { content: 'TRENDING'; flex: 0 0 auto; padding: 17px 24px 17px 0; color: var(--acid); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.pv-hero-service-rail a { flex: 0 0 auto; padding: 17px 22px; color: rgba(255,255,255,.55); border-left: 1px solid rgba(255,255,255,.09); font-size: 11px; font-weight: 750; }
.pv-hero-service-rail a:hover { color: #fff; background: rgba(255,255,255,.05); }

/* Shared content system */
.home-section, .section-padding { position: relative; padding: var(--section-padding) 0; }
.section-intro, .home-heading { max-width: 770px; margin: 0 auto 46px; text-align: center; }
.section-title { margin: 12px 0 14px; font-size: clamp(2.2rem, 4.4vw, 4.6rem); letter-spacing: -.065em; }
.section-description, .section-intro > p, .home-heading > p { color: var(--text-soft); font-size: 16px; }
.split-home-heading { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; text-align: left; align-items: end; }

.home-starter-pricing { background: var(--paper); }
.starter-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.starter-price-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.starter-price-card:hover { z-index: 2; transform: translateY(-7px); border-color: rgba(9,11,13,.35); box-shadow: var(--shadow-lg); }
.starter-price-card.featured { color: #fff; background: var(--ink); border-color: var(--ink); }
.starter-price-card.featured h3, .starter-price-card.featured .starter-price strong { color: #fff; }
.starter-price-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.starter-logo { display: grid; place-items: center; width: 42px; height: 42px; color: var(--ink); background: var(--acid); border-radius: 9px; font-size: 10px; font-weight: 900; }
.starter-badge { padding: 6px 8px; color: #496000; background: rgba(217,255,67,.24); border-radius: 999px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.starter-price-card h3 { min-height: 48px; font-size: 17px; }
.starter-price { display: flex; align-items: baseline; gap: 7px; margin: 18px 0; padding: 15px 0; border: solid var(--line); border-width: 1px 0; }
.starter-price strong { font-family: var(--font-heading); font-size: 34px; letter-spacing: -.05em; }
.starter-price span { color: var(--text-soft); font-size: 11px; font-weight: 700; }
.starter-details { display: grid; gap: 8px; margin: 0 0 20px; }
.starter-details div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px dashed var(--line); }
.starter-details dt, .starter-details dd { margin: 0; font-size: 11px; }
.starter-details dt { color: var(--text-soft); }
.starter-details dd { font-weight: 750; text-align: right; }
.starter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.starter-actions .btn { min-height: 40px; padding: 0 10px; font-size: 11px; }
.starter-view-btn { color: var(--ink); border-color: var(--line); background: transparent; }
.starter-price-card.featured .starter-view-btn { color: #fff; border-color: rgba(255,255,255,.18); }
.starter-pricing-note { margin-top: 22px; color: var(--text-soft); text-align: center; font-size: 12px; }

.home-snapshot { padding: 0; color: #fff; background: var(--ink); border: 0; }
.snapshot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.snapshot-item { padding: 34px 24px; border: 0; border-right: 1px solid rgba(255,255,255,.10); border-radius: 0; background: transparent; text-align: left; }
.snapshot-item:last-child { border-right: 0; }
.snapshot-item strong { color: var(--acid); font-size: 34px; }
.snapshot-item span { display: block; margin-top: 5px; color: rgba(255,255,255,.48); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.home-categories { background: #fff; }
.home-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-category-card {
  position: relative;
  min-height: 245px;
  padding: 26px;
  overflow: hidden;
  color: #fff;
  background: var(--ink-soft) !important;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  transition: transform var(--transition-base), background var(--transition-base);
}
.home-category-card::after { content: '↗'; position: absolute; right: 20px; bottom: 16px; color: var(--acid); font-size: 28px; }
.home-category-card::before { content: ''; position: absolute; width: 170px; height: 170px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(37,231,197,.22), transparent 68%); }
.home-category-card:nth-child(2n)::before { background: radial-gradient(circle, rgba(217,255,67,.20), transparent 68%); }
.home-category-card:hover { transform: translateY(-6px); background: #182026 !important; }
.home-card-kicker { color: var(--acid); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.home-category-card h3 { max-width: 330px; margin: 60px 0 12px; color: #fff; font-size: 26px; }
.home-category-card p { max-width: 300px; color: rgba(255,255,255,.50); font-size: 13px; }

.home-featured-services { background: var(--paper); }
.home-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: solid var(--line); border-width: 1px 0 0 1px; }
.home-service-card { min-height: 210px; padding: 24px; background: transparent; border: solid var(--line); border-width: 0 1px 1px 0; transition: background var(--transition-base); }
.home-service-card:hover { background: #fff; }
.service-brand-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 38px; border-radius: 9px; background: var(--ink) !important; }
.service-brand-icon::after { color: var(--acid) !important; font-size: 10px !important; font-weight: 900; }
.home-service-card h3 { margin-bottom: 9px; font-size: 17px; }
.home-service-card p { color: var(--text-soft); font-size: 12px; line-height: 1.6; }

.home-usecases { color: #fff; background: var(--ink); }
.home-usecases .section-title { color: #fff; }
.home-usecases .section-description { color: rgba(255,255,255,.50); }
.usecase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.usecase-card { min-height: 280px; padding: 24px; border: 1px solid rgba(255,255,255,.11); background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); }
.usecase-card div { color: var(--acid); font-family: var(--font-heading); font-size: 11px; font-weight: 800; }
.usecase-card h3 { margin: 100px 0 14px; color: #fff; font-size: 22px; }
.usecase-card p { color: rgba(255,255,255,.48); font-size: 13px; }

.quality-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.quality-copy .section-title { font-size: clamp(2.6rem, 4vw, 4.7rem); }
.quality-copy .btn { margin-top: 28px; }
.quality-grid { display: grid; grid-template-columns: 1fr 1fr; border: solid var(--line); border-width: 1px 0 0 1px; }
.quality-grid article { min-height: 230px; padding: 24px; border: solid var(--line); border-width: 0 1px 1px 0; }
.quality-grid article > span { display: block; width: 13px; height: 13px; margin-bottom: 68px; background: var(--acid); border: 4px solid var(--ink); }
.quality-grid h3 { margin-bottom: 9px; font-size: 18px; }
.quality-grid p { color: var(--text-soft); font-size: 12px; }

.home-process { background: #fff; }
.process-timeline { counter-reset: process; display: grid; grid-template-columns: repeat(4, 1fr); }
.process-timeline article { position: relative; min-height: 260px; padding: 24px; border-top: 1px solid var(--line); }
.process-timeline article::before { content: ''; position: absolute; top: -5px; left: 24px; width: 9px; height: 9px; background: var(--ink); }
.process-timeline span { color: var(--text-soft); font-size: 10px; font-weight: 900; }
.process-timeline h3 { margin: 82px 0 12px; font-size: 21px; }
.process-timeline p { color: var(--text-soft); font-size: 12px; }

.home-why { background: var(--acid); }
.why-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.home-why .section-label { color: #516300; }
.home-why .section-title { font-size: clamp(3rem, 5vw, 5.8rem); }
.home-why p { max-width: 580px; color: rgba(9,11,13,.65); }
.why-list { display: grid; }
.why-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(9,11,13,.20); }
.why-list strong { font-family: var(--font-heading); }
.why-list span { color: rgba(9,11,13,.62); font-size: 13px; }

.home-faq { background: var(--paper); }
.faq-list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); background: transparent; }
.faq-question { width: 100%; min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0; color: var(--ink); background: transparent; border: 0; text-align: left; font-family: var(--font-heading); font-size: 18px; font-weight: 650; }
.faq-question svg { flex: 0 0 auto; width: 18px; transition: transform var(--transition-base); }
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-answer p { padding: 0 0 26px; color: var(--text-soft); }

.orbit-final-cta { padding: 0 0 80px; background: var(--paper); }
.orbit-final-card { padding: clamp(38px, 6vw, 76px); color: #fff; background: var(--ink); border-radius: 24px; overflow: hidden; }
.orbit-final-card h2 { max-width: 820px; margin: 14px 0; color: #fff; font-size: clamp(2.5rem, 5vw, 5.4rem); }
.orbit-final-card p { max-width: 760px; color: rgba(255,255,255,.52); }
.final-cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cta-btn { min-height: 45px; padding: 0 18px; display: inline-flex; align-items: center; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; font-size: 12px; font-weight: 800; }
.cta-btn:first-child { color: var(--ink); background: var(--acid); border-color: var(--acid); }

/* Interior pages */
.page-header {
  position: relative;
  padding: 94px 0 88px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(37,231,197,.14), transparent 28rem),
    var(--ink);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.page-header::before { content: 'HSTOCK.FIT / DIGITAL CATALOG'; display: block; width: min(calc(100% - 40px), var(--container-max)); margin: 0 auto 24px; color: var(--acid); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.page-header .container { position: relative; }
.page-icon { display: none; }
.page-title { max-width: 930px; color: #fff; font-size: clamp(3.2rem, 6.5vw, 6.6rem); line-height: .92; letter-spacing: -.07em; }
.page-subtitle { max-width: 700px; margin-top: 20px; color: rgba(255,255,255,.54); font-size: 17px; }

.value-strip { color: #fff; background: var(--ink-soft); border-bottom: 1px solid rgba(255,255,255,.08); }
.value-strip-content { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-strip-item { min-height: 66px; display: flex; align-items: center; gap: 10px; padding: 0 20px; color: rgba(255,255,255,.58); border-right: 1px solid rgba(255,255,255,.08); font-size: 11px; font-weight: 700; }
.value-strip-item:first-child { padding-left: 0; }
.value-strip-item svg { width: 15px; color: var(--acid); }

.pricing-section.pricing-theme {
  padding: 94px 0 !important;
  color: var(--text) !important;
  background: var(--paper) !important;
}
.pricing-section .section-title, .pricing-section .section-description { color: inherit !important; }
.pricing-tabs-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px;
  color: var(--text) !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-md) !important;
}
.pricing-tabs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; background: var(--paper-2); border-radius: 13px; }
.pricing-tab { flex: 1 0 auto; min-height: 42px; padding: 0 14px; color: var(--text-soft); background: transparent; border: 0; border-radius: 9px; font-size: 11px; font-weight: 800; }
.pricing-tab.active { color: var(--ink); background: var(--acid); }
.pricing-panel { display: none; padding: 28px 10px 10px; }
.pricing-panel.active { display: block; }
.pricing-panel-intro { margin: 0 0 24px; }
.pricing-panel-title { color: var(--ink) !important; font-size: 28px; }
.pricing-panel-description { margin-top: 8px; color: var(--text-soft) !important; font-size: 13px; }
.packages-grid, .pricing-card-grid, .monthly-grid, .premium-access-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px !important; }
.package-card, .monthly-card {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 22px !important;
  color: var(--text) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.package-card::before, .monthly-card::before { display: none !important; }
.package-card:hover, .monthly-card:hover { transform: translateY(-5px); background: #fff !important; border-color: rgba(9,11,13,.35) !important; }
.package-card.featured, .monthly-card.featured { color: #fff !important; background: var(--ink) !important; border-color: var(--ink) !important; }
.package-name, .monthly-card h3 { color: inherit !important; font-size: 18px; }
.package-desc { min-height: 40px; margin: 9px 0 16px; color: var(--text-soft) !important; font-size: 11px; }
.featured .package-desc { color: rgba(255,255,255,.47) !important; }
.package-price { margin-bottom: 17px; padding: 14px 0 !important; background: transparent !important; border: solid currentColor !important; border-width: 1px 0 !important; border-color: rgba(128,128,128,.24) !important; border-radius: 0 !important; }
.package-price-value { color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; font-family: var(--font-heading); font-size: 30px !important; font-weight: 700; letter-spacing: -.05em; }
.package-price-unit { color: var(--text-soft); font-size: 10px; }
.package-features { flex: 1; display: grid; align-content: start; gap: 8px; margin-bottom: 18px; }
.package-feature { display: flex; gap: 8px; color: var(--text-soft) !important; font-size: 11px; }
.featured .package-feature { color: rgba(255,255,255,.58) !important; }
.package-feature svg { flex: 0 0 auto; width: 13px; color: var(--emerald-depth); }
.package-btn { width: 100%; min-height: 40px; }

.service-overview-section { background: #fff; }
.service-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: solid var(--line); border-width: 1px 0 0 1px; }
.service-overview-card { padding: 30px; border: solid var(--line); border-width: 0 1px 1px 0; background: transparent; border-radius: 0; }
.service-overview-title { margin-bottom: 18px; font-size: 21px; }
.service-overview-text { color: var(--text-soft); font-size: 13px; }
.service-overview-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.service-overview-item { display: flex; gap: 9px; color: var(--text-soft); font-size: 13px; }
.service-overview-item svg { flex: 0 0 auto; width: 14px; color: var(--emerald-depth); }

.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.related-card { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: transform var(--transition-base), border-color var(--transition-base); }
.related-card:hover { transform: translateY(-5px); border-color: var(--ink); }
.related-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 28px; color: var(--ink); background: var(--acid); border-radius: 9px; }
.related-icon svg { width: 18px; }
.related-name { font-size: 16px; }

.why-grid, .contact-grid, .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.why-card, .contact-card, .blog-card { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.why-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; }
.why-number { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); background: var(--acid) !important; border-radius: 9px; font-weight: 900; }
.why-content h3 { margin-bottom: 8px; font-size: 19px; }
.why-content p { color: var(--text-soft); font-size: 13px; }
.contact-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 32px; color: var(--ink); background: var(--acid) !important; border-radius: 10px; }
.contact-icon svg { width: 20px; }
.contact-name { margin-bottom: 8px; font-size: 19px; }
.contact-detail { min-height: 48px; color: var(--text-soft); font-size: 13px; }
.contact-btn { margin-top: 20px; color: var(--ink); font-size: 12px; font-weight: 800; }
.blog-card { padding: 0; overflow: hidden; }
.blog-image { position: relative; height: 160px; background: var(--ink) !important; }
.blog-image::after { content: 'HSTOCK.FIT'; position: absolute; right: 16px; bottom: 12px; color: var(--acid); font-family: var(--font-heading); font-size: 22px; font-weight: 700; letter-spacing: -.05em; }
.blog-image svg { width: 42px; color: var(--acid); }
.blog-content { padding: 22px; }
.blog-category { color: var(--emerald-depth); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.blog-title { margin: 10px 0; font-size: 19px; }
.blog-excerpt { color: var(--text-soft); font-size: 12px; }
.blog-link { display: inline-block; margin-top: 18px; font-size: 11px; font-weight: 900; }

.privacy-content { max-width: 900px; margin: 0 auto; }
.privacy-section { padding: 28px 0; border-bottom: 1px solid var(--line); }
.privacy-section h2 { margin-bottom: 12px; font-size: 25px; }
.privacy-section h3 { margin: 20px 0 8px; font-size: 18px; }
.privacy-section p, .privacy-section li { color: var(--text-soft); }

/* Footer, modal, utilities */
.footer { padding: 76px 0 24px; color: rgba(255,255,255,.54); background: #050607; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .8fr .8fr .8fr; gap: 50px; padding-bottom: 60px; }
.footer .logo { margin-bottom: 20px; }
.footer-brand p { max-width: 400px; font-size: 13px; }
.footer-title { margin-bottom: 18px; color: #fff; font-size: 12px; letter-spacing: .03em; }
.footer-links { display: grid; gap: 9px; }
.footer-link { font-size: 12px; transition: color var(--transition-fast); }
.footer-link:hover { color: var(--acid); }
.footer-bottom { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.09); }
.footer-copyright { font-size: 11px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; }
.footer-social svg { width: 15px; }

.floating-contacts { position: fixed; z-index: 95; right: 18px; bottom: 18px; display: flex; gap: 7px; }
.floating-btn { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--ink) !important; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.floating-btn:hover { color: var(--ink); background: var(--acid) !important; }
.floating-btn svg { width: 18px; }

.modal-overlay { position: fixed; z-index: 999; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5,6,7,.78); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { position: relative; width: min(100%, 520px); padding: 30px; background: var(--paper); border-radius: 20px; box-shadow: 0 40px 120px rgba(0,0,0,.45); transform: translateY(18px); transition: transform var(--transition-base); }
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-close { position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.modal-close svg { width: 16px; }
.modal-title { padding-right: 48px; font-size: 30px; }
.modal-subtitle { margin: 8px 0 22px; color: var(--text-soft); font-size: 13px; }
.modal-options { display: grid; gap: 8px; }
.modal-option { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.modal-option:hover { border-color: var(--ink); }
.modal-option-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px !important; }
.modal-option-icon svg { width: 18px; }
.modal-option-icon-whatsapp { background: #25d366; }
.modal-option-icon-telegram { background: #0088cc; }
.modal-option-icon-email { background: var(--emerald-depth); }
.modal-option-label { font-size: 13px; font-weight: 800; }
.modal-option-value { color: var(--text-soft); font-size: 11px; }
.modal-option-arrow svg { width: 15px; }
.modal-option-checkout {
  color: #fff;
  background: linear-gradient(135deg, #0b5f55, #0d8a73);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(11, 95, 85, .2);
}
.modal-option[hidden] { display: none !important; }
.modal-option-checkout[aria-busy="true"] { pointer-events: none; opacity: .78; }
.modal-option-checkout.checkout-error { background: linear-gradient(135deg, #8b2f2f, #b84040); }
.modal-option-checkout:hover {
  color: #fff;
  background: linear-gradient(135deg, #084f48, #087963);
  border-color: transparent;
  transform: translateY(-1px);
}
.modal-option-checkout .modal-option-label,
.modal-option-checkout .modal-option-value,
.modal-option-checkout .modal-option-arrow svg { color: #fff; }
.modal-option-icon-checkout { background: rgba(255,255,255,.16); }
.modal-option-icon-checkout svg { stroke: #fff; }
.modal-note { margin-top: 16px; color: var(--text-soft); text-align: center; font-size: 10px; font-weight: 700; }

.toast { position: fixed; z-index: 1000; left: 50%; bottom: 24px; padding: 12px 18px; color: #fff; background: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; transform: translateX(-50%); font-size: 12px; box-shadow: var(--shadow-lg); }

.payment-result-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, rgba(13,138,115,.18), transparent 45%), #f4f7f6; }
.payment-result-card { width: min(100%, 680px); padding: clamp(30px, 6vw, 64px); background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 90px rgba(6,27,46,.12); text-align: center; }
.payment-result-card h1 { margin: 16px 0; font-size: clamp(38px, 7vw, 62px); line-height: 1; letter-spacing: -.05em; }
.payment-result-card > p { max-width: 540px; margin: 0 auto; color: var(--text-soft); line-height: 1.7; }
.payment-result-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 50%; }
.payment-result-icon svg { width: 30px; }
.payment-result-icon-success { color: #fff; background: #0d8a73; }
.payment-result-icon-cancelled { color: #805c14; background: #fff1c7; }
.payment-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.blog-empty-section { min-height: 440px; display: grid; align-items: center; background: #f7f9f8; }
.blog-empty-state { max-width: 720px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.blog-empty-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 22px; color: #0d8a73; background: rgba(13,138,115,.1); border-radius: 18px; }
.blog-empty-icon svg { width: 30px; }
.blog-empty-state h2 { margin: 14px 0; font-size: clamp(34px, 6vw, 58px); letter-spacing: -.045em; }
.blog-empty-state > p { max-width: 570px; margin: 0 auto; color: var(--text-soft); line-height: 1.7; }
.blog-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

@media (max-width: 1100px) {
  :root { --section-padding: 80px; }
  .nav-link { padding-inline: 9px; }
  .nav-links > a:nth-last-of-type(-n+2) { display: none; }
  .dropdown-grid-services { grid-template-columns: repeat(4, 1fr); }
  .pv-hero-layout { grid-template-columns: 1fr .8fr; gap: 40px; }
  .starter-pricing-grid, .packages-grid, .pricing-card-grid, .monthly-grid, .premium-access-grid { grid-template-columns: repeat(2, 1fr); }
  .home-service-grid, .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --section-padding: 66px; }
  .container { width: min(calc(100% - 28px), var(--container-max)); }
  .top-strip-item:nth-child(n+2) { display: none; }
  .top-strip-content { justify-content: center; }
  .navbar-content { min-height: 66px; }
  .mobile-menu-btn { width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
  .mobile-menu-btn span { display: block; width: 18px; height: 1px; background: currentColor; transition: transform var(--transition-base), opacity var(--transition-base); }
  .mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links { position: fixed; inset: 100px 12px auto; max-height: calc(100vh - 116px); display: none; padding: 14px; overflow: auto; background: rgba(9,11,13,.98); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
  .nav-links.active { display: grid; }
  .nav-links > a:nth-last-of-type(-n+2) { display: flex; }
  .nav-link { width: 100%; justify-content: space-between; padding-inline: 14px; }
  .nav-links > .btn { width: 100%; margin: 6px 0 0; }
  .dropdown-menu { position: static; width: 100%; max-height: 0; padding: 0; overflow: hidden; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height .35s ease; }
  .dropdown-grid-services { grid-template-columns: 1fr 1fr; padding: 8px 0; }
  .dropdown-section { padding: 11px; color: var(--text); }
  .dropdown-view-all { margin-bottom: 8px; }

  .pv-hero { min-height: auto; }
  .pv-hero-layout { min-height: auto; grid-template-columns: 1fr; gap: 46px; padding: 72px 0 48px; }
  .pv-hero-title { font-size: clamp(3.4rem, 15vw, 5.6rem); }
  .pv-hero-visual { min-height: 420px; }
  .pv-chip-gmail { left: -6px; }
  .pv-chip-instagram { right: -6px; }
  .pv-hero-service-rail { width: calc(100% + 14px); }
  .pv-hero-proof { grid-template-columns: 1fr; }
  .pv-hero-proof div { display: flex; justify-content: space-between; align-items: center; }
  .split-home-heading, .quality-layout, .why-panel { grid-template-columns: 1fr; gap: 28px; }
  .starter-pricing-grid, .home-category-grid, .home-service-grid, .usecase-grid, .quality-grid, .process-timeline, .snapshot-grid, .packages-grid, .pricing-card-grid, .monthly-grid, .premium-access-grid, .related-grid, .service-overview-grid, .why-grid, .contact-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
  .snapshot-item:nth-child(2) { border-right: 0; }
  .snapshot-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.10); }
  .usecase-card { min-height: 230px; }
  .usecase-card h3 { margin-top: 62px; }
  .process-timeline article { min-height: 220px; }
  .process-timeline h3 { margin-top: 60px; }
  .page-header { padding: 70px 0 66px; }
  .page-title { font-size: clamp(3rem, 13vw, 5.4rem); }
  .value-strip-content { grid-template-columns: 1fr 1fr; }
  .value-strip-item { padding: 14px 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .logo { font-size: 19px; }
  .logo-icon { width: 31px; height: 31px; background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px; background-position: 5px 5px, 17px 5px, 5px 17px, 17px 17px; }
  .dropdown-grid-services { grid-template-columns: 1fr; }
  .pv-hero-title { font-size: 3.65rem; }
  .pv-hero-actions { display: grid; }
  .pv-hero-actions .btn { width: 100%; }
  .pv-hero-visual { min-height: 365px; }
  .pv-service-cloud { grid-template-columns: repeat(4, 1fr); inset: 58px 14px 14px; gap: 6px; }
  .pv-floating-chip { padding: 7px 9px; }
  .pv-chip-facebook { left: 5px; bottom: 4px; }
  .starter-pricing-grid, .home-category-grid, .home-service-grid, .usecase-grid, .quality-grid, .process-timeline, .snapshot-grid, .packages-grid, .pricing-card-grid, .monthly-grid, .premium-access-grid, .related-grid, .service-overview-grid, .why-grid, .contact-grid, .blog-grid { grid-template-columns: 1fr; }
  .snapshot-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
  .home-category-card { min-height: 220px; }
  .why-list > div { grid-template-columns: 1fr; gap: 5px; }
  .pricing-tabs-wrap { padding: 8px; }
  .pricing-panel { padding: 24px 2px 2px; }
  .value-strip-content { grid-template-columns: 1fr; }
  .value-strip-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; padding-top: 22px; }
  .floating-contacts { left: 14px; right: 14px; justify-content: flex-end; }
  .modal-content { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Balanced desktop pricing for pages with only one, two, or three plans. */
.packages-grid.pricing-grid-single,
.pricing-card-grid.pricing-grid-single,
.monthly-grid.pricing-grid-single,
.pricing-section .premium-access-grid.pricing-grid-single,
.premium-access-grid.pricing-grid-single {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.packages-grid.pricing-grid-pair,
.pricing-card-grid.pricing-grid-pair,
.monthly-grid.pricing-grid-pair,
.pricing-section .premium-access-grid.pricing-grid-pair,
.premium-access-grid.pricing-grid-pair {
  grid-template-columns: repeat(2, minmax(0, 520px));
  justify-content: center;
}
.packages-grid.pricing-grid-triple,
.pricing-card-grid.pricing-grid-triple,
.monthly-grid.pricing-grid-triple,
.pricing-section .premium-access-grid.pricing-grid-triple,
.premium-access-grid.pricing-grid-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .packages-grid.pricing-grid-pair,
  .pricing-card-grid.pricing-grid-pair,
  .monthly-grid.pricing-grid-pair,
  .pricing-section .premium-access-grid.pricing-grid-pair,
  .premium-access-grid.pricing-grid-pair,
  .packages-grid.pricing-grid-triple,
  .pricing-card-grid.pricing-grid-triple,
  .monthly-grid.pricing-grid-triple,
  .pricing-section .premium-access-grid.pricing-grid-triple,
  .premium-access-grid.pricing-grid-triple {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .packages-grid.pricing-grid-pair,
  .pricing-card-grid.pricing-grid-pair,
  .monthly-grid.pricing-grid-pair,
  .pricing-section .premium-access-grid.pricing-grid-pair,
  .premium-access-grid.pricing-grid-pair,
  .packages-grid.pricing-grid-triple,
  .pricing-card-grid.pricing-grid-triple,
  .monthly-grid.pricing-grid-triple,
  .pricing-section .premium-access-grid.pricing-grid-triple,
  .premium-access-grid.pricing-grid-triple {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ===== pvapixel-extras.css ===== */
.catalog-searchbar {
  position: sticky;
  z-index: 3;
  top: -20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
  margin: -4px -4px 14px;
  padding: 14px;
  background: rgba(246,247,242,.96);
  border-bottom: 1px solid rgba(9,11,13,.12);
  backdrop-filter: blur(16px);
}
.catalog-searchbar label { display: grid; gap: 6px; }
.catalog-searchbar label span {
  color: #58636a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.catalog-searchbar input {
  width: 100%;
  height: 43px;
  padding: 0 14px;
  color: #090b0d;
  background: #fff;
  border: 1px solid rgba(9,11,13,.15);
  border-radius: 10px;
  outline: none;
}
.catalog-searchbar input:focus { border-color: #0a9b81; box-shadow: 0 0 0 3px rgba(37,231,197,.15); }
.catalog-searchbar p { padding-bottom: 10px; color: #66717a; font-size: 10px; font-weight: 800; white-space: nowrap; }
.dropdown-section[hidden], .dropdown-item[hidden] { display: none !important; }
.nav-link.active { color: #fff; background: rgba(255,255,255,.08); }

@media (max-width: 768px) {
  .catalog-searchbar { position: static; grid-template-columns: 1fr; gap: 4px; margin: 6px 0 8px; padding: 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.04); }
  .catalog-searchbar label span, .catalog-searchbar p { color: rgba(255,255,255,.48); }
  .catalog-searchbar p { padding: 0; }
}


/* ===== pvapixel-mobile-v2.css ===== */
/* PVA Pixel v2 — mobile and hero refinement */
html, body { max-width: 100%; overflow-x: clip; }

/* Hand-built homepage catalog console; no raster hero image. */
.pv-hero-visual {
  min-height: 540px;
  display: grid;
  align-items: center;
}
.pv-console-window {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  background: rgba(14, 18, 21, .92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}
.pv-console-top {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pv-console-dots { display: flex; gap: 6px; }
.pv-console-dots i { width: 7px; height: 7px; display: block; border-radius: 50%; background: rgba(255,255,255,.22); }
.pv-console-dots i:first-child { background: #d9ff43; }
.pv-console-status { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.58); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pv-console-status i { width: 7px; height: 7px; border-radius: 50%; background: #25e7c5; box-shadow: 0 0 0 5px rgba(37,231,197,.10); }
.pv-console-body { padding: 22px; }
.pv-console-label { margin-bottom: 12px; color: rgba(255,255,255,.38); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.pv-console-list { display: grid; gap: 8px; }
.pv-console-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.pv-console-row:hover { transform: translateX(4px); background: rgba(255,255,255,.065); border-color: rgba(217,255,67,.32); }
.pv-console-code { width: 42px; height: 42px; display: grid; place-items: center; color: #090b0d; background: #d9ff43; border-radius: 10px; font-size: 10px; font-weight: 950; }
.pv-console-row:nth-child(2) .pv-console-code { background: #25e7c5; }
.pv-console-row:nth-child(3) .pv-console-code { color: #fff; background: #645cff; }
.pv-console-row strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 14px; letter-spacing: -.02em; }
.pv-console-row small { display: block; margin-top: 3px; color: rgba(255,255,255,.42); font-size: 10px; }
.pv-console-row b { color: #d9ff43; font-family: var(--font-heading); font-size: 12px; white-space: nowrap; }
.pv-console-order {
  margin-top: 14px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  color: #090b0d;
  background: linear-gradient(135deg, #d9ff43, #bdfc70);
  border-radius: 15px;
}
.pv-console-order span { display: block; color: rgba(9,11,13,.54); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pv-console-order strong { display: block; margin-top: 3px; color: #090b0d; font-size: 16px; }
.pv-console-order button { min-height: 40px; padding: 0 14px; color: #fff; background: #090b0d; border: 0; border-radius: 10px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.pv-console-footer { min-height: 48px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.38); border-top: 1px solid rgba(255,255,255,.09); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pv-console-footer span::before { content: ''; width: 5px; height: 5px; display: inline-block; margin-right: 7px; background: #25e7c5; border-radius: 50%; vertical-align: 1px; }

/* Informative service trust cards. */
.value-strip { padding: 18px 0; background: #0b0e10 !important; border: 0 !important; }
.value-strip-content { gap: 10px; }
.value-strip-item {
  min-height: 88px;
  padding: 15px !important;
  align-items: flex-start;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px;
}
.value-strip-item svg {
  flex: 0 0 auto;
  width: 30px !important;
  height: 30px;
  padding: 8px;
  color: #090b0d !important;
  background: #d9ff43;
  border-radius: 8px;
}
.value-strip-item > div { min-width: 0; display: grid; gap: 3px; }
.value-strip-item strong { color: #fff; font-family: var(--font-heading); font-size: 12px; line-height: 1.25; letter-spacing: -.01em; }
.value-strip-item span { color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.35; }

/* Contact controls. */
.floating-contacts { padding: 6px; background: rgba(9,11,13,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; backdrop-filter: blur(16px); }
.floating-btn { box-shadow: none; }
.modal-content { max-height: min(720px, calc(100vh - 28px)); overflow-y: auto; }
.modal-option-checkout { min-height: 62px; }

/* Tablet navigation becomes touch-first before it gets crowded. */
@media (max-width: 900px) {
  :root { --section-padding: 72px; }
  .container { width: min(calc(100% - 28px), var(--container-max)); }
  .navbar-content { position: relative; min-height: 66px; }
  .mobile-menu-btn { width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
  .mobile-menu-btn span { display: block; width: 18px; height: 1px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links {
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    max-height: calc(100vh - 92px);
    display: none;
    padding: 12px;
    overflow-y: auto;
    background: rgba(9,11,13,.985);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
  }
  .nav-links.active { display: grid; }
  .nav-links > a:nth-last-of-type(-n+2) { display: flex; }
  .nav-link { width: 100%; min-height: 44px; justify-content: space-between; padding-inline: 13px; }
  .nav-links > .btn { width: 100%; margin: 6px 0 0; }
  .dropdown-menu { position: static; width: 100%; max-height: 0; padding: 0; overflow: hidden; background: transparent; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: max-height .3s ease; }
  .dropdown-grid-services { grid-template-columns: 1fr 1fr; padding: 8px 0; }
  .dropdown-section { padding: 11px; }
  .dropdown-view-all { margin-bottom: 8px; }

  .pv-hero-layout { min-height: auto; grid-template-columns: 1fr; gap: 42px; padding: 68px 0 48px; }
  .pv-hero-copy { max-width: 760px; }
  .pv-hero-visual { min-height: auto; }
  .pv-console-window { max-width: 680px; }
  .split-home-heading, .quality-layout, .why-panel { grid-template-columns: 1fr; gap: 32px; }
  .starter-pricing-grid, .packages-grid, .pricing-card-grid, .monthly-grid, .premium-access-grid, .home-service-grid, .usecase-grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header { padding: 64px 0 60px; }
  .page-title { font-size: clamp(2.8rem, 9vw, 5rem); overflow-wrap: anywhere; }
  .footer-grid { grid-template-columns: 1.25fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / -1; }
}

@media (max-width: 600px) {
  :root { --section-padding: 58px; }
  body { font-size: 15px; }
  .container { width: min(calc(100% - 24px), var(--container-max)); }
  .top-strip { height: 30px; }
  .top-strip-content { min-height: 30px; justify-content: center; }
  .top-strip-item:nth-child(n+2) { display: none; }
  .logo { font-size: 18px; }
  .logo::after { font-size: 10px; }
  .logo-icon { width: 30px; height: 30px; }
  .nav-links { left: -2px; right: -2px; }
  .dropdown-grid-services { grid-template-columns: 1fr; }

  .pv-hero::before { background: linear-gradient(180deg, rgba(9,11,13,.45), #090b0d 75%); }
  .pv-hero-layout { gap: 34px; padding: 52px 0 38px; }
  .pv-hero-title { margin-block: 17px 19px; font-size: clamp(2.9rem, 14vw, 4rem); line-height: .93; }
  .pv-hero-lead { font-size: 14px; }
  .pv-hero-actions { display: grid; margin-top: 26px; }
  .pv-hero-actions .btn { width: 100%; }
  .pv-hero-proof { margin-top: 32px; grid-template-columns: 1fr; }
  .pv-hero-proof div { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
  .pv-hero-proof strong { font-size: 14px; }
  .pv-console-window { border-radius: 16px; }
  .pv-console-body { padding: 14px; }
  .pv-console-row { min-height: 65px; grid-template-columns: 38px 1fr; padding: 10px; }
  .pv-console-code { width: 38px; height: 38px; }
  .pv-console-row b { display: none; }
  .pv-console-order { grid-template-columns: 1fr; }
  .pv-console-order button { width: 100%; }
  .pv-console-footer { padding: 0 14px; overflow-x: auto; justify-content: flex-start; }
  .pv-console-footer span { flex: 0 0 auto; }
  .pv-hero-service-rail { width: calc(100% + 12px); }
  .pv-hero-service-rail::before { padding-right: 14px; }
  .pv-hero-service-rail a { padding-inline: 15px; }

  .section-title { font-size: clamp(2.05rem, 10.5vw, 3rem); }
  .section-description { font-size: 14px; }
  .home-heading, .section-intro { margin-bottom: 32px; }
  .starter-pricing-grid, .packages-grid, .pricing-card-grid, .monthly-grid, .premium-access-grid, .home-category-grid, .home-service-grid, .usecase-grid, .quality-grid, .process-timeline, .snapshot-grid, .related-grid, .service-overview-grid, .why-grid, .contact-grid, .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .starter-price-card, .package-card, .monthly-card { width: 100%; min-width: 0; }
  .starter-price-card h3 { min-height: 0; }
  .home-category-card { min-height: 210px; }
  .usecase-card { min-height: 220px; }
  .quality-grid article { min-height: 195px; }
  .process-timeline article { min-height: 205px; }

  .page-header { padding: 50px 0 46px; }
  .page-header::before { width: min(calc(100% - 24px), var(--container-max)); margin-bottom: 18px; }
  .page-title { font-size: clamp(2.45rem, 12vw, 3.35rem); line-height: .96; }
  .page-subtitle { margin-top: 15px; font-size: 14px; line-height: 1.55; }
  .value-strip { padding: 12px 0; }
  .value-strip-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .value-strip-item { min-height: 102px; display: grid; align-content: start; gap: 9px; padding: 12px !important; }
  .value-strip-item svg { width: 28px !important; height: 28px; }
  .pricing-section.pricing-theme { padding: 58px 0 !important; }
  .pricing-tabs-wrap { padding: 7px; border-radius: 15px !important; }
  .pricing-tabs { scrollbar-width: none; }
  .pricing-tabs::-webkit-scrollbar { display: none; }
  .pricing-tab { min-height: 40px; }
  .pricing-panel { padding: 20px 1px 1px; }
  .pricing-panel-title { font-size: 23px; }
  .service-overview-card { padding: 22px; }

  .why-list > div { grid-template-columns: 1fr; gap: 5px; }
  .footer { padding-top: 58px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 42px; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; padding: 20px 0 10px; }
  .floating-contacts { right: 10px; bottom: 10px; left: auto; }
  .floating-btn { width: 39px; height: 39px; }
  .modal-overlay { padding: 10px; align-items: end; }
  .modal-content { width: 100%; max-height: calc(100vh - 20px); padding: 23px 16px 16px; border-radius: 18px 18px 12px 12px; }
  .modal-title { font-size: 25px; }
  .modal-option { grid-template-columns: 39px minmax(0, 1fr) auto; padding: 10px; }
  .modal-option-icon { width: 39px; height: 39px; }
  .modal-option-value { overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .pv-hero-title { font-size: 2.75rem; }
  .value-strip-content { grid-template-columns: 1fr; }
  .value-strip-item { min-height: auto; grid-template-columns: 28px 1fr; }
}


/* ===== pvapixel-visual-v3.css ===== */
/* PVA Pixel v3 — conflict fixes and service-specific pricing identities */

/* Fix the stretched fixed overlay: only the three buttons receive pointer events. */
.floating-contacts {
  position: fixed !important;
  inset: auto 18px 18px auto !important;
  width: max-content !important;
  height: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}
.floating-contacts .floating-btn {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  pointer-events: auto !important;
  background: rgba(9,11,13,.94) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(12px);
}
.floating-contacts .floating-btn:hover { color: #090b0d !important; background: #fff !important; transform: translateY(-2px) !important; }

/* Keep service headings visible and aligned below the sticky navigation. */
.page-header {
  min-height: 360px !important;
  padding: 78px 0 72px !important;
  display: grid !important;
  align-items: center !important;
}
.page-header .container { position: relative !important; z-index: 2 !important; }
.page-header .page-icon { display: none !important; }
.page-header .page-title {
  display: block !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}
.page-header .page-subtitle { margin: 20px auto 0 !important; text-align: center !important; }

/* Replace the white glass block with a slim, integrated service-information band. */
.value-strip {
  position: relative !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  background: #0b0e10 !important;
  border: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(255,255,255,.06) !important;
}
.value-strip-content {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.value-strip-item {
  min-height: 84px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.value-strip-item:last-child { border-right: 0 !important; }
.value-strip-item svg {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 8px !important;
  color: #d9ff43 !important;
  background: rgba(217,255,67,.09) !important;
  border: 1px solid rgba(217,255,67,.20) !important;
  border-radius: 9px !important;
}
.value-strip-item strong { display: block; color: #fff !important; font-size: 12px !important; }
.value-strip-item span { display: block; color: rgba(255,255,255,.48) !important; font-size: 9px !important; }

/* Softer, neutral actions. Service cards use their own accent only as a detail. */
.btn-primary {
  color: #fff !important;
  background: #151a1e !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
.btn-primary:hover { color: #090b0d !important; background: #fff !important; border-color: #fff !important; box-shadow: none !important; }
.navbar .btn-primary { background: rgba(255,255,255,.08) !important; }
.navbar .btn-primary::before { content: ''; width: 6px; height: 6px; background: #d9ff43; border-radius: 50%; }
.package-btn,
.starter-order-btn {
  position: relative;
  z-index: 2;
  color: #fff !important;
  background: #111519 !important;
  border: 1px solid #111519 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
.package-btn:hover,
.starter-order-btn:hover { color: #111519 !important; background: #fff !important; border-color: #111519 !important; }
.starter-view-btn { position: relative; z-index: 2; pointer-events: auto !important; }

/* Each homepage package gets the visual language of its platform. */
.starter-price-card:nth-child(1) { --home-accent:#E1306C; --home-tint:#FFF0F6; }
.starter-price-card:nth-child(2) { --home-accent:#242424; --home-tint:#F3F3F3; }
.starter-price-card:nth-child(3) { --home-accent:#00AEB8; --home-tint:#EAFDFD; }
.starter-price-card:nth-child(4) { --home-accent:#EA4335; --home-tint:#FFF1EF; }
.starter-price-card:nth-child(5) { --home-accent:#1877F2; --home-tint:#EDF5FF; }
.starter-price-card:nth-child(6) { --home-accent:#111111; --home-tint:#F3F4F4; }
.starter-price-card:nth-child(7) { --home-accent:#FF0000; --home-tint:#FFF0F0; }
.starter-price-card:nth-child(8) { --home-accent:#FF4500; --home-tint:#FFF2ED; }
.starter-price-card,
.starter-price-card.featured {
  color: #111519 !important;
  background: linear-gradient(180deg, var(--home-tint) 0, #fff 42%) !important;
  border: 1px solid color-mix(in srgb, var(--home-accent) 25%, #dfe4da) !important;
  border-top: 4px solid var(--home-accent) !important;
  box-shadow: 0 14px 40px rgba(9,11,13,.055) !important;
}
.starter-price-card h3,
.starter-price-card.featured h3,
.starter-price-card .starter-price strong,
.starter-price-card.featured .starter-price strong { color: #111519 !important; }
.starter-price-card .service-brand-icon { color: #fff !important; background: var(--home-accent) !important; box-shadow: none !important; }
.starter-price-card .starter-badge { color: var(--home-accent) !important; background: color-mix(in srgb, var(--home-accent) 10%, #fff) !important; }
.starter-price-card .starter-price { background: transparent !important; }
.starter-price-card .starter-price strong { color: var(--home-accent) !important; }
.starter-price-card .starter-order-btn { border-color: var(--home-accent) !important; }
.starter-price-card .starter-view-btn { color: #111519 !important; background: #fff !important; border-color: rgba(9,11,13,.16) !important; }
.starter-price-card:hover { transform: translateY(-6px) !important; border-color: var(--home-accent) !important; }

/* Shared per-service foundation; every page inherits its inline brand colors. */
.pricing-section.pricing-theme {
  --accent-soft: color-mix(in srgb, var(--service-accent) 11%, #fff);
  --accent-faint: color-mix(in srgb, var(--service-accent) 5%, #fff);
  background:
    radial-gradient(circle at 12% 5%, color-mix(in srgb, var(--service-accent) 14%, transparent), transparent 26rem),
    linear-gradient(180deg, var(--accent-faint), #f7f8f4 70%) !important;
}
.pricing-section.pricing-theme .pricing-tabs-wrap {
  background: rgba(255,255,255,.84) !important;
  border-color: color-mix(in srgb, var(--service-accent) 24%, #dce1d8) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--service-accent) 9%, transparent) !important;
}
.pricing-section.pricing-theme .pricing-tab.active {
  color: #fff !important;
  background: color-mix(in srgb, var(--service-accent) 82%, #111519) !important;
  box-shadow: none !important;
}
.pricing-section.pricing-theme .package-price-value { color: var(--service-accent) !important; -webkit-text-fill-color: currentColor !important; }
.pricing-section.pricing-theme .package-feature svg { color: var(--service-accent) !important; }
.pricing-section.pricing-theme .package-btn { border-color: var(--service-accent) !important; }
.pricing-section.pricing-theme .package-card.featured,
.pricing-section.pricing-theme .monthly-card.featured {
  color: #fff !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--service-accent) 72%, #111519), #101418) !important;
  border-color: color-mix(in srgb, var(--service-accent) 65%, #111519) !important;
}
.pricing-section.pricing-theme .featured .package-price-value { color: #fff !important; }

/* Social: energetic creator cards with a brand-color top beam. */
.pricing-section.pricing-theme-social .package-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--accent-soft), #fff 46%) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 42px rgba(9,11,13,.075) !important;
}
.pricing-section.pricing-theme-social .package-card::before { content:'' !important; display:block !important; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--service-accent),var(--service-accent-2)); }

/* Email: crisp inbox-style rows with a colored left rail. */
.pricing-section.pricing-theme-email .pricing-card-grid { gap: 12px !important; }
.pricing-section.pricing-theme-email .package-card {
  border: 1px solid #e1e5df !important;
  border-left: 5px solid var(--service-accent) !important;
  border-radius: 11px !important;
  background: linear-gradient(90deg, var(--accent-soft), #fff 38%) !important;
}

/* AI: dark glass workspace, illuminated by each model's brand color. */
.pricing-section.pricing-theme-ai {
  color: #fff !important;
  background:
    radial-gradient(circle at 15% 8%, color-mix(in srgb,var(--service-accent) 38%,transparent), transparent 28rem),
    radial-gradient(circle at 90% 0%, color-mix(in srgb,var(--service-accent-2) 24%,transparent), transparent 24rem),
    #080b10 !important;
}
.pricing-section.pricing-theme-ai .section-title { color:#fff !important; }
.pricing-section.pricing-theme-ai .section-description { color:rgba(255,255,255,.55) !important; }
.pricing-section.pricing-theme-ai .pricing-tabs-wrap { background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.12) !important; backdrop-filter:blur(18px); }
.pricing-section.pricing-theme-ai .pricing-tabs { background:rgba(255,255,255,.06) !important; }
.pricing-section.pricing-theme-ai .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-ai .pricing-panel-description { color:rgba(255,255,255,.48) !important; }
.pricing-section.pricing-theme-ai .package-card,
.pricing-section.pricing-theme-ai .monthly-card { color:#fff !important; background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important; border-color:rgba(255,255,255,.12) !important; box-shadow:none !important; }
.pricing-section.pricing-theme-ai .package-name,
.pricing-section.pricing-theme-ai .package-desc,
.pricing-section.pricing-theme-ai .package-feature { color:inherit !important; }

/* Creator: expressive gradient surfaces and alternating soft corners. */
.pricing-section.pricing-theme-creator .pricing-tabs-wrap { border-radius: 30px 14px 30px 14px !important; }
.pricing-section.pricing-theme-creator .package-card,
.pricing-section.pricing-theme-creator .monthly-card {
  background: linear-gradient(145deg,var(--accent-soft),#fff 52%,color-mix(in srgb,var(--service-accent-2) 8%,#fff)) !important;
  border-radius: 18px 32px 18px 32px !important;
}
.pricing-section.pricing-theme-creator .package-card:nth-child(even),
.pricing-section.pricing-theme-creator .monthly-card:nth-child(even) { border-radius:32px 18px 32px 18px !important; }

/* Messaging: friendly conversation-bubble cards. */
.pricing-section.pricing-theme-messaging .package-card { background:linear-gradient(180deg,var(--accent-soft),#fff) !important; border-radius:24px 24px 7px 24px !important; }
.pricing-section.pricing-theme-messaging .package-card:nth-child(even) { border-radius:24px 24px 24px 7px !important; }
.pricing-section.pricing-theme-messaging .pricing-tab.active { color:#111519 !important; background:var(--service-accent) !important; }

/* Developer: terminal grid and squared technical cards. */
.pricing-section.pricing-theme-developer {
  color:#fff !important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    #090d13 !important;
  background-size:24px 24px !important;
}
.pricing-section.pricing-theme-developer .section-title,
.pricing-section.pricing-theme-developer .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-developer .section-description,
.pricing-section.pricing-theme-developer .pricing-panel-description { color:rgba(255,255,255,.5) !important; }
.pricing-section.pricing-theme-developer .pricing-tabs-wrap,
.pricing-section.pricing-theme-developer .package-card { color:#fff !important; background:#111821 !important; border-color:rgba(255,255,255,.12) !important; border-radius:8px !important; }
.pricing-section.pricing-theme-developer .package-name,
.pricing-section.pricing-theme-developer .package-desc,
.pricing-section.pricing-theme-developer .package-feature { color:inherit !important; }

/* Business: restrained corporate layout with a brand-color rule. */
.pricing-section.pricing-theme-business .pricing-tabs-wrap { border-radius:10px !important; }
.pricing-section.pricing-theme-business .package-card { border-radius:8px !important; border-top:4px solid var(--service-accent) !important; background:#fff !important; }

/* Ecommerce: ticket-like panels with dashed outlines. */
.pricing-section.pricing-theme-ecommerce .package-card { border:2px dashed color-mix(in srgb,var(--service-accent) 38%,#dce1d8) !important; border-radius:18px !important; background:linear-gradient(180deg,var(--accent-soft),#fff 52%) !important; }
.pricing-section.pricing-theme-ecommerce .pricing-tabs-wrap { border-style:dashed !important; border-width:2px !important; }

/* Finance: premium exchange dashboard. */
.pricing-section.pricing-theme-finance {
  color:#fff !important;
  background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--service-accent) 28%,transparent),transparent 25rem),#0a0d12 !important;
}
.pricing-section.pricing-theme-finance .section-title,
.pricing-section.pricing-theme-finance .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-finance .section-description,
.pricing-section.pricing-theme-finance .pricing-panel-description { color:rgba(255,255,255,.5) !important; }
.pricing-section.pricing-theme-finance .pricing-tabs-wrap,
.pricing-section.pricing-theme-finance .package-card { color:#fff !important; background:linear-gradient(145deg,#171c23,#0f1318) !important; border-color:color-mix(in srgb,var(--service-accent) 42%,rgba(255,255,255,.1)) !important; }
.pricing-section.pricing-theme-finance .package-name,
.pricing-section.pricing-theme-finance .package-desc,
.pricing-section.pricing-theme-finance .package-feature { color:inherit !important; }

/* Entertainment: bold neon media cards. */
.pricing-section.pricing-theme-entertainment {
  color:#fff !important;
  background:radial-gradient(circle at 84% 8%,color-mix(in srgb,var(--service-accent) 30%,transparent),transparent 25rem),#10121a !important;
}
.pricing-section.pricing-theme-entertainment .section-title,
.pricing-section.pricing-theme-entertainment .pricing-panel-title { color:#fff !important; }
.pricing-section.pricing-theme-entertainment .section-description,
.pricing-section.pricing-theme-entertainment .pricing-panel-description { color:rgba(255,255,255,.5) !important; }
.pricing-section.pricing-theme-entertainment .pricing-tabs-wrap { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; }
.pricing-section.pricing-theme-entertainment .package-card { color:#fff !important; background:linear-gradient(145deg,color-mix(in srgb,var(--service-accent) 20%,#141722),#141722) !important; border-color:rgba(255,255,255,.12) !important; border-radius:26px !important; }
.pricing-section.pricing-theme-entertainment .package-name,
.pricing-section.pricing-theme-entertainment .package-desc,
.pricing-section.pricing-theme-entertainment .package-feature { color:inherit !important; }

@media (max-width:900px) {
  .value-strip-content { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .value-strip-item:nth-child(2) { border-right:0 !important; }
  .value-strip-item:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.10) !important; }
}

@media (max-width:600px) {
  .floating-contacts { inset:auto 10px 10px auto !important; }
  .floating-contacts .floating-btn { flex-basis:40px !important; width:40px !important; height:40px !important; }
  .value-strip-content { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .value-strip-item { min-height:92px !important; display:grid !important; align-content:center !important; padding:12px !important; }
  .starter-actions { grid-template-columns:1fr !important; }
  .starter-actions .btn { width:100%; }
  .pricing-section.pricing-theme .pricing-tabs-wrap { border-radius:16px !important; }
  .page-header { min-height: 300px !important; padding: 54px 0 48px !important; }
}

@media (max-width:360px) {
  .value-strip-content { grid-template-columns:1fr !important; }
  .value-strip-item { min-height:70px !important; grid-template-columns:32px 1fr !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.10) !important; }
}


/* ===== pvapixel-mobile-fix.css ===== */
/* Mobile navigation containment */
@media (max-width: 900px) {
  .nav-links {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }

  .nav-links > *,
  .nav-links .dropdown,
  .nav-links .dropdown-menu,
  .nav-links .dropdown-menu-services,
  .nav-links .dropdown-grid-services,
  .nav-links .dropdown-section,
  .nav-links .catalog-searchbar,
  .nav-links .catalog-searchbar label,
  .nav-links .catalog-searchbar input {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .nav-links .dropdown-menu,
  .nav-links .dropdown-menu-services {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  .nav-links .dropdown:not(.active) > .dropdown-menu {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .nav-links .dropdown.active > .dropdown-menu-services {
    max-height: min(62dvh, 560px) !important;
    padding: 10px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links .dropdown-grid-services {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nav-links .catalog-searchbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .nav-links .catalog-searchbar input {
    display: block;
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .nav-links .dropdown-grid-services {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .nav-links .dropdown-section {
    width: 100% !important;
  }
}


/* ===== hstock.css ===== */
/* hstock.fit marketplace redesign
   Loaded after the legacy styles so the existing HTML, pricing data and
   checkout logic can stay intact. */

:root {
  --h-purple: #6c3bea;
  --h-purple-dark: #4f25c8;
  --h-purple-soft: #8b5cf6;
  --h-lilac: #f2edff;
  --h-blue: #e6f5ff;
  --h-ink: #15172b;
  --h-copy: #4f566b;
  --h-muted: #7b8192;
  --h-line: #e7e8f0;
  --h-surface: #ffffff;
  --h-soft: #f8f9fd;
  --h-shadow: 0 18px 50px rgba(49, 39, 87, 0.09);
  --deep-forest: #17192b;
  --emerald-depth: #6c3bea;
  --champagne-gold: #8b5cf6;
  --soft-ivory: #f8f9fd;
  --muted-stone: #697085;
  --fine-divider: #e7e8f0;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--h-surface);
}

body {
  margin: 0;
  color: var(--h-ink);
  background: var(--h-surface);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  display: none !important;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo {
  color: var(--h-ink);
  font-family: "Space Grotesk", Inter, ui-sans-serif, sans-serif;
  letter-spacing: -0.025em;
}

p {
  color: var(--h-copy);
}

a {
  color: inherit;
}

::selection {
  color: #fff;
  background: var(--h-purple);
}

.container {
  width: min(1180px, calc(100% - 36px)) !important;
  max-width: 1180px !important;
  margin-inline: auto;
}

.top-strip {
  min-height: 32px !important;
  padding: 0 !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--h-purple-dark), var(--h-purple)) !important;
  border: 0 !important;
}

.top-strip-content {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

.top-strip-item {
  gap: 7px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

.top-strip-item svg {
  width: 13px !important;
  height: 13px !important;
  color: #fff !important;
}

/* Two-tier marketplace header */
.navbar {
  position: sticky !important;
  z-index: 1000 !important;
  top: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border-bottom: 1px solid var(--h-line) !important;
  box-shadow: 0 8px 28px rgba(34, 27, 62, 0.05) !important;
  backdrop-filter: blur(18px);
}

.navbar-content {
  min-height: 0 !important;
  padding: 13px 0 0 !important;
  display: grid !important;
  grid-template-columns: 170px minmax(280px, 1fr) auto;
  grid-template-rows: 44px 45px;
  align-items: center;
  column-gap: 26px;
}

.logo {
  grid-column: 1;
  grid-row: 1;
  width: max-content;
  gap: 9px !important;
  color: var(--h-ink) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none;
}

.logo-icon {
  position: relative;
  width: 33px !important;
  height: 33px !important;
  display: grid !important;
  flex: 0 0 33px;
  place-items: center;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(145deg, var(--h-purple-soft), var(--h-purple-dark)) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 18px rgba(108, 59, 234, 0.24);
}

.logo-icon svg {
  display: none !important;
}

.logo-icon::after {
  content: "H";
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.hstock-search {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 560px;
  margin: 0;
}

.hstock-search-inner {
  height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--h-soft);
  border: 1px solid var(--h-line);
  border-radius: 9px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hstock-search:focus-within .hstock-search-inner {
  background: #fff;
  border-color: rgba(108, 59, 234, 0.5);
  box-shadow: 0 0 0 4px rgba(108, 59, 234, 0.09);
}

.hstock-search input {
  min-width: 0;
  padding: 0 14px;
  color: var(--h-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.hstock-search input::placeholder {
  color: #9297a6;
}

.hstock-search button {
  min-width: 86px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--h-purple), var(--h-purple-dark));
  border: 0;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.hstock-search-results {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(31, 24, 57, 0.16);
}

.hstock-search-results.active {
  display: block;
}

.hstock-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  color: var(--h-ink);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hstock-search-result:hover,
.hstock-search-result:focus {
  color: var(--h-purple-dark);
  background: var(--h-lilac);
}

.hstock-search-result span {
  color: var(--h-muted);
  font-size: 11px;
  font-weight: 600;
}

.hstock-search-empty {
  padding: 14px;
  color: var(--h-muted);
  text-align: center;
  font-size: 13px;
}

.nav-links {
  position: static !important;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 45px;
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border-top: 1px solid #f0eff5;
}

.nav-link {
  position: relative;
  padding: 13px 13px !important;
  color: #62687a !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 18px !important;
  text-decoration: none;
}

.nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--h-purple-dark) !important;
  background: transparent !important;
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  background: var(--h-purple);
  border-radius: 99px;
}

.nav-links > .btn {
  min-height: 32px !important;
  margin-left: auto;
  padding: 7px 17px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
}

.dropdown-toggle svg {
  width: 13px !important;
  height: 13px !important;
}

.dropdown-menu {
  top: calc(100% - 2px) !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(30, 23, 57, 0.16) !important;
}

.dropdown-menu-services {
  width: min(1060px, calc(100vw - 40px)) !important;
  max-height: min(70vh, 680px);
  overflow-y: auto;
}

.catalog-searchbar {
  background: var(--h-soft) !important;
  border-color: var(--h-line) !important;
}

.catalog-searchbar input {
  background: #fff !important;
  border-color: var(--h-line) !important;
}

.dropdown-section-title {
  color: var(--h-purple-dark) !important;
}

.dropdown-item {
  color: var(--h-copy) !important;
  border-radius: 7px !important;
}

.dropdown-item:hover {
  color: var(--h-purple-dark) !important;
  background: var(--h-lilac) !important;
}

.dropdown-view-all {
  color: #fff !important;
  background: linear-gradient(135deg, var(--h-purple), var(--h-purple-dark)) !important;
}

.mobile-menu-btn {
  grid-column: 3;
  grid-row: 1;
}

/* Shared buttons */
.btn,
button.btn,
a.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  transform: translateY(-2px);
}

.btn-primary,
.package-btn,
.starter-order-btn,
.pv-hero-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--h-purple), var(--h-purple-dark)) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 24px rgba(108, 59, 234, 0.2) !important;
}

.btn-secondary,
.starter-view-btn,
.pv-hero-secondary {
  color: var(--h-purple-dark) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
}

/* Reference-inspired homepage hero */
.pv-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 18px !important;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 0 !important;
}

.pv-hero::before,
.pv-hero::after {
  display: none !important;
}

.pv-hero-shell {
  position: relative;
  overflow: hidden;
  padding: 68px 64px 24px !important;
  background:
    radial-gradient(circle at 78% 26%, rgba(139, 92, 246, 0.18), transparent 31%),
    linear-gradient(125deg, #eef8ff 0%, #eff2ff 48%, #f5eaff 100%) !important;
  border: 1px solid rgba(108, 59, 234, 0.08);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(77, 65, 117, 0.08);
}

.pv-hero-layout {
  min-height: 385px;
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr) !important;
  align-items: center !important;
  gap: 50px !important;
}

.pv-hero-copy {
  position: relative;
  z-index: 3;
  max-width: 530px !important;
}

.pv-hero-kicker {
  width: max-content;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px !important;
  padding: 6px 10px;
  color: #4f566b !important;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(108, 59, 234, 0.1);
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.pv-hero-kicker span {
  width: 7px !important;
  height: 7px !important;
  background: var(--h-purple) !important;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(108, 59, 234, 0.1);
}

.pv-hero-title {
  max-width: 560px !important;
  margin: 0 0 18px !important;
  color: var(--h-ink) !important;
  font-size: clamp(2.55rem, 4.9vw, 4.65rem) !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.pv-hero-title em {
  color: var(--h-purple) !important;
  font-style: normal !important;
}

.pv-hero-lead {
  max-width: 510px !important;
  margin: 0 0 25px !important;
  color: var(--h-copy) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.pv-hero-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
}

.pv-hero-proof {
  margin-top: 28px !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 18px !important;
  background: transparent !important;
  border: 0 !important;
}

.pv-hero-proof div {
  min-width: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.pv-hero-proof div::before {
  content: "✓";
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--h-purple);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

.pv-hero-proof strong,
.pv-hero-proof span {
  color: var(--h-copy) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.hstock-hero-art {
  position: relative;
  z-index: 2;
  min-height: 360px;
}

.hstock-hero-art::before {
  content: "";
  position: absolute;
  inset: 37px 28px 25px 54px;
  background:
    radial-gradient(circle at center, rgba(108, 59, 234, 0.16), transparent 58%),
    repeating-radial-gradient(circle at center, rgba(108, 59, 234, 0.09) 0 1px, transparent 1px 24px);
  border-radius: 50%;
}

.hstock-cube {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 166px;
  height: 166px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #7f4bf5, #5425cf);
  border: 7px solid rgba(255, 255, 255, 0.32);
  border-radius: 34px;
  box-shadow: 0 32px 45px rgba(84, 37, 207, 0.3);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 95px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(8deg);
}

.hstock-orbit-icon {
  position: absolute;
  z-index: 4;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #fff;
  border: 5px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(44, 35, 77, 0.16);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.hstock-orbit-icon.facebook {
  top: 16px;
  right: 72px;
  background: #1877f2;
}

.hstock-orbit-icon.instagram {
  top: 62px;
  left: 62px;
  color: #d83b73;
  background: #fff;
  border-color: #fff;
  font-size: 13px;
}

.hstock-orbit-icon.gmail {
  top: 81px;
  right: 9px;
  color: #e94235;
  background: #fff;
}

.hstock-orbit-icon.youtube {
  bottom: 21px;
  left: 69px;
  background: #ff0000;
}

.hstock-orbit-icon.tiktok {
  right: 16px;
  bottom: 29px;
  color: #fff;
  background: #101014;
}

.hstock-orbit-icon.telegram {
  right: 102px;
  bottom: -2px;
  background: #2aabee;
}

.hstock-orbit-icon.x {
  top: 168px;
  right: 5px;
  color: #111;
  background: #fff;
}

.pv-hero-service-rail {
  position: relative !important;
  z-index: 4;
  margin: 34px 0 0 !important;
  padding: 17px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 8px !important;
  background: transparent !important;
  border-top: 1px solid rgba(108, 59, 234, 0.13) !important;
  border-radius: 0 !important;
}

.pv-hero-service-rail a {
  padding: 7px 12px !important;
  color: #575e73 !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(108, 59, 234, 0.1) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.pv-hero-service-rail a:hover {
  color: var(--h-purple-dark) !important;
  background: #fff !important;
}

/* Shared section typography */
.home-section,
.section-padding {
  padding: 72px 0 !important;
  background: #fff;
}

.home-section:nth-of-type(even) {
  background: var(--h-soft);
}

.home-heading,
.section-intro {
  margin-bottom: 34px !important;
}

.section-label,
.home-card-kicker {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  margin: 0 0 10px !important;
  padding: 5px 9px;
  color: var(--h-purple-dark) !important;
  background: var(--h-lilac) !important;
  border: 1px solid rgba(108, 59, 234, 0.12);
  border-radius: 999px;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.section-title {
  max-width: 760px;
  margin: 0 !important;
  color: var(--h-ink) !important;
  font-size: clamp(1.95rem, 3.2vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
}

.section-description {
  max-width: 680px !important;
  margin-top: 13px !important;
  color: var(--h-copy) !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
}

.text-center .section-label,
.section-intro[style*="text-align:center"] .section-label {
  margin-inline: auto !important;
}

/* Homepage category and service cards */
.home-categories {
  padding-top: 58px !important;
  background: #fff !important;
}

.home-category-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.home-category-card {
  position: relative;
  min-height: 200px !important;
  padding: 23px !important;
  overflow: hidden;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 25px rgba(48, 41, 75, 0.035) !important;
  text-decoration: none;
}

.home-category-card::before {
  content: "";
  position: absolute;
  top: -35px;
  right: -30px;
  width: 110px;
  height: 110px;
  background: var(--h-lilac);
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.home-category-card:hover {
  border-color: rgba(108, 59, 234, 0.32) !important;
  box-shadow: var(--h-shadow) !important;
  transform: translateY(-4px);
}

.home-category-card:hover::before {
  transform: scale(1.16);
}

.home-category-card h3 {
  position: relative;
  z-index: 1;
  margin: 3px 0 9px !important;
  color: var(--h-ink) !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
}

.home-category-card p {
  position: relative;
  z-index: 1;
  margin: 0 0 14px !important;
  color: var(--h-copy) !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
}

.home-category-card strong {
  position: relative;
  z-index: 1;
  color: var(--h-purple-dark) !important;
  font-size: 11px !important;
}

.home-category-card.social::before { background: #e7f2ff; }
.home-category-card.email::before { background: #fff0ed; }
.home-category-card.ai::before { background: #e9fbf5; }
.home-category-card.creator::before { background: #f5edff; }
.home-category-card.messaging::before { background: #eaf8ff; }
.home-category-card.business::before { background: #fff6dc; }

.home-starter-pricing {
  background: var(--h-soft) !important;
}

.starter-pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.starter-price-card {
  min-height: 310px !important;
  display: flex !important;
  flex-direction: column;
  padding: 20px !important;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(47, 39, 79, 0.035) !important;
}

.starter-price-card.featured {
  border-color: rgba(108, 59, 234, 0.38) !important;
  box-shadow: 0 14px 35px rgba(108, 59, 234, 0.09) !important;
}

.starter-price-card:hover {
  border-color: rgba(108, 59, 234, 0.36) !important;
  transform: translateY(-4px);
}

.starter-price-card h3 {
  margin: 17px 0 9px !important;
  color: var(--h-ink) !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

.starter-price {
  margin-bottom: 14px !important;
}

.starter-price strong {
  color: var(--h-purple-dark) !important;
  font-size: 26px !important;
}

.starter-price span,
.starter-details dt,
.starter-details dd,
.starter-pricing-note {
  color: var(--h-muted) !important;
  font-size: 11px !important;
}

.starter-badge {
  color: var(--h-purple-dark) !important;
  background: var(--h-lilac) !important;
  border-color: rgba(108, 59, 234, 0.12) !important;
}

.starter-actions {
  margin-top: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 0.72fr;
  gap: 7px !important;
}

.starter-actions .btn {
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
}

.service-brand-icon {
  box-shadow: 0 8px 18px rgba(41, 35, 68, 0.08);
}

.home-snapshot {
  padding: 26px 0 !important;
  background: #fff !important;
}

.snapshot-grid {
  overflow: hidden;
  background: #f6f3ff !important;
  border: 1px solid #ece6ff !important;
  border-radius: 16px !important;
}

.snapshot-item {
  border-color: #e5ddfb !important;
}

.snapshot-item strong {
  color: var(--h-purple-dark) !important;
}

.snapshot-item span {
  color: var(--h-copy) !important;
}

.home-featured-services {
  background: #fff !important;
}

.home-service-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

.home-service-card {
  min-height: 195px !important;
  padding: 20px !important;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  text-decoration: none;
}

.home-service-card:hover {
  border-color: rgba(108, 59, 234, 0.34) !important;
  box-shadow: var(--h-shadow) !important;
  transform: translateY(-4px);
}

.home-service-card h3 {
  margin: 15px 0 8px !important;
  color: var(--h-ink) !important;
  font-size: 15px !important;
}

.home-service-card p {
  color: var(--h-copy) !important;
  font-size: 11px !important;
  line-height: 1.62 !important;
}

.home-usecases,
.home-process,
.home-faq {
  background: var(--h-soft) !important;
}

.home-quality,
.home-why {
  background: #fff !important;
}

.usecase-grid,
.quality-grid,
.process-timeline {
  gap: 14px !important;
}

.usecase-card,
.quality-grid article,
.process-timeline article,
.why-card {
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.usecase-card h3,
.quality-grid h3,
.process-timeline h3,
.why-card h4 {
  color: var(--h-ink) !important;
}

.usecase-card p,
.quality-grid p,
.process-timeline p,
.why-card p {
  color: var(--h-copy) !important;
}

.usecase-card > div,
.process-timeline article > span,
.why-number {
  color: var(--h-purple-dark) !important;
  background: var(--h-lilac) !important;
}

.quality-layout,
.why-panel {
  padding: 42px !important;
  background: linear-gradient(130deg, #f7f5ff, #f0f7ff) !important;
  border: 1px solid #e8e5f3 !important;
  border-radius: 22px !important;
}

.why-panel p,
.why-list span {
  color: var(--h-copy) !important;
}

.why-list > div {
  border-color: var(--h-line) !important;
}

.home-final-cta,
.orbit-final-cta,
.shore-final-cta {
  padding: 58px 0 !important;
  background: #fff !important;
}

.orbit-final-card {
  padding: 54px !important;
  color: var(--h-ink) !important;
  background:
    radial-gradient(circle at 85% 10%, rgba(139, 92, 246, 0.2), transparent 30%),
    linear-gradient(125deg, #ecf8ff, #f4edff) !important;
  border: 1px solid rgba(108, 59, 234, 0.13) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

.orbit-final-card h2,
.orbit-final-card p {
  color: var(--h-ink) !important;
}

.orbit-final-card p {
  color: var(--h-copy) !important;
}

.cta-btn {
  border-radius: 9px !important;
}

/* Interior and service page hero */
.page-header {
  position: relative;
  overflow: hidden;
  padding: 70px 0 64px !important;
  text-align: center;
  background:
    radial-gradient(circle at 77% 13%, rgba(139, 92, 246, 0.18), transparent 28%),
    linear-gradient(125deg, #eef8ff 0%, #f5edff 100%) !important;
  border-bottom: 1px solid rgba(108, 59, 234, 0.1) !important;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 18px auto auto 8%;
  width: 90px;
  height: 90px;
  background-image: radial-gradient(rgba(108, 59, 234, 0.22) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.6;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 17px !important;
  display: grid !important;
  place-items: center;
  border: 6px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 19px !important;
  box-shadow: 0 12px 28px rgba(54, 45, 85, 0.14) !important;
}

.page-icon svg {
  width: 31px !important;
  height: 31px !important;
}

.page-title {
  max-width: 850px;
  margin: 0 auto 13px !important;
  color: var(--h-ink) !important;
  font-size: clamp(2.35rem, 5vw, 4.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.052em !important;
}

.page-subtitle {
  max-width: 720px !important;
  margin: 0 auto !important;
  color: var(--h-copy) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
}

.value-strip {
  padding: 18px 0 !important;
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--h-line) !important;
}

.value-strip-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px !important;
}

.value-strip-item {
  min-width: 0 !important;
  padding: 13px 14px !important;
  background: var(--h-soft);
  border: 1px solid #eef0f5 !important;
  border-radius: 10px;
}

.value-strip-item svg {
  color: var(--h-purple) !important;
}

.value-strip-item strong {
  color: var(--h-ink) !important;
  font-size: 11px !important;
}

.value-strip-item span {
  color: var(--h-muted) !important;
  font-size: 10px !important;
}

/* All pricing variants */
.pricing-section,
.pricing-theme {
  color: var(--h-ink) !important;
  background: var(--h-soft) !important;
}

.pricing-section::before,
.pricing-section::after {
  opacity: 0.2 !important;
}

.pricing-tabs-wrap {
  margin-top: 0 !important;
}

.pricing-tabs {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 30px !important;
  padding: 5px !important;
  overflow-x: auto;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(47, 40, 74, 0.05) !important;
}

.pricing-tab {
  min-height: 36px !important;
  padding: 8px 15px !important;
  color: var(--h-copy) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.pricing-tab:hover {
  color: var(--h-purple-dark) !important;
  background: var(--h-lilac) !important;
}

.pricing-tab.active,
.pricing-tab[aria-selected="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, var(--h-purple), var(--h-purple-dark)) !important;
  box-shadow: 0 8px 18px rgba(108, 59, 234, 0.2) !important;
}

.pricing-panel {
  color: var(--h-ink) !important;
}

.pricing-panel-intro {
  margin-bottom: 22px !important;
  text-align: center;
}

.pricing-panel-title {
  color: var(--h-ink) !important;
  font-size: 24px !important;
}

.pricing-panel-description {
  color: var(--h-copy) !important;
  font-size: 13px !important;
}

.packages-grid,
.pricing-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.package-card {
  position: relative;
  min-width: 0;
  min-height: 330px;
  display: flex !important;
  flex-direction: column;
  padding: 23px !important;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(44, 37, 69, 0.04) !important;
}

.package-card::before {
  background: linear-gradient(90deg, var(--h-purple), var(--h-purple-soft)) !important;
}

.package-card:hover {
  border-color: rgba(108, 59, 234, 0.36) !important;
  box-shadow: var(--h-shadow) !important;
  transform: translateY(-4px) !important;
}

.package-card.featured {
  background: linear-gradient(180deg, #fff 0%, #fbf9ff 100%) !important;
  border-color: rgba(108, 59, 234, 0.45) !important;
  box-shadow: 0 14px 35px rgba(108, 59, 234, 0.09) !important;
}

.package-name {
  color: var(--h-ink) !important;
  font-size: 18px !important;
}

.package-desc,
.package-subtitle {
  color: var(--h-copy) !important;
}

.package-price,
.package-price .amount,
.price,
.price-amount {
  color: var(--h-purple-dark) !important;
}

.package-feature {
  color: var(--h-copy) !important;
  border-color: #efeff5 !important;
  font-size: 12px !important;
}

.package-feature svg {
  color: var(--h-purple) !important;
}

.package-card .package-btn {
  width: 100% !important;
  margin-top: auto !important;
}

.service-overview-section {
  background: #fff !important;
}

.service-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 15px !important;
}

.service-overview-card {
  padding: 26px !important;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(45, 38, 72, 0.035) !important;
}

.service-overview-card:hover {
  border-color: rgba(108, 59, 234, 0.3) !important;
}

.service-overview-title {
  color: var(--h-ink) !important;
}

.service-overview-text,
.service-overview-item,
.service-overview-item span {
  color: var(--h-copy) !important;
}

.service-overview-item svg {
  color: var(--h-purple) !important;
}

.faq-list {
  max-width: 880px !important;
  margin-inline: auto;
}

.faq-item {
  margin-bottom: 9px !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.faq-question {
  color: var(--h-ink) !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.faq-question:hover {
  color: var(--h-purple-dark) !important;
  background: #fbfaff !important;
}

.faq-question svg {
  color: var(--h-purple) !important;
}

.faq-answer p {
  color: var(--h-copy) !important;
}

.related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.related-card {
  padding: 17px !important;
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.related-card:hover {
  border-color: rgba(108, 59, 234, 0.36) !important;
  box-shadow: 0 14px 30px rgba(49, 40, 80, 0.08) !important;
  transform: translateY(-3px);
}

.related-name {
  color: var(--h-ink) !important;
}

.section-padding[style*="background:var(--deep-forest)"],
.section-padding[style*="background: var(--deep-forest)"] {
  margin: 24px auto 64px;
  width: min(1144px, calc(100% - 36px));
  padding: 52px 24px !important;
  background:
    radial-gradient(circle at 86% 20%, rgba(139, 92, 246, 0.2), transparent 30%),
    linear-gradient(125deg, #eef8ff, #f5edff) !important;
  border: 1px solid rgba(108, 59, 234, 0.12);
  border-radius: 22px;
}

.section-padding[style*="background:var(--deep-forest)"] h2,
.section-padding[style*="background: var(--deep-forest)"] h2 {
  color: var(--h-ink) !important;
}

.section-padding[style*="background:var(--deep-forest)"] p,
.section-padding[style*="background: var(--deep-forest)"] p {
  color: var(--h-copy) !important;
}

/* General interior cards, including About, Contact, Blog and policies */
.why-grid,
.contact-grid,
.blog-grid,
.content-grid {
  gap: 15px !important;
}

.contact-card,
.blog-card,
.content-card {
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.contact-card:hover,
.blog-card:hover {
  border-color: rgba(108, 59, 234, 0.3) !important;
  box-shadow: var(--h-shadow) !important;
}

.contact-card h3,
.blog-card h3,
.content-card h2,
.content-card h3 {
  color: var(--h-ink) !important;
}

.contact-card p,
.blog-card p,
.content-card p,
.content-card li {
  color: var(--h-copy) !important;
}

.section-padding [style*="background:var(--soft-ivory)"],
.section-padding [style*="background: var(--soft-ivory)"] {
  background: var(--h-soft) !important;
  border-color: var(--h-line) !important;
}

.section-padding > .container > div[style*="background:var(--deep-forest)"],
.section-padding > .container > div[style*="background: var(--deep-forest)"] {
  color: var(--h-ink) !important;
  background:
    radial-gradient(circle at 85% 12%, rgba(139, 92, 246, 0.2), transparent 30%),
    linear-gradient(125deg, #edf8ff, #f5edff) !important;
  border: 1px solid rgba(108, 59, 234, 0.12);
  box-shadow: none !important;
}

.section-padding > .container > div[style*="background:var(--deep-forest)"] h2,
.section-padding > .container > div[style*="background: var(--deep-forest)"] h2 {
  color: var(--h-ink) !important;
}

.section-padding > .container > div[style*="background:var(--deep-forest)"] p,
.section-padding > .container > div[style*="background: var(--deep-forest)"] p {
  color: var(--h-copy) !important;
}

/* Footer */
.footer {
  padding: 58px 0 22px !important;
  color: var(--h-copy) !important;
  background: #faf9ff !important;
  border-top: 1px solid var(--h-line) !important;
}

.footer::before,
.footer::after {
  display: none !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr repeat(3, 1fr) !important;
  gap: 46px !important;
  padding-bottom: 38px;
}

.footer .logo {
  color: var(--h-ink) !important;
}

.footer-brand p {
  max-width: 330px;
  color: var(--h-copy) !important;
  font-size: 12px !important;
}

.footer-title {
  color: var(--h-ink) !important;
  font-size: 13px !important;
}

.footer-link {
  color: var(--h-copy) !important;
  font-size: 12px !important;
}

.footer-link:hover {
  color: var(--h-purple-dark) !important;
}

.footer-bottom {
  padding-top: 20px !important;
  border-color: var(--h-line) !important;
}

.footer-copyright {
  color: var(--h-muted) !important;
  font-size: 11px !important;
}

.footer-social a {
  color: var(--h-purple-dark) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
}

/* Floating contacts and order modal */
.floating-contacts {
  right: 18px !important;
  bottom: 18px !important;
  gap: 8px !important;
}

.floating-btn {
  width: 46px !important;
  height: 46px !important;
  border: 3px solid #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(36, 29, 61, 0.18) !important;
}

.modal-overlay {
  background: rgba(22, 19, 37, 0.62) !important;
  backdrop-filter: blur(8px);
}

.modal-content {
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 28px 80px rgba(21, 17, 39, 0.25) !important;
}

.modal-title {
  color: var(--h-ink) !important;
}

.modal-subtitle {
  color: var(--h-copy) !important;
}

.modal-option {
  color: var(--h-ink) !important;
  background: #fff !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 12px !important;
}

.modal-option:hover {
  border-color: rgba(108, 59, 234, 0.35) !important;
  background: #fbfaff !important;
}

.modal-option-label {
  color: var(--h-ink) !important;
}

.modal-option-value {
  color: var(--h-muted) !important;
}

.modal-close {
  color: var(--h-copy) !important;
  background: var(--h-soft) !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Tablet */
@media (max-width: 1080px) {
  .navbar-content {
    grid-template-columns: 160px minmax(220px, 1fr) auto;
    column-gap: 18px;
  }

  .nav-link {
    padding-inline: 9px !important;
  }

  .pv-hero-shell {
    padding-inline: 44px !important;
  }

  .starter-pricing-grid,
  .home-service-grid,
  .packages-grid,
  .pricing-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 880px) {
  .top-strip-content {
    justify-content: flex-start;
    gap: 25px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-strip-item:nth-child(n + 3) {
    display: none !important;
  }

  .navbar-content {
    grid-template-columns: 150px minmax(0, 1fr) 42px;
    grid-template-rows: 50px 48px;
    padding-top: 8px !important;
  }

  .logo {
    font-size: 18px !important;
  }

  .hstock-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    padding-bottom: 8px;
  }

  .mobile-menu-btn {
    display: inline-flex !important;
  }

  .nav-links {
    position: fixed !important;
    top: 138px !important;
    right: 18px !important;
    left: 18px !important;
    width: auto !important;
    max-height: calc(100vh - 160px);
    display: none !important;
    flex-direction: column;
    align-items: stretch !important;
    overflow-y: auto;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid var(--h-line) !important;
    border-radius: 16px;
    box-shadow: 0 22px 65px rgba(31, 24, 55, 0.2);
  }

  .nav-links.active {
    display: flex !important;
  }

  .nav-link {
    width: 100%;
    padding: 11px 12px !important;
    border-radius: 8px !important;
  }

  .nav-link.active::after,
  .nav-link[aria-current="page"]::after {
    display: none;
  }

  .nav-links > .btn {
    width: 100%;
    margin: 5px 0 0 !important;
  }

  .dropdown {
    width: 100%;
  }

  .dropdown-toggle {
    display: flex !important;
    justify-content: space-between;
  }

  .dropdown-menu,
  .dropdown-menu-services {
    position: static !important;
    width: 100% !important;
    max-height: none;
    margin: 5px 0 !important;
    box-shadow: none !important;
  }

  .dropdown-grid-services {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pv-hero {
    padding-top: 20px !important;
  }

  .pv-hero-shell {
    padding: 48px 34px 22px !important;
  }

  .pv-hero-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .pv-hero-copy {
    max-width: 650px !important;
  }

  .hstock-hero-art {
    min-height: 315px;
  }

  .hstock-hero-art::before {
    inset: 15px 15% 8px;
  }

  .home-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .starter-pricing-grid,
  .home-service-grid,
  .packages-grid,
  .pricing-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .value-strip-content,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phones */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .container {
    width: min(100% - 24px, 1180px) !important;
  }

  .top-strip {
    min-height: 29px !important;
  }

  .top-strip-content {
    min-height: 29px;
  }

  .top-strip-item:nth-child(n + 2) {
    display: none !important;
  }

  .navbar-content {
    grid-template-columns: 1fr 42px;
    grid-template-rows: 48px 48px;
    column-gap: 8px;
  }

  .logo {
    grid-column: 1;
  }

  .mobile-menu-btn {
    grid-column: 2;
  }

  .nav-links {
    top: 125px !important;
    right: 12px !important;
    left: 12px !important;
  }

  .hstock-search button {
    min-width: 76px;
    padding-inline: 11px;
  }

  .pv-hero {
    padding-top: 12px !important;
  }

  .pv-hero-shell {
    width: calc(100% - 24px) !important;
    padding: 36px 22px 19px !important;
    border-radius: 19px;
  }

  .pv-hero-layout {
    min-height: 0;
  }

  .pv-hero-title {
    font-size: clamp(2.45rem, 12.3vw, 3.55rem) !important;
  }

  .pv-hero-lead {
    font-size: 13px !important;
  }

  .pv-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .pv-hero-actions .btn {
    min-height: 42px !important;
    padding-inline: 11px !important;
    font-size: 11px !important;
  }

  .pv-hero-proof {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hstock-hero-art {
    min-height: 270px;
  }

  .hstock-cube {
    width: 125px;
    height: 125px;
    border-radius: 28px;
    font-size: 72px;
  }

  .hstock-orbit-icon {
    width: 45px;
    height: 45px;
    border-width: 4px;
    border-radius: 14px;
    font-size: 14px;
  }

  .hstock-orbit-icon.facebook { right: 45px; }
  .hstock-orbit-icon.instagram { left: 28px; }
  .hstock-orbit-icon.gmail { right: 0; }
  .hstock-orbit-icon.youtube { left: 28px; }
  .hstock-orbit-icon.telegram { right: 70px; }

  .pv-hero-service-rail {
    margin-top: 20px !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .pv-hero-service-rail a {
    flex: 0 0 auto;
  }

  .home-section,
  .section-padding {
    padding: 52px 0 !important;
  }

  .section-title {
    font-size: 2rem !important;
  }

  .split-home-heading {
    display: block !important;
  }

  .home-category-grid,
  .starter-pricing-grid,
  .packages-grid,
  .pricing-card-grid,
  .service-overview-grid {
    grid-template-columns: 1fr !important;
  }

  .home-category-card {
    min-height: 175px !important;
  }

  .starter-price-card,
  .package-card {
    min-height: 0 !important;
  }

  .home-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-service-card {
    min-height: 184px !important;
    padding: 16px !important;
  }

  .home-service-card h3 {
    font-size: 14px !important;
  }

  .quality-layout,
  .why-panel,
  .orbit-final-card {
    padding: 28px 21px !important;
    border-radius: 18px !important;
  }

  .page-header {
    padding: 53px 0 48px !important;
  }

  .page-title {
    font-size: 2.65rem !important;
  }

  .page-subtitle {
    font-size: 13px !important;
  }

  .value-strip-content,
  .related-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .value-strip-item {
    align-items: flex-start !important;
  }

  .pricing-tabs {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
  }

  .service-overview-card {
    padding: 21px !important;
  }

  .section-padding[style*="background:var(--deep-forest)"],
  .section-padding[style*="background: var(--deep-forest)"] {
    width: calc(100% - 24px);
    margin-bottom: 46px;
    padding-inline: 18px !important;
  }

  .footer {
    padding-top: 45px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-brand {
    grid-column: 1 !important;
  }

  .floating-contacts {
    right: 11px !important;
    bottom: 11px !important;
  }

  .floating-btn {
    width: 42px !important;
    height: 42px !important;
  }

  .modal-content {
    width: calc(100% - 24px) !important;
    padding: 24px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Revision 2: compact marketplace grids and fully contained navigation */
.marketplace-heading {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.marketplace-heading > div {
  min-width: 0;
}

.marketplace-view-all {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: var(--h-purple-dark);
  background: var(--h-lilac);
  border: 1px solid rgba(108, 59, 234, 0.12);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.popular-categories-section {
  padding: 58px 0 46px !important;
  background: #fff !important;
}

.popular-category-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 11px;
}

.popular-category-card {
  min-width: 0;
  min-height: 158px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17px 10px;
  color: var(--h-ink);
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: 13px;
  box-shadow: 0 7px 20px rgba(46, 39, 72, 0.035);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.popular-category-card:hover {
  color: var(--h-ink);
  border-color: rgba(108, 59, 234, 0.35);
  box-shadow: 0 15px 32px rgba(68, 48, 125, 0.1);
  transform: translateY(-4px);
}

.popular-category-card .service-brand-icon,
.popular-all-icon {
  width: 48px !important;
  height: 48px !important;
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 14px !important;
}

.popular-all-icon {
  color: #fff;
  background: linear-gradient(145deg, var(--h-purple-soft), var(--h-purple-dark));
  box-shadow: 0 9px 20px rgba(108, 59, 234, 0.2);
  font-size: 25px;
  line-height: 1;
}

.popular-category-card h3 {
  margin: 0 0 4px !important;
  color: var(--h-ink) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}

.popular-category-card > span:last-child {
  color: var(--h-muted);
  font-size: 9px;
  font-weight: 650;
}

.home-featured-services {
  padding: 56px 0 !important;
  background: var(--h-soft) !important;
}

.home-featured-services .home-service-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.home-featured-services .home-service-card {
  min-width: 0;
  min-height: 224px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px !important;
  overflow: hidden;
}

.home-featured-services .home-service-card h3 {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

.home-featured-services .home-service-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.home-featured-services .home-service-card::after {
  content: "View service →";
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
  color: var(--h-purple-dark);
  border-top: 1px solid #efedf7;
  font-size: 10px;
  font-weight: 800;
}

.home-best-sellers {
  padding: 58px 0 !important;
  background: #fff !important;
}

.home-best-sellers .starter-price-card {
  min-width: 0;
}

.home-best-sellers .starter-pricing-note {
  margin-top: 20px !important;
  padding: 13px 16px !important;
  background: var(--h-soft) !important;
  border: 1px solid var(--h-line) !important;
  border-radius: 10px !important;
}

.dropdown-grid-services,
.dropdown-section,
.dropdown-section-links,
.dropdown-item {
  min-width: 0 !important;
}

.dropdown-item {
  overflow-wrap: anywhere;
}

@media (min-width: 1025px) {
  .mobile-menu-btn {
    display: none !important;
  }

  .dropdown-services {
    position: static !important;
  }

  .dropdown-menu-services {
    position: absolute !important;
    top: 100% !important;
    right: auto !important;
    left: 50% !important;
    width: min(1120px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 660px) !important;
    padding: 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translate(-50%, 10px) !important;
  }

  .dropdown-services:hover > .dropdown-menu-services,
  .dropdown-services.active > .dropdown-menu-services {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
  }

  .dropdown-grid-services {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .dropdown-section {
    padding: 12px !important;
    border-radius: 11px !important;
  }

  .dropdown-section-title {
    margin-bottom: 7px !important;
    font-size: 9px !important;
  }

  .dropdown-item {
    padding: 5px 7px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 1200px) {
  .popular-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-featured-services .home-service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1024px) {
  body.menu-open {
    overflow: hidden;
  }

  .navbar-content {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-rows: 52px 49px !important;
    column-gap: 10px !important;
    padding-top: 5px !important;
  }

  .navbar-content > .logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .mobile-menu-btn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    color: var(--h-purple-dark) !important;
    background: var(--h-lilac) !important;
    border: 1px solid rgba(108, 59, 234, 0.15) !important;
    border-radius: 10px !important;
  }

  .mobile-menu-btn span {
    width: 19px !important;
    height: 2px !important;
    display: block !important;
    background: currentColor !important;
    border-radius: 10px;
  }

  .hstock-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    max-width: none !important;
    padding-bottom: 7px !important;
  }

  .nav-links {
    position: absolute !important;
    top: 100% !important;
    right: 12px !important;
    left: 12px !important;
    z-index: 1400 !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 128px) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--h-ink) !important;
    background: rgba(255, 255, 255, 0.99) !important;
    border: 1px solid var(--h-line) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 24px 55px rgba(30, 23, 55, 0.2) !important;
  }

  .nav-links.active {
    display: flex !important;
  }

  .nav-links > *,
  .nav-links .dropdown {
    width: 100% !important;
    min-width: 0 !important;
  }

  .nav-link {
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 11px !important;
    border-radius: 8px !important;
  }

  .nav-link:hover,
  .nav-link.active,
  .nav-link[aria-current="page"] {
    color: var(--h-purple-dark) !important;
    background: var(--h-lilac) !important;
  }

  .nav-links > .btn {
    width: 100% !important;
    margin: 4px 0 0 !important;
  }

  .dropdown-menu,
  .dropdown-menu-services {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--h-soft) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .dropdown.active > .dropdown-menu-services {
    max-height: min(60dvh, 530px) !important;
    margin: 4px 0 7px !important;
    padding: 9px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .catalog-searchbar {
    display: none !important;
  }

  .dropdown-grid-services {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  .dropdown-section {
    width: 100% !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid var(--h-line) !important;
    border-radius: 9px !important;
  }

  .dropdown-section-title {
    font-size: 9px !important;
  }

  .dropdown-item {
    padding: 5px 6px !important;
    font-size: 11px !important;
  }

  .dropdown-view-all {
    margin-top: 8px !important;
    border-radius: 8px !important;
  }

  .home-featured-services .home-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-best-sellers .starter-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .marketplace-heading {
    align-items: flex-start !important;
  }

  .marketplace-heading .section-title {
    font-size: 1.85rem !important;
  }

  .marketplace-view-all {
    padding: 7px 9px;
    font-size: 9px;
  }

  .popular-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .popular-category-card {
    min-height: 142px;
    padding: 14px 8px;
  }

  .home-featured-services .home-service-grid,
  .home-best-sellers .starter-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .home-featured-services .home-service-card {
    min-height: 210px !important;
    padding: 14px !important;
  }

  .home-best-sellers .starter-price-card {
    min-height: 0 !important;
    padding: 14px !important;
  }

  .home-best-sellers .starter-price-card h3 {
    font-size: 13px !important;
  }

  .home-best-sellers .starter-price strong {
    font-size: 22px !important;
  }

  .home-best-sellers .starter-actions {
    grid-template-columns: 1fr !important;
  }

  .dropdown-grid-services {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 390px) {
  .home-featured-services .home-service-grid,
  .home-best-sellers .starter-pricing-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Revision 3: original service copy, editorial guides, and left-side contacts */
.service-editorial-section {
  background: #fff;
  border-top: 1px solid var(--h-line);
  border-bottom: 1px solid var(--h-line);
}

.service-editorial-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 7vw, 92px);
  align-items: start;
}

.service-editorial-layout > *,
.service-editorial-copy {
  min-width: 0;
}

.service-editorial-copy {
  padding: 28px;
  background: linear-gradient(145deg, #faf9ff, #f2efff);
  border: 1px solid rgba(108, 59, 234, 0.12);
  border-radius: 18px;
}

.service-editorial-copy p {
  margin: 0;
  color: var(--h-copy);
  font-size: 14px;
  line-height: 1.75;
}

.service-editorial-copy h3 {
  margin: 24px 0 7px;
  color: var(--h-ink);
  font-size: 16px;
}

.logo::after {
  content: none !important;
  display: none !important;
}

.navbar .nav-links > .btn-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--h-purple), var(--h-purple-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(108, 59, 234, 0.2) !important;
}

.navbar .nav-links > .btn-primary::before {
  content: none !important;
  display: none !important;
}

.navbar .nav-links > .btn-primary:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--h-purple-dark), #4a22c4) !important;
}

.navbar-content {
  row-gap: 0 !important;
}

.page-header .page-title {
  color: var(--h-ink) !important;
  text-shadow: none !important;
}

.floating-contacts {
  inset: auto auto 18px 18px !important;
  right: auto !important;
  left: 18px !important;
  align-items: flex-start !important;
}

@media (max-width: 760px) {
  .service-editorial-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .service-editorial-copy {
    padding: 22px;
  }
}

@media (max-width: 1024px) {
  .navbar-content {
    height: 106px !important;
    min-height: 106px !important;
  }
}

@media (max-width: 600px) {
  .floating-contacts {
    inset: auto auto 10px 10px !important;
    right: auto !important;
    left: 10px !important;
  }
}

/* Revision 4: clean white brand tiles and professional service pricing */
.brand-page-icon,
.pricing-brand-mark,
.popular-category-card .service-brand-icon,
.home-service-card .service-brand-icon,
.starter-price-card .service-brand-icon {
  color: transparent !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(18, 24, 40, 0.1) !important;
  box-shadow:
    0 10px 24px rgba(18, 24, 40, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.brand-page-icon img,
.pricing-brand-mark img,
.popular-category-card .service-brand-icon img,
.home-service-card .service-brand-icon img,
.starter-price-card .service-brand-icon img {
  display: block !important;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
}

.home-service-card .service-brand-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
  margin: 0 0 20px !important;
  border-radius: 14px !important;
}

.home-service-card .service-brand-icon img {
  width: 28px !important;
  height: 28px !important;
}

.starter-price-card .service-brand-icon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px;
  margin: 0 !important;
  border-radius: 14px !important;
}

.starter-price-card .service-brand-icon img {
  width: 27px !important;
  height: 27px !important;
}

.popular-category-card .service-brand-icon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px;
  border-radius: 15px !important;
}

.popular-category-card .service-brand-icon img {
  width: 30px !important;
  height: 30px !important;
}

.pricing-section.pricing-theme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--h-ink) !important;
  background:
    radial-gradient(circle at 8% 7%, rgba(var(--service-accent-rgb), 0.13), transparent 25rem),
    radial-gradient(circle at 94% 14%, color-mix(in srgb, var(--service-accent-2) 11%, transparent), transparent 24rem),
    linear-gradient(180deg, #ffffff 0%, #f8f9fc 54%, #ffffff 100%) !important;
}

.pricing-section.pricing-theme::before,
.pricing-section.pricing-theme::after {
  display: none !important;
}

.pricing-section.pricing-theme .section-intro {
  max-width: 760px;
  margin: 0 auto 30px !important;
  text-align: center;
}

.pricing-section.pricing-theme .pricing-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 16px;
  padding: 8px 16px 8px 8px;
  color: var(--h-ink);
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 22%, #dfe4ec) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 30px rgba(var(--service-accent-rgb), 0.1) !important;
}

.pricing-section.pricing-theme .pricing-brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px !important;
}

.pricing-section.pricing-theme .pricing-brand-mark img {
  width: 28px;
  height: 28px;
}

.pricing-section.pricing-theme .pricing-brand-lockup small {
  color: var(--h-muted) !important;
}

.pricing-section.pricing-theme .pricing-brand-lockup strong,
.pricing-section.pricing-theme .section-title,
.pricing-section.pricing-theme .pricing-panel-title {
  color: var(--h-ink) !important;
}

.pricing-section.pricing-theme .section-description,
.pricing-section.pricing-theme .pricing-panel-description {
  color: var(--h-copy) !important;
}

.pricing-section.pricing-theme .pricing-tabs-wrap {
  margin: 0 !important;
  padding: clamp(18px, 2.8vw, 32px) !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 24%, #dfe4ec) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 70px rgba(18, 24, 40, 0.09),
    0 8px 24px rgba(var(--service-accent-rgb), 0.07) !important;
}

.pricing-section.pricing-theme .pricing-tabs {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 30px !important;
  padding: 6px !important;
  overflow: visible;
  background: #f4f6f9 !important;
  border: 1px solid #e2e6ed !important;
  border-radius: 15px !important;
  box-shadow: none !important;
}

.pricing-section.pricing-theme .pricing-tab {
  min-height: 40px !important;
  padding: 9px 15px !important;
  color: #536073 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.pricing-section.pricing-theme .pricing-tab:hover {
  color: var(--h-ink) !important;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(18, 24, 40, 0.07) !important;
}

.pricing-section.pricing-theme .pricing-tab.active,
.pricing-section.pricing-theme .pricing-tab[aria-selected="true"] {
  color: var(--service-contrast, #fff) !important;
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2)) !important;
  box-shadow: 0 9px 22px rgba(var(--service-accent-rgb), 0.25) !important;
}

.pricing-section.pricing-theme .pricing-panel {
  padding-top: 0 !important;
  color: var(--h-ink) !important;
}

.pricing-section.pricing-theme .pricing-panel-intro {
  max-width: 720px;
  margin: 0 auto 22px !important;
  text-align: center;
}

.pricing-section.pricing-theme .pricing-panel-title {
  margin-bottom: 7px !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
}

.pricing-section.pricing-theme .pricing-panel-description {
  margin: 0 auto !important;
  font-size: 13px !important;
  line-height: 1.65;
}

.pricing-section.pricing-theme .packages-grid,
.pricing-section.pricing-theme .pricing-card-grid,
.pricing-section.pricing-theme .monthly-grid,
.pricing-section.pricing-theme .premium-access-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 18px !important;
}

.pricing-section.pricing-theme .package-card,
.pricing-section.pricing-theme .monthly-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column;
  padding: 29px 24px 24px !important;
  overflow: hidden;
  color: var(--h-ink) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 5%, #fff), #fff 34%) !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 20%, #dfe4ec) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(18, 24, 40, 0.055) !important;
  transform: none !important;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.pricing-section.pricing-theme .package-card::before,
.pricing-section.pricing-theme .monthly-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 5px !important;
  background: linear-gradient(90deg, var(--service-accent), var(--service-accent-2)) !important;
}

.pricing-section.pricing-theme .package-card::after,
.pricing-section.pricing-theme .monthly-card::after {
  display: none !important;
  content: none !important;
}

.pricing-section.pricing-theme .package-card:hover,
.pricing-section.pricing-theme .monthly-card:hover {
  border-color: color-mix(in srgb, var(--service-accent) 48%, #cbd3df) !important;
  box-shadow:
    0 20px 45px rgba(18, 24, 40, 0.09),
    0 8px 22px rgba(var(--service-accent-rgb), 0.1) !important;
  transform: translateY(-4px) !important;
}

.pricing-section.pricing-theme .package-card.featured,
.pricing-section.pricing-theme .monthly-card.featured {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, #fff), #fff 38%) !important;
  border-color: color-mix(in srgb, var(--service-accent) 54%, #cbd3df) !important;
  box-shadow:
    0 17px 40px rgba(18, 24, 40, 0.08),
    0 7px 22px rgba(var(--service-accent-rgb), 0.11) !important;
}

.pricing-section.pricing-theme .package-card.featured .package-name::before,
.pricing-section.pricing-theme .monthly-card.featured .package-name::before {
  content: "Popular";
  width: fit-content;
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 5px 9px;
  color: var(--service-contrast, #fff);
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2));
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-section.pricing-theme .package-name {
  max-width: none !important;
  margin-bottom: 7px !important;
  color: var(--h-ink) !important;
  font-size: 18px !important;
  line-height: 1.3;
}

.pricing-section.pricing-theme .package-desc,
.pricing-section.pricing-theme .package-feature,
.pricing-section.pricing-theme .package-subtitle {
  color: var(--h-copy) !important;
}

.pricing-section.pricing-theme .package-desc {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  font-size: 12px !important;
  line-height: 1.6;
}

.pricing-section.pricing-theme .package-price {
  margin: 18px 0 !important;
  padding: 14px 15px;
  color: var(--h-ink) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent) 9%, #fff), color-mix(in srgb, var(--service-accent-2) 6%, #fff)) !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 17%, #e1e6ee) !important;
  border-radius: 13px !important;
}

.pricing-section.pricing-theme .package-price-value,
.pricing-section.pricing-theme .platform-price .package-price-value {
  color: var(--service-accent) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 850;
}

.pricing-section.pricing-theme .package-price-unit {
  color: var(--h-muted) !important;
}

.pricing-section.pricing-theme .package-features {
  display: grid;
  gap: 10px;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

.pricing-section.pricing-theme .package-feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0 !important;
  border: 0 !important;
  font-size: 12px !important;
  line-height: 1.5;
}

.pricing-section.pricing-theme .package-feature svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  padding: 3px;
  color: var(--service-accent) !important;
  background: color-mix(in srgb, var(--service-accent) 11%, #fff);
  border-radius: 999px;
}

.pricing-section.pricing-theme .package-btn,
.pricing-section.pricing-theme .btn-primary.package-btn {
  width: 100% !important;
  min-height: 45px !important;
  margin-top: auto !important;
  color: var(--service-contrast, #fff) !important;
  background: linear-gradient(135deg, var(--service-accent), var(--service-accent-2)) !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 11px 24px rgba(var(--service-accent-rgb), 0.21) !important;
}

.pricing-section.pricing-theme .package-btn:hover,
.pricing-section.pricing-theme .btn-primary.package-btn:hover {
  filter: brightness(1.02) saturate(1.04);
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(var(--service-accent-rgb), 0.27) !important;
}

@media (max-width: 980px) {
  .pricing-section.pricing-theme .packages-grid,
  .pricing-section.pricing-theme .pricing-card-grid,
  .pricing-section.pricing-theme .monthly-grid,
  .pricing-section.pricing-theme .premium-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .pricing-section.pricing-theme .pricing-tabs-wrap {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .pricing-section.pricing-theme .pricing-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px !important;
  }

  .pricing-section.pricing-theme .pricing-tab {
    width: 100%;
    padding-inline: 9px !important;
    white-space: normal;
  }

  .pricing-section.pricing-theme .packages-grid,
  .pricing-section.pricing-theme .pricing-card-grid,
  .pricing-section.pricing-theme .monthly-grid,
  .pricing-section.pricing-theme .premium-access-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pricing-section.pricing-theme .package-card,
  .pricing-section.pricing-theme .monthly-card {
    padding: 26px 20px 21px !important;
  }
}

@media (max-width: 390px) {
  .pricing-section.pricing-theme .pricing-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Revision 5: visible official service logo on every pricing card */
.pricing-section.pricing-theme .package-card::after,
.pricing-section.pricing-theme .monthly-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 17px;
  right: 17px;
  width: 54px;
  height: 54px;
  display: block !important;
  background-color: #fff !important;
  background-image: var(--service-icon) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 31px 31px !important;
  border: 1px solid color-mix(in srgb, var(--service-accent) 20%, #dfe4ec) !important;
  border-radius: 15px;
  box-shadow:
    0 9px 22px rgba(18, 24, 40, 0.09),
    inset 0 1px 0 #fff;
  opacity: 1 !important;
  pointer-events: none;
  transform: none !important;
}

.pricing-section.pricing-theme .package-name {
  max-width: calc(100% - 70px) !important;
  min-height: 47px;
}

.pricing-section.pricing-theme .ip-country-pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 980px) {
  .pricing-section.pricing-theme .ip-country-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .pricing-section.pricing-theme .package-card::after,
  .pricing-section.pricing-theme .monthly-card::after {
    top: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    background-size: 27px 27px !important;
    border-radius: 13px;
  }

  .pricing-section.pricing-theme .package-name {
    max-width: calc(100% - 61px) !important;
    min-height: 42px;
  }

  .pricing-section.pricing-theme .ip-country-pricing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Revision 6: checkout clarity and consistently readable featured prices */
.pricing-section.pricing-theme .package-card.featured .package-price,
.pricing-section.pricing-theme .monthly-card.featured .package-price {
  color: #101828 !important;
  background: #ffffff !important;
  border: 2px solid color-mix(in srgb, var(--service-accent) 48%, #d0d5dd) !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1) !important;
}

.pricing-section.pricing-theme .package-card.featured .package-price-value,
.pricing-section.pricing-theme .monthly-card.featured .package-price-value {
  color: #101828 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #101828 !important;
  text-shadow: none !important;
}

.pricing-section.pricing-theme .package-card.featured .package-price-unit,
.pricing-section.pricing-theme .monthly-card.featured .package-price-unit {
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}

.modal-option-checkout {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.modal-option-checkout:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.modal-option-checkout:not(:disabled) {
  border-color: rgba(108, 59, 234, 0.38) !important;
  background: linear-gradient(135deg, #f7f3ff, #eef8ff) !important;
}

.modal-option-icon-checkout {
  color: #ffffff;
  background: linear-gradient(135deg, var(--h-purple), var(--h-purple-dark)) !important;
}

.modal-option-icon-checkout svg {
  stroke: currentColor;
}

.modal-option-checkout.checkout-error {
  border-color: #dc2626 !important;
  background: #fff5f5 !important;
}

.modal-option[hidden] {
  display: none !important;
}


/* === Compact PVAChain-style header + speed pass 2026-09-24 === */
:root {
  --header-height: 74px;
}
html { scroll-behavior: auto; }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6,.logo,.section-title {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.top-strip { display: none !important; }
.navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
  background: rgba(9, 11, 13, .97) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navbar.scrolled { background: rgba(9, 11, 13, .99) !important; }
.navbar .container { height: 100% !important; }
.navbar-content {
  min-height: var(--header-height) !important;
  height: var(--header-height) !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 0 !important;
}
.navbar-content > .logo { flex: 0 0 auto !important; margin-right: auto !important; }
.brand-logo-image { width: 168px !important; height: auto !important; display: block !important; }
.hstock-search { display: none !important; }
.nav-links {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.nav-link,
.dropdown-toggle {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: rgba(255,255,255,.88) !important;
  white-space: nowrap !important;
}
.nav-link:hover,
.dropdown-toggle:hover,
.dropdown.active > .dropdown-toggle {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}
.dropdown-toggle svg { width: 14px !important; height: 14px !important; }
.navbar .nav-marketplace-cta {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 0 8px !important;
  padding: 0 16px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.dropdown-menu-services {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(10px) !important;
  width: min(1120px, calc(100vw - 40px)) !important;
  max-height: min(74vh, 650px) !important;
  overflow: auto !important;
}
.dropdown:hover > .dropdown-menu-services,
.dropdown.active > .dropdown-menu-services {
  transform: translateX(-50%) translateY(0) !important;
}
.mobile-menu-btn { display: none !important; }

@media (max-width: 1080px) and (min-width: 1025px) {
  .navbar-content { gap: 14px !important; }
  .brand-logo-image { width: 148px !important; }
  .nav-link,.dropdown-toggle { padding-inline: 9px !important; font-size: 13px !important; }
  .navbar .nav-marketplace-cta { padding-inline: 12px !important; }
}

@media (max-width: 1024px) {
  :root { --header-height: 66px; }
  body.menu-open { overflow: hidden !important; }
  .navbar { height: var(--header-height) !important; min-height: var(--header-height) !important; }
  .navbar-content { min-height: var(--header-height) !important; height: var(--header-height) !important; gap: 12px !important; }
  .brand-logo-image { width: 146px !important; }
  .mobile-menu-btn {
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
  .mobile-menu-btn span { width: 19px !important; height: 2px !important; border-radius: 4px !important; background: currentColor !important; }
  .nav-links {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
    max-height: calc(100dvh - var(--header-height)) !important;
    display: none !important;
    align-content: start !important;
    gap: 6px !important;
    padding: 16px 18px 28px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #0b0e11 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .nav-links.active { display: grid !important; }
  .nav-links > *, .nav-links .dropdown { width: 100% !important; }
  .nav-link,.dropdown-toggle {
    min-height: 48px !important;
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    font-size: 15px !important;
  }
  .nav-link:hover,.dropdown-toggle:hover { background: transparent !important; }
  .navbar .nav-marketplace-cta {
    width: 100% !important;
    min-height: 48px !important;
    margin: 8px 0 0 !important;
    padding: 0 16px !important;
  }
  .dropdown-menu,
  .dropdown-menu-services {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: max-height .25s ease !important;
  }
  .dropdown.active > .dropdown-menu-services {
    max-height: 62vh !important;
    overflow-y: auto !important;
    padding: 8px 0 4px !important;
    transform: none !important;
  }
  .dropdown-grid-services {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  .dropdown-section { padding: 10px 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
  .dropdown-section-title { margin-bottom: 8px !important; font-size: 12px !important; }
  .dropdown-section-links { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 10px !important; }
  .dropdown-item { min-height: 36px !important; padding: 7px 0 !important; font-size: 13px !important; }
  .dropdown-view-all { display: none !important; }
}

@media (max-width: 520px) {
  .navbar .container { padding-left: 14px !important; padding-right: 14px !important; }
  .brand-logo-image { width: 136px !important; }
  .nav-links { padding-left: 16px !important; padding-right: 16px !important; }
  .dropdown-section-links { grid-template-columns: 1fr !important; }
}

/* === Header visibility + mobile menu viewport fix 2026-09-26 === */
.navbar,
.navbar.scrolled {
  background: #ffffff !important;
  border-bottom: 1px solid #e7eaf0 !important;
  box-shadow: 0 6px 24px rgba(7,17,31,.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: #07111f !important;
}
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover,
.navbar .dropdown.active > .dropdown-toggle {
  color: #07111f !important;
  background: #f3f6f8 !important;
}
.navbar .nav-marketplace-cta,
.navbar .nav-links > .btn-primary {
  color: #ffffff !important;
  background: #07111f !important;
  border-color: #07111f !important;
}
.navbar .nav-marketplace-cta:hover,
.navbar .nav-links > .btn-primary:hover {
  color: #07111f !important;
  background: #d9ff43 !important;
  border-color: #d9ff43 !important;
}
.brand-logo-image {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

@media (max-width: 1024px) {
  .navbar,
  .navbar.scrolled {
    overflow: visible !important;
    background: #ffffff !important;
  }
  .mobile-menu-btn {
    color: #07111f !important;
    background: #f5f7f9 !important;
    border-color: #dfe4ea !important;
    box-shadow: none !important;
  }
  .mobile-menu-btn:hover,
  .mobile-menu-btn.active {
    color: #07111f !important;
    background: #edf1f4 !important;
  }
  .nav-links {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1001 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--header-height)) !important;
    max-height: calc(100dvh - var(--header-height)) !important;
    padding: 16px 18px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-top: 1px solid #e7eaf0 !important;
    color: #07111f !important;
    box-shadow: 0 18px 35px rgba(7,17,31,.12) !important;
  }
  .nav-links.active {
    display: grid !important;
  }
  .navbar .nav-link,
  .navbar .dropdown-toggle {
    color: #07111f !important;
    border-bottom-color: #e9edf1 !important;
  }
  .navbar .nav-link:hover,
  .navbar .dropdown-toggle:hover,
  .navbar .dropdown.active > .dropdown-toggle {
    background: #f5f7f9 !important;
    color: #07111f !important;
  }
  .dropdown-menu,
  .dropdown-menu-services {
    background: #ffffff !important;
    color: #07111f !important;
  }
  .dropdown.active > .dropdown-menu-services {
    border-bottom: 1px solid #e9edf1 !important;
  }
  .dropdown-section {
    color: #07111f !important;
    border-bottom-color: #e9edf1 !important;
  }
  .dropdown-section-title {
    color: #596579 !important;
  }
  .dropdown-item {
    color: #1a2433 !important;
  }
  .dropdown-item:hover {
    color: #07111f !important;
    background: #f3f6f8 !important;
  }
}