/* Clean premium dark style using your original images */
:root{
  --bg:#0b0f14; --bg-soft:#10161f; --text:#e6e9ee; --muted:#a6b0bf;
  --brand:#60a5fa; --accent:#7c5cff; --card:#0f1622;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:radial-gradient(1200px 800px at 80% -10%, rgba(124,92,255,.18), transparent 60%) fixed, radial-gradient(800px 600px at -10% 20%, rgba(96,165,250,.18), transparent 60%) fixed, var(--bg); color:var(--text); line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0}
.site-header{position:sticky;top:0;backdrop-filter:saturate(160%) blur(10px);background:rgba(11,15,20,.6);border-bottom:1px solid #1a2433;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;text-decoration:none;color:var(--text)}
.primary-nav .nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.primary-nav a{color:var(--text);text-decoration:none;opacity:.9}
.menu-btn{display:none;background:transparent;border:1px solid #28405f;border-radius:.6rem;color:var(--text);padding:.4rem .6rem}
.trustbar{border-top:1px solid #1a2433;border-bottom:1px solid #1a2433;background:#0f1726;color:#a6b0bf;font-size:.9rem;text-align:center;padding:.4rem 1rem}
@media (max-width: 760px){
  .menu-btn{display:inline-block}
  .nav-list{position:absolute;right:20px;top:64px;background:var(--bg-soft);border:1px solid #1a2433;border-radius:.8rem;padding:.75rem;display:none;flex-direction:column;min-width:180px}
  .nav-list.open{display:flex}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1rem;border-radius:.8rem;background:linear-gradient(90deg,var(--accent),var(--brand));color:white;text-decoration:none;font-weight:600;box-shadow:0 6px 20px rgba(124,92,255,.25);transition:transform .06s ease}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid #28405f;color:var(--text);box-shadow:none}
.btn-small{padding:.5rem .8rem}
.hero{padding:clamp(2rem,6vw,4.5rem) 0;border-bottom:1px solid #182232}
.hero-inner{display:grid;grid-template-columns: 1.2fr 1fr;gap:2rem;align-items:center}
.hero h1{font-size: clamp(2rem, 3.6vw, 3rem);line-height:1.1;margin:.2rem 0}
.hero p{color:var(--muted);max-width:48ch}
.cta-row{display:flex;gap:.8rem;margin:1rem 0 1.2rem}
.hero-img{max-width:420px;border-radius:14px;box-shadow:0 20px 80px rgba(0,0,0,.5);border:1px solid #1b2940}
.trust-badges{display:flex;gap:.8rem;list-style:none;padding:0;margin:1rem 0 0}
.trust-badges li{font-size:.9rem;color:var(--muted);background:#0f1726;border:1px solid #25324a;padding:.35rem .6rem;border-radius:999px}
.drops{padding:clamp(2rem,6vw,4rem) 0}
.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.product{background:var(--card);border:1px solid #1b2940;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column}
.product-media{height:220px;background:#0d1422;position:relative}
.product-media img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:.8rem;top:.8rem;background:#0f1726;color:#b5c8ff;border:1px solid #2a3c5f;border-radius:999px;padding:.25rem .6rem;font-size:.8rem}
.product-body{padding:1rem}
.product h3{margin:.2rem 0 .4rem}
.muted{color:var(--muted)} .small{font-size:.9rem}
.bullets{list-style:disc;margin:.6rem 0 .2rem 1.1rem;padding:0}
.table-wrap{overflow:auto;border:1px solid #1b2940;border-radius:.8rem}
table{width:100%;border-collapse:collapse;background:#0d1422}
th,td{padding:.7rem;border-bottom:1px solid #1b2940;text-align:left}
th{position:sticky;top:0;background:#0f1726;cursor:pointer}
.why{padding:clamp(2rem,6vw,4rem) 0;border-top:1px solid #182232;border-bottom:1px solid #182232}
.grid.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.gallery{padding:clamp(2rem,6vw,4rem) 0}
.gallery .photo img{width:100%;height:200px;object-fit:cover;border-radius:.5rem}
.cta{padding:clamp(2rem,6vw,4rem) 0}
.center{text-align:center} .store-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.site-footer{border-top:1px solid #182232;padding:1.2rem 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.social{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.social a{color:var(--muted);text-decoration:none}
@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr} .hero-art{order:-1} }
/* hide the skip link but keep accessibility */
.skip-link {
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* ========== MOBILE POLISH (paste at bottom) ========== */

/* 1) Global type & spacing tweaks */
@media (max-width: 640px){
  body{ line-height:1.5; }
  .container{ padding:0 14px; }

  /* Headings scale down a touch */
  .hero h1{ font-size: clamp(1.7rem, 6.2vw, 2.2rem); }
  h2{ font-size: clamp(1.1rem, 4.8vw, 1.4rem); }
  p, li, td, th{ font-size: 0.95rem; }

  /* Buttons = full-width stack */
  .cta-row, .store-row{
    flex-direction: column;
    align-items: stretch;
  }
  .btn, .btn-ghost{ width:100%; padding:0.9rem 1rem; border-radius:0.9rem; }
}

/* 2) Header & nav: cleaner mobile dropdown */
@media (max-width: 760px){
  .site-header .header-inner{ min-height:56px; }
  .menu-btn{ padding:.5rem .7rem; }
  .primary-nav .nav-list{
    right: 14px; top: 56px; min-width: 200px;
  }
  .primary-nav .nav-list a{
    padding: .55rem .4rem; display:block;
  }
}

/* 3) Hero: image above text, smaller margins, centered */
@media (max-width: 900px){
  .hero{ padding: 1.5rem 0 1.2rem; }
  .hero-inner{ gap: 1rem; }
  .hero-img{
    max-width: 88vw;
    margin: 0 auto .5rem;
    border-radius: 12px;
  }
  .cta-row{ margin: .8rem 0 0; }
}

/* 4) Cards & gallery: bigger touch targets, less shadow */
@media (max-width: 640px){
  .grid.cards{ gap:.9rem; }
  .product{ border-radius:.9rem; }
  .product-media{ height: 180px; }
  .gallery .photo img{ height:160px; border-radius:.6rem; }
}

/* 5) “Why” grid: two-up -> one-up on phones */
@media (max-width: 540px){
  .grid.two{ grid-template-columns: 1fr; gap:.8rem; }
}

/* 6) Checklist: make table comfy on phones */
.table-wrap{ overflow:auto; -webkit-overflow-scrolling: touch; }
#checklistTable{ min-width: 560px; } /* keeps columns readable; scrolls horizontally */
#checklistTable thead th{ position: sticky; top:0; z-index:1; }
#checklistTable td, #checklistTable th{ padding: .55rem .6rem; }

/* Make search input larger + sticky */
@media (max-width: 640px){
  .table-controls{
    position: sticky; top: 56px; z-index: 5;
    padding: .4rem; margin: .4rem -14px .4rem; /* edge-to-edge */
    background: rgba(11,15,20,.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #1a2433;
  }
  .table-controls input{ padding:.7rem .75rem; font-size:1rem; }
  #downloadCsv{ padding:.7rem .9rem; }
}

/* 7) Footer: stack neatly */
@media (max-width: 640px){
  .footer-inner{ flex-direction: column; align-items:flex-start; gap:.4rem; }
  .social{ gap:.8rem; flex-wrap:wrap; }
}
/* --- Mobile nav harden --- */
@media (max-width: 760px){
  .site-header{ z-index: 3000; } /* keep header/nav above everything */
  .primary-nav .nav-list{
    display: none;                /* closed by default */
    position: fixed;              /* detach from layout to avoid "stuck" */
    top: 56px;                    /* just below header */
    right: 14px;
    width: min(88vw, 320px);
    max-height: calc(100dvh - 72px);
    overflow: auto;
    padding: .75rem;
    gap: .4rem;
    flex-direction: column;
    background: rgba(16,22,31,.98);
    border: 1px solid #1a2433;
    border-radius: .8rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
    z-index: 3100;
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  .primary-nav .nav-list.open{ display: flex; }
  .primary-nav .nav-list a{ display:block; padding:.6rem .5rem; }
}

/* Make the sticky table controls sit UNDER the menu */
@media (max-width: 760px){
  .table-controls{ z-index: 1000; }
}