/* page: Catalog — sections 1–3 */

/* ===== SECTION 1: Aurora Capsules (3 images) ============================ */
.aurora-capsules{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.aurora-capsules::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.aurora-head .lead{ color: var(--qc-dim); }

.capsules-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .capsules-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .capsules-grid{ grid-template-columns: 1fr; } }

.capsule{
  position:relative; border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  overflow:hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.capsule:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(86,240,255,.35); }
.capsule__media{ position:relative; }
.capsule__media::after{
  /* lens glow follows cursor via --mx/--my from JS */
  content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: radial-gradient(180px 180px at var(--mx,60%) var(--my,40%), rgba(86,240,255,.20), transparent 60%);
  transition: opacity .2s ease;
  opacity:.9;
}
.capsule img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.capsule h3{ margin:10px 0 6px; font-size:1.05rem; }
.capsule .meta{ color: var(--qc-dim); }

/* ===== SECTION 2: Power Duo (2 images) ================================== */
.power-duo{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.power-duo::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 14%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 86%, rgba(86,240,255,.08), transparent 60%);
}
.power-head .lead{ color: var(--qc-dim); }

.profile-toggle{ display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.pbtn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pbtn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.pbtn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.power-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .power-grid{ grid-template-columns: 1fr; } }

.power-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1); transition: box-shadow .25s ease, border-color .25s ease;
}
.power-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.cmp-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.bullets{ margin:.4rem 0 .6rem 1rem; color: var(--qc-dim); }

.cmp-bars{ display:grid; gap:8px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.cmp-bars .bar{
  display:block; height:14px; border-radius:999px; background: rgba(255,255,255,.10); position:relative; overflow:hidden;
}
.cmp-bars .bar b{
  position:absolute; inset:0; width: var(--w, 40%); height:100%;
  background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2));
  transform-origin: left center; transform: scaleX(var(--k, .6));
  transition: transform .5s cubic-bezier(.22,.9,.25,1);
}

/* ===== SECTION 3: Soundstage Bay (2 images + wave) ===================== */
.soundstage-bay{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.soundstage-bay::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(127,91,255,.08), transparent 60%);
}
.sound-head .lead{ color: var(--qc-dim); }

.sound-toggle{ display:flex; gap:8px; margin:8px 0 16px; flex-wrap:wrap; }
.sbtn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sbtn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.sbtn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.sound-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr)); align-items:end;
}
@media (max-width: 768px){ .sound-grid{ grid-template-columns: 1fr; } }

.sound-media{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1); transition: box-shadow .25s ease, border-color .25s ease;
}
.sound-media:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.sound-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.sound-media .meta{ color: var(--qc-dim); margin-top:8px; }

/* wave */
.sound-wave{ width:100%; height:auto; grid-column: 1 / -1; }
.wave-path{
  fill:none; stroke: var(--qc-accent); stroke-width:2;
  filter: drop-shadow(0 0 6px rgba(86,240,255,.35));
  stroke-dasharray: 6 10; stroke-dashoffset: 0;
  animation: wave-flow 4s linear infinite;
}
@keyframes wave-flow{
  from{ stroke-dashoffset: 0; }
  to  { stroke-dashoffset: -200; }
}
/* амплитуда волны регулируется переменной */
.soundstage-bay{ --amp: 0; }
.soundstage-bay.mode-open { --amp: 16; }
.soundstage-bay.mode-iem  { --amp: 6;  }

/* лёгкий наклон для снимков */
[data-tilt-small]{ transform-style: preserve-3d; transition: transform .2s ease; }
/* ===== SECTION 4: Desk Kits (2 images) ================================== */
.desk-kits{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.desk-kits::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 86% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 14% 82%, rgba(127,91,255,.08), transparent 60%);
}
.kits-head .lead{ color: var(--qc-dim); }

.kits-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .kits-grid{ grid-template-columns: 1fr; } }

.kit-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1); transition: border-color .25s ease, box-shadow .25s ease;
}
.kit-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }

.kit-media{ position:relative; }
.kit-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.kit-highlight{
  position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background: radial-gradient(160px 160px at var(--x,50%) 52%, rgba(86,240,255,.24), transparent 60%);
  opacity:.9; transition: opacity .2s ease;
}
.kit-parts{ margin:.4rem 0 .2rem 1rem; }
.kit-parts li{ color: var(--qc-dim); cursor:pointer; }
.kit-parts li:hover{ color:#fff; }

/* ===== SECTION 5: Travel Proof (3 images) =============================== */
.travel-proof{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.travel-proof::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 16%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 84%, rgba(86,240,255,.08), transparent 60%);
}
.travel-head .lead{ color: var(--qc-dim); }

