:root {
      --bg: #020814;
      --bg-soft: #071120;
      --panel: rgba(5, 13, 25, 0.78);
      --panel-strong: rgba(7, 18, 34, 0.92);
      --text: #f5f8ff;
      --muted: #aeb8ca;
      --muted-2: #748096;
      --blue: #42b8ff;
      --blue-soft: rgba(66, 184, 255, 0.2);
      --gold: #f2bd50;
      --gold-soft: rgba(242, 189, 80, 0.2);
      --purple: #a465ff;
      --purple-soft: rgba(164, 101, 255, 0.2);
      --line: rgba(255,255,255,0.14);
      --max: 1160px;
      --shadow-blue: 0 0 28px rgba(66, 184, 255, 0.35);
      --shadow-gold: 0 0 28px rgba(242, 189, 80, 0.32);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
      background: url("assets/hero.png") center/cover no-repeat fixed;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -5;
      pointer-events: none;
      background:
        radial-gradient(circle at 15% 12%, rgba(73, 186, 255, 0.32), transparent 13%),
        radial-gradient(circle at 48% 24%, rgba(242, 189, 80, 0.24), transparent 12%),
        radial-gradient(circle at 76% 28%, rgba(164, 101, 255, 0.18), transparent 16%),
        radial-gradient(circle at 50% 72%, rgba(50, 155, 255, 0.18), transparent 21%),
        linear-gradient(180deg, rgba(2, 8, 20, 0.58) 0%, rgba(2, 8, 20, 0.78) 44%, rgba(2, 6, 16, 0.96) 100%);
    }



    .page-glow {
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(66, 184, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 184, 255, 0.06) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
      z-index: 1;
    }

    .particle-field {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      left: calc(100% * var(--x));
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: #42d9ff;
      box-shadow: 0 0 14px rgba(66, 217, 255, 0.95), 0 0 30px rgba(66, 184, 255, 0.42);
      opacity: 0;
      animation: float-up 12s linear infinite;
    }

    .particle:nth-child(odd) {
      width: 3px;
      height: 3px;
      box-shadow: 0 0 11px rgba(66, 217, 255, 0.86), 0 0 24px rgba(66, 184, 255, 0.32);
    }

    .particle:nth-child(3n) {
      width: 6px;
      height: 6px;
      box-shadow: 0 0 20px rgba(66, 217, 255, 1), 0 0 42px rgba(66, 184, 255, 0.52);
    }

    .particle:nth-child(4n) { animation-duration: 18s; }
    .particle:nth-child(5n) { animation-duration: 10s; }
    .particle:nth-child(6n) { animation-duration: 14s; }

    .particle:nth-child(1)  { --x: 0.04; animation-delay: 0s; }
    .particle:nth-child(2)  { --x: 0.09; animation-delay: 2s; }
    .particle:nth-child(3)  { --x: 0.14; animation-delay: 4s; }
    .particle:nth-child(4)  { --x: 0.19; animation-delay: 1s; }
    .particle:nth-child(5)  { --x: 0.24; animation-delay: 3s; }
    .particle:nth-child(6)  { --x: 0.30; animation-delay: 6s; }
    .particle:nth-child(7)  { --x: 0.36; animation-delay: 2.5s; }
    .particle:nth-child(8)  { --x: 0.42; animation-delay: 5s; }
    .particle:nth-child(9)  { --x: 0.48; animation-delay: 1.5s; }
    .particle:nth-child(10) { --x: 0.53; animation-delay: 3.5s; }
    .particle:nth-child(11) { --x: 0.58; animation-delay: 6.5s; }
    .particle:nth-child(12) { --x: 0.63; animation-delay: 4.5s; }
    .particle:nth-child(13) { --x: 0.68; animation-delay: 0.8s; }
    .particle:nth-child(14) { --x: 0.73; animation-delay: 2.8s; }
    .particle:nth-child(15) { --x: 0.78; animation-delay: 5.8s; }
    .particle:nth-child(16) { --x: 0.83; animation-delay: 1.8s; }
    .particle:nth-child(17) { --x: 0.88; animation-delay: 3.8s; }
    .particle:nth-child(18) { --x: 0.93; animation-delay: 6.8s; }
    .particle:nth-child(19) { --x: 0.12; animation-delay: 7.5s; }
    .particle:nth-child(20) { --x: 0.27; animation-delay: 8.4s; }
    .particle:nth-child(21) { --x: 0.45; animation-delay: 7.1s; }
    .particle:nth-child(22) { --x: 0.61; animation-delay: 8.8s; }
    .particle:nth-child(23) { --x: 0.76; animation-delay: 7.9s; }
    .particle:nth-child(24) { --x: 0.90; animation-delay: 9.2s; }


    .nebula {
      position: fixed;
      inset: -20%;
      z-index: -3;
      background:
        conic-gradient(from 110deg at 55% 34%, transparent 0deg, rgba(38, 144, 255, 0.18) 54deg, transparent 108deg, rgba(242, 189, 80, 0.12) 148deg, transparent 220deg, rgba(166, 91, 255, 0.17) 284deg, transparent 360deg);
      filter: blur(24px);
      opacity: 0.9;
      animation: drift 34s linear infinite alternate;
    }



    @keyframes float-up {
      0% { transform: translateY(105vh) translateX(0) scale(0.7); opacity: 0; }
      12% { opacity: 0.85; }
      50% { transform: translateY(48vh) translateX(28px) scale(1); }
      90% { opacity: 0.7; }
      100% { transform: translateY(-10vh) translateX(-20px) scale(0.35); opacity: 0; }
    }

    @keyframes drift {
      from { transform: translate3d(-1%, -1%, 0) rotate(0deg) scale(1); }
      to { transform: translate3d(2%, 1%, 0) rotate(6deg) scale(1.04); }
    }

    .page-shell {
      position: relative;
      min-height: 100vh;
      z-index: 5;
    }

    .container {
      width: min(var(--max), calc(100% - 48px));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(18px);
      background: linear-gradient(180deg, rgba(2,8,20,.94), rgba(2,8,20,.62));
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 86px;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      text-decoration: none;
      color: var(--text);
      min-width: 330px;
      flex-shrink: 0;
    }

    .crest {
      width: 72px;
      height: 78px;
      flex: 0 0 auto;
      object-fit: contain;
      filter: drop-shadow(0 0 18px rgba(242,189,80,.28));
    }

    .brand-title {
      display: block;
      font-family: Cinzel, Georgia, serif;
      font-size: clamp(1.28rem, 1.7vw, 1.72rem);
      letter-spacing: .14em;
      line-height: .95;
      text-transform: uppercase;
      color: #f5f8ff;
      font-weight: 800;
      text-shadow: 0 0 14px rgba(255,255,255,.12);
    }

    .brand-title span { color: inherit; }

    .brand-subtitle {
      display: block;
      margin-top: 4px;
      color: #f5f8ff;
      font-family: Cinzel, Georgia, serif;
      font-size: clamp(1.02rem, 1.35vw, 1.36rem);
      line-height: .95;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-weight: 800;
      text-shadow: 0 0 14px rgba(255,255,255,.12);
    }

    .nav-links {
      display: flex;
      justify-content: center;
      gap: clamp(14px, 2vw, 30px);
      flex: 1;
    }

    .nav-links a {
      position: relative;
      color: rgba(255,255,255,.76);
      text-decoration: none;
      text-transform: uppercase;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      padding: 34px 0;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 18px;
      width: 0;
      height: 2px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, var(--blue), transparent);
      transition: width .25s ease;
      box-shadow: var(--shadow-blue);
    }

    .nav-links a:hover,
    .nav-links a:focus-visible { color: white; }
    .nav-links a:hover::after,
    .nav-links a:focus-visible::after,
    .nav-links a.active::after { width: 38px; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 24px;
      border: 1px solid rgba(66,184,255,.75);
      border-radius: 7px;
      background: linear-gradient(180deg, rgba(66,184,255,.14), rgba(66,184,255,.04));
      color: #eef8ff;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-weight: 900;
      font-size: .85rem;
      box-shadow: inset 0 0 18px rgba(66,184,255,.12), 0 0 20px rgba(66,184,255,.18);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      cursor: pointer;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
      border-color: #8fd7ff;
      box-shadow: inset 0 0 20px rgba(66,184,255,.22), 0 0 30px rgba(66,184,255,.35);
    }

    .btn.gold {
      border-color: rgba(242,189,80,.72);
      background: linear-gradient(180deg, rgba(242,189,80,.14), rgba(242,189,80,.04));
      box-shadow: inset 0 0 18px rgba(242,189,80,.12), 0 0 20px rgba(242,189,80,.18);
    }

    .btn.gold:hover,
    .btn.gold:focus-visible {
      border-color: #ffd989;
      box-shadow: inset 0 0 20px rgba(242,189,80,.22), 0 0 30px rgba(242,189,80,.32);
    }

    .discord-mark {
      width: 21px;
      height: 21px;
      display: inline-block;
    }

    .btn[href*="discord.gg"] {
      border-color: rgba(0,102,0,.78);
      background: linear-gradient(180deg, rgba(0,102,0,.58), rgba(0,51,0,.82));
      box-shadow: inset 0 0 18px rgba(0,102,0,.18), 0 0 20px rgba(0,102,0,.28);
    }

    .btn[href*="discord.gg"]:hover,
    .btn[href*="discord.gg"]:focus-visible {
      border-color: #008a00;
      box-shadow: inset 0 0 20px rgba(0,102,0,.28), 0 0 32px rgba(0,102,0,.48);
    }

    .btn[href*="discord.gg"] .discord-mark {
      color: #9dff9d;
      filter: drop-shadow(0 0 8px rgba(0,255,0,.75)) drop-shadow(0 0 18px rgba(0,102,0,.7));
    }

    .hero {
      position: relative;
      padding: 112px 0 72px;
      min-height: 720px;
      isolation: isolate;
      overflow: hidden;
    }

    /* overlay for readability */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(2,8,20,0.2), rgba(2,8,20,0.85));
      z-index: -1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(300px, 460px) 1fr;
      align-items: center;
      gap: 48px;
    }

    .eyebrow {
      margin: 0 0 12px;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: .94rem;
      font-weight: 900;
      text-shadow: 0 0 20px rgba(242,189,80,.38);
    }

    h1, h2, h3 {
      font-family: Cinzel, serif;
      margin: 0;
      text-transform: uppercase;
    }

    h1 {
      font-size: clamp(4rem, 8vw, 6.9rem);
      line-height: .88;
      letter-spacing: .02em;
      text-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 36px rgba(255,255,255,.22);
    }

    .hero-copy {
      margin: 28px 0 0;
      max-width: 430px;
      color: #d7deec;
      font-size: 1.03rem;
      line-height: 1.68;
      text-shadow: 0 1px 2px rgba(0,0,0,.65);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 26px;
    }

    .cosmos-stage {
      position: relative;
      min-height: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cosmos-art {
      width: min(760px, 100%);
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 0 28px rgba(66,184,255,.22));
      animation: float 5.5s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-14px); }
    }


    .era-panel {
      position: relative;
      overflow: hidden;
      margin-top: 18px;
      margin-bottom: 0;
      padding: 34px 44px;
      background:
        linear-gradient(135deg, rgba(66,184,255,.14), rgba(2,8,20,.84) 42%, rgba(242,189,80,.08)),
        rgba(5,13,25,.84);
      border: 1px solid rgba(66,184,255,.28);
      box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 24px 80px rgba(0,0,0,.38);
      clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
    }

    .era-panel::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 82% 16%, rgba(66,184,255,.18), transparent 28%);
    }

    .era-kicker {
      margin: 0 0 10px;
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: .78rem;
      font-weight: 900;
    }

    .era-panel h2 {
      position: relative;
      z-index: 1;
      color: var(--text);
      font-size: clamp(1.9rem, 4vw, 3.1rem);
      letter-spacing: .1em;
      margin-bottom: 14px;
    }

    .era-panel p {
      position: relative;
      z-index: 1;
      max-width: 760px;
      color: #d5deee;
      line-height: 1.72;
      margin: 0;
    }

    .era-list {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 26px;
    }

    .era-item {
      padding: 18px;
      border: 1px solid rgba(255,255,255,.13);
      background: rgba(255,255,255,.045);
      border-radius: 12px;
    }

    .era-item strong {
      display: block;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .82rem;
      margin-bottom: 8px;
    }

    .era-item span {
      color: var(--muted);
      line-height: 1.55;
      font-size: .92rem;
    }

    .community-wrap {
      position: relative;
      z-index: 8;
      margin-top: 72px;
    }

    .sprite-row {
      position: absolute;
      /* Anchored to the top padding band of the community panel.
         The panel itself has margin-top: -44px and padding-top: 26px,
         so this places the sprites' feet on the highlighted green padding area. */
      top: -70px;
      right: 34px;
      z-index: 30;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      pointer-events: none;
    
      perspective: 700px;
    }

    .sprite-row img {
      width: 52px;
      height: auto;
      image-rendering: auto;
      filter: drop-shadow(0 10px 14px rgba(0,0,0,.6));
      transition: transform .22s ease, filter .22s ease;
      transform-origin: center bottom;
    
      transform: translateY(0) rotateY(0deg) scale(1);
      transform-style: preserve-3d;
      backface-visibility: visible;
      will-change: transform;
    }

    /* Party formation: staggered heights so the group feels more natural. */
    .sprite-row img:nth-child(1) { margin-bottom: 2px; animation: spriteBob 1.35s ease-in-out infinite; }
    .sprite-row img:nth-child(2) { margin-bottom: 10px; animation: spriteBob 1.7s ease-in-out infinite; }
    .sprite-row img:nth-child(3) { margin-bottom: 0; animation: spriteWiggle 1.9s ease-in-out infinite; }
    .sprite-row img:nth-child(4) { margin-bottom: 14px; animation: spriteBob 1.45s ease-in-out infinite; }
    .sprite-row img:nth-child(5) { margin-bottom: 6px; animation: spriteBob 1.55s ease-in-out infinite; }
    .sprite-row img:nth-child(6) { margin-bottom: 12px; animation: spriteWiggle 2s ease-in-out infinite; }
