:root{
  --bg:#0b0b0c;        /* near-black */
  --text:#f6f6f7;      /* soft white */
  --muted:#b8b9c0;     /* subtle text */
  --card:#111114;      /* deep panel */
  --line:#1a1b1f;      /* hairline */
  --orange:#ff6a00;    /* brand accent */
  --orange-20: rgba(255,106,0,.2);
  --shadow: 0 12px 36px rgba(0,0,0,.45);
  --radius-lg: 18px;
  --radius-md: 14px;

  /* Mobile-first type scale */
  --fs-2: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --fs-1: clamp(1rem, 0.95rem + 0.5vw, 1.15rem);
  --fs0: clamp(1.05rem, 1rem + 0.6vw, 1.2rem);
  --fs1: clamp(1.6rem, 1.5rem + 2.4vw, 2.6rem);
  --fs2: clamp(2rem, 1.8rem + 3.6vw, 3.2rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.container{
  width:min(1200px,94%);
  margin-inline:auto;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:60;
  background: rgba(11,11,12,.75);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
}
.brand .brand-mark{letter-spacing:.2em; font-weight:800; font-size:1.05rem}
.nav{display:none}
.cart-btn{
  display:flex; align-items:center; gap:10px; background:transparent; border:1px solid var(--line); color:var(--text);
  padding:10px 14px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color: transparent;
}
.cart-count{
  background:var(--orange); color:#121212; font-weight:800; padding:.2rem .5rem; border-radius:999px; min-width:1.2rem; text-align:center; font-size:.8rem;
}

/* HERO */
.hero{display:grid; gap:24px; padding:28px 0 14px}
.hero-visual{order:-1; display:flex; align-items:center; justify-content:center}

/* NEW: contained swipeable gallery inside the hero-visual */
.gallery-wrap{
  position:relative;
  width:100%;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  background:#0f1013;
}
/* keep a tasteful height similar to the old mock card */
.gallery-wrap::before{content:""; display:block; padding-top:62%} /* aspect ratio approx 16:10 */
.gallery-track{
  position:absolute; inset:0;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  gap:0;
}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track img{
  flex:0 0 100%;
  height:100%;
  width:100%;
  object-fit:cover;
  scroll-snap-align:center;
  user-select:none;
  -webkit-user-drag:none;
}
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.42);
  border:1px solid var(--line);
  color:var(--text);
  font-size:1.8rem;
  cursor:pointer;
  padding:.15em .45em;
  border-radius:12px;
  z-index:2;
  line-height:1;
}
.arrow.left{left:10px}
.arrow.right{right:10px}
@media(hover:hover){.arrow:hover{background:var(--orange); color:#111; border-color:transparent}}

/* Hide the old decorative mock, but keep it in the DOM (no deletions) */
.keyboard-card{display:none}

.keyboard-card{
  width:100%; border-radius:var(--radius-lg);
  background: radial-gradient(1200px 500px at 50% -20%, #1e1e22 10%, #121216 60%, #0b0b0c 100%);
  border:1px solid var(--line); box-shadow: var(--shadow); padding:18px; position:relative; overflow:hidden;
}
.kb-top{background:#0e0f12; border-radius:16px; padding:16px; border:1px solid #1a1b1f; position:relative}
.keys{height:200px; border-radius:12px; background: linear-gradient(#1b1c20, #14151a); box-shadow: inset 0 0 0 1px #202126; position:relative}
.keys::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(transparent 60%, rgba(255,106,0,.1)),
              repeating-linear-gradient(90deg, transparent, transparent 18px, #1f2026 19px, transparent 20px);
  border-radius:12px; opacity:.9;
}
.glow-bar{position:absolute; left:16px; right:16px; bottom:-8px; height:6px; background: radial-gradient(80% 100% at 50% 0%, rgba(255,106,0,.8), rgba(255,106,0,0) 70%); filter: blur(4px)}
.kb-bottom{height:28px; margin-top:10px; border-radius:12px; background:#0d0e12; border:1px solid #1a1b1f}

.headline{font-size:var(--fs2); line-height:1.05; margin:6px 0 8px; letter-spacing:-.02em; font-weight:800}
.subhead{color:var(--muted); font-size:var(--fs0); max-width:44ch}
.price-row{display:flex; align-items:center; gap:12px; margin:18px 0 14px; flex-wrap:wrap}
.price{display:flex; align-items:flex-start; gap:2px; font-weight:800; letter-spacing:-.02em}
.price .currency{opacity:.9}
.price .cents{font-weight:700; font-size:1rem; opacity:.9}
.price span{font-size:var(--fs1)}
.badges{display:flex; gap:8px; flex-wrap:wrap}
.badge{padding:6px 10px; border-radius:999px; font-size:.8rem; border:1px solid var(--line); color:var(--muted)}
.badge.accent{border-color:transparent; background:var(--orange); color:#131313; font-weight:700}
.badge.ghost{background:transparent}

.cta-stack{display:grid; gap:12px; max-width:560px}
.qty-row{display:grid; gap:8px}
.qty-control{display:grid; grid-template-columns: 52px 1fr 52px; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.qty-btn{background:#0e0f12; color:var(--text); border:0; font-size:1.3rem; height:52px; cursor:pointer}
.qty-control input{height:52px; text-align:center; border:0; background:#0e0f12; width:100%; font-weight:700}
.buy-cta{display:grid; gap:10px; grid-template-columns: 1fr 1fr}
.btn{appearance:none; border:0; cursor:pointer; padding:16px 18px; border-radius:12px; font-weight:800; letter-spacing:.02em; width:100%; -webkit-tap-highlight-color: transparent}
.btn.primary{background: linear-gradient(180deg, #ff7a1f, #ff6a00 60%, #f85a00); color:#161616; box-shadow: 0 10px 24px var(--orange-20)}
.btn.primary:active{transform: translateY(1px)}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.tiny-note{color:var(--muted); font-size:.85rem; margin-top:2px}

/* FEATURES */
.features{display:grid; grid-template-columns:1fr; gap:12px; padding:28px 0 8px}
.feature{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
.feature h3{margin:0 0 6px 0; font-size:var(--fs0)}
.feature p{margin:0; color:var(--muted); font-size:var(--fs-1)}

/* GALLERY */
.gallery{display:grid; grid-template-columns:1fr; gap:12px; padding:24px 0}
.shot{aspect-ratio: 16/10; border-radius:16px; border:1px solid var(--line); background:#111114; box-shadow: var(--shadow); position:relative; overflow:hidden}
.shot-1{background-image: linear-gradient(135deg, #0f1014 0%, #17181e 60%), radial-gradient(600px 220px at 70% 110%, rgba(255,106,0,.18), transparent 60%)}
.shot-2{background-image: linear-gradient(135deg, #101116 0%, #191a20 60%)}
.shot-3{background-image: linear-gradient(135deg, #0f1116 0%, #15161c 60%)}

/* SPECS */
.specs{padding:22px 0 60px}
.specs h2{margin:0 0 10px 0; font-size:var(--fs1)}
.spec-list{list-style:none; padding:0; margin:0; display:grid; gap:10px; color:var(--muted)}
.spec-list li{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:var(--fs-1)}

/* REVIEWS */
.reviews{padding:24px 0 60px}
.reviews-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.rating{font-weight:800}
.review-grid{display:grid; grid-template-columns:1fr; gap:12px}
.review-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; display:grid; gap:10px;
}
.rev-header{display:flex; align-items:center; justify-content:space-between}
.rev-name{font-weight:700}
.rev-stars{color:var(--orange)}
.rev-photo{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.review-write{margin-top:16px}
.form-grid{display:grid; grid-template-columns:1fr; gap:12px}
.field{display:grid; gap:6px}
label{font-size:.9rem; color:var(--muted)}
input, select{
  background:#0f1013; color:var(--text); border:1px solid var(--line);
  padding:14px 14px; border-radius:12px; outline:none; font-size:var(--fs0);
}
input:focus, select:focus{border-color:var(--orange)}
.field.span-2{grid-column:1 / -1}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:4px}

/* CART DRAWER (z-index fix & layering) */
.cart-drawer{position:fixed; inset:0; pointer-events:none; z-index:1000}
.cart-overlay{
  position:absolute; inset:0; background: rgba(0,0,0,.45); opacity:0; transition: opacity .25s ease; border:0; cursor:pointer; z-index:0;
}
.cart-panel{
  position:absolute; right:-100%; top:0; bottom:0; width:min(100%,420px);
  background:#0e0f12; border-left:1px solid var(--line); box-shadow: var(--shadow);
  transition:right .3s ease; display:flex; flex-direction:column; z-index:1;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.cart-drawer.open{pointer-events:auto}
.cart-drawer.open .cart-overlay{opacity:1}
.cart-drawer.open .cart-panel{right:0}
.cart-header{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.icon-btn{background:transparent; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px; cursor:pointer}
.cart-items{padding:14px; flex:1; overflow:auto; display:grid; gap:12px}
.cart-item{border:1px solid var(--line); border-radius:12px; padding:12px; display:grid; grid-template-columns: 1fr auto; gap:8px; background:#101216}
.cart-item h4{margin:0; font-size:var(--fs0)}
.cart-item .meta{color:var(--muted); font-size:.9rem}
.cart-item .line{font-weight:700}
.cart-footer{border-top:1px solid var(--line); padding:14px; display:grid; gap:10px}
.cart-row{display:flex; align-items:center; justify-content:space-between}
.cart-note{color:var(--muted); font-size:.85rem}

/* CHECKOUT MODAL (z-index fix & layering) */
.checkout-modal{position:fixed; inset:0; pointer-events:none; z-index:1100}
.checkout-overlay{
  position:absolute; inset:0; background: rgba(0,0,0,.55); opacity:0; transition: opacity .25s ease; border:0; cursor:pointer; z-index:0;
}
.checkout-panel{
  position:absolute; right:-100%; top:0; bottom:0; width:min(100%,860px);
  background:#0e0f12; border-left:1px solid var(--line); box-shadow: var(--shadow);
  transition:right .35s ease; display:flex; flex-direction:column; z-index:1;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.checkout-modal.open{pointer-events:auto}
.checkout-modal.open .checkout-overlay{opacity:1}
.checkout-modal.open .checkout-panel{right:0}
.checkout-header{padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.checkout-steps{padding:16px 16px 20px; display:grid; gap:14px; overflow:auto; max-height:calc(100vh - 72px)}
.stepper{display:flex; gap:10px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:8px; color:var(--muted); background:var(--card); border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:.9rem}
.step span{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px; background:#1a1b1f; color:#f0f0f0; font-weight:700; font-size:.8rem}
.step.active{color:#121212; background:var(--orange); border-color:transparent}
.step.active span{background:#111}

.review{display:grid; gap:14px}
.review-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
.review-items{display:grid; gap:10px}
.review-row{display:flex; align-items:center; justify-content:space-between; color:var(--text)}
.review-row.total{font-weight:800; font-size:1.05rem}
.confirmation{display:grid; place-items:center; gap:10px; padding:24px}
.checkmark{width:56px; height:56px; border-radius:50%; background:var(--orange); color:#111; display:grid; place-items:center; font-weight:800; font-size:1.6rem}
.muted{color:var(--muted)}

/* FOOTER */
.site-footer{border-top:1px solid var(--line); padding:20px 0 36px; color:var(--muted)}
.footer-inner{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap}
.footer-inner .mini{font-size:.9rem; color:var(--muted)}
.footer-inner .dot{opacity:.4}

/* ENHANCEMENTS */
@media (min-width: 600px){
  .hero{grid-template-columns: 1fr 1fr; gap:28px}
  .gallery{grid-template-columns: 2fr 1fr}
  .keys{height:220px}
  .buy-cta{grid-template-columns: .8fr .8fr}
  .review-grid{grid-template-columns:1fr 1fr}
}
@media (min-width: 980px){
  .nav{display:flex; gap:28px; font-size:.95rem; color:var(--muted)}
  .hero{gap:44px; padding:64px 0 24px}
  .keyboard-card{padding:22px; width:min(560px, 100%)}
  .qty-control{grid-template-columns: 44px 1fr 44px}
  .qty-btn{height:44px}
  .qty-control input{height:44px}
  .review-grid{grid-template-columns:1fr 1fr 1fr}
}

.hidden{display:none !important}
.visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* When a drawer/modal is open, prevent background scroll (iOS friendly) */
body.modal-open{height:100vh; overflow:hidden; position:fixed; inset:0}

/* --- Aerion Hero Gallery --- */
.gallery-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background-color: #111114;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-track {
  display: flex;
  width: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: hidden;
  transition: transform 0.6s ease;
}

.gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: #fff;
  border-radius: 10px;
}

/* arrows */
.gallery-wrap .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s ease;
}
.gallery-wrap .arrow.left { left: 10px; }
.gallery-wrap .arrow.right { right: 10px; }
.gallery-wrap .arrow:hover { background: rgba(255,255,255,0.35); }