:root,
[data-theme="dark"]{
  --bg: #0b0c0e;
  --surface: #131418;
  --surface-2: #191b20;
  --border: #24262c;
  --text: #e9e9ec;
  --text-muted: #8a8c96;
  --accent: #5865f2;
  --accent-hover: #4752c4;
  --accent-soft: #1a1d30;
  --danger: #d1453b;
  --radius: 10px;
  --max-width: 1080px;
  --shadow: 0 4px 20px rgba(0,0,0,0.28);
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", "Cairo", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

[data-theme="light"]{
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-2: #f1f1ef;
  --border: #e2e2df;
  --text: #1a1b1e;
  --text-muted: #6c6e76;
  --accent: #5865f2;
  --accent-hover: #4752c4;
  --accent-soft: #eceeff;
  --danger: #c8433a;
  --shadow: 0 4px 20px rgba(20,20,30,0.05);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  line-height: 1.6;
  min-height: 100vh;
  transition: background .25s ease, color .25s ease;
}

h1, h2, h3,
.brand-text,
.card-title,
.service-card h3,
.server-modal-name{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

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

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header{
  position: sticky;
  top: 0;
  z-index: 65;
  padding: 14px 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.site-header .container.header-inner{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
}

.brand{
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
  min-width: 0;
}

.brand-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.brand-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.brand-sub{
  color: var(--text-muted);
  font-weight: 400;
  font-size: 12.5px;
}

.header-right{
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

nav.site-nav{
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

nav.site-nav a{
  color: var(--text-muted);
  font-size: 13.5px;
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease, background .15s ease;
}

nav.site-nav a:hover{
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.theme-toggle{
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s ease, transform .35s cubic-bezier(.34,1.56,.64,1), color .15s ease;
}

.theme-toggle:hover{
  border-color: var(--accent);
  color: var(--accent);
}

.nav-toggle{
  display: none;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bar{
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .25s ease, opacity .2s ease;
}

.nav-toggle:hover .nav-toggle-bar{
  background: var(--accent);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop{
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.nav-backdrop.is-open{
  opacity: 1;
  visibility: visible;
}

.btn-login{
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
  border-radius: 999px;
}

.user-chip{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  min-width: 0;
}

.user-chip-avatar{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.user-chip-name{
  font-size: 13.5px;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chip-logout{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: color .15s ease, background .15s ease;
}

.user-chip-logout:hover{
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

@media (max-width: 1040px){
  .brand-sub{ display: none; }
  nav.site-nav a{
    padding: 8px 10px;
    font-size: 13px;
  }
  .header-right{ gap: 6px; }
}

@media (max-width: 900px){
  nav.site-nav a span.nav-label{ display: none; }
  nav.site-nav a{ padding: 8px 10px; font-size: 15px; }
}

@media (max-width: 760px){
  .site-header .container.header-inner{
    grid-template-columns: 1fr auto;
  }
  .brand{ grid-column: 1; justify-self: start; }
  .header-right{ grid-column: 2; }
  .user-chip-name{ display: none; }

  .nav-toggle{ display: flex; }

  nav.site-nav{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 60;
    height: 100dvh;
    width: min(78vw, 300px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 84px 18px 24px;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: -12px 0 40px rgba(0,0,0,0.25);
    transform: translateX(100%);
    transition: transform .3s ease;
  }

  nav.site-nav.is-open{
    transform: translateX(0);
  }

  nav.site-nav a{
    width: 100%;
    padding: 14px 14px;
    border-radius: 12px;
    font-size: 15px;
  }

  nav.site-nav a span.nav-label{
    display: inline;
  }

  nav.site-nav a:hover{
    background: color-mix(in srgb, var(--surface) 60%, var(--accent) 10%);
  }
}

@media (min-width: 761px){
  .nav-backdrop{ display: none; }
}

html{ scroll-behavior: smooth; }

.bg-scene{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s ease;
}

[data-theme="light"] .bg-scene{
  opacity: 0;
}

.bg-stars{
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
}

.bg-stars-1{
  box-shadow:
    1309px 114px 0 rgba(255,255,255,0.36),
    563px 250px 0 rgba(255,255,255,0.46),
    1508px 104px 0 rgba(255,255,255,0.69),
    1827px 558px 0 rgba(255,255,255,0.39),
    864px 32px 0 rgba(255,255,255,0.36),
    447px 238px 0 rgba(255,255,255,0.6),
    54px 574px 0 rgba(255,255,255,0.45),
    1330px 718px 0 rgba(255,255,255,0.62),
    451px 459px 0 rgba(255,255,255,0.64),
    1657px 6px 0 rgba(255,255,255,0.73),
    326px 714px 0 rgba(255,255,255,0.56),
    569px 159px 0 rgba(255,255,255,0.46),
    1563px 344px 0 rgba(255,255,255,0.4),
    778px 99px 0 rgba(255,255,255,0.53),
    704px 618px 0 rgba(255,255,255,0.48),
    88px 747px 0 rgba(255,255,255,0.58),
    255px 387px 0 rgba(255,255,255,0.39),
    600px 643px 0 rgba(255,255,255,0.66),
    1764px 370px 0 rgba(255,255,255,0.64),
    1442px 71px 0 rgba(255,255,255,0.37),
    466px 296px 0 rgba(255,255,255,0.84),
    1751px 238px 0 rgba(255,255,255,0.78),
    778px 284px 0 rgba(255,255,255,0.58),
    1708px 373px 0 rgba(255,255,255,0.43),
    727px 214px 0 rgba(255,255,255,0.69),
    1437px 699px 0 rgba(255,255,255,0.67),
    1247px 650px 0 rgba(255,255,255,0.44),
    1493px 250px 0 rgba(255,255,255,0.43),
    777px 276px 0 rgba(255,255,255,0.84),
    1310px 704px 0 rgba(255,255,255,0.63),
    1402px 332px 0 rgba(255,255,255,0.77),
    1589px 57px 0 rgba(255,255,255,0.46),
    65px 323px 0 rgba(255,255,255,0.55),
    135px 216px 0 rgba(255,255,255,0.81),
    1161px 735px 0 rgba(255,255,255,0.51),
    1342px 511px 0 rgba(255,255,255,0.55),
    1872px 658px 0 rgba(255,255,255,0.58),
    542px 142px 0 rgba(255,255,255,0.47),
    1149px 551px 0 rgba(255,255,255,0.48),
    1197px 438px 0 rgba(255,255,255,0.8),
    817px 370px 0 rgba(255,255,255,0.46),
    283px 521px 0 rgba(255,255,255,0.6),
    1547px 48px 0 rgba(255,255,255,0.78),
    313px 642px 0 rgba(255,255,255,0.43),
    1393px 432px 0 rgba(255,255,255,0.65),
    788px 390px 0 rgba(255,255,255,0.65),
    958px 541px 0 rgba(255,255,255,0.48),
    1133px 11px 0 rgba(255,255,255,0.69),
    234px 698px 0 rgba(255,255,255,0.79),
    1537px 273px 0 rgba(255,255,255,0.73),
    696px 114px 0 rgba(255,255,255,0.5),
    323px 464px 0 rgba(255,255,255,0.35),
    1478px 736px 0 rgba(255,255,255,0.48),
    1025px 182px 0 rgba(255,255,255,0.6),
    217px 640px 0 rgba(255,255,255,0.5),
    1308px 519px 0 rgba(255,255,255,0.65),
    313px 382px 0 rgba(255,255,255,0.73),
    1104px 543px 0 rgba(255,255,255,0.81),
    1226px 331px 0 rgba(255,255,255,0.59),
    229px 371px 0 rgba(255,255,255,0.79),
    1703px 314px 0 rgba(255,255,255,0.47),
    493px 580px 0 rgba(255,255,255,0.82),
    175px 749px 0 rgba(255,255,255,0.59),
    141px 545px 0 rgba(255,255,255,0.73),
    262px 675px 0 rgba(255,255,255,0.59),
    1125px 169px 0 rgba(255,255,255,0.48),
    1786px 621px 0 rgba(255,255,255,0.56),
    433px 552px 0 rgba(255,255,255,0.73),
    1412px 205px 0 rgba(255,255,255,0.71),
    817px 687px 0 rgba(255,255,255,0.67),
    897px 529px 0 rgba(255,255,255,0.58),
    507px 230px 0 rgba(255,255,255,0.38),
    43px 602px 0 rgba(255,255,255,0.63),
    1205px 225px 0 rgba(255,255,255,0.35),
    1449px 646px 0 rgba(255,255,255,0.38),
    138px 32px 0 rgba(255,255,255,0.78),
    145px 526px 0 rgba(255,255,255,0.47),
    1370px 497px 0 rgba(255,255,255,0.46),
    270px 740px 0 rgba(255,255,255,0.82),
    1169px 590px 0 rgba(255,255,255,0.59),
    1606px 484px 0 rgba(255,255,255,0.75),
    389px 96px 0 rgba(255,255,255,0.4),
    882px 362px 0 rgba(255,255,255,0.56),
    956px 746px 0 rgba(255,255,255,0.38),
    1338px 661px 0 rgba(255,255,255,0.4),
    824px 745px 0 rgba(255,255,255,0.52),
    1764px 111px 0 rgba(255,255,255,0.47),
    389px 549px 0 rgba(255,255,255,0.57),
    864px 187px 0 rgba(255,255,255,0.49),
    511px 77px 0 rgba(255,255,255,0.57),
    1764px 563px 0 rgba(255,255,255,0.4),
    1335px 553px 0 rgba(255,255,255,0.77),
    191px 242px 0 rgba(255,255,255,0.43),
    994px 492px 0 rgba(255,255,255,0.46),
    821px 60px 0 rgba(255,255,255,0.43),
    4px 399px 0 rgba(255,255,255,0.48),
    1605px 465px 0 rgba(255,255,255,0.49),
    1426px 748px 0 rgba(255,255,255,0.85),
    1138px 677px 0 rgba(255,255,255,0.71),
    317px 194px 0 rgba(255,255,255,0.5),
    119px 593px 0 rgba(255,255,255,0.72),
    124px 321px 0 rgba(255,255,255,0.38),
    1196px 488px 0 rgba(255,255,255,0.6),
    1746px 543px 0 rgba(255,255,255,0.43),
    1040px 82px 0 rgba(255,255,255,0.78),
    140px 609px 0 rgba(255,255,255,0.38),
    1765px 240px 0 rgba(255,255,255,0.55),
    1823px 583px 0 rgba(255,255,255,0.47),
    1217px 40px 0 rgba(255,255,255,0.66),
    858px 673px 0 rgba(255,255,255,0.64);
  animation: bg-twinkle 5.5s ease-in-out infinite;
}

.bg-stars-2{
  box-shadow:
    1070px 323px 0 rgba(255,255,255,0.82),
    418px 685px 0 rgba(255,255,255,0.71),
    488px 271px 0 rgba(255,255,255,0.55),
    1375px 660px 0 rgba(255,255,255,0.5),
    647px 74px 0 rgba(255,255,255,0.35),
    1272px 576px 0 rgba(255,255,255,0.85),
    150px 550px 0 rgba(255,255,255,0.46),
    543px 135px 0 rgba(255,255,255,0.82),
    1804px 70px 0 rgba(255,255,255,0.79),
    756px 291px 0 rgba(255,255,255,0.43),
    1707px 556px 0 rgba(255,255,255,0.7),
    1252px 669px 0 rgba(255,255,255,0.61),
    1367px 567px 0 rgba(255,255,255,0.5),
    1358px 106px 0 rgba(255,255,255,0.82),
    275px 270px 0 rgba(255,255,255,0.41),
    219px 566px 0 rgba(255,255,255,0.43),
    577px 619px 0 rgba(255,255,255,0.46),
    702px 208px 0 rgba(255,255,255,0.69),
    1746px 270px 0 rgba(255,255,255,0.6),
    514px 52px 0 rgba(255,255,255,0.4),
    867px 283px 0 rgba(255,255,255,0.37),
    683px 133px 0 rgba(255,255,255,0.67),
    536px 165px 0 rgba(255,255,255,0.72),
    1129px 437px 0 rgba(255,255,255,0.63),
    229px 77px 0 rgba(255,255,255,0.82),
    1415px 152px 0 rgba(255,255,255,0.62),
    1709px 378px 0 rgba(255,255,255,0.64),
    303px 440px 0 rgba(255,255,255,0.41),
    631px 373px 0 rgba(255,255,255,0.8),
    1630px 40px 0 rgba(255,255,255,0.8),
    430px 698px 0 rgba(255,255,255,0.47),
    210px 362px 0 rgba(255,255,255,0.74),
    1810px 416px 0 rgba(255,255,255,0.84),
    1534px 158px 0 rgba(255,255,255,0.81),
    484px 166px 0 rgba(255,255,255,0.84),
    1660px 181px 0 rgba(255,255,255,0.79),
    50px 183px 0 rgba(255,255,255,0.72),
    680px 421px 0 rgba(255,255,255,0.75),
    1769px 254px 0 rgba(255,255,255,0.48),
    1612px 110px 0 rgba(255,255,255,0.54),
    79px 481px 0 rgba(255,255,255,0.46),
    1672px 471px 0 rgba(255,255,255,0.52),
    1680px 233px 0 rgba(255,255,255,0.46),
    1351px 197px 0 rgba(255,255,255,0.55),
    570px 71px 0 rgba(255,255,255,0.83),
    571px 359px 0 rgba(255,255,255,0.67),
    818px 695px 0 rgba(255,255,255,0.84),
    1098px 339px 0 rgba(255,255,255,0.82),
    236px 267px 0 rgba(255,255,255,0.44),
    543px 39px 0 rgba(255,255,255,0.4),
    889px 353px 0 rgba(255,255,255,0.71),
    642px 446px 0 rgba(255,255,255,0.65),
    1047px 118px 0 rgba(255,255,255,0.54),
    1180px 194px 0 rgba(255,255,255,0.48),
    1451px 446px 0 rgba(255,255,255,0.35);
  animation: bg-twinkle 4s ease-in-out infinite reverse;
}

@keyframes bg-twinkle{
  0%, 100%{ opacity: 0.55; }
  50%{ opacity: 1; }
}

.bg-sparkle{
  position: absolute;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, #fff), 0 0 2px #fff;
  transform-origin: center;
  animation: bg-sparkle-twinkle ease-in-out infinite;
}
.bg-sparkle-1{ top: 12%; left: 18%; font-size: 11px; animation-duration: 3s; animation-delay: .2s; }
.bg-sparkle-2{ top: 21%; left: 74%; font-size: 15px; animation-duration: 4.2s; animation-delay: 1.1s; }
.bg-sparkle-3{ top: 40%; left: 46%; font-size: 9px; animation-duration: 3.6s; animation-delay: .6s; }
.bg-sparkle-4{ top: 7%; left: 55%; font-size: 12px; animation-duration: 3.9s; animation-delay: 1.8s; }

@keyframes bg-sparkle-twinkle{
  0%, 100%{ opacity: .2; transform: scale(.65) rotate(0deg); }
  50%{ opacity: 1; transform: scale(1.2) rotate(25deg); }
}

.bg-moon{
  position: absolute;
  top: 9%;
  right: 11%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fdfbf3 0%, #f2eddc 45%, #d8d0b8 100%);
  box-shadow:
    0 0 40px 6px color-mix(in srgb, var(--accent) 25%, transparent),
    0 0 90px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: bg-moon-drift 12s ease-in-out infinite, bg-moon-glow 4.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes bg-moon-glow{
  0%, 100%{
    box-shadow:
      0 0 40px 6px color-mix(in srgb, var(--accent) 25%, transparent),
      0 0 90px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  50%{
    box-shadow:
      0 0 58px 12px color-mix(in srgb, var(--accent) 38%, transparent),
      0 0 116px 32px color-mix(in srgb, var(--accent) 20%, transparent);
  }
}

.bg-moon::before, .bg-moon::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, #b8b09a 55%, transparent);
}

.bg-moon::before{
  width: 16px;
  height: 16px;
  top: 18px;
  left: 14px;
}

.bg-moon::after{
  width: 10px;
  height: 10px;
  top: 42px;
  left: 40px;
}

@keyframes bg-moon-drift{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Real light rays cast from the moon, angled toward the tree on the lower-left.
   Anchored inside .bg-moon so they always originate from the moon itself and
   drift together with it. */
.bg-moon-rays{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: -1;
}

.bg-moon-wash{
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 240vh;
  transform-origin: top center;
  transform: translateX(-50%) rotate(58deg);
  clip-path: polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent) 24%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 40%,
    transparent 82%);
  mix-blend-mode: screen;
  filter: blur(46px);
  opacity: .5;
  animation: bg-ray-flicker 6.5s ease-in-out infinite;
}

.bg-ray{
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 220vh;
  transform-origin: top center;
  clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(to bottom,
    color-mix(in srgb, #fff 55%, var(--accent) 45%) 0%,
    color-mix(in srgb, var(--accent) 45%, transparent) 22%,
    transparent 88%);
  mix-blend-mode: screen;
  filter: blur(3px);
  opacity: .26;
  animation: bg-ray-flicker ease-in-out infinite;
}

.bg-ray-1{ width: 10px; transform: translateX(-50%) rotate(53deg); animation-duration: 5.5s; animation-delay: 0s; }
.bg-ray-2{ width: 20px; transform: translateX(-50%) rotate(58deg); animation-duration: 6.5s; animation-delay: .9s;  opacity: .2; }
.bg-ray-3{ width: 8px;  transform: translateX(-50%) rotate(63deg); animation-duration: 4.8s; animation-delay: 1.7s; opacity: .22; }

@keyframes bg-ray-flicker{
  0%, 100%{ opacity: .16; }
  50%{ opacity: .34; }
}

@media (max-width: 900px){
  .bg-moon-rays{ display: none; }
}

.bg-meteor{
  position: absolute;
  width: 130px;
  height: 3px;
  background: linear-gradient(to right,
    color-mix(in srgb, #fff 55%, var(--accent) 45%) 0%,
    color-mix(in srgb, var(--accent) 55%, transparent) 40%,
    transparent 100%);
  clip-path: polygon(0% 12%, 0% 88%, 100% 50%);
  opacity: 0;
  will-change: transform, opacity;
}

.bg-meteor-head{
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--accent) 60%, #fff) 60%, transparent 100%);
  box-shadow:
    0 0 12px 4px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 4px 1px #fff;
}

.bg-meteor-1{
  top: 12%;
  left: 64%;
  animation: bg-meteor-fly-1 8s ease-out infinite;
  animation-delay: 1.2s;
}

.bg-meteor-2{
  top: 28%;
  left: 18%;
  width: 100px;
  animation: bg-meteor-fly-2 10.5s ease-out infinite;
  animation-delay: 4.6s;
}

.bg-meteor-3{
  top: 46%;
  left: 84%;
  width: 80px;
  animation: bg-meteor-fly-3 9.2s ease-out infinite;
  animation-delay: 2.8s;
}

/* Each keyframe rotates the comet to its travel angle ONCE and translates it
   along that exact same angle, so the streak always flies along its own axis
   instead of sliding sideways. The travel window is stretched out (roughly
   1s of visible flight) with a gentle fade in/out so the star glides across
   the sky instead of flashing/teleporting into place. */
@keyframes bg-meteor-fly-1{
  0%  { opacity: 0; transform: rotate(-32deg) translate(0, 0); }
  3%  { opacity: 1; transform: rotate(-32deg) translate(-40px, 25px); }
  16% { opacity: 1; transform: rotate(-32deg) translate(-534px, 335px); }
  20% { opacity: 0; transform: rotate(-32deg) translate(-580px, 364px); }
  100%{ opacity: 0; transform: rotate(-32deg) translate(-580px, 364px); }
}

@keyframes bg-meteor-fly-2{
  0%  { opacity: 0; transform: rotate(-38deg) translate(0, 0); }
  3%  { opacity: 1; transform: rotate(-38deg) translate(-34px, 27px); }
  16% { opacity: 1; transform: rotate(-38deg) translate(-510px, 398px); }
  20% { opacity: 0; transform: rotate(-38deg) translate(-555px, 433px); }
  100%{ opacity: 0; transform: rotate(-38deg) translate(-555px, 433px); }
}

@keyframes bg-meteor-fly-3{
  0%  { opacity: 0; transform: rotate(-26deg) translate(0, 0); }
  3%  { opacity: 1; transform: rotate(-26deg) translate(-33px, 16px); }
  16% { opacity: 1; transform: rotate(-26deg) translate(-490px, 238px); }
  20% { opacity: 0; transform: rotate(-26deg) translate(-533px, 259px); }
  100%{ opacity: 0; transform: rotate(-26deg) translate(-533px, 259px); }
}

.bg-firefly{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--accent) 70%, #fff) 60%, transparent 100%);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--accent) 65%, transparent);
  opacity: 0;
  animation: bg-firefly-float ease-in-out infinite;
}

.bg-firefly-1{ left: 11%; bottom: 15%; animation-duration: 6.4s; animation-delay: .3s; }
.bg-firefly-2{ left: 16%; bottom: 21%; animation-duration: 7.6s; animation-delay: 2.1s; }
.bg-firefly-3{ left: 8%;  bottom: 19%; animation-duration: 6.9s; animation-delay: 3.6s; }
.bg-firefly-4{ left: 19%; bottom: 13%; animation-duration: 5.6s; animation-delay: 1.1s; }
.bg-firefly-5{ left: 14%; bottom: 25%; animation-duration: 8.1s; animation-delay: 4.4s; }

@keyframes bg-firefly-float{
  0%  { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .9; }
  50% { opacity: .55; transform: translate(9px, -22px) scale(1); }
  85% { opacity: .85; }
  100%{ opacity: 0; transform: translate(-6px, -42px) scale(.5); }
}

@media (prefers-reduced-motion: reduce){
  .bg-firefly, .bg-ray{ animation: none; opacity: 0; }
}

.bg-ground{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
}

.bg-ground-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bg-hill-back{
  fill: color-mix(in srgb, var(--bg) 55%, #06070a);
}

.bg-hill{
  fill: color-mix(in srgb, var(--bg) 30%, #020203);
}

.bg-tree-glow{
  fill: color-mix(in srgb, #fdfbf3 60%, var(--accent) 30%);
  opacity: .1;
  filter: blur(30px);
  overflow: visible;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bg-tree-glow-pulse 4.5s ease-in-out infinite;
}

@keyframes bg-tree-glow-pulse{
  0%, 100%{ opacity: .07; }
  50%{ opacity: .18; }
}

.bg-trunk{
  fill: #241a12;
}

.bg-trunk-highlight{
  fill: none;
  stroke: color-mix(in srgb, #4a3420 65%, #fff 12%);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .45;
}

.bg-leaves{
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.bg-leaves-back{
  fill: color-mix(in srgb, var(--accent) 10%, #0a170f);
  animation: bg-leaf-sway 5s ease-in-out infinite;
}

.bg-leaves-main{
  fill: color-mix(in srgb, var(--accent) 16%, #0d1c13);
  animation: bg-leaf-sway 6.5s ease-in-out infinite;
  animation-delay: .4s;
}

.bg-leaves-mid{
  fill: color-mix(in srgb, var(--accent) 21%, #12241a);
  animation: bg-leaf-sway 5.5s ease-in-out infinite;
  animation-delay: .8s;
}

.bg-leaves-highlight{
  fill: color-mix(in srgb, #fdfbf3 30%, var(--accent) 45%);
  opacity: .35;
  animation: bg-leaf-sway 4.5s ease-in-out infinite, bg-leaf-shimmer 4.5s ease-in-out infinite;
}

@keyframes bg-leaf-sway{
  0%, 100%{ transform: rotate(-1.6deg); }
  50%{ transform: rotate(1.8deg); }
}

@keyframes bg-leaf-shimmer{
  0%, 100%{ opacity: .24; }
  50%{ opacity: .5; }
}

.bg-tree{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bg-tree-sway 6s ease-in-out infinite;
}

@keyframes bg-tree-sway{
  0%, 100%{ transform: rotate(-1deg); }
  50%{ transform: rotate(1deg); }
}

.bg-blade{
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 11%, #0c1a12);
  stroke-width: 3;
  stroke-linecap: round;
  animation-name: bg-blade-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--dur, 3s);
  animation-delay: var(--d, 0s);
}

.bg-blade:nth-child(3n){
  stroke-width: 2.4;
  stroke: color-mix(in srgb, var(--accent) 19%, #12241a);
}

.bg-blade:nth-child(even){
  animation-direction: alternate-reverse;
}

@keyframes bg-blade-sway{
  0%{ transform: rotate(-5deg); }
  50%{ transform: rotate(6deg); }
  100%{ transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce){
  .bg-stars-1, .bg-stars-2, .bg-moon, .bg-meteor, .bg-meteor-head,
  .bg-tree, .bg-tree-glow, .bg-leaves-back, .bg-leaves-main,
  .bg-leaves-mid, .bg-leaves-highlight, .bg-blade, .bg-sparkle,
  .bg-ray, .bg-firefly{
    animation: none;
  }
  .bg-meteor{ opacity: 0; }
  .bg-sparkle{ opacity: .6; }
  .bg-firefly{ opacity: 0; }
}

@media (max-width: 640px){
  .bg-moon{ width: 56px; height: 56px; top: 6%; right: 8%; }
  .bg-ground{ height: 140px; }
}

header.site-header{
  transition: box-shadow .3s ease, padding .3s ease, background .25s ease;
}

header.site-header.is-scrolled{
  padding: 9px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.hero{
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}

.hero::before{
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 320px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-inner > *{
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn .9s cubic-bezier(.22,1,.36,1) forwards;
}

.hero-inner > *:nth-child(1){ animation-delay: .05s; }
.hero-inner > *:nth-child(2){ animation-delay: .14s; }
.hero-inner > *:nth-child(3){ animation-delay: .23s; }
.hero-inner > *:nth-child(4){ animation-delay: .32s; }
.hero-inner > *:nth-child(5){ animation-delay: .40s; }

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

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding: 5px 0;
  margin-bottom: 18px;
}

.eyebrow::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.eyebrow i{
  display: none;
}

.hero h1{
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 16px;
}

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

.hero-desc{
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 28px;
  max-width: 620px;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}

.btn-lg{
  padding: 13px 24px;
  font-size: 15px;
  border-radius: 12px;
}

.hero-stats{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.hero-stat{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 20px;
  min-width: 160px;
}

.hero-stat i{
  font-size: 20px;
  color: var(--accent);
}

.hero-stat div{
  display: flex;
  flex-direction: column;
  text-align: left;
}

.hero-stat strong{
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
}

.hero-stat span{
  font-size: 12px;
  color: var(--text-muted);
}

.section-head{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
}

.section-head h2,
.section-head h1{
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
}

.section-head p{
  color: var(--text-muted);
  font-size: 15px;
  margin: 0;
}

.services-section{
  padding: 64px 0;
  border-top: 1px solid var(--border);
}

.services-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.service-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}

.service-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow);
}

.service-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.service-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}

.service-card:hover .service-icon{
  background: var(--accent);
  color: #fff;
}

.service-badge{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(88,101,242,0.3);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.service-card h3{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
}

.service-card p.service-desc{
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 18px;
}

.service-checklist{
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.service-checklist li{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
}

.service-checklist i{
  color: var(--accent);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

.service-footer{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.service-footer-label{
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.service-footer .btn{
  padding: 8px 14px;
  font-size: 13px;
}

@media (max-width: 640px){
  .services-grid{
    grid-template-columns: 1fr;
  }
}

.servers-section{
  padding: 64px 0;
  border-top: 1px solid var(--border);
}

.servers-section .section-head{
  margin-bottom: 8px;
}

.servers-section .controls{
  margin-top: 28px;
}

.support-section{
  padding: 72px 0 80px;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.support-section::before{
  content: "";
  position: absolute;
  bottom: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 320px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
  pointer-events: none;
}

.support-inner{
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.support-inner h2{
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
}

.support-inner p{
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 26px;
}

.controls{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.controls .search-wrap{
  position: relative;
  flex: 1 1 240px;
}

.controls .search-icon{
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
  transition: color .2s ease;
}

.controls .search-wrap:focus-within .search-icon{
  color: var(--accent);
}

.controls input[type="text"]{
  padding-left: 38px;
}

.select-wrap{
  position: relative;
  flex: 0 0 auto;
}

.controls select{
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 34px 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease;
}

.controls select:focus{ outline: none; border-color: var(--accent); }

.select-wrap .select-icon{
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 56px 22px;
  margin-top: 24px;
  padding-top: 4px;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}

.card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
}

.card-icon-wrap{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  transform: translateY(-46%);
  z-index: 3;
  pointer-events: none;
}

.card-icon{
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
  border: 4px solid var(--surface);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
  pointer-events: auto;
  cursor: pointer;
}

.card:hover .card-icon{
  transform: scale(1.07);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

.card-icon.placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.card-banner-wrap{
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.card-banner{
  height: 108px;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.card-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.3) 100%);
  z-index: 1;
}

.card-banner img.banner-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.card-banner img.banner-img-soft{
  filter: blur(6px) saturate(1.1) brightness(.85);
  transform: scale(1.25);
}

.card:hover .card-banner img.banner-img{
  transform: scale(1.1);
}

.card:hover .card-banner img.banner-img-soft{
  transform: scale(1.32);
}

.banner-fallback{
  width: 100%;
  height: 100%;
  background: #2b2d31;
}

.card-body{
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  flex-grow: 1;
}

.card-title{
  font-size: 16.5px;
  font-weight: 700;
  margin: 0;
}

.card-stats{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.stat-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
}

.stat-pill i{
  font-size: 11px;
  color: var(--text-muted);
}

.card-desc{
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-actions{
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding: 0 18px 18px;
}

.card-actions .btn-accent i{
  transition: transform .3s ease;
}

.card-actions .btn-accent:hover i{
  transform: translate(2px, -2px);
}

@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.skeleton-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-line, .skeleton-circle{
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}

.skeleton-circle{ width: 48px; height: 48px; border-radius: 50%; }
.skeleton-line{ height: 12px; }

@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

.btn i{
  font-size: 13px;
}

.btn-icon{
  flex: 0 0 auto;
  width: 42px;
  padding: 9px;
}

.btn-icon.copied{
  border-color: #3ba55c;
  color: #3ba55c;
}

.toast-container{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  width: min(90vw, 360px);
}

.toast{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text);
  box-shadow: var(--shadow);
  animation: toastIn .2s ease both;
}

.toast.success{ border-color: var(--accent); }
.toast.error{ border-color: var(--danger); color: var(--danger); }

@keyframes toastIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn:hover{ border-color: #3a3d44; }

.btn-accent{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-accent:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-danger{
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover{ background: rgba(224,100,95,0.1); }

.btn-block{ width: 100%; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

.state-msg{
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.admin-box{
  max-width: 420px;
  margin: 64px auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
}

.admin-box h1{
  font-size: 20px;
  margin: 0 0 8px;
}

.admin-box p{
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.user-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.user-pill img{
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.admin-panel{
  padding: 40px 0 80px;
}

.admin-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.form-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 28px;
}

.form-box h2{
  font-size: 16px;
  margin: 0 0 18px;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid .full{ grid-column: 1 / -1; }

label{
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

input[type="text"], input[type="url"], input[type="number"], textarea{
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

input:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
}

textarea{ resize: vertical; min-height: 70px; }

.form-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.admin-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-row{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.admin-row img, .admin-row .card-icon.placeholder{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  font-size: 15px;
  font-weight: 700;
}

.admin-row .row-actions .btn{
  width: 38px;
  padding: 8px;
}

.admin-row .row-info{
  flex-grow: 1;
  min-width: 0;
}

.admin-row .row-info h3{
  font-size: 14.5px;
  margin: 0 0 2px;
}

.admin-row .row-info p{
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-row .row-actions{
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.hidden{ display: none !important; }

.notice{
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.notice.error{
  border-color: var(--danger);
  color: var(--danger);
}

footer.site-footer{
  border-top: 1px solid var(--border);
  padding: 24px 0;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 560px){
  .form-grid{ grid-template-columns: 1fr; }
}

.server-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  background: rgba(10,10,14,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.server-modal-overlay.open{
  opacity: 1;
  visibility: visible;
}

.server-modal{
  position: relative;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
  transform: translateY(16px) scale(.96);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}

.server-modal-overlay.open .server-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.server-modal-close{
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}

.server-modal-close:hover{
  color: var(--danger);
  border-color: var(--danger);
  transform: rotate(90deg);
}

.server-modal-icon-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.server-modal-icon{
  width: 96px;
  height: 96px;
  border-radius: 28px;
  object-fit: cover;
  background: var(--surface-2);
  border: 4px solid var(--surface);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  transform: scale(0.35);
  opacity: 0;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}

.server-modal-icon.pop{
  transform: scale(1);
  opacity: 1;
}

.server-modal-icon.placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.server-modal-name{
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 4px;
}

.server-modal-members{
  color: var(--text-muted);
  font-size: 13.5px;
  margin: 0 0 20px;
}

.modal-banner-host{
  padding-top: 0;
  overflow: hidden;
}

.modal-banner{
  height: 130px;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  margin: -1px -1px 0;
}

.modal-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, var(--surface) 96%);
  z-index: 1;
}

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

.modal-banner img.banner-img-soft{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(6px) saturate(1.1) brightness(.85);
  transform: scale(1.25);
}

.modal-banner-host .server-modal-close{
  z-index: 3;
}

.modal-banner-host .server-modal-icon-wrap{
  margin-top: -50px;
  position: relative;
  z-index: 2;
}

body.modal-open{
  overflow: hidden;
}

.reveal{
  opacity: 0;
  transform: translateY(24px) scale(.97);
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.reveal.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .server-modal-icon{
    transition: none;
  }
  .hero-inner > *{
    opacity: 1;
    transform: none;
    animation: none;
  }
  .eyebrow{
    animation: none;
  }
  body::before,
  body::after{
    animation: none;
  }
}

.showcase-section{
  padding: 64px 0;
}

.showcase-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.showcase-item{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
  transition: transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .4s ease, border-color .3s ease;
}

.showcase-item.reveal{
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.showcase-item.reveal.in-view{
  transform: translateY(0);
}

.showcase-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,.8,.24,1);
}

.showcase-item:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
}

.showcase-item:hover img{
  transform: scale(1.06);
}

@media (max-width: 760px){
  .showcase-grid{
    grid-template-columns: 1fr;
  }
}