:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-alt: #0b1628;
  --panel: rgba(12, 22, 40, 0.72);
  --panel-strong: rgba(9, 17, 31, 0.92);
  --border: rgba(153, 184, 255, 0.16);
  --text: #e8eefc;
  --muted: #95a4c6;
  --accent: #7ae3ff;
  --accent-2: #ffb46a;
  --accent-3: #7cf0b4;
  --shadow: 0 24px 80px rgba(2, 8, 20, 0.45);
  --radius: 24px;
  --radius-sm: 16px;
  --max: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 20%, rgba(122, 227, 255, 0.16), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(255, 180, 106, 0.15), transparent 24%),
    radial-gradient(circle at 80% 78%, rgba(124, 240, 180, 0.1), transparent 22%),
    linear-gradient(180deg, #091521 0%, #07111f 42%, #050b15 100%);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
  animation: bgShift 18s ease-in-out infinite alternate;
}

body::before {
  content: "";
  position: fixed;
  inset: -20% auto auto -10%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(122, 227, 255, 0.08), transparent 62%);
  filter: blur(8px);
  animation: driftA 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: auto -8% 6% auto;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(255, 180, 106, 0.07), transparent 62%);
  filter: blur(10px);
  animation: driftB 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

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

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

.bg-grid,
.bg-orb {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.bg-ribbon {
  position: fixed;
  inset: 4% auto auto 50%;
  width: min(92vw, 1120px);
  height: min(92vw, 1120px);
  translate: -50% 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 140deg,
      rgba(122, 227, 255, 0) 0deg,
      rgba(122, 227, 255, 0.22) 42deg,
      rgba(255, 180, 106, 0.18) 96deg,
      rgba(124, 240, 180, 0.16) 154deg,
      rgba(122, 227, 255, 0) 220deg,
      rgba(255, 180, 106, 0.18) 306deg,
      rgba(122, 227, 255, 0) 360deg
    );
  filter: blur(56px) saturate(140%);
  opacity: 0.58;
  mask-image: radial-gradient(circle, black 12%, transparent 72%);
  animation: rotateRibbon 26s linear infinite;
}

.bg-ribbon::before,
.bg-ribbon::after {
  content: "";
  position: absolute;
  inset: 13% 12%;
  border-radius: 50%;
  border: 1px solid rgba(122, 227, 255, 0.14);
  box-shadow:
    0 0 0 18px rgba(122, 227, 255, 0.02),
    inset 0 0 48px rgba(122, 227, 255, 0.08);
  animation: ripple 12s ease-in-out infinite alternate;
}

.bg-ribbon::after {
  inset: 26% 24%;
  border-color: rgba(255, 180, 106, 0.14);
  animation-duration: 16s;
  animation-direction: alternate-reverse;
}

.bg-grid {
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(149, 164, 198, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(149, 164, 198, 0.12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 22%, transparent 88%);
}

.bg-orb {
  filter: blur(12px);
}

.orb-a {
  background: radial-gradient(circle, rgba(122, 227, 255, 0.28), transparent 52%);
  transform: translate(-22%, -12%);
  animation: floatOrbA 16s ease-in-out infinite alternate;
}

.orb-b {
  background: radial-gradient(circle, rgba(255, 180, 106, 0.2), transparent 48%);
  transform: translate(28%, 8%);
  animation: floatOrbB 20s ease-in-out infinite alternate;
}

.bg-orb::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.03);
}

.topbar,
.section,
.footer {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(122, 227, 255, 0.18), rgba(255, 180, 106, 0.16));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: "Space Grotesk", sans-serif;
}

.brand-text {
  font-size: 1rem;
}

.nav {
  display: flex;
  gap: 28px;
  color: var(--muted);
}

.nav a,
.footer a {
  transition: color 160ms ease, opacity 160ms ease;
}

.nav a:hover,
.footer a:hover {
  color: var(--text);
}

.topbar-actions {
  display: flex;
  gap: 12px;
}