.community-wrap:hover .sprite-row img,
    .community-panel:hover .sprite-row img {
      animation: spritePartyFlip .78s ease-in-out 1 both;
      animation-delay: 0s !important;
      transform-origin: 50% 85%;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(66,184,255,.32));
    }

    

    .community-wrap:hover .sprite-row img:nth-child(1),
    .community-wrap:hover .sprite-row img:nth-child(2),
    .community-wrap:hover .sprite-row img:nth-child(3),
    .community-wrap:hover .sprite-row img:nth-child(4),
    .community-wrap:hover .sprite-row img:nth-child(5),
    .community-wrap:hover .sprite-row img:nth-child(6),
    .community-panel:hover .sprite-row img:nth-child(1),
    .community-panel:hover .sprite-row img:nth-child(2),
    .community-panel:hover .sprite-row img:nth-child(3),
    .community-panel:hover .sprite-row img:nth-child(4),
    .community-panel:hover .sprite-row img:nth-child(5),
    .community-panel:hover .sprite-row img:nth-child(6) {
      animation-name: spritePartyFlip;
      animation-duration: .78s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-delay: 0s !important;
      transform-origin: 50% 85%;
    }

@keyframes spritePartyFlip {
      0% {
        transform: translateY(0) rotateY(0deg) scale(1);
      }
      18% {
        transform: translateY(0) rotateY(0deg) scale(1);
      }
      48% {
        transform: translateY(-24px) rotateY(180deg) scale(1.08);
      }
      78% {
        transform: translateY(-6px) rotateY(360deg) scale(1.03);
      }
      100% {
        transform: translateY(0) rotateY(360deg) scale(1);
      }
    }

    @keyframes spriteJump {
      0%, 100% { transform: translateY(0) rotateY(0deg) scale(1); }
      45% { transform: translateY(-14px) rotateY(0deg) scale(1); }
      60% { transform: translateY(0) rotateY(0deg) scale(1); }
    }

    @keyframes spriteBob {
      0%, 100% { transform: translateY(0) rotateY(0deg) scale(1); }
      50% { transform: translateY(-12px) rotateY(0deg) scale(1); }
    }

    @keyframes spriteWiggle {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      35% { transform: translateY(-8px) rotate(-4deg); }
      65% { transform: translateY(-4px) rotate(4deg); }
    }

    .community-panel,
    .recruit-panel {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(8,18,34,.86), rgba(3,9,19,.92));
      border: 1px solid rgba(255,255,255,.2);
      box-shadow: 0 0 0 1px rgba(66,184,255,.08), 0 24px 80px rgba(0,0,0,.42);
      clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
    }

    .community-panel {
      margin-top: 0;
      padding: 34px 54px 38px;
    }

    .panel-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      color: var(--gold);
      font-family: Cinzel, serif;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 1.18rem;
      font-weight: 800;
    }

    .panel-title::before,
    .panel-title::after {
      content: "";
      width: min(260px, 25vw);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.34));
    }

    .panel-title::after {
      background: linear-gradient(90deg, rgba(255,255,255,.34), transparent);
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 26px;
      padding-top: 25px;
      border-top: 1px solid rgba(255,255,255,.15);
    }

    .status-item {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 18px;
      align-items: center;
      min-height: 86px;
    }

    .status-item + .status-item {
      border-left: 1px solid rgba(255,255,255,.12);
      padding-left: 24px;
    }

    .status-icon {
      width: 56px;
      height: 56px;
      color: var(--blue);
      filter: drop-shadow(0 0 10px rgba(66,184,255,.45));
    }

    .status-icon.gold { color: var(--gold); filter: drop-shadow(0 0 10px rgba(242,189,80,.45)); }

    .status-big {
      font-family: Cinzel, serif;
      font-size: 2.05rem;
      font-weight: 800;
      line-height: 1;
    }

    .status-label,
    .status-kicker {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-weight: 800;
      font-size: .78rem;
      line-height: 1.45;
    }

    .status-heading {
      margin-top: 2px;
      font-family: Cinzel, serif;
      font-size: 1.5rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      line-height: 1.08;
    }

    .section {
      padding: 58px 0;
    }

    .section-head {
      text-align: center;
      margin-bottom: 34px;
    }

    .section-head h2 {
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: .16em;
      text-shadow: 0 0 28px rgba(255,255,255,.16);
    }

    .divider-gem {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      margin-top: 12px;
    }

    .divider-gem::before,
    .divider-gem::after {
      content: "";
      width: 110px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(242,189,80,.7));
    }

    .divider-gem::after { background: linear-gradient(90deg, rgba(242,189,80,.7), transparent); }

    .gem {
      width: 12px;
      height: 12px;
      border: 2px solid var(--gold);
      transform: rotate(45deg);
      box-shadow: 0 0 16px rgba(242,189,80,.8);
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .pillar-card {
      position: relative;
      min-height: 330px;
      padding: 30px 28px 28px;
      text-align: center;
      background:
        linear-gradient(180deg, rgba(8,19,36,.88), rgba(2,8,17,.94)),
        radial-gradient(circle at 50% 0%, var(--blue-soft), transparent 54%);
      border: 1px solid rgba(66,184,255,.55);
      clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
      box-shadow: inset 0 0 26px rgba(66,184,255,.08), 0 0 30px rgba(66,184,255,.08);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .pillar-card:hover {
      transform: translateY(-8px);
      box-shadow: inset 0 0 26px rgba(66,184,255,.14), 0 0 42px rgba(66,184,255,.2);
    }

    .pillar-card.gold {
      border-color: rgba(242,189,80,.58);
      background:
        linear-gradient(180deg, rgba(17,13,7,.84), rgba(4,8,15,.94)),
        radial-gradient(circle at 50% 0%, var(--gold-soft), transparent 54%);
      box-shadow: inset 0 0 26px rgba(242,189,80,.08), 0 0 30px rgba(242,189,80,.08);
    }

    .pillar-card.purple {
      border-color: rgba(164,101,255,.58);
      background:
        linear-gradient(180deg, rgba(13,7,25,.84), rgba(4,8,15,.94)),
        radial-gradient(circle at 50% 0%, var(--purple-soft), transparent 54%);
      box-shadow: inset 0 0 26px rgba(164,101,255,.08), 0 0 30px rgba(164,101,255,.08);
    }

    .pillar-icon {
      width: 88px;
      height: 88px;
      margin: 0 auto 20px;
      color: var(--blue);
      filter: drop-shadow(0 0 18px rgba(66,184,255,.7));
    }

    .pillar-card.gold .pillar-icon { color: var(--gold); filter: drop-shadow(0 0 18px rgba(242,189,80,.72)); }
    .pillar-card.purple .pillar-icon { color: var(--purple); filter: drop-shadow(0 0 18px rgba(164,101,255,.72)); }

    .pillar-card h3 {
      font-size: 1.58rem;
      letter-spacing: .13em;
      margin-bottom: 8px;
    }

    .pillar-sub {
      color: var(--blue);
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: .84rem;
      font-weight: 900;
      margin-bottom: 18px;
    }

    .pillar-card.gold .pillar-sub { color: var(--gold); }
    .pillar-card.purple .pillar-sub { color: #c49cff; }

    .pillar-card p {
      color: #c9d2e3;
      line-height: 1.65;
      margin: 0 auto 24px;
      max-width: 290px;
      font-size: .95rem;
    }

    .mini-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      min-width: 150px;
      min-height: 42px;
      border: 1px solid currentColor;
      border-radius: 6px;
      color: var(--blue);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .78rem;
      font-weight: 900;
      background: rgba(66,184,255,.04);
    }

    .pillar-card.gold .mini-btn { color: var(--gold); background: rgba(242,189,80,.04); }
    .pillar-card.purple .mini-btn { color: #c49cff; background: rgba(164,101,255,.04); }

    .recruit-panel {
      display: grid;
      grid-template-columns: 220px 1fr auto;
      gap: 34px;
      align-items: center;
      padding: 28px 44px;
      margin-bottom: 58px;
    }

    .recruit-crest {
      width: 165px;
      height: auto;
      justify-self: center;
      object-fit: contain;
      filter: drop-shadow(0 0 20px rgba(242,189,80,.25));
    }

    .recruit-panel h2 {
      color: var(--gold);
      font-size: 1.38rem;
      letter-spacing: .1em;
      margin-bottom: 10px;
    }

    .recruit-panel p {
      color: #ccd5e5;
      line-height: 1.65;
      margin: 0;
      max-width: 590px;
    }

    .site-footer {
      border-top: 1px solid rgba(255,255,255,.09);
      background: rgba(1,5,13,.72);
      backdrop-filter: blur(16px);
      padding: 24px 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
    }

    .footer-links {
      display: flex;
      gap: 24px;
      justify-content: center;
    }

    .footer-links a,
    .socials a {
      color: rgba(255,255,255,.68);
      text-decoration: none;
      text-transform: uppercase;
      font-size: .76rem;
      letter-spacing: .08em;
      font-weight: 800;
    }

    .footer-links a:hover,
    .socials a:hover { color: white; }

    .socials {
      justify-self: end;
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .copyright {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--muted-2);
      font-size: .82rem;
      margin-top: -8px;
    }

    svg { display: block; }

    .mobile-menu-label { display: none; }

    /* Tablet and phone optimization */
    @media (max-width: 1100px) {
      .nav-wrap { gap: 16px; }
      .brand { min-width: 285px; }
      .brand-title { font-size: 1.22rem; letter-spacing: .12em; }
      .brand-subtitle { font-size: .98rem; letter-spacing: .12em; }
      .nav-links { gap: 16px; }
      .nav-links a { font-size: .72rem; }
      .hero-grid { grid-template-columns: minmax(280px, 420px) 1fr; gap: 28px; }
      .recruit-panel { grid-template-columns: 180px 1fr auto; gap: 24px; }
    }

    @media (max-width: 920px) {
      body {
        background-attachment: scroll;
        background-position: center top;
      }

      body::before {
        background:
          radial-gradient(circle at 20% 10%, rgba(73, 186, 255, 0.28), transparent 22%),
          radial-gradient(circle at 80% 20%, rgba(242, 189, 80, 0.20), transparent 24%),
          linear-gradient(180deg, rgba(2, 8, 20, 0.68) 0%, rgba(2, 8, 20, 0.86) 48%, rgba(2, 6, 16, 0.98) 100%);
      }

      .container { width: min(100% - 36px, var(--max)); }
      .hero {
        padding: 44px 0 44px;
        min-height: auto;
        text-align: center;
      }
      .hero-grid { grid-template-columns: 1fr; gap: 24px; }
      .cosmos-stage { min-height: 280px; order: -1; }
      .cosmos-art { width: min(520px, 100%); max-height: 360px; object-fit: contain; }
      .eyebrow { font-size: .82rem; }
      h1 { font-size: clamp(3.2rem, 13vw, 5.4rem); line-height: .9; }
      .hero-copy { max-width: 620px; margin: 20px auto 0; font-size: 1rem; }
      .hero-actions { justify-content: center; gap: 12px; }

      .era-panel { padding: 26px 22px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
      .era-list { grid-template-columns: 1fr; gap: 12px; }
      .community-wrap { margin-top: 34px; }
      .community-panel {
        margin-top: 20px;
        padding: 24px;
        clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
      }
      .sprite-row { position: relative; top: auto; right: auto; justify-content: center; margin: 0 auto -2px; gap: 7px; }
      .sprite-row img { width: 42px; }
      .panel-title { font-size: 1rem; gap: 12px; }
      .panel-title::before, .panel-title::after { width: min(100px, 20vw); }
      .status-grid { grid-template-columns: 1fr; gap: 0; }
      .status-item { grid-template-columns: 56px 1fr; min-height: 78px; text-align: left; }
      .status-item + .status-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: 18px; margin-top: 18px; }
      .status-icon { width: 48px; height: 48px; }
      .status-big { font-size: 1.8rem; }
      .status-heading { font-size: 1.25rem; }

      .section { padding: 46px 0; }
      .section-head h2 { font-size: clamp(1.65rem, 7vw, 2.4rem); letter-spacing: .1em; }
      .pillars-grid { grid-template-columns: 1fr; gap: 18px; }
      .pillar-card { min-height: auto; padding: 26px 22px; }
      .pillar-icon { width: 72px; height: 72px; }
      .recruit-panel {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 22px;
        gap: 18px;
        clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
      }
      .recruit-crest { width: 120px; }
      .recruit-panel p { margin-inline: auto; }
      .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 18px; }
      .site-footer .brand { justify-content: center; }
      .footer-links { flex-wrap: wrap; gap: 14px 20px; }
      .socials { justify-self: center; }
      .copyright { margin-top: 0; }
    }

    @media (max-width: 560px) {
      .container { width: min(100% - 28px, var(--max)); }
      .hero { padding: 32px 0 38px; }
      .cosmos-stage { min-height: 220px; }
      .cosmos-art { max-height: 260px; }
      h1 { font-size: clamp(3rem, 17vw, 4.2rem); }
      .hero-copy { font-size: .96rem; line-height: 1.6; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .btn, .mini-btn { width: 100%; }
      .panel-title { font-size: .86rem; letter-spacing: .08em; }
      .panel-title::before, .panel-title::after { width: 42px; }
      .sprite-row { gap: 4px; }
      .sprite-row img { width: 32px; }
      .era-panel { padding: 22px 16px; }
      .era-panel h2 { letter-spacing: .06em; }
      .community-wrap { margin-top: 26px; }
      .community-panel { padding: 20px 16px; }
      .status-item { grid-template-columns: 46px 1fr; gap: 12px; }
      .status-icon { width: 40px; height: 40px; }
      .status-big { font-size: 1.55rem; }
      .status-heading { font-size: 1.08rem; }
      .section { padding: 38px 0; }
      .divider-gem::before, .divider-gem::after { width: 72px; }
      .pillar-card h3 { font-size: 1.34rem; }
      .pillar-card p { font-size: .92rem; }
      .recruit-panel .btn span { line-height: 1.25; }
      .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    }



    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }
  
    /* next-level polish: lightweight CSS-only motion, no Azure build/runtime cost */
    @keyframes backgroundZoom {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }

    @keyframes pulseGlow {
      0%, 100% { filter: drop-shadow(0 0 22px rgba(242,189,80,.48)); }
      50% { filter: drop-shadow(0 0 46px rgba(242,189,80,.82)); }
    }



    @keyframes shimmerLine {
      0% { transform: translateX(-120%); opacity: 0; }
      25% { opacity: .8; }
      100% { transform: translateX(120%); opacity: 0; }
    }

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


    .hero::before {
      animation: backgroundZoom 22s ease-in-out infinite;
      transform-origin: center;
    }

    .hero > .container {
      animation: fadeUp .9s ease both;
    }



    .community-panel::before,
    .recruit-panel::before,
    .pillar-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 0%, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%, transparent 100%);
      transform: translateX(-120%);
      animation: shimmerLine 7s ease-in-out infinite;
    }

    .pillar-card:nth-child(2)::before { animation-delay: .8s; }
    .pillar-card:nth-child(3)::before { animation-delay: 1.6s; }

    .section,
    .community-panel,
    .recruit-panel {
      animation: fadeUp .9s ease both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }

    .pillar-card {
      animation: fadeUp .75s ease both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    .pillar-card:nth-child(2) { animation-delay: .12s; }
    .pillar-card:nth-child(3) { animation-delay: .24s; }

    .btn, .mini-btn {
      position: relative;
      overflow: hidden;
    }

    .btn::before,
    .mini-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent, rgba(255,255,255,.22), transparent);
      transform: translateX(-120%);
      transition: transform .55s ease;
    }

    .btn:hover::before,
    .mini-btn:hover::before {
      transform: translateX(120%);
    }


    @supports not (animation-timeline: view()) {
      .section,
      .community-panel,
      .recruit-panel,
      .pillar-card {
        animation: none;
      }
    }

