:root {
  color-scheme: dark;
  --void: #010208;
  --space: #050817;
  --space-deep: #070c20;
  --ink: #f1fbff;
  --fog: #96adbd;
  --cyan: #5ff6ff;
  --ice: #caffff;
  --blue: #4776ff;
  --violet: #9c62ff;
  --pink: #ff4ec7;
  --mint: #81ffd4;
  --danger: #ff7bbd;
  --line: rgba(122, 230, 255, .19);
  --line-bright: rgba(122, 230, 255, .42);
  --panel: rgba(7, 13, 33, .82);
  --panel-solid: #080e24;
  --shadow: 0 34px 110px rgba(0, 0, 0, .4);
  --pointer-x: 0;
  --pointer-y: 0;
  --pointer-left: 50vw;
  --pointer-top: 40vh;
}

* { box-sizing: border-box; }
html {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  scroll-behavior:smooth;
}
body {
  width:100%;
  max-width:100%;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-x:none;
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 32%, rgba(87, 70, 255, .2), transparent 25%),
    radial-gradient(circle at 16% 24%, rgba(0, 203, 255, .11), transparent 29%),
    linear-gradient(155deg, #010208 0%, #050617 54%, #02030b 100%);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
@supports (overflow:clip) {
  html,body { overflow-x:clip; }
}
body::before {
  content: "NEXORA";
  position: fixed;
  left: -.05em;
  bottom: -.17em;
  z-index: -3;
  direction: ltr;
  color: rgba(196, 248, 255, .024);
  font-family: "Segoe UI", sans-serif;
  font-size: clamp(8rem, 22vw, 21rem);
  font-weight: 700;
  letter-spacing: -.09em;
  line-height: 1;
  transform: translate(calc(var(--pointer-x) * -20px), calc(var(--pointer-y) * -8px));
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  user-select: none;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.cosmos,
.nebula,
.space-architecture,
.cursor-aura,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.cosmos { z-index: -7; width: 100%; height: 100%; }
.nebula {
  z-index: -6;
  inset: -15%;
  background:
    conic-gradient(from 210deg at 69% 40%, transparent 0 18%, rgba(111,80,255,.14) 24%, rgba(44,216,255,.13) 29%, transparent 37%),
    radial-gradient(ellipse at 70% 37%, rgba(255,69,206,.09), transparent 36%);
  filter: blur(25px) saturate(1.45);
  transform: translate(calc(var(--pointer-x) * -18px), calc(var(--pointer-y) * -13px)) rotate(-4deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.space-architecture {
  z-index: -5;
  opacity: .2;
  background-image:
    linear-gradient(115deg, transparent 0 49.88%, rgba(95,246,255,.24) 50%, transparent 50.12%),
    linear-gradient(65deg, transparent 0 49.88%, rgba(156,98,255,.18) 50%, transparent 50.12%),
    radial-gradient(circle at 72% 42%, transparent 0 31%, rgba(95,246,255,.16) 31.1% 31.25%, transparent 31.35%);
  background-size: 340px 340px, 340px 340px, 100% 100%;
  mask-image: radial-gradient(circle at 70% 42%, #000 8%, transparent 64%);
  transform: translate(calc(var(--pointer-x) * 12px), calc(var(--pointer-y) * 8px));
}
.cursor-aura {
  z-index: -2;
  width: 420px;
  height: 420px;
  inset: 0 auto auto 0;
  border-radius: 50%;
  opacity: .32;
  background: radial-gradient(circle, rgba(95,246,255,.16), rgba(104,75,255,.06) 37%, transparent 70%);
  filter: blur(8px);
  transform: translate(calc(var(--pointer-left) - 210px), calc(var(--pointer-top) - 210px));
  transition: transform .09s linear;
}
.grain {
  z-index: 50;
  opacity: .11;
  background-image: repeating-radial-gradient(circle at 10% 20%, transparent 0 1px, rgba(255,255,255,.13) 1.5px 2px, transparent 2.5px 5px);
  background-size: 7px 7px;
  mix-blend-mode: soft-light;
}

.site-header,
.store-shell,
.site-footer {
  width: calc(100% - 44px);
  max-width:1180px;
  margin-inline: auto;
}

.product-page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 14px;
  width: 100%;
  margin-bottom: 4px;
}

.product-page-links > span { color: rgba(150, 173, 189, .62); }
.product-page-links a { color: var(--cyan); text-decoration: none; }
.product-page-links a:hover { color: var(--ice); }
.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  min-height: 88px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  justify-self: start;
  direction: ltr;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--ice);
  border: 1px solid rgba(95,246,255,.54);
  clip-path: polygon(50% 0,90% 20%,100% 64%,70% 100%,24% 94%,0 55%,12% 16%);
  background: linear-gradient(145deg, rgba(95,246,255,.22), rgba(71,118,255,.12) 48%, rgba(156,98,255,.2));
  box-shadow: inset 0 0 23px rgba(95,246,255,.2), 0 0 30px rgba(95,246,255,.17);
  font-weight: 700;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(202,255,255,.34);
  clip-path: inherit;
  animation: logo-pulse 3.8s ease-in-out infinite;
}
.brand-copy strong,
.brand-copy small { display: block; text-align: left; }
.brand-copy strong { letter-spacing: .24em; }
.brand-copy small { color: var(--fog); font-size: 10px; letter-spacing: .18em; }
.sector-code {
  justify-self: center;
  color: rgba(173,205,220,.65);
  font-family: Consolas, monospace;
  font-size: 10px;
  letter-spacing: .15em;
}
.sector-code::before,
.sector-code::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 9px 3px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.sector-code::after { transform: scaleX(-1); }
.system-status {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  color: var(--fog);
  font-size: 11px;
}
.system-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 17px var(--mint);
  animation: signal 2.7s ease-in-out infinite;
}

.store-shell { position: relative; z-index: 2; padding: 14px 0 42px; }
.checkout-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 490px;
  margin: 0 auto 22px;
}
.progress-line {
  position: absolute;
  top: 14px;
  right: 16.666%;
  left: 16.666%;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}
