/* ============================================================= */
/*  GLOBAL & HERO (unchanged – keep your original styles)      */
/* ============================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

/* Custom font for logo/brand elements */
@font-face {
  font-family: 'NicoMoji';
  src: url('fonts/NicoMoji-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html,body{
  height:100%;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  color:#1d1d1f;
  background:linear-gradient(135deg,#f5f5f7 0%,#eaeaea 100%);
}

/* Announcement, nav, hero, buttons … (your original code) */
.announcement-bar{ background:#000; color:#fff; text-align:center; padding:.5rem 1rem; font-size:.875rem; font-weight:500; }
.announcement-bar .shipping-date{ color:#d4af37; }
/* … keep everything you already have … */

/* ============================================================= */
/*  FULL WIDTH IMAGE ABOVE SPECIFICATIONS                       */
/* ============================================================= */
.full-width-image{
  width:100%;
  height:60vh;
  background-image:url('images/img1.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ============================================================= */
/*  SPECIFICATIONS – BLACK THEME, RESPONSIVE                    */
/* ============================================================= */
.specifications{
  background:#000;               /* <-- BLACK on every device */
  color:#fff;
  padding:6rem 2rem;
  text-align:center;
  position:relative;
  --bg-transform:scale(0.1) rotate(0deg);
}
.specifications::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background-image:url('images/specifications/img.jpeg');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0.05;
  transform:var(--bg-transform);
  transition:transform 0.3s ease-out;
  z-index:1;
}
.specifications .container{
  max-width:960px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* Title */
.specifications h2{
  font-family:'NicoMoji', serif;
  font-size:2.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:2.5rem;
  color:#fff;
  position:relative;
}
.specifications h2::after{
  content:'';
  position:absolute;
  bottom:-1rem; left:50%; transform:translateX(-50%);
  width:80px; height:2px;
  background:#d4af37;
  border-radius:1px;
}

/* List container */
.specs-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Each row */
.spec-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2rem 1.5rem;
  position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.spec-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(212,175,55,.15);
}

/* Horizontal line (except last) */
.spec-item::after{
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(212,175,55,.3) 50%,transparent 100%);
}
.spec-item:last-child::after{ display:none; }

/* Name (gold) */
.spec-name{
  font-size:1.1rem;
  font-weight:600;
  color:#d4af37;
  flex:0 0 40%;
  text-align:left;
}

/* Value (white) */
.spec-value{
  font-size:1rem;
  color:#fff;
  flex:1;
  text-align:right;
}

/* ============================================================= */
/*  RESPONSIVE – MOBILE (≤768px)                               */
/* ============================================================= */
@media (max-width:768px){
  .specifications{ padding:4rem 1rem; }
  .specifications h2{ font-size:2rem; margin-bottom:2rem; }
  .specifications{ --bg-transform:scale(1) rotate(0deg); }

  .spec-item{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    padding:1.8rem 1.2rem;
  }
  .spec-name{
    font-size:1rem;
    flex:none;
  }
  .spec-value{
    font-size:.95rem;
    text-align:left;
  }
}

/* ============================================================= */
/*  DESKTOP – ROTATE BACKGROUND IMAGE                           */
/* ============================================================= */
@media (min-width:769px){
  .specifications{ --bg-transform:scale(1) rotate(90deg); }
  .specifications::before{
    background-size:contain;
  }
}

/* ============================================================= */
/*  KEEP YOUR ORIGINAL HERO / BUTTON STYLES BELOW               */
/* ============================================================= */
/* (copy-paste the rest of your original CSS unchanged) */
.hero{ position:relative; width:100%; height:calc(100vh - calc(2*.5rem + 1.5*.875rem)); min-height:600px; overflow:hidden; background:#f5f5f7; }
.hero-wrapper{ position:relative; width:100%; height:100%; }
.hero-bg{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }
.hero-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom,rgba(245,245,247,0) 0%,rgba(245,245,247,.9) 70%); pointer-events:none; }
.hero-text{ position:absolute; bottom:4rem; left:2rem; max-width:500px; color:#1d1d1f; text-shadow:0 1px 2px rgba(0,0,0,.05); display:flex; align-items:flex-end; gap:1rem; }
.hero-text h2{ font-size:2.875rem; font-weight:700; margin-bottom:1.25rem; letter-spacing:.02em; line-height:1.2; }
.hero-text p{ font-size:1.25rem; color:#6e6e73; line-height:1.5; margin-bottom:.5rem; writing-mode:vertical-rl; text-orientation:mixed; }
.hero-cta{ position:absolute; bottom:4rem; right:2rem; display:flex; gap:1rem; }
.btn{ text-decoration:none; padding:.6rem 1.75rem; border-radius:38px; font-weight:300; font-size:.95rem; display:inline-flex; align-items:center; justify-content:center; transition:all .2s ease; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,.1); }
.btn-primary{ background:#000; color:#fff; }
.btn-primary:hover{ background:#333; box-shadow:0 4px 8px rgba(0,0,0,.2); }
.btn-secondary{ background:transparent; color:#000; border:1px solid #000; }
.btn-secondary:hover{ background:rgba(0,0,0,.1); box-shadow:0 4px 8px rgba(0,0,0,.1); }
.highlight{ color:inherit; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.1em; text-decoration-color:#d4af37; }
.phrase{ white-space:nowrap; }

/* Mobile hero tweaks (your original) */
@media (max-width:768px){
  .hero{ height:calc(100vh - calc(2*.5rem + 1.5*.875rem)); min-height:650px; }
  .hero-overlay{ background:linear-gradient(to bottom,rgba(245,245,247,0) 40%,rgba(245,245,247,1) 95%); }
  .hero-text{ bottom:15%; left:50%; transform:translateX(-50%); max-width:90%; text-align:center; }
  .hero-text h2{ font-size:2.25rem; }
  .hero-text p{ font-size:.9rem; }
  .hero-cta{ bottom:6%; left:50%; transform:translateX(-50%); flex-direction:row; gap:1rem; }
  .hero-cta .btn{ font-size:.8rem; padding:.5rem 1.25rem; }
}