:root{
  --graphite:#3a434c;
  --graphite-2:#2c333a;
  --steel:#3a434c;
  --steel-light:#6b747c;
  --paper:#ffffff;
  --paper-dark:#eef0f2;
  --citrus:#e2231a;
  --citrus-dark:#b81810;
  --citrus-light:#ff6a4d;
  --line:#dcdfe2;
  --line-dark:#4b545c;
  --text-dark:#1c2024;
  --text-light:#f0f1f3;
  --text-muted:#a5abb1;
  --radius:2px;
  --plate-grad: linear-gradient(155deg,#525b64 0%,#2c333a 45%,#3a434c 100%);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  background:var(--paper);
  color:var(--text-dark);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0;
  color:var(--text-dark);
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
 
/* ---------- Nameplate / eyebrow signature element ---------- */
.plate{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 16px 6px 14px;
  background:var(--plate-grad);
  color:var(--paper);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:1px;
  position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.2);
}
.plate::before, .plate::after{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #cfd6db, #6b747c 70%);
  box-shadow:inset 0 0 1px rgba(0,0,0,0.6);
  flex:none;
}
.plate .plate-idx{color:var(--citrus-light); font-weight:600;}
 
.section-head{margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,4vw,44px); margin-top:16px; line-height:1.05;}
.section-head p{max-width:560px; color:var(--steel-light); margin-top:14px; font-size:15px;}
 
/* ---------- rivet corners on cards (signature detail) ---------- */
.riveted{position:relative;}
.riveted::before, .riveted::after,
.riveted .rv-b, .riveted .rv-c{
  content:"";
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #b7b2a2 65%, #8b8674 100%);
  box-shadow:0 1px 1px rgba(0,0,0,0.35), inset 0 0 1px rgba(0,0,0,0.4);
  z-index:3;
}
.riveted::before{top:8px; left:8px;}
.riveted::after{top:8px; right:8px;}
.riveted .rv-b{bottom:8px; left:8px;}
.riveted .rv-c{bottom:8px; right:8px;}
 
/* ================= HEADER ================= */
header{position:sticky; top:0; z-index:100;}
.top-bar{
  background:var(--graphite);
  color:var(--text-muted);
  font-size:12.5px;
  border-bottom:1px solid var(--line-dark);
}
.top-bar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  height:38px;
}
.top-bar .left{display:flex; gap:22px; align-items:center;}
.top-bar .right{display:flex; gap:22px;}
.top-bar a:hover{color:var(--citrus-light);}
.top-bar .dot{color:var(--line-dark);}
 