.progress-line span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 12px var(--cyan);
  transition: width .4s ease;
}
.progress-step {
  position: relative;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  color: var(--fog);
  background: transparent;
}
.progress-step span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fog);
  background: var(--void);
  font-family: Consolas, monospace;
  font-size: 9px;
  transition: .3s ease;
}
.progress-step b { font-size: 10px; font-weight: 500; }
.progress-step.is-active,
.progress-step.is-complete { color: var(--ink); }
.progress-step.is-active span,
.progress-step.is-complete span {
  border-color: var(--cyan);
  color: var(--void);
  background: linear-gradient(145deg, var(--cyan), var(--violet));
  box-shadow: 0 0 22px rgba(95,246,255,.28);
}

.store-stage { display: none; min-height: 670px; animation: stage-in .65s cubic-bezier(.16,.8,.2,1) both; }
.store-stage.is-active { display: block; }
.catalog-error {
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255,123,189,.3);
  color: #ffc2df;
  background: rgba(255,123,189,.08);
  text-align: center;
}
.product-selector {
  display: flex;
  gap: 9px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.product-selector button {
  display: grid;
  grid-template-columns: auto minmax(110px,1fr);
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 190px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px 17px 4px 17px;
  color: var(--ink);
  background: rgba(7,13,33,.72);
  cursor: pointer;
  text-align: right;
}
.product-selector button.is-active { border-color: var(--cyan); box-shadow: 0 0 22px rgba(95,246,255,.12); }
.selector-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 4px 13px 4px 13px;
  background: linear-gradient(145deg, rgba(95,246,255,.22), rgba(156,98,255,.22));
}
.selector-glyph img { width: 100%; height: 100%; object-fit: cover; }
.product-selector button > span:last-child { display: grid; }
.product-selector strong { font-size: 12px; }
.product-selector small { color: var(--fog); font-size: 9px; }

