:root {
  --ink: #f5f8ff;
  --muted: #99a8bd;
  --muted-2: #66758a;
  --void: #05080d;
  --panel: #0a1019;
  --panel-2: #0d1521;
  --line: rgba(151, 185, 226, 0.16);
  --line-bright: rgba(151, 202, 255, 0.36);
  --blue: #08bdf5;
  --blue-2: #1668ff;
  --green: #70ed16;
  --gold: #ffbb18;
  --red: #ff5468;
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.48);
  --radius: 22px;
  --display: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Cascadia Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--blue) var(--void);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, rgba(18, 104, 255, 0.18), transparent 35rem),
    var(--void);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(92, 143, 198, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 143, 198, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  content: '';
  pointer-events: none;
}

::selection {
  color: #001018;
  background: var(--blue);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

code,
pre {
  font-family: var(--mono);
}

#packet-field {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.46;
  pointer-events: none;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #001019;
  background: var(--green);
  font-weight: 900;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-shell,
.site-header {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.section-gap {
  padding-block: 150px;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  margin-top: 16px;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(147, 183, 224, 0.18);
  border-radius: 16px;
  background: rgba(5, 8, 13, 0.78);
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(20px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 25px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.wordmark > span:last-child > span {
  color: var(--blue);
}

.wordmark-cube {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #031019;
  background: linear-gradient(145deg, #46dbff, #0678ff 68%, #003b9f);
  box-shadow: inset -5px -5px 0 rgba(0, 22, 77, 0.44), 0 0 24px rgba(8, 189, 245, 0.28);
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
  transform: rotate(-3deg);
}

.wordmark-cube > span {
  font-family: var(--display);
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav a {
  padding: 10px 13px;
  color: #b7c3d2;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color 180ms ease, background 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: white;
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.site-nav .nav-cta {
  margin-left: 8px;
  color: #061008;
  border-radius: 9px;
  background: var(--green);
  box-shadow: inset 0 -3px 0 rgba(30, 103, 0, 0.35);
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: #061008;
  background: #8bff34;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: white;
  background: transparent;
}

.menu-toggle > span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: 54px;
  align-items: center;
  min-height: calc(100vh - 100px);
  padding-top: 86px;
  padding-bottom: 54px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow,
.kicker {
  margin: 0 0 22px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(8, 189, 245, 0.22);
  border-radius: 999px;
  color: #a9dff2;
  background: rgba(8, 189, 245, 0.07);
}

.eyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: blink 1.8s ease-in-out infinite;
}

.hero h1,
.section-heading h2,
.performance-copy h2,
.deploy-copy h2,
.final-cta h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.89;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 720px;
  font-size: clamp(62px, 7.15vw, 108px);
}

.hero h1 em {
  color: transparent;
  background: linear-gradient(90deg, var(--blue), #b0eaff 48%, var(--green));
  background-clip: text;
  -webkit-background-clip: text;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
}

.hero-lede {
  max-width: 620px;
  margin: 30px 0 0;
  color: #acb8c8;
  font-size: 18px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  content: '';
  transform: skewX(-24deg);
  transition: left 480ms ease;
}

.button:hover::before {
  left: 120%;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: #00131d;
  background: linear-gradient(135deg, #34d4ff, var(--blue));
  box-shadow: inset 0 -4px 0 rgba(0, 72, 115, 0.4), 0 10px 28px rgba(8, 189, 245, 0.2);
}

.button-primary:hover {
  box-shadow: inset 0 -4px 0 rgba(0, 72, 115, 0.4), 0 16px 36px rgba(8, 189, 245, 0.3);
}

.button-ghost {
  color: #d8e0eb;
  border-color: var(--line-bright);
  background: rgba(255, 255, 255, 0.025);
}

.button-ghost:hover {
  border-color: var(--blue);
  background: rgba(8, 189, 245, 0.06);
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  list-style: none;
  text-transform: uppercase;
}

.hero-points span {
  color: var(--green);
}

.hero-art {
  position: relative;
  justify-self: end;
  width: min(100%, 610px);
  isolation: isolate;
}

.hero-art::before {
  position: absolute;
  z-index: -2;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 130, 255, 0.28), rgba(5, 8, 13, 0) 68%);
  filter: blur(12px);
  content: '';
}

.hero-art::after {
  position: absolute;
  z-index: -1;
  right: -4%;
  bottom: 4%;
  width: 68%;
  height: 18%;
  background: rgba(0, 0, 0, 0.75);
  filter: blur(30px);
  content: '';
  transform: perspective(500px) rotateX(68deg);
}

.logo-frame {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(76, 177, 255, 0.24);
  background: linear-gradient(145deg, rgba(11, 21, 34, 0.84), rgba(5, 8, 13, 0.2));
  box-shadow: var(--shadow), inset 0 0 60px rgba(7, 117, 255, 0.06);
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
}

.logo-frame img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
}

.corner {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-color: var(--blue);
}

.corner-a { top: 2px; left: 2px; border-top: 3px solid; border-left: 3px solid; }
.corner-b { top: 2px; right: 2px; border-top: 3px solid; border-right: 3px solid; }
.corner-c { bottom: 2px; left: 2px; border-bottom: 3px solid; border-left: 3px solid; }
.corner-d { right: 2px; bottom: 2px; border-right: 3px solid; border-bottom: 3px solid; }

.edition-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 154px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 9, 15, 0.88);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(12px);
}

.edition-chip small,
.edition-chip strong {
  display: block;
  font-family: var(--mono);
  line-height: 1.25;
}

.edition-chip small {
  color: var(--muted-2);
  font-size: 9px;
}

.edition-chip strong {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.edition-chip .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.edition-java {
  top: 13%;
  left: -7%;
  color: var(--blue);
  transform: rotate(-2deg);
}

.edition-bedrock {
  right: -3%;
  bottom: 13%;
  color: var(--green);
  transform: rotate(2deg);
}

.hero-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hero-stats article {
  position: relative;
  padding: 27px 24px;
}

.hero-stats article + article {
  border-left: 1px solid var(--line);
}

.hero-stats strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero-stats strong span {
  margin-left: 6px;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}

.hero-stats p {
  margin: 8px 0 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.5fr);
  gap: 32px 80px;
  align-items: end;
  margin-bottom: 72px;
}

.section-heading .kicker {
  grid-column: 1 / -1;
  margin-bottom: -4px;
}

.section-heading h2,
.performance-copy h2,
.deploy-copy h2 {
  font-size: clamp(52px, 7vw, 94px);
}

.section-heading > p:last-child,
.performance-copy > p,
.deploy-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.engine-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.72fr 1.2fr 0.72fr 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 380px;
  padding: 44px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(8, 189, 245, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 189, 245, 0.025) 1px, transparent 1px),
    linear-gradient(135deg, rgba(10, 16, 25, 0.98), rgba(7, 11, 18, 0.98));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: var(--shadow);
}

