/* Phase 6B: premium layered storefront refinement. Admin remains on styles.css only. */
.storefront {
  --accent: #31dcff;
  --accent-strong: #78ecff;
  --accent-soft: rgba(49, 220, 255, .1);
  --violet: #8a7cff;
  --violet-soft: rgba(138, 124, 255, .12);
  --ink: #f4f8ff;
  --ink-soft: #b7c3d5;
  --muted: #7f8ca1;
  --line: rgba(139, 174, 216, .18);
  --paper: #080a11;
  --surface: rgba(16, 20, 30, .88);
  --dark: #05070d;
  --dark-2: #0b0f19;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 30px;
  --shadow-sm: 0 18px 48px rgba(0, 0, 0, .24);
  --shadow: 0 32px 90px rgba(0, 0, 0, .38);
  background:
    radial-gradient(circle at 86% 13%, rgba(76, 58, 174, .13), transparent 26rem),
    radial-gradient(circle at 7% 48%, rgba(0, 185, 225, .07), transparent 31rem),
    linear-gradient(145deg, #080a11, #0e111b 48%, #080a11);
}

.storefront::before {
  background-image:
    linear-gradient(rgba(100, 154, 211, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 154, 211, .022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 19%, #000 84%, transparent);
}

.storefront .site-header {
  border-bottom-color: rgba(133, 169, 211, .14);
  background: linear-gradient(90deg, rgba(7, 9, 15, .9), rgba(12, 14, 22, .84));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 12px 38px rgba(0, 0, 0, .12);
}

.storefront .site-header.is-scrolled {
  background: rgba(6, 8, 13, .96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

.storefront .brand-mark {
  border-color: rgba(255, 255, 255, .21);
  background: linear-gradient(145deg, #38e5ff, #5579ff 56%, #a172ff);
  box-shadow: 5px 5px 0 rgba(71, 67, 165, .24), 0 0 34px rgba(49, 220, 255, .19);
}

.storefront .top-nav > a {
  letter-spacing: -.01em;
}

.storefront .top-nav > a:hover,
.storefront .top-nav > a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(49, 220, 255, .1), rgba(138, 124, 255, .07));
}

.storefront .top-nav > a[aria-current="page"]::after {
  box-shadow: 0 0 12px rgba(49, 220, 255, .55);
}

.storefront .top-nav .cart-link {
  border-color: rgba(132, 172, 218, .28);
  background: linear-gradient(145deg, rgba(24, 29, 42, .92), rgba(14, 17, 27, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Layered hero */
.storefront .home-hero {
  --hero-image-x: 0px;
  --hero-image-y: 0px;
  --hero-fg-x: 0px;
  --hero-fg-y: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: max(760px, calc(100svh - var(--header-height)));
  padding: clamp(5rem, 9vw, 8.5rem) max(clamp(1.1rem, 5vw, 5.5rem), calc((100vw - var(--container)) / 2 + 4.5rem));
  overflow: hidden;
  background: #05070d;
  color: #fff;
}

.storefront .home-hero::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, .99) 0%, rgba(5, 7, 13, .97) 29%, rgba(5, 7, 13, .72) 48%, rgba(5, 7, 13, .1) 78%),
    linear-gradient(180deg, rgba(4, 6, 11, .3), transparent 38%, rgba(4, 6, 11, .52));
  pointer-events: none;
}

.storefront .home-hero::after {
  z-index: 8;
  inset: auto 0 0;
  height: 1px;
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(49, 220, 255, .44), rgba(138, 124, 255, .25), transparent);
  mask-image: none;
  animation: none;
}

.storefront .hero-layer,
.storefront .hero-machine-layer,
.storefront .hero-foreground {
  position: absolute;
  pointer-events: none;
}

.storefront .hero-backdrop {
  z-index: -4;
  inset: -4%;
  background:
    radial-gradient(circle at 82% 16%, rgba(115, 81, 230, .34), transparent 18%),
    radial-gradient(circle at 74% 67%, rgba(0, 204, 255, .17), transparent 24%),
    radial-gradient(circle at 18% 18%, rgba(44, 103, 174, .1), transparent 25%),
    radial-gradient(circle at 11% 26%, rgba(255, 255, 255, .72) 0 1px, transparent 1.4px),
    radial-gradient(circle at 32% 71%, rgba(99, 224, 255, .62) 0 1px, transparent 1.4px),
    radial-gradient(circle at 64% 34%, rgba(199, 190, 255, .5) 0 1px, transparent 1.5px),
    linear-gradient(135deg, #05070d 0%, #090d18 52%, #0a0a17 100%);
  background-size: auto, auto, auto, 157px 157px, 229px 229px, 311px 311px, auto;
}

.storefront .hero-nebula {
  z-index: -3;
  top: -22%;
  right: -12%;
  width: min(78vw, 1180px);
  height: 140%;
  opacity: .76;
  background:
    radial-gradient(ellipse at 70% 46%, rgba(108, 76, 221, .32), transparent 29%),
    radial-gradient(ellipse at 52% 58%, rgba(4, 188, 239, .2), transparent 33%),
    radial-gradient(ellipse at 83% 25%, rgba(68, 102, 204, .18), transparent 25%);
  filter: blur(28px);
  transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0);
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.storefront .hero-hud {
  z-index: 1;
  inset: 0;
  opacity: .58;
  background-image:
    linear-gradient(rgba(91, 158, 218, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 158, 218, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .45) 55%, transparent 94%);
}

.storefront .hero-hud::before,
.storefront .hero-hud::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(87, 210, 255, .12);
  border-radius: 50%;
}

.storefront .hero-hud::before {
  right: 8%;
  bottom: -38%;
  width: min(66vw, 880px);
  aspect-ratio: 1;
  box-shadow: inset 0 0 80px rgba(49, 220, 255, .025), 0 0 80px rgba(138, 124, 255, .04);
}

.storefront .hero-hud::after {
  right: 17%;
  bottom: -22%;
  width: min(48vw, 650px);
  aspect-ratio: 1;
}

.storefront .hero-hud-axis {
  position: absolute;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(90, 211, 255, .22), transparent);
}

.storefront .hero-hud-axis-x {
  right: 6%;
  bottom: 21%;
  width: 52%;
  height: 1px;
}

.storefront .hero-hud-axis-y {
  right: 25%;
  bottom: 4%;
  width: 1px;
  height: 52%;
  background: linear-gradient(transparent, rgba(90, 211, 255, .18), transparent);
}

.storefront .hero-hud-reticle {
  position: absolute;
  right: 12%;
  top: 17%;
  width: 122px;
  aspect-ratio: 1;
  border: 1px solid rgba(112, 221, 255, .16);
  border-radius: 50%;
  animation: phase6b-rotate 32s linear infinite;
}

.storefront .hero-hud-reticle::before,
.storefront .hero-hud-reticle::after,
.storefront .hero-hud-reticle i {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(149, 133, 255, .16);
  border-radius: inherit;
}

.storefront .hero-hud-reticle::after {
  inset: 47%;
  border: 0;
  background: #77eaff;
  box-shadow: 0 0 16px #31dcff;
}

.storefront .hero-hud-reticle i {
  inset: 38px;
  border-style: solid;
}

.storefront .hero-machine-layer {
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 30%;
  overflow: hidden;
  opacity: .98;
  transform: translate3d(var(--hero-image-x), var(--hero-image-y), 0) scale(1.018);
  transform-origin: center right;
  transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .22) 10%, #000 31%, #000 100%);
}

.storefront .hero-machine-layer::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 13, .86), transparent 35%),
    linear-gradient(180deg, rgba(5, 7, 13, .24), transparent 28%, rgba(5, 7, 13, .3));
}

