:root{
  --bg:#0f0f0f; --fg:#ffffff; --muted:#bfbfbf;
  --accent:#16a3ff; --accent2:#28ff6a;
  --container:1080px; --radius:14px; --nav-h:60px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}

.container{width:min(100% - 32px, var(--container)); margin-inline:auto}
section{scroll-margin-top:var(--nav-h)}

/* nav */
.top-nav{
  position:sticky; top:0; z-index:1000;
  height:var(--nav-h); backdrop-filter:saturate(1.2) blur(4px);
  background:rgba(0,0,0,.75); border-bottom:1px solid #1c1c1c;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:100%}
.brand{font-weight:800; letter-spacing:.5px}
.nav-links a{
  color:var(--fg); text-decoration:none; margin-left:18px; font-weight:600;
  opacity:.9;
}
.nav-links a:hover{opacity:1; text-decoration:underline}
.nav-cta{color:var(--accent)}

/* hero */
.hero{padding:64px 0 56px}
.hero-content{
  display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:center;
}
.hero-image img{
  width:260px; height:260px; object-fit:cover; border-radius:50%;
  border:4px solid #2a2a2a; display:block;
}
.hero-text{max-width:580px}
.hero-text h1{
  margin:0 0 10px; font-size:clamp(26px, 4vw, 40px); font-weight:900;
}
.hero-text h2{
  margin:0 0 14px; font-size:clamp(18px, 2.4vw, 22px); font-weight:700;
}
.hero-text blockquote{
  margin:16px 0 22px; padding-left:14px; border-left:4px solid #666; color:var(--muted); font-style:italic;
}
.cta-button{
  display:inline-block; padding:12px 18px; border:2px solid var(--accent);
  color:var(--accent); text-decoration:none; font-weight:800; border-radius:10px;
  transition:.25s transform, .25s background, .25s color;
}
.cta-button:hover{background:var(--accent); color:#08111a; transform:translateY(-1px)}

/* about */
.about{padding:56px 0}
.about-content{
  display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; justify-content:center;
}
.about-image{max-width:320px}
.about-image img{
  width:100%; border-radius:12px; display:block;
}
.about-image blockquote{
  margin:14px 0 0; padding:10px 12px; background:rgba(40,255,106,.12);
  border-left:5px solid var(--accent2); color:#b7ffcf; font-style:italic; border-radius:8px;
}
.about-text{max-width:640px}
.about-text h2{color:var(--accent2); margin:0 0 14px; font-size:28px}
.about-text p{color:#d9d9d9; margin:0 0 16px}

/* reasons */
.reasons{
  padding: 42px 0 36px;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #242424;
  background:#121212;
}
.reasons h2{
  color:#28ff6a;
  margin:0 0 22px;
  font-size: clamp(22px,3.2vw,28px);
}
.reasons-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:28px;
}
@media (max-width: 900px){
  .reasons-grid{ grid-template-columns: 1fr; }
}
.reason-col h3{
  margin:0 0 12px;
  font-size: clamp(18px,2.6vw,20px);
}
.reason-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.reason-list li{
  position:relative; padding-left:30px; color:#e3e3e3;
}
.reason-list li::before{
  content:"";
  position:absolute; left:0; top:4px; width:18px; height:18px;
  /* зелёная «книжка»-иконка через inline svg */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <path fill='%2328ff6a' d='M6 4h10a2 2 0 0 1 2 2v12.5a.5.5 0 0 1-.79.41L14 16.5l-3.21 2.41A.5.5 0 0 1 10 18.5V6a2 2 0 0 0-2-2z'/>\
  <path fill='%2300c24a' d='M6 4a2 2 0 0 0-2 2v12h0a2 2 0 0 1 2-2h10V6a2 2 0 0 0-2-2H6z'/>\
  </svg>");
  background-repeat:no-repeat; background-size:contain;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0.3));
}

/* ========== nav: two-line + standalone CTA ========== */
.top-nav { height: auto; padding: 8px 0; }
.top-nav .two-lines { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.nav-rows { display: grid; gap: 6px; }
.nav-line { display: flex; flex-wrap: wrap; gap: 18px; }
.nav-line a { color: var(--fg); text-decoration: none; font-weight: 700; opacity: .9; }
.nav-line a:hover { opacity: 1; text-decoration: underline; }

.nav-cta-standalone{
  padding: 10px 16px;
  border: 2px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
  border-radius: 999px;
  transition: .2s transform, .2s background, .2s color, .2s box-shadow;
  white-space: nowrap;
}
.nav-cta-standalone:hover{
  background: var(--accent);
  color: #08111a;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(22,163,255,.25);
}

/* адаптив навигации */
@media (max-width: 680px){
  .top-nav .two-lines { grid-template-columns: 1fr; }
  .nav-cta-standalone { justify-self: start; }
}

/* ========== benefits section ========== */
.benefits{
  padding: 42px 0 50px;
  background: #111;
  border-top: 1px solid #242424;
}
.benefits h2{
  color: var(--accent2);
  margin: 0 0 22px;
  font-size: clamp(22px,3.2vw,28px);
}
.benefits-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
}
@media (max-width: 960px){ .benefits-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .benefits-grid{ grid-template-columns: 1fr; } }

