:root{--bg:#0b1220;--fg:#e6ecff;--muted:#93a4c8;--card:#121a2b;--accent:#8be9fd;--accent2:#ff79c6;--ok:#2ecc71;--warn:#f7c948}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center}
.brand .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-block}
.brand h1{font-size:20px;margin:0}
.navlinks{display:flex;gap:14px;flex-wrap:wrap}
.btn{background:var(--accent);color:#00111a;border:none;padding:10px 14px;border-radius:12px;font-weight:600;display:inline-block;cursor:pointer}
.btn.secondary{background:#1d2942;color:var(--fg);border:1px solid #2a3a63}
.btn.danger{background:#b00020;color:#fff}
.btn.disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.hero{position:relative;overflow:hidden;border-radius:16px;border:1px solid #1b2744;margin:8px 0 16px;min-height:260px;background-size:cover;background-position:center}
.hero .inner{position:relative;padding:56px 24px;background:radial-gradient(1200px 600px at 80% -20%, rgba(139,233,253,0.12), transparent 60%), radial-gradient(800px 400px at -10% 10%, rgba(255,121,198,0.10), transparent 60%)}
.hero h2{font-size:40px;margin:0 0 10px}
.subtitle{color:var(--muted);font-size:16px;max-width:720px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.hero h2{font-size:32px}}
.card{background:var(--card);border:1px solid #1b2744;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:160px}
.card h3{margin:0 0 6px}.card p{margin:0;color:var(--muted)}
.footer{margin:36px 0;color:var(--muted);text-align:center}
.kicker{font-size:12px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#1d2942;color:var(--muted);display:inline-block}
.img{width:100%;border-radius:12px;border:1px solid #1b2744}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,textarea{background:#0f1627;border:1px solid #2a3a63;color:var(--fg);border-radius:10px;padding:10px;width:100%}
label{font-size:14px;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #1b2744;padding:8px}
.table th{background:#0f1627;text-align:left}
.right{text-align:right}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;border:1px solid #1b2744}
.notice{background:#12263a;border:1px dashed #2a3a63;padding:12px;border-radius:12px;color:var(--muted)}

/* LOGO SIZE */
.logo-img {
  width: 40px;     /* shrink logo */
  height: 40px;    /* keep square */
  object-fit: contain; /* fit inside without stretching */
  margin-right: 10px;
  border-radius: 8px;   /* optional, soft corners */
}


/* Pricing layout */
.pricing h2 { margin-bottom: 6px; text-align:center; }
.pricing .subtitle { text-align:center; opacity:.85; margin-bottom: 16px; }

.grid.two { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid.two { grid-template-columns: 1fr; } }

.panel { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 16px; }
.panel h3 { margin: 0 0 8px; }
.panel .muted { font-size: .95rem; opacity: .85; }

/* Price list */
.price-list { list-style: none; padding: 0; margin: 12px 0; }
.price-list li { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.price-list li:last-child { border-bottom: none; }
.price-list span { opacity: .95; }
.price-list strong { font-weight: 700; }

/* Bullets / small notes */
.bullets { margin: 10px 0; padding-left: 18px; }
.bullets li { margin: 6px 0; opacity: .9; }
.bullets.compact li { margin: 4px 0; }

details.small summary { cursor: pointer; margin: 6px 0; }
details.small { margin-top: 8px; }

.addons { margin: 12px 0 6px; font-size: 1.05rem; }
.price-list.skinny li { padding:8px 10px; }


/* Product grid (if not already set) */
#products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Image box */
.card.product .media {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #0f1520; /* fallback bg while loading */
}

/* Lock the image to a fixed height and crop excess */
.card.product .media img {
  display: block;
  width: 100%;
  height: 240px;          /* tweak 200–300px to taste */
  object-fit: cover;      /* crop to fit the box */
}

/* --- Discord Hero CTA (added) --- */
.hero-3d-shop { position: relative; }

.discord-cta {
  position: absolute;
  right: 24px;
  bottom: 22px;
  display: inline-flex;   /* JS toggles from none → inline-flex */
  align-items: center;
  gap: .5rem;
  z-index: 2;
  text-decoration: none;
}

@media (max-width: 600px) {
  .discord-cta {
    right: 16px;
    bottom: 16px;
  }
}

.discord-cta:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


.btn--discord {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.icon-discord {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor; /* inherits button text color */
  display: inline-block;
  vertical-align: middle;
}

/* Optional: Discord brand color on the primary button */
.btn--discord.btn,
a.btn.btn--discord {
  /* comment out if you already have a theme color you prefer */
  background: #5865F2;
  border-color: #5865F2;
}

.btn--discord.btn:hover,
a.btn.btn--discord:hover {
  filter: brightness(1.08);
}


/* Position the CTA block in the banner’s bottom-right corner */
.hero-cta{
  position: absolute;      /* hero/header should already be position:relative */
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;  /* stacks text above the button */
  align-items: flex-end;   /* right-align the text and button */
  gap: 8px;
  z-index: 2;
}

.hero-cta-help{
  margin: 0;
  font-size: 0.95rem;
  color: #cbd5e1;          /* subtle light grey */
  text-shadow: 0 1px 2px rgba(0,0,0,.5);  /* readable on photos */
}

/* Optional: responsive tweak */
@media (max-width: 720px){
  .hero-cta{ right:12px; bottom:12px; align-items: stretch; }
  .discord-cta{ justify-content:center; }
}