.storefront .hero-machine-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% center;
  filter: contrast(1.08) saturate(1.12) brightness(.9);
}

.storefront .hero-machine-scan {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 20%;
  width: 53%;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(71, 232, 255, .8), transparent);
  box-shadow: 0 0 18px rgba(49, 220, 255, .4);
  animation: phase6b-scan 8s ease-in-out infinite;
}

.storefront .hero-atmosphere {
  z-index: 1;
  left: auto;
  right: -7%;
  bottom: -43%;
  width: min(66vw, 880px);
  border-color: rgba(49, 220, 255, .12);
  opacity: .82;
  transform: translate3d(var(--hero-fg-x), var(--hero-fg-y), 0);
  transition: transform 1100ms cubic-bezier(.2, .7, .2, 1);
}

.storefront .hero-atmosphere::before,
.storefront .hero-atmosphere::after {
  border-color: rgba(138, 124, 255, .12);
}

.storefront .hero-copy {
  z-index: 4;
  width: min(48vw, 690px);
  padding: clamp(1rem, 2.5vw, 2rem) 0;
  text-shadow: 0 2px 28px rgba(2, 4, 8, .5);
}

.storefront .home-hero .eyebrow {
  margin-bottom: 1.35rem;
  color: #78ecff;
  font-size: .71rem;
  letter-spacing: .17em;
}

.storefront .home-hero .eyebrow > span {
  box-shadow: 0 0 12px rgba(49, 220, 255, .65);
}

.storefront .home-hero h1 {
  max-width: 710px;
  font-size: clamp(4.2rem, 7.1vw, 7.5rem);
  line-height: .87;
  letter-spacing: -.069em;
}