.product-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(350px,.9fr) minmax(390px,1.1fr);
  gap: clamp(22px,4.6vw,68px);
  min-height: 680px;
  padding: 30px 0 58px;
}
.product-content {
  position: relative;
  z-index: 5;
  align-self: center;
  max-width: 590px;
  padding-inline: clamp(0px,1.6vw,22px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}
.eyebrow::before {
  content: "";
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
  box-shadow: 0 0 8px rgba(95,246,255,.52);
}
h1,h2,h3,p { margin-top: 0; }
h1 {
  margin: 15px 0 2px;
  font-size: clamp(48px,7vw,96px);
  line-height: .94;
  letter-spacing: -.045em;
}
.duration-title {
  margin-bottom: 16px;
  color: transparent;
  background: linear-gradient(90deg,var(--ice),var(--cyan) 42%,var(--violet) 83%,var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(95,246,255,.24));
  font-size: clamp(34px,5.1vw,68px);
  font-weight: 700;
  line-height: 1;
}
.product-lead,
.form-heading p,
.payment-heading p,
.success-layout > p { color: var(--fog); line-height: 1.9; }
.product-lead { max-width: 500px; margin-bottom: 18px; }
.feature-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin: 19px 0 23px;
  padding: 11px 0;
  border-block: 1px solid rgba(122,230,255,.12);
  list-style: none;
}
.feature-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding-inline: 9px;
}
.feature-list li:first-child { justify-content: flex-start; padding-inline-start: 0; }
.feature-list li:last-child { justify-content: flex-end; padding-inline-end: 0; }
.feature-list li + li { border-inline-start: 1px solid rgba(122,230,255,.1); }
.feature-list li > span { color: var(--violet); font-family: Consolas,monospace; font-size: 9px; }
.feature-list li div { display: grid; min-width: 0; }
.feature-list b { font-size: 11px; white-space: nowrap; }
.feature-list small { overflow: hidden; color: var(--fog); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-flow {
  position: relative;
  padding: 4px 17px 4px 0;
  border-inline-start: 1px solid rgba(95,246,255,.3);
  background: linear-gradient(90deg,transparent,rgba(95,246,255,.025));
}
.purchase-flow::before {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  top: 15%;
  width: 3px;
  height: 32%;
  background: var(--cyan);
  box-shadow: 0 0 15px var(--cyan);
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 4px 0 14px;
}
.price-row > div { display: flex; align-items: baseline; gap: 9px; }
.price-row strong { font-size: clamp(48px,5vw,72px); line-height: 1; }
.price-row > div span { color: var(--fog); font-size: 11px; }
.availability { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); font-size: 10px; }
.availability i,
.pending-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.availability.is-unavailable { color: var(--danger); }
.sales-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -3px 0 13px;
  color: var(--fog);
  font-size: 10px;
}
.sales-proof-mark { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--void); background: var(--mint); font-size: 9px; }
.sales-proof strong { color: var(--cyan); }

.primary-action,
.secondary-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  border-radius: 3px 19px 3px 19px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.primary-action {
  position: relative;
  overflow: hidden;
  border: 0;
  color: var(--void);
  background: linear-gradient(103deg,var(--cyan),var(--ice) 50%,var(--violet));
  box-shadow: 0 0 42px rgba(95,246,255,.2), inset 0 0 0 1px rgba(255,255,255,.5);
  font-weight: 700;
}
.primary-action::after {
  content: "";
  position: absolute;
  inset: -70% auto -70% -35%;
  width: 25%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.58);
  filter: blur(4px);
  transition: left .52s ease;
}
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 0 62px rgba(95,246,255,.36); filter: saturate(1.16); }
.primary-action:hover::after { left: 120%; }
.primary-action:disabled { opacity: .52; cursor: not-allowed; transform: none; }
.secondary-action { margin-top: 9px; border: 1px solid var(--line); color: var(--fog); background: rgba(7,13,33,.34); }
.secondary-action:hover { border-color: var(--line-bright); color: var(--ink); }
.microcopy { margin: 11px 4px 0; color: var(--fog); font-size: 9px; line-height: 1.7; text-align: center; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 7px; }
.secure-note span { color: var(--mint); text-shadow: 0 0 10px var(--mint); }