.benefit-card{
  background: #141414;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 0 #1f1f1f inset, 0 0 0 1px #1a1a1a;
}
.benefit-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 12px;
}
.benefit-card h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  color: #e8e8e8;
}

/* work section */
.work{
  padding: 42px 0 50px;
  background:#111;
  border-top:1px solid #242424;
}
.work h2{
  color:var(--accent2);
  margin:0 0 20px;
  font-size:clamp(22px,3.2vw,28px);
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 36px;
}
@media (max-width:900px){ .work-grid{ grid-template-columns:1fr; } }

.work-card{
  background:#162026;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 1px 0 #1f1f1f inset, 0 0 0 1px #1a1a1a;
}
.work-head{ margin-bottom:10px; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  background:#1f2b33;
  border:1px solid #2b3b45;
  color:#e8f7ee;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  text-transform:capitalize;
  letter-spacing:.2px;
}
.pill-icon{
  width:18px; height:18px; display:inline-block;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <circle cx='12' cy='12' r='10' fill='%2317d391'/>\
    <path d='M8.5 12.5l2.5 2.5 4.5-5.5' fill='none' stroke='%23073c2f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
  background-size:contain; background-repeat:no-repeat;
}
.work-card p{ margin:8px 0 0; color:#d7d7d7; line-height:1.5; }

/* stages */
.stages{
  padding: 44px 0 52px;
  background:#101010;
  border-top:1px solid #242424;
}
.stages h2{
  color:var(--accent2);
  margin:0 0 22px;
  font-size:clamp(22px,3.2vw,28px);
}
.stages-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
@media (max-width: 980px){ .stages-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 620px){ .stages-grid{ grid-template-columns:1fr; } }

.stage h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
}
.diamond-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
.diamond-list li{
  position:relative; padding-left:28px; color:#e6e6e6; line-height:1.55;
}
.diamond-list li::before{
  content:"";
  position:absolute; left:0; top:5px; width:16px; height:16px;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path d='M12 3l8 9-8 9-8-9 8-9z' fill='%2316a3ff'/>\
    <path d='M12 6l5.5 6L12 18 6.5 12 12 6z' fill='%23bfe6ff'/>\
  </svg>");
  background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 0 0 rgba(0,0,0,.25));
}

/* reviews */
.reviews{
  padding:44px 0 40px;
  background:#111; border-top:1px solid #242424;
}
.reviews h2{
  color:var(--accent2); margin:0 0 18px;
  font-size:clamp(22px,3.2vw,28px);
}