.storefront .home-hero h1 em {
  background: linear-gradient(90deg, #eafcff 10%, #9beeff 58%, #d7d5ff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 25px rgba(49, 220, 255, .12));
}

.storefront .hero-lead {
  max-width: 580px;
  margin-top: 1.65rem;
  color: #c1ccdc;
}

.storefront .hero-actions {
  margin-top: 2rem;
}

.storefront .hero-actions .button {
  min-width: 205px;
}

.storefront .hero-proof {
  gap: .85rem 1.15rem;
  color: #919db0;
}

.storefront .hero-proof span {
  padding: .3rem 0;
}

.storefront .hero-proof i {
  border-color: rgba(49, 220, 255, .4);
  background: rgba(49, 220, 255, .055);
  box-shadow: 0 0 18px rgba(49, 220, 255, .06);
}

.storefront .hero-foreground {
  z-index: 5;
  inset: 0;
  transform: translate3d(var(--hero-fg-x), var(--hero-fg-y), 0);
  transition: transform 1050ms cubic-bezier(.2, .7, .2, 1);
}

.storefront .hero-tech-object {
  position: absolute;
  display: block;
}

.storefront .hero-tech-cube {
  right: 3.8%;
  bottom: 7%;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(113, 222, 255, .32);
  background: linear-gradient(145deg, rgba(38, 65, 94, .32), rgba(21, 24, 47, .1));
  box-shadow: inset 0 0 28px rgba(49, 220, 255, .06), 0 14px 40px rgba(0, 0, 0, .3);
  transform: rotate(18deg);
  animation: phase6b-float 7s ease-in-out infinite;
  backdrop-filter: blur(5px);
}

.storefront .hero-tech-cube::before,
.storefront .hero-tech-cube::after,
.storefront .hero-tech-cube i,
.storefront .hero-tech-cube b {
  content: "";
  position: absolute;
  border: 1px solid rgba(154, 138, 255, .2);
}

.storefront .hero-tech-cube::before {
  inset: 10px;
}

.storefront .hero-tech-cube::after {
  top: -16px;
  right: -16px;
  width: 64px;
  height: 64px;
}

.storefront .hero-tech-cube i {
  top: -16px;
  right: -16px;
  left: 0;
  transform: rotate(45deg);
  transform-origin: left;
}

.storefront .hero-tech-cube b {
  top: 0;
  right: -16px;
  bottom: -1px;
  transform: rotate(-45deg);
  transform-origin: bottom;
}

.storefront .hero-tech-orbit {
  position: absolute;
  top: 20%;
  right: 38%;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(49, 220, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(49, 220, 255, .09);
  animation: phase6b-float 9s ease-in-out -2s infinite;
}

.storefront .hero-tech-orbit::before,
.storefront .hero-tech-orbit i {
  content: "";
  position: absolute;
  inset: 9px -10px;
  border: 1px solid rgba(138, 124, 255, .2);
  border-radius: 50%;
  transform: rotate(58deg);
}

.storefront .hero-tech-orbit i {
  inset: 18px;
  border: 0;
  background: #70eaff;
  box-shadow: 0 0 15px rgba(49, 220, 255, .8);
}

.storefront .hero-data-card {
  position: absolute;
  top: 16%;
  right: 4.5%;
  display: grid;
  gap: .26rem;
  min-width: 154px;
  border: 1px solid rgba(118, 177, 223, .24);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(11, 18, 28, .68), rgba(22, 20, 42, .54));
  padding: .78rem .9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 40px rgba(0, 0, 0, .18);
  color: #e4f8ff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  backdrop-filter: blur(10px);
  animation: phase6b-float 8.5s ease-in-out -1s infinite;
}

.storefront .hero-data-card small {
  color: #748ca5;
  font-size: .52rem;
  letter-spacing: .13em;
}

.storefront .hero-data-card strong {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  letter-spacing: .05em;
}

.storefront .hero-data-card strong i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ef0b2;
  box-shadow: 0 0 12px rgba(94, 240, 178, .76);
}

.storefront .hero-data-card > span {
  color: #87dff0;
  font-size: .58rem;
}

.storefront .hero-coordinate {
  z-index: 6;
  color: rgba(180, 206, 232, .42);
}

.storefront .hero-coordinate-top {
  top: 1.2rem;
}

@keyframes phase6b-rotate {
  to { transform: rotate(360deg); }
}

@keyframes phase6b-scan {
  0%, 100% { transform: translateY(-130px); opacity: 0; }
  20%, 80% { opacity: .55; }
  50% { transform: translateY(160px); opacity: .32; }
}

@keyframes phase6b-float {
  50% { translate: 0 -8px; }
}

/* Shared premium surface language */
.storefront .section {
  position: relative;
}

.storefront .section-heading,
.storefront .personalizable-section-head {
  position: relative;
}

.storefront .section-heading::after,
.storefront .personalizable-section-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(49, 220, 255, .26), rgba(139, 174, 216, .11) 42%, transparent);
}

.storefront .trust-strip {
  overflow: hidden;
  border-color: rgba(132, 169, 211, .18);
  background:
    linear-gradient(90deg, rgba(49, 220, 255, .025), transparent 26%, rgba(138, 124, 255, .03)),
    rgba(11, 15, 23, .96);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.storefront .trust-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(49, 220, 255, .07), transparent);
  transform: translateX(-100%);
  animation: phase6b-trust-sweep 12s ease-in-out infinite;
}

@keyframes phase6b-trust-sweep {
  50%, 100% { transform: translateX(100%); }
}

.storefront .product-card {
  isolation: isolate;
  border-color: rgba(132, 170, 216, .2);
  background:
    linear-gradient(155deg, rgba(23, 29, 42, .98), rgba(11, 14, 23, .96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.storefront .product-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 0%, rgba(49, 220, 255, .1), transparent 44%);
  transition: opacity 300ms ease;
}

.storefront .product-card:hover::before,
.storefront .product-card:focus-within::before {
  opacity: 1;
}

.storefront .product-card:hover,
.storefront .product-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(49, 220, 255, .43);
  box-shadow: 0 28px 68px rgba(0, 0, 0, .32), 0 0 0 1px rgba(49, 220, 255, .04);
}