.product-visual {
  position: relative;
  align-self: center;
  width: min(100%,620px);
  aspect-ratio: 1;
  justify-self: end;
  direction: ltr;
  transform: translate(calc(var(--pointer-x) * 11px),calc(var(--pointer-y) * 8px));
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.product-visual::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background:
    radial-gradient(circle,rgba(1,2,8,.98) 0 13%,rgba(40,37,109,.78) 22%,rgba(95,246,255,.27) 32%,rgba(156,98,255,.15) 46%,transparent 69%),
    conic-gradient(from 20deg,transparent,rgba(95,246,255,.26),transparent 20%,rgba(156,98,255,.34),transparent 45%,rgba(255,78,199,.22),transparent 75%);
  filter: blur(8px);
  animation: core-breathe 5s ease-in-out infinite;
}
.lens-flare {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 3%;
  right: 3%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(95,246,255,.12),var(--ice),rgba(156,98,255,.28),transparent);
  box-shadow: 0 0 15px var(--cyan),0 0 55px rgba(71,118,255,.4);
  animation: flare 4.8s ease-in-out infinite;
}
.orbit-system { position: absolute; inset: 2%; width: 96%; height: 96%; filter: drop-shadow(0 0 9px rgba(95,246,255,.2)); }
.orbit-one { transform-origin: center; animation: spin 30s linear infinite; }
.orbit-two { transform-origin: center; animation: spin-reverse 23s linear infinite; }
.orbit-three { transform-origin: center; animation: spin 58s linear infinite; }
.gyro {
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(95,246,255,.28);
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgba(95,246,255,.08),0 0 36px rgba(95,246,255,.07);
  transform: rotateX(72deg) rotateZ(22deg);
  animation: gyro 18s linear infinite;
}
.gyro-two { inset: 16% 25%; border-color: rgba(156,98,255,.36); transform: rotateY(71deg) rotateZ(-32deg); animation-direction: reverse; animation-duration: 25s; }
.canva-glyph {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 31%;
  aspect-ratio: .74;
  overflow: hidden;
  color: var(--ice);
  clip-path: polygon(50% 0,88% 13%,100% 51%,78% 92%,42% 100%,7% 77%,0 28%);
  border: 1px solid rgba(202,255,255,.67);
  background:
    linear-gradient(135deg,rgba(202,255,255,.22),transparent 23%,rgba(71,118,255,.17) 45%,rgba(156,98,255,.24) 73%,rgba(2,5,17,.83)),
    rgba(8,15,40,.63);
  box-shadow: inset 0 0 55px rgba(95,246,255,.22),0 0 65px rgba(95,246,255,.29);
  backdrop-filter: blur(10px);
  transform: translate(-50%,-50%) perspective(900px) rotateY(calc(-10deg + var(--pointer-x) * 10deg)) rotateX(calc(var(--pointer-y) * -7deg));
  transition: transform .36s ease-out;
  animation: float 5.3s ease-in-out infinite;
}
.canva-glyph::before {
  content: "";
  position: absolute;
  inset: -65%;
  background: linear-gradient(110deg,transparent 40%,rgba(232,255,255,.44) 50%,transparent 59%);
  animation: scan 4.1s ease-in-out infinite;
}
.canva-glyph::after {
  content: "";
  position: absolute;
  inset: 7%;
  clip-path: inherit;
  border: 1px solid rgba(202,255,255,.19);
  background: repeating-linear-gradient(0deg,transparent 0 6px,rgba(95,246,255,.035) 7px 8px);
}
.canva-glyph > span { position: relative; z-index: 3; font-family: "Segoe UI",sans-serif; font-size: clamp(70px,10vw,140px); font-weight: 700; line-height: 1; text-shadow: 0 0 10px var(--cyan),0 0 38px rgba(95,246,255,.6),10px 0 38px rgba(156,98,255,.35); }
.canva-glyph > small { position: absolute; z-index: 5; inset: auto 0 12%; color: rgba(225,252,255,.72); font-family: Consolas,monospace; font-size: 8px; letter-spacing: .19em; text-align: center; }
.canva-glyph img { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.canva-glyph.has-image > small { padding: 4px; background: rgba(1,2,8,.65); }
.energy-particle { position: absolute; z-index: 4; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan),0 0 40px var(--violet); }
.particle-one { top: 22%; left: 22%; animation: particle 7s ease-in-out infinite; }
.particle-two { right: 16%; top: 39%; animation: particle 5.5s .8s ease-in-out infinite reverse; }
.particle-three { bottom: 23%; left: 28%; background: var(--pink); animation: particle 6.5s 1.4s ease-in-out infinite; }
.holo-label {
  position: absolute;
  z-index: 5;
  min-width: 125px;
  padding: 8px 11px;
  color: var(--fog);
  border-inline-start: 1px solid rgba(95,246,255,.48);
  background: linear-gradient(90deg,transparent,rgba(5,12,34,.7));
  backdrop-filter: blur(8px);
  font-size: 9px;
  letter-spacing: .06em;
}
.holo-label b { display: block; color: var(--ink); font-size: 11px; letter-spacing: 0; }
.holo-one { top: 17%; right: 4%; font-family: Consolas,monospace; color: var(--cyan); }
.holo-two { bottom: 17%; left: 5%; text-align: right; }
.holo-three { right: 7%; bottom: 12%; }
.signal-bars { position: absolute; z-index: 4; left: 17%; bottom: 22%; display: flex; align-items: end; gap: 4px; height: 20px; }
.signal-bars i { display: block; width: 3px; background: var(--cyan); box-shadow: 0 0 8px rgba(95,246,255,.5); }
.signal-bars i:nth-child(1){height:5px}.signal-bars i:nth-child(2){height:9px}.signal-bars i:nth-child(3){height:14px}.signal-bars i:nth-child(4){height:20px}
.spectrum {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg,transparent,rgba(4,10,27,.8) 18%,rgba(4,10,27,.8) 82%,transparent);
  backdrop-filter: blur(12px);
}
.spectrum span { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; color: var(--fog); font-size: 10px; }
.spectrum span + span { border-inline-start: 1px solid rgba(122,230,255,.1); }
.spectrum i { color: var(--cyan); font-style: normal; font-family: Consolas,monospace; }