.main-bar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.main-bar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{display:flex; align-items:center; gap:12px;}
.logo-mark{
  width:64px; height:auto;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.logo-mark svg{width:100%; height:auto;}
.logo-text{font-family:'Oswald',sans-serif; font-size:26px; letter-spacing:0.06em; line-height:1;}
.logo-text span{color:var(--citrus);}
.logo-sub{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.16em; color:var(--steel-light); text-transform:uppercase; margin-top:2px;}
 
.main-bar .right{display:flex; align-items:center; gap:22px;}
.phone-link{display:flex; flex-direction:column; align-items:flex-end;}
.phone-link .num{font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:0.02em;}
.phone-link .lbl{font-size:10.5px; color:var(--steel-light); text-transform:uppercase; letter-spacing:0.1em;}
.tg-btn{
  width:42px; height:42px; border-radius:50%;
  background:var(--citrus); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, transform 0.2s;
}
.tg-btn:hover{background:var(--citrus-dark); transform:translateY(-1px);}
.tg-btn svg{width:20px; height:20px;}
 
/* ================= BANNER ================= */
.banner{
  position:relative;
  background:var(--graphite);
  color:var(--text-light);
  overflow:hidden;
  padding:100px 0 0;
}
.banner-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 82% 20%, rgba(232,99,27,0.35), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 34px),
    linear-gradient(160deg,#2c333a 0%, #16191c 100%);
}
.banner-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.1fr 0.9fr;
  gap:40px; align-items:center;
  padding-bottom:60px;
}
.banner-eyebrow{margin-bottom:22px;}
.banner h1{
  font-size:clamp(38px,5.6vw,68px);
  line-height:1.02;
  color:#fff;
}
.banner h1 em{font-style:normal; color:var(--citrus-light);}
.banner p{
  margin-top:22px; max-width:480px;
  color:#c7cdd2; font-size:16px;
}
.banner-ctas{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:1px;
  border:1px solid transparent;
  transition:all .2s;
}
.btn-primary{background:var(--citrus); color:#fff;}
.btn-primary:hover{background:var(--citrus-dark);}
.btn-ghost{border-color:rgba(255,255,255,0.35); color:#fff;}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.06);}
 
.banner-figure{
  position:relative;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.citrus-disc{
  width:100%; max-width:360px; aspect-ratio:1/1;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, #ffcf9e, #ff8a4d 30%, #e2231a 62%, #941009 100%);
  position:relative;
  box-shadow:0 30px 70px rgba(226,35,26,0.28), inset 0 0 0 10px rgba(0,0,0,0.06);
}
.citrus-disc::before{
  content:"";
  position:absolute; inset:14%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,0.16) 0deg 4deg, transparent 4deg 30deg);
}
.citrus-disc::after{
  content:"";
  position:absolute; inset:38%;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff1e8, #ff9a6b 60%, #e2231a 100%);
  box-shadow:inset 0 0 20px rgba(0,0,0,0.15);
}
 
.badge-row{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,0.12);
}
.badge{
  padding:26px 28px;
  border-right:1px solid rgba(255,255,255,0.12);
}
.badge:last-child{border-right:none;}
.badge .num{font-family:'Oswald',sans-serif; font-size:15px; color:var(--citrus-light); letter-spacing:0.06em; margin-bottom:6px; display:block;}
.badge h4{font-size:16px; color:#fff; margin-bottom:6px;}
.badge p{margin:0; font-size:13px; color:#9aa1a7; max-width:280px;}
 
/* ================= PRODUCT SLIDERS ================= */
.catalog{padding:88px 0 20px;}
.cat-section{padding:56px 0; border-bottom:1px solid var(--line);}
.cat-section:first-child{padding-top:0;}
.cat-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; margin-bottom:30px; flex-wrap:wrap;
}
.cat-head h3{font-size:clamp(22px,3vw,30px); margin-top:14px;}
.cat-head .desc{font-size:13.5px; color:var(--steel-light); max-width:420px; margin-top:8px;}
.slider-nav{display:flex; gap:10px;}
.snav-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.snav-btn:hover{background:var(--graphite); border-color:var(--graphite);}
.snav-btn:hover svg{stroke:#fff;}
.snav-btn svg{width:16px; height:16px; stroke:var(--text-dark);}
 
.slider-track{
  display:flex; gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
  scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{display:none;}
 
.card{
  flex:0 0 calc((100% - 4*20px)/5);
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.card-photo{
  position:relative;
  aspect-ratio:1/0.9;
  background:var(--paper-dark);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.card-photo svg{width:58%; height:58%; transition:opacity .25s;}
.card-photo .tag{
  position:absolute; top:10px; left:10px;
  background:var(--graphite); color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 8px;
}
.photo-dots{
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; justify-content:center; gap:6px;
}
.photo-dots button{
  width:6px; height:6px; border-radius:50%;
  border:none; background:#c9c2ae; padding:0;
}
.photo-dots button.active{background:var(--citrus);}
.photo-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.85); border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.card-photo:hover .photo-arrow{opacity:1;}
.photo-arrow.prev{left:8px;} .photo-arrow.next{right:8px;}
.photo-arrow svg{width:12px; height:12px;}
 
.card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-art{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--steel-light); letter-spacing:0.05em;}
.card-name{font-family:'Oswald',sans-serif; font-size:16.5px; text-transform:none; letter-spacing:0; line-height:1.25;}
.specs{list-style:none; margin:2px 0 4px; padding:0; border-top:1px dashed var(--line); padding-top:8px; display:flex; flex-direction:column; gap:4px;}
.specs li{display:flex; justify-content:space-between; font-size:11.5px; color:var(--steel-light);}
.specs li b{font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--text-dark); font-size:11.5px;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px;}
.price{font-family:'Oswald',sans-serif; font-size:19px;}
.price small{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--steel-light); font-weight:400;}
.buy-btn{
  padding:9px 16px;
  background:var(--graphite); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:1px; transition:background .2s;
}
.buy-btn:hover{background:var(--citrus);}
 
/* ================= ABOUT ================= */
.about{background:var(--graphite); color:var(--text-light); padding:96px 0;}
.about .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px;}
.about h2{color:#fff; font-size:clamp(28px,4vw,42px); margin-top:16px;}
.about-lead{color:#c7cdd2; margin-top:20px; font-size:15px; max-width:440px;}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); margin-top:36px; border:1px solid var(--line-dark);}
.stat{background:var(--graphite); padding:22px 18px;}
.stat .n{font-family:'Oswald',sans-serif; font-size:34px; color:var(--citrus-light);}
.stat .l{font-size:11.5px; color:#9aa1a7; text-transform:uppercase; letter-spacing:0.06em; margin-top:6px;}
.about-cols{display:flex; flex-direction:column; gap:28px;}
.about-block{border-left:2px solid var(--citrus); padding-left:20px;}
.about-block h4{color:#fff; font-size:16px; margin-bottom:8px;}
.about-block p{color:#aeb4b9; font-size:14px; margin:0;}
 
/* ================= PAYMENT & WARRANTY ================= */
.info-section{padding:96px 0;}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:10px;}
.info-card{
  background:#fff; border:1px solid var(--line); padding:28px 24px;
}
.info-card .ic{
  width:44px; height:44px; border-radius:50%;
  background:var(--paper-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.info-card .ic svg{width:22px; height:22px; stroke:var(--citrus-dark);}
.info-card h4{font-size:16.5px; margin-bottom:8px; letter-spacing:0;}
.info-card p{font-size:13.5px; color:var(--steel-light); margin:0;}
 
.warranty-wrap{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:center;
  background:var(--paper-dark); border:1px solid var(--line); padding:48px;
}
.warranty-plate{
  background:var(--plate-grad); color:#fff; padding:34px 26px;
  position:relative; text-align:center;
}
.warranty-plate .yrs{font-family:'Oswald',sans-serif; font-size:64px; color:var(--citrus-light); line-height:1;}
.warranty-plate .yrs-lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; margin-top:8px; color:#c7cdd2;}
.warranty-list{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:14px;}
.warranty-list li{display:flex; gap:12px; font-size:14px; color:var(--text-dark);}
.warranty-list li .chk{
  flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--citrus); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; margin-top:1px;
}
 
/* ================= FOOTER ================= */
footer{background:var(--graphite); color:#9aa1a7; padding:64px 0 26px; border-top:4px solid var(--citrus);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-dark);}
.footer-logo{color:#fff; font-family:'Oswald',sans-serif; font-size:22px; letter-spacing:0.05em;}
.footer-logo span{color:var(--citrus);}
.footer-col h5{color:#fff; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; font-family:'IBM Plex Mono',monospace;}
.footer-col a, .footer-col p{display:block; font-size:13.5px; color:#9aa1a7; margin-bottom:10px;}
.footer-col a:hover{color:var(--citrus-light);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px;}
.social-row{display:flex; gap:10px;}
.social-row a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{border-color:var(--citrus); background:var(--citrus);}
.social-row svg{width:15px; height:15px; stroke:#fff;}
 
/* ================= MODAL ================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,23,26,0.72);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff; width:100%; max-width:440px;
  border-top:4px solid var(--citrus);
  position:relative;
}
.modal-head{padding:26px 26px 0;}
.modal-close{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center;
}
.modal-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--steel-light); text-transform:uppercase; letter-spacing:0.1em;}
.modal h3{font-size:21px; margin-top:8px; text-transform:none; letter-spacing:0;}
.modal-body{padding:20px 26px 28px; display:flex; flex-direction:column; gap:14px;}
.field label{display:block; font-size:11.5px; color:var(--steel-light); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; font-family:'IBM Plex Mono',monospace;}
.field input, .field textarea{
  width:100%; border:1px solid var(--line); padding:11px 12px;
  font-family:'Manrope',sans-serif; font-size:14px; background:var(--paper);
}
.field input:focus, .field textarea:focus{outline:2px solid var(--citrus); outline-offset:1px;}
.field textarea{resize:vertical; min-height:70px;}
.field input.invalid{border-color:var(--citrus-dark); background:#fdf4f3;}
.field-error{
  display:none;
  font-size:11.5px; color:var(--citrus-dark);
  margin-top:6px;
}
.field-error.show{display:block;}
.qty-row{display:flex; align-items:center; gap:10px;}
.qty-row button{width:34px; height:34px; border:1px solid var(--line); background:var(--paper); font-size:16px;}
.qty-row input{width:56px; text-align:center; border:1px solid var(--line); padding:8px 0;}
.submit-btn{
  margin-top:6px; padding:14px; background:var(--citrus); color:#fff; border:none;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
}
.submit-btn:hover{background:var(--citrus-dark);}
.form-note{font-size:11.5px; color:var(--steel-light);}
.form-error{
  display:none;
  font-size:12.5px; color:var(--citrus-dark);
  background:#fdeceb; border:1px solid #f6c9c4;
  padding:10px 12px; margin:0;
}
.form-error.show{display:block;}
.submit-btn[disabled]{opacity:0.6; cursor:not-allowed;}
.success-msg{
  display:none; padding:20px 26px 30px; text-align:center;
}
.success-msg.show{display:block;}
.success-msg .ok-circle{
  width:56px; height:56px; border-radius:50%; background:var(--citrus); color:#fff;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:26px;
}
.success-msg h4{font-size:18px; text-transform:none; margin-bottom:8px;}
.success-msg p{font-size:13.5px; color:var(--steel-light); margin:0;}
 
/* ================= RESPONSIVE ================= */
@media (max-width:960px){
  .banner-inner{grid-template-columns:1fr;}
  .banner-figure{order:-1; max-width:260px; margin:0 auto;}
  .about .wrap{grid-template-columns:1fr;}
  .warranty-wrap{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .info-grid{grid-template-columns:1fr;}
}
@media (max-width:1300px){
  .card{flex:0 0 calc((100% - 3*20px)/4);}
}
@media (max-width:1023px){
  .card{flex:0 0 calc((100% - 2*16px)/3);}
  .slider-track{gap:16px;}
}
@media (max-width:640px){
  .top-bar .left{gap:12px;}
  .top-bar .right{gap:12px;}
  .top-bar .wrap{font-size:10.5px;}
  .badge-row{grid-template-columns:1fr;}
  .badge{border-right:none; border-bottom:1px solid rgba(255,255,255,0.12);}
  .footer-grid{grid-template-columns:1fr;}
  .phone-link .num{font-size:15px;}
 
  .wrap{padding:0 16px;}
  .slider-track{gap:10px;}
  .card{flex:0 0 calc(50% - 5px);}
  .card-art{font-size:9.5px;}
  .card-name{font-size:13.5px;}
  .specs li{font-size:10px;}
  .specs li b{font-size:10px;}
  .price{font-size:16px;}
  .buy-btn{padding:8px 10px; font-size:9.5px;}
  .card-body{padding:12px 12px 14px; gap:8px;}
  .photo-arrow{width:22px; height:22px;}
  .card-foot{flex-direction:column; align-items:stretch; gap:8px;}
  .buy-btn{width:100%; text-align:center;}
  .cat-head{gap:12px;}
}
 
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}