:root {
  --bg:#0f0b1a;
  --card:#121026;
  --accent:#0ea5e9;
  --text:#eef2f7;
  --muted:#9aa3b2;
  --maxw:1100px;
}
* { box-sizing: border-box; }
body {
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg), #190f2b 80%);
  color:var(--text);
  line-height:1.45;
}
.container {
  max-width:var(--maxw);
  margin:48px auto;
  padding:24px;
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}
.brand {
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:var(--text);
    }
.logo {
      width:48px;
      height:48px;
      border-radius:8px;
      background:linear-gradient(135deg,#2d2a4d,#6b4ca4);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:18px;
      color:white;
      box-shadow:0 4px 18px rgba(0,0,0,.6);
}
nav a {
  color:var(--muted);
  text-decoration:none;
  margin-left:18px;
  font-size:15px;
}
nav a.active { color:var(--accent); }
.hero{
      display:grid;
      grid-template-columns:1fr 360px;
      gap:var(--gap);
      align-items:center;
      margin-bottom:36px;
    }
    .hero .kicker{
      color:var(--accent);
      font-weight:700;
      letter-spacing:.06em;
      font-size:13px;
      margin-bottom:8px;
    }
    .hero h1{
      margin:0 0 12px 0;
      font-size:clamp(28px,4vw,40px);
      color:var(--text);
    }
    .hero p{ margin:0; color:var(--muted); max-width:60ch; }
    .fact-card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.04);
      padding:20px;
      border-radius:10px;
      text-align:center;
      box-shadow: 0 6px 20px rgba(0,0,0,.45);
    }
h1 { font-size:clamp(28px,4vw,40px); margin:0 0 16px; }
p  { color:var(--muted); max-width:65ch; }
.card {
  background:var(--card);
  padding:20px;
  border-radius:10px;
  margin-bottom:20px;
}
.fact-card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.04);
      padding:20px;
      border-radius:10px;
      text-align:center;
      box-shadow: 0 6px 20px rgba(0,0,0,.45);
    }
.fact-card strong{display:block;font-size:22px;color:var(--text)}
footer {
  margin-top:60px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
/* PRODUCTS GRID */
    .grid {
      display:grid;
      grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
      gap: var(--gap);
      margin-top:12px;
    }

    .product {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.04);
      padding:14px;
      border-radius:10px;
      cursor: pointer;
      transition: transform .12s, box-shadow .12s;
      position:relative;
    }
    .product:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.6); }

    .thumb {
      height:110px;
      border-radius:8px;
      background-size:cover;
      background-position:center;
      margin-bottom:12px;
    }
    .p-title { font-size:16px; margin:0 0 6px; color:var(--text) }
    .p-sub { margin:0; color:var(--muted); font-size:13px }

    /* Inner list box (hidden by default) */
    .inner-box {
      position:absolute;
      left:14px;
      right:14px;
      top: calc(100% + 10px);
      z-index: 40;
      background: #0e0b16;
      border:1px solid rgba(255,255,255,0.06);
      padding:10px;
      border-radius:8px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.6);
      display:none;
      font-size:14px;
    }
    .inner-box ul { list-style:none; margin:0; padding:0; max-height:220px; overflow:auto; }
    .inner-box li { padding:8px 10px; border-radius:6px; color:var(--text); display:flex; justify-content:space-between; gap:8px; align-items:center; }
    .inner-box li + li { margin-top:8px; border-top:1px dashed rgba(255,255,255,0.02); }
    .inner-box li:hover { background: linear-gradient(90deg, rgba(14,165,233,0.06), rgba(255,255,255,0.02)); cursor:pointer; }

    .variant-meta { color:var(--muted); font-size:13px; }

    /* Simple selected/active state */
    .product.active { outline: 2px solid rgba(14,165,233,0.12); }

    /* responsive */
	.video-link{
      display:block;padding:8px 12px;
      background:var(--accent);color:white;
      border-radius:6px;font-size:15px;text-decoration:none;
    }
    .video-link:hover{background:#0284c7;}
    @media(max-width:640px){.thumb{height:90px}}