/* styles extracted from original index.html */
:root{
  --content-width:1100px;
  --accent:#1e90ff; /* primary accent for buttons/highlight */
  --bg:#0f1113; /* page background */
  --panel:#0b0c0e; /* slightly lighter panel */
  --card:#0b0c0f;
  --text:#e6eef6; /* main text */
  --muted:#9aa6b2; /* secondary text */
  --border:#22262a; /* borders */
}
body{font-family:Inter, Arial, Helvetica, sans-serif;margin:0;color:var(--text);background:var(--bg);line-height:1.6}
header{padding:24px 40px;display:flex;align-items:center;justify-content:space-between}
.site-title a{font-size:24px;color:var(--text);text-decoration:none;font-weight:600}
nav{margin-left:40px}
nav a{margin:0 12px;color:var(--muted);text-decoration:none}
/* active link in header */
nav a.active{background:var(--accent);color:#fff;padding:8px 12px;border-radius:4px}
.hero{display:block;margin:0 auto;max-width:var(--content-width);padding:24px}
.hero img{width:100%;height:auto;display:block}
main{max-width:var(--content-width);margin:0 auto;padding:24px}
h3,h2{text-align:center;color:var(--text)}
p{margin:16px 0;color:var(--muted)}
.center{text-align:center}
ul{margin:8px 0 24px 1.2em}
.gallery{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.gallery figure{margin:0;text-align:center}
.gallery img{border:1px solid var(--border)}
footer{background:transparent;padding:32px 40px;margin-top:40px}
.columns{display:flex;gap:24px;max-width:var(--content-width);margin:0 auto}
.col{flex:1}
@media(max-width:800px){.columns{flex-direction:column}}

/* Product page shared styles */
.product-container{max-width:900px;margin:40px auto;padding:0 16px}
.product-grid{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.product-image{width:320px;height:320px;object-fit:contain;border:1px solid var(--border);padding:8px;background:transparent;display:block;margin:0 auto}
.product-intro{line-height:1.6;color:var(--text)}
.feature-list{margin-top:12px;color:var(--muted)}
.specs{width:100%;border-collapse:collapse;margin-top:18px}
.specs th{text-align:left;padding:10px 12px;background:rgba(255,255,255,0.03);width:40%;vertical-align:top;color:var(--text)}
.specs td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--muted)}
@media (max-width:640px){.product-grid{flex-direction:column}.specs th{width:100%;display:block}.specs td{display:block}}

/* small tweaks for lists and headings to be readable */
h1,h2,h3{color:var(--text)}
li{color:var(--muted)}
a{color:var(--accent)}
/* ensure tables and panels contrast */
table.specs tbody tr:nth-child(odd) td{background:transparent}