/* MY PRO SKILLS · брендовая система v1.0 */
:root{
  --dark:#16202C; --dark-stripe:#1B2836;
  --light:#F5F7FA; --light-stripe:#E6EBF2;
  --panel:#2A3644; --gray:#9AA5B1; --light-gray:#E1E7EE; --white:#FFFFFF;
  --ink:#14202F; --ink2:#5B6673;
  --mint:#7FF0D4; --amber:#FFB25E; --lime:#D9F24F;
  --grad:linear-gradient(90deg,var(--mint),var(--lime));
  --wm-dark:#1E2A38; --wm-light:#E6EBF2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:"Inter",system-ui,sans-serif;background:var(--light);color:var(--ink2);line-height:1.65;font-size:16px}
h1,h2,h3{font-family:"Manrope","Inter",sans-serif;color:var(--ink);line-height:1.2;font-weight:800}
h1{font-size:clamp(30px,4.6vw,52px)}
h2{font-size:clamp(26px,3.4vw,40px);text-align:center}
h3{font-size:19px}
img,svg{display:block;max-width:100%}
a{color:var(--mint);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:96px 24px;position:relative}
.center{text-align:center}

/* Фирменный диагональный паттерн: полоса 20px / паттерн 56px / 20deg */
.sec-dark{background:repeating-linear-gradient(20deg,var(--dark-stripe) 0 20px,var(--dark) 20px 56px);color:var(--light-gray)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:var(--white)}
.sec-light{background:var(--light)}

/* Градиентная подпись: линия под заголовком, «отрисовывается» */
.grad-line{display:block;height:4px;width:0;background:var(--grad);border-radius:2px;margin:18px auto 0;transition:width .9s cubic-bezier(.22,1,.36,1) .15s}
.grad-line.left{margin-left:0}
.reveal.visible .grad-line,.grad-line.visible{width:210px}

/* Хедер */
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(22,32,44,.72);backdrop-filter:blur(10px);transition:background .3s,box-shadow .3s}
.header.scrolled{background:var(--dark);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px}
.logo{display:flex;align-items:center;gap:10px;color:var(--white);font-family:"Manrope";font-weight:800;font-size:18px}
.logo svg{width:22px;height:22px}
.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--light-gray);font-size:15px;font-weight:600;transition:color .25s}
.menu a:hover{color:var(--mint)}
.burger{display:none;background:none;border:none;cursor:pointer;width:34px;height:26px;position:relative}
.burger span{position:absolute;left:0;right:0;height:3px;border-radius:2px;background:var(--mint);transition:.3s}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:22px}
.burger.open span:nth-child(1){top:11px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:11px;transform:rotate(-45deg)}

/* Прогресс-бар чтения */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:60}

/* Кнопки: мята = CTA, hover = градиент мята→лайм */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--mint);color:var(--ink);font-weight:700;font-size:16px;padding:16px 32px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(127,240,212,.3);transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{background:var(--grad);transform:translateY(-2px);box-shadow:0 10px 28px rgba(127,240,212,.45)}
.btn--ghost{background:transparent;border:2px solid var(--mint);color:var(--mint);box-shadow:none}
.btn--ghost:hover{background:var(--mint);color:var(--ink)}

