:root{
  --bg:#050910; --ink:#e7faff; --aqua:#00f0ff; --muted:#9fbed0;
  --card-w: clamp(36vw, 38vw, 180px);
  --gap: clamp(32vw, 34vw, 170px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{text-decoration:none;color:inherit}

.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(180deg,rgba(5,9,16,.95),rgba(5,9,16,.5))}
.brand{display:flex;align-items:center;gap:8px}
.nav a{margin-left:14px;opacity:.9}.nav a:hover{opacity:1}

.hero{padding:14px 10px 34px;text-align:center;overflow:hidden}
.bot3d-wrap{position:relative;width:min(64vw,340px);margin:4px auto 0;filter:drop-shadow(0 8px 28px rgba(0,240,255,.15))}
.bot3d{width:100%;height:auto;display:block;border-radius:14px}
.grade-badge{position:absolute;top:6%;left:50%;transform:translateX(-50%);border:2px solid rgba(0,240,255,.8);background:rgba(0,240,255,.12);padding:4px 12px;border-radius:999px;font-weight:900;color:#bff7ff;backdrop-filter:blur(2px)}
.scan{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:60%;height:32%;pointer-events:none;mix-blend-mode:screen;opacity:.7}
.scan .sweep{animation:sweep 2s linear infinite}
@keyframes sweep{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

.carousel{position:relative;height:calc(var(--card-w) * 1.45);max-width:1000px;margin:2px auto 0;contain:paint}
.slot{position:absolute;top:50%;left:50%;width:var(--card-w);transform:translate(-50%,-50%);transition:transform 560ms cubic-bezier(.2,.8,.2,1),opacity 300ms}
.slot img{width:100%;height:auto;border-radius:12px;box-shadow:0 12px 42px rgba(0,0,0,.55);display:block}

.slot.center{transform:translate(-50%,-50%)}
.slot.left{transform:translate(calc(-50% - var(--gap)), -50%) rotate(-5deg);opacity:.95}
.slot.right{transform:translate(calc(-50% + var(--gap)), -50%) rotate(5deg);opacity:.95}
.slot.farleft{transform:translate(calc(-50% - var(--gap)*2), -50%) rotate(-10deg);opacity:.55}
.slot.farright{transform:translate(calc(-50% + var(--gap)*2), -50%) rotate(10deg);opacity:.55}
.nojs .slot:nth-child(1){transform:translate(calc(-50% - var(--gap)*2),-50%) rotate(-10deg);opacity:.55}
.nojs .slot:nth-child(2){transform:translate(calc(-50% - var(--gap)),-50%) rotate(-5deg);opacity:.95}
.nojs .slot:nth-child(3){transform:translate(-50%,-50%)}
.nojs .slot:nth-child(4){transform:translate(calc(-50% + var(--gap)),-50%) rotate(5deg);opacity:.95}
.nojs .slot:nth-child(5){transform:translate(calc(-50% + var(--gap)*2),-50%) rotate(10deg);opacity:.55}
.nojs .slot:nth-child(n+6){opacity:0}

h1{font-size:clamp(26px,7.2vw,50px);margin:4px 0 6px;text-shadow:0 0 14px rgba(0,240,255,.2)}
.sub{opacity:.92;margin:0 auto 14px;max-width:840px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 16px;border-radius:12px;font-weight:800}
.btn.small{padding:8px 12px;font-size:.95rem}
.btn.primary{background:var(--aqua);color:#03171b}
.btn.outline{border:1px solid var(--aqua);color:var(--aqua)}
.btn.tiny{margin-top:8px;border:1px dashed rgba(0,240,255,.5);color:var(--muted);font-size:.9rem;padding:8px 12px}

.pricing{max-width:1000px;margin:34px auto 38px;padding:0 14px}
.pricing h2{text-align:center;margin-bottom:12px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.plan{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:12px;padding:14px}
.plan .plan-title{font-weight:800;margin-bottom:4px}
.plan .detail{opacity:.9;margin:0 0 8px}
.plan a{display:inline-block}

.footer{padding:28px 14px;text-align:center;color:#cfefff;opacity:.85;border-top:1px solid rgba(255,255,255,.06)}

.upload-page{max-width:840px;margin:24px auto;padding:0 14px}
.gate{background:#1a2b33;border:1px solid rgba(0,240,255,.35);padding:10px;border-radius:10px}
.instructions li{margin:6px 0}
label{display:block;margin:10px 0 6px}
input[type=email]{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--ink)}
button.btn{margin-top:10px}
.confirm{margin-top:10px;color:#bff7ff}

@media (max-width:420px){
  :root{ --card-w: 42vw; --gap: 34vw; }
  .carousel{height:calc(var(--card-w) * 1.5)}
}