:root{
  --bg:#070707;
  --surface:#101010;
  --surface2:#151515;
  --line:#292929;
  --text:#f4f4ef;
  --muted:#a5a59e;
  --yellow:#ffd400;
  --yellow2:#f0bd00;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  line-height:1.5;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 44px),var(--max));margin:auto}
.kicker{
  margin-bottom:20px;
  color:var(--yellow);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:Oswald,Inter,sans-serif}
h1,h2{text-transform:uppercase}
h1 em,h2 em{color:var(--yellow);font-style:normal}
.button{
  display:inline-flex;
  min-height:54px;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:15px 23px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  transition:.22s ease;
}
.button:hover{transform:translateY(-2px)}
.button--yellow{background:var(--yellow);color:#050505;box-shadow:0 14px 35px rgba(255,212,0,.12)}
.button--yellow:hover{background:#fff;box-shadow:0 14px 35px rgba(255,255,255,.1)}
.button--ghost{border-color:#5a5a5a;background:rgba(0,0,0,.2)}
.button--ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.button--mini{min-height:40px;padding:10px 15px;font-size:10px}
.button--wide{width:100%}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid #222;
  background:rgba(7,7,7,.93);
  backdrop-filter:blur(16px);
}
.nav{display:flex;min-height:78px;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand__mark{
  display:grid;
  width:42px;height:42px;place-items:center;
  border:2px solid var(--yellow);
  color:var(--yellow);
  font-family:Oswald,sans-serif;
  font-size:25px;
  transform:skew(-8deg);
}
.brand strong{display:block;font-size:17px;letter-spacing:.7px}
.brand small{display:block;margin-top:2px;color:#85857f;font-size:8px;letter-spacing:1.1px}
.nav__links{display:flex;align-items:center;gap:23px;color:#bdbdb7;font-size:12px;font-weight:700}
.nav__links a:hover{color:var(--yellow)}
.nav__contact{display:flex;align-items:center;gap:16px}
.nav__contact>a:first-child{font-size:15px;font-weight:900;white-space:nowrap}
.menu-button{display:none;border:0;background:none;color:var(--yellow);font-size:25px}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  min-height:720px;
  border-bottom:1px solid var(--line);
  background:#080808;
}
.hero__bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,7,.98) 0%,rgba(7,7,7,.86) 43%,rgba(7,7,7,.28) 100%),
    radial-gradient(circle at 78% 50%,rgba(255,212,0,.14),transparent 32%);
}
.hero__bg:after{
  position:absolute;
  right:-160px;bottom:-260px;
  width:680px;height:680px;
  border:1px solid rgba(255,212,0,.18);
  border-radius:50%;
  content:"";
}
.hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  min-height:720px;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
}
.hero__content{padding:80px 0}
.hero h1{
  max-width:760px;
  margin-bottom:24px;
  font-size:clamp(50px,6vw,82px);
  line-height:.94;
  letter-spacing:-2px;
}
.hero__text{max-width:640px;color:#d1d1cb;font-size:18px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:31px 0}
.hero__facts{display:flex;max-width:650px;margin-top:35px;border-top:1px solid #383838}
.hero__facts div{flex:1;padding:16px 16px 0 0;border-right:1px solid #383838}
.hero__facts div+div{padding-left:16px}
.hero__facts div:last-child{border-right:0}
.hero__facts b{display:block;color:var(--yellow);font-size:11px}
.hero__facts span{display:block;margin-top:5px;color:#c6c6c0;font-size:11px}
.hero__media{
  position:relative;
  min-height:540px;
  overflow:hidden;
  border:1px solid #303030;
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.hero__media:after{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 55%);
  content:"";
}
.hero__media img{width:100%;height:100%;min-height:540px;object-fit:cover}
.media-label{
  position:absolute;
  z-index:2;
  right:24px;bottom:22px;
  padding:15px 18px;
  border-left:4px solid var(--yellow);
  background:rgba(7,7,7,.84);
}
.media-label span{display:block;color:var(--yellow);font-size:10px;font-weight:800;letter-spacing:1.3px}
.media-label strong{display:block;margin-top:3px;font-family:Oswald,sans-serif;font-size:23px;text-transform:uppercase}

/* TRUST */
.trust-strip{border-bottom:1px solid var(--line);background:#0d0d0d}
.trust-strip__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-strip__grid>div{padding:25px 22px;border-right:1px solid var(--line)}
.trust-strip__grid>div:first-child{padding-left:0}
.trust-strip__grid>div:last-child{border-right:0}
.trust-strip span{display:block;color:var(--yellow);font-size:10px;font-weight:900}
.trust-strip strong{display:block;margin-top:5px;font-size:13px}
.trust-strip small{display:block;margin-top:3px;color:var(--muted);font-size:10px}

/* PROBLEM */
.problem{padding:105px 0;background:#f0f0eb;color:#111}
.problem__grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}
.problem .kicker{color:#555;font-weight:900}
.problem h2{font-size:clamp(40px,5vw,66px);line-height:.98;letter-spacing:-1.5px}
.problem h2 em{color:#111}
.problem__cards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #c8c8c2}
.problem__cards article{padding:24px;border-bottom:1px solid #c8c8c2;border-right:1px solid #c8c8c2}
.problem__cards article:nth-child(2n){border-right:0}
.problem__cards b{color:#777;font-size:11px}
.problem__cards h3{margin:18px 0 7px;font-size:23px;text-transform:uppercase}
.problem__cards p{margin:0;color:#555;font-size:13px}
.problem__cards .problem__answer{background:var(--yellow);border-color:#111}
.problem__answer b{color:#111}

/* CATALOG */
.catalog{padding:105px 0;background:#080808}
.section-title{display:grid;grid-template-columns:1fr .7fr;align-items:end;gap:50px;margin-bottom:45px}
.section-title--center{display:block;text-align:center}
.section-title h2{margin:0;font-size:clamp(42px,5vw,67px);line-height:.96}
.section-title>p{margin:0;color:var(--muted);font-size:14px}
.catalog__grid{display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-template-rows:290px 290px;gap:14px}
.catalog-card{position:relative;overflow:hidden;border:1px solid #2b2b2b;background:#151515}
.catalog-card--large{grid-row:span 2}
.catalog-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.catalog-card:hover img{transform:scale(1.04);filter:saturate(1.1)}
.catalog-card:after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88),transparent 62%);content:""}
.catalog-card__overlay{position:absolute;z-index:2;right:20px;bottom:18px;left:20px}
.catalog-card__overlay span{color:var(--yellow);font-size:10px;font-weight:900}
.catalog-card__overlay h3{margin:5px 0 3px;font-size:25px;text-transform:uppercase}
.catalog-card__overlay p{margin:0;color:#c9c9c4;font-size:11px}
.catalog__cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:20px 23px;border:1px solid #2d2d2d;background:#111}
.catalog__cta span{color:#aaa;font-size:12px}
.catalog__cta a{color:var(--yellow);font-size:12px;font-weight:900;text-transform:uppercase}

/* PROCESS */
.process{padding:105px 0;background:#0d0d0d}
.process__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.process__line{height:1px;margin:25px 0 0;background:#303030}
.process__grid article{position:relative;padding:0 20px 0 0}
.process__number{margin-bottom:35px;color:var(--yellow);font-size:11px;font-weight:900}
.process__icon{
  display:grid;width:58px;height:58px;margin-bottom:20px;
  place-items:center;border:1px solid #5a5a5a;
  color:var(--yellow);font-size:25px;
}
.process h3{margin-bottom:7px;font-size:22px;text-transform:uppercase}
.process p{margin:0;color:var(--muted);font-size:13px}

/* ADVANTAGES */
.advantages{padding:105px 0;background:var(--yellow);color:#080808}
.advantages__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.advantages .kicker{color:#111}
.advantages h2{font-size:clamp(43px,5vw,70px);line-height:.94}
.advantages h2 em{color:#111}
.advantages__visual{position:relative}
.advantages__photo{height:560px;overflow:hidden;border:8px solid #080808}
.advantages__photo img{width:100%;height:100%;object-fit:cover}
.advantages__stamp{
  position:absolute;right:-25px;bottom:35px;
  width:155px;height:155px;display:grid;place-items:center;
  border:2px solid #080808;border-radius:50%;
  background:var(--yellow);
  font-family:Oswald,sans-serif;
  font-size:12px;text-align:center;
  transform:rotate(-9deg);
}
.advantages__stamp strong{font-size:26px;line-height:.85}
.advantage-list{margin-top:30px;border-top:1px solid rgba(0,0,0,.3)}
.advantage-list>div{display:grid;grid-template-columns:45px 1fr;gap:15px;padding:19px 0;border-bottom:1px solid rgba(0,0,0,.3)}
.advantage-list b{font-size:11px}
.advantage-list strong{display:block;font-size:15px;text-transform:uppercase}
.advantage-list small{display:block;margin-top:4px;color:#333;font-size:12px}

/* QUOTE */
.quote{padding:110px 0;background:#080808}
.quote__grid{display:grid;grid-template-columns:1fr 450px;gap:90px;align-items:start}
.quote__content h2{max-width:720px;font-size:clamp(44px,5vw,70px);line-height:.95}
.quote__content>p{max-width:650px;color:#b5b5ae;font-size:17px}
.quote__phone{display:flex;align-items:baseline;gap:12px;margin-top:30px}
.quote__phone span{color:#888;font-size:12px}
.quote__phone a{color:var(--yellow);font-family:Oswald,sans-serif;font-size:31px}
.lead-form{padding:30px;background:#f4f4ef;color:#090909;box-shadow:0 25px 70px rgba(0,0,0,.35)}
.lead-form__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}
.lead-form__top span{font-family:Oswald,sans-serif;font-size:25px;text-transform:uppercase}
.lead-form__top small{color:#777}
.lead-form label{display:block;margin-bottom:14px;font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}
.lead-form input,.lead-form textarea{display:block;width:100%;margin-top:6px;padding:13px 12px;border:1px solid #c9c9c3;outline:0;background:#fff;color:#111}
.lead-form input:focus,.lead-form textarea:focus{border-color:#111;box-shadow:0 0 0 2px rgba(255,212,0,.3)}
.lead-form textarea{resize:vertical}
.form-note{margin:12px 0 0;color:#777;font-size:10px}
.form-note a{color:#111;font-weight:900}
.form-success{display:none;margin-top:14px;padding:12px;background:#e3f4bf;color:#203000;font-size:12px;font-weight:700}

/* FOOTER */
.footer{padding:30px 0;border-top:1px solid #242424;background:#070707}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer strong{display:block;font-family:Oswald,sans-serif;font-size:19px}
.footer span{display:block;margin-top:3px;color:#777;font-size:10px}
.footer a{color:var(--yellow);font-weight:900}

/* TABLET */
@media(max-width:980px){
  .nav__links{display:none}
  .nav__contact .button{display:none}
  .menu-button{display:block}
  .hero__grid{grid-template-columns:1fr}
  .hero__media{max-width:720px;min-height:440px;margin:0 0 65px auto}
  .hero__media img{min-height:440px}
  .trust-strip__grid{grid-template-columns:1fr 1fr}
  .trust-strip__grid>div{border-bottom:1px solid var(--line)}
  .problem__grid,.advantages__grid,.quote__grid{grid-template-columns:1fr}
  .problem__grid{gap:40px}
  .advantages__visual{max-width:700px}
  .quote__grid{gap:45px}
  .quote__content{max-width:800px}
}

/* MOBILE */
@media(max-width:640px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .brand small{display:none}
  .brand strong{font-size:14px}
  .nav__contact>a:first-child{font-size:12px}
  .nav{min-height:68px;gap:10px}
  .hero{min-height:auto}
  .hero__grid{min-height:auto;gap:0}
  .hero__content{padding:58px 0 35px}
  .hero h1{font-size:44px;letter-spacing:-1.2px}
  .hero__text{font-size:16px}
  .hero__actions{display:grid}
  .hero__actions .button{width:100%}
  .hero__facts{margin-top:25px}
  .hero__facts div{padding-right:8px}
  .hero__facts div+div{padding-left:8px}
  .hero__facts span{font-size:9px}
  .hero__media{min-height:330px;margin-bottom:28px}
  .hero__media img{min-height:330px}
  .media-label{right:12px;bottom:12px}
  .media-label strong{font-size:18px}
  .trust-strip__grid{grid-template-columns:1fr}
  .trust-strip__grid>div{padding:18px 0;border-right:0}
  .trust-strip__grid>div:first-child{padding-left:0}
  .problem,.catalog,.process,.advantages,.quote{padding:70px 0}
  .problem__cards{grid-template-columns:1fr}
  .problem__cards article{border-right:0}
  .section-title{grid-template-columns:1fr;gap:20px}
  .catalog__grid{grid-template-columns:1fr;grid-template-rows:240px}
  .catalog-card--large{grid-row:auto}
  .catalog-card{height:240px}
  .catalog__cta{align-items:flex-start;flex-direction:column}
  .process__grid{grid-template-columns:1fr}
  .process__line{display:none}
  .process__number{margin-bottom:16px}
  .process__grid article{padding:18px 0;border-bottom:1px solid #292929}
  .advantages__visual{order:2}
  .advantages__photo{height:420px}
  .advantages__stamp{right:8px}
  .quote__phone{align-items:flex-start;flex-direction:column;gap:3px}
  .quote__phone a{font-size:27px}
  .lead-form{padding:22px}
  .footer__grid{align-items:flex-start;flex-direction:column}
}