.solid-button,
.ghost-button,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 18px;
  border: 1px solid transparent;
  font-weight: 600;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.solid-button {
  background: linear-gradient(135deg, var(--accent), #9dceff);
  color: #07111f;
  box-shadow: 0 14px 32px rgba(122, 227, 255, 0.18);
}

.ghost-button,
.link-button {
  background: rgba(9, 17, 31, 0.48);
  border-color: var(--border);
  color: var(--text);
}

.solid-button:hover,
.ghost-button:hover,
.link-button:hover,
.block:hover {
  transform: translateY(-1px);
}

.section {
  padding: 34px 0 24px;
}

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
  min-height: calc(100vh - 96px);
  padding-top: 18px;
}

.hero-copy h1,
.section-heading h2,
.status-card h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.hero-copy h1 {
  font-size: clamp(3.2rem, 8vw, 6.2rem);
  max-width: 11ch;
}

.section-heading h2,
.status-card h2 {
  font-size: clamp(2rem, 4vw, 3.35rem);
  max-width: 14ch;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 700;
}

.lede,
.section-heading p,
.feature-card p,
.product-panel p,
.status-card p,
.price-card p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.02rem;
}

.lede {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: 1.08rem;
}

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

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.hero-metrics div,
.feature-card,
.product-panel,
.status-card,
.price-card,
.terminal-card,
.stats-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.hero-metrics div {
  padding: 18px;
}

.hero-metrics strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.hero-metrics span,
.stats-list span,
.mini-label {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hero-visual {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: center;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 12% -6% auto auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 240, 180, 0.18), transparent 68%);
  filter: blur(2px);
  animation: pulseGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.terminal-card {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 15, 29, 0.98), rgba(10, 19, 34, 0.88));
  animation: floatCard 12s ease-in-out infinite alternate;
}

.terminal-head {
  display: flex;
  gap: 8px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(153, 184, 255, 0.12);
}

.terminal-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(153, 184, 255, 0.2);
}

.terminal-body {
  padding: 24px 22px 26px;
  font-family: "Space Grotesk", sans-serif;
}

.terminal-row {
  display: flex;
  gap: 10px;
  color: #d7e4ff;
  margin-bottom: 18px;
}

.prompt {
  color: var(--accent);
}

.terminal-output p {
  margin: 0 0 10px;
  color: #bfd0f7;
}

.terminal-output .success {
  color: var(--accent-3);
}

.stats-card {
  padding: 20px;
  max-width: 360px;
  margin-left: auto;
  background: linear-gradient(180deg, rgba(10, 20, 38, 0.95), rgba(12, 22, 40, 0.8));
  animation: floatCard 14s ease-in-out infinite alternate;
}

.stats-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
  font-weight: 600;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
}

.pill.success {
  background: rgba(124, 240, 180, 0.12);
  color: var(--accent-3);
}

.sparkline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  height: 116px;
  margin-bottom: 18px;
}

.sparkline span {
  height: var(--h, 50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(122, 227, 255, 0.95), rgba(255, 180, 106, 0.85));
  opacity: 0.92;
}

.stats-list {
  display: grid;
  gap: 12px;
}

.stats-list div,
.ops-grid div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(153, 184, 255, 0.12);
}

.stats-list strong,
.ops-grid strong {
  white-space: nowrap;
}

.section-tight {
  padding-top: 8px;
}

.domains-section {
  padding-top: 8px;
}

.section-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.import-section {
  padding-top: 8px;
}

.import-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
}

