/* Homepage-specific sections only. Header/nav/footer/buttons/product-cards
   live in base.css and are shared across every page. */

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:60px 4vw 80px; align-items:center; max-width:1400px; margin:0 auto;
}
/* .hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:rgba(37,99,235,0.08); color:var(--cobalt);
  font-family:'Montserrat', sans-serif; font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:7px 14px; border-radius:99px; margin-bottom:26px; border:1px solid rgba(37,99,235,0.2);
} */
.hero h1{
  font-family:'Montserrat', sans-serif; font-weight:900; font-size:clamp(40px,5.2vw,68px); line-height:0.98; letter-spacing:-0.03em; margin:0 0 22px;
}
.hero h1 .accent{color:var(--cobalt);}
.hero p{font-size:16.5px; color:var(--text-soft); line-height:1.65; max-width:440px; margin-bottom:32px;}
.hero-actions{display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap;}
/* .hero-rating{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-soft);}
.hero-rating .stars{color:#F5A623; letter-spacing:1px;} */

.hero-visual{position:relative;}
.hero-slider{
  display:block; aspect-ratio:4/5; border-radius:20px; position:relative; overflow:hidden;
  box-shadow:0 24px 60px -12px rgba(15,23,42,0.35); background:linear-gradient(155deg,#151a2c 0%, var(--ink) 55%, #1c2438 100%);
  cursor:pointer;
}
.hero-slider .grain{position:absolute; inset:0; z-index:1; opacity:0.5; background-image:radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px); background-size:5px 5px; pointer-events:none;}
.hero-slider-track{position:absolute; inset:0;}
.hero-slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .6s ease; z-index:0;
}
.hero-slide.active{opacity:1; z-index:2;}
.hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-slide svg{width:52%;}
.hero-slider-dots{
  position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:3;
}
.hero-slider-dots span{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.4); transition:background .2s ease, transform .2s ease;
}
.hero-slider-dots span.active{background:#fff; transform:scale(1.3);}
.hero-badge{
  position:absolute; top:20px; left:20px; z-index:3; background:rgba(255,255,255,0.1); color:#fff; backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.18); padding:6px 12px; border-radius:99px; font-family:'Montserrat', sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:0.06em;
}
.hero-float-card{
  position:absolute; bottom:-24px; right:-16px; background:var(--surface-card); border-radius:16px; padding:16px 18px;
  box-shadow:0 16px 36px -8px rgba(15,23,42,0.2); display:flex; align-items:center; gap:14px; max-width:250px;
  border:1px solid var(--border);
}
.hero-float-card .swatch{width:44px; height:44px; border-radius:10px; background:var(--surface-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;}
.hero-float-card .info b{display:block; font-size:13.5px; font-weight:700; margin-bottom:2px;}
.hero-float-card .info .meta{font-size:11.5px; color:var(--text-faint); margin-bottom:6px;}
.hero-float-card .price{font-family:'Montserrat', sans-serif; font-weight:700; color:var(--cobalt); font-size:14px;}

@media(max-width:900px){ .hero{grid-template-columns:1fr; padding-top:40px;} .hero-float-card{position:static; margin-top:16px; max-width:none;} }

/* ---------- stats bar ---------- */
.stats-bar{background:var(--ink); color:#fff; padding:34px 4vw;}
.stats-grid{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.stats-grid .num{font-family:'Montserrat', sans-serif; font-weight:900; font-size:clamp(24px,3vw,34px); margin-bottom:6px;}
.stats-grid .num.mint{color:var(--emerald);}
.stats-grid .label{font-family:'Montserrat', sans-serif; font-size:10.5px; letter-spacing:0.08em; color:#a6acc2; text-transform:uppercase;}
@media(max-width:700px){ .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:28px;} }

/* ---------- engineered / specs section ---------- */
.engineer{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.engineer-copy ul{list-style:none; padding:0; margin:26px 0 0;}
.engineer-copy li{display:flex; gap:12px; margin-bottom:18px; font-size:14.5px; color:var(--text-soft); line-height:1.55;}
.engineer-copy li .check{
  width:22px; height:22px; border-radius:50%; background:rgba(16,185,129,0.12); color:var(--emerald); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px;
}
.engineer-copy li b{color:var(--ink);}
.matrix-table{background:var(--surface-card); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.matrix-row{display:grid; grid-template-columns:1.2fr 1fr 1fr; padding:16px 20px; border-bottom:1px solid var(--border); align-items:center;}
.matrix-row:last-child{border-bottom:none;}
.matrix-row.head{background:var(--surface-dim); font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint);}
.matrix-row div:first-child{font-size:13px; font-weight:600;}
.matrix-row .std{font-size:13px; color:var(--text-faint);}
.matrix-row .us{font-family:'Montserrat', sans-serif; font-size:12.5px; font-weight:700; color:var(--emerald);}
@media(max-width:900px){ .engineer{grid-template-columns:1fr;} }

/* ---------- ugc gallery ---------- */
.ugc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:34px;}
.ugc-tile{aspect-ratio:4/5; border-radius:16px; background:var(--surface-dim); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.ugc-tile .tag-handle{position:absolute; bottom:10px; left:10px; background:rgba(15,23,42,0.7); color:#fff; font-family:'Montserrat', sans-serif; font-size:9.5px; padding:4px 8px; border-radius:6px;}
.review-line{display:flex; align-items:center; gap:14px; font-size:14px; color:var(--text-soft); flex-wrap:wrap;}
.review-line .stars{color:#F5A623;}
.review-line b{color:var(--ink);}
@media(max-width:900px){ .ugc-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- drop teaser ---------- */
.teaser{background:var(--ink); color:#fff; border-radius:24px; margin:0 4vw 80px; padding:56px 5vw; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center;}
.teaser-eyebrow{display:flex; align-items:center; gap:8px; font-family:'Montserrat', sans-serif; font-size:11px; letter-spacing:0.06em; color:var(--emerald); text-transform:uppercase; margin-bottom:14px;}
.teaser-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px rgba(16,185,129,0.2);}
.teaser h2{font-family:'Montserrat', sans-serif; font-weight:900; font-size:clamp(24px,3vw,34px); margin:0 0 14px; letter-spacing:-0.02em; line-height:1.1;}
.teaser p{color:#a6acc2; font-size:14.5px; max-width:460px;}
.teaser-form{display:flex; gap:10px;}
.teaser-form input{flex:1; padding:14px 16px; border-radius:10px; border:none; font-family:'Montserrat', sans-serif; font-size:12.5px; background:rgba(255,255,255,0.08); color:#fff; min-width:0;}
.teaser-form input::placeholder{color:#8890a0;}
.teaser-form button{background:var(--cobalt); color:#fff; border:none; padding:14px 20px; border-radius:10px; font-family:'Montserrat', sans-serif; font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; white-space:nowrap;}
.teaser-note{font-family:'Montserrat', sans-serif; font-size:10.5px; color:#767d94; margin-top:10px; display:block;}
@media(max-width:900px){ .teaser{grid-template-columns:1fr;} .teaser-form{flex-direction:column;} }