:root {
  --cs-bg: #07030d;
  --cs-bg-2: #100617;
  --cs-surface: rgba(22, 10, 31, 0.72);
  --cs-surface-strong: rgba(20, 8, 28, 0.92);
  --cs-border: rgba(255, 255, 255, 0.08);
  --cs-border-strong: rgba(238, 0, 255, 0.18);
  --cs-text-soft: rgba(255, 255, 255, 0.72);
  --cs-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --cs-glow-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 12px 40px rgba(238,0,255,.18), 0 0 100px rgba(255,73,153,.1);
  --cs-grad: linear-gradient(135deg, #ff4dcf 0%, #ee00ff 42%, #ff3a88 100%);
  --cs-grad-soft: linear-gradient(180deg, rgba(255, 58, 180, 0.18), rgba(255, 58, 180, 0.04));
}

html, body {
  background:
    radial-gradient(circle at 18% 14%, rgba(238,0,255,0.14), transparent 25%),
    radial-gradient(circle at 80% 10%, rgba(255,74,136,0.11), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(66,17,126,0.15), transparent 32%),
    linear-gradient(180deg, #07030d 0%, #09040f 50%, #05020a 100%) !important;
}

body {
  color: #fff;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

body::before,
body::after {
  content: "";
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
body::before {
  left: -9rem;
  top: 8rem;
  background: rgba(238,0,255,.22);
}
body::after {
  right: -10rem;
  top: 16rem;
  background: rgba(255,67,130,.18);
}

.component { position: relative; z-index: 1; }
.border-theme { border-color: var(--cs-border) !important; }
.bg-surface-1,
.sa-solid { background: var(--cs-surface) !important; backdrop-filter: blur(18px); }
.shadow-1 { box-shadow: var(--cs-shadow) !important; }
.rounded-xl { border-radius: 24px !important; }
.rounded-lg { border-radius: 18px !important; }

.sa-announcement {
  background: rgba(15, 7, 20, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.glass-nav {
  margin: 14px auto 0;
  max-width: min(1440px, calc(100% - 20px));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: rgba(9, 4, 14, 0.68);
  box-shadow: var(--cs-shadow);
  backdrop-filter: blur(18px);
}
.sa-navbar-logo p,
.sa-navbar-logo span {
  font-weight: 900;
  letter-spacing: -.03em;
}
.sa-navbar-logo p {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 46%, #ff5bcf 70%, #ee00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sa-navbar-link {
  border: 1px solid transparent;
  border-radius: 999px;
  transition: all .2s ease;
}
.sa-navbar-link:hover,
.sa-navbar-link[aria-current="page"] {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}

.sa-btn { border-radius: 16px !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.sa-btn:hover { transform: translateY(-2px); }
.sa-btn-primary {
  background: var(--cs-grad) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 36px rgba(238,0,255,.24);
}
.sa-btn-primary-outline,
.sa-btn-secondary,
.sa-btn-secondary-outline {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
}

.cs-hero {
  margin-top: 8px;
}
.cs-hero-shell {
  position: relative;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: var(--cs-shadow);
  overflow: hidden;
}
.cs-hero-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cs-hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,2,10,.72) 0%, rgba(6,2,10,.78) 34%, rgba(6,2,10,.52) 60%, rgba(6,2,10,.74) 100%);
}
.cs-hero-scene-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  filter: blur(5px) saturate(1.05);
  transform: scale(1.04);
}
.cs-hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,0.08), transparent 18%),
    radial-gradient(circle at 70% 28%, rgba(238,0,255,.14), transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(255,90,166,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 26%);
  pointer-events: none;
}
.cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr);
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}
.cs-hero-copy { max-width: 700px; }
.cs-badge {
  display: inline-flex;
  align-items: center;
  padding: .75rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: #ffd9f8;
  font-weight: 600;
}
.cs-hero-title {
  font-size: clamp(3rem, 7vw, 5.9rem);
  line-height: .96;
  font-weight: 900;
  letter-spacing: -.06em;
  margin: 0;
}
.cs-title-main {
  background: linear-gradient(90deg, #fff 0%, #fff 38%, #ff66cf 64%, #ee00ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-title-sub {
  display: inline-block;
  margin-top: .85rem;
  font-size: clamp(1.4rem, 2.6vw, 2.55rem);
  line-height: 1.08;
  color: #f7eef9;
}
.cs-hero-subtitle {
  max-width: 640px;
  margin-top: 1.5rem;
  font-size: 1.12rem;
  line-height: 1.85rem;
  color: var(--cs-text-soft);
}

.cs-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.cs-mini-feature,
.cs-stat-pill {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
}
.cs-mini-feature {
  display: flex;
  gap: .85rem;
  align-items: center;
  padding: 1rem 1.05rem;
}
.cs-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--cs-grad-soft);
  color: #ff7bda;
  border: 1px solid rgba(255,255,255,.08);
}
.cs-mini-feature strong,
.cs-stat-pill strong { display: block; color: #fff; font-size: .98rem; font-weight: 700; }
.cs-mini-feature small,
.cs-stat-pill span { display: block; margin-top: .18rem; color: var(--cs-text-soft); font-size: .84rem; }

.cs-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.cs-stat-pill {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  min-width: 170px;
}
.cs-stat-pill i { color: #ff67d2; font-size: 1.15rem; }

.cs-hero-visual {
  position: relative;
  min-height: 670px;
}
.cs-hero-panel-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-hero-glow {
  position: absolute;
  width: 72%;
  height: 62%;
  border-radius: 40px;
  background: radial-gradient(circle at center, rgba(238,0,255,.32), transparent 58%);
  filter: blur(48px);
  opacity: .85;
}
.cs-hero-panel-frame {
  position: absolute;
  width: min(88%, 610px);
  height: 86%;
  border-radius: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255, 0, 204, .06), 0 10px 60px rgba(238,0,255,.14);
  transform: perspective(1300px) rotateY(-13deg) rotateX(5deg) rotateZ(2deg) translateZ(0);
}
.cs-hero-panel {
  position: relative;
  width: min(82%, 560px);
  padding: .95rem;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 100px rgba(0,0,0,.46), 0 0 52px rgba(238,0,255,.18);
  transform: perspective(1300px) rotateY(-13deg) rotateX(5deg) rotateZ(2deg) translateZ(0);
}
.cs-panel-image {
  display: block;
  width: 100%;
  border-radius: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,.34);
}
.cs-floating-chip {
  position: absolute;
  z-index: 3;
  padding: .82rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 3, 14, .78);
  color: #fff;
  backdrop-filter: blur(14px);
  box-shadow: var(--cs-shadow);
  font-weight: 600;
}
.cs-chip-top { right: .6rem; top: 2rem; }
.cs-chip-mid { left: -.3rem; top: 12rem; }
.cs-chip-bottom { right: -.2rem; bottom: 4.2rem; }