/* Карточки */
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{border-radius:16px;padding:28px;transition:transform .3s,box-shadow .3s;color:inherit}
.card:hover{transform:translateY(-6px)}
.card--dark{background:var(--panel)}
.card--dark:hover{box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card--light{background:var(--white);border:1px solid var(--light-stripe)}
.card--light:hover{box-shadow:0 16px 40px rgba(22,32,44,.12)}
.card .icon{width:44px;height:44px;margin-bottom:18px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card--problem .icon{stroke:var(--amber)} /* проблемы = янтарь (угрозы) */
.card--light .icon{stroke:var(--ink)}
.card--dark .icon{stroke:var(--light-gray)}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.badge--mint{background:rgba(127,240,212,.15);color:var(--mint)}
.badge--gray{background:rgba(154,165,177,.18);color:var(--gray)}

/* Шаги «Решение» */
.steps{max-width:760px;margin:56px auto 0;display:grid;gap:28px}
.step{display:flex;gap:20px;align-items:flex-start}
.step__num{flex:none;width:46px;height:46px;border-radius:50%;background:var(--panel);color:var(--mint);font-family:"Manrope";font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.step p{color:var(--light-gray);font-weight:600}

/* Модули */
.modules{max-width:820px;margin:56px auto 0}
.module{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--light-stripe)}
.module:last-child{border-bottom:none}
.module .icon{flex:none;width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.module h3{margin-bottom:8px}

/* Цена */
.price-card{max-width:560px;margin:56px auto 0;background:var(--white);border:3px solid var(--mint);border-radius:16px;padding:44px 40px;box-shadow:0 20px 60px rgba(22,32,44,.25);text-align:center}
.price-card .over{color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:13px}
.price-card h3{font-size:26px;margin:8px 0 18px}
.price{font-family:"Manrope";font-weight:800;font-size:56px;color:var(--mint);line-height:1}
.includes{list-style:none;margin:26px 0 30px;display:grid;gap:12px;text-align:left}
.includes li{padding-left:30px;position:relative;color:var(--ink2)}
.includes li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:800}

/* ЧаВо */
.faq{max-width:760px;margin:56px auto 0}
.faq-item{background:var(--white);border:1px solid var(--light-stripe);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item.open{border-color:var(--mint);box-shadow:0 8px 24px rgba(22,32,44,.08)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;cursor:pointer;padding:20px 24px;font:700 17px/1.4 "Manrope","Inter",sans-serif;color:var(--ink);text-align:left}
.faq-q .plus{flex:none;color:var(--mint);font-size:26px;font-weight:600;line-height:1;transition:transform .35s}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-a p{padding:0 24px 22px;color:var(--ink2)}

/* Вотермарка: три восходящих столбика */
.wm{position:absolute;right:28px;bottom:22px;display:flex;align-items:flex-end;gap:6px;pointer-events:none}
.wm i{width:14px;border-radius:7px;background:var(--wm-light)}
.sec-dark .wm i,.footer .wm i{background:var(--wm-dark)}
.wm i:nth-child(1){height:24px}.wm i:nth-child(2){height:40px}.wm i:nth-child(3){height:56px}

/* Футер */
.footer{background:var(--dark);color:var(--gray);font-size:14px;position:relative}
.footer .wrap{padding:48px 24px}
.footer a{color:var(--mint)}
.footer__row{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}

/* Кнопка наверх */
.top{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:12px;border:none;cursor:pointer;background:var(--mint);color:var(--ink);font-size:20px;font-weight:800;opacity:0;transform:translateY(16px);pointer-events:none;transition:.3s;z-index:40;box-shadow:0 8px 24px rgba(127,240,212,.4)}
.top.show{opacity:1;transform:none;pointer-events:auto}
.top:hover{background:var(--grad)}

/* Вылет блоков при скролле */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}

/* Hero */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:80px}
.hero__grid{display:grid;gap:48px;align-items:center;grid-template-columns:1.1fr .9fr}
.hero .lead{font-size:19px;color:var(--gray);margin:22px 0 34px;max-width:520px}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}.hero__art{order:-1;max-width:420px;margin:0 auto}}

/* Мобильное меню */
@media(max-width:860px){
  .burger{display:block}
  .menu{position:fixed;top:64px;left:0;right:0;background:var(--dark);flex-direction:column;align-items:flex-start;padding:24px;gap:18px;transform:translateY(-130%);transition:transform .35s ease;box-shadow:0 20px 40px rgba(0,0,0,.4)}
  .menu.open{transform:none}
  .wrap{padding:72px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .grad-line{width:210px;transition:none}
}