.form-layout {
  display: grid;
  grid-template-columns: minmax(270px,.75fr) minmax(380px,1.25fr);
  align-items: center;
  gap: clamp(24px,6vw,82px);
  min-height: 650px;
  padding: 35px clamp(0px,3vw,40px);
  direction: ltr;
}
.activation-visual { position: relative; display: grid; place-items: center; width: min(100%,420px); aspect-ratio: 1; justify-self: center; }
.activation-visual::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(95,246,255,.16),rgba(71,118,255,.11) 42%,transparent 68%);
  filter: blur(12px);
}
.activation-ring { position: absolute; inset: 8%; border: 1px solid rgba(95,246,255,.34); border-radius: 50%; background: conic-gradient(from 10deg,transparent,rgba(95,246,255,.16),transparent 27%,rgba(156,98,255,.2),transparent 64%); box-shadow: inset 0 0 46px rgba(95,246,255,.08),0 0 45px rgba(71,118,255,.13); animation: spin 21s linear infinite; }
.activation-ring.ring-b { inset: 22%; border-style: dashed; border-color: rgba(156,98,255,.46); animation: spin-reverse 15s linear infinite; }
.activation-core { position: relative; z-index: 2; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 50%; color: var(--ice); border: 1px solid rgba(202,255,255,.6); background: radial-gradient(circle at 34% 27%,rgba(202,255,255,.25),rgba(36,46,112,.7) 48%,rgba(3,7,23,.96)); box-shadow: inset 0 0 44px rgba(95,246,255,.17),0 0 62px rgba(71,118,255,.3); font-family: Consolas,monospace; font-size: clamp(48px,7vw,88px); }
.form-panel,
.payment-layout,
.success-layout {
  border: 1px solid rgba(122,230,255,.21);
  border-radius: 3px 42px 3px 42px;
  background: linear-gradient(145deg,rgba(12,20,49,.94),rgba(5,9,25,.93));
  box-shadow: var(--shadow),inset 0 0 45px rgba(95,246,255,.035);
  backdrop-filter: blur(24px);
}
.form-panel { position: relative; overflow: hidden; direction: rtl; padding: clamp(24px,4vw,48px); }
.form-panel::before,
.payment-layout::before,
.success-layout::before { content:""; position:absolute; top:0; right:0; width:52%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan)); box-shadow:0 0 18px var(--cyan); }
.form-heading { margin-bottom: 22px; }
h2 { margin: 9px 0 8px; font-size: clamp(34px,5vw,56px); line-height: 1.15; }
.form-heading p,
.payment-heading p { max-width: 620px; margin-bottom: 0; }
.order-summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin-bottom:22px; padding:14px 0; border-block:1px solid rgba(122,230,255,.13); }
.summary-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line-bright); border-radius:4px 14px 4px 14px; color:var(--void); background:linear-gradient(145deg,var(--cyan),var(--violet)); font-weight:700; }
.order-summary small { display:block; color:var(--fog); font-size:9px; }
.order-summary strong { display:block; margin-top:2px; font-size:12px; }
.summary-price { text-align:left; }
.customer-form,#confirmation-form { display:grid; gap:14px; }
.field-grid { display:grid; grid-template-columns:1fr; gap:4px; }
.field { display:grid; gap:7px; }
.field > span { color:var(--fog); font-size:11px; }
.field em { color:rgba(150,173,189,.65); font-size:9px; font-style:normal; }
.field input { width:100%; min-height:52px; padding:0 14px; border:1px solid var(--line); border-radius:3px 15px 3px 15px; outline-color:var(--cyan); color:var(--ink); background:rgba(2,6,20,.72); transition:border-color .2s ease,box-shadow .2s ease; }
.field input:focus { border-color:rgba(95,246,255,.6); box-shadow:0 0 22px rgba(95,246,255,.1); }
.field input[aria-invalid="true"] { border-color:var(--danger); }
.field > small { min-height:15px; color:var(--danger); font-size:9px; }
.form-error { min-height:17px; color:var(--danger); font-size:10px; }

