:root{
  --bg:#0f1115;
  --card:#0f1720;
  --accent:#ff6b35;
  --muted:#9aa4ad;
  --glass: rgba(255,255,255,0.04);
  --radius:18px;
  --gap:18px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#07101a 0%, #071827 100%);color:#fff}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;

  background: rgba(15, 17, 21, 0.6); /* add a semi-transparent bg */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);/* Safari support */
}

.brand{display:flex;gap:12px;align-items:center}
.logo{font-size:30px;background:linear-gradient(45deg,#ffb86b,#ff6b35);width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.topbar nav a{color:var(--muted);margin-left:18px;text-decoration:none}
.main{padding:32px}
.hero{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center;padding:40px}
.hero-left h2{font-size:34px;margin:0}
.tag{color:var(--muted);margin:6px 0}
.cta-row{display:flex;gap:10px;margin-top:18px}
.btn{padding:12px 18px;border-radius:12px;border:0;font-weight:600;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ff9b66);color:#111}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.discount{margin-top:14px;color:#f7d08a}

.hero-right{position:relative;height:420px;display:flex;align-items:center;justify-content:center}
.lottie-container{position:absolute;left:12%;top:8%;width:240px;height:240px;pointer-events:none;opacity:0.95}
#three-canvas{width:420px;height:420px;border-radius:18px;box-shadow: 0 20px 60px rgba(0,0,0,0.6);background:linear-gradient(180deg,#fff0 0,#0000 100%);}

.order-section{padding:40px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:18px;margin:20px 32px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form select,.form textarea{padding:12px;border-radius:10px;border:0;background:var(--glass);color:#fff}
.form textarea{grid-column:1/-1}
.result{margin-top:12px;color:#9bdabf}
.about{padding:40px 32px}
.footer{padding:30px 32px;border-top:1px solid rgba(255,255,255,0.03)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:20px}
  #three-canvas{width:320px;height:320px}
  .form{grid-template-columns:1fr}
}