:root{
  --black:#050505;
  --black-2:#0d0d0d;
  --card:#121212;
  --gold:#d6b46a;
  --gold-2:#f2d58b;
  --text:#f5f0e8;
  --muted:#cfc6b6;
  --line:rgba(214,180,106,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',Arial,sans-serif;
  background:var(--black);
  color:var(--text);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 7%;
  background:rgba(5,5,5,.72);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(214,180,106,.08);
}
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-img{width:48px;height:48px;object-fit:contain;border-radius:50%}
.logo-text strong{
  display:block;
  font-family:'Playfair Display',serif;
  color:var(--gold);
  letter-spacing:4px;
  font-size:24px;
}
.logo-text span{
  display:block;
  font-size:10px;
  letter-spacing:4px;
  color:var(--text);
  margin-top:-2px;
}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-size:13px;color:var(--muted);transition:.25s}
.nav a:hover{color:var(--gold)}
.nav .insta-btn{
  border:1px solid var(--line);
  color:var(--gold);
  padding:10px 18px;
  border-radius:999px;
}
.hero{
  min-height:100vh;
  padding:150px 7% 80px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:50px;
  background:
    radial-gradient(circle at 80% 20%, rgba(214,180,106,.2), transparent 28%),
    radial-gradient(circle at 12% 85%, rgba(214,180,106,.10), transparent 30%),
    linear-gradient(135deg,#030303,#101010 58%,#000);
  overflow:hidden;
}
.hero-kicker{
  color:var(--gold);
  letter-spacing:5px;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:22px;
}
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(44px,7vw,92px);
  line-height:.94;
  margin-bottom:26px;
}
.hero p{
  color:var(--muted);
  max-width:620px;
  line-height:1.8;
  margin-bottom:34px;
}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  transition:.28s;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),#b58a38);
  color:#080808;
}
.btn-dark{
  border:1px solid var(--line);
  color:var(--gold);
}
.btn:hover{transform:translateY(-3px);opacity:.92}
.hero-visual{
  position:relative;
  min-height:440px;
  border-radius:36px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(214,180,106,.08),rgba(255,255,255,.02)),
    #090909;
  box-shadow:0 30px 100px rgba(0,0,0,.6);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:12%;
  background:url('../assets/images/logo/logo-nox.png') center/contain no-repeat;
  opacity:.22;
  filter:drop-shadow(0 0 30px rgba(214,180,106,.35));
}
.hero-visual::after{
  content:"NOX";
  position:absolute;
  bottom:30px;
  right:34px;
  font-family:'Playfair Display',serif;
  color:rgba(214,180,106,.22);
  font-size:110px;
  line-height:1;
}
.section{padding:92px 7%}
.section-title{text-align:center;margin-bottom:48px}
.section-title span{
  color:var(--gold);
  letter-spacing:5px;
  text-transform:uppercase;
  font-size:12px;
}
.section-title h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(34px,5vw,60px);
  margin-top:10px;
}
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.card{
  background:linear-gradient(180deg,#171717,#0b0b0b);
  border:1px solid rgba(214,180,106,.18);
  border-radius:30px;
  overflow:hidden;
  transition:.35s;
}
.card:hover{
  transform:translateY(-10px);
  border-color:rgba(214,180,106,.62);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.card-img{
  height:360px;
  overflow:hidden;
  background:#111;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:26px}
.card-brand{
  color:var(--gold);
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:12px;
}
.card h3{
  font-family:'Playfair Display',serif;
  font-size:29px;
  margin:12px 0;
}
.card p{color:var(--muted);margin-bottom:14px}
.price{
  display:block;
  color:var(--gold-2);
  font-size:25px;
  font-weight:700;
  margin-bottom:22px;
}
.about{
  background:#0a0a0a;
  border-top:1px solid rgba(214,180,106,.08);
  border-bottom:1px solid rgba(214,180,106,.08);
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.feature{
  padding:34px;
  background:#111;
  border:1px solid rgba(214,180,106,.15);
  border-radius:26px;
}
.feature h3{color:var(--gold);margin-bottom:12px;font-size:20px}
.feature p{color:var(--muted);line-height:1.7}
.footer{
  padding:80px 7%;
  text-align:center;
  background:
    radial-gradient(circle at center, rgba(214,180,106,.13), transparent 38%),
    #030303;
}
.footer-logo{width:90px;margin:0 auto 24px;border-radius:50%}
.footer h2{
  font-family:'Playfair Display',serif;
  color:var(--gold);
  font-size:45px;
  letter-spacing:5px;
}
.footer .mystery{letter-spacing:5px;font-size:12px;margin:10px 0 24px;color:var(--text)}
.footer p{color:var(--muted);margin-bottom:26px}
.footer a{color:var(--gold);font-weight:700}
.footer small{display:block;color:#8e8577;margin-top:34px}
.product-page{
  padding:150px 7% 90px;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:52px;
  min-height:100vh;
  background:linear-gradient(135deg,#040404,#101010,#000);
}
.product-gallery{
  border:1px solid var(--line);
  border-radius:34px;
  overflow:hidden;
  background:#111;
  min-height:620px;
}
.product-gallery img{width:100%;height:100%;object-fit:cover}
.product-content .brand-line{
  color:var(--gold);
  letter-spacing:5px;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:16px;
}
.product-content h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(42px,6vw,76px);
  line-height:.98;
  margin-bottom:22px;
}
.product-desc{
  color:var(--muted);
  line-height:1.8;
  margin-bottom:26px;
}
.product-price{
  color:var(--gold-2);
  font-size:34px;
  font-weight:800;
  margin-bottom:8px;
}
.volume{color:var(--muted);margin-bottom:30px}
.specs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:30px 0;
}
.spec{
  padding:18px;
  border-radius:18px;
  background:#111;
  border:1px solid rgba(214,180,106,.14);
}
.spec strong{display:block;color:var(--gold);font-size:13px;margin-bottom:6px}
.spec span{color:var(--muted)}
.notes{
  margin:28px 0;
  display:grid;
  gap:14px;
}
.note-row{
  padding:18px;
  border-left:2px solid var(--gold);
  background:rgba(255,255,255,.03);
}
.note-row strong{color:var(--gold);display:block;margin-bottom:6px}
.note-row span{color:var(--muted)}
.back-link{display:inline-block;margin-top:24px;color:var(--gold)}
@media(max-width:920px){
  .nav a:not(.insta-btn){display:none}
  .hero,.product-page{grid-template-columns:1fr}
  .hero-visual{min-height:320px}
  .catalog-grid,.feature-grid{grid-template-columns:1fr}
  .card-img{height:320px}
  .product-gallery{min-height:420px}
  .specs{grid-template-columns:1fr}
}
@media(max-width:520px){
  .header{padding:16px 5%}
  .hero,.section,.product-page,.footer{padding-left:5%;padding-right:5%}
  .hero{padding-top:130px}
  .insta-btn{display:none}
  .footer h2{font-size:34px}
}