:root{
  --bg:#0b1226; --text:#e2e8f0; --muted:#94a3b8;
  --brand:#60a5fa; --brand2:#22d3ee; --panel:#111827; --border:#1f2937;
}

/* SITE-WIDE BACKGROUND: your hero image + dark overlay */
body{
  margin:0; color:var(--text); font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6;
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.6)),
    url("../img/bg-hero.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #0b1226;
}
@media (max-width: 768px){ body{ background-attachment: scroll; } }

.container{ max-width:1100px; margin:0 auto; padding:0 1rem; }
a{ color:var(--brand); text-decoration:none; }
/* Header / nav */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:rgba(10,15,30,.5); border-bottom:1px solid var(--border); }
.nav{ height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:900; letter-spacing:.6px; color:var(--text); }
nav a{ margin-left:1rem; color:var(--text); }
nav a.btn{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#081022; padding:.5rem .9rem; border-radius:9999px; font-weight:800; }

/* Hero */
.hero{ padding:5rem 0 3rem; border-bottom:1px solid var(--border); }
.hero-inner{ text-align:center; }
.hero h1{ font-size:clamp(2rem,5vw,3rem); margin:.2rem 0; }
.hero p{ color:var(--muted); font-size:1.15rem; }
.underline{ background:linear-gradient(90deg,rgba(96,165,250,.5),rgba(34,211,238,.5)); padding:0 .25rem; border-radius:.35rem; }

/* Sections */
.section{ padding:3rem 0; }
.section-alt{ background:rgba(17,24,39,.55); border-block:1px solid var(--border); }
h2{ margin:0 0 1rem; font-size:1.8rem; }
h3{ margin:.25rem 0 .6rem; }

/* Grid/cards */
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(12,1fr); }
.card,.ph{ grid-column:span 12; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:1rem; }
.gallery .ph{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--muted); }
@media(min-width:720px){ .card,.ph{ grid-column:span 6; } }
@media(min-width:980px){ .card,.ph{ grid-column:span 3; } }

/* Form */
.form{ display:grid; gap:.85rem; }
label{ display:grid; gap:.35rem; font-weight:700; }
input,textarea{ background:#0b1226; color:var(--text); border:1px solid #253046; border-radius:12px; padding:.6rem .75rem; }
input:focus,textarea:focus{ outline:2px solid var(--brand); border-color:var(--brand); }

.btn{ display:inline-block; padding:.65rem 1rem; border-radius:9999px; background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#0b1226; font-weight:800; }
.btn-lg{ padding:.9rem 1.25rem; font-size:1.05rem; }
.small{ color:var(--muted); font-size:.9rem; }
.site-footer{ border-top:1px solid var(--border); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; padding:1rem 0; color:var(--muted); }

/* Chips */
.chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ background:#0b1226; border:1px solid #253046; color:#e2e8f0; padding:.4rem .7rem; border-radius:9999px; cursor:pointer; }
.chip input{ margin-right:.4rem; }

/* Swatches (flakes) */
.swatch-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr); }
@media(min-width:720px){ .swatch-grid{ grid-template-columns:repeat(4,1fr); } }
.swatch{ position:relative; cursor:pointer; border-radius:12px; overflow:hidden; border:2px solid transparent; min-height:94px; background:#111827; display:flex; align-items:flex-end; }
.swatch[data-selected="true"]{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(96,165,250,.25); }
.swatch .label{ width:100%; padding:.4rem .5rem; font-size:.85rem; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent); color:#e5e7eb; text-shadow:0 1px 2px rgba(0,0,0,.6); }

/* Solid picker */
.solid-row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.solid-preview{ width:56px; height:32px; border-radius:8px; border:1px solid #253046; }
.badge{ padding:.3rem .5rem; background:#111827; border:1px solid #253046; border-radius:8px; color:#e2e8f0; }

/* Photo thumbs */
.thumbs{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.thumb{ width:92px; height:92px; border-radius:10px; overflow:hidden; border:1px solid #253046; background:#0b1226; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }