:root{--red:#e30619;--dark:#0c1119;--text:#141927;--muted:#6e7480;--line:#e4e6ea;--bg:#f7f7f8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg)}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,92%);margin:auto}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.head{height:94px;display:flex;align-items:center;justify-content:space-between;gap:28px}.logo{height:78px}.nav{display:flex;align-items:center;gap:28px;font-weight:650}.nav>a:hover{color:var(--red)}.phone{display:flex;flex-direction:column;line-height:1.05;padding-left:46px;position:relative;min-width:178px}.phone:before{content:"☎";position:absolute;left:0;top:-2px;width:38px;height:38px;background:var(--red);color:#fff;border-radius:8px;display:grid;place-items:center}.phone span{font-size:12px;color:#4b4f58}.phone strong{font-size:20px;color:var(--red);margin-top:5px}.cart,.btn{background:var(--red);color:#fff;padding:12px 17px;border-radius:8px;border:0;font-weight:750;cursor:pointer}
.hero{background:#0b1017;color:#fff;overflow:hidden}.heroin{width:100%;max-width:none;display:grid;grid-template-columns:52% 48%;min-height:485px}.hero-copy{padding:64px 36px 42px max(6vw,calc((100vw - 1180px)/2));background:linear-gradient(90deg,#0b1017 0%,#111821 90%,rgba(17,24,33,.84) 100%)}.hero-art{background-image:linear-gradient(90deg,rgba(11,16,23,.72),rgba(11,16,23,.05) 38%),url("hero-citadel.png");background-size:cover;background-position:72% center}.eyebrow{color:#ef172a;font-size:13px;font-weight:850;letter-spacing:2px;margin-bottom:14px}.hero h1{font-size:52px;line-height:1.08;margin:0 0 20px;letter-spacing:-1px}.hero h1 span{color:#ed071b}.hero p{font-size:18px;line-height:1.65;color:#cdd2da;max-width:630px;margin:0 0 28px}.benefits{display:flex;gap:27px;flex-wrap:wrap;margin-top:34px;color:#eceef1;font-size:14px;font-weight:650}
.section{padding:42px 0}.section h2{font-size:31px;margin:5px 0 22px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 8px 24px #1118270b}.pic{height:225px;display:flex;align-items:center;justify-content:center;padding:18px}.pic img{max-width:100%;max-height:100%;object-fit:contain}.body{padding:18px}.badge{font-size:12px;font-weight:750;background:#f2f3f5;padding:5px 9px;border-radius:30px}.card h3{margin:12px 0}.spec{list-style:none;padding:0;color:#596273;line-height:1.75;font-size:14px}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.price{font-size:23px;font-weight:850}.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:24px}.product{display:grid;grid-template-columns:1fr 1fr;gap:38px}.product .pic{height:420px}table{width:100%;border-collapse:collapse}td,th{padding:11px;border-bottom:1px solid var(--line);text-align:left}.field{margin:12px 0}.field label{display:block;font-weight:700;margin-bottom:5px}.field input,.field textarea{width:100%;padding:11px;border:1px solid #cbd4e2;border-radius:8px;font:inherit}.field textarea{min-height:100px}.ok{background:#eaf7ec;padding:14px;border-radius:9px}.admin{background:#11151d;color:#fff;padding:14px}.admin .wrap{display:flex;justify-content:space-between}.admin nav{display:flex;gap:18px}footer{background:#0b1017;color:#c8ced7;padding:30px 0;margin-top:35px}.foot{display:flex;justify-content:space-between}.foot img{height:60px}
@media(max-width:900px){.phone{display:none}.heroin{grid-template-columns:58% 42%}.hero h1{font-size:42px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.head{height:76px}.logo{height:60px}.nav{gap:12px}.nav>a:not(.cart){display:none}.heroin{display:block;min-height:0}.hero-copy{padding:48px 6%}.hero-art{display:none}.hero h1{font-size:36px}.grid{grid-template-columns:1fr}.product{grid-template-columns:1fr}}

/* v0.4 - approved clean white header */
header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:relative;
  top:auto;
  z-index:20;
  box-shadow:0 1px 7px rgba(0,0,0,.05);
}
.head{
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  overflow:visible;
}
.head > a:first-child{
  display:flex;
  align-items:center;
  height:100%;
  flex:0 0 auto;
}
.logo{
  display:block;
  height:76px;
  width:auto;
  max-width:190px;
  object-fit:contain;
  margin:0;
  transform:none;
}
.nav{
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto;
}
.nav > a:not(.phone):not(.cart){
  color:#111827;
  font-size:15px;
  font-weight:750;
}
.nav > a:not(.phone):not(.cart):hover{color:var(--red)}
.phone{margin-left:34px;min-width:190px}
.cart{padding:10px 14px;white-space:nowrap}
.hero{margin-top:0;border-top:0}
@media(max-width:900px){
  .head{height:82px;gap:16px}
  .logo{height:67px;max-width:155px}
  .nav{gap:18px}
  .phone{display:none}
}
@media(max-width:650px){
  .head{height:72px}
  .logo{height:58px;max-width:135px}
}

/* v0.5 — approved final hero direction */
.hero-final{
  position:relative;
  min-height:500px;
  margin:0;
  padding:0;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(8,13,20,.98) 0%,rgba(8,13,20,.95) 31%,rgba(8,13,20,.62) 47%,rgba(8,13,20,.05) 67%),
    url("hero-approved.jpg") center center/cover no-repeat;
  overflow:hidden;
}
.hero-final:before{display:none!important}
.hero-final-inner{
  min-height:500px;
  display:flex;
  align-items:center;
}
.hero-final-copy{
  width:58%;
  max-width:690px;
  padding:48px 0 38px;
}
.hero-final h1{
  margin:0 0 20px;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-1.4px;
  color:#fff;
}
.hero-final h1 span{color:#ef071b}
.hero-final p{
  max-width:650px;
  margin:0 0 28px;
  color:#d7dbe1;
  font-size:18px;
  line-height:1.65;
}
.hero-final-btn{
  display:inline-block;
  padding:15px 24px;
}
.hero-final .benefits{
  display:flex;
  flex-wrap:nowrap;
  gap:30px;
  margin-top:38px;
  color:#fff;
  font-size:14px;
  white-space:nowrap;
}
@media(max-width:1000px){
  .hero-final{background-position:58% center}
  .hero-final-copy{width:60%}
  .hero-final h1{font-size:45px}
  .hero-final .benefits{gap:16px;font-size:12px}
}
@media(max-width:760px){
  .hero-final{
    min-height:auto;
    background:
      linear-gradient(90deg,rgba(8,13,20,.97),rgba(8,13,20,.82)),
      url("hero-approved.jpg") 68% center/cover no-repeat;
  }
  .hero-final-inner{min-height:440px}
  .hero-final-copy{width:100%;max-width:none}
  .hero-final h1{font-size:38px}
  .hero-final .benefits{flex-wrap:wrap;white-space:normal}
}