/* ============================================================
   / — главная, витрина личного бренда
   ============================================================ */

/* ---------------- первый экран ---------------- */

.hero{padding:80px 0 68px;position:relative}
.hero .mono{margin-bottom:22px;display:block}
.hero h1{font-size:clamp(32px,5vw,56px);max-width:17ch}
.hero .lead{margin-top:26px;max-width:56ch;font-size:19px;color:var(--muted)}
.hero .lead b{color:var(--ink);font-weight:600}
.hero .cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .cta-hint{display:block;margin-top:14px;font-size:14px;color:var(--muted)}

.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.42em;overflow:visible}
.mark svg path{
  stroke:var(--red);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1s ease .5s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------------- два направления ---------------- */

.tracks{border-top:1px solid var(--line)}
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.track{
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);
  border-radius:8px;padding:34px 32px 30px;display:flex;flex-direction:column;
}
.track .mono{color:var(--red);display:block;margin-bottom:14px}
.track h3{font-size:25px;margin-bottom:10px}
.track .track-for{font-size:15px;color:var(--muted);margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.track .track-for b{color:var(--ink);font-weight:600}
.track ul{list-style:none;margin-bottom:24px;flex:1}
.track li{font-size:15.5px;padding:7px 0 7px 22px;position:relative}
.track li::before{content:'—';position:absolute;left:0;color:var(--red)}
.track .track-price{font-family:var(--serif);font-size:24px;font-weight:700;margin-bottom:20px}
.track .track-price small{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--muted);display:block;margin-top:4px}

.track-pick{
  margin-top:26px;background:var(--red-soft);border:1px solid var(--red-line);
  border-radius:8px;padding:22px 26px;font-size:15.5px;
}
.track-pick b{font-weight:600}

/* ---------------- результаты ---------------- */

.results{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.res-grid-home{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.res-item{background:var(--paper);padding:26px 28px}
.res-item .mono{display:block;margin-bottom:10px;color:var(--red)}
.res-item .big{font-family:var(--serif);font-size:29px;font-weight:700;line-height:1.05}
.res-item .big span{color:var(--red)}
.res-item p{margin-top:8px;font-size:14.5px;color:var(--muted)}
.results-note{margin-top:22px;font-size:14px;color:var(--muted);max-width:74ch}

/* ---------------- кто я ---------------- */

.who{border-top:1px solid var(--line)}
.who-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.who h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:22px}
.who p{margin-bottom:16px;font-size:17px}
.who .exp{margin-top:26px}

/* ---------------- контакты ---------------- */

.contact{background:var(--dark);color:var(--dark-text);text-align:center;padding:90px 0}
.contact h2{font-size:clamp(28px,4vw,42px);color:#fff;max-width:20ch;margin:0 auto 16px}
.contact .sub{color:var(--dark-muted);max-width:52ch;margin:0 auto 36px}
.contact-form{max-width:560px;margin:0 auto;text-align:left;background:#191C21;border:1px solid #2A2E33;border-radius:10px;padding:30px}
.contact-form .field{color:var(--dark-text)}
.contact-form .field input,.contact-form .field select{background:#111417;border-color:#33383E;color:var(--dark-text)}
.contact-form .agree{color:var(--dark-muted)}
.contact-form .agree a{color:var(--dark-text)}
.contact-form .btn{width:100%;text-align:center}
.contact-direct{margin-top:36px;padding-top:30px;border-top:1px solid #2A2E33}
.contact-direct h3{font-size:19px;color:#fff;margin-bottom:18px}
.contact-direct .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.contact-direct .btn.ghost{color:var(--dark-text);border-color:#3A3F45}
.contact-direct .btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.contact-done{max-width:560px;margin:0 auto;background:#191C21;border:1px solid #2A2E33;border-radius:10px;padding:30px;display:none}
.contact-done a{color:#fff}

/* ---------------- телефон ---------------- */

@media(max-width:860px){
  .hero{padding:52px 0 46px}
  .track-grid{grid-template-columns:1fr}
  .res-grid-home{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr;gap:36px}
  .contact{padding:64px 0}
  .contact-form{padding:24px 20px}
}