:root {
  --bg-0: #07030d;
  --bg-1: #12071e;
  --bg-2: #1b0d2e;
  --panel-0: rgba(21, 10, 36, 0.92);
  --panel-1: rgba(34, 15, 57, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.03);
  --line: rgba(199, 148, 255, 0.22);
  --line-strong: rgba(223, 198, 255, 0.5);
  --text: #f6efff;
  --muted: #cdbde7;
  --muted-2: #a991c8;
  --primary: #9852ff;
  --primary-2: #c589ff;
  --glow: rgba(161, 92, 255, 0.28);
  --success: #82ffd1;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow-lg: 0 24px 70px rgba(52, 13, 94, 0.28);
  --shadow-md: 0 16px 40px rgba(35, 10, 64, 0.22);
  --content: 1180px;
  --font-display: "Bahnschrift", "Arial Black", "Segoe UI", sans-serif;
  --font-body: "Segoe UI", Tahoma, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 72% 18%, rgba(199, 128, 255, 0.18), transparent 15%),
    radial-gradient(circle at 66% 26%, rgba(148, 77, 255, 0.22), transparent 24%),
    radial-gradient(circle at 24% 14%, rgba(106, 42, 204, 0.12), transparent 18%),
    linear-gradient(180deg, #14081f 0%, #0b0412 42%, #06020b 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.05), transparent 20%),
    linear-gradient(90deg, transparent 0%, transparent 55%, rgba(205, 151, 255, 0.08) 68%, transparent 80%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 42px,
      rgba(255, 255, 255, 0.01) 43px,
      transparent 44px
    );
  opacity: 0.9;
}

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

.site-shell {
  position: relative;
}

.is-hidden {
  display: none !important;
}

.page-reveal {
  animation: page-reveal 420ms ease;
}

.page-exit {
  animation: page-exit 260ms ease forwards;
  pointer-events: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
  background: rgba(11, 5, 19, 0.78);
  border-bottom: 1px solid rgba(201, 161, 255, 0.14);
}

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