.engine-diagram::before {
  position: absolute;
  top: 0;
  left: 24%;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--green), transparent);
  content: '';
}

.engine-input {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: rgba(5, 8, 13, 0.84);
}

.engine-input small,
.engine-input strong {
  display: block;
  font-family: var(--mono);
}

.engine-input small {
  margin-bottom: 4px;
  color: var(--muted-2);
  font-size: 9px;
}

.engine-input strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edition-icon {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  color: #021019;
  background: var(--edition-accent);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 900;
  box-shadow: inset -4px -4px rgba(0, 0, 0, 0.32);
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
}

.java-input { --edition-accent: var(--blue); color: var(--blue); }
.bedrock-input { --edition-accent: var(--green); color: var(--green); }
.java-input strong,
.bedrock-input strong { color: var(--ink); }

.packet-lane {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, currentColor, rgba(255, 255, 255, 0.15));
}

.lane-java { color: var(--blue); }
.lane-bedrock { color: var(--green); }

.packet-lane i {
  position: absolute;
  top: -3px;
  left: -8px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: packet-flow 2.1s linear infinite;
}

.packet-lane i:nth-child(2) { animation-delay: -0.7s; }
.packet-lane i:nth-child(3) { animation-delay: -1.4s; }

.engine-core {
  position: relative;
  display: grid;
  justify-items: center;
  place-self: center;
  width: 190px;
  height: 190px;
  padding-top: 38px;
}

