:root{
  --nav-0:#070a14;
  --nav-1:#0b1022;
  --nav-2:#141d38;
  --steel:#c9d6ef;
  --steel-dim:#8ea0c4;
  --diamond:#5ce6e0;
  --gold:#ffcf4d;
  --emerald:#54e07a;
  --edge:#05070f;
  --cube:64px; /* default ambient cube size */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
img{image-rendering:pixelated;image-rendering:crisp-edges}

body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a2647 0%, var(--nav-1) 45%, var(--nav-0) 100%);
  color:var(--steel);
  overflow:hidden;
  position:relative;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}

/* ===== Background texture wall ===== */
.bg-wall{
  position:fixed;inset:-10%;
  background:url("assets/textures/deepslate.png");
  background-size:96px 96px;
  image-rendering:pixelated;
  opacity:.10;
  animation:wallDrift 90s linear infinite;
  z-index:0;
}
@keyframes wallDrift{
  from{transform:translate(0,0)}
  to{transform:translate(96px,96px)}
}
.bg-vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(80% 65% at 50% 42%, transparent 40%, rgba(4,6,14,.55) 78%, rgba(4,6,14,.92) 100%),
    linear-gradient(180deg, rgba(10,16,34,.35) 0%, transparent 25%, transparent 70%, rgba(5,7,15,.8) 100%);
}

/* ===== Ground line ===== */
.ground{
  position:fixed;left:0;right:0;bottom:-8px;height:210px;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
  filter:drop-shadow(0 -6px 16px rgba(0,0,0,.5));
  opacity:.92;
}
.gcol{display:flex;flex-direction:column;justify-content:flex-end;flex:0 0 auto}
.ground .gblock{
  width:72px;height:72px;
  background-size:100% 100%;
  image-rendering:pixelated;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.15), inset 0 -6px 10px rgba(0,0,0,.45);
  flex:0 0 auto;
}

/* ===== Center stage ===== */
.stage{
  position:relative;z-index:5;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:40px 22px 96px;
  gap:24px;
}

.logo-wrap{position:relative;width:min(760px,92vw)}
.logo{
  position:relative;z-index:2;width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 0 rgba(5,7,15,.55)) drop-shadow(0 18px 34px rgba(0,0,0,.6));
  animation:logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.logo-glow{
  position:absolute;z-index:1;inset:6% 8% auto 8%;height:60%;top:14%;
  background:radial-gradient(60% 100% at 50% 50%, rgba(92,230,224,.35), transparent 70%);
  filter:blur(26px);
  animation:glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:.9}}

.tagline{
  max-width:540px;font-size:clamp(15px,2.1vw,19px);line-height:1.55;
  color:var(--steel-dim);font-weight:600;letter-spacing:.3px;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}

/* social chips */
.socials{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;color:#dbe6ff;font-weight:800;font-size:13px;letter-spacing:.05em;
  padding:9px 15px 9px 12px;
  background:rgba(20,29,56,.72);
  border:2px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 4px 0 rgba(5,7,15,.5);
  transition:transform .1s ease,border-color .1s ease,background .1s ease;
}
.chip::before{
  content:"";width:20px;height:20px;flex:0 0 auto;
  background-size:100% 100%;image-rendering:pixelated;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 5px rgba(0,0,0,.4);
}
.chip[data-tex="diamond"]::before{background-image:url("assets/textures/diamond.png")}
.chip[data-tex="gold"]::before{background-image:url("assets/textures/gold.png")}
.chip[data-tex="emerald"]::before{background-image:url("assets/textures/emerald.png")}
.chip:hover{transform:translateY(-2px);border-color:rgba(92,230,224,.5);background:rgba(28,40,74,.85)}

.foot{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  text-align:center;padding:14px 12px;font-size:13px;font-weight:600;letter-spacing:.4px;
  color:#b7c6e6;text-shadow:0 1px 3px rgba(0,0,0,.8);
  background:linear-gradient(0deg,rgba(4,6,14,.92) 30%,transparent);
}
.heart{
  width:16px;height:16px;
  position:relative;top:3px;
  image-rendering:pixelated;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

@media (max-width:560px){
  .stage{gap:18px;padding-top:24px}
}
@media (prefers-reduced-motion:reduce){
  .bg-wall,.logo,.logo-glow{animation:none!important}
}