:root{
  --bg:#0a0314;
  --bg2:#14092a;
  --ink:#f4ecff;
  --muted:#bfaee9;
  --accent:#b54bff;
  --accent-2:#6ee7ff;
  --card:#1a0f30;
  --ring:#7b3fff;
  --radius:18px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
html{font-size:16px}
@media (min-width:420px){html{font-size:17px}} @media (min-width:768px){html{font-size:18px}}

.neon-bg{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(181,75,255,.25), transparent 70%),
    radial-gradient(900px 600px at 80% 110%, rgba(110,231,255,.18), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
.neon-bg::before{
  content:""; position:absolute; inset:-20% -10%; opacity:.25;
  background:
    repeating-linear-gradient( 30deg, transparent 0 38px, rgba(181,75,255,.35) 38px 40px),
    repeating-linear-gradient(-30deg, transparent 0 38px, rgba(110,231,255,.25) 38px 40px);
  filter: blur(10px);
}

.wrap{max-width:980px; margin:0 auto; padding:clamp(14px,4vw,28px)}

.header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 18px}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:#160a2b;display:grid;place-items:center;box-shadow:var(--shadow)}
.brand .logo span{font-weight:800;font-size:1.1rem;color:var(--accent)}
.brand h1{font-size:1.05rem;margin:0;letter-spacing:.3px}
.header .actions{display:flex;gap:8px;align-items:center}

.btn{appearance:none;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));color:var(--ink);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.btn.primary{background:linear-gradient(180deg, var(--accent), #6f1bcb);border-color:transparent}
.btn.ghost{background:transparent}
.btn:active{transform:translateY(1px)}

.viewer{width:100%;aspect-ratio: 21 / 8;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#0c0620;border:1px solid rgba(255,255,255,.08);margin:6px 0 12px}
.viewer model-viewer{width:100%;height:100%;background:transparent}

.arbar{position:sticky;bottom:10px;display:flex;gap:10px;z-index:20;justify-content:space-between;align-items:center;background:rgba(10,3,20,.6);backdrop-filter: blur(8px);border:1px solid rgba(255,255,255,.14);padding:8px;border-radius:14px;box-shadow:var(--shadow)}
.arbar .btn{flex:1}

.carousel{position:relative;margin-top:10px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.track{display:flex;will-change:transform;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.slide{min-width:100%;position:relative;overflow:hidden;transform-origin:center}
.slide img{display:block;width:100%;height:auto}
/* swipe card animation cue */
.swipe-next{animation:swipeNext .45s cubic-bezier(.22,.61,.36,1)} 
.swipe-prev{animation:swipePrev .45s cubic-bezier(.22,.61,.36,1)}
@keyframes swipeNext{from{transform:translateX(8%) rotate(.6deg) scale(.98)} to{transform:translateX(0) rotate(0) scale(1)}}
@keyframes swipePrev{from{transform:translateX(-8%) rotate(-.6deg) scale(.98)} to{transform:translateX(0) rotate(0) scale(1)}}

.nav{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.nav button{pointer-events:auto;border:none;background:rgba(10,3,20,.55);color:white;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 8px;font-size:20px;cursor:pointer;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.16)}

.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.5)}
.dot.active{background:var(--accent)}

.section-title{margin:16px 0 8px;font-size:1rem;opacity:.9;letter-spacing:.4px}
.accordion{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.item{background:var(--card)}
.item + .item{border-top:1px solid rgba(255,255,255,.06)}
.item header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;cursor:pointer}
.item header h3{margin:0;font-size:1rem}
.item header small{opacity:.7}
.item .body{padding:0 16px 14px;color:var(--muted);display:none}
.item.open .body{display:block;animation:fadeIn .22s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}

footer{opacity:.7;margin:22px 0 60px;font-size:.9rem}

.qr-modal{position:fixed;inset:0;display:none;place-items:center;z-index:50;background:rgba(0,0,0,.6)}
.qr-modal.open{display:grid}
.qr-card{background:var(--card);padding:16px;border-radius:16px;box-shadow:var(--shadow);width:min(92vw,420px);border:1px solid rgba(255,255,255,.12)}
.qr-card h3{margin:0 0 8px}
.qr-card .preview{width:100%;height:auto;border-radius:12px;background:white;padding:10px;display:block}
.qr-actions{display:flex;gap:8px;margin-top:12px}
.qr-actions .btn{flex:1}