/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:.2s;box-shadow:var(--shadow-soft)}
.btn--primary{color:#151200;background:linear-gradient(180deg,#ffe05a,#ffd400);border-color:rgba(0,0,0,.08)}
.btn--primary:hover{filter:brightness(.96) drop-shadow(0 6px 18px rgba(255,212,0,.3))}
.btn--raised{box-shadow:0 10px 24px rgba(255,212,0,.25), inset 0 1px 0 rgba(255,255,255,.45)}
.btn--outline{color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.btn--outline:hover{background:rgba(255,255,255,.10)}
.btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--mini{padding:8px 10px;border-radius:10px;font-size:13px}

/* Card */
.card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden}
.card__body{padding:18px}
.card h3{margin:0 0 8px}

/* Hero */
.hero{
  position:relative; min-height:68vh; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(7,11,30,.5), rgba(7,11,30,.9)), url("../assets/hero.svg") center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero__overlay{position:absolute; inset:0; background:
  radial-gradient(800px 400px at 20% 10%, rgba(61,214,255,.12), transparent),
  radial-gradient(700px 400px at 80% 90%, rgba(255,212,0,.10), transparent)}
.hero__content{position:relative; text-align:center; padding:56px 0}
.hero__title{font-size:clamp(32px,6vw,56px); margin:0 0 12px; font-weight:800}
.hero__title span{color:var(--primary); text-shadow:0 4px 20px rgba(255,212,0,.25)}
.hero__subtitle{color:var(--text-muted); max-width:760px; margin-inline:auto}
.hero__actions{margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Status (no RGB) */
.status-card{position:relative; margin:28px auto 0; display:flex; align-items:center; gap:14px; width:fit-content; padding:12px 16px; background:rgba(15,26,72,.6); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow)}
.status-dot{width:12px;height:12px;border-radius:999px;background:var(--text-muted);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.status-text{display:grid; line-height:1.2}
.status-text strong{font-size:14px}
.status-text span{color:var(--text-muted); font-size:13px}
.status-ip{background:rgba(0,0,0,.25); padding:6px 8px; border-radius:8px; color:#d7e4ff}
.copy-toast{position:absolute; transform:translateY(-220%); background:#141a36; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:6px 10px; font-size:12px; opacity:0; pointer-events:none; transition:.2s}

/* Alert */
.alert{display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:14px 16px; border-radius:16px; box-shadow:var(--shadow-soft)}
.alert--soft{background:rgba(255,255,255,.04)}
.alert__icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(180deg,#ffe05a,#ffd400);color:#201a00;font-weight:800}
.alert h4{margin:0 0 4px}

/* About */
.about{display:grid; gap:22px; grid-template-columns: 1.3fr 1fr}
.about__stats{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.stat{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; text-align:center}
.stat__num{font-size:28px; font-weight:800}
.stat__label{color:var(--text-muted)}
@media (max-width:900px){ .about{grid-template-columns:1fr} }

/* Gallery */
.gallery{display:grid; gap:12px; grid-template-columns:repeat(4,1fr)}
.gallery__item{aspect-ratio:16/10; background:var(--panel-soft); border:1px solid rgba(255,255,255,.08); border-radius:14px; background-image:var(--img); background-size:cover; background-position:center}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }

/* Product grid (store/vote) */
.product-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.product__image{height:180px; background-image:var(--img); background-size:cover; background-position:center}
.badge{display:inline-block; padding:6px 10px; border-radius:10px; font-size:12px; font-weight:600; background:rgba(61,214,255,.18); border:1px solid rgba(61,214,255,.35); color:#bfeeff; margin-bottom:10px}
.badge--accent{background:rgba(61,214,255,.22); border-color:rgba(61,214,255,.5)}
.badge--gold{background:rgba(255,212,0,.18); border-color:rgba(255,212,0,.45); color:#fff1b0}
.product .price{font-weight:800}

/* CTA */
.cta{padding:48px 0; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border-top:1px solid rgba(255,255,255,.06)}
.cta__content{display:flex; gap:14px; align-items:center; justify-content:center; text-align:center; flex-direction:column}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); background:rgba(7,11,30,.7)}
.footer__grid{display:grid; gap:24px; grid-template-columns:1.2fr .8fr .9fr; align-items:start; padding:32px 0}
.brand--footer{font-weight:800}
.footer__title{margin:0 0 8px}
.footer__links{display:flex; flex-direction:column; gap:8px}
.footer__gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.footer__gallery img{width:100%; height:64px; object-fit:cover; border-radius:10px}
.footer__copy{grid-column:1/-1; color:var(--text-muted); font-size:14px; border-top:1px solid rgba(255,255,255,.06); padding-top:12px}
@media (max-width:960px){ .footer__grid{grid-template-columns:1fr} }