.payment-layout { position:relative; width:min(760px,100%); margin-inline:auto; padding:clamp(25px,5vw,50px); overflow:hidden; }
.payment-heading { margin-bottom:24px; }
.order-code-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px 18px; margin-bottom:16px; padding:16px 18px; border:1px solid var(--line-bright); border-radius:3px 17px 3px 17px; background:linear-gradient(120deg,rgba(95,246,255,.07),rgba(156,98,255,.08)); }
.order-code-panel > span { color:var(--fog); font-size:9px; }
.order-code-panel strong { grid-row:2; direction:ltr; text-align:right; letter-spacing:.08em; }
.order-code-panel button { grid-column:2; grid-row:1 / span 2; padding:8px 11px; border:1px solid var(--line); border-radius:3px 11px 3px 11px; color:var(--ink); background:rgba(5,7,19,.46); cursor:pointer; }
.payment-card,.confirmation-panel { margin-bottom:16px; padding:20px; border:1px solid var(--line); border-radius:3px 20px 3px 20px; background:rgba(4,9,26,.62); }
.payment-card-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.payment-card-top small { display:block; color:var(--fog); font-size:9px; }
.payment-card-top strong { display:block; margin-top:3px; font-size:28px; }
.payment-card-top strong b { font:inherit; }
.payment-card-top strong span { color:var(--fog); font-size:11px; }
.secure-chip { padding:7px 10px; border:1px solid rgba(129,255,212,.22); border-radius:999px; color:var(--mint); background:rgba(129,255,212,.06); font-size:9px; }
.payment-methods { display:flex; flex-wrap:wrap; gap:8px; margin:17px 0; }
.payment-methods span { padding:7px 10px; border:1px solid var(--line); border-radius:3px 9px 3px 9px; color:var(--fog); background:rgba(255,255,255,.02); font-size:9px; direction:ltr; }
.confirmation-panel { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:13px 15px; }
.confirmation-panel #confirmation-form { grid-column:1 / -1; }
.confirmation-copy h3 { margin-bottom:4px; font-size:18px; }
.confirmation-copy p { margin-bottom:0; color:var(--fog); font-size:11px; line-height:1.8; }
.waiting-signal { position:relative; display:grid; place-items:center; width:50px; height:50px; border:1px solid rgba(156,98,255,.28); border-radius:50%; background:rgba(156,98,255,.08); }
.waiting-signal::before { content:""; position:absolute; inset:7px; border:1px solid rgba(95,246,255,.22); border-radius:50%; animation:waiting 1.8s ease-in-out infinite; }
.waiting-signal span { width:9px; height:9px; border-radius:50%; background:var(--violet); box-shadow:0 0 16px var(--violet); }
.honey { position:absolute!important; left:-9999px!important; opacity:0!important; }

.success-layout { position:relative; width:min(640px,100%); margin:45px auto 0; padding:clamp(28px,5vw,54px); overflow:hidden; text-align:center; }
.success-core { position:relative; display:grid; place-items:center; width:150px; height:150px; margin:8px auto 28px; }
.success-core::before,.success-core::after { content:""; position:absolute; inset:0; border:1px solid rgba(95,246,255,.45); border-radius:50%; box-shadow:0 0 38px rgba(95,246,255,.2); animation:confirm-ring 2.6s ease-out infinite; }
.success-core::after { inset:17%; border-color:rgba(156,98,255,.54); animation-delay:.85s; }
.success-core span { position:relative; z-index:2; display:grid; place-items:center; width:72px; height:72px; border-radius:50%; color:var(--void); background:radial-gradient(circle,var(--ice),var(--cyan)); box-shadow:0 0 62px rgba(95,246,255,.58); font-size:30px; font-weight:700; }
.success-layout .eyebrow { justify-content:center; }
.success-layout h2 { margin-top:10px; }
.success-ticket { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:24px 0; overflow:hidden; border:1px solid var(--line); border-radius:3px 17px 3px 17px; background:var(--line); text-align:right; }
.success-ticket > div { padding:16px; background:var(--panel-solid); }
.success-ticket small { display:block; color:var(--fog); font-size:9px; }
.success-ticket strong { display:inline-flex; align-items:center; gap:7px; margin-top:4px; font-size:11px; }
.pending-status { color:var(--violet); }