.pack-ui{ display:grid; gap:10px; margin: 8px 0 14px; }
.pack-list{ display:flex; gap:8px; flex-wrap:wrap; }
.pack-btn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pack-btn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.pack-btn.is-on{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.pack-line{ position:relative; height:6px; border-radius:999px; background: rgba(255,255,255,.10); overflow:hidden; }
.pack-line b{
  position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2));
  transform-origin: left center; transform: scaleX(var(--p, .25)); /* 0..1 */
  transition: transform .4s cubic-bezier(.22,.9,.25,1);
}

.travel-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .travel-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .travel-grid{ grid-template-columns: 1fr; } }

.travel-media{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
}
.travel-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.travel-media .meta{ color: var(--qc-dim); margin-top:8px; }

/* ===== SECTION 6: Creator Shortcuts (2 images) ========================== */
.creator-shortcuts{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.creator-shortcuts::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 16%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 84%, rgba(127,91,255,.08), transparent 60%);
}
.shortcuts-head .lead{ color: var(--qc-dim); }

.shortcuts-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .shortcuts-grid{ grid-template-columns: 1fr; } }

.shortcut-media{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1); transition: box-shadow .25s ease, border-color .25s ease;
}
.shortcut-media:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.shortcut-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.shortcut-media .meta{ color: var(--qc-dim); margin-top:8px; }

.dial-panel{
  margin-top: 12px;
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
}
.dial-toggle{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.dbtn{
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  color:#fff; padding:6px 10px; border-radius:999px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dbtn:hover{ transform: translateY(-2px); border-color: rgba(86,240,255,.4); }
.dbtn.is-active{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }

.dial{ width:200px; height:auto; display:block; }
.dial-base{ fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.18); }
.dial-hub{ fill:#fff; }
.dial-needle{
  stroke: var(--qc-accent);
  stroke-width: 3;
  transform-origin: 60px 60px;
  transform: rotate(var(--deg, 20deg));
  transition: transform .35s cubic-bezier(.22,.9,.25,1);
}

/* режимы (только меняем угол) */
.creator-shortcuts{ --deg: 20deg; }         /* edit (по умолчанию) */
.creator-shortcuts.mode-stream{ --deg: 140deg; }
.creator-shortcuts.mode-grade { --deg: 260deg; }
.dial-note{ color: var(--qc-dim); }
/* progress line — FIX */
.pack-line{
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.pack-line b{
  position: absolute;
  left: 0; top: 0; bottom: 0;        /* ← больше НЕ правый = 100% */
  width: 100%;                        /* ← полная ширина */
  background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2));
  transform-origin: left center;
  transform: scaleX(var(--p, .25));   /* 0..1 приходит из JS */
  transition: transform .4s cubic-bezier(.22,.9,.25,1);
  will-change: transform;
}

/* заметный статус на кнопке */
.pack-btn.is-on{
  background: rgba(127,91,255,.38);
  border-color: rgba(127,91,255,.8);
  box-shadow: 0 0 0 3px rgba(127,91,255,.18);
}
.pack-btn.is-on::before{
  content: "✓";
  margin-right: 6px;
}
/* ===== SECTION 7: Quiet Inputs (2 images) =============================== */
.quiet-inputs{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.quiet-inputs::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 22%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 78%, rgba(127,91,255,.08), transparent 60%);
}
.qi-head .lead{ color: var(--qc-dim); }

.qi-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .qi-grid{ grid-template-columns: 1fr; } }

.qi-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.qi-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }

.qi-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.qi-specs{ display:grid; grid-template-columns: 1fr 1fr; gap:6px 14px; margin:8px 0; }
.qi-specs dt{ color:#dfe9ff; font-weight:700; }
.qi-specs dd{ color: var(--qc-dim); margin:0; }

.qi-notes{ margin-top:6px; }
.qi-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.qi-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.qi-notes p{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 8: Desk Lighting (2 images) ============================== */
.desk-lighting{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.desk-lighting::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 80%, rgba(86,240,255,.08), transparent 60%);
}
.dl-head .lead{ color: var(--qc-dim); }

.dl-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .dl-grid{ grid-template-columns: 1fr; } }