/* Responsive hardening */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

.container,
.page-shell,
.nav-wrap,
.hero-grid,
.hero-grid > *,
.era-panel,
.community-wrap,
.community-panel,
.status-grid,
.status-item,
.pillars-grid,
.pillar-card,
.recruit-panel,
.footer-grid,
.footer-grid > *,
.brand,
.brand > span {
  min-width: 0;
}

.hero-crest,
.cosmos-art {
  display: block;
  width: min(100%, 760px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Canonical responsive navigation */
.mobile-nav-toggle {
  position: relative;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,102,0,.78);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0,102,0,.22), rgba(0,51,0,.32));
  box-shadow: inset 0 0 16px rgba(0,102,0,.18), 0 0 20px rgba(0,102,0,.2);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible {
  transform: translateY(-1px);
  border-color: #008a00;
  box-shadow: inset 0 0 18px rgba(0,102,0,.26), 0 0 28px rgba(0,102,0,.42);
  outline: none;
}

.mobile-nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px rgba(0,255,120,.35);
  transition: transform .2s ease, opacity .2s ease;
}

.site-header.mobile-menu-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.mobile-menu-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.mobile-menu-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 920px) {
  .site-header .nav-wrap {
    min-height: auto;
    padding: 12px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .site-header .brand {
    justify-content: flex-start;
    gap: 10px;
  }

  .site-header .brand-title,
  .site-header .brand-subtitle,
  h1,
  h2,
  h3,
  p {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .site-header .brand-title { font-size: 1.05rem; letter-spacing: .1em; }
  .site-header .brand-subtitle { font-size: .86rem; letter-spacing: .1em; }
  .site-header .crest { width: 54px; height: 60px; }

  .site-header .mobile-nav-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .site-header .nav-links,
  .site-header .site-header-cta,
  .site-header .header-cta {
    grid-column: 1 / -1;
  }

  .site-header .nav-links[hidden],
  .site-header .site-header-cta[hidden],
  .site-header .header-cta[hidden] {
    display: none !important;
  }

  .site-header.mobile-menu-open .nav-links {
    display: flex;
    visibility: visible;
    opacity: 1;
    max-height: 70vh;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding: 10px 0 4px;
    overflow: visible;
  }

  .site-header.mobile-menu-open .nav-links a {
    flex: 1 1 130px;
    max-width: 220px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    text-align: center;
    white-space: nowrap;
  }

  .site-header.mobile-menu-open .nav-links a::after {
    display: none;
  }

  .site-header.mobile-menu-open .site-header-cta,
  .site-header.mobile-menu-open .header-cta {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
    width: 100%;
    justify-self: stretch;
  }

  .site-header .btn {
    min-height: 42px;
    padding: 0 14px;
    font-size: .72rem;
    white-space: nowrap;
  }

  .cosmos-stage {
    width: 100%;
    overflow: hidden;
  }

  .hero-crest,
  .cosmos-art {
    width: min(100%, 520px);
  }
}

@media (max-width: 560px) {
  .container {
    width: calc(100% - 24px);
  }

  .site-header {
    overflow-x: clip;
  }

  .site-header .brand {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
  }

  .site-header .brand-title {
    font-size: clamp(.78rem, 4.2vw, .92rem);
    letter-spacing: .055em;
  }

  .site-header .brand-subtitle {
    display: block;
    font-size: clamp(.66rem, 3.4vw, .76rem);
    letter-spacing: .055em;
  }

  .site-header .crest { width: 46px; height: 52px; }
  .site-header .btn { width: 100%; min-height: 44px; justify-self: stretch; }

  .site-header.mobile-menu-open .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .site-header.mobile-menu-open .nav-links a {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding-inline: 8px;
    white-space: normal;
  }

  .hero-crest,
  .cosmos-art {
    width: min(100%, 300px);
    max-height: 245px;
  }

  .era-panel,
  .community-panel,
  .recruit-panel,
  .pillar-card {
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  }

  .sprite-row {
    max-width: 100%;
    flex-wrap: wrap;
  }
}