/* section cards */
.sa-about-us .p-8,
.sa-stats .p-8,
.sa-footer .relative.isolate,
.sa-cart-page .rounded-xl,
.sa-status-page .rounded-xl,
[class*="customer"] .rounded-xl,
.modal .rounded-xl {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--cs-shadow);
}
.sa-products .text-h2,
.sa-stats .text-h2,
.sa-about-us .text-h2 { color: #fff; }
.sa-products .text-t-muted,
.sa-about-us .text-t-muted,
.sa-stats .text-t-muted,
.sa-footer .text-t-muted { color: rgba(255,255,255,.68) !important; }

/* product cards */
.sa-products .container {
  margin-top: 2rem;
}
.sa-products a.border-theme,
.sa-products .border-theme.bg-surface-1 {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  overflow: hidden;
}
.sa-products a.border-theme:hover {
  transform: translateY(-7px);
  border-color: rgba(238,0,255,.24) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.30), 0 0 0 1px rgba(238,0,255,.14), 0 0 32px rgba(238,0,255,.10);
}
.sa-products img {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.badges > div {
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.text-accent-text { color: #ff7bd8 !important; }

/* forms / checkout */
input, textarea, select {
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
}
input::placeholder,
textarea::placeholder { color: rgba(255,255,255,.45) !important; }

/* footer */
.sa-footer { margin-top: 2rem; }
.sa-footer-rule {
  opacity: .5;
  background: linear-gradient(90deg, transparent, rgba(238,0,255,.32), transparent) !important;
}
.sa-footer .relative.isolate { border-radius: 28px 28px 0 0; }

/* misc */
.sa-card-hover,
.border-theme.bg-surface-1,
[class*="customer"] .rounded-xl {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (max-width: 1180px) {
  .cs-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .cs-hero-visual { min-height: 560px; }
  .cs-hero-panel,
  .cs-hero-panel-frame { transform: none; }
  .cs-chip-mid { left: 0; top: 9rem; }
}
@media (max-width: 780px) {
  .glass-nav { margin-top: 10px; border-radius: 18px; }
  .cs-hero-shell { border-radius: 24px; }
  .cs-feature-row { grid-template-columns: 1fr; }
  .cs-stat-pills { flex-direction: column; }
  .cs-hero-copy { max-width: none; }
  .cs-hero-visual { min-height: 420px; }
  .cs-hero-panel,
  .cs-hero-panel-frame { width: 100%; border-radius: 26px; }
  .cs-panel-image { border-radius: 18px; }
  .cs-floating-chip { font-size: .9rem; padding: .72rem .92rem; }
  .cs-chip-top { top: .2rem; right: 0; }
  .cs-chip-mid { top: auto; left: 0; bottom: 5rem; }
  .cs-chip-bottom { bottom: 0; right: 0; }
}


/* Interactive 3D model stage */
.cs-model-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-model-shell {
  position: relative;
  width: min(82%, 560px);
  height: min(86%, 720px);
  padding: 1.05rem;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 100px rgba(0,0,0,.46), 0 0 52px rgba(238,0,255,.18);
  transform: perspective(1300px) rotateY(-13deg) rotateX(5deg) rotateZ(2deg) translateZ(0);
  overflow: hidden;
}
.cs-model-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%, transparent 78%, rgba(255,255,255,.02));
  pointer-events: none;
  z-index: 2;
}
.cs-model-viewer {
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(180deg, rgba(22, 8, 30, .95), rgba(11, 5, 17, .98));
  --poster-color: transparent;
}
.cs-model-viewer::part(default-progress-bar) { display:none; }
.cs-model-viewer::part(default-progress-mask) { display:none; }
.cs-model-viewer::part(default-ar-button) {
  bottom: 14px;
  right: 14px;
  left: auto;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
}
.cs-model-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 3;
}
@media (max-width: 1180px) {
  .cs-model-shell { transform: none; height: min(90%, 620px); }
}
@media (max-width: 780px) {
  .cs-model-shell { width: 100%; height: 100%; border-radius: 26px; }
  .cs-model-viewer { border-radius: 18px; }
}


/* CandyService premium v5 overrides */
.cs-hero-scene-img {
  content: url("candyservice-neon-ambient-bg.jpg");
  opacity: .58 !important;
  filter: none !important;
  transform: scale(1.02) !important;
}
.cs-hero-scene::after {
  background: linear-gradient(90deg, rgba(6,2,10,.82) 0%, rgba(6,2,10,.76) 38%, rgba(6,2,10,.44) 67%, rgba(6,2,10,.68) 100%) !important;
}
.cs-hero-shell {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)) !important;
  border-color: rgba(255,255,255,.065) !important;
}
.cs-hero-panel-frame { display:none !important; }
.cs-model-shell {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}
.cs-model-shell::before { display:none !important; }
.cs-model-viewer {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: brightness(1.10) saturate(1.06) drop-shadow(0 28px 45px rgba(0,0,0,.36)) drop-shadow(0 0 32px rgba(238,0,255,.14));
}
.cs-model-stage {
  inset: 1.5rem -1.5rem 0 0 !important;
}
.cs-hero-glow {
  width: 72% !important;
  height: 64% !important;
  background: radial-gradient(circle at center, rgba(238,0,255,.30), rgba(255,65,144,.10) 36%, transparent 66%) !important;
  filter: blur(62px) !important;
}
.cs-floating-chip {
  background: rgba(12,5,18,.72) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.26) !important;
}
@media(max-width:1180px){
  .cs-model-stage{inset:0 !important}
}

