/* ===================================================================
   Global (INDEX ONLY)
   - Base palette + typography for marketing & listing pages
   =================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    background-color: #fff;
    color: #000;
  }

  body {
    background-color: #fff;
    color: #f6f9fc;
  }
}


:root{
  --bg:#f6f9fc;
  --text:#0b1220;
  --muted:#556070;
  --primary:#0d1b2a;
  --accent:#0ea5e9;
  --btn:#0f172a; /* near-black */
  
  color-scheme: light;
  background-color: var(--bg);
  color: var(--text);
}


*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:#f6f9fc;
}
.container{ max-width:1200px; margin:0 auto; padding:24px 20px 80px }

/* ===================================================================
   Header
   =================================================================== */
.header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 8px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:600 }
.logo{ width:28px; height:28px; border-radius:8px; background:#0f172a; box-shadow:0 6px 14px rgba(15,23,42,.25) }
.nav{ display:flex; align-items:center; gap:28px }
.nav .link{ 
    color:#0f172a; 
    text-decoration:none; 
    opacity:.85; 
    font-weight:500 }
.nav a:hover{ opacity:1 }
.cta{
    padding:10px 16px; 
    border-radius:12px; 
    background: #0f172a; 
    color: white; 
    text-decoration:none; 
    font-weight:600; 
    box-shadow:0 8px 24px rgba(15,23,42,.25)
}


.headerMobile{
    display: none;
}
.headerMobile .cta{
    color: red;
    background: red;
}


/* ===================================================================
   Hero
   =================================================================== */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; margin-top:80px }
.badge{ display:inline-flex; align-items:center; gap:10px; background:#ffffff; border:1px solid rgba(15,23,42,.08); padding:10px 14px; border-radius:999px; box-shadow:0 8px 30px rgba(2,6,23,.06) }
.badge .star{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:999px; background:#ffe9a3 }
.badge span{ font-weight:600; color:#374151 }
h1{ font-size:clamp(36px,7vw,72px); line-height:1.02; margin:18px 0 12px; letter-spacing:-.02em }
.lead{ font-size:18px; line-height:1.7; color:#475569; max-width:620px }
.actions{ display:flex; gap:14px; margin:26px 0 36px }
.btn{ padding:14px 20px; border-radius:14px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:10px }
.btn-primary{
    background:var(--btn); 
    color:#fff; 
    box-shadow:0 10px 30px rgba(15,23,42,.25) }
.btn-ghost{ background:#fff; border:1px solid rgba(2,6,23,.08); color:#0f172a; box-shadow:0 8px 24px rgba(2,6,23,.04) }
.stats{ display:flex; gap:36px; flex-wrap:wrap }
.stat h3{ margin:0; font-size:28px }
.stat small{ display:block; margin-top:6px; color:#6b7280 }

/* ===================================================================
   Image card
   =================================================================== */
.image-card{
  position:relative; border-radius:28px; overflow:hidden; background:#fff;
  box-shadow:0 10px 30px rgba(2,6,23,.06), inset 0 0 0 1px rgba(2,6,23,.05)
}
.image-wrap{ aspect-ratio:4 / 3 }
.image-card img{ width:100%; height:100%; object-fit:cover; display:block }

/* ===================================================================
   Floating help button
   =================================================================== */
.help{
  position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:#0f172a; color:#fff; font-weight:800;
  box-shadow:0 10px 26px rgba(2,6,23,.35)
}

/* ===================================================================
   Product listing (cards) on index
   =================================================================== */
.products{ margin:80px }
.products .head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:50px }
.products .head h2{ margin:0; font-size:32px; letter-spacing:-.01em }
.products .grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px }
.product-card{
  background:#fff; border-radius:20px;
  box-shadow:0 8px 28px rgba(2,6,23,.06), inset 0 0 0 1px rgba(2,6,23,.05);
  overflow:hidden;
}
.product-media{ position:relative; aspect-ratio:1 / 1; background:#f5f7fb }
.product-media img{ width:100%; height:100%; object-fit:cover; display:block }
.product-body{ padding:16px }
.product-title{ margin:0 0 8px; font-size:18px; font-weight:700 }
.meta{ display:flex; align-items:center; gap:10px; color:#6b7280; font-size:13px }
.meta .star{ width:16px; height:16px; border-radius:4px; background:#ffcc4d; display:inline-block }
.price-row{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.price-wrap{ display:flex; align-items:center; gap:6px }
.from-rotated{ font-size:10px; letter-spacing:-0.1em; text-transform:uppercase; color:#6b7280; display:inline-block; transform:rotate(-90deg); transform-origin:center }
.price{ font-weight:800; font-size:18px }
.card-actions{ display:flex; gap:10px; margin-top:14px }
.card-btn{
  flex:1; padding:10px 12px; border-radius:999px; font-weight:700; font-size:14px;
  background:#fff; border:1px solid rgba(2,6,23,.1); color:#0f172a; text-decoration:none; text-align:center;
}
.card-btn.primary{ background:#0f172a; color:#fff; box-shadow:0 8px 20px rgba(15,23,42,.18) }

/* ===================================================================
   Search (index)
   =================================================================== */
.products .head{ align-items:center }
.search{
  display:flex; align-items:center; gap:8px;
  background:transparent; padding:6px; border-radius:999px;
  border:1px solid rgba(2,6,23,.1);
}
.search input{ border:0; outline:0; padding:10px 12px; font-size:14px; min-width:220px }
.search button{
  border:0; padding:10px 14px; border-radius:999px; font-weight:700;
  background:#0f172a; color:#fff; cursor:pointer;
}
/* ===================================================================
   Responsive (index)
   =================================================================== */
/* 2XL — ultra wide */
/* LG — laptops */
/* MD — stack hero and insert image between text and buttons */
/* =================================================================== */
/* Responsive Styles — MOBILE ONLY (≤ 840px) */
/* =================================================================== */

@media (max-width: 840px) {
  /* -------- Header navigation (mobile hamburger menu) -------- */

  .headerMobile{ display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:16px; 
    padding:6px 8px }
    
    .headerMobile .nav .cta {
  background: none !important;     /* remove default button background */
  padding: 0 !important;           /* remove padding */
  box-shadow: none !important;     /* remove shadow if any */
  border: none !important;         /* remove border */
  display: flex;
  align-items: center;
}

.headerMobile .nav .cta img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}


  .header {display: none; }
  .nav {
    position: relative;
    top: 14px;
    right: 14px;
    z-index: 1000;
    display: grid;
    gap: 10px;
  }

  .nav:focus-within a {
    display: block;
  }
  .nav a:focus,
  .nav:focus-within a:first-child {
    display: inline-block;
  }
  .nav a:nth-child(n + 2) {
    min-width: 240px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(2, 6, 23, 0.08);
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.12);
  }
  .nav a.cta {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  }

  /* -------- Hero section reflow: Image BEFORE paragraph -------- */
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
    text-align: left;
  }
  .hero > div:first-child {
    display: contents;
  }
  .hero > .badge { order: 1; }
  .hero > h1 { order: 2; }
  .hero > .image-card { 
    order: 3;
    margin: 16px 0;
    border-radius: 24px;
  }
  .hero > .lead { order: 4; }
  .hero > .actions { order: 5; }
  .hero > .stats { order: 6; }

  .image-wrap {
    aspect-ratio: 4 / 3;
  }

  /* -------- Products: 1 column full-width cards with margin -------- */
  .products {
    margin: 40px 16px;
  }
  .products .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .product-card {
    width: 100%;
    margin: 0 auto;
    max-width: 94%; /* leave ~3% margin on each side */
  }
}