.core-ring {
  position: absolute;
  border: 1px solid rgba(8, 189, 245, 0.22);
  border-radius: 50%;
  animation: core-pulse 3s ease-in-out infinite;
}

.ring-one { inset: 10px; }
.ring-two { inset: 0; animation-delay: -1.5s; }

.core-cube {
  position: relative;
  z-index: 2;
  display: grid;
  width: 92px;
  height: 92px;
  place-content: center;
  color: #02111a;
  background: linear-gradient(145deg, #58ddff, #078ff4 60%, #1451dc);
  box-shadow: inset -10px -10px 0 rgba(0, 30, 104, 0.34), 0 0 48px rgba(8, 189, 245, 0.28);
  clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
  transform: rotate(-3deg);
}

.core-cube span,
.core-cube strong {
  text-align: center;
  line-height: 1;
}

.core-cube span {
  font-family: var(--display);
  font-size: 37px;
  font-weight: 900;
}

.core-cube strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.engine-core p {
  z-index: 2;
  margin: 18px 0 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.world-output {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 42px;
  padding: 15px 18px;
  border: 1px solid rgba(112, 237, 22, 0.22);
  border-radius: 10px;
  background: rgba(112, 237, 22, 0.045);
  font-family: var(--mono);
}

.world-output small {
  color: var(--green);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.world-output strong {
  font-size: 11px;
  letter-spacing: 0.03em;
}

.architecture-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--line);
}

.architecture-notes article {
  padding: 30px;
  background: rgba(8, 13, 21, 0.97);
}

.architecture-notes article > span,
.feature-number {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
}

.architecture-notes h3,
.feature-card h3 {
  margin: 15px 0 10px;
  font-size: 21px;
  line-height: 1.2;
}

.architecture-notes p,
.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.performance {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(10, 16, 25, 0.98) 0%, rgba(7, 13, 20, 0.98) 48%, rgba(6, 18, 14, 0.98) 100%);
}

.performance::before {
  position: absolute;
  top: -40%;
  left: 48%;
  width: 800px;
  height: 800px;
  border: 1px solid rgba(112, 237, 22, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(112, 237, 22, 0.025), 0 0 0 160px rgba(8, 189, 245, 0.025);
  content: '';
}

.performance-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 100px;
  align-items: center;
}

.performance-copy h2 span {
  color: var(--green);
}

.performance-copy > p {
  margin-top: 28px;
}

.memory-readout {
  margin-top: 42px;
  padding: 20px;
  border: 1px solid rgba(112, 237, 22, 0.2);
  border-radius: 12px;
  background: rgba(112, 237, 22, 0.035);
}

.memory-label {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.memory-label span { color: var(--muted-2); }
.memory-label strong { color: var(--green); }

.memory-track {
  position: relative;
  height: 12px;
  margin: 15px 0 17px;
  border: 1px solid rgba(112, 237, 22, 0.15);
  background: #050a08;
}

.memory-track::before {
  position: absolute;
  inset: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 8px, transparent 8px 10px);
  content: '';
}

.memory-track span {
  position: absolute;
  z-index: 1;
  inset: 2px 32% 2px 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  box-shadow: 0 0 16px rgba(112, 237, 22, 0.4);
}

.memory-track i {
  position: absolute;
  top: -26px;
  right: 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
}

.memory-readout small {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.6;
}

.terminal-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(149, 191, 234, 0.22);
  border-radius: 16px;
  background: #060a10;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.52), 20px 20px 0 rgba(8, 189, 245, 0.025);
  transform: rotate(1.25deg);
}

.terminal-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.012) 50%);
  background-size: 100% 4px;
  content: '';
  pointer-events: none;
}

.terminal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 17px;
  border-bottom: 1px solid var(--line);
  color: var(--muted-2);
  background: #0d131c;
  font-family: var(--mono);
  font-size: 10px;
}

.terminal-top div {
  display: flex;
  gap: 6px;
}

.terminal-top i {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #374355;
}

.terminal-top i:first-child { background: var(--red); }
.terminal-top i:nth-child(2) { background: var(--gold); }
.terminal-top i:last-child { background: var(--green); }

