/* DC-Lab Redesign — Block 4 РАБОТЫ УЧЕНИКОВ (night gallery, cursor spotlight, glass plaque) + ОТЗЫВЫ */

.works{position:relative;overflow:hidden;color:#eaf0f7;
  padding:clamp(80px,10vw,140px) 0 clamp(60px,7vw,100px);
  background:radial-gradient(120% 90% at 50% -10%,#10192b 0%,#080d16 60%,#06090f 100%)}
/* faint gallery vignette + CAD continuity grid */
.works__grid-bp{position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(120,190,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,190,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 12%,#000 28%,transparent 80%);
          mask-image:radial-gradient(110% 80% at 50% 12%,#000 28%,transparent 80%)}

/* ---------- header ---------- */
.works__head{position:relative;z-index:2;max-width:780px;margin-bottom:clamp(34px,4.5vw,56px)}
.works__eye{display:inline-flex;align-items:center;gap:.6em;color:var(--gold);
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.works__eye i{width:22px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.works h2{margin:16px 0 0;font-size:clamp(2rem,5vw,3.7rem);color:#fff;line-height:1.02}
.works h2 .hl{position:relative;color:#fff;white-space:nowrap}
.works h2 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;
  background:linear-gradient(90deg,var(--gold),var(--teal));border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .9s .3s cubic-bezier(.22,1,.36,1)}
.works h2.is-in .hl::after{transform:scaleX(1)}
.works__lead{margin:16px 0 0;color:#b9c6d8;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6;max-width:620px}
.works__lead b{color:#fff;font-weight:700}

/* ---------- gallery + moving spotlight ---------- */
.works__gallery{--mx:50%;--my:30%;position:relative;z-index:2;
  display:grid;gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(158px,15.5vw,216px)}
/* soft light that follows the cursor across the wall */
.works__spot{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle 360px at var(--mx) var(--my),rgba(170,210,255,.14),transparent 62%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.works__gallery:hover .works__spot{opacity:1}

/* frame */
.wframe{position:relative;display:block;overflow:hidden;border-radius:14px;cursor:none;
  background:#0c1422;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translateY(26px) scale(.985);
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s,box-shadow .5s,border-color .5s}
.wframe.is-in{opacity:1;transform:none}
.wframe--big{grid-column:span 4;grid-row:span 2}
.wframe--s{grid-column:span 2;grid-row:span 1}
.wframe--w{grid-column:span 3;grid-row:span 1}
.wframe::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(6,9,15,.18) 60%,rgba(6,9,15,.82) 100%);
  transition:opacity .5s}

.wframe__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.9) saturate(.96) contrast(1.02);
  transform:scale(1.02);transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter .6s}
.wframe:hover{border-color:rgba(224,164,49,.4);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(224,164,49,.25)}
.wframe:hover .wframe__img{transform:scale(1.1);filter:brightness(1.04) saturate(1.05) contrast(1.03)}

/* corner index plate (always visible) */
.wframe__no{position:absolute;top:12px;left:12px;z-index:4;font-family:var(--ff-display);
  font-weight:800;font-size:.82rem;letter-spacing:.04em;color:#fff;
  padding:.34em .7em;border-radius:8px;background:rgba(8,12,20,.55);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.wframe__tool{position:absolute;top:12px;right:12px;z-index:4;font-weight:700;font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  padding:.36em .65em;border-radius:8px;background:rgba(224,164,49,.12);
  border:1px solid rgba(224,164,49,.4);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-6px);transition:opacity .45s,transform .45s}
.wframe:hover .wframe__tool{opacity:1;transform:none}

/* glass plaque — slides up on hover */
.wframe__plate{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:clamp(14px,1.6vw,20px);
  background:linear-gradient(180deg,transparent,rgba(8,12,20,.55) 40%,rgba(8,12,20,.86));
  transform:translateY(28%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.wframe:hover .wframe__plate{transform:translateY(0)}
.wframe__name{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.32rem);
  color:#fff;line-height:1.1}
.wframe__role{display:flex;align-items:center;gap:.55em;margin-top:6px;
  font-weight:600;font-size:.82rem;color:#aebbcd}
.wframe__role b{color:var(--gold);font-weight:700}
.wframe__style{display:inline-block;max-height:0;overflow:hidden;opacity:0;
  margin-top:0;color:#cdd8e6;font-size:.84rem;line-height:1.5;
  transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .4s,margin .4s}
.wframe:hover .wframe__style{max-height:60px;opacity:1;margin-top:8px}

/* "featured" gold ribbon on the big frame */
.wframe__ribbon{position:absolute;z-index:4;top:18px;right:-42px;transform:rotate(45deg);
  background:linear-gradient(90deg,var(--gold),#f2b948);color:#1a1300;
  font-weight:800;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5em 3.2em;box-shadow:0 8px 18px -6px rgba(224,164,49,.6)}

/* under-gallery selling caption */
.works__cap{position:relative;z-index:2;margin:clamp(22px,3vw,34px) 0 0;text-align:center;
  color:#9fb0c6;font-size:.96rem}
.works__cap b{color:#fff;font-weight:700}
.works__cap .gold{color:var(--gold)}

/* ===================== ОТЗЫВЫ ===================== */
.reviews{position:relative;overflow:hidden;color:#eaf0f7;
  padding:clamp(70px,8vw,120px) 0 clamp(80px,10vw,140px);
  background:linear-gradient(180deg,#06090f 0%,#0a1322 100%);
  border-top:1px solid rgba(255,255,255,.06)}
.reviews__head{position:relative;z-index:2;text-align:center;max-width:680px;
  margin:0 auto clamp(34px,4.5vw,54px)}
.reviews__eye{display:inline-flex;align-items:center;gap:.6em;color:var(--teal);
  font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.reviews__eye .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 12px var(--teal)}
.reviews h2{margin:16px 0 0;font-size:clamp(1.9rem,4.4vw,3.2rem);color:#fff;line-height:1.05}
.reviews h2 .hl{color:var(--teal)}

.reviews__grid{position:relative;z-index:2;display:grid;gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(3,1fr)}
.rcard{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,34px) clamp(24px,2.4vw,30px) clamp(22px,2.2vw,28px);
  border-radius:20px;background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);
  box-shadow:0 36px 70px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;transform:translateY(26px);
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s,border-color .4s,box-shadow .4s}
.rcard.is-in{opacity:1;transform:none}
.rcard:hover{border-color:rgba(127,227,218,.35);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(127,227,218,.2)}
.rcard__q{font-family:var(--ff-display);font-weight:800;font-size:3.4rem;line-height:.7;
  color:var(--teal);opacity:.5;height:.5em}
.rcard__stars{display:flex;gap:3px;margin:14px 0 0}
.rcard__stars svg{width:16px;height:16px;fill:var(--gold)}
.rcard__text{margin:14px 0 0;color:#cdd8e6;font-size:.96rem;line-height:1.62;flex:1}
.rcard__foot{display:flex;align-items:center;gap:14px;margin-top:20px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.rcard__av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-display);font-weight:800;font-size:1.05rem;color:#0a1322;
  background:linear-gradient(135deg,var(--teal),var(--gold))}
.rcard__who{display:flex;flex-direction:column;gap:3px}
.rcard__nm{font-weight:700;font-size:.98rem;color:#fff}
.rcard__badges{display:flex;flex-wrap:wrap;gap:6px}
.rcard__badge{font-weight:600;font-size:.68rem;letter-spacing:.02em;color:#aebbcd;
  padding:.28em .6em;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12)}
.rcard__date{margin-top:14px;font-size:.76rem;color:#7e8da0;letter-spacing:.04em}

.reviews__more{position:relative;z-index:2;margin-top:clamp(34px,4vw,50px);text-align:center}
.reviews__more a{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:.96rem;
  color:#0a1322;background:var(--teal);padding:.85em 1.7em;border-radius:999px;
  transition:transform .35s,background .3s,box-shadow .3s;box-shadow:0 14px 30px -12px rgba(10,142,132,.6)}
.reviews__more a:hover{background:var(--teal-deep);transform:translateY(-2px);
  box-shadow:0 20px 40px -14px rgba(10,142,132,.7)}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .wframe--big{grid-column:span 6;grid-row:span 2}
  .wframe--s,.wframe--w{grid-column:span 3}
  .reviews__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .works__gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .wframe,.wframe--big,.wframe--s,.wframe--w{grid-column:span 2;grid-row:span 1;aspect-ratio:4/3}
  .wframe{cursor:pointer}
  /* touch: reveal plaque + style always */
  .wframe__plate{transform:translateY(0)}
  .wframe__style{max-height:60px;opacity:1;margin-top:8px}
  .wframe__tool{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .wframe__img{transition:none}
  .works__spot{display:none}
}