.site-footer { position:relative; z-index:3; display:flex; flex-wrap:wrap; justify-content:space-between; gap:13px 20px; padding:23px 0 33px; border-top:1px solid var(--line); color:var(--fog); font-size:9px; }
.site-footer a { color:var(--cyan); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spin-reverse { to { transform:rotate(-360deg); } }
@keyframes gyro { to { rotate:1turn; } }
@keyframes stage-in { from { opacity:0; transform:translateY(16px) scale(.99); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@keyframes logo-pulse { 50% { opacity:.35; transform:scale(.82) rotate(8deg); } }
@keyframes signal { 50% { opacity:.38; transform:scale(.68); } }
@keyframes core-breathe { 50% { transform:scale(1.09) rotate(8deg); filter:blur(11px) brightness(1.2); } }
@keyframes flare { 0%,100% { opacity:.3; transform:translateY(-50%) scaleX(.75); } 50% { opacity:.95; transform:translateY(-50%) scaleX(1.05); } }
@keyframes float { 0%,100% { margin-top:-8px; } 50% { margin-top:11px; } }
@keyframes scan { 0% { transform:translateX(-60%) rotate(9deg); } 56%,100% { transform:translateX(62%) rotate(9deg); } }
@keyframes particle { 50% { transform:translate(19px,-15px) scale(1.4); opacity:.55; } }
@keyframes waiting { 0%,100% { transform:scale(.84); opacity:.45; } 50% { transform:scale(1.12); opacity:1; } }
@keyframes confirm-ring { 0% { transform:scale(.62); opacity:0; } 38% { opacity:.8; } 100% { transform:scale(1.4); opacity:0; } }

@media (max-width:900px) {
  .product-layout { grid-template-columns:1fr; gap:0; padding-top:22px; }
  .product-content { justify-self:center; max-width:650px; text-align:center; }
  .product-lead { margin-inline:auto; }
  .purchase-flow { padding-inline:0; border-inline-start:0; }
  .purchase-flow::before { display:none; }
  .price-row,.secure-note { justify-content:center; }
  .price-row { gap:28px; }
  .product-visual { width:min(100%,540px); margin-top:-12px; justify-self:center; }
  .spectrum { position:relative; margin-top:-24px; }
  .form-layout { grid-template-columns:1fr; gap:0; }
  .activation-visual { width:min(100%,270px); margin-bottom:-30px; }
}

@media (max-width:580px) {
  .site-header,.store-shell,.site-footer {
    width:calc(100% - 24px);
    max-width:100%;
  }
  .site-header { grid-template-columns:1fr auto; min-height:66px; }
  .brand { gap:10px; }
  .brand-mark { width:39px; height:39px; }
  .brand-copy strong { font-size:13px; }
  .sector-code,.brand-copy small { display:none; }
  .system-status { font-size:0; }
  .system-status::after { content:"متصل"; font-size:9px; }
  .store-shell { padding-top:4px; }
  .checkout-progress {
    position:sticky;
    top:0;
    z-index:35;
    max-width:none;
    margin:0 -12px 8px;
    padding:8px 12px 6px;
    background:linear-gradient(to bottom,rgba(1,2,8,.96),rgba(1,2,8,.78),transparent);
    backdrop-filter:blur(12px);
  }
  .progress-line { top:21px; }
  .progress-step { gap:3px; }
  .progress-step span { width:27px; height:27px; }
  .store-stage { min-height:560px; }
  .product-layout {
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    max-width:100%;
    min-height:0;
    padding:0 0 84px;
    isolation:isolate;
  }
  .product-layout > * { min-width:0; }
  .product-layout::after {
    content:"";
    position:absolute;
    z-index:-1;
    top:-48px;
    right:0;
    left:0;
    width:100%;
    max-width:100%;
    height:460px;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 37%,rgba(43,204,255,.18),transparent 39%),
      radial-gradient(ellipse at 63% 44%,rgba(120,70,255,.2),transparent 48%),
      radial-gradient(ellipse at 28% 39%,rgba(255,78,199,.08),transparent 44%);
    filter:blur(9px) saturate(1.2);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 58%,rgba(0,0,0,.55) 76%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 58%,rgba(0,0,0,.55) 76%,transparent 100%);
  }
  .product-visual {
    order:1;
    width:100%;
    max-width:100%;
    height:235px;
    margin:0;
    overflow:hidden;
    aspect-ratio:auto;
    transform:none;
    -webkit-mask-image:radial-gradient(ellipse 76% 82% at 50% 49%,#000 0 61%,rgba(0,0,0,.78) 75%,rgba(0,0,0,.26) 90%,transparent 100%);
    mask-image:radial-gradient(ellipse 76% 82% at 50% 49%,#000 0 61%,rgba(0,0,0,.78) 75%,rgba(0,0,0,.26) 90%,transparent 100%);
  }
  .product-visual::before {
    inset:-18px 12% -44px;
    filter:blur(10px);
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 36%,rgba(0,0,0,.82) 53%,rgba(0,0,0,.35) 69%,transparent 82%);
    mask-image:radial-gradient(ellipse at center,#000 0 36%,rgba(0,0,0,.82) 53%,rgba(0,0,0,.35) 69%,transparent 82%);
  }
  .orbit-system {
    top:50%;
    left:50%;
    width:calc(100% - 12px);
    max-width:340px;
    height:auto;
    aspect-ratio:1;
    inset:auto;
    transform:translate(-50%,-50%);
    -webkit-mask-image:radial-gradient(circle at center,#000 0 64%,rgba(0,0,0,.75) 74%,rgba(0,0,0,.28) 87%,transparent 98%);
    mask-image:radial-gradient(circle at center,#000 0 64%,rgba(0,0,0,.75) 74%,rgba(0,0,0,.28) 87%,transparent 98%);
  }
  .gyro-one { inset:12px 70px; }
  .gyro-two { inset:25px 100px; }
  .canva-glyph {
    width:92px;
    height:128px;
    aspect-ratio:auto;
    animation-duration:6s;
  }
  .canva-glyph > span { font-size:64px; }
  .canva-glyph > small { font-size:6px; }
  .lens-flare {
    left:2%;
    right:2%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
  }
  .holo-label,.energy-particle,.signal-bars { display:none; }
  .product-content {
    order:2;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:4px 2px 0;
    text-align:right;
  }
  .eyebrow { font-size:10px; }
  h1 { margin-top:10px; font-size:clamp(40px,14vw,58px); line-height:1; }
  .duration-title { margin-bottom:12px; font-size:clamp(29px,9.5vw,39px); line-height:1.05; }
  h1,.duration-title,.product-lead { max-width:100%; overflow-wrap:anywhere; }
  .product-lead { margin-bottom:13px; font-size:12px; line-height:1.75; }
  .feature-list {
    grid-template-columns:repeat(3,1fr);
    gap:0;
    margin:13px 0 15px;
    padding:7px 0;
  }
  .feature-list li,.feature-list li:first-child,.feature-list li:last-child {
    display:grid;
    justify-items:center;
    justify-content:stretch;
    gap:2px;
    min-width:0;
    padding:5px 4px;
    text-align:center;
  }
  .feature-list li + li { border-inline-start:1px solid rgba(122,230,255,.1); border-top:0; }
  .feature-list li > span { display:none; }
  .feature-list b { font-size:9px; white-space:normal; }
  .feature-list small { display:none; }
  .purchase-flow { padding:0; }
  .price-row { justify-content:space-between; flex-wrap:nowrap; gap:12px; margin-bottom:8px; }
  .price-row strong { font-size:44px; }
  .price-row > div span { font-size:9px; }
  .availability { font-size:9px; }
  .sales-proof { margin-bottom:5px; }
  body[data-stage="1"] #start-order-button {
    position:fixed;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    left:12px;
    z-index:70;
    width:auto;
    max-width:calc(100% - 24px);
    margin-inline:auto;
    min-height:56px;
    box-shadow:0 8px 34px rgba(0,0,0,.62),0 0 42px rgba(95,246,255,.3),inset 0 0 0 1px rgba(255,255,255,.5);
  }
  .secure-note { margin-top:7px; font-size:8px; }
  .spectrum {
    order:3;
    position:relative;
    grid-template-columns:repeat(3,1fr);
    margin-top:12px;
  }
  .spectrum span { gap:4px; padding:8px 3px; font-size:8px; text-align:center; }
  .spectrum span + span { border-inline-start:1px solid rgba(122,230,255,.08); border-top:0; }
  .form-layout { min-height:0; padding:8px 0 30px; }
  .activation-visual { display:none; }
  .form-panel,.payment-layout,.success-layout {
    border-radius:3px 24px 3px 24px;
    padding:20px 16px;
    backdrop-filter:blur(12px);
  }
  .form-heading { margin-bottom:17px; }
  h2 { font-size:clamp(30px,10vw,42px); }
  .form-heading p,.payment-heading p { font-size:11px; line-height:1.75; }
  .order-summary { grid-template-columns:auto 1fr; }
  .summary-price { grid-column:2; text-align:right; }
  .field input { min-height:50px; }
  .payment-layout { margin-top:8px; }
  .payment-card,.confirmation-panel { padding:16px; }
  .payment-card-top { align-items:flex-start; flex-direction:column; }
  .confirmation-panel { grid-template-columns:42px 1fr; }
  .waiting-signal { width:42px; height:42px; }
  .success-layout { margin-top:12px; }
  .success-core { width:120px; height:120px; margin-bottom:22px; }
  .success-ticket { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; align-items:center; padding-bottom:30px; text-align:center; }
  body[data-stage="1"] .site-footer { padding-bottom:92px; }
}

@media (max-width:370px) {
  .site-header,.store-shell,.site-footer { width:calc(100% - 18px); max-width:100%; }
  .product-visual { height:210px; }
  .orbit-system { width:calc(100% - 8px); max-width:310px; height:auto; }
  .canva-glyph { width:82px; height:114px; }
  .feature-list b { font-size:8px; }
  .spectrum span { font-size:7px; }
}

@media (hover:none),(pointer:coarse) {
  .cursor-aura { display:none; }
  .product-visual { transition:none; }
  .primary-action:hover { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .cursor-aura { display:none; }
}