.dl-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.dl-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.dl-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.dl-swatches{ display:flex; gap:6px; margin-top:8px; }
.dl-swatches i{ width:22px; height:22px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.dl-swatches i:nth-child(1){ background: radial-gradient(circle at 50% 50%, #ffddad, #f0a652); }
.dl-swatches i:nth-child(2){ background: radial-gradient(circle at 50% 50%, #fff2cf, #d8c58f); }
.dl-swatches i:nth-child(3){ background: radial-gradient(circle at 50% 50%, #d7edff, #93c6ff); }

/* ===== SECTION 9: Wearables Hub (3 images) ============================== */
.wearables-hub{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.wearables-hub::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 14% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 86% 82%, rgba(127,91,255,.08), transparent 60%);
}
.wh-head .lead{ color: var(--qc-dim); }

.wh-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .wh-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .wh-grid{ grid-template-columns: 1fr; } }

.wh-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.wh-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }

.wh-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.wh-specs{ display:grid; gap:6px 14px; grid-template-columns: 1fr 1fr; margin:8px 0 0; }
.wh-specs dt{ color:#dfe9ff; font-weight:700; }
.wh-specs dd{ color: var(--qc-dim); margin:0; }
/* ===== SECTION 10: Connectivity Commons (2 images) ====================== */
.connectivity-commons{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.connectivity-commons::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 10% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 90% 82%, rgba(127,91,255,.08), transparent 60%);
}
.cc-head .lead{ color: var(--qc-dim); }

.cc-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .cc-grid{ grid-template-columns: 1fr; } }

.cc-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cc-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }

.cc-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.cc-specs{ display:grid; gap:6px 14px; grid-template-columns: 1fr 1fr; margin:8px 0; }
.cc-specs dt{ color:#dfe9ff; font-weight:700; }
.cc-specs dd{ color: var(--qc-dim); margin:0; }

.cc-notes{ margin-top:6px; }
.cc-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.cc-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.cc-notes p{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 11: Care Kit (2 images) ================================== */
.care-kit{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.care-kit::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 14% 20%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 86% 80%, rgba(86,240,255,.08), transparent 60%);
}
.care-head .lead{ color: var(--qc-dim); }

.care-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .care-grid{ grid-template-columns: 1fr; } }

.care-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.care-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }

.care-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.care-notes{ margin-top:6px; }
.care-notes > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.care-notes[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.care-notes p{ color: var(--qc-dim); margin:.6rem 0 0; }

/* ===== SECTION 12: Carry Options (3 images) ============================= */
.carry-options{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.carry-options::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.carry-head .lead{ color: var(--qc-dim); }

.carry-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .carry-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .carry-grid{ grid-template-columns: 1fr; } }

.carry-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.carry-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.carry-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.carry-card .meta{ color: var(--qc-dim); margin-top:8px; }
/* ===== SECTION 13: Desk Audio Bundles (3 images) ======================== */
.desk-audio-bundles{ padding: clamp(28px,5vw,80px) 0; position:relative; }
.desk-audio-bundles::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 12% 18%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 88% 82%, rgba(127,91,255,.08), transparent 60%);
}
.dab-head .lead{ color: var(--qc-dim); }

.dab-strip{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .dab-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 576px){ .dab-strip{ grid-template-columns: 1fr; } }

.dab-card{
  position:relative;
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.dab-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.dab-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.dab-ribbon{
  position:absolute; top:10px; left:-8px; padding:4px 10px 4px 16px;
  background: linear-gradient(90deg, var(--qc-accent), var(--qc-accent-2));
  color:#0b1020; font-weight:700; border-radius:0 999px 999px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.dab-card .meta{ color: var(--qc-dim); margin-top:6px; }

/* ===== SECTION 14: Phone Essentials (2 images) ========================== */
.phone-essentials{ padding: clamp(28px,5vw,72px) 0; position:relative; }
.phone-essentials::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 18% 14%, rgba(127,91,255,.08), transparent 60%),
    radial-gradient(900px 360px at 82% 86%, rgba(86,240,255,.08), transparent 60%);
}
.pe-head .lead{ color: var(--qc-dim); }

.pe-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .pe-grid{ grid-template-columns: 1fr; } }

.pe-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pe-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }
.pe-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.pe-card .meta{ color: var(--qc-dim); margin-top:6px; }

/* ===== SECTION 15: Warranty & Support (2 images) ======================== */
.warranty-support{ padding: clamp(28px,5vw,80px) 0; position:relative; }
.warranty-support::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 360px at 14% 20%, rgba(86,240,255,.08), transparent 60%),
    radial-gradient(900px 360px at 86% 80%, rgba(127,91,255,.08), transparent 60%);
}
.ws-head .lead{ color: var(--qc-dim); }

.ws-grid{
  display:grid; gap:16px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 768px){ .ws-grid{ grid-template-columns: 1fr; } }

.ws-card{
  border:1px solid rgba(255,255,255,.10); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px; box-shadow: var(--shadow-1);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ws-card:hover{ border-color: rgba(86,240,255,.35); box-shadow: var(--shadow-2); }

.ws-media img{ width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.ws-faq > summary{
  cursor:pointer; list-style:none; color:#fff; display:inline-block; margin-top:8px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  padding:6px 10px; border-radius:999px;
}
.ws-faq[open] > summary{ background: rgba(127,91,255,.28); border-color: rgba(127,91,255,.6); }
.ws-faq .meta{ color: var(--qc-dim); margin:.6rem 0 0; }
.ws-note{ color: var(--qc-dim); margin-top:10px; }