.topbar__inner {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.brand__mark {
  width: 62px;
  height: 62px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(180deg, #3c146d 0%, #150724 100%);
  border: 1px solid rgba(242, 228, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(180, 115, 255, 0.18),
    0 0 34px rgba(173, 104, 255, 0.3),
    0 18px 36px rgba(56, 14, 102, 0.34);
  overflow: hidden;
}

.brand__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand__mark::after {
  display: none;
}

.brand__mark-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.brand__text {
  min-width: 0;
}

.brand__text strong {
  display: block;
  font-family: "Bahnschrift SemiBold", "Segoe UI", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f9f6ff;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 24px rgba(135, 65, 224, 0.22);
}

.brand__text span {
  display: block;
  margin-top: 6px;
  color: #ccb5ea;
  font-size: 0.76rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.auth {
  position: relative;
}

.auth__login {
  min-height: 46px;
  padding: 0 18px;
}

.auth__user {
  display: none;
  position: relative;
}

.auth[data-auth-state="guest"] .auth__login {
  display: inline-flex;
}

.auth[data-auth-state="guest"] .auth__user {
  display: none;
}

.auth[data-auth-state="user"] .auth__login {
  display: none;
}

.auth[data-auth-state="user"] .auth__user {
  display: block;
}

.auth__avatar {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(225, 203, 255, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    linear-gradient(180deg, rgba(54, 22, 92, 0.94), rgba(20, 10, 34, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 20px rgba(33, 10, 62, 0.22);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  overflow: hidden;
}

.auth__avatar:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 14px 28px rgba(72, 22, 129, 0.28),
    0 0 18px rgba(155, 84, 255, 0.16);
}

.auth__avatar:active {
  transform: scale(0.97);
}

.auth__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.auth__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(223, 198, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    linear-gradient(180deg, rgba(31, 13, 53, 0.98), rgba(12, 7, 21, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px rgba(38, 11, 72, 0.36);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 30;
}

.auth__menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.auth__menu-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.auth__menu-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
}

.auth__menu-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 0.84rem;
}

.auth__menu a,
.auth__menu button {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(223, 198, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: #efe4ff;
  font-size: 0.94rem;
  font-weight: 700;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.auth__menu a:hover,
.auth__menu button:hover {
  transform: translateX(4px);
  border-color: rgba(223, 198, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(211, 181, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    linear-gradient(180deg, rgba(42, 18, 71, 0.94), rgba(18, 9, 32, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(30, 8, 57, 0.22);
  color: #e2d4f7;
  font-size: 0.96rem;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  transform: translateY(-2px);
  border-color: rgba(236, 214, 255, 0.28);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px rgba(72, 22, 129, 0.28),
    0 0 22px rgba(155, 84, 255, 0.14);
}

.hero-wrap {
  padding: 30px 0 18px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
  gap: 24px;
  align-items: stretch;
}

.hero__content,
.hero__visual,
.card,
.detail-card,
.status-card,
.faq-item,
.help-step,
.panel-card,
.timeline-item {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(43, 18, 71, 0.92), rgba(17, 7, 29, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(161, 93, 255, 0.08),
    var(--shadow-lg);
  overflow: hidden;
}

.hero__content::before,
.hero__visual::before,
.card::before,
.detail-card::before,
.status-card::before,
.faq-item::before,
.help-step::before,
.panel-card::before,
.timeline-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(242, 228, 255, 0.08);
}

.hero__content,
.hero__visual {
  min-height: 100%;
}

.hero__content {
  padding: 38px;
}

.hero__visual {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eyebrow,
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(214, 181, 255, 0.16);
  background: rgba(148, 79, 255, 0.12);
  color: #e8dfff;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1,
.section h1,
.section h2 {
  margin: 18px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 5.8rem);
}

.section h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.section h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.hero p,
.section p,
.card p,
.detail-card p,
.status-card p,
.faq-item p,
.help-step p,
.panel-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

.hero__actions,
.page-actions,
.panel-actions,
.status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.page-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 18px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

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

.button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(20, 8, 38, 0.16);
}

.button--primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(180deg, #b06bff 0%, #7d32ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 26px rgba(104, 38, 208, 0.38),
    0 0 28px rgba(170, 104, 255, 0.22);
}

.button--secondary,
.button--ghost,
.button--back {
  color: #f1e7ff;
  border-color: rgba(216, 186, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(180deg, rgba(54, 22, 92, 0.94), rgba(20, 10, 34, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 20px rgba(33, 10, 62, 0.22);
}

.hero-stats,
.feature-grid,
.detail-grid,
.status-grid,
.panel-grid,
.faq-grid,
.help-grid,
.timeline {
  display: grid;
  gap: 18px;
}

.hero-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
}

.mini-stat {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(211, 181, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mini-stat:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(223, 198, 255, 0.22);
  box-shadow: 0 18px 34px rgba(56, 17, 104, 0.2);
}

.mini-stat strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.mini-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.hero-logo {
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.12), transparent 16%),
    radial-gradient(circle at 50% 48%, rgba(179, 111, 255, 0.32), transparent 44%),
    linear-gradient(180deg, rgba(33, 13, 56, 0.98), rgba(10, 5, 18, 0.98));
}

.civil-dock {
  width: 100%;
  min-height: 520px;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(223, 198, 255, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(193, 133, 255, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(37, 15, 62, 0.96), rgba(12, 6, 21, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 70px rgba(44, 12, 84, 0.3);
}

.ops-board {
  width: 100%;
  min-height: 520px;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(223, 198, 255, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(193, 133, 255, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(37, 15, 62, 0.96), rgba(12, 6, 21, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 70px rgba(44, 12, 84, 0.3);
}

.ops-board__head h3 {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: 2rem;
}

.ops-board__head p {
  color: var(--muted);
  line-height: 1.7;
}

.ops-board__list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.ops-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(223, 198, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ops-row:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(223, 198, 255, 0.2);
  box-shadow: 0 18px 32px rgba(54, 16, 100, 0.22);
}

.ops-row__signal {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #b777ff;
  box-shadow: 0 0 14px rgba(183, 119, 255, 0.8);
}

.ops-row__body strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 1rem;
}

.ops-row__body p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.civil-dock__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(152, 82, 255, 0.14);
  border: 1px solid rgba(223, 198, 255, 0.14);
  color: #ecdfff;
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.civil-dock__head h3 {
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-size: 2rem;
}

.civil-dock__head p {
  color: var(--muted);
  line-height: 1.7;
}

.civil-steps {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.civil-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(223, 198, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.civil-step:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(223, 198, 255, 0.2);
  box-shadow: 0 18px 32px rgba(54, 16, 100, 0.22);
}

.civil-step__no {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent),
    linear-gradient(180deg, #a866ff 0%, #7431f2 100%);
  box-shadow: 0 12px 22px rgba(104, 38, 208, 0.3);
}

.civil-step__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.04rem;
  margin-bottom: 4px;
}

.civil-step__body p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.civil-dock__footer {
  margin-top: 18px;
}

.command-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(223, 198, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: #e9ddfb;
  font-size: 0.9rem;
}

.hero-logo__plate {
  width: min(100%, 360px);
  aspect-ratio: 1;
  position: relative;
  border-radius: 78px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #35115f 0%, #140723 100%);
  border: 1px solid rgba(245, 231, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -16px 28px rgba(0, 0, 0, 0.34),
    0 0 0 2px rgba(193, 133, 255, 0.16),
    0 0 64px rgba(177, 107, 255, 0.34),
    0 30px 80px rgba(81, 24, 143, 0.34);
  animation: floating-logo 6s ease-in-out infinite;
  overflow: hidden;
}

.hero-logo__plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px rgba(235, 215, 255, 0.12),
    0 0 24px rgba(226, 191, 255, 0.16);
}

.hero-logo__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.hero-logo__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  opacity: 0.18;
}

.section {
  padding: 42px 0;
}

.panel-state + .panel-section,
.panel-section + .panel-section {
  padding-top: 8px;
}

.gate-card,
.welcome-card {
  min-height: 100%;
}

.section__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.section__head p {
  max-width: 620px;
}

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

.detail-grid,
.faq-grid,
.help-grid,
.panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-grid,
.timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card,
.detail-card,
.status-card,
.faq-item,
.help-step,
.panel-card,
.timeline-item {
  padding: 28px;
}

.card,
.detail-card,
.status-card,
.panel-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.card:hover,
.detail-card:hover,
.status-card:hover,
.panel-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(199, 148, 255, 0.14),
    0 28px 80px rgba(66, 17, 121, 0.3);
}

.card__icon,
.detail-card__icon,
.status-card__icon,
.panel-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(232, 213, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    linear-gradient(180deg, rgba(148, 79, 255, 0.4), rgba(35, 11, 62, 0.95));
  box-shadow:
    0 14px 30px rgba(79, 24, 143, 0.24),
    0 0 18px rgba(170, 104, 255, 0.14);
  font-family: var(--font-display);
  font-weight: 900;
}

.card h3,
.detail-card h3,
.status-card h3,
.faq-item h3,
.help-step h3,
.panel-card h3 {
  margin: 18px 0 12px;
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 900;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #efe5ff;
}

.status-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 12px var(--success);
}

.metric {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(223, 198, 255, 0.08);
  color: var(--muted);
}

.metric strong {
  color: var(--text);
}

.owner-status {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}

.control-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.control-input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(223, 198, 255, 0.12);
  border-radius: 16px;
  outline: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    linear-gradient(180deg, rgba(33, 13, 55, 0.96), rgba(14, 7, 24, 0.98));
  color: #f3eaff;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.control-input:focus {
  border-color: rgba(223, 198, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(165, 98, 255, 0.16);
  transform: translateY(-1px);
}

.control-input::placeholder {
  color: #ac93cb;
}

.control-input--area {
  min-height: 118px;
  padding: 14px 16px;
  resize: vertical;
}

.control-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.94rem;
}

.control-check input {
  accent-color: #9f5fff;
}

.stack-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.stack-item,
.stack-list__empty {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(223, 198, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.stack-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.96rem;
  color: #f3eaff;
}

.stack-item span,
.stack-list__empty {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.faq-item details {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
}

.faq-item details + details {
  margin-top: 12px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  color: #f2e9ff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
}

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

.faq-item details p {
  margin-top: 12px;
}

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

.list li + li {
  margin-top: 6px;
}

.login-chip,
.footer__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(213, 182, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: #dccaf7;
}

.muted-note {
  color: var(--muted);
}

.footer-wrap {
  padding: 14px 0 38px;
}

.footer {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 24px 28px;
  border-radius: 24px;
  border: 1px solid rgba(212, 181, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    linear-gradient(180deg, rgba(29, 10, 48, 0.94), rgba(10, 5, 18, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--shadow-md);
}

.footer__brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.footer__brand strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: 0.08em;
}

.footer__legal {
  color: #f1e8ff;
  font-size: 0.98rem;
  text-align: center;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.footer__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(212, 181, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(180deg, rgba(39, 14, 64, 0.96), rgba(13, 7, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 20px rgba(41, 13, 76, 0.22);
  color: #ece1ff;
  font-size: 0.94rem;
  font-weight: 700;
}

@keyframes page-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateY(18px) scale(0.988);
    filter: blur(8px);
  }
}

@keyframes floating-logo {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 1100px) {
  .hero,
  .feature-grid,
  .detail-grid,
  .faq-grid,
  .help-grid,
  .panel-grid,
  .status-grid,
  .timeline {
    grid-template-columns: 1fr;
  }

  .hero-logo {
    min-height: 420px;
  }
}

@media (max-width: 780px) {
  .topbar__inner,
  .section__head {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar__inner {
    padding: 14px 0;
  }

  .brand {
    justify-content: center;
  }

  .nav {
    justify-content: center;
  }

  .nav a {
    flex: 1 1 auto;
  }

  .topbar__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .auth {
    width: 100%;
  }

  .auth__login,
  .auth__avatar {
    width: 100%;
  }

  .auth__menu {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .hero__content,
  .hero__visual,
  .card,
  .detail-card,
  .status-card,
  .faq-item,
  .help-step,
  .panel-card,
  .timeline-item {
    padding: 22px;
    border-radius: 24px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .button,
  .footer__nav a {
    width: 100%;
  }

  .hero__actions,
  .page-actions,
  .panel-actions,
  .status-actions,
  .footer__nav {
    flex-direction: column;
  }

  .brand__text strong {
    font-size: 1.18rem;
    letter-spacing: 0.12em;
  }

  .brand__text span {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
  }

  .ops-row {
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .ops-row .command-chip,
  .ops-row .login-chip {
    grid-column: 2;
    justify-self: flex-start;
  }
}