:root{
  --bg:#0d0b14;
  --card:#171421;
  --card2:#1d1929;
  --text:#f7f4ff;
  --muted:#a9a2b8;
  --primary:#8b5cf6;
  --primary2:#6d28d9;
  --border:rgba(255,255,255,.09);
  --success:#22c55e;
  --danger:#ef4444;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 80% 0%,rgba(139,92,246,.18),transparent 30%),
    radial-gradient(circle at 0% 30%,rgba(59,130,246,.10),transparent 25%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(1050px,calc(100% - 30px));margin:auto}
header{
  position:sticky;top:0;z-index:20;
  background:rgba(13,11,20,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav{
  min-height:68px;display:flex;align-items:center;justify-content:space-between;
}
.brand{font-weight:900;font-size:20px;letter-spacing:.3px}
.brand span{color:#a78bfa}
.menu-btn{
  border:1px solid var(--border);background:var(--card);
  color:var(--text);width:42px;height:42px;border-radius:13px;font-size:20px;
}
.hero{padding:58px 0 34px;text-align:center}
.badge{
  display:inline-flex;padding:7px 12px;border-radius:999px;
  background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.25);
  color:#c4b5fd;font-size:13px;font-weight:700;
}
.hero h1{font-size:clamp(34px,8vw,58px);line-height:1.03;margin:18px 0 12px}
.hero h1 span{background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;color:transparent}
.hero p{max-width:650px;margin:auto;color:var(--muted);line-height:1.7}
.section-title{margin:20px 0 16px;font-size:23px}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.product{
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid var(--border);border-radius:22px;padding:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.15);
}
.icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:rgba(139,92,246,.14);font-size:25px;margin-bottom:15px;
  overflow:hidden;
}
.icon img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.product h3{margin:0 0 6px;font-size:19px}
.product p{margin:0;color:var(--muted);font-size:14px}
.price{font-size:22px;font-weight:900;margin:18px 0}
.price small{font-size:12px;color:var(--muted);font-weight:500}
.btn{
  width:100%;border:0;border-radius:13px;padding:13px 16px;font-weight:800;
  color:white;background:linear-gradient(135deg,var(--primary),var(--primary2));
  transition:.18s transform,.18s opacity;
}
.btn:active{transform:scale(.98)}
.btn.secondary{background:var(--card2);border:1px solid var(--border)}
.order-wrap{margin:40px 0}
.order-card{
  display:none;background:var(--card);border:1px solid var(--border);
  border-radius:24px;padding:22px;
}
.order-card.active{display:block;animation:show .22s ease}
@keyframes show{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.order-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
.order-head h2{margin:0;font-size:21px}
.close{
  width:36px;height:36px;border-radius:11px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-size:18px;
}
.mode{
  display:inline-block;margin-top:5px;padding:5px 9px;border-radius:8px;
  background:rgba(139,92,246,.12);color:#c4b5fd;font-size:12px;font-weight:700;
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field.full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:#ddd7e8}
input{
  width:100%;border:1px solid var(--border);outline:0;
  background:#100e17;color:var(--text);border-radius:12px;padding:13px 14px;
}
input:focus{border-color:rgba(139,92,246,.75);box-shadow:0 0 0 3px rgba(139,92,246,.10)}
.hint{font-size:11px;color:var(--muted);margin-top:6px}
.qty{display:flex;gap:8px}
.qty button{
  width:46px;border:1px solid var(--border);border-radius:12px;
  background:var(--card2);color:var(--text);font-size:20px;
}
.qty input{text-align:center}
.total{
  margin:8px 0 17px;padding:17px;border-radius:16px;
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.16);
  display:flex;justify-content:space-between;align-items:center;
}
.total strong{font-size:21px}
.notice{
  margin-top:15px;padding:13px 14px;border-radius:13px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.16);
  color:#d8d0df;font-size:12px;line-height:1.6;
}
.summary{
  display:none;margin-top:18px;padding:17px;border-radius:16px;
  background:#110f18;border:1px solid var(--border);
}
.summary.show{display:block}
.summary h3{margin:0 0 12px;font-size:16px}
.summary-row{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:13px}
.summary-row span:first-child{color:var(--muted)}
.summary-row span:last-child{text-align:right;word-break:break-word}
footer{padding:40px 0 55px;color:var(--muted);font-size:12px;text-align:center}
.toast{
  position:fixed;left:50%;bottom:22px;z-index:50;transform:translate(-50%,20px);
  background:#24202f;border:1px solid var(--border);padding:12px 16px;
  border-radius:13px;opacity:0;pointer-events:none;transition:.2s;max-width:90%;
  text-align:center;font-size:13px;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){
  .products{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .hero{padding-top:42px}
}


/* ===== SHARED MULTI-PAGE NAVIGATION ===== */
.bottom-nav{
    position:fixed;
    left:50%;
    bottom:max(14px, env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px;
    background:rgba(15,23,42,.94);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-radius:50px;
    box-shadow:0 8px 30px rgba(0,0,0,.5);
    z-index:100000;
    transition:transform .35s ease,opacity .35s ease;
}
.bottom-nav.hidden{transform:translateX(-50%) translateY(90px);opacity:0;pointer-events:none}
.bottom-nav.visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.bottom-nav-item{
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-width:82px;padding:10px 17px;border-radius:50px;
    color:#94a3b8;text-decoration:none;
    font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;
    transition:.25s ease;white-space:nowrap;
}
.bottom-nav-item i{font-size:14px}
.bottom-nav-item.active{
    color:#0f172a;background:linear-gradient(135deg,#38bdf8,#818cf8);
    box-shadow:0 4px 15px rgba(56,189,248,.3)
}
.bottom-nav-item:not(.active):hover{color:#e2e8f0;background:rgba(255,255,255,.05)}
.bottom-nav-item.order-nav{
    width:54px;height:54px;min-width:54px;padding:0;
    border-radius:50%;font-size:0;
    background:linear-gradient(135deg,#38bdf8,#818cf8);
    color:#0f172a;
    box-shadow:0 0 22px rgba(56,189,248,.28);
}
.bottom-nav-item.order-nav i{font-size:21px}
.bottom-nav-item.order-nav.active{
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 0 28px rgba(56,189,248,.48);
}
body{padding-bottom:100px}
@media(max-width:420px){
    .bottom-nav{gap:3px;padding:5px}
    .bottom-nav-item{min-width:70px;padding:9px 12px;font-size:10px}
    .bottom-nav-item.order-nav{width:50px;height:50px;min-width:50px}
    .bottom-nav-item.order-nav i{font-size:19px}
}