/* Yash Steels — design tokens & base */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --red: #b91c2b;
  --red-dark: #7f0f1c;
  --steel-900: #14181c;
  --steel-800: #1e2429;
  --steel-700: #2c343b;
  --steel-100: #eef0f2;
  --steel-050: #f7f8f9;
  --ink: #1b1f22;
  --muted: #5c6670;
  --line: #dde1e4;
  --white: #fff;
  --radius: 6px;
  --shadow: 0 8px 24px rgba(20,24,28,.10);
  --maxw: 1180px;
  --head-font: 'Barlow Condensed', Impact, sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body-font); color:var(--ink); background:var(--white);
  line-height:1.6; font-size:16px;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--head-font); font-weight:700; letter-spacing:.3px; margin:0 0 .4em; line-height:1.08; text-transform:uppercase}
p{margin:0 0 1em}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:76px 0}
.section-tight{padding:48px 0}
.bg-steel{background:var(--steel-050)}
.bg-dark{background:var(--steel-900); color:#cfd5da}
.bg-dark h1,.bg-dark h2,.bg-dark h3{color:var(--white)}

.eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--red); font-family:var(--head-font); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:14px; margin-bottom:10px}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--red); display:block}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:22px; text-transform:none}
.lede{color:var(--muted); font-size:18px; max-width:640px}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:var(--radius);
  font-family:var(--head-font); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:15px;
  border:2px solid transparent; cursor:pointer; transition:.2s;
}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{border-color:rgba(255,255,255,.4); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-dark{background:var(--steel-900); color:#fff}
.btn-dark:hover{background:var(--steel-700)}

/* ===== Top bar ===== */
.topbar{background:var(--steel-900); color:#aeb7bd; font-size:13.5px}
.topbar .container{display:flex; justify-content:space-between; align-items:center; height:40px}
.topbar a{color:#aeb7bd; transition:color .15s}
.topbar a:hover{color:#fff}
.topbar .contacts{display:flex; gap:22px}
.topbar .contacts span{display:inline-flex; align-items:center; gap:7px}
.topbar .social{display:flex; align-items:center; gap:14px}
.topbar .social a{display:inline-flex}
.ic-sm{width:15px; height:15px; flex:none; color:#aeb7bd}
.topbar .social .ic-sm{width:16px; height:16px}
.topbar a:hover .ic-sm{color:#fff}

/* ===== Header / nav ===== */
header.site{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.navwrap{display:flex; align-items:center; justify-content:space-between; height:84px}
.logo{display:flex; align-items:center}
.logo-img{height:56px; width:auto; object-fit:contain}

nav.main{display:flex; gap:2px}
nav.main a{padding:10px 16px; font-weight:600; font-size:15px; color:var(--ink); border-radius:4px; transition:.15s}
nav.main a:hover, nav.main a.active{color:var(--red)}
.navcta{display:flex; align-items:center; gap:18px}

.mobile-menu-btn { display: none; background: transparent; border: none; padding: 6px; cursor: pointer; color: var(--ink); }
.mobile-menu-btn svg { width: 28px; height: 28px; }
.nav-right { display: flex; align-items: center; gap: 24px; }

@media (max-width: 900px) {
  .topbar { display: none; }
  .mobile-menu-btn { display: block; }
  .navwrap { height: 72px; }
  .logo-img { height: 46px; }
  .nav-right { 
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 16px 24px 32px; box-shadow: 0 10px 20px rgba(0,0,0,0.06);
    border-top: 1px solid var(--line);
    display: none;
  }
  .nav-right.is-open { display: flex; }
  nav.main { flex-direction: column; gap: 4px; }
  nav.main a { padding: 14px 16px; border-radius: 6px; }
  nav.main a:hover, nav.main a.active { background: var(--steel-050); }
  .navcta { margin-top: 18px; display: block; }
  .navcta .btn { display: flex; width: 100%; justify-content: center; }
}

/* ===== Hero ===== */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(180deg,#1a2025,#12161a);
  min-height:88svh; min-height:88dvh;
  display:flex; align-items:center;
  padding:150px 0 100px;
}
@media (max-width:760px){
  .hero{min-height:auto; padding:120px 0 70px}
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(10,12,14,.65) 0%, rgba(10,12,14,.40) 38%, rgba(10,12,14,.10) 65%, rgba(10,12,14,.30) 100%),
    linear-gradient(0deg, rgba(8,10,12,.25) 0%, rgba(8,10,12,0) 45%);
}
.hero-slides{position:absolute; inset:0; z-index:0}
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04); filter:brightness(.95) saturate(1.05);
  transition:opacity 1.6s ease;
  animation:heroKenBurns 9s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.hero-slide.active{opacity:1; animation-play-state:running}
@keyframes heroKenBurns{
  0%{transform:scale(1.04) translate(0,0)}
  100%{transform:scale(1.14) translate(-1%,-1%)}
}
.hero-fade{transition:opacity .35s ease, transform .35s ease}
.hero-fade-out{opacity:0; transform:translateY(10px)}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(10,12,14,.35); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.hero-arrow:hover{background:var(--red); border-color:var(--red)}
.hero-arrow svg{width:22px; height:22px}
.hero-arrow-prev{left:24px}
.hero-arrow-next{right:24px}
@media (max-width:760px){
  .hero-arrow{width:38px; height:38px}
  .hero-arrow svg{width:18px; height:18px}
  .hero-arrow-prev{left:10px}
  .hero-arrow-next{right:10px}
}
.hero .container{position:relative; z-index:2}
.hero-dots{position:absolute; z-index:3; left:0; right:0; bottom:28px; display:flex; justify-content:center; gap:10px}
.hero-dots button{
  width:34px; height:4px; border:none; border-radius:2px; background:rgba(255,255,255,.32);
  cursor:pointer; padding:0; transition:background .25s;
}
.hero-dots button.active{background:var(--red)}
@media (max-width:600px){.hero-dots{bottom:16px}}
.hero-inner{max-width:640px}
.hero-badges{display:flex; gap:28px; margin-top:38px; flex-wrap:wrap}
.hero-badges div{border-left:3px solid var(--red); padding-left:12px}
.hero-badges b{display:block; font-family:var(--head-font); font-size:22px}
.hero-badges span{font-size:13px; color:#b7bec3}
.hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}

/* ===== Cards / grids ===== */
.grid{display:grid; gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.grid-6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:920px){.grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-6{grid-template-columns:repeat(2,1fr)} .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.product-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:.2s; display:flex; flex-direction:column;
}
.product-card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:transparent}
.product-thumb{height:170px; overflow:hidden; background:linear-gradient(135deg,var(--steel-800),var(--steel-700))}
.product-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s}
.product-card:hover .product-thumb img{transform:scale(1.06)}
.product-card .body{padding:20px 20px 22px}
.product-card h3{font-size:19px; margin-bottom:6px}
.product-card p{color:var(--muted); font-size:14.5px; margin-bottom:0}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 20px}
.tag{background:var(--steel-100); color:var(--steel-700); font-size:12px; padding:4px 9px; border-radius:20px; font-weight:600}

.ind-card{background:#fff; text-align:center; height:100%; display:flex; flex-direction:column; box-shadow:0 4px 12px rgba(0,0,0,0.05); overflow:hidden;}
.ind-card img{width:100%; aspect-ratio:1/1.1; object-fit:cover; display:block;}
.ind-card .body{padding:16px 12px; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:0.5px; line-height:1.3; min-height:64px; display:flex; align-items:center; justify-content:center; flex-grow:1;}

.feature{display:flex; gap:16px}
.feature .ic{
  width:52px; height:52px; flex:none; border-radius:10px; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.feature .ic svg{width:26px; height:26px}
.feature h3{font-size:17px; margin-bottom:6px}
.feature p{color:var(--muted); font-size:14.5px; margin:0}

.check-list{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.check-list li{display:flex; gap:12px; align-items:flex-start}
.check-list .dot{
  width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:2px;
}
.check-list strong{display:block; font-family:var(--head-font); letter-spacing:.5px; text-transform:uppercase; font-size:15px}
.check-list span{color:var(--muted); font-size:14.5px}

/* ===== Stats strip ===== */
.stats{background:var(--red); color:#fff}
.stats .grid-4{text-align:center; gap:0}
.stats .stat{padding:34px 10px; border-right:1px solid rgba(255,255,255,.22)}
.stats .grid-4 > *:last-child{border-right:none}
.stats b{display:block; font-family:var(--head-font); font-size:42px}
.stats span{font-size:13px; letter-spacing:1px; text-transform:uppercase; opacity:.9}
@media (max-width:600px){.stats .stat{border-right:none; border-bottom:1px solid rgba(255,255,255,.22)}}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:640px}
thead th{background:var(--steel-900); color:#fff; padding:12px 14px; text-align:left; font-family:var(--head-font); letter-spacing:.5px; font-weight:600}
tbody td{padding:10px 14px; border-top:1px solid var(--line)}
tbody tr:nth-child(even){background:var(--steel-050)}

/* ===== Section head ===== */
.section-head{max-width:640px; margin:0 auto 48px; text-align:center}
.section-head.left{margin:0 0 48px; text-align:left}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(120deg,var(--steel-900),var(--steel-700)); color:#fff}
.cta-band .container{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.cta-band h2{margin:0}
.cta-band p{color:#b7bec3; margin:0}

/* ===== Footer ===== */
footer.site{background:#fff; color:#000}
footer.site .container{padding-top:64px; padding-bottom:28px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(0,0,0,.1)}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:40px 24px}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr; gap:32px} .foot-bottom{flex-direction:column; text-align:center; align-items:center}}
.foot-logo{width:auto; height:52px; margin-bottom:4px}
footer.site h4{color:#000; font-size:16px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px}
footer.site ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
footer.site a:hover{color:var(--red)}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:13px; flex-wrap:wrap; gap:10px}
.foot-contact li{display:flex; gap:10px; font-size:14px}
.foot-contact svg{width:18px; height:18px; flex:none; color:var(--red); margin-top:2px}

/* ===== Page hero (inner pages) ===== */
.page-hero{
  background:linear-gradient(115deg, rgba(20,24,28,.75), rgba(20,24,28,.40)), repeating-linear-gradient(100deg, #262d33 0 2px, #2f373e 2px 46px);
  color:#fff; padding:64px 0; text-align:center;
}
.breadcrumb{color:#b7bec3; font-size:14px; margin-top:8px}
.breadcrumb a{color:#fff}

/* ===== Forms ===== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; color:var(--steel-700)}
input,select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--body-font); font-size:15px; background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red); outline-offset:1px}
.alert{padding:14px 18px; border-radius:var(--radius); margin-bottom:24px; font-size:14.5px}
.alert-success{background:#e7f6ec; color:#1c6b3b; border:1px solid #b7e2c4}
.alert-error{background:#fdecec; color:#9c2020; border:1px solid #f4bcbc}

.contact-info-card{background:var(--steel-900); color:#fff; border-radius:var(--radius); padding:32px}
.contact-info-card li{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.contact-info-card li:last-child{border-bottom:none}
.contact-info-card svg{width:22px; height:22px; color:var(--red); flex:none}
.contact-info-card b{display:block; font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:#b7bec3; margin-bottom:2px}

.map-frame{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.map-frame iframe{width:100%; height:340px; border:0; display:block}