/* ============================================================
   CandyService — model-only hero
   Keeps the SellAuth storefront/components intact while reducing
   the hero itself to the centered interactive 3D model.
   ============================================================ */
.cs-hero-model-only {
  margin-top: 0 !important;
  overflow-x: clip;
  overflow-y: visible;
}

.cs-model-only-hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 3rem) 1rem;
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(238, 0, 255, .12), transparent 34%),
    radial-gradient(circle at 50% 78%, rgba(255, 61, 150, .07), transparent 30%);
}

.cs-model-only-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 3, 13, .12), rgba(7, 3, 13, .02) 45%, rgba(7, 3, 13, .18));
}

.cs-model-only-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vw, 900px);
  height: min(62vw, 720px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 0, 255, .25) 0%, rgba(255, 62, 150, .09) 37%, transparent 70%);
  filter: blur(70px);
  opacity: .9;
  pointer-events: none;
  z-index: -1;
}

.cs-model-only-viewer {
  display: block;
  width: min(88vw, 860px);
  height: clamp(360px, 72dvh, 820px);
  max-width: 100%;
  margin: auto;
  background: transparent !important;
  --poster-color: transparent;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: auto;
  filter:
    brightness(1.10)
    saturate(1.06)
    drop-shadow(0 30px 48px rgba(0,0,0,.38))
    drop-shadow(0 0 38px rgba(238,0,255,.16));
}

.cs-model-only-viewer::part(default-progress-bar),
.cs-model-only-viewer::part(default-progress-mask) {
  display: none;
}

@media (max-width: 780px) {
  .cs-model-only-hero {
    padding: 1rem .5rem 1.5rem;
    min-height: 68vh !important;
  }

  .cs-model-only-viewer {
    width: 100vw;
    height: min(68dvh, 610px);
  }

  .cs-model-only-glow {
    width: 92vw;
    height: 70vw;
    filter: blur(48px);
  }
}