:root{
  --ink:#151B3A;--ink-2:#2E3557;--ink-3:#4A5172;
  --line:#DADDEA;--line-2:#C5CAE4;--page:#FBFBFD;--tint:#EEF0FA;
  --accent:#2D46E0;--accent-dark:#1B2A9E;--accent-light:#AFBDFF;--on-dark:#C9CDE4;
  --gutter:clamp(20px,4vw,48px);
  --s2:12px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;--s7:64px;--s8:96px;--sec:clamp(72px,9vw,136px);
  /* scara: 14 / 16 / 18 / 22 / 28-44 / 36-60 / 40-84 */
  --t-cap:.875rem;--t-sm:1rem;--t-body:1.125rem;--t-lead:1.375rem;
  --f:'Schibsted Grotesk';--hw:700;--ease:cubic-bezier(.16,1,.3,1);
  --t-h3:clamp(1.75rem,3.4vw,2.75rem);--t-h2:clamp(2.25rem,4.6vw,3.75rem);--t-display:clamp(2.5rem,6.2vw,5.25rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f),ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;font-size:var(--t-body);line-height:1.55}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
/* schimbările de culoare la hover și focus se fac lin, peste tot */
a,button{transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease,text-decoration-color 160ms ease}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.blue :focus-visible,.dark :focus-visible{outline-color:#FFFFFF}
[hidden]{display:none !important}
[id]{scroll-margin-top:88px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:40;padding:12px 20px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.w{max-width:1248px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.tint{background:var(--tint)}
.blue{background:var(--accent);color:#FFFFFF}
.dark{background:var(--ink);color:#FFFFFF}

/* sistemul celor două puncte, luat din semnul ·S. : un punct ridicat înainte, punctul de final după.
   Amândouă sunt desenate, ca să fie egale în orice font. Primul stă cu marginea de sus la înălțimea majusculelor. */
.d::before,.d i{display:inline-block;width:.19em;height:.19em;border-radius:50%;background:var(--accent)}
.d::before{content:"";margin:0 .1em 0 -.29em;vertical-align:.51em;vertical-align:calc(1cap - .19em)}
.d i{margin-left:.07em;overflow:hidden;color:transparent}
.d .e,.nw{white-space:nowrap}
.blue .d::before,.blue .d i,.dark .d::before,.dark .d i{background:var(--accent-light)}

.h2{font-size:var(--t-h2);font-weight:var(--hw);line-height:1.05;letter-spacing:-.025em}
.intro{max-width:34em;margin-top:var(--s3);color:var(--ink-3);text-wrap:pretty}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent);color:#FFFFFF;font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-sm{min-height:44px;padding:10px 20px}
.btn-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.lnk{font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.lnk:hover{color:var(--accent-dark);text-decoration-thickness:3px}

/* antet */
.top{position:sticky;top:0;z-index:30;background:var(--page);border-bottom:1px solid var(--line)}
/* antet translucid: pagina se vede încețoșat prin el. Rămâne plin dacă browserul nu știe backdrop-filter sau dacă omul a cerut mai puțină transparență */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top{background:rgba(251,251,253,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:rgba(21,27,58,.1)}
  @media (prefers-reduced-transparency:reduce){.top{background:var(--page);-webkit-backdrop-filter:none;backdrop-filter:none}}
}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-block:12px}
.logo{--m:32px;display:inline-flex;align-items:center;gap:calc(var(--m)*.38);padding:10px 0;color:var(--ink);text-decoration:none}
/* semnul e mai mic decât rândul; conturul îi păstrează grosimea literei de dinainte */
.logo svg{flex:none;width:auto;height:calc(var(--m)*.8);overflow:visible;color:var(--accent)}
.logo svg path{stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.logo-sep{flex:none;width:1px;height:calc(var(--m)*.6);background:linear-gradient(to bottom,rgba(21,27,58,0),#151B3A 30%,#151B3A 70%,rgba(21,27,58,0))}
.logo-name{font-family:Mukta,var(--f),sans-serif;font-size:calc(var(--m)*.941);font-weight:800;line-height:var(--m);white-space:nowrap}
/* limba: glob și codul celeilalte limbi. Pe ecran lat stă la capătul meniului, pe telefon în dreapta logoului */
.lang{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--t-sm);font-weight:600;text-decoration:none}
.lang:hover{color:var(--accent)}
.lang svg{width:20px;height:20px}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px clamp(12px,2.2vw,28px);font-size:var(--t-sm);font-weight:600}
.nav a:not(.btn){padding:12px 0;text-decoration:none}
.nav a:not(.btn):hover{color:var(--accent)}
@media (max-width:899px){.logo{--m:27px}.nav-wide{display:none}}
/* „Cercetare” încape lângă celelalte legături abia de la 1000px; mai îngust apare doar în meniul de pe telefon */
@media (max-width:999px){.nav-xl{display:none}}
/* telefon: rândul cu logo (12 + 56 + 8 px) iese din ecran la derulare, meniul rămâne sus */
.burger{display:none}
@media (max-width:767px){
  .logo{height:56px;padding:0}
  .lang{order:1;margin-left:auto}
  /* telefon, cu JavaScript: un singur rând (logo și buton de meniu). Legăturile apar sub el la apăsare, iar limba stă discret la capătul listei */
  .js .top-in{gap:8px 16px}
  .js .lang{display:none}
  .js .top.deschis .lang{order:4;display:inline-flex;margin:0 0 var(--s2);font-weight:400;color:var(--ink-2)}
  .js .burger{order:2;margin-left:auto;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
  .burger svg{width:26px;height:26px}
  .burger svg:last-child,.burger[aria-expanded="true"] svg:first-child{display:none}
  .burger[aria-expanded="true"] svg:last-child{display:block}
  .js .nav{order:3;display:none;flex-basis:100%;margin:0;padding-bottom:var(--s3)}
  .js .top.deschis .nav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;font-size:var(--t-body)}
  .js .nav a:not(.btn){padding:14px 0;border-top:1px solid var(--line)}
  .js .nav .nav-wide,.js .nav .nav-xl{display:block}
  .js .nav .btn{justify-content:center;margin-top:var(--s2)}
  /* telefon, fără JavaScript: legăturile rămân pe al doilea rând */
  html:not(.js) .top{top:-76px}
  html:not(.js) .nav{order:2;flex-basis:100%;justify-content:space-between}
}
@media (max-width:420px){html:not(.js) .nav{gap:4px 8px;font-size:.9375rem}html:not(.js) .nav .btn-sm{padding:8px 14px;font-size:inherit}}

/* prima secțiune */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,9vw,120px) clamp(48px,6vw,80px)}
.hero>.w,#servicii>.w,.blue>.w,.contact>.w{position:relative}
.hero h1{max-width:20ch;font-size:var(--t-display);font-weight:var(--hw);line-height:1.02;letter-spacing:-.03em}
.sub{max-width:36em;margin-top:var(--s5);font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.cu{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-3)}
.cu strong{color:var(--ink);font-weight:600}
/* primul punct, tăiat de marginea din dreapta. De la tabletă în sus se scrie în el cod, rând cu rând (socialit.js) */
.cod{position:absolute;right:-40px;top:-64px;width:120px;aspect-ratio:1;overflow:hidden;border-radius:50%;background:var(--accent);color:#FFFFFF}
.cod>*{display:none}
@media (min-width:768px){
  .hero .w>*{max-width:60%}
  /* mărimea literei ține de diametrul cercului, ca textul să ocupe mereu același loc în el */
  .cod{z-index:1;right:-6%;top:50%;width:min(40vw,540px);transform:translateY(-50%);font:500 min(1.47vw,19.8px)/1.82 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace}
  /* codul stă mereu centrat pe verticală în cerc; scriptul îl mută pe măsură ce se adaugă rânduri */
  .cod-in{position:absolute;left:7%;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:2em auto;column-gap:1.7em;transition:transform .4s var(--ease)}
  .cod pre{margin:0;font:inherit;white-space:pre}
  .cod-nr{text-align:right;opacity:.38}
  .cod i{font-style:normal;color:var(--accent-light)}
  .cod b{font-weight:700}
  /* cursorul: o linie subțire la capătul codului */
  .cur{display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-.2em;background:#FFFFFF}
}

/* proiecte */
.shot{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line-2);border-radius:12px;background:#FFFFFF}
.shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
/* imaginile din lista de proiecte: duoton albastru; revin la culorile lor când cardul este sub mouse sau are focus.
   Imaginea mare de la iTeach.ro rămâne mereu colorată. Cardurile nu se măresc la hover: trecerea de culoare este de ajuns.
   Doar unde există hover: pe telefon și tabletă rămân colorate, altfel n-ar mai fi văzute niciodată în culori. */
@media (hover:hover){
  .plist .shot{position:relative;isolation:isolate}
  .plist .shot img{filter:grayscale(1) contrast(1.08);transition:filter 350ms ease}
  .plist .shot::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:screen;pointer-events:none;transition:opacity 350ms ease}
  .plist li:hover .shot img{filter:none}
  .plist li:hover .shot::after{opacity:0}
  /* imediat după „Vedeți mai multe proiecte”, cardul apărut sub mouse nu se colorează până la prima mișcare (socialit.js) */
  #mai-multe.nou li:hover .shot img{filter:grayscale(1) contrast(1.08)}
  #mai-multe.nou li:hover .shot::after{opacity:1}
  /* focusul de la tastatură colorează și el cardul; focusul pus de script după un clic cu mouse-ul (la „Vedeți mai multe proiecte”) nu.
     Reguli separate, ca un browser fără :has() să păstreze măcar hoverul. */
  .plist li:has(:focus-visible) .shot img{filter:none}
  .plist li:has(:focus-visible) .shot::after{opacity:0}
}
@media (prefers-reduced-motion:reduce){.plist .shot img,.plist .shot::after{transition:none}}
/* imaginea mare de la iTeach.ro nu are duoton, așa că are ea mișcarea: se mărește ușor când cardul este sub mouse sau are focus */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .feat .shot img{transition:transform 400ms cubic-bezier(.22,1,.36,1)}
  .feat:hover .shot img{transform:scale(1.03)}
  .feat:has(:focus-visible) .shot img{transform:scale(1.03)}
}
.tag{font-size:var(--t-cap);font-weight:600;color:var(--accent)}
/* după tip pot urma „Produs propriu” (marcat cu un punct albastru, ca titlurile) și luna lansării */
.tag span{font-weight:400;color:var(--ink-3)}
.tag span::before{content:"·";margin-inline:.5em .25em;color:var(--ink-3)}
.tag .own{font-weight:600;color:var(--ink)}
.tag .own::before{content:"";display:inline-block;width:.5em;height:.5em;margin-inline:.55em .25em;border-radius:50%;background:var(--accent);vertical-align:.08em}
.feat{display:grid;gap:var(--s4) var(--s6);align-items:center;margin-top:var(--s6)}
.feat h3{margin-top:6px;font-size:var(--t-h3);font-weight:var(--hw);line-height:1.1;letter-spacing:-.02em}
.feat p:not(.tag){max-width:30em;margin-top:var(--s3)}
.feat .lnk{display:inline-block;margin-top:var(--s4)}
@media (min-width:900px){.feat{grid-template-columns:7fr 5fr}}
.plist{display:grid;gap:var(--s6) var(--s5);margin-top:var(--s7)}
.plist .tag{margin-top:var(--s3)}
/* a doua parte a listei: până la „Vedeți mai multe proiecte” se văd doar vârfurile primelor capturi, topite spre fundal,
   cu butonul peste ele (doar când există JavaScript; fără el se vede toată lista) */
.mai{display:none}
.js .mai{display:block;position:relative;margin-top:-24px;text-align:center}
.js #mai-multe:not(.deschis){max-height:clamp(80px,8vw,120px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
/* butonul stă peste capturile topite: are fundalul secțiunii, ca imaginea să nu se vadă prin el */
.js .mai .btn:not(:hover){background:var(--tint)}
#mai-multe{margin-top:var(--s6)}
.plist h3{margin-top:2px;font-size:var(--t-lead);font-weight:var(--hw);line-height:1.25}
.plist h3 a{text-decoration:none}
.plist h3 a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.plist .lnk{display:inline-block;margin-top:var(--s2);font-size:var(--t-sm)}
.plist p:not(.tag){margin-top:6px;font-size:var(--t-sm);color:var(--ink-3)}
@media (min-width:700px){.plist{grid-template-columns:repeat(2,1fr)}}
/* pe ecran lat: trei proiecte pe rând; cele marcate „lat” stau câte două pe rând (mai late) */
@media (min-width:1000px){.plist{grid-template-columns:repeat(6,1fr)}.plist li{grid-column:span 2}.plist .lat{grid-column:span 3}}
/* telefon: proiectele se derulează pe orizontală, ca pagina să nu se lungească */
@media (max-width:699px){.plist{position:relative;grid-auto-flow:column;grid-auto-columns:80%;gap:var(--s3);margin-inline:calc(var(--gutter)*-1);padding:0 var(--gutter) var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter)}.plist li{scroll-snap-align:start}}

/* servicii */
/* puncte care pornesc din colțul din dreapta sus: mari lângă colț, apoi mici, apoi se sting înainte de text */
#servicii{position:relative;overflow:hidden}
#servicii::before,#servicii::after{content:"";position:absolute;inset:0;pointer-events:none}
#servicii::before{background:radial-gradient(circle,rgba(45,70,224,.36) 1.5px,transparent 2px) right top/28px 28px;-webkit-mask-image:radial-gradient(70% clamp(260px,40vw,540px) at 100% 0,#000,transparent);mask-image:radial-gradient(70% clamp(260px,40vw,540px) at 100% 0,#000,transparent)}
#servicii::after{background:radial-gradient(circle,var(--accent) 3.5px,transparent 4px) right top/28px 28px;-webkit-mask-image:radial-gradient(36% clamp(130px,20vw,270px) at 100% 0,#000,transparent);mask-image:radial-gradient(36% clamp(130px,20vw,270px) at 100% 0,#000,transparent)}
.srv{margin-top:var(--s6)}
/* fiecare serviciu începe cu o linie deschisă, marcată la capăt cu albastru */
.srv>li{position:relative;display:grid;gap:var(--s3) var(--s6);padding-block:var(--s5);border-top:1px solid var(--line-2)}
.srv>li::before{content:"";position:absolute;left:0;top:-2px;width:56px;height:3px;border-radius:2px;background:var(--accent)}
.srv h3{font-size:var(--t-h3);font-weight:var(--hw);line-height:1.1;letter-spacing:-.02em}
.srv-for{margin-top:8px;color:var(--ink-3)}
.srv-body{max-width:38em}
.srv-body p+p{margin-top:var(--s3)}
.srv-body strong{font-weight:600}
.srv-done{font-size:var(--t-sm);color:var(--ink-3)}
@media (min-width:900px){.srv>li{grid-template-columns:5fr 7fr;padding-block:var(--s6)}}
/* încheierea secțiunii stă pe aceleași două coloane ca serviciile: întreținerea în stânga, întrebarea în dreapta */
.srv-end{display:grid;gap:var(--s3) var(--s6);padding-top:var(--s5);border-top:1px solid var(--line-2)}
@media (min-width:900px){.srv-end{grid-template-columns:5fr 7fr}}
.srv-end p{max-width:38em}

/* cum lucrăm: cinci trepte care urcă și se închid la culoare, de la prima discuție până după lansare */
.pasi{display:grid;gap:var(--s3);margin-top:var(--s6)}
.pasi li{display:flex;flex-direction:column;padding:var(--s4);border-radius:20px;background:var(--bg,#FFFFFF);color:var(--fg,var(--ink))}
.pasi li:nth-child(1){--k:4}
.pasi li:nth-child(2){--k:3;--bg:#DCE1FA}
.pasi li:nth-child(3){--k:2;--bg:var(--accent-light)}
.pasi li:nth-child(4){--k:1;--bg:var(--accent);--fg:#FFFFFF;--nr:var(--accent-light)}
.pasi li:nth-child(5){--k:0;--bg:var(--ink);--fg:#FFFFFF;--nr:var(--accent-light)}
.nr{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:var(--hw);line-height:1;letter-spacing:-.03em;color:var(--nr,var(--accent))}
.pasi h3{margin-top:auto;padding-top:var(--s5);font-size:var(--t-lead);font-weight:var(--hw);line-height:1.2}
.pasi p{margin-top:8px;font-size:var(--t-sm);opacity:.88}
.nota{max-width:40em;margin-top:var(--s5);color:var(--ink-2)}
.nota strong{color:var(--ink);font-weight:600}
@media (min-width:640px){.pasi{grid-template-columns:repeat(2,1fr)}.pasi li:last-child{grid-column:1/-1}}
@media (min-width:1100px){.pasi{grid-template-columns:repeat(5,1fr)}.pasi li,.pasi li:last-child{grid-column:auto;min-height:264px;margin-top:calc(var(--k)*28px)}.pasi h3{font-size:1.25rem}}

/* despre noi */
.eyebrow{font-size:var(--t-sm);font-weight:600;color:var(--accent-light)}
.motto{margin-top:var(--s2);font-size:var(--t-display);font-weight:var(--hw);line-height:1;letter-spacing:-.03em}
/* semnul ·S. stă ca filigran în mijlocul secțiunii */
.blue{position:relative;overflow:hidden}
/* puncte legate între ele, în colțul din dreapta sus, deasupra textului: oamenii din jurul fiecărui proiect. Desenul e al nostru (img/despre-retea.svg) */
.blue::before{content:"";position:absolute;left:0;top:0;width:100%;height:clamp(300px,46vw,600px);background:url(img/despre-retea.svg) right top/cover no-repeat;-webkit-mask-image:linear-gradient(#000 40%,transparent 62%);mask-image:linear-gradient(#000 40%,transparent 62%);pointer-events:none}
@media (max-width:767px){.blue::before{opacity:.5}}
.despre{display:grid;gap:var(--s3) var(--s7);margin-top:var(--s6)}
.despre p{max-width:34em}
.despre .lead{font-size:var(--t-lead);line-height:1.45}
@media (min-width:900px){.despre{grid-template-columns:7fr 5fr}}
.princ{display:grid;gap:var(--s4) var(--s6);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.35)}
.princ strong{display:block;font-size:var(--t-lead);line-height:1.3}
.princ span{display:block;margin-top:6px;font-size:var(--t-sm);color:rgba(255,255,255,.9)}
@media (min-width:800px){.princ{grid-template-columns:repeat(3,1fr)}}

/* contact: pe fundal deschis, ca să nu stea două secțiuni închise una după alta. În dreapta, semnul Social IT ca filigran */
.contact{position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;right:-3%;top:50%;width:min(64%,780px);aspect-ratio:100.7/68.3;transform:translateY(-50%);background:var(--accent);-webkit-mask:url(logo/social-it-semn-alb.svg) center/contain no-repeat;mask:url(logo/social-it-semn-alb.svg) center/contain no-repeat;opacity:.06;pointer-events:none}
.contact p{max-width:32em;margin-top:var(--s3);color:var(--ink-2)}
.mail{display:inline-block;margin-top:var(--s5);font-size:clamp(1.75rem,5.2vw,3.75rem);font-weight:var(--hw);line-height:1.15;letter-spacing:-.02em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;text-underline-offset:8px}
/* e-mailul și telefonul nu sunt subliniate în repaus; linia apare la hover și la focus */
.mail:hover,.mail:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s4);color:var(--ink-2)}
.contact-row a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px}
.contact-row a:hover,.contact-row a:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}
/* subsol: o bandă îngustă cu datele firmei. Loc liber în dreapta pentru butonul „Înapoi sus” */
.ft{font-size:var(--t-sm);color:var(--on-dark)}
.ft-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px var(--s6);padding-block:var(--s4)}
.ft strong{font-weight:600;color:#FFFFFF}
.ft a{color:#FFFFFF}
@media (max-width:1400px){.ft-in{padding-right:calc(var(--gutter) + 64px)}}

/* bara de cookie-uri: jos, în stânga, cu două butoane la fel de vizibile */
.acord{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:grid;gap:var(--s3);width:min(440px,calc(100% - 32px));padding:var(--s4);border:1px solid var(--line-2);border-radius:20px;background:#FFFFFF;box-shadow:0 18px 40px -18px rgba(21,27,58,.45);font-size:var(--t-sm)}
.acord-b{display:flex;gap:12px}
.acord-b .btn{flex:1;justify-content:center}
/* buton care arată ca un link (setările de cookie-uri din subsol) */
.ca{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.ft .ca{color:#FFFFFF}

/* înapoi sus: un punct albastru în colțul din dreapta jos; apare după ce prima secțiune a ieșit din ecran */
.sus{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:grid;place-items:center;width:48px;height:48px;border:2px solid #FFFFFF;border-radius:50%;background:var(--accent);color:#FFFFFF;box-shadow:0 6px 18px -6px rgba(21,27,58,.45);transition:opacity 200ms ease,visibility 200ms,transform 200ms var(--ease),background-color 160ms ease}
.sus:hover{background:var(--accent-dark)}
.sus:focus-visible{border-radius:50%}
.sus svg{width:22px;height:22px}
.js .sus:not(.on){opacity:0;visibility:hidden;transform:translateY(8px)}

/* mișcare. Totul stă în no-preference: cine a cerut mai puțină mișcare vede pagina direct, fără animații.
   Se animă doar opacity și transform. Fără JavaScript nimic nu rămâne ascuns (clasa .js). */
@media (prefers-reduced-motion:no-preference){
  /* titluri: apare primul punct, apoi punctul de final coboară la locul lui */
  .js .d:not(.in)::before,.js .d:not(.in) i{opacity:0}
  .d.in::before{animation:apare .6s var(--ease) backwards}
  .d.in i{animation:cade .7s var(--ease) .4s backwards}
  @keyframes apare{from{opacity:0;transform:scale(0)}}
  @keyframes cade{from{opacity:0;transform:translateY(calc(.19em - 1cap))}}
  /* blocurile (.r) urcă ușor când intră în ecran; .rs își aduce copiii pe rând */
  .js .r:not(.in),.js .rs:not(.in)>*{opacity:0}
  .r.in,.rs.in>*{animation:urca .7s var(--ease) backwards}
  .rs.in>:nth-child(2){animation-delay:90ms}
  .rs.in>:nth-child(3){animation-delay:180ms}
  .rs.in>:nth-child(4){animation-delay:270ms}
  .rs.in>:nth-child(5){animation-delay:360ms}
  .rs.in>:nth-child(6){animation-delay:450ms}
  .rs.in>:nth-child(n+7){animation-delay:540ms}
  @keyframes urca{from{opacity:0;transform:translateY(24px)}}
  /* la încărcare: textul din hero urcă pe rând, iar cercul crește */
  .hero .w>*{animation:urca .7s var(--ease) backwards}
  .hero .sub{animation-delay:80ms}
  .hero .cta{animation-delay:160ms}
  .hero .cu{animation-delay:240ms}
  .cod{animation:creste .9s var(--ease) .1s backwards}
  /* cursorul clipește doar după ce s-a terminat de scris */
  .cod.gata .cur{animation:clipeste 1.1s steps(1) infinite}
  @keyframes clipeste{50%{opacity:0}}
  @keyframes creste{from{opacity:0;scale:.8}}
  /* linia albastră a fiecărui serviciu se trage de la stânga */
  .srv>li::before{transform-origin:left}
  .srv>li.in::before{animation:trage .6s var(--ease) .25s backwards}
  @keyframes trage{from{transform:scaleX(0)}}
  /* treptele se ridică puțin sub cursor */
  .pasi li{transition:transform 320ms var(--ease),box-shadow 320ms var(--ease)}
  @media (hover:hover){.pasi li:hover{transform:translateY(-8px);box-shadow:0 18px 30px -18px rgba(21,27,58,.45)}}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

/* ===== studiu de caz (socialit-ro-studiu-*.html): structură simplă, fără carduri ===== */
.cap{padding-block:clamp(40px,6vw,88px) 0}
.cap h1{font-size:clamp(1.75rem,8.4vw,5.25rem);font-weight:var(--hw);line-height:1.02;letter-spacing:-.03em}
/* rândul de deasupra titlului: înapoi la proiecte, apoi ce fel de pagină este */
.cap-sus{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s4)}
.cap-sus .tag{padding-left:var(--s3);border-left:1px solid var(--line-2);font-size:var(--t-sm)}
.inapoi{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--t-sm);font-weight:600;text-decoration:none}
.inapoi svg{box-sizing:content-box;width:16px;height:16px;padding:9px;border:1.5px solid var(--line-2);border-radius:50%;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 200ms var(--ease)}
.inapoi:hover{color:var(--accent)}
/* telefon: lângă eticheta paginii rămâne doar săgeata (textul îl aud cititoarele de ecran), fără linia despărțitoare, ca totul să încapă pe un rând */
@media (max-width:767px){
  .cap-sus .tag{padding-left:0;border-left:0}
  .cap-sus .inapoi:not(:only-child) span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.inapoi:hover svg{border-color:var(--accent);background:var(--accent);color:#FFFFFF;transform:translateX(-3px)}
/* fișa proiectului */
.fisa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--s4) var(--s6);margin:var(--s6) 0 0}
.fisa dt{font-size:var(--t-cap);color:var(--ink-3)}
.fisa dd{margin:4px 0 0;font-weight:600;line-height:1.35}
/* capturi din aplicație */
.cadru{margin:0}
.cadru img{width:100%;height:auto;border:1px solid var(--line-2);border-radius:12px;background:#FFFFFF}
.cadru figcaption{margin-top:var(--s2);font-size:var(--t-sm);color:var(--ink-3)}
.cap .cadru{margin-top:var(--s7)}
.capturi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--s5);margin-top:var(--s7)}
/* capturi de telefon (înguste și înalte): una lângă alta, fără să se întindă pe toată lățimea */
.telefoane{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,260px));justify-content:center;gap:var(--s5);margin-top:var(--s7)}
.cadru.tel{max-width:300px;justify-self:center}
.doua .telefoane{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
@media (max-width:600px){.telefoane{grid-template-columns:repeat(2,1fr);gap:var(--s3)}.cadru.tel{max-width:240px}}
/* o captură cu alt format, tăiată la fel ca vecinele ei */
.taie img{aspect-ratio:2/1;object-fit:cover;object-position:top}
/* loc lăsat pentru un fapt care lipsește încă */
.completat{padding:var(--s2) var(--s3);border:1.5px dashed var(--line-2);border-radius:12px;font-size:var(--t-sm);color:var(--ink-3)}
/* text lângă o figură */
.doua{display:grid;gap:var(--s6) var(--s7);align-items:center}
@media (min-width:900px){.doua{grid-template-columns:1fr 1fr}}
.txt p{max-width:34em;margin-top:var(--s3)}
.txt h2+p{margin-top:var(--s4)}
/* nouă situații, un singur portofoliu */
.noua{margin:0}
.noua-in{display:flex;align-items:center;gap:var(--s4)}
.noua-g{display:grid;grid-template-columns:repeat(3,36px);gap:14px}
.noua-g span{aspect-ratio:1;border:2.5px solid var(--ink);border-radius:50%}
.noua svg{flex:none;width:64px}
.noua b{flex:none;width:64px;aspect-ratio:1;border-radius:50%;background:var(--accent)}
/* pe telefoane foarte înguste figura se micșorează, ca să nu împingă pagina în lateral */
@media (max-width:400px){.noua-in{gap:var(--s3)}.noua-g{grid-template-columns:repeat(3,28px);gap:10px}.noua svg{width:40px}.noua b{width:48px}}
.doua>*{min-width:0}
.noua figcaption{margin-top:var(--s4);font-size:var(--t-sm);color:var(--ink-3)}
/* pași numerotați și puncte: grile simple */
.pasi-s,.dec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--s5) var(--s6);margin-top:var(--s6)}
.pasi-s{counter-reset:pas}
.pasi-s li{display:flex;gap:var(--s3)}
.pasi-s li::before{counter-increment:pas;content:counter(pas);flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint);font-size:var(--t-sm);font-weight:700}
.pasi-s h3,.dec h3{font-size:var(--t-lead);font-weight:var(--hw);line-height:1.25}
.pasi-s p,.dec p{margin-top:6px;font-size:var(--t-sm);color:var(--ink-2)}
/* „Rezultate”: coloane de puncte care urcă, în dreapta textului (decor, nu grafic cu date) */
.rez{position:relative;overflow:hidden}
.rez>.w{position:relative}
.rez>.w>*{position:relative}
.rez>.w::before{content:"";position:absolute;right:var(--gutter);top:50%;width:min(32%,380px);aspect-ratio:360/324;max-height:calc(100% + var(--sec));transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 360 324%22 fill=%22%232D46E0%22%3E%3Cg fill-opacity=%220.16%22%3E%3Ccircle cx=%2218%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%2254%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%2254%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%2290%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%2290%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22126%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22126%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22126%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22162%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22162%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22162%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22162%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22198%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22198%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22198%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22198%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22234%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22234%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22234%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22234%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22234%22 cy=%22162%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%22162%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%22126%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%22162%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%22126%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%2290%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%22306%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%22162%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%22126%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%2290%22 r=%2210%22/%3E%3Ccircle cx=%22342%22 cy=%2254%22 r=%2210%22/%3E%3C/g%3E%3Cg fill-opacity=%220.42%22%3E%3Ccircle cx=%2218%22 cy=%22270%22 r=%2210%22/%3E%3Ccircle cx=%2254%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%2290%22 cy=%22234%22 r=%2210%22/%3E%3Ccircle cx=%22126%22 cy=%22198%22 r=%2210%22/%3E%3Ccircle cx=%22162%22 cy=%22162%22 r=%2210%22/%3E%3Ccircle cx=%22198%22 cy=%22162%22 r=%2210%22/%3E%3Ccircle cx=%22234%22 cy=%22126%22 r=%2210%22/%3E%3Ccircle cx=%22270%22 cy=%2290%22 r=%2210%22/%3E%3Ccircle cx=%22306%22 cy=%2254%22 r=%2210%22/%3E%3C/g%3E%3Cg fill-opacity=%221%22%3E%3Ccircle cx=%22342%22 cy=%2218%22 r=%2210%22/%3E%3C/g%3E%3C/svg%3E") right center/contain no-repeat;pointer-events:none}
/* pe telefon și tabletă stau mici, în colțul din dreapta sus, lângă titlu, ca să nu ajungă sub text */
@media (max-width:899px){.rez>.w::before{top:calc(var(--sec) * -1 + 18px);width:118px;max-height:none;transform:none;opacity:.8}}
@media (max-width:400px){.rez>.w::before{top:calc(var(--sec) * -1 + 12px);width:84px}}

/* ===== pagină de text (confidențialitate) ===== */
.legal{max-width:44em}
.legal h2{margin-top:var(--s6);font-size:var(--t-lead);font-weight:var(--hw);line-height:1.2}
.legal p{max-width:none}
.legal ul{margin-top:var(--s3);padding-left:1.2em;list-style:disc}
.legal li+li{margin-top:var(--s2)}
.legal .btn{margin-top:var(--s4)}