/* Гайд «Карта 10 механик автомонтажа»: телефон сам листает гайд, механики всплывают чипами,
   по рамке карточки бежит свет (как у карточки офера). Всё движение только пока блок на экране. */
.gd{padding-top:40px!important;padding-bottom:40px!important}
.gd-card{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center;padding:44px 52px;border-radius:32px;
 background:radial-gradient(120% 90% at 0% 0%,#3a1a78 0%,#1a0f33 45%,#0f0a1e 100%);border:1px solid #c7a7ff33;
 box-shadow:inset 0 1px 0 #ffffff14,0 40px 120px -50px #9759ffcc;overflow:hidden;isolation:isolate}
.gd-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;pointer-events:none;
 background:conic-gradient(from var(--gd-a,0deg),transparent 0 70%,#d9c2ff 80%,transparent 90%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@property --gd-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.gd.is-on .gd-card::before{animation:gdEdge 7s linear infinite}
@keyframes gdEdge{to{--gd-a:360deg}}

/* телефон с гайдом */
.gd-phone{position:relative;width:300px;aspect-ratio:9/18.5;border-radius:42px;padding:10px;background:linear-gradient(160deg,#2b2140,#120c20);
 border:1px solid #ffffff1f;box-shadow:0 40px 80px -30px #000,0 0 0 6px #ffffff08,0 0 80px -10px #9759ff80;transform:rotate(-4deg)}
.gd-screen{position:relative;height:100%;border-radius:33px;overflow:hidden;background:#fff}
.gd-screen img{display:block;width:100%;height:auto;transform:translateY(0);will-change:transform}
.gd.is-on .gd-screen img{animation:gdScroll 22s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes gdScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + var(--gd-h,560px)))}}
.gd-notch{position:absolute;top:18px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:99px;background:#0b0716;z-index:2}
.gd-free{position:absolute;right:-26px;top:38px;z-index:3;padding:10px 14px;border-radius:14px;transform:rotate(8deg);
 font:800 13px/1.1 Manrope,sans-serif;letter-spacing:.06em;color:#fff;background:linear-gradient(120deg,#a466f7,#6b31c6);box-shadow:0 14px 30px -10px #9759ff}
.gd.is-on .gd-free{animation:gdBob 3.2s ease-in-out infinite}
@keyframes gdBob{50%{transform:rotate(8deg) translateY(-6px)}}

/* текст */
.gd-kick{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px!important;padding:7px 13px;border-radius:99px;border:1px solid #c7a7ff40;
 font:700 12px/1 Manrope,sans-serif!important;letter-spacing:.12em;text-transform:uppercase;color:#c7a7ff!important;background:#ffffff08}
.gd-kick i{width:7px;height:7px;border-radius:50%;background:#8ef0b0;box-shadow:0 0 10px #8ef0b0}
.gd h2{margin-bottom:16px!important}
.gd-lead{max-width:520px;color:#cbbfe6!important}
.gd-chips{list-style:none;margin:22px 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gd-chips li{padding:8px 12px;border-radius:12px;font:600 13.5px/1.2 Manrope,sans-serif;color:#efe8ff;background:#ffffff0d;border:1px solid #ffffff17;
 opacity:0;transform:translateY(10px) scale(.96);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.gd-chips li b{color:#c7a7ff;font-weight:800;margin-right:6px}
.gd.is-shown .gd-chips li{opacity:1;transform:none}
.gd-btn{gap:14px!important}
.gd-note{margin:12px 0 0!important;font-size:13px!important;color:#9d8fb6!important}

/* вход с первого экрана */
.gd-hero-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:14px;text-decoration:none;
 font:700 15px/1.2 Manrope,sans-serif;color:#fff;background:#ffffff0d;border:1px solid #c7a7ff4d;transition:background-color .3s,border-color .3s,transform .3s}
.gd-hero-link:hover{background:#9759ff26;border-color:#c7a7ff99;transform:translateY(-2px)}
.gd-hero-link span{font-size:18px}
.gd-hero-link em{font-style:normal;color:#c7a7ff}

@media (max-width:900px){
 .gd-card{grid-template-columns:1fr;gap:34px;padding:34px 22px 30px;text-align:center}
 .gd-phone{width:230px;margin:0 auto}
 .gd-free{right:-14px}
 .gd-chips{justify-content:center}
 .gd-lead{margin-left:auto;margin-right:auto}
 .gd-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.gd .gd-screen img,.gd .gd-free,.gd .gd-card::before{animation:none!important}.gd-chips li{opacity:1;transform:none}}
.gd-hero-link em{margin-left:-6px}