:root{
  --bg:#FFFFFF;
  --ink:#1F2428;
  --muted:#6C7278;
  --line:#E8EBED;
  --brand:#E77F31;
  --brand-2:#F2A65A;
  --wrap:1200px;
  --radius:16px;
  --radius-sm:10px;
  --space:clamp(16px,2vw,24px);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--wrap); margin-inline:auto; padding:0 var(--space)}
.grid-2{display:grid; gap:var(--space); align-items:center; grid-template-columns: 1.1fr 0.9fr}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

/* Header */
.site-header{
  position:sticky; top:0; z-index:20; background:#fffcc0;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding-block:12px}
.logo{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); text-decoration:none}
.nav-list{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.nav-list a{color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:8px}
.nav-list a.active, .nav-list a:focus-visible, .nav-list a:hover{background: #fff3; outline:2px solid var(--brand); outline-offset:2px}
.nav-toggle{display:none}
@media (max-width:760px){
  .nav-toggle{display:block; background:none; border:1px solid var(--line); padding:6px 10px; border-radius:8px}
  .nav-list{position:absolute; right:var(--space); top:56px; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; display:none}
  .nav-list.open{display:flex}
}

/* Sections */
.section{padding-block: clamp(48px, 8vw, 96px); border-bottom:1px solid var(--line)}
.section h2{font-size: clamp(24px, 3vw, 36px); margin:0 0 12px}
.section p{color:var(--muted)}

.hero h1{font-size: clamp(28px, 4vw, 44px); line-height:1.2; margin:0 0 12px}
.hero__media img{border-radius: var(--radius); border:1px solid var(--line)}
.cta-row{display:flex; gap:12px; margin-top:18px}
.btn{display:inline-block; padding:10px 16px; border-radius:12px; border:1px solid var(--line); text-decoration:none; color:var(--ink); font-weight:600}
.btn-primary{background:var(--brand); border-color:var(--brand); color:white}
.btn-ghost:hover{border-color:var(--brand)}

/* Cards */
.cards{display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
@media (max-width:1024px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:640px){ .cards{grid-template-columns: 1fr} }
.card{border:1px solid var(--line); border-radius: var(--radius); padding:16px; background:#fff}
.card h3{margin:6px 0 6px; font-size:20px}
.card p{margin:0}
.card .icon{width:40px; height:40px}
.card .icon img{width:100%; height:100%}

/* Expanded Cards - Vertical Layout */
.cards-vertical{display:grid; grid-template-columns: repeat(2, 1fr); gap:32px}
@media (max-width:900px){ 
  .cards-vertical{grid-template-columns: 1fr} 
}
.card-expanded{
  position:relative;
  display:flex; 
  flex-direction:column;
  border:1px solid var(--line); 
  border-radius: var(--radius); 
  padding:24px; 
  background:#fff;
  overflow:hidden;
  transition:transform 0.3s ease;
}
.card-expanded:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
}
.card-expanded h3{
  margin:0 0 16px; 
  font-size:clamp(20px, 2.5vw, 28px);
  color:var(--ink);
  line-height:1.3;
  z-index:2;
  position:relative;
}
.card-expanded__image{
  border-radius: var(--radius-sm); 
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:16px;
  z-index:2;
  position:relative;
}
.card-expanded__image img{
  width:100%; 
  height:auto; 
  display:block;
  object-fit:cover;
  min-height:250px;
}
.card-expanded__short{
  font-size:18px; 
  font-weight:600; 
  color:var(--ink); 
  margin:0; 
  line-height:1.5;
  z-index:2;
  position:relative;
}
.card-expanded__overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(242, 166, 90, 0.95);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border-radius: var(--radius);
  z-index:3;
}
.card-expanded:hover .card-expanded__overlay{
  opacity:1;
  visibility:visible;
}
.card-expanded__overlay p,
.card-expanded__overlay .card-expanded__full{
  color:#fff !important; 
  margin:0; 
  line-height:1.7;
  font-size:16px;
  text-align:center;
}

/* Features */
.features{display:grid; gap:16px; grid-template-columns: repeat(4, 1fr); list-style:none; margin:0; padding:0}
@media (max-width:1024px){ .features{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:640px){ .features{grid-template-columns: 1fr} }
.features li{
  border:1px solid var(--line); 
  border-radius: var(--radius); 
  padding:16px; 
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.features__icon{
  width:85%;
  max-width:200px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.features__icon img{
  width:100%;
  height:auto;
  display:block;
}
.features h3{margin:0 0 8px; font-size:18px}
.features p{margin:0}

/* Certification */
.certification{
  background-image: url('../img/back-03.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.certification .wrap{
  position: relative;
}
.certification-content{
  max-width: 800px;
}

/* Contacts */
.contacts{
  background-image: url('../img/back-02.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.contacts .wrap{
  position: relative;
}
.contact-details{border:1px solid var(--line); border-radius: var(--radius); padding:16px; background:#fff; max-width:600px; margin:0 auto}
.contact-details ul{list-style:none; margin:20px 0; padding:0}
.contact-details li{margin-bottom:12px; color:var(--muted)}
.contact-details li strong{color:var(--ink); display:inline-block; min-width:80px}
.contact-details a{color:var(--brand); text-decoration:none}
.contact-details a:hover{text-decoration:underline}
.map-placeholder{height:200px; border:1px dashed var(--line); border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f0f0f0 10px,#f0f0f0 20px); margin-top:20px}

/* Footer */
.site-footer{padding:20px 0}
.footer-wrap{display:flex; align-items:center; justify-content:space-between}
.to-top{border:1px solid var(--line); border-radius:10px; padding:6px 10px; text-decoration:none; color:var(--ink)}