.storefront .product-image {
  isolation: isolate;
  border-bottom: 1px solid rgba(131, 169, 213, .15);
  background:
    radial-gradient(circle at 56% 35%, rgba(52, 102, 142, .34), transparent 29%),
    radial-gradient(circle at 73% 70%, rgba(106, 82, 189, .2), transparent 32%),
    linear-gradient(145deg, #111827, #070b13 70%);
}

.storefront .product-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .58;
  background:
    linear-gradient(rgba(116, 189, 234, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 189, 234, .07) 1px, transparent 1px),
    linear-gradient(to top, rgba(3, 6, 12, .68), transparent 48%);
  background-size: 34px 34px, 34px 34px, auto;
  mask-image: linear-gradient(to top, #000, transparent 86%);
}

.storefront .product-image::after {
  z-index: 2;
  opacity: .78;
  background:
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(2, 5, 10, .28) 78%),
    linear-gradient(118deg, rgba(49, 220, 255, .07), transparent 42%, rgba(138, 124, 255, .09));
  mix-blend-mode: soft-light;
}

.storefront .product-image img {
  position: relative;
  z-index: 1;
  filter: contrast(1.08) saturate(.92) brightness(.82);
}

.storefront .product-image .example-product-image {
  object-fit: cover;
  filter: contrast(1.3) saturate(.8) brightness(.72) drop-shadow(0 18px 18px rgba(0, 0, 0, .18));
}

.storefront .product-card:hover .product-image img {
  transform: scale(1.015);
}