.terminal-top b {
  color: var(--green);
  font-size: 9px;
}

.terminal-card pre {
  min-height: 355px;
  margin: 0;
  padding: 36px;
  overflow-x: auto;
  color: #d9e5f4;
  font-size: clamp(11px, 1.25vw, 14px);
  line-height: 2;
}

.terminal-card .prompt,
.terminal-card .blue { color: var(--blue); }
.terminal-card .green { color: var(--green); }
.terminal-card .gold { color: var(--gold); }
.terminal-card .muted { color: #617188; }
.terminal-card .cursor { color: var(--green); animation: blink 1.1s steps(1) infinite; }

.terminal-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.terminal-foot span {
  padding: 14px;
  text-align: center;
}

.terminal-foot span + span { border-left: 1px solid var(--line); }

.section-heading-wide {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.48fr);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.feature-card {
  position: relative;
  min-height: 310px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(12, 19, 29, 0.98), rgba(7, 11, 17, 0.98));
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.feature-card:hover {
  border-color: rgba(8, 189, 245, 0.42);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
}

.feature-card::after {
  position: absolute;
  right: -55px;
  bottom: -55px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(8, 189, 245, 0.08);
  content: '';
  transform: rotate(45deg);
}

.feature-card h3 {
  margin-top: 22px;
  font-size: 25px;
}

.feature-card code {
  color: var(--green);
  font-size: 0.9em;
}

.feature-crossplay,
.feature-world,
.feature-survival,
.feature-ops {
  grid-column: span 6;
}

.feature-combat,
.feature-mobs {
  grid-column: span 3;
}

.feature-tools,
.feature-config {
  grid-column: span 6;
}

.feature-crossplay {
  background:
    radial-gradient(circle at 85% 20%, rgba(8, 189, 245, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(12, 19, 29, 0.98), rgba(7, 11, 17, 0.98));
}

.feature-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.feature-card li {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.crossplay-mark {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  height: 70px;
  margin-top: -5px;
}

.crossplay-mark span {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  color: #031019;
  background: var(--blue);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 900;
  box-shadow: inset -7px -7px rgba(0, 0, 0, 0.27), 0 0 25px rgba(8, 189, 245, 0.18);
  clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
}

.crossplay-mark span:last-child {
  background: var(--green);
  box-shadow: inset -7px -7px rgba(0, 0, 0, 0.27), 0 0 25px rgba(112, 237, 22, 0.18);
}

.crossplay-mark i {
  color: white;
  font-size: 25px;
  font-style: normal;
}

.pixel-icon {
  margin-top: 30px;
  color: var(--gold);
  font-size: 43px;
  line-height: 1;
  text-shadow: 4px 4px 0 rgba(99, 48, 0, 0.55);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
}

.toggle-row i {
  position: relative;
  width: 29px;
  height: 15px;
  margin-left: auto;
  border: 1px solid #485466;
  border-radius: 99px;
}

.toggle-row i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #657387;
  content: '';
}

.toggle-row strong { color: var(--green); }

.voxel-world {
  position: absolute;
  top: 28px;
  right: 36px;
  width: 160px;
  height: 98px;
  transform: rotate(-5deg);
}

.voxel-world i {
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #8be32a 0 45%, #3b9a19 45% 70%, #6d3e20 70%);
  box-shadow: inset -7px -7px rgba(0, 0, 0, 0.18);
  clip-path: polygon(50% 0, 100% 24%, 100% 75%, 50% 100%, 0 75%, 0 24%);
}

.voxel-world i:nth-child(1) { left: 0; top: 35px; }
.voxel-world i:nth-child(2) { left: 42px; top: 15px; }
.voxel-world i:nth-child(3) { left: 84px; top: 35px; }
.voxel-world i:nth-child(4) { left: 42px; top: 60px; }
.voxel-world i:nth-child(5) { left: 84px; top: -10px; background: linear-gradient(135deg, #7ddc22 0 55%, #654122 55%); }

.feature-world h3,
.feature-world p { max-width: 58%; }

.heart-line {
  margin-top: 36px;
  color: var(--red);
  font-size: 29px;
  letter-spacing: 7px;
  text-shadow: 0 4px 0 #7a1522;
}

.mob-eyes {
  display: flex;
  gap: 16px;
  margin-top: 38px;
}

.mob-eyes i {
  position: relative;
  width: 45px;
  height: 31px;
  background: #d7efff;
  box-shadow: inset -5px -5px rgba(25, 67, 98, 0.4), 0 0 22px rgba(8, 189, 245, 0.14);
}

.mob-eyes i::after {
  position: absolute;
  top: 8px;
  right: 7px;
  width: 9px;
  height: 13px;
  background: #111820;
  content: '';
}

.command-stack {
  position: absolute;
  top: 28px;
  right: 30px;
  display: grid;
  width: 145px;
  gap: 7px;
}

.command-stack span {
  padding: 8px 11px;
  border: 1px solid rgba(112, 237, 22, 0.18);
  border-radius: 4px;
  color: var(--green);
  background: rgba(112, 237, 22, 0.035);
  font-family: var(--mono);
  font-size: 11px;
}

.command-stack span:nth-child(2) { transform: translateX(-20px); }
.command-stack span:nth-child(3) { transform: translateX(-8px); }
.feature-ops h3,
.feature-ops p { max-width: 61%; }

.tool-meter {
  position: relative;
  width: min(260px, 100%);
  height: 29px;
  margin-top: 40px;
  padding: 4px;
  border: 2px solid #dae5f2;
  background: #090e15;
  box-shadow: 4px 4px 0 #303a48;
}

.tool-meter i {
  display: block;
  width: 91%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #a2fa35);
}

.tool-meter span {
  position: absolute;
  top: 0;
  right: -120px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 29px;
}

.config-lines {
  display: grid;
  width: 210px;
  gap: 10px;
  margin-top: 34px;
}

.config-lines i {
  height: 8px;
  background: #172334;
}

.config-lines i::before {
  display: block;
  width: 56%;
  height: 100%;
  background: var(--blue);
  content: '';
}

.config-lines i:nth-child(2)::before { width: 82%; background: var(--green); }
.config-lines i:nth-child(3)::before { width: 43%; background: var(--gold); }
.config-lines i:nth-child(4)::before { width: 68%; }

.comparison {
  padding-top: 40px;
}

.comparison-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.comparison table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: rgba(8, 13, 20, 0.97);
}

.comparison th,
.comparison td {
  padding: 21px 24px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  text-align: left;
}

.comparison tr:last-child th,
.comparison tr:last-child td { border-bottom: 0; }
.comparison th:first-child { border-left: 0; }

.comparison thead th {
  color: var(--muted-2);
  background: #0d1520;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison tbody th {
  color: #c6d0dc;
  font-size: 13px;
  font-weight: 600;
}

.comparison td {
  color: var(--muted-2);
  font-size: 13px;
}

.comparison .active {
  border-left-color: rgba(8, 189, 245, 0.25);
  border-right: 1px solid rgba(8, 189, 245, 0.25);
  background: rgba(8, 189, 245, 0.045);
}

.comparison thead .active {
  color: var(--blue);
  background: rgba(8, 189, 245, 0.1);
}

.comparison td.active strong {
  color: var(--ink);
  font-weight: 800;
}

.comparison td.active strong::before {
  margin-right: 8px;
  color: var(--green);
  content: '✓';
}

.deploy {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #080d14;
}

.deploy::after {
  position: absolute;
  right: -10%;
  bottom: -50%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 189, 245, 0.1), transparent 65%);
  content: '';
}

.deploy-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 100px;
  align-items: start;
}

