/* Объёмный слой оформления RENTAL SKILL.
   Ничего не переопределяет в цветах и сетке страниц: добавляет глубину поверх —
   многослойные тени, фаски, стеклянные поверхности, «нажимаемые» кнопки, наклон
   карточек под курсором (app/skin3d.js), ambient-свет и 3D-сцену на лендинге.
   Подключается ПОСЛЕДНИМ в <head>, чтобы выигрывать при равной специфичности.
   Убрать оформление целиком = убрать две строки подключения со страницы. */

:root{
  --mute:#8f98a6; /* второстепенный текст: был 3.7:1, стал ≥5:1 */
  --sk-hi:rgba(255,255,255,.08);
  --sk-lo:rgba(0,0,0,.38);
  --sk-lift:0 1px 0 var(--sk-hi) inset, 0 -1px 0 var(--sk-lo) inset,
            0 2px 2px rgba(0,0,0,.22), 0 10px 18px -2px rgba(0,0,0,.30), 0 28px 48px -12px rgba(0,0,0,.5);
  --sk-lift-hover:0 1px 0 rgba(255,255,255,.13) inset, 0 -1px 0 var(--sk-lo) inset,
            0 4px 4px rgba(0,0,0,.25), 0 18px 30px -4px rgba(0,0,0,.38), 0 44px 70px -14px rgba(0,0,0,.6);
}

/* ---------- поверхности: карточки, плитки, панели ---------- */
.tile,.plan,.step,.bcard,.card,.authbox,.gym-card,.track-btn,.module,.mod,.lesson,
.exam,.trainer,.drill,.ranks,.quizbox,.gl-item,.cert,.flow,.fcard,.plat-link,.practice,.goal{
  box-shadow:var(--sk-lift);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .25s,background-color .25s;
}
.tile:hover,.plan:hover,.bcard:hover,.track-btn:hover,.mod:hover,.gym-card:hover,.step:hover{
  box-shadow:var(--sk-lift-hover);
}
/* стеклянность там, где под поверхностью что-то есть */
.tile,.plan,.bcard,.card,.authbox,.track-btn,.mod,.gym-card{
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
}

/* ---------- кнопки: выпуклые, с нижней гранью, продавливаются ---------- */
.btn,.bigbtn,.qbtn,.donebtn,.done-btn,.trgo,.pbtn,.navbtn,.att-cta,.opt,.qopt,.choice,.wk-go{
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 -2px 0 rgba(0,0,0,.28) inset,
             0 3px 0 rgba(0,0,0,.45), 0 8px 14px -2px rgba(0,0,0,.45);
  transition:transform .12s ease,box-shadow .12s ease,filter .2s,border-color .2s;
}
.btn:hover,.bigbtn:hover,.qbtn:hover,.pbtn:hover,.att-cta:hover,.navbtn:hover,.trgo:hover{transform:translateY(-1px)}
.btn:active,.bigbtn:active,.qbtn:active,.donebtn:active,.done-btn:active,.trgo:active,.pbtn:active,
.navbtn:active,.att-cta:active,.opt:active,.qopt:active,.choice:active,.wk-go:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 0 0 rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.4);
}
.btn:disabled,.bigbtn:disabled,.opt:disabled{box-shadow:none;transform:none}

/* выбранный/верный ответ чуть «вдавлен» */
.opt.right,.opt.wrong{box-shadow:0 2px 6px rgba(0,0,0,.5) inset}

/* ---------- верхняя панель — стекло ---------- */
nav,.top{
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px -12px rgba(0,0,0,.6);
}

