*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'Helvetica Neue',Arial,sans-serif;
  background:#101418;
  color:#c9cdd2;
  font-size:16px;
  line-height:1.65;
  padding-top:64px;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}
a{color:#2b6c8c;text-decoration:none}
a:hover{color:#3f8fb4}
ul,ol{list-style:none}

h1,h2,h3{color:#ffffff;font-weight:700;letter-spacing:-0.02em;line-height:1.08}

p{margin-bottom:1em}
p:last-child{margin-bottom:0}

.container{max-width:1200px;margin:0 auto;padding:0 40px}
.container.medium{max-width:960px}

/* Row/grid */
.row{display:flex;flex-wrap:wrap;margin:0 -18px}
.row > *{padding:0 18px;min-width:0}

.col-3{width:25%}
.col-4{width:33.3333%}
.col-5{width:41.6667%}
.col-6{width:50%}
.col-7{width:58.3333%}
.col-8{width:66.6667%}
.col-12{width:100%}

.aln-stretch{align-items:stretch}

/* NAV */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:#111111;
  border-bottom:1px solid #1e2429;
  height:64px;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1200px;margin:0 auto;padding:0 40px}
.brand{color:#ffffff;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;font-size:14px;display:flex;align-items:center;gap:8px}
.brand-dot{display:inline-block;width:6px;height:6px;background:#2b6c8c}
#nav ul{display:flex;gap:28px;flex-wrap:wrap}
#nav ul a{color:#c9cdd2;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}
#nav ul a:hover{color:#ffffff}

/* Wrappers */
.wrapper{padding:110px 0;position:relative}
.wrapper.style1{background:#101418;padding-top:120px}
.wrapper.style2{background:#101418}
.wrapper.style3{background:#111111;border-top:1px solid #1e2429;border-bottom:1px solid #1e2429}
.wrapper.style4{background:#101418}

/* HERO */
.hero-row{align-items:flex-start}
.hero-left{display:flex;flex-direction:column;gap:24px}
.hero-image{display:block;aspect-ratio:3/4;overflow:hidden;background:#1a2026}
.hero-image img{width:100%;height:100%;object-fit:cover}
.facts{display:flex;flex-direction:column;gap:0;border-top:1px solid #2b6c8c;padding-top:0}
.facts li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #1e2429}
.facts strong{color:#ffffff;font-size:28px;font-weight:700;letter-spacing:-0.02em;line-height:1}
.facts span{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#8a9098;text-align:right}

.kicker{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#2b6c8c;font-weight:700;margin-bottom:28px}

.hero-right h1{font-size:min(9vw,104px);margin-bottom:32px;letter-spacing:-0.035em;max-width:12ch}
.lead{font-size:20px;color:#c9cdd2;max-width:48ch;margin-bottom:20px;line-height:1.5}
.lead-sub{font-size:16px;color:#8a9098;max-width:52ch;margin-bottom:40px}

/* Buttons */
ul.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.button{
  display:inline-block;padding:16px 28px;
  background:#2b6c8c;color:#ffffff;border:1px solid #2b6c8c;
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  cursor:pointer;
}
.button:hover{background:#3f8fb4;color:#ffffff;border-color:#3f8fb4}
.button.large{padding:18px 34px;font-size:13px}
.button.alt{background:transparent;color:#c9cdd2;border-color:#3a4147}
.button.alt:hover{background:transparent;color:#ffffff;border-color:#c9cdd2}
.button.small{padding:12px 20px;font-size:11px;display:inline-block;margin-top:20px}

/* Section headers */
.sec-head{max-width:760px;margin-bottom:56px}
.sec-num{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:#2b6c8c;font-weight:700;margin-bottom:22px}
.sec-head h2{font-size:44px;margin-bottom:22px;letter-spacing:-0.025em}
.sec-head > p:last-child{color:#8a9098;font-size:17px;max-width:60ch}

/* Boxes */
.box{background:#161b21;border:1px solid #1e2429;padding:36px 32px;height:100%;display:flex;flex-direction:column;position:relative}
.box.style1{padding-top:64px}
.box-num{position:absolute;top:20px;left:32px;font-size:12px;letter-spacing:0.22em;color:#2b6c8c;font-weight:700}
.box h3{font-size:22px;margin-bottom:8px;letter-spacing:-0.015em}
.box-style{font-size:13px;color:#2b6c8c;letter-spacing:0.04em;margin-bottom:24px;font-weight:600}

.specs{border-top:1px solid #232a31;margin-bottom:20px}
.specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid #232a31}
.specs dt{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#8a9098}
.specs dd{color:#ffffff;font-weight:700;font-size:14px}

.box-text{font-size:15px;color:#a6acb3;line-height:1.6;flex:1}
.box .button.small{align-self:flex-start}

/* Portfolio works */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.work{margin:0;display:flex;flex-direction:column;gap:0}
.work-img{aspect-ratio:4/5;overflow:hidden;background:#1a2026}
.work-img img{width:100%;height:100%;object-fit:cover; object-position: center;filter:grayscale(0.15) contrast(1.05)}
.work figcaption{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding-top:16px;border-top:1px solid #2b6c8c;margin-top:16px}
.work-num{font-size:13px;letter-spacing:0.18em;color:#2b6c8c;font-weight:700}
.work figcaption strong{color:#ffffff;font-size:16px;font-weight:700;letter-spacing:-0.01em}
.work-tag{grid-column:2;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#8a9098}

/* Sterile box */
.box.style4{background:#0c1116;border-color:#1e2429;height:100%}
.box.style4 h3{font-size:24px;margin-bottom:10px}
.box-lead{color:#8a9098;font-size:14px;margin-bottom:26px}
.proto{display:flex;flex-direction:column}
.proto li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px 0;border-top:1px solid #1e2429;align-items:flex-start}
.proto li:first-child{border-top:0;padding-top:0}
.proto li:last-child{padding-bottom:0}
.proto-num{font-size:13px;letter-spacing:0.16em;color:#2b6c8c;font-weight:700;padding-top:2px}
.proto strong{display:block;color:#ffffff;font-size:15px;font-weight:700;margin-bottom:6px}
.proto p{font-size:14px;color:#8a9098;line-height:1.55}

/* Steps */
.box.step{padding:32px 26px}
.step-num{display:block;font-size:52px;font-weight:700;letter-spacing:-0.04em;color:#2b6c8c;line-height:1;margin-bottom:22px}
.box.step h3{font-size:18px;margin-bottom:12px}
.box.step p{font-size:14px;color:#8a9098;line-height:1.6}

/* Reviews */
.box.review{padding-top:36px}
.review-mark{font-size:12px;letter-spacing:0.22em;color:#2b6c8c;font-weight:700;margin-bottom:20px}
.review blockquote{font-size:16px;color:#c9cdd2;line-height:1.65;flex:1;margin:0}
.review-author{margin-top:24px;padding-top:20px;border-top:1px solid #232a31;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#8a9098}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid #1e2429}
.faq-item{padding:32px 40px 32px 0;border-bottom:1px solid #1e2429}
.faq-item:nth-child(even){padding-right:0;padding-left:40px;border-left:1px solid #1e2429}
.faq-item h3{font-size:19px;margin-bottom:14px;letter-spacing:-0.01em}
.faq-item p{font-size:15px;color:#8a9098;line-height:1.65}

/* Form + contact */
form label{display:block;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#8a9098;font-weight:700;margin-bottom:10px}
form input[type=text],form select,form textarea{
  display:block;width:100%;
  background:#111820;border:1px solid #232b33;
  color:#ffffff;padding:14px 16px;font-family:inherit;font-size:15px;
  border-radius:0;outline:none;margin-bottom:22px;
  transition:border-color .15s;
}
form input[type=text]::placeholder,form textarea::placeholder{color:#5d6570}
form input:focus,form select:focus,form textarea:focus{border-color:#2b6c8c}
form textarea{min-height:130px;resize:vertical}
form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a9098 50%),linear-gradient(135deg,#8a9098 50%,transparent 50%);background-position:calc(100% - 20px) center,calc(100% - 14px) center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
form input[type=submit],form input[type=reset]{
  font-family:inherit;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  padding:16px 30px;border:1px solid #2b6c8c;background:#2b6c8c;color:#fff;cursor:pointer;border-radius:0;
}
form input[type=submit]:hover{background:#3f8fb4;border-color:#3f8fb4}
form input[type=reset]{background:transparent;color:#c9cdd2;border-color:#3a4147;margin-left:10px}
form input[type=reset]:hover{color:#fff;border-color:#c9cdd2}
form ul.actions{margin-top:6px}
form ul.actions li{list-style:none}

/* Contacts */
.contacts{margin-top:64px;padding-top:48px;border-top:1px solid #1e2429}
.contacts h3{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#2b6c8c;margin-bottom:14px;font-weight:700}
.contacts p{font-size:15px;color:#a6acb3;line-height:1.7}
.contacts a{color:#c9cdd2;border-bottom:1px solid #2b6c8c;padding-bottom:1px}
.contacts a:hover{color:#ffffff}

/* Section footer */
.sec-foot{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:64px;padding-top:36px;border-top:1px solid #1e2429}
.sec-foot > p{color:#8a9098;font-size:16px;margin:0;max-width:56ch}

/* Copyright */
#copyright{display:flex;flex-wrap:wrap;gap:24px;margin-top:64px;padding-top:28px;border-top:1px solid #1e2429;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#5d6570}

/* Breakpoints */
@media (max-width:900px){
  body{padding-top:56px}
  #nav{height:56px}
  .nav-inner{height:56px;padding:0 24px}
  #nav ul{gap:18px}
  #nav ul a{font-size:10px;letter-spacing:0.1em}
  .container{padding:0 24px}
  .row{margin:0 -12px}
  .row > *{padding:0 12px;min-width:0}
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{width:100%}
  .row{gap:32px 0}
  .row > *{width:100% !important}
  .wrapper{padding:72px 0}
  .wrapper.style1{padding-top:56px}
  .hero-right h1{font-size:56px;max-width:14ch}
  .lead{font-size:18px}
  .sec-head h2{font-size:34px}
  .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-item{padding:28px 0;border-left:0 !important;padding-left:0 !important;border-right:0}
  .box{padding:28px 22px}
  .box.style1{padding-top:56px}
  .contacts > *{padding-top:28px !important}
}

@media (max-width:600px){
  .nav-inner{padding:0 16px}
  #nav ul{gap:12px}
  #nav ul a{font-size:9px;letter-spacing:0.08em}
  #nav ul li:nth-child(4),#nav ul li:nth-child(3){display:none}
  .container{padding:0 18px}
  .wrapper{padding:56px 0}
  .hero-right h1{font-size:44px;margin-bottom:24px}
  .lead{font-size:17px}
  .lead-sub{margin-bottom:32px}
  ul.actions{flex-direction:column;align-items:stretch}
  ul.actions li{width:100%}
  .button{display:block;text-align:center;width:100%;box-sizing:border-box}
  .button.small{width:auto;display:inline-block}
  .works{grid-template-columns:minmax(0,1fr)}
  .sec-head h2{font-size:28px}
  .sec-head > p:last-child{font-size:15px}
  .step-num{font-size:42px;margin-bottom:14px}
  .box.step{padding:24px 20px}
  .facts strong{font-size:24px}
  .sec-foot{flex-direction:column;align-items:flex-start;gap:20px}
  form input[type=reset]{margin-left:0;margin-top:10px}
  form ul.actions li{width:100%}
  form ul.actions li:last-child{margin-top:0}
  #copyright{flex-direction:column;gap:8px}
}

@media (max-width:380px){
  #nav ul li:nth-child(2){display:none}
}