.deploy-copy > p {
  margin-top: 28px;
}

.deploy-copy ol {
  display: grid;
  gap: 0;
  margin: 45px 0 0;
  padding: 0;
  list-style: none;
}

.deploy-copy li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 17px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.deploy-copy li > span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 900;
}

.deploy-copy li strong {
  display: block;
  margin-top: -5px;
  font-size: 16px;
}

.deploy-copy li p {
  margin: 3px 0 0;
  color: var(--muted-2);
  font-size: 12px;
}

.config-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(8, 189, 245, 0.25);
  border-radius: 16px;
  background: #060a10;
  box-shadow: var(--shadow);
}

.config-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #0d141e;
  font-family: var(--mono);
  font-size: 11px;
}

.copy-button {
  padding: 6px 10px;
  border: 1px solid var(--line-bright);
  border-radius: 5px;
  color: var(--blue);
  background: transparent;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.copy-button:hover,
.copy-button:focus-visible {
  color: #001018;
  background: var(--blue);
  outline: none;
}

.config-card pre {
  margin: 0;
  padding: 28px;
  overflow-x: auto;
  color: #d6e0eb;
  font-size: clamp(11px, 1.25vw, 14px);
  line-height: 1.8;
}

.yaml-key { color: #79d8ff; }
.yaml-value { color: var(--green); }
.yaml-string { color: #f6ca61; }
.yaml-number { color: #b9a0ff; }

.port-note {
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  background: rgba(8, 189, 245, 0.025);
  font-size: 11px;
}

.port-note span {
  color: var(--blue);
  font-family: var(--mono);
  font-weight: 900;
}

.port-note span:nth-child(2) { color: var(--green); }

.faq {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 100px;
}

.faq .section-heading {
  display: block;
  margin: 0;
}

.faq .section-heading h2 {
  font-size: clamp(48px, 6vw, 82px);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 25px 0;
  font-size: 16px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  transition: transform 180ms ease;
}

.faq-list details[open] summary span { transform: rotate(45deg); }

.faq-list details p {
  max-width: 720px;
  margin: -6px 0 25px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.final-cta {
  padding-top: 60px;
  padding-bottom: 100px;
}

.final-cta-inner {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 100px 30px;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 110%, rgba(112, 237, 22, 0.18), transparent 40%),
    radial-gradient(circle at 50% -10%, rgba(8, 189, 245, 0.2), transparent 44%),
    #080e17;
  text-align: center;
  box-shadow: var(--shadow);
}

.cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(8, 189, 245, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 189, 245, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
}

.final-cta > *:not(.cta-grid) { position: relative; }

.final-cta h2 {
  font-size: clamp(62px, 10vw, 132px);
}

.final-cta h2 span {
  color: transparent;
  background: linear-gradient(90deg, var(--blue), var(--green));
  background-clip: text;
  -webkit-background-clip: text;
}

.final-cta p:not(.kicker) {
  max-width: 580px;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 17px;
}

.final-cta .hero-actions {
  justify-content: center;
}

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px 50px;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 44px;
  border-top: 1px solid var(--line);
}

.site-footer > p {
  margin: 0;
  color: var(--muted-2);
  font-size: 12px;
}

.site-footer > div {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.site-footer > div a:hover { color: var(--blue); }

.site-footer small {
  grid-column: 1 / -1;
  color: #4d5969;
  font-size: 10px;
}

.footer-brand { font-size: 20px; }
.footer-brand .wordmark-cube { width: 31px; height: 31px; }

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero > .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@keyframes blink {
  0%, 45% { opacity: 1; }
  46%, 70% { opacity: 0.25; }
  71%, 100% { opacity: 1; }
}

@keyframes packet-flow {
  from { left: -8px; }
  to { left: calc(100% + 8px); }
}

@keyframes core-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  50% { opacity: 0.8; transform: scale(1); }
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
    gap: 24px;
  }

  .hero h1 { font-size: clamp(58px, 8vw, 82px); }
  .hero-art { width: 100%; }
  .edition-java { left: -3%; }

  .section-heading,
  .section-heading-wide {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    gap: 30px 50px;
  }

  .engine-diagram {
    grid-template-columns: 1fr 0.4fr 1fr 0.4fr 1fr;
    padding: 30px;
  }

  .engine-core { width: 150px; height: 170px; }
  .engine-input { display: grid; justify-items: center; text-align: center; }

  .performance-grid,
  .deploy-grid { gap: 50px; }

  .feature-crossplay,
  .feature-world,
  .feature-survival,
  .feature-ops,
  .feature-tools,
  .feature-config { grid-column: span 6; }

  .feature-combat,
  .feature-mobs { grid-column: span 6; }

  .faq { gap: 55px; }
}

@media (max-width: 820px) {
  .section-shell,
  .site-header { width: min(100% - 28px, 680px); }

  .section-gap { padding-block: 105px; }

  .menu-toggle { display: block; }

  .menu-toggle[aria-expanded='true'] > span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(5, 8, 13, 0.97);
    box-shadow: var(--shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .site-nav[data-open='true'] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav a { padding: 13px; }
  .site-nav .nav-cta { margin: 5px 0 0; text-align: center; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 30px;
  }

  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(58px, 14.5vw, 92px); }
  .hero-art { width: min(100%, 590px); margin: 45px auto 0; }
  .logo-frame { transform: none; }

  .hero-stats {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats article:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .hero-stats article:nth-child(4) { border-top: 1px solid var(--line); }

  .section-heading,
  .section-heading-wide {
    display: block;
    margin-bottom: 50px;
  }

  .section-heading .kicker { margin-bottom: 20px; }
  .section-heading > p:last-child { margin-top: 25px; }

  .engine-diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto 55px auto 55px auto auto;
    gap: 0;
    padding: 28px;
  }

  .java-input { grid-row: 1; }
  .lane-java { grid-row: 2; }
  .engine-core { grid-row: 3; }
  .lane-bedrock { grid-row: 4; }
  .bedrock-input { grid-row: 5; }
  .world-output { grid-row: 6; }

  .packet-lane {
    width: 2px;
    height: 55px;
    justify-self: center;
    background: linear-gradient(to bottom, currentColor, rgba(255, 255, 255, 0.15));
  }

  .packet-lane i { display: none; }

  .engine-input {
    display: flex;
    justify-content: center;
    width: min(100%, 350px);
    justify-self: center;
    text-align: left;
  }

  .world-output { display: grid; gap: 5px; text-align: center; }

  .architecture-notes { grid-template-columns: 1fr; }

  .architecture-notes article + article { border-top: 1px solid var(--line); }

  .performance-grid,
  .deploy-grid,
  .faq {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .terminal-card { transform: none; }

  .feature-card { min-height: 280px; }

  .feature-crossplay,
  .feature-world,
  .feature-survival,
  .feature-ops,
  .feature-tools,
  .feature-config,
  .feature-combat,
  .feature-mobs { grid-column: span 12; }

  .faq .section-heading { margin: 0; }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .site-footer small { grid-column: auto; }
}

@media (max-width: 520px) {
  .section-shell,
  .site-header { width: calc(100% - 22px); }

  .site-header { top: 8px; margin-top: 8px; }
  .wordmark { font-size: 21px; }
  .wordmark-cube { width: 34px; height: 34px; }

  .hero { padding-top: 72px; }
  .hero h1 { font-size: clamp(50px, 16.5vw, 72px); }
  .hero-lede { font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .hero-points { display: grid; gap: 8px; }

  .edition-chip { min-width: 136px; padding: 8px 10px; }
  .edition-java { top: 8%; left: -1%; }
  .edition-bedrock { right: -1%; bottom: 9%; }

  .hero-stats article { padding: 22px 12px; }
  .hero-stats strong { font-size: 34px; }
  .hero-stats strong span { display: block; margin: 5px 0 0; }

  .section-heading h2,
  .performance-copy h2,
  .deploy-copy h2 { font-size: clamp(46px, 15vw, 68px); }

  .engine-diagram { padding: 18px; }
  .architecture-notes article { padding: 24px; }
  .terminal-card pre { min-height: 300px; padding: 24px 17px; font-size: 10px; }
  .terminal-foot span { padding: 11px 5px; font-size: 7px; }

  .feature-card { padding: 23px; }
  .feature-world h3,
  .feature-world p,
  .feature-ops h3,
  .feature-ops p { max-width: 100%; }

  .voxel-world,
  .command-stack { position: relative; top: auto; right: auto; margin-top: 25px; }
  .feature-world h3,
  .feature-ops h3 { margin-top: 28px; }
  .tool-meter span { position: static; display: block; margin-top: 8px; line-height: 1; }

  .config-card pre { padding: 22px 16px; font-size: 10px; }
  .port-note { padding: 15px 16px; }
  .final-cta-inner { padding: 75px 19px; }
  .final-cta h2 { font-size: clamp(55px, 18vw, 78px); }
  .site-footer > div { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  #packet-field { display: none; }
}