.import-panel {
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.import-panel h3 {
  margin: 0 0 18px;
  font-size: 1.46rem;
  line-height: 1.15;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.host-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.host-grid div {
  padding: 18px;
  border-radius: 18px;
  background: rgba(9, 17, 31, 0.5);
  border: 1px solid rgba(153, 184, 255, 0.12);
}

.host-grid strong,
.import-steps div {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
}

.host-grid span,
.import-status {
  color: var(--muted);
  line-height: 1.6;
}

.import-form {
  display: grid;
  gap: 14px;
}

.import-form label {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}

.import-form input,
.import-form select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(153, 184, 255, 0.18);
  background: rgba(7, 14, 26, 0.82);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

.import-form textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(153, 184, 255, 0.18);
  background: rgba(7, 14, 26, 0.82);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  outline: none;
  resize: vertical;
  min-height: 120px;
}

.import-form textarea::placeholder {
  color: rgba(149, 164, 198, 0.72);
}

.import-form textarea:focus {
  border-color: rgba(122, 227, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(122, 227, 255, 0.08);
}

.import-form input::placeholder {
  color: rgba(149, 164, 198, 0.72);
}

.import-form input:focus,
.import-form select:focus {
  border-color: rgba(122, 227, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(122, 227, 255, 0.08);
}

.import-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.import-status {
  margin: 0;
  min-height: 1.6em;
}

.import-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.import-steps div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 17, 31, 0.46);
  border: 1px solid rgba(153, 184, 255, 0.12);
  color: var(--muted);
}

.import-steps span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(122, 227, 255, 0.14);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.projects-section {
  padding-top: 12px;
}

.projects-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(9, 17, 31, 0.46);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.projects-toolbar strong {
  display: block;
  margin-bottom: 6px;
}

.projects-toolbar span {
  color: var(--muted);
}

.projects-count {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(122, 227, 255, 0.18);
  background: rgba(122, 227, 255, 0.08);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.project-card {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.project-card h3 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  line-height: 1.15;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.project-card p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.meta-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(9, 17, 31, 0.56);
  border: 1px solid rgba(153, 184, 255, 0.12);
  color: var(--text);
  font-size: 0.84rem;
}

.project-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.domain-pill {
  max-width: 100%;
}

.domain-pill.empty {
  opacity: 0.7;
}

.project-card-empty {
  grid-column: 1 / -1;
}

.premium-section,
.console-section {
  padding-top: 8px;
}

.auth-section {
  padding-top: 8px;
}

.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.auth-card,
.dashboard-panel {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card h3,
.dashboard-panel h3 {
  margin: 0 0 12px;
  font-size: 1.46rem;
  line-height: 1.15;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.auth-switch {
  display: inline-flex;
  gap: 10px;
  padding: 6px;
  margin: 8px 0 18px;
  border-radius: 999px;
  background: rgba(9, 17, 31, 0.46);
  border: 1px solid rgba(153, 184, 255, 0.12);
}

.chip-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.chip-button.is-active {
  background: rgba(122, 227, 255, 0.14);
  color: var(--text);
}

.auth-card-dark {
  background: linear-gradient(180deg, rgba(6, 12, 23, 0.92), rgba(10, 20, 37, 0.88));
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}

.auth-form input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(153, 184, 255, 0.18);
  background: rgba(7, 14, 26, 0.82);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

.auth-form input::placeholder {
  color: rgba(149, 164, 198, 0.72);
}

.auth-form input:focus {
  border-color: rgba(122, 227, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(122, 227, 255, 0.08);
}

.account-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.account-summary div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 17, 31, 0.52);
  border: 1px solid rgba(153, 184, 255, 0.12);
}

.account-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.account-summary strong {
  font-size: 1rem;
}

.account-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

#admin-user-manager {
  margin-top: 18px;
}

#premium-users-list {
  margin-top: 18px;
}

#premium-users-list > div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 17, 31, 0.52);
  border: 1px solid rgba(153, 184, 255, 0.12);
}

.dashboard-panel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.dashboard-panel[hidden] {
  display: none;
}

.premium-layout,
.console-layout {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 18px;
}

.domains-layout {
  display: grid;
  grid-template-columns: 1fr 0.98fr;
  gap: 18px;
}