/* ---------- заголовки с экструзией ---------- */
h1.big span{
  text-shadow:
    0 1px 0 var(--ex,#222),0 2px 0 var(--ex,#222),0 3px 0 var(--ex,#222),0 4px 0 var(--ex,#222),
    0 5px 0 var(--ex,#222),0 6px 0 var(--ex,#222),0 7px 0 var(--ex,#222),0 8px 0 var(--ex,#222),
    0 14px 18px rgba(0,0,0,.55),0 28px 40px rgba(0,0,0,.45);
}
h1.big .s{--ex:#7a4f0a}
h1.big .l{--ex:#146a8f}
h1.big .v{--ex:#8a2a68}
.top + main h1{text-shadow:0 1px 0 #555,0 2px 0 #444,0 3px 0 #333,0 4px 0 #2a2a2a,0 14px 22px rgba(0,0,0,.55)}

/* объёмный значок-плашка у плиток и заголовков */
.ic3d{--c:#38bdf8;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin-bottom:12px;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 85%,white 25%),var(--c) 55%,color-mix(in srgb,var(--c) 70%,black));
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(0,0,0,.25) inset,
             0 5px 0 color-mix(in srgb,var(--c) 45%,black),0 14px 22px -4px color-mix(in srgb,var(--c) 55%,transparent);
  transform:translateZ(24px);transition:transform .2s}
.ic3d svg{width:28px;height:28px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.tile:hover .ic3d{transform:translateZ(34px) translateY(-2px)}

/* ---------- ambient: цветной свет за интерфейсом ---------- */
.amb3d{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.amb3d i{position:absolute;width:56vmax;height:56vmax;border-radius:50%;filter:blur(90px);opacity:.16;
  will-change:transform;animation:ambdrift 28s ease-in-out infinite alternate}
.amb3d i:nth-child(1){left:-18vmax;top:-20vmax;background:#f5a524}
.amb3d i:nth-child(2){right:-22vmax;top:8vmax;background:#38bdf8;animation-duration:34s;animation-delay:-9s}
.amb3d i:nth-child(3){left:18vmax;bottom:-30vmax;background:#e05fae;animation-duration:40s;animation-delay:-17s}
@keyframes ambdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vmax,4vmax,0) scale(1.15)}}

/* ---------- наклон карточек и блик ---------- */
.t3d{transform-style:preserve-3d;will-change:transform}
.t3d.t3d-live{transition:transform .08s linear,box-shadow .3s}
.glare3d{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 55%);
  transition:opacity .25s;mix-blend-mode:soft-light}
.t3d:hover>.glare3d{opacity:1}

/* ---------- 3D-сцена лендинга ---------- */
.herogrid{display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
.stage3d{position:relative;height:300px;perspective:1100px;perspective-origin:50% 38%;margin-top:6px}
.scene3d{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transition:transform .15s ease-out}
.floor3d{position:absolute;left:50%;bottom:6%;width:150%;height:90%;margin-left:-75%;
  transform:translateZ(-60px) rotateX(74deg);transform-origin:50% 100%;
  background:
    linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 25%,transparent 100%)}
.beam3d{position:absolute;top:-8%;width:34%;height:92%;transform-origin:50% 0;filter:blur(6px);opacity:.5;mix-blend-mode:screen;
  background:linear-gradient(180deg,var(--c),transparent 85%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);animation:beamsway 7s ease-in-out infinite alternate}
.beam3d.b1{left:6%;--c:rgba(245,165,36,.65);transform:rotate(-10deg)}
.beam3d.b2{left:33%;--c:rgba(56,189,248,.6);animation-delay:-2s;transform:rotate(2deg)}
.beam3d.b3{left:60%;--c:rgba(224,95,174,.6);animation-delay:-4s;transform:rotate(12deg)}
@keyframes beamsway{from{margin-left:-2%}to{margin-left:3%}}

.cube3d{--s:92px;--c:#f5a524;position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d;
  animation:cubebob 6s ease-in-out infinite alternate}
.cube3d .spin{position:absolute;inset:0;transform-style:preserve-3d;animation:cubespin 22s linear infinite}
.cube3d .f{position:absolute;inset:0;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--c) 70%,white 10%);
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.03) 55%),
             color-mix(in srgb,var(--c) 26%,transparent);
  box-shadow:inset 0 0 26px color-mix(in srgb,var(--c) 45%,transparent),0 0 24px color-mix(in srgb,var(--c) 25%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  background-repeat:no-repeat,no-repeat;display:grid;place-items:center}
.cube3d .f::after{content:"";width:58%;height:58%;background:var(--ic) center/contain no-repeat;opacity:.95;
  filter:drop-shadow(0 0 8px var(--c))}
.cube3d .f.fr{transform:translateZ(calc(var(--s)/2))}
.cube3d .f.bk{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube3d .f.rt{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube3d .f.lf{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube3d .f.tp{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube3d .f.bt{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cube3d .shadow{position:absolute;left:50%;bottom:-46px;width:130%;height:26px;margin-left:-65%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transform:translateZ(-1px) rotateX(78deg);filter:blur(3px)}
.cube3d.c-s{--c:#f5a524;left:7%;top:30%;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23f5a524'%3E%3Crect x='5' y='24' width='6' height='18' rx='3'/%3E%3Crect x='15' y='10' width='6' height='32' rx='3'/%3E%3Crect x='25' y='18' width='6' height='24' rx='3'/%3E%3Crect x='35' y='4' width='6' height='38' rx='3'/%3E%3C/svg%3E");
  animation-duration:6.5s}
.cube3d.c-l{--c:#38bdf8;--s:112px;left:38%;top:14%;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2338bdf8' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='8' fill='%2338bdf8'/%3E%3Cpath d='M24 4v8M24 36v8M4 24h8M36 24h8M10 10l6 6M32 32l6 6M38 10l-6 6M16 32l-6 6'/%3E%3C/svg%3E");
  animation-duration:5.4s;animation-delay:-1.5s}
.cube3d.c-v{--c:#e05fae;left:70%;top:34%;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='4' y='9' width='40' height='28' rx='5' fill='none' stroke='%23e05fae' stroke-width='4'/%3E%3Cpath d='M20 17l11 7-11 7z' fill='%23e05fae'/%3E%3Cpath d='M16 43h16' stroke='%23e05fae' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  animation-duration:7.2s;animation-delay:-3s}
.cube3d.c-s .spin{animation-duration:26s}
.cube3d.c-l .spin{animation-duration:18s;animation-direction:reverse}
@keyframes cubespin{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}
@keyframes cubebob{from{transform:translate3d(0,-8px,20px)}to{transform:translate3d(0,10px,-10px)}}

@media(min-width:980px){
  .herogrid{grid-template-columns:1.1fr .9fr;gap:20px}
  .herogrid h1.big{font-size:clamp(40px,5.5vw,84px);white-space:nowrap}
  .stage3d{height:430px}
  .cube3d{--s:112px}.cube3d.c-l{--s:136px}
}
@media(max-width:979px){ .stage3d{order:-1} }
@media(max-width:520px){
  .stage3d{height:210px;margin-top:-6px}
  .cube3d{--s:72px}.cube3d.c-l{--s:88px}
}

/* ---------- тише: без движения и на слабых экранах ---------- */
@media(prefers-reduced-motion:reduce){
  .amb3d i,.cube3d,.cube3d .spin,.beam3d{animation:none}
  .scene3d{transition:none}
  .btn:hover,.bigbtn:hover,.qbtn:hover,.pbtn:hover{transform:none}
}
@media(max-width:640px){ .amb3d i{filter:blur(60px);opacity:.12} .tile,.plan,.bcard,.card,.authbox,.track-btn,.mod,.gym-card,nav,.top{-webkit-backdrop-filter:none;backdrop-filter:none} }
@media print{ .amb3d,.stage3d,.glare3d{display:none!important} *{box-shadow:none!important;text-shadow:none!important} }

/* 3D-сцена шире экрана по задумке (пол, лучи) — обрезаем по краям первого экрана, не создавая прокрутки */
.hero{overflow-x:clip}
.stage3d{max-width:100%}

/* ---------- читаемость: кнопки без своего цвета красились браузером в чёрный ---------- */
button,input,select,textarea{font-family:inherit}
button{color:inherit}
button.qopt{
  display:block;width:100%;text-align:left;cursor:pointer;
  color:var(--ink,#e9edf3);font-size:15px;line-height:1.45;padding:14px 16px 14px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),var(--bg2,#0f1217);
  border:1px solid var(--line2,#333b47);border-radius:12px;
  position:relative;overflow:hidden;
}
button.qopt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mc,var(--brand,#00d812));opacity:.0;transition:opacity .15s}
button.qopt:hover,button.qopt:focus-visible{
  border-color:var(--mc,var(--brand,#00d812));outline:0;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),var(--bg2,#0f1217);
}
button.qopt:hover::before,button.qopt:focus-visible::before{opacity:1}