/* Cyberpunk inherits Night City's layout, accessibility and neon controls. */
.server-cloud { display: none; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) {
  --ink: #f5f5ff;
  --paper: #080617;
  --paper-deep: #17132c;
  --amber: #5effed;
  --amber-soft: #ef8dff;
  --green: #f4ff90;
  --muted: #bcc4df;
  --line: #605a88;
  background:
    radial-gradient(ellipse at 0% 30%, #9b37ea2b, transparent 40rem),
    radial-gradient(ellipse at 100% 65%, #00e6d52a, transparent 48rem),
    linear-gradient(125deg, #080617, #12112a 48%, #080617);
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .site-header {
  background: linear-gradient(110deg, #c88fff0c, #61ffee08);
  border-bottom-color: #bd83ff66;
  box-shadow: 0 1px 0 #5effed22, 0 12px 50px #aa54ff10;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .brand-mark { background: #f4ff90; box-shadow: 3px 3px 0 #b169ff, 0 0 25px #f4ff9030; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .hero {
  position: relative;
  isolation: isolate;
  max-width: none;
  overflow: hidden;
  overflow: clip;
  min-height: 780px;
  padding-inline: max(clamp(1rem,4vw,4rem), calc((100vw - 1312px) / 2));
  padding-block: clamp(5rem,9vw,9rem);
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #080617; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud-image {
  position: absolute;
  inset: -5%;
  background: url("./server-cloud.webp") 65% 50% / cover no-repeat;
  opacity: .85;
  transform-origin: 68% 50%;
  animation: cloud-drift 22s ease-in-out infinite alternate;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#080617ed 0%,#080617bc 34%,#08061720 75%),
    linear-gradient(0deg,#080617 0%,transparent 25%,transparent 80%,#08061788);
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud-haze {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 70% 70%,#4effed32,transparent 40%), radial-gradient(ellipse at 80% 25%,#cb48ff38,transparent 38%);
  animation: cloud-haze 12s ease-in-out infinite alternate;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud-streams {
  position: absolute;
  inset: -20%;
  opacity: .65;
  background-image: radial-gradient(circle,#a9fff2 0 1px,transparent 2px),radial-gradient(circle,#ef8dff 0 1px,transparent 2px);
  background-size: 139px 151px, 197px 173px;
  background-position: 0 0, 59px 23px;
  animation: cloud-packets 16s linear infinite;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) h1 { font-size: clamp(3.5rem,6.5vw,7rem); letter-spacing: -.035em; color: #f7f7ff; text-shadow: 3px 2px 0 #ac49ff60; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) h1 em {
  color: #78ffed;
  background: linear-gradient(105deg,#70ffef 20%,#d4fbff 55%,#ef8dff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .lede { color: #e0e4f4; text-shadow: 0 2px 10px #080617; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .eyebrow { color: #f4ff90; border-color: #f4ff9070; background: #151329de; box-shadow: 0 0 20px #f4ff9014; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .eyebrow span { color: #f4ff90; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .quick-facts { background: #0e0c20c9; padding: 1.25rem; border: 1px solid #d6c3ff38; border-radius: 8px; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .quick-facts span { color: #cbd3e8; }

/* Crystal layers: bright bevels and restrained translucent interiors.
   Solid fallback keeps all content readable without backdrop-filter. */
body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.feature-card,.product-shot,.detail-shot,.platform-list article,.command-table) {
  background: linear-gradient(135deg,#38364e,#151528 60%,#142730);
  border: 1px solid #c8bdff70;
  border-radius: 5px 25px 5px 25px;
  box-shadow: inset 0 1px 0 #ffffff42, inset 1px 0 0 #ffffff20,
    inset 0 -1px 0 #5effed40, 0 18px 50px #00000038, 0 0 28px #b25bff15;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.feature-card,.product-shot,.detail-shot,.platform-list article,.command-table) {
    background: linear-gradient(135deg,#ffffff14,#13122ada 42%,#142532d9);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.feature-card,.product-shot,.detail-shot,.platform-list article)::before {
  padding: 2px;
  background: conic-gradient(from var(--neon-orbit),#524c75 0%,#5effed 15%,#b2fff3 24%,#524c75 38%,#524c75 48%,#bd6dff 65%,#ff96ea 78%,#524c75 95%);
  animation-duration: 6s;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.feature-card,.platform-list article)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 22px #99e8ff16;
  animation: crystal-light 7s ease-in-out infinite alternate;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-card:nth-child(even)::after { animation-delay: -3.5s; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-grid { gap: 1.75rem; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-card h3 { color: #f5f5ff; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-card p,
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .section-heading > p:last-child,
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .command-row span:last-child { color: #d5ddef; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-icon { color: #91fff2; text-shadow: 0 0 20px #5effed60; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-number { color: #e0bdff; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .section-index { color: #f4ff90; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .section-heading h2 { text-shadow: 2px 2px 0 #be60ff30; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .product-shot { padding: 1rem; transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); box-shadow: 0 0 0 6px #c99dff0d, 0 0 60px #69f6e726, 20px 24px 70px #00000066; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .product-shot img { border-radius: 4px 14px 4px 14px; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .product-shot figcaption { color: #e0e4f4; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .shot-label { color: #d5ddef; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .marquee { background: #0e0b20; color: #e4def5; border-block: 1px solid #ad77e85e; box-shadow: 0 0 26px #c255ff16; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .interface-section { background: linear-gradient(135deg,#1c1432b0,#07171ca0); }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .platforms { background: radial-gradient(ellipse at 85% 60%,#4d1d673a,transparent 65%),#0c0b1c; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .command-table { border-radius: 12px; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .final-callout { background: radial-gradient(ellipse at 20% 90%,#952be736,transparent 60%),radial-gradient(ellipse at 90% 30%,#14e7d82e,transparent 65%),#0c0b1c; border-color: #bc82ff55; }

/* Ambient sweeps run without hover, including iOS and Android. */
body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.button,.download-link) {
  color: #090718;
  background: linear-gradient(110deg,#84ffef,#63e3ff);
  border-color: #c5fff8;
  border-radius: 3px 16px 3px 3px;
  box-shadow: 0 3px 0 #207b87, 3px 4px 0 1px #bc5eff80, 0 0 24px #5effed30;
}
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .button-primary,
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .button-light { background: #f4ff90; border-color: #f7ffc3; box-shadow: 0 3px 0 #79802d,3px 4px 0 1px #b569ff,0 0 28px #f4ff9020; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .button-quiet { background: #15142ddd; color: #f1eaff; border-color: #b98aff; box-shadow: 0 3px 0 #382a5d,0 0 20px #b98aff25; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.button,.download-link)::before { animation: cyber-sweep 5.5s ease-in-out infinite; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.button,.download-link):active { transform: translateY(3px) scale(.97); box-shadow: 0 0 32px #9effee70; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .theme-picker { background: #1b1732; border-color: #b98aff70; box-shadow: inset 0 1px 0 #ffffff26; }
body:is([data-theme="cyberpunk"],[data-theme="pro"]) .theme-picker select { background: #1b1732; }
@keyframes cloud-drift { from { transform: scale(1) translate3d(-1%,0,0); } to { transform: scale(1.09) translate3d(1%,-1%,0); } }
@keyframes cloud-haze { from { opacity: .45; transform: translate3d(-2%,1%,0); } to { opacity: .85; transform: translate3d(3%,-2%,0); } }
@keyframes cloud-packets { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-151px,0); } }
@keyframes crystal-light { from { opacity: .25; } to { opacity: 1; } }
@keyframes cyber-sweep { 0%,55% { transform: translateX(-200%) skewX(-22deg); } 85%,100% { transform: translateX(500%) skewX(-22deg); } }
@media (hover: hover) and (pointer: fine) {
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.button,.download-link):hover { transform: translateY(-3px); box-shadow: 0 6px 0 #463463,0 0 36px #5effed55; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.button,.download-link):active { transform: translateY(3px) scale(.97); }
}
@media (max-width: 1100px) {
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .hero { min-height: 0; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud-image { background-position: 70% 50%; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .server-cloud::after { background: linear-gradient(180deg,#080617b8, #08061780 55%,#080617),linear-gradient(90deg,#08061780,transparent); }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .product-shot { transform: none; }
}
@media (max-width: 700px) {
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .hero { padding-block: 4rem 3rem; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) h1 { font-size: clamp(3.15rem,12vw,5rem); }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .feature-grid { gap: 1.25rem; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .product-shot { padding: .65rem; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) .quick-facts { padding: 1rem; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.feature-card,.product-shot,.detail-shot,.platform-list article,.command-table) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
/* Pause offscreen/hidden effects, never disable motion merely for mobile. */
body .motion-offscreen::before,
body .motion-offscreen::after,
body .motion-offscreen *,
body .motion-offscreen *::before,
body.page-hidden *,
body.page-hidden *::before,
body.page-hidden *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) *,
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) *::before,
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) *::after { animation: none !important; transition: none !important; }
  body:is([data-theme="cyberpunk"],[data-theme="pro"]) :is(.button,.download-link):is(:hover,:active) { transform: none; }
}