.premium-card,
.console-card,
.console-help,
.domains-panel {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.console-help {
  display: grid;
  gap: 16px;
}

.premium-card h3,
.console-help h3,
.domains-panel h3 {
  margin: 0 0 12px;
  font-size: 1.46rem;
  line-height: 1.15;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.logs-select {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}

.logs-select select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(153, 184, 255, 0.18);
  background: rgba(7, 14, 26, 0.82);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

.logs-select select:focus {
  border-color: rgba(122, 227, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(122, 227, 255, 0.08);
}

.logs-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.logs-output {
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(153, 184, 255, 0.12);
  background: #07111a;
  font-family: "Space Grotesk", sans-serif;
}

.logs-title {
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.premium-price {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(122, 227, 255, 0.16);
  background: rgba(122, 227, 255, 0.06);
}

.premium-price span,
.payment-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.premium-price strong {
  font-size: 1.25rem;
}

.premium-card-dark {
  background: linear-gradient(180deg, rgba(6, 12, 23, 0.92), rgba(10, 20, 37, 0.88));
}

.domains-panel {
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.8), rgba(8, 15, 28, 0.92));
}

.domains-panel-dark {
  display: grid;
  gap: 16px;
  background: linear-gradient(180deg, rgba(6, 12, 23, 0.94), rgba(10, 20, 37, 0.9));
}

.domain-form {
  display: grid;
  gap: 14px;
}

.domain-form label {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
}

.domain-form input,
.domain-form select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(153, 184, 255, 0.18);
  background: rgba(7, 14, 26, 0.82);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

.domain-form input::placeholder {
  color: rgba(149, 164, 198, 0.72);
}

.domain-form input:focus,
.domain-form select:focus {
  border-color: rgba(122, 227, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(122, 227, 255, 0.08);
}

.domain-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.domain-notes div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 17, 31, 0.52);
  border: 1px solid rgba(153, 184, 255, 0.12);
}

.domain-notes span,
.domain-route span,
.domain-item p {
  color: var(--muted);
  font-size: 0.88rem;
}

.domain-notes strong,
.domain-route strong,
.domain-item strong {
  display: block;
  margin-top: 6px;
}

.domain-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(122, 227, 255, 0.16);
  background: rgba(122, 227, 255, 0.06);
}

.domain-badge {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(7, 17, 31, 0.7);
  border: 1px solid rgba(153, 184, 255, 0.14);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.domain-route {
  display: grid;
  align-content: center;
  min-width: 180px;
}

.domain-list {
  display: grid;
  gap: 12px;
}

.domain-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(153, 184, 255, 0.12);
  background: rgba(9, 17, 31, 0.48);
}

.domain-item-empty {
  display: grid;
}

.domain-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(122, 227, 255, 0.1);
  border: 1px solid rgba(122, 227, 255, 0.16);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.domain-item p {
  margin: 8px 0 0;
  line-height: 1.55;
}

.domain-item-actions {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 10px;
}

.domain-remove {
  padding-inline: 14px;
}

.premium-form {
  display: grid;
  gap: 14px;
}

.payment-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.payment-summary div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 17, 31, 0.52);
  border: 1px solid rgba(153, 184, 255, 0.12);
}

.payment-summary strong {
  font-size: 1rem;
}

.console-card {
  display: grid;
  gap: 16px;
}

.console-output {
  min-height: 260px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(153, 184, 255, 0.12);
  background: #07111a;
  font-family: "Space Grotesk", sans-serif;
}

.console-line {
  margin-bottom: 10px;
  line-height: 1.55;
}

.console-line.muted {
  color: var(--muted);
}

.console-line.error {
  color: #ff9e9e;
}

.console-line.ok {
  color: var(--accent-3);
}

.console-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(153, 184, 255, 0.12);
  background: rgba(9, 17, 31, 0.56);
}

.console-prompt {
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}

.console-form input {
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
}

.console-help ul {
  margin: 0 0 18px;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.feature-card {
  padding: 22px;
}

.icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(122, 227, 255, 0.08);
  border: 1px solid rgba(122, 227, 255, 0.16);
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  margin-bottom: 20px;
}

.feature-card h3,
.product-panel h3,
.price-card h3 {
  margin: 0 0 10px;
  font-size: 1.34rem;
  line-height: 1.15;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.04em;
}

.products-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.product-panel {
  padding: 26px;
}

.panel-label,
.plan {
  margin: 0 0 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  font-weight: 700;
}

.product-panel ul,
.price-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
  color: var(--text);
}

.product-panel li,
.price-card li {
  margin-bottom: 10px;
}

.product-panel-dark {
  background: linear-gradient(180deg, rgba(6, 12, 23, 0.92), rgba(10, 20, 37, 0.88));
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 20px;
}

