/* Studiile de caz — web.opticaldesign.ro/<id>.html (se încarcă după site.css) */
.case .c-hero{padding-bottom:clamp(30px,4vw,60px)}
.case .c-hero h1{font-size:clamp(51px,min(10.2vw,16.15vh),187px)}
.case .c-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:10px;font:700 13px/1 var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-decoration:none;transition:color .2s}
.case .c-back:hover{color:var(--paper)}
.case .c-back{display:flex;width:max-content}
.case .c-tags{margin-top:22px}
.case .c-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(34px,4vw,56px);border-top:1.5px solid var(--line);max-width:1400px}
.case .c-facts div{padding:18px 20px 4px 0;border-right:1.5px solid var(--line);margin-right:20px}
.case .c-facts div:last-child{border-right:0;margin-right:0}
.case .c-facts dt{font:700 12px/1.2 var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.case .c-facts dd{margin:8px 0 0;font:600 clamp(16px,1.3vw,19px)/1.35 var(--txt);color:var(--paper)}
.case .c-show{padding:clamp(10px,2vw,30px) var(--pad) clamp(70px,8vw,120px);max-width:1500px;margin:0 auto}
.case .c-show .stage{padding:0 10% 8% 0}
.case .c-show .phone{width:22%}
.case .c-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);border-top:2px solid var(--line);max-width:1600px;margin:0 auto}
.case .c-big{margin-top:22px;font:500 clamp(20px,1.9vw,30px)/1.42 var(--txt);color:#D9D9E0;text-wrap:pretty}
.case .c-gal{border-top:2px solid var(--line)}
.case .c-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,48px);margin-top:clamp(40px,5vw,72px);max-width:1600px}
.case .c-fig{margin:0}
.case .c-fig.wide{grid-column:1/-1;max-width:1150px}
.case .c-fig .browser img{aspect-ratio:16/10}
.case .c-fig figcaption{display:flex;gap:14px;align-items:baseline;margin-top:16px;font:500 16px/1.45 var(--txt);color:var(--mute)}
.case .c-fig figcaption span{font:400 22px/1 var(--disp);color:var(--or)}
.case .c-mob{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,100px);align-items:center;border-top:2px solid var(--line);background:linear-gradient(180deg,var(--ink) 0,var(--ink2) 100%)}
.case .c-list{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0;display:grid;gap:0;max-width:640px}
.case .c-list li{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-top:1.5px solid var(--line);font:500 clamp(17px,1.4vw,21px)/1.45 var(--txt);color:#D9D9E0}
.case .c-list li:last-child{border-bottom:1.5px solid var(--line)}
.case .c-list li span{font:400 24px/1 var(--disp);color:var(--or);flex:none}
.case .c-mob-ph{position:relative;display:flex;flex-direction:column;align-items:center}
.case .c-phone{position:relative;right:auto;bottom:auto;width:min(320px,70%);min-width:0;transform:rotate(-3deg)}
.case .c-phone.full img{transition:object-position 14s linear}
.case .c-mob-ph:hover .c-phone.full img,.case .c-phone.full.play img{object-position:50% 100%}
.case .c-hint{margin-top:26px;font:700 11px var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.case .c-det{border-top:2px solid var(--line)}
.case .c-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,5vw,72px);max-width:1600px}
.case .c-card{background:var(--ink3);border:1.5px solid var(--line);border-radius:22px;padding:clamp(24px,2.4vw,36px);transition:border-color .3s,transform .4s var(--ease)}
.case .c-card:hover{border-color:var(--or);transform:translateY(-4px)}
.case .c-card .n{font:400 clamp(40px,4vw,60px)/1 var(--disp);color:var(--or)}
.case .c-card h3{margin-top:18px;font:400 clamp(24px,2vw,32px)/1.12 var(--disp);text-transform:uppercase;color:var(--paper)}
.case .c-card p{margin-top:12px;color:#C9C9D2;line-height:1.55}
.case .c-nav{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--line)}
.case .c-nx{display:flex;flex-direction:column;gap:12px;padding:clamp(34px,5vw,70px) var(--pad);text-decoration:none;color:var(--paper);transition:background .3s}
.case .c-nx.next{text-align:right;align-items:flex-end;border-left:2px solid var(--line)}
.case .c-nx small{font:700 13px/1 var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.case .c-nx b{font-size:clamp(34px,5vw,84px);line-height:1.08;transition:color .25s}
.case .c-nx:hover{background:var(--ink2)}
.case .c-nx:hover b{color:var(--or)}
.case .c-nx:focus-visible{outline:3px solid var(--or);outline-offset:-6px}
@media (min-width:1700px){.case .c-show,.case .c-story{max-width:1500px}}
@media (max-width:1024px){
  .case .c-facts{grid-template-columns:1fr 1fr}
  .case .c-facts div:nth-child(2){border-right:0;margin-right:0}
  .case .c-cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  .case .c-facts div{border-right:0;margin-right:0;padding-right:10px}
  .case .c-show .phone{width:30%}
  .case .c-story,.case .c-mob{grid-template-columns:1fr}
  .case .c-figs{grid-template-columns:1fr}
  .case .c-mob-ph{order:-1;margin-bottom:10px}
  .case .c-phone{width:min(260px,64%)}
  .case .c-nav{grid-template-columns:1fr}
  .case .c-nx.next{border-left:0;border-top:2px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){
  .case .c-phone.full img{transition:none}
  .case .c-card,.case .c-card:hover{transition:none;transform:none}
}
/* telefonul din „Pe telefon”: înălțimea vine din proporție, nu din captura de 7000 px */
.case .c-phone{height:auto}
.case .c-phone .scr{height:auto;aspect-ratio:9/19.5}
.case .c-phone .scr img{position:absolute;inset:0;width:100%;height:100%}

/* 08.11: primul ecran nu mai e gol pe desktop. Site-ul livrat (desktop + telefon) stă lângă titlu, înclinat 3D,
   iar cifra mare din spate e albastră plină, nu un contur abia vizibil. Pe telefon ordinea rămâne: text, apoi site-ul. */
@media (min-width:1100px){
  .case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .case>*{grid-column:1/-1}
  .case>.c-hero{grid-column:1;grid-row:1;padding-right:clamp(20px,2vw,40px);overflow:visible;z-index:0;isolation:auto}
  .case>.c-show{position:relative;z-index:1;grid-column:2;grid-row:1;align-self:center;max-width:none;margin:0;padding:clamp(120px,min(14vw,17vh),190px) var(--pad) clamp(40px,5vw,80px) 0}
  .case .c-show .stage{padding:0 12% 10% 0;transform:rotate(-2deg)}
  .case .c-show .stage.rv{opacity:1;transform:rotate(-2deg);transition:none}
  .case .c-show .stage-in{transform:rotateY(-14deg) rotateX(6deg)}
  .case .c-show .phone{width:26%}
  .case .c-show .browser img{object-position:0 0}
  .case .c-hero h1{font-size:clamp(51px,min(7.4vw,var(--frame) * .074,15vh),150px)}
  .case .c-facts{grid-template-columns:1fr 1fr;max-width:620px}
  .case .c-hero .lead{max-width:min(600px,100%)}
  .case .c-facts div:nth-child(2){border-right:0;margin-right:0}
  .case .phero .bgword{top:50%;right:auto;left:calc(100% - .1em);font-size:clamp(300px,min(34vw,var(--frame) * .34,62vh),620px);line-height:.8;color:var(--bl);-webkit-text-stroke:0;z-index:-1;animation:none;transform:translateY(-46%) rotate(-5deg)}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .case .c-show .stage-in{animation:caseIn .9s var(--ease) backwards}
  @keyframes caseIn{from{transform:rotateY(-26deg) rotateX(10deg) translateX(60px)}to{transform:rotateY(-14deg) rotateX(6deg)}}
}