.reviews-viewport{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.reviews-track{
  display:flex; gap:18px;
  will-change:transform;
  transition:transform .35s ease;
  padding:2px; /* для видимого края у первых/последних карточек */
}

.review-card{
  flex:0 0 calc((100% - 18px) / 2); /* 2 карточки в кадре на десктопе */
  background:#0f1214;
  border:1px solid #1b1f22;
  border-radius:14px;
  padding:14px;
  box-shadow:0 1px 0 #1b1b1b inset;
}
@media (max-width:840px){
  .review-card{ flex-basis:100%; }  /* 1 карточка на мобайле */
}

.rev-head{ display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.rev-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid #2a2a2a;}
.rev-name{ font-weight:800; }
.rev-tag{ font-size:12px; color:#9fb0bd; }

.rev-body p{ margin:8px 0; color:#e6e6e6; }
.rev-highlight{
  background:rgba(40,255,106,.1);
  border-left:4px solid var(--accent2);
  padding:8px 10px; border-radius:8px; color:#c9ffdc;
}

/* controls */
.rev-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid #2a2a2a; background:#0b0b0b; color:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.rev-nav:hover{ background:#111; }
.rev-nav.prev{ left:8px; }
.rev-nav.next{ right:8px; }

/* footer */
.reviews-footer{
  margin-top:12px; display:flex; justify-content:flex-start;
}
.more-reviews{
  color:#b9c7d2; text-decoration:none; font-weight:700;
}
.more-reviews:hover{ color:#e5eef4; text-decoration:underline; }

/* фото внутри отзывов */
.rev-photo{
  margin: 6px 0 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #1b1f22;
}
.rev-photo img{
  width: 100%;
  height: 260px;        /* можно 260, если хочешь выше */
  object-fit: cover;
  display: block;
}
@media (max-width: 840px){
  .rev-photo img{ height: 200px; }
}

/* pricing */
.pricing{
  padding: 44px 0 50px;
  background:#101010;
  border-top:1px solid #242424;
}
.pricing h2{
  color:var(--accent2);
  margin:0 0 22px;
  font-size:clamp(22px,3.2vw,28px);
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
}
@media (max-width: 980px){ .pricing-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .pricing-grid{ grid-template-columns:1fr; } }

.plan{
  background:#111;
  border:1px solid #1b1f22;
  border-radius:var(--radius);
  padding:18px 18px 16px;
  box-shadow:0 1px 0 #1b1b1b inset;
}
.plan h3{
  margin:0 0 10px;
  font-size:18px; font-weight:800;
}
.plan ul{
  margin:0 0 16px; padding-left:20px; color:#e6e6e6;
}
.plan li{ margin:8px 0; }

.price-row{
  display:flex; align-items:baseline; gap:12px;
}
.price{
  font-weight:900; font-size:22px; letter-spacing:.2px;
}
.old-price{
  color:#9aa6b2; text-decoration:line-through; font-weight:700;
}

.pricing-cta{
  margin-top:18px;
}
.cta-link{
  display:inline-block; font-weight:900; text-decoration:none;
  color:var(--accent); border-bottom:2px solid var(--accent);
  padding-bottom:2px; transition:.2s;
}
.cta-link:hover{ opacity:.9; }

/* extras */
.extras{
  padding:44px 0 50px;
  background:#111; border-top:1px solid #242424;
}
.extras h2{
  color:var(--accent2);
  margin:0 0 22px;
  font-size:clamp(22px,3.2vw,28px);
}
.extras-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:28px;
}
@media (max-width:980px){ .extras-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .extras-grid{ grid-template-columns:1fr; } }

.offer-card{
  background:#101314; border:1px solid #1b1f22;
  border-radius:var(--radius); padding:16px; box-shadow:0 1px 0 #1b1b1b inset;
}
.offer-img{
  width:100%; height:220px; object-fit:cover;
  border-radius:10px; display:block; margin-bottom:12px;
}
.offer-card h3{ margin:0 0 10px; font-size:18px; font-weight:900; }
.offer-card p{ margin:8px 0; color:#e7e7e7; }
.old{ color:#9aa6b2; text-decoration:line-through; font-weight:700; }

/* collapsible */
.acc{ margin-top:8px; border-top:1px solid #1f2428; }
.acc > summary{
  list-style:none; cursor:pointer; padding:10px 0; font-weight:800; color:#eaf5ff;
  position:relative;
}
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::before{
  content:"▸"; position:absolute; left:-2px; top:10px; font-size:14px; color:#9fcfff;
  transform-origin:center; transition:.2s;
}
.acc[open] > summary::before{ transform:rotate(90deg); }
.acc-body{ padding:0 0 10px 0; color:#d8d8d8; }
.acc-body ul{ margin:6px 0 0 18px; }
.acc-body li{ margin:6px 0; }

/* cta снизу */
.extras-cta{ margin-top:18px; }

/* certs */
.certs{
  padding:44px 0 40px;
  background:#111; border-top:1px solid #242424;
}
.certs h2{
  color:var(--accent2); margin:0 0 18px;
  font-size:clamp(22px,3.2vw,28px);
}

.certs-viewport{
  position:relative; overflow:hidden; border-radius:var(--radius);
}
.certs-track{
  display:flex; gap:18px;
  will-change:transform; transition:transform .35s ease;
  padding:2px;
}

.cert-card{
  flex:0 0 calc((100% - 18px*2) / 3); /* 3 карточки в кадре на десктопе */
  border-radius:12px; overflow:hidden;
  border:1px solid #1b1f22; background:#0f1214;
}
@media (max-width: 980px){ .cert-card{ flex-basis: calc((100% - 18px) / 2); } } /* 2 в кадре */
@media (max-width: 620px){ .cert-card{ flex-basis: 100%; } } /* 1 в кадре */

.cert-card img{
  width:100%; height:340px; object-fit:cover; display:block;
}

.car-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; border:1px solid #2a2a2a;
  background:#0b0b0b; color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.car-nav:hover{ background:#111; }
.car-nav.prev{ left:8px; }
.car-nav.next{ right:8px; }

/* мелкий хелпер: общий класс carousels (отзывов и дипломов) */
.carousel{ position:relative; }
.carousel-track{ display:flex; gap:18px; transition:transform .35s ease; }

/* contacts */
.contacts{
  padding:44px 0 42px;
  background:#111; border-top:1px solid #242424;
}
.contacts h2{
  color:var(--accent2);
  margin:0 0 18px;
  font-size:clamp(22px,3.2vw,28px);
}
.contacts-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
  margin-bottom:16px;
}
@media (max-width:960px){ .contacts-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .contacts-grid{ grid-template-columns:1fr; } }

.soc-btn{
  display:flex; align-items:center; gap:10px;
  background:#1e272c; border:1px solid #2a343a;
  padding:12px 14px; border-radius:10px; text-decoration:none;
  color:#dfe9ef; font-weight:800;
  transition:.2s transform,.2s background,.2s border-color;
}
.soc-btn:hover{ transform:translateY(-1px); background:#223038; border-color:#34434b; }

.soc-ico{
  width:22px; height:22px; display:grid; place-items:center;
}
.soc-ico svg{ width:100%; height:100%; }

.contacts-cta{ margin-top:10px; }