.status-section {
  padding-top: 18px;
}

.status-card {
  padding: 26px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: center;
}

.status-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-items: end;
  min-height: 210px;
}

.status-bars span {
  height: var(--h);
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, rgba(122, 227, 255, 0.95), rgba(124, 240, 180, 0.9));
  box-shadow: 0 0 26px rgba(122, 227, 255, 0.16);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.price-card {
  padding: 24px;
}

.price-card h3 {
  font-size: 2.2rem;
}

.price-card.featured {
  background: linear-gradient(180deg, rgba(14, 27, 48, 0.92), rgba(10, 20, 37, 0.92));
  border-color: rgba(122, 227, 255, 0.24);
  transform: translateY(-10px);
}

.block {
  width: 100%;
  margin-top: 22px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px 0 34px;
  color: var(--muted);
  font-size: 0.95rem;
}

.footer div {
  display: flex;
  gap: 18px;
}

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.99);
  transition:
    opacity 850ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 850ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.feature-card,
.project-card,
.price-card,
.auth-card,
.dashboard-panel,
.import-panel,
.premium-card,
.console-card,
.console-help {
  position: relative;
  overflow: hidden;
}

.feature-card::after,
.project-card::after,
.price-card::after,
.auth-card::after,
.dashboard-panel::after,
.import-panel::after,
.premium-card::after,
.console-card::after,
.console-help::after,
.domains-panel::after {
  content: "";
  position: absolute;
  inset: auto -24% -48% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 227, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.feature-card:hover,
.project-card:hover,
.price-card:hover,
.auth-card:hover,
.dashboard-panel:hover,
.import-panel:hover,
.premium-card:hover,
.console-card:hover,
.console-help:hover,
.domains-panel:hover {
  transform: translateY(-4px);
  transition: transform 220ms ease;
}

@keyframes driftA {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(8%, 6%) scale(1.08);
  }
}

@keyframes driftB {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-7%, -5%) scale(1.06);
  }
}

@keyframes floatOrbA {
  from {
    transform: translate(-22%, -12%) scale(1);
  }
  to {
    transform: translate(-18%, -8%) scale(1.06);
  }
}

@keyframes floatOrbB {
  from {
    transform: translate(28%, 8%) scale(1);
  }
  to {
    transform: translate(24%, 12%) scale(1.05);
  }
}

@keyframes floatCard {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

@keyframes pulseGlow {
  from {
    transform: scale(0.9);
    opacity: 0.55;
  }
  to {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes bgShift {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0;
  }
  to {
    background-position:
      18px 14px,
      -16px 12px,
      12px -18px,
      0 0;
  }
}

@keyframes ripple {
  from {
    transform: scale(0.96);
    opacity: 0.32;
  }
  to {
    transform: scale(1.04);
    opacity: 0.72;
  }
}

@keyframes rotateRibbon {
  from {
    transform: translate(-50%, 0) rotate(0deg);
  }
  to {
    transform: translate(-50%, 0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

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

@media (max-width: 1080px) {
  .hero,
  .auth-layout,
  .import-layout,
  .projects-grid,
  .premium-layout,
  .domains-layout,
  .console-layout,
  .feature-grid,
  .products-layout,
  .status-card,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    padding-top: 40px;
  }

  .stats-card {
    max-width: none;
    margin-left: 0;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .host-grid,
  .account-summary,
  .import-row,
  .payment-summary,
  .domain-notes,
  .console-form,
  .import-steps {
    grid-template-columns: 1fr;
  }

  .account-panels {
    grid-template-columns: 1fr;
  }

  .price-card.featured {
    transform: none;
  }
}

@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
  }

  .nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    overflow-x: auto;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-metrics,
  .feature-grid,
  .projects-toolbar,
  .ops-grid {
    grid-template-columns: 1fr;
  }

  .console-form {
    justify-items: stretch;
  }

  .projects-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .domain-item,
  .premium-layout,
  .domains-layout {
    grid-template-columns: 1fr;
  }

  .domain-item {
    display: grid;
  }

  .domain-item-actions {
    justify-items: start;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}