.storefront .product-image-action {
  border-color: rgba(144, 203, 235, .26);
  background: rgba(5, 9, 16, .76);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.storefront .image-placeholder {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 38%, rgba(49, 220, 255, .14), transparent 24%),
    linear-gradient(145deg, #111827, #070b13);
  color: #667b91;
}

.storefront .image-placeholder span {
  border-color: rgba(113, 190, 229, .24);
  box-shadow: 0 0 34px rgba(49, 220, 255, .05);
}

.storefront .product-body {
  background: linear-gradient(180deg, rgba(19, 24, 35, .96), rgba(12, 15, 24, .98));
}

.storefront .product-body .card-row {
  border-color: rgba(132, 170, 216, .16);
}

.storefront .badge-accent,
.storefront .card-action {
  background: linear-gradient(135deg, #66eaff, #24cceb);
  color: #041014;
  box-shadow: 0 7px 22px rgba(49, 220, 255, .13);
}

.storefront .badge-dark {
  border-color: rgba(255, 255, 255, .17);
  background: rgba(6, 9, 15, .83);
  backdrop-filter: blur(8px);
}

.storefront .category-chip,
.storefront .personalizable-filter {
  border-color: rgba(138, 124, 255, .35) !important;
  background: linear-gradient(135deg, rgba(49, 220, 255, .09), rgba(138, 124, 255, .13));
  color: #c9f6ff !important;
}

.storefront .category-chip:hover {
  background: linear-gradient(135deg, rgba(49, 220, 255, .15), rgba(138, 124, 255, .18));
}

.storefront .personalizable-grid .product-card {
  border-color: rgba(138, 124, 255, .25);
}

.storefront .category-tile,
.storefront .category-tile:nth-child(6),
.storefront .category-tile:nth-child(7) {
  border-color: rgba(132, 170, 216, .19);
  background:
    linear-gradient(rgba(105, 164, 216, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 164, 216, .035) 1px, transparent 1px),
    radial-gradient(circle at 77% 25%, rgba(82, 84, 187, .22), transparent 35%),
    linear-gradient(145deg, rgba(23, 29, 42, .98), rgba(10, 13, 21, .98));
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.storefront .category-tile:hover,
.storefront .category-tile:nth-child(6):hover,
.storefront .category-tile:nth-child(7):hover {
  transform: translateY(-4px);
  border-color: rgba(49, 220, 255, .4);
  background:
    linear-gradient(rgba(105, 164, 216, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 164, 216, .045) 1px, transparent 1px),
    radial-gradient(circle at 75% 23%, rgba(49, 220, 255, .14), transparent 37%),
    linear-gradient(145deg, #171d2a, #090c14);
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .26);
}

.storefront .category-shape,
.storefront .category-shape::before,
.storefront .category-shape i {
  border-color: rgba(116, 206, 239, .24);
  box-shadow: 0 0 22px rgba(49, 220, 255, .025);
}

.storefront .process-section {
  overflow: hidden;
  border-color: rgba(132, 170, 216, .21);
  background:
    linear-gradient(rgba(99, 168, 216, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 168, 216, .04) 1px, transparent 1px),
    radial-gradient(circle at 14% 16%, rgba(49, 220, 255, .1), transparent 32%),
    radial-gradient(circle at 90% 76%, rgba(138, 124, 255, .11), transparent 35%),
    linear-gradient(145deg, #121723, #070a11);
  background-size: 54px 54px, 54px 54px, auto, auto, auto;
}

.storefront .process-steps > li > span {
  text-shadow: 0 0 16px rgba(49, 220, 255, .3);
}

.storefront .color-feature-visual {
  border-color: rgba(132, 170, 216, .22);
  background:
    radial-gradient(circle at 52% 46%, rgba(65, 91, 146, .23), transparent 32%),
    linear-gradient(145deg, #131925, #080b12);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .3);
}

.storefront .color-tag {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
}

.storefront .custom-cta {
  overflow: hidden;
  border-color: rgba(49, 220, 255, .27);
  background:
    radial-gradient(circle at 83% 12%, rgba(138, 124, 255, .34), transparent 35%),
    radial-gradient(circle at 14% 85%, rgba(49, 220, 255, .14), transparent 33%),
    linear-gradient(130deg, #0d2733, #111827 54%, #21163a);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* Catalog */
.storefront .catalog-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 430px;
  border-bottom-color: rgba(132, 170, 216, .19);
  background:
    radial-gradient(circle at 83% 27%, rgba(103, 76, 220, .32), transparent 29%),
    radial-gradient(circle at 67% 64%, rgba(0, 197, 241, .11), transparent 29%),
    linear-gradient(132deg, #070a11, #101522 65%, #0b0b18);
}

.storefront .catalog-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .62;
  background:
    linear-gradient(rgba(103, 169, 218, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 169, 218, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 88%);
}

.storefront .catalog-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 6%;
  bottom: -62%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(49, 220, 255, .13);
  border-radius: 50%;
  box-shadow: inset 0 0 0 72px rgba(138, 124, 255, .025), inset 0 0 0 144px rgba(49, 220, 255, .02);
}

.storefront .catalog-hero h1 {
  max-width: 900px;
  text-shadow: 0 10px 45px rgba(0, 0, 0, .34);
}

.storefront .catalog-hero h1 em {
  background: linear-gradient(90deg, #80edff, #b9b2ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.storefront .catalog-hero-stat {
  position: relative;
  min-width: 170px;
  border-left: 1px solid rgba(49, 220, 255, .22);
  padding-left: 1.3rem;
}

.storefront .catalog-hero-stat strong {
  text-shadow: 0 0 28px rgba(49, 220, 255, .2);
}

.storefront .catalog-controls {
  border-color: rgba(132, 170, 216, .22);
  background: linear-gradient(145deg, rgba(20, 25, 37, .97), rgba(10, 13, 21, .97));
  box-shadow: 0 28px 75px rgba(0, 0, 0, .33), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
}

.storefront .category-pills {
  scrollbar-color: rgba(49, 220, 255, .35) transparent;
}

.storefront .category-pills a:hover,
.storefront .category-pills a[aria-current="true"] {
  box-shadow: inset 0 0 0 1px rgba(49, 220, 255, .04), 0 6px 18px rgba(0, 0, 0, .1);
}

/* Product detail and configurator */
.storefront .product-page {
  position: relative;
  isolation: isolate;
  padding-top: 1.8rem;
}

.storefront .product-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(52vw, 820px);
  height: 430px;
  pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(97, 73, 196, .13), transparent 62%);
}

.storefront .breadcrumbs {
  color: #738198;
}

.storefront .media-gallery-viewport {
  position: relative;
  border-color: rgba(122, 168, 211, .25);
  background:
    radial-gradient(circle at 52% 36%, rgba(42, 78, 109, .37), transparent 33%),
    linear-gradient(145deg, #0e1520, #05080d);
  box-shadow: 0 36px 90px rgba(0, 0, 0, .37), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.storefront .media-gallery-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(111, 185, 226, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 185, 226, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to top, #000, transparent 78%);
}

.storefront .media-gallery-image {
  background:
    radial-gradient(circle at 50% 35%, rgba(57, 94, 125, .48), transparent 36%),
    linear-gradient(145deg, #111925, #06090f);
}

.storefront .model-preview-head {
  border-color: rgba(132, 170, 216, .18);
  background: linear-gradient(120deg, rgba(24, 33, 47, .98), rgba(9, 13, 21, .98));
}

.storefront .model-preview-stage {
  background:
    radial-gradient(circle at 50% 35%, #23384a, #071019 58%, #05090e 100%);
}

.storefront .model-preview-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(99, 178, 220, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 178, 220, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to top, #000, transparent 70%);
}

.storefront .model-preview-cube {
  border-color: var(--accent);
  background: rgba(49, 220, 255, .07);
  box-shadow: 9px 9px 0 rgba(138, 124, 255, .07), 0 0 28px rgba(49, 220, 255, .08);
}

.storefront .model-preview-badge {
  border-color: rgba(49, 220, 255, .3);
  background: rgba(49, 220, 255, .055);
  color: #bff5ff;
}

.storefront .media-gallery-arrow {
  border-color: rgba(137, 182, 221, .3);
  background: rgba(6, 10, 17, .78);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}

.storefront .media-gallery-arrow:hover,
.storefront .media-gallery-arrow:focus-visible {
  border-color: var(--accent);
  background: rgba(18, 35, 48, .95);
}

.storefront .media-gallery-indicators button {
  border-color: #617086;
  background: #28313e;
}

.storefront .detail-panel {
  border-top: 0;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(18, 23, 34, .88), rgba(8, 11, 18, .72));
  padding: clamp(1.25rem, 2.6vw, 2.15rem);
  box-shadow: inset 0 0 0 1px rgba(132, 170, 216, .16), 0 24px 70px rgba(0, 0, 0, .2);
}

.storefront .detail-panel > h1 {
  text-shadow: 0 10px 36px rgba(0, 0, 0, .3);
}

.storefront .badge-soft {
  border-color: rgba(49, 220, 255, .28);
  background: linear-gradient(135deg, rgba(49, 220, 255, .1), rgba(138, 124, 255, .11));
  color: #bff4ff;
}

.storefront .offer-summary {
  border-color: rgba(132, 170, 216, .19);
  background: linear-gradient(90deg, rgba(49, 220, 255, .035), transparent 52%, rgba(138, 124, 255, .035));
}

.storefront .offer-summary > div {
  padding-inline: .8rem;
}

.storefront .offer-summary > div:first-child {
  padding-left: 0;
}

.storefront .dimensions-panel,
.storefront .config-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(132, 170, 216, .18);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(22, 28, 41, .88), rgba(10, 13, 21, .9));
  padding: clamp(1rem, 2vw, 1.35rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.storefront .dimensions-panel::before,
.storefront .config-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(49, 220, 255, .5);
}

.storefront .config-section + .config-section {
  margin-top: 1rem;
}

.storefront .config-heading {
  border-color: rgba(132, 170, 216, .16);
}

.storefront .config-heading > span {
  border-color: rgba(49, 220, 255, .29);
  background: rgba(49, 220, 255, .055);
  color: var(--accent);
  box-shadow: 0 0 22px rgba(49, 220, 255, .05);
}

.storefront input,
.storefront select,
.storefront textarea {
  border-color: rgba(137, 174, 216, .27);
  background: linear-gradient(145deg, rgba(14, 19, 29, .98), rgba(9, 12, 20, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}

.storefront input:hover,
.storefront select:hover,
.storefront textarea:hover {
  border-color: rgba(49, 220, 255, .52);
}

.storefront select option,
.storefront select optgroup {
  background: #f4f7fb;
  color: #111827;
}

.storefront input:focus,
.storefront select:focus,
.storefront textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49, 220, 255, .13), 0 0 24px rgba(49, 220, 255, .05);
}

.storefront .select-with-swatch > i {
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 0 0 3px #121724, 0 0 14px rgba(255, 255, 255, .08);
}

.storefront .preview-request-controls,
.storefront .file-drop {
  border-color: rgba(132, 170, 216, .22);
  background:
    linear-gradient(rgba(100, 170, 219, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 170, 219, .04) 1px, transparent 1px),
    rgba(11, 15, 24, .84);
  background-size: 28px 28px, 28px 28px, auto;
}

.storefront .file-drop {
  border-style: dashed;
}

.storefront .product-cta {
  margin-top: .5rem;
  border-top: 1px solid rgba(132, 170, 216, .17);
}

.storefront .product-cta .button {
  box-shadow: 0 16px 36px rgba(49, 220, 255, .17);
}

/* Forms, cart and legal/supporting pages */
.storefront .page-shell,
.storefront .legal-page,
.storefront .center-shell {
  position: relative;
}

.storefront .page-title,
.storefront .legal-hero {
  position: relative;
}

.storefront .page-title::before,
.storefront .legal-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8rem;
  right: 0;
  width: 360px;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(101, 76, 210, .14), transparent 68%);
}

.storefront .split-title {
  border-color: rgba(132, 170, 216, .19);
}

.storefront .title-mark,
.storefront .title-count {
  border-color: rgba(49, 220, 255, .24);
  color: var(--accent);
  text-shadow: 0 0 18px rgba(49, 220, 255, .2);
}

.storefront .panel {
  border-color: rgba(132, 170, 216, .2);
  background: linear-gradient(145deg, rgba(20, 25, 37, .96), rgba(10, 13, 21, .96));
  box-shadow: 0 24px 68px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.storefront .contact-form,
.storefront .inquiry-form,
.storefront .cart-summary {
  position: relative;
  overflow: hidden;
}

.storefront .contact-form::before,
.storefront .inquiry-form::before,
.storefront .cart-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 14px rgba(49, 220, 255, .45);
}

.storefront .contact-info article,
.storefront .mini-process li {
  border-color: rgba(132, 170, 216, .17);
}

.storefront .mini-process span {
  border-color: rgba(49, 220, 255, .27);
  background: rgba(49, 220, 255, .045);
  color: var(--accent);
}

.storefront .contact-email {
  border-color: rgba(49, 220, 255, .25);
  background:
    radial-gradient(circle at 88% 12%, rgba(138, 124, 255, .2), transparent 35%),
    linear-gradient(135deg, #102632, #101523);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.storefront .line-item {
  border-color: rgba(132, 170, 216, .2);
  background: linear-gradient(145deg, rgba(21, 27, 39, .96), rgba(10, 13, 21, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.storefront .line-options span {
  border: 1px solid rgba(132, 170, 216, .16);
  background: rgba(49, 220, 255, .045);
  color: #9facc0;
}

.storefront .template-badge {
  border-color: rgba(94, 230, 168, .24);
  background: rgba(94, 230, 168, .07);
  color: #87e7b8;
}

.storefront .empty-state {
  border-color: rgba(132, 170, 216, .25);
  background:
    linear-gradient(rgba(104, 175, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 175, 220, .035) 1px, transparent 1px),
    rgba(14, 18, 28, .82);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .24);
}

.storefront .legal-text {
  border-color: rgba(132, 170, 216, .18);
  background: linear-gradient(145deg, rgba(19, 24, 36, .94), rgba(10, 13, 21, .92));
}

.storefront .legal-nav a[aria-current="page"] {
  text-shadow: 0 0 16px rgba(49, 220, 255, .15);
}

.storefront .legal-monogram {
  box-shadow: inset 0 0 35px rgba(49, 220, 255, .035), 0 0 38px rgba(138, 124, 255, .04);
}

.storefront .code {
  border-color: rgba(49, 220, 255, .23);
  background: rgba(49, 220, 255, .05);
  color: #aaf2ff;
}

.storefront .button {
  position: relative;
  overflow: hidden;
  border-color: #4de3ff;
  background: linear-gradient(135deg, #67eaff, #24cdea 58%, #51bfe9);
  color: #041014;
  box-shadow: 0 12px 30px rgba(49, 220, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.storefront .button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .34) 48%, transparent 72%);
  transform: translateX(-130%);
  transition: transform 500ms ease;
}

.storefront .button:hover::after,
.storefront .button:focus-visible::after {
  transform: translateX(130%);
}

.storefront .button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #8ff1ff, #3dd9f3 60%, #6ecaf0);
  box-shadow: 0 17px 40px rgba(49, 220, 255, .25);
}

.storefront .button.ghost {
  border-color: rgba(147, 183, 224, .34);
  background: rgba(8, 12, 20, .6);
  color: #edf7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.storefront .button.ghost:hover {
  border-color: rgba(49, 220, 255, .68);
  background: rgba(49, 220, 255, .08);
}

/* Footer */
.storefront .site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top-color: rgba(132, 170, 216, .19);
  background:
    radial-gradient(circle at 14% 16%, rgba(49, 220, 255, .08), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(138, 124, 255, .11), transparent 31%),
    linear-gradient(145deg, #070a10, #05070c);
}

.storefront .site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .6;
  background:
    linear-gradient(rgba(105, 169, 217, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 169, 217, .04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.storefront .site-footer::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(49, 220, 255, .42), rgba(138, 124, 255, .28), transparent);
  box-shadow: 0 0 18px rgba(49, 220, 255, .15);
}

.storefront .footer-main {
  position: relative;
}

.storefront .footer-brand p {
  color: #8e9aae;
}

.storefront .footer-column h2 {
  color: #6fdff4;
  letter-spacing: .15em;
}

.storefront .footer-column a {
  position: relative;
  color: #9ca9bb;
}

.storefront .footer-column a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -.18rem;
  left: 0;
  height: 1px;
  background: var(--accent);
  transition: right 180ms ease;
}

.storefront .footer-column a:hover::after {
  right: 0;
}

.storefront .footer-bottom {
  border-color: rgba(132, 170, 216, .14);
  color: #626f82;
}

@media (max-width: 1180px) {
  .storefront .home-hero {
    min-height: max(720px, calc(100svh - var(--header-height)));
  }

  .storefront .hero-machine-layer {
    left: 24%;
  }

  .storefront .hero-copy {
    width: min(54vw, 660px);
  }

  .storefront .hero-data-card {
    right: 2.5%;
  }
}

@media (max-width: 980px) {
  .storefront .top-nav:not(.admin-header .top-nav) {
    border-color: rgba(132, 170, 216, .19);
    background:
      linear-gradient(rgba(100, 166, 214, .035) 1px, transparent 1px),
      rgba(7, 10, 16, .985);
    background-size: 100% 42px, auto;
  }

  .storefront .hero-machine-layer {
    left: 18%;
  }

  .storefront .hero-copy {
    width: min(61vw, 610px);
  }

  .storefront .hero-tech-cube,
  .storefront .hero-data-card {
    right: 1.5rem;
  }

  .storefront .detail-panel {
    padding: clamp(1.2rem, 3vw, 2rem);
  }
}

@media (max-width: 760px) {
  .storefront .home-hero {
    display: flex;
    align-items: flex-end;
    min-height: max(760px, calc(100svh - 68px));
    padding: 22rem 1rem 2.3rem;
  }

  .storefront .home-hero::before {
    background:
      linear-gradient(180deg, rgba(4, 6, 11, .08) 0%, rgba(4, 6, 11, .1) 28%, rgba(4, 6, 11, .78) 56%, rgba(4, 6, 11, .995) 80%),
      linear-gradient(90deg, rgba(4, 6, 11, .44), transparent 68%);
  }

  .storefront .hero-backdrop {
    inset: -2%;
  }

  .storefront .hero-nebula {
    top: -10%;
    right: -42%;
    width: 150vw;
    height: 85%;
  }

  .storefront .hero-hud {
    opacity: .36;
    mask-image: linear-gradient(to bottom, #000, transparent 67%);
  }

  .storefront .hero-hud::before {
    right: -54%;
    bottom: 26%;
    width: 140vw;
  }

  .storefront .hero-hud::after,
  .storefront .hero-hud-axis-y {
    display: none;
  }

  .storefront .hero-hud-axis-x {
    right: 0;
    bottom: 50%;
    width: 100%;
  }

  .storefront .hero-hud-reticle {
    top: 8%;
    right: 5%;
    width: 82px;
  }

  .storefront .hero-machine-layer {
    top: 0;
    right: -11%;
    bottom: auto;
    left: -12%;
    width: 123%;
    height: 59%;
    opacity: .92;
    mask-image: linear-gradient(to bottom, #000 48%, rgba(0, 0, 0, .82) 68%, transparent 100%);
  }

  .storefront .hero-machine-layer::before {
    background:
      linear-gradient(90deg, rgba(5, 7, 13, .27), transparent 35%),
      linear-gradient(180deg, rgba(5, 7, 13, .18), transparent 38%, rgba(5, 7, 13, .7));
  }

  .storefront .hero-machine-layer img {
    object-position: 69% center;
  }

  .storefront .hero-machine-scan {
    right: 16%;
    bottom: 23%;
    width: 54%;
  }

  .storefront .hero-atmosphere,
  .storefront .hero-data-card,
  .storefront .hero-tech-cube,
  .storefront .hero-tech-orbit,
  .storefront .hero-coordinate {
    display: none;
  }

  .storefront .hero-copy {
    width: 100%;
    max-width: 590px;
    padding: 0;
  }

  .storefront .home-hero h1 {
    font-size: clamp(3.4rem, 15vw, 5.2rem);
    line-height: .9;
  }

  .storefront .hero-lead {
    max-width: 31rem;
    margin-top: 1.2rem;
  }

  .storefront .hero-actions {
    margin-top: 1.35rem;
  }

  .storefront .hero-proof {
    margin-top: 1.15rem;
  }

  .storefront .catalog-hero {
    min-height: 390px;
  }

  .storefront .catalog-hero-stat {
    border-top: 1px solid rgba(49, 220, 255, .18);
    border-left: 0;
    padding-top: .9rem;
    padding-left: 0;
  }
}

@media (max-width: 660px) {
  .storefront .home-hero {
    min-height: max(748px, calc(100svh - 68px));
    padding: 20.5rem 1rem 2rem;
  }

  .storefront .home-hero .eyebrow {
    margin-bottom: .9rem;
    font-size: .6rem;
  }

  .storefront .home-hero h1 {
    font-size: clamp(3rem, 15.8vw, 4.45rem);
  }

  .storefront .hero-lead {
    font-size: .96rem;
    line-height: 1.5;
  }

  .storefront .hero-actions .button {
    min-width: 0;
  }

  .storefront .hero-proof {
    font-size: .66rem;
  }

  .storefront .trust-strip {
    border-right: 0;
    border-left: 0;
  }

  .storefront .section-heading::after,
  .storefront .personalizable-section-head::after {
    bottom: -.6rem;
  }

  .storefront .product-card {
    border-radius: 16px;
  }

  .storefront .product-image::before {
    background-size: 30px 30px, 30px 30px, auto;
  }

  .storefront .detail-panel {
    border-radius: 18px;
    padding: 1rem;
  }

  .storefront .dimensions-panel,
  .storefront .config-section {
    border-radius: 14px;
    padding: 1rem;
  }

  .storefront .catalog-controls {
    border-right: 0;
    border-left: 0;
  }

  .storefront .footer-main {
    row-gap: 2.5rem;
  }
}

@media (max-width: 420px) {
  .storefront .home-hero {
    min-height: max(734px, calc(100svh - 68px));
    padding-top: 19.5rem;
  }

  .storefront .hero-machine-layer {
    right: -17%;
    left: -17%;
    width: 134%;
    height: 57%;
  }

  .storefront .home-hero h1 {
    font-size: clamp(2.85rem, 15vw, 3.8rem);
  }

  .storefront .hero-proof {
    gap: .45rem .65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storefront .hero-nebula,
  .storefront .hero-machine-layer,
  .storefront .hero-atmosphere,
  .storefront .hero-foreground {
    transform: none !important;
    transition: none !important;
  }

  .storefront .hero-hud-reticle,
  .storefront .hero-machine-scan,
  .storefront .hero-tech-cube,
  .storefront .hero-tech-orbit,
  .storefront .hero-data-card,
  .storefront .trust-strip::before {
    animation: none !important;
  }

  .storefront .button::after {
    display: none;
  }
}