@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bebas-neue-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bebas-neue-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sora-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sora-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sora-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sora-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/sora-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/sora-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/syne-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/syne-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/syne-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/syne-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/syne-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/syne-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #05070d;
  --surface: #0b1422;
  --fg: #2ee6ff;
  --muted: #8ea6bf;
  --primary: #2ee6ff;
  --accent: #0a7cff;
  --line: #1a3550;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Sora, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
}
body.stage {
  background-image:
    linear-gradient(100deg, rgba(5, 7, 13, 0.92), rgba(5, 7, 13, 0.62) 38%, rgba(5, 7, 13, 0.18) 68%, rgba(5, 7, 13, 0.42)),
    linear-gradient(to top, var(--bg), transparent 18%),
    url("server-room.jpg");
  background-size: cover;
  background-position: 72% center;
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(12px);
}
.bar, .wrap, footer .bar {
  width: min(1152px, 100%);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.bar {
  display: flex;
  min-height: 64px;
  height: auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.logo { font-family: Syne, sans-serif; font-size: 1rem; font-weight: 700; flex: none; }
nav { display: flex; width: 100%; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
nav a { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
nav a.pill, .pill {
  display: inline-flex;
  height: 32px;
  align-items: center;
  border-radius: 999px;
  background: transparent;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 650;
  color: #ff2430;
  border: 1px solid rgba(255, 36, 48, 0.8);
  box-shadow: 0 0 16px rgba(255, 36, 48, 0.85);
}
.tools { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 20px 16px; }
.ghost, .xbtn {
  display: inline-flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 36, 48, 0.8);
  color: #ff2430;
  background: transparent;
  box-shadow: 0 0 16px rgba(255, 36, 48, 0.85);
}
.ghost svg, .xbtn { filter: drop-shadow(0 0 6px #ff2430); }
.hero {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(100deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 62%, transparent) 38%, color-mix(in srgb, var(--bg) 18%, transparent) 68%, color-mix(in srgb, var(--bg) 42%, transparent)),
    linear-gradient(to top, var(--bg), transparent 18%),
    url("server-room.jpg");
  background-size: cover;
  background-position: 72% center;
}
.slogan {
  margin: 64px auto 16px;
  width: min(1152px, calc(100% - 40px));
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 70%, transparent);
  padding: 32px;
  box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 45%, transparent);
}
h1, h2 { font-family: Syne, sans-serif; margin: 0; }
h1 span, .right { display: block; text-align: right; }
h1 { font-size: clamp(1.8rem, 4vw, 2.25rem); line-height: 1.15; font-weight: 800; }
h1 .big { margin-top: 16px; font-weight: 650; }
.spark-gold, .spark-neon, .spark-green-fire, .spark-green-glass, .spark-yellow, .spark-red {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: spark 2.6s ease-in-out infinite;
}
.spark-red {
  background-image: linear-gradient(100deg, #8c1020 0%, #ff2430 26%, #ffd0d4 44%, #fff 50%, #ff8a92 58%, #c01020 80%, #ff2430 100%);
  filter: drop-shadow(0 0 10px rgba(255, 36, 48, 0.7));
  font-family: "Bebas Neue", Impact, sans-serif;
}
.spark-gold {
  background-image: linear-gradient(100deg, #8a5a12 0%, #e6b325 26%, #fff6c8 44%, #fff 50%, #f0c14a 58%, #a56b10 80%, #e6b325 100%);
  filter: drop-shadow(0 0 10px rgba(230, 179, 37, 0.7));
}
.spark-neon {
  background-image: linear-gradient(100deg, #0678c4 0%, #2ee6ff 28%, #f7feff 44%, #fff 50%, #7af6ff 58%, #1496d4 80%, #2ee6ff 100%);
  filter: drop-shadow(0 0 12px rgba(46, 230, 255, 0.8));
}
.spark-neon-gold {
  background-image: linear-gradient(90deg, #2ee6ff 0%, #99aaff 40%, #ffe14a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(46, 230, 255, 0.55));
}
.spark-gold-fire {
  background-image: linear-gradient(90deg, #e6b325 0%, #ff7a18 45%, #ff2a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 77, 0, 0.55));
}
.spark-green-glass {
  background-image: linear-gradient(100deg, #178f2c 0%, #24c83a 28%, #e7ffe8 44%, #fff 50%, #b8f5bc 58%, #1eae34 80%, #24c83a 100%);
  filter: drop-shadow(0 0 10px rgba(36, 200, 58, 0.7));
}
.spark-green-fire {
  background-image: linear-gradient(100deg, #067a32 0%, #3dff7a 22%, #f4fff8 38%, #fff 46%, #ffe14a 56%, #ff7a18 70%, #ff2a00 86%, #c01010 100%);
  filter: drop-shadow(0 0 10px rgba(255, 59, 26, 0.45));
}
.spark-yellow {
  background-image: linear-gradient(100deg, #c9a000 0%, #ffe14a 24%, #fff8c4 40%, #fff 50%, #fff6b0 58%, #ffe14a 74%, #f0c400 100%);
  filter: drop-shadow(0 0 10px rgba(255, 225, 74, 0.75));
}
@keyframes spark {
  0%, 100% { background-position: 120% 50%; }
  50% { background-position: -20% 50%; }
}
.section { width: min(1152px, calc(100% - 40px)); margin: 0 auto; padding: 16px 0 80px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cards.two { grid-template-columns: 1fr; }
article, .card, .panel {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 20px;
}
article, .center { text-align: center; }
article p, .muted { color: var(--muted); font-size: 0.92rem; }
.price-row { margin-top: 32px; }
.price {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--primary) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 0 28px color-mix(in srgb, var(--primary) 45%, transparent);
  backdrop-filter: blur(10px);
}
.price strong {
  display: block;
  font-family: Syne, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  white-space: nowrap;
}
.page { width: min(1152px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0; }
.neon {
  border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  border-radius: 16px;
  padding: 24px 32px;
  text-align: center;
  box-shadow: 0 0 32px color-mix(in srgb, var(--primary) 25%, transparent);
}
.lede { max-width: 48rem; margin: 16px auto 0; color: var(--muted); }
ul.dots {
  width: fit-content;
  max-width: 48rem;
  margin: 16px auto 0;
  padding-left: 1.25rem;
  text-align: left;
  color: var(--muted);
  list-style: disc;
}
ul.dots li { margin: 16px 0; }
ul.dots li::marker { color: var(--primary); }
.orange { color: #ff6a2a; font-weight: 600; }
.gold { color: #ffe14a; }
.fire { color: #ff7a18; }
.stack { display: grid; gap: 16px; margin-top: 32px; }
.deal {
  margin-top: 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 50%, transparent);
  background: hsl(48 50% 62% / 15%);
  padding: 12px 16px;
  text-align: center;
  font-size: 0.875rem;
}
.bomb { display: block; height: 208px; margin: 16px auto 0; }
ul.help { width: fit-content; margin: 16px auto 0; text-align: left; color: var(--muted); }
ul.help li { margin: 12px 0; }
footer { border-top: 1px solid var(--line); }
footer .bar { height: auto; padding-top: 32px; padding-bottom: 32px; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 1099px) {
  .price strong { font-size: 1.15rem; white-space: normal; }
}
@media (min-width: 1100px) {
  .logo { font-size: 1.25rem; }
  nav { width: auto; gap: 28px; }
  nav a { font-size: 0.875rem; }
  nav a.pill, .pill { height: 44px; padding: 0 20px; font-size: 0.875rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards.two { grid-template-columns: repeat(2, 1fr); }
}
html[data-view="mobile"] .cards,
html[data-view="mobile"] .cards.two,
html[data-view="phone-desktop"] .cards,
html[data-view="phone-desktop"] .cards.two {
  grid-template-columns: 1fr;
}
html[data-view="desktop"] .grid-2x2,
html[data-view="phone-desktop"] .grid-2x2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html[data-view="desktop"] .grid-2x2 > .span-center,
html[data-view="phone-desktop"] .grid-2x2 > .span-center {
  grid-column: 1 / -1;
  width: calc(50% - 0.5rem);
  justify-self: center;
}
html[data-view="phone-desktop"] .logo { font-size: 1.15rem; }
html[data-view="phone-desktop"] nav a { font-size: 0.95rem; }
html[data-view="phone-desktop"] nav a.pill,
html[data-view="phone-desktop"] .pill {
  height: 40px;
  padding: 0 14px;
  font-size: 0.95rem;
}