:root {
  --bg-1: #070d1f;
  --bg-2: #0c1530;
  --text: #f4f8ff;
  --muted: #8da4c7;
  --cyan: #24d8ff;
  --orange: #ff7a3d;
  --gold: #ffc94f;
  --green: #38e8a8;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  min-height: 100vh;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(900px 600px at 75% 15%, rgba(36, 216, 255, 0.04), transparent 65%),
    radial-gradient(700px 550px at 20% 85%, rgba(255, 122, 61, 0.06), transparent 65%),
    linear-gradient(160deg, #050b1a 0%, #080e21 100%);
  overflow-x: hidden;
}

.stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(circle at 20% 35%, rgba(53, 227, 255, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 60% 80%, rgba(53, 227, 255, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 75% 20%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 40% 65%, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
  background-size: 320px 320px, 360px 360px, 280px 280px, 420px 420px;
  opacity: 0.8;
  pointer-events: none;
}

.orbs { position: fixed; inset: 0; z-index: -3; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.orb-cyan { width: 560px; height: 560px; left: 55%; top: 6%; background: rgba(36, 216, 255, 0.08); }
.orb-orange { width: 420px; height: 420px; left: 8%; top: 58%; background: rgba(255, 122, 61, 0.1); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid rgba(152, 180, 232, 0.12);
  background: rgba(5, 9, 22, 0.72);
  backdrop-filter: blur(16px);
}

.brand {
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
}

.brand-mark {
  background: linear-gradient(90deg, var(--cyan) 0%, var(--orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-pill {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px solid rgba(255,255,255,0.14);
  color: #d6e2f7;
}

.lang-menu { position: relative; }
.lang-toggle {
  border: 1px solid rgba(133, 166, 224, 0.4);
  background: rgba(7, 18, 45, 0.88);
  color: #d6e2f7;
  border-radius: 999px;
  padding: 0.46rem 0.78rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 220px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(133, 166, 224, 0.3);
  background: rgba(4, 9, 24, 0.98);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  padding: 0.3rem;
  z-index: 50;
}

.lang-option {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #c2d1ec;
  font: inherit;
  font-size: 0.97rem;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}
.lang-option:hover,
.lang-option.active { background: rgba(0, 167, 170, 0.18); color: #e7fbff; }

main {
  width: min(1380px, 100% - 2.2rem);
  margin: 0 auto;
  padding-top: 1.8rem;
  padding-bottom: 2.5rem;
}

.slide { display: grid; gap: 1rem; }
.eyebrow {
  margin: 0;
  color: var(--cyan);
  border: 1px solid rgba(36, 216, 255, 0.5);
  border-radius: 999px;
  width: fit-content;
  padding: 0.28rem 0.78rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.9vw, 3.8rem);
  line-height: 1.08;
}

.lead {
  margin: 0;
  max-width: 70ch;
  color: #a8bddf;
  font-size: 1.05rem;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.package-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem;
  min-height: 100%;
  display: grid;
  gap: 0.8rem;
  background: linear-gradient(160deg, rgba(12, 22, 54, 0.86), rgba(8, 14, 34, 0.76));
  box-shadow: 0 22px 36px rgba(2, 8, 22, 0.45);
}

.package-head { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: center; }
.package-head h3 { margin: 0; font-size: 1.03rem; line-height: 1.2; font-weight: 800; }
.package-icon {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 900;
  background: rgba(255, 255, 255, 0.1);
}
.package-badge {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.56rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #f7fbff;
}

.package-teaser { margin: 0; font-size: 0.92rem; color: #b9cde8; line-height: 1.35; }
.package-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.package-points li { color: #eaf2ff; font-size: 0.92rem; line-height: 1.35; display: flex; gap: 0.48rem; }
.package-points li::before { content: "✓"; opacity: 0.9; font-weight: 800; }
.package-price { margin-top: auto; font-size: 2rem; font-weight: 800; line-height: 1; }

.package-green { border-color: rgba(57, 223, 92, 0.34); background: linear-gradient(165deg, rgba(17, 64, 34, 0.8), rgba(9, 23, 17, 0.75)); }
.package-green .package-head h3, .package-green .package-icon, .package-green .package-price { color: #44f72b; }
.package-orange { border-color: rgba(255, 167, 66, 0.3); background: linear-gradient(165deg, rgba(82, 53, 18, 0.75), rgba(29, 20, 8, 0.75)); }
.package-orange .package-head h3, .package-orange .package-icon, .package-orange .package-price { color: #ffb344; }
.package-silver { border-color: rgba(180, 205, 225, 0.25); background: linear-gradient(165deg, rgba(61, 74, 90, 0.78), rgba(25, 32, 42, 0.72)); }
.package-silver .package-head h3, .package-silver .package-icon, .package-silver .package-price { color: #d7e4f0; }
.package-gold { border-color: rgba(255, 201, 79, 0.3); background: linear-gradient(165deg, rgba(74, 58, 16, 0.76), rgba(28, 24, 8, 0.75)); }
.package-gold .package-head h3, .package-gold .package-icon, .package-gold .package-price { color: #ffc94f; }
.package-blue { border-color: rgba(40, 184, 255, 0.3); background: linear-gradient(165deg, rgba(16, 52, 86, 0.78), rgba(8, 24, 40, 0.75)); }
.package-blue .package-head h3, .package-blue .package-icon, .package-blue .package-price { color: #28b8ff; }

.package-card.is-current { box-shadow: 0 22px 36px rgba(2, 8, 22, 0.45), 0 0 0 2px rgba(102, 238, 172, 0.7); }
.package-card.is-target { box-shadow: 0 22px 36px rgba(2, 8, 22, 0.45), 0 0 0 2px rgba(36, 216, 255, 0.72); }

.panel {
  border: 1px solid rgba(103, 143, 203, 0.28);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(13, 21, 50, 0.85), rgba(10, 17, 42, 0.6));
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.32);
  padding: 1.2rem;
}

.upgrade-planner { display: grid; gap: 1rem; }
.upgrade-head h2 { margin: 0; font-size: 1.4rem; }
.upgrade-head p { margin: 0.3rem 0 0; color: var(--muted); }

.upgrade-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: end;
}

.calc-field {
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: #b0c4e2;
  font-weight: 700;
}

.calc-field > span {
  min-height: 2.9rem;
  display: inline-flex;
  align-items: flex-end;
}

.calc-field input, .calc-field select {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(103, 143, 203, 0.42);
  background: rgba(6, 12, 30, 0.78);
  color: var(--text);
  padding: 0.55rem 0.8rem;
  min-height: 3.4rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  outline: none;
}
.calc-field input:focus, .calc-field select:focus { border-color: rgba(36, 216, 255, 0.5); }

.upgrade-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.result-card {
  border-radius: 20px;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(103, 143, 203, 0.25);
  background: linear-gradient(155deg, rgba(10, 16, 40, 0.96), rgba(14, 22, 50, 0.86));
}
.result-card p { margin: 0; color: #9bb5d8; font-size: 0.9rem; font-weight: 700; }
.result-card strong { display: block; margin-top: 0.4rem; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 0.95; }
.result-card-cyan { border-color: rgba(36,216,255,0.45); }
.result-card-cyan p, .result-card-cyan strong { color: var(--cyan); }
.result-card-orange { border-color: rgba(255, 122, 61, 0.45); background: linear-gradient(155deg, rgba(50, 25, 15, 0.9), rgba(30, 18, 10, 0.88)); }
.result-card-orange p, .result-card-orange strong { color: #ffbb94; }
.result-card-green { border-color: rgba(43, 222, 143, 0.4); background: linear-gradient(155deg, rgba(10, 40, 32, 0.9), rgba(8, 28, 24, 0.9)); }
.result-card-green p, .result-card-green strong { color: #9fffd5; }

.upgrade-recommendation { margin: 0; color: #9fffd5; font-size: 0.94rem; font-weight: 700; }
.upgrade-delta-list { margin: 0; padding-left: 1rem; display: grid; gap: 0.42rem; }
.upgrade-delta-list li { color: #d7e8ff; font-size: 0.93rem; }

@media (max-width: 1180px) {
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upgrade-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .package-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82%, 1fr);
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scroll-snap-type: x mandatory;
  }
  .package-card { scroll-snap-align: start; }
  .upgrade-controls, .upgrade-results { grid-template-columns: 1fr; }
  .topbar { padding: 0.9rem 1rem; }
}