/* Pryzm Optics – clean, responsive */
* { box-sizing: border-box; }
:root { --bg:#0f0f10; --fg:#f4f4f5; --muted:#c9c9cf; --accent:#e11d48; --card:#17181a; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--accent); }
.container { max-width: 1500px; padding: 0px; margin: 0 auto; }
.nav { display:flex; align-items:center; justify-content:space-between; padding: 18px 0; position: sticky; top:0; background: rgba(15,15,16,0.85); backdrop-filter: blur(8px); z-index: 10; }
.brand { font-weight: 700; letter-spacing: 0.06em; font-size: 20px; }
.menu a { margin: 0 12px; opacity:.9 }
.cta { padding:10px 14px; border-radius: 999px; background:var(--accent); color:white; }

/* HERO as background with overlayed text */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: url('./images/hero.png') center/cover no-repeat;
  color: white;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.35));
}
.hero .hero-text {
  position: absolute;
  top: 20%;   /* adjust this % to move vertically */
  left: 10%;  /* adjust horizontally */
}
.hero .hero-text h1 { font-size: clamp(32px, 6vw, 56px); line-height:1.05; margin: 0 0 10px; }
.hero .hero-text p { color: #e9e9ee; margin: 0 0 18px; }

.section { padding: 32px 0; }
.grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; }
.card { background:var(--card); border: 1px solid #262729; border-radius: 18px; padding:16px; transition:.2s transform; }
.card:hover { transform: translateY(-2px); }
.card .thumb { border-radius:12px; aspect-ratio: 4/3; margin-bottom:10px; background-size:cover; background-position:center; }
.price { color: var(--muted); font-size:14px; }

.footer { color: var(--muted); padding: 48px 0; text-align:center; border-top:1px solid #262729; margin-top: 48px; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid #323336; color: #f5f5f7; background: rgba(0,0,0,.25); font-size:12px; }

.split { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
input, textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #2a2b2e; background:#121315; color:var(--fg); }
label { display:block; margin:10px 0 6px; color:var(--muted); }
button { padding:12px 16px; border-radius:12px; border: none; background: var(--accent); color: white; cursor: pointer; }

@media (max-width: 860px) {
  .container { padding: 16px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .nav { position: sticky; }
  .hero { min-height: 60vh; }
}