body[data-page="home"],
body[data-page="offer"],
body[data-page="contact"],
body[data-page="faq"],
body[data-page="servers"] {
  background:
    radial-gradient(circle at 12% 0%, rgba(124,156,255,.12), transparent 22%),
    radial-gradient(circle at 88% 10%, rgba(127,216,221,.06), transparent 18%),
    linear-gradient(180deg, #060a14 0%, #08101d 38%, #09111f 100%);
  background-attachment: fixed;
}

body[data-page]:not([data-page="secure"]).ui-booting > header,
body[data-page]:not([data-page="secure"]).ui-booting > main,
body[data-page]:not([data-page="secure"]).ui-booting > footer,
body[data-page]:not([data-page="secure"]).ui-booting .page-shell {
  opacity: 0;
  transform: translateY(14px) scale(0.995);
  filter: blur(5px);
}

body[data-page]:not([data-page="secure"]).ui-ready > header,
body[data-page]:not([data-page="secure"]).ui-ready > main,
body[data-page]:not([data-page="secure"]).ui-ready > footer,
body[data-page]:not([data-page="secure"]).ui-ready .page-shell {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    filter 0.42s ease;
}

body[data-page]:not([data-page="secure"]) header[data-site-header],
body[data-page]:not([data-page="secure"]) footer[data-site-footer] {
  display: block;
}

body[data-page]:not([data-page="secure"]) header[data-site-header] {
  min-height: 72px;
}

body[data-page]:not([data-page="secure"]) footer[data-site-footer] {
  min-height: 88px;
}

body[data-page="home"] .eyebrow,
body[data-page="offer"] .eyebrow,
body[data-page="contact"] .eyebrow,
body[data-page="faq"] .eyebrow,
body[data-page="servers"] .eyebrow {
  position: relative;
  overflow: hidden;
  color: #98ece7;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(255,255,255,.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 40px rgba(0,0,0,.28),
    0 0 34px rgba(124,156,255,.08);
  text-shadow: 0 0 10px rgba(127,216,221,.14);
}

body[data-page="home"] .eyebrow::before,
body[data-page="offer"] .eyebrow::before,
body[data-page="contact"] .eyebrow::before,
body[data-page="faq"] .eyebrow::before,
body[data-page="servers"] .eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 48%);
  pointer-events: none;
}

body[data-page="home"] .panel,
body[data-page="offer"] .panel,
body[data-page="contact"] .panel,
body[data-page="servers"] .panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 22px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 48px rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
}

body[data-page="home"] .panel::before,
body[data-page="offer"] .panel::before,
body[data-page="contact"] .panel::before,
body[data-page="servers"] .panel::before,
body[data-page="home"] .grid-3 .card::after,
body[data-page="home"] .team-grid .card::after,
body[data-page="home"] .contact-grid .card::after,
body[data-page="offer"] .card::after,
body[data-page="faq"] .faq-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(
      135deg,
      rgba(224,229,236,.16) 0%,
      rgba(193,172,119,.12) 22%,
      rgba(255,255,255,.06) 42%,
      rgba(134,188,211,.08) 64%,
      rgba(229,232,238,.12) 82%,
      rgba(194,173,120,.10) 100%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .55;
  pointer-events: none;
}

body[data-page="home"] .section-head h2,
body[data-page="servers"] .section-head h2 {
  color: #f6f9ff;
  text-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 0 24px rgba(124,156,255,.06);
}

body[data-page="home"] .section-head p,
body[data-page="offer"] .panel p,
body[data-page="contact"] .panel p,
body[data-page="faq"] .faq-card p,
body[data-page="servers"] .section-head p,
body[data-page="servers"] .card p,
body[data-page="servers"] .panel p {
  color: rgba(221,228,243,.86);
}

body[data-page="home"] .grid-3 .card,
body[data-page="home"] .team-grid .card,
body[data-page="home"] .contact-grid .card,
body[data-page="offer"] .card,
body[data-page="faq"] .faq-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 38px rgba(0,0,0,.26),
    0 0 16px rgba(168,180,214,.035);
  backdrop-filter: blur(10px);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}

body[data-page="home"] .grid-3 .card::before,
body[data-page="home"] .team-grid .card::before,
body[data-page="home"] .contact-grid .card::before,
body[data-page="offer"] .card::before,
body[data-page="faq"] .faq-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 48%);
  pointer-events: none;
}

body[data-page="home"] .grid-3 .card:hover,
body[data-page="home"] .team-grid .card:hover,
body[data-page="home"] .contact-grid .card:hover,
body[data-page="offer"] .card:hover,
body[data-page="faq"] .faq-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 22px 44px rgba(0,0,0,.30),
    0 0 28px rgba(124,156,255,.06),
    0 0 14px rgba(197,177,121,.045);
}

body[data-page="servers"] .server-item,
body[data-page="home"] .server-item {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}

body[data-page="servers"] .server-item::before,
body[data-page="home"] .server-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 48%);
  pointer-events: none;
}

body[data-page="servers"] .status,
body[data-page="home"] .status {
  backdrop-filter: blur(6px);
}