/* Liquid glass system — shared across catalog */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Archivo',system-ui,sans-serif;
  color:#e8ecf1;
  min-height:100vh; overflow-x:hidden;
  background:#060a12;
}
#bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
#bg canvas { width:100%; height:100%; display:block; }

/* Glass */
.glass {
  position:relative;
  background:rgba(14,20,30,.55);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 8px 32px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.04);
}
.glass::before {
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.04) 28%,transparent 50%);
  mix-blend-mode:screen;
}
.glass:hover { border-color:rgba(251,191,36,.22); }

.glass-bar {
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem clamp(1rem,4vw,3rem);position:sticky;top:0;z-index:100;
  background:rgba(6,10,18,.65);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.wrap { position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 3rem; }

.brand{display:flex;align-items:center;gap:.65rem;}
.mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,#2563eb,#1e40af);
  display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;
  box-shadow:0 2px 12px rgba(37,99,235,.45);
}
.brand-name{font-weight:700;font-size:.95rem;letter-spacing:-.01em;}
nav a{color:rgba(232,236,241,.75);text-decoration:none;font-size:.85rem;font-weight:500;margin-right:.75rem;}
nav a:hover{color:#fbbf24;}
.crumb{color:rgba(232,236,241,.45);font-size:.82rem;}
.cta-quote{
  background:linear-gradient(135deg,#fbbf24,#d97706);color:#1a1206;
  font-weight:700;font-size:.82rem;padding:.6rem 1.15rem;border-radius:999px;
  text-decoration:none;display:inline-block;
  box-shadow:0 4px 18px rgba(251,191,36,.35);transition:transform .15s;
}
.cta-quote:hover{transform:translateY(-1px);}
.phone{font-family:'IBM Plex Mono';font-size:.82rem;color:rgba(232,236,241,.7);text-decoration:none;}

.hero{padding:clamp(2rem,5vw,4rem) 0 2rem;max-width:720px;}
.hero h1{
  font-size:clamp(2rem,5.5vw,3.3rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.04;text-wrap:balance;
}
.hero .lede{margin-top:1rem;font-size:1.02rem;line-height:1.6;color:rgba(232,236,241,.72);max-width:54ch;}

.usecase{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  padding:.5rem 1rem;border-radius:999px;font-size:.83rem;font-weight:500;color:#a7f3d0;
  border:1px solid rgba(167,243,208,.2);background:rgba(6,78,59,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.usecase svg{flex-shrink:0;}

.cards{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2.2rem;}
.card{padding:1.4rem;}
.card h3{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(232,236,241,.55);font-weight:600;margin-bottom:1rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{
  padding:.4rem .85rem;border-radius:999px;
  font-family:'IBM Plex Mono';font-size:.78rem;font-weight:500;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  transition:all .18s;
}
.chip:hover{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.35);color:#fbbf24;}

.sizes{list-style:none;}
.sizes li{display:flex;justify-content:space-between;padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem;}
.sizes li:last-child{border-bottom:none;}
.sizes .vol{font-family:'IBM Plex Mono';color:#fbbf24;font-weight:500;}

.spec-table{width:100%;font-size:.87rem;border-collapse:collapse;}
.spec-table td{padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06);}
.spec-table td:first-child{color:rgba(232,236,241,.6);}
.spec-table td:last-child{text-align:right;font-family:'IBM Plex Mono';}

.takeback{
  margin-top:2.2rem;padding:1.3rem 1.5rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border-color:rgba(251,191,36,.22);
}
.takeback .icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#fbbf24,#d97706);
  display:grid;place-items:center;color:#1a1206;font-weight:800;font-size:1.1rem;
}
.takeback strong{color:#fbbf24;}
.takeback p{font-size:.9rem;line-height:1.55;color:rgba(232,236,241,.8);}

.request{margin-top:2.2rem;padding:1.6rem;}
.request h2{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.15rem;}
.form-row{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:.85rem;}
.field label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,236,241,.5);margin-bottom:.35rem;font-weight:600;}
.field input,.field select{
  width:100%;padding:.68rem .9rem;border-radius:11px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  color:#e8ecf1;font-family:inherit;font-size:.9rem;outline:none;
  transition:border-color .18s,background .18s;
}
.field input:focus,.field select:focus{border-color:rgba(251,191,36,.45);background:rgba(255,255,255,.085);}
.field select option{background:#122036;}
.btn-submit{
  width:100%;padding:.8rem;border-radius:11px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#fbbf24,#d97706);color:#1a1206;
  font-weight:700;font-size:.93rem;font-family:inherit;
  box-shadow:0 4px 20px rgba(251,191,36,.3);transition:transform .15s;
}
.btn-submit:hover{transform:translateY(-1px);}

footer{
  margin-top:2.5rem;padding:1.75rem clamp(1rem,4vw,3rem) 2.25rem;
  text-align:center;font-size:.78rem;color:rgba(232,236,241,.45);
  font-family:'IBM Plex Mono';
}
footer a{color:rgba(251,191,36,.6);text-decoration:none;}

@media(max-width:640px){
  nav.desktop-only{display:none;}
  .hero h1{font-size:clamp(1.8rem,8vw,2.3rem);}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}