/* ==========================================================================
   regen.media: sistem "liquid glass" (vezi design-system/MASTER.md)
   Mobile first: regulile de bază sunt pentru telefon; desktopul se adaugă cu min-width.
   Principii /apple-design: materiale translucide cu muchie luminoasă, ierarhie prin
   grosimea sticlei, arcuri critic amortizate, feedback la apăsare, fontul de sistem
   cu tracking pe mărime, respect pentru reduce motion / transparency / contrast.
   ========================================================================== */
:root{
  --bg:#05050A;--bg2:#0D0D16;
  /* gradientul de brand (ales de utilizator): #403b4a -> #e7e9bb */
  --g1:#403b4a;--g2:#e7e9bb;
  --grad:linear-gradient(120deg,#403b4a 0%,#e7e9bb 100%);
  /* același gradient pentru text mare pe fundal închis, oprit înainte de capătul închis (lizibilitate, min. 3,5:1) */
  --grad-text:linear-gradient(120deg,#e7e9bb 0%,#403b4a 133%);
  --ink:#0B0B10;
  /* textură: pistrui închiși, fini, trecuți prin blur gaussian, ca suprafețele să nu pară perfect lustruite */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' filterUnits='userSpaceOnUse' x='-6' y='-6' width='192' height='192'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='.55'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0 0 0 -.2'/%3E%3C/filter%3E%3Crect x='-6' y='-6' width='192' height='192' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' preserveAspectRatio='none'%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-80' y='-80' width='800' height='800'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='2' seed='7'/%3E%3CfeGaussianBlur stdDeviation='18'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .9 0 0 0 0 .78 1.4 0 0 0 -.5'/%3E%3C/filter%3E%3Crect x='-80' y='-80' width='800' height='800' filter='url(%23m)'/%3E%3C/svg%3E");
  /* glow doar la contact cu cursorul: lumină strânsă în jurul butonului, stânga violet-gri, dreapta crem */
  --rest:0 2px .375rem rgba(0,0,0,.35);
  --glow:-.3125rem 0 1rem -2px rgba(120,108,140,.55),.3125rem 0 1rem -2px rgba(231,233,187,.35);
  --text:#F5F5F7;--muted:#A1A1AA;--line:rgba(255,255,255,.12);
  /* sticlă: subțire pentru elemente mici, groasă pentru meniu și bara de jos */
  --glass-thin:rgba(255,255,255,.07);--glass-thick:rgba(22,22,32,.66);
  --edge:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,255,255,.08);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* arc calculat după parametrii Apple: damping 1.0 (fără rebound), response .4 */
  --spring:linear(0, .082, .243, .413, .562, .682, .774, .841, .89, .925, .949, .965, .977, .984, .99, .993, .995, .997, .998, .999, 1);
  --out:cubic-bezier(.16,1,.3,1);
  --r-card:1.5rem;--r-pill:999px;
  --gap:5.5rem;
  color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x pe html: pe iPhone, Safari lasă pagina să fie trasă lateral dacă ceva iese din ecran și doar body are overflow-x.
   Fără fundal pe html: culoarea de bază vine din body (care ajunge pe tot ecranul); un fundal pe html ar face body să-și picteze
   fundalul peste aură (aura are z-index negativ) și pagina ar deveni neagră complet */
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;scroll-padding-bottom:6rem;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font:400 1.0625rem/1.55 var(--sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a,button{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation;font:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:.1875rem}
::selection{background:#e7e9bb;color:#0B0B10}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
img{display:block}
.wrap{max-width:80rem;margin:0 auto;padding:0 1.25rem}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.skip{position:fixed;left:1rem;top:-3.75rem;z-index:120;background:#fff;color:#000;padding:.625rem 1rem;border-radius:var(--r-pill);text-decoration:none;font-weight:600;transition:top .3s var(--spring)}
.skip:focus{top:max(1rem,env(safe-area-inset-top))}

/* ---------- material liquid glass, reutilizabil ---------- */
/* pastilele care se derulează peste fundal simplu (+1250, rezultate, contact din subsol): sticlă fără blur în spate (blurul costă la scroll pe telefon) */
.stat,.fc a{background:var(--noise) 0 0/11.25rem 11.25rem,rgba(255,255,255,.085);box-shadow:var(--edge)}
.glass,.nav-in,.dock,.tc,.btn-ghost,.stop,.vc,.pl{
  background:var(--noise) 0 0/11.25rem 11.25rem,var(--glass-thin);box-shadow:var(--edge);
  -webkit-backdrop-filter:blur(.875rem) saturate(180%);backdrop-filter:blur(.875rem) saturate(180%)}

/* aura de fundal: lumină colorată fixă, statică */
.aura{position:fixed;inset:0;z-index:-3;pointer-events:none;
  /* sus și jos aura se stinge în culoarea de bază: pe iPhone, sub barele Safari (ora, adresa) se vede doar culoarea de bază,
     iar așa trecerea spre ele nu se mai vede ca o bandă */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  background:radial-gradient(60% 45% at 15% 10%,rgba(64,59,74,.75),transparent 70%),
             radial-gradient(55% 40% at 95% 35%,rgba(231,233,187,.10),transparent 70%),
             radial-gradient(60% 45% at 40% 100%,rgba(64,59,74,.6),transparent 70%)}
.aura::after{content:"";position:absolute;inset:0;background:var(--mottle) 0 0/100% 100% no-repeat;opacity:.07;mix-blend-mode:soft-light}
/* granulația: stratul care se mișcă depășește puțin ecranul (cât îi trebuie mișcării de max. 3%), într-un cadru fix de mărimea
   ecranului care îl taie. Pe iPhone, un element fix mai mare decât ecranul lăsa pagina să fie trasă stânga-dreapta, iar un strat
   de 2x2 ecrane ținea de 4 ori mai multă memorie video decât e nevoie */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.grain::before{content:"";position:absolute;inset:-8%;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.rec{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--g2);box-shadow:0 0 .625rem rgba(231,233,187,.8)}

/* ---------- meniul plutitor (sticlă groasă) ---------- */
.nav{position:fixed;z-index:50;top:max(.625rem,env(safe-area-inset-top));left:max(.625rem,env(safe-area-inset-left));right:max(.625rem,env(safe-area-inset-right));display:flex;justify-content:center;pointer-events:none}
.nav-in{pointer-events:auto;width:100%;max-width:77.5rem;height:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 .375rem 0 1.125rem;border-radius:var(--r-pill);
  background:var(--noise) 0 0/11.25rem 11.25rem,var(--glass-thick);box-shadow:var(--edge),0 .625rem 2.5rem rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(1.75rem) saturate(190%) brightness(1.05);backdrop-filter:blur(1.75rem) saturate(190%) brightness(1.05)}
.logo{display:inline-flex;align-items:center;gap:.5625rem;padding:.625rem 0;font-weight:700;font-size:1.06rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:.375rem}
.lk{display:inline-flex;align-items:center;height:2.75rem;padding:0 1.125rem;border-radius:var(--r-pill);font-size:.95rem;font-weight:600;text-decoration:none;
  transition:transform .5s var(--spring),background-color .2s ease,box-shadow .3s ease}
.lk-cta{background:var(--noise) 0 0/11.25rem 11.25rem,var(--grad);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--rest)}

/* ---------- butoane-pastilă: gradient, glow, zoom la hover ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.5rem;padding:0 1.625rem;border:0;border-radius:var(--r-pill);
  text-decoration:none;font-weight:700;font-size:1.17rem;letter-spacing:-.015em;cursor:pointer;
  transition:transform .5s var(--spring),box-shadow .4s ease,filter .3s ease}
.btn:active,.lk:active,.fc a:active,.stop:active,.vc .b:active{transform:scale(.96);transition-duration:.1s}
.btn svg{width:1.125rem;height:1.125rem;fill:currentColor;flex:none}
.btn-play{background:var(--noise) 0 0/11.25rem 11.25rem,var(--grad);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.12),var(--rest)}
:is(.btn-play,.lk-cta):focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(255,255,255,.2),var(--glow)}
.btn-ghost{color:var(--text)}
.btns{display:flex;flex-direction:column;gap:.75rem}
.btns .btn{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:clip;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:clip;
  /* fundalul hero-ului (pelicula + umbrirea) se stinge spre jos în fundalul paginii, fără margine de panou */
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%)}
.reel{position:absolute;inset:-15% -20%;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;transform:rotate(-8deg);opacity:.5}
.reel .strip:nth-child(n+3){display:none}
.strip{overflow:hidden}
.strip-in{display:flex;flex-direction:column;gap:.75rem;animation:roll 90s linear infinite}
.strip:nth-child(2) .strip-in{animation-duration:120s;animation-direction:reverse}
.strip:nth-child(3) .strip-in{animation-duration:100s}
.strip:nth-child(4) .strip-in{animation-duration:130s;animation-direction:reverse}
.strip:nth-child(5) .strip-in{animation-duration:110s}
.fr{aspect-ratio:9/16;border-radius:1.125rem;overflow:hidden;background:var(--bg2)}
.fr img{width:100%;height:100%;object-fit:cover}
@keyframes roll{to{transform:translateY(-50%)}}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,10,.6) 0%,rgba(5,5,10,.45) 35%,rgba(5,5,10,.88) 72%,var(--bg) 100%)}
.hero-in{width:100%;max-width:80rem;margin:0 auto;padding:7.25rem 1.25rem 2rem}
.tc{display:inline-flex;align-items:center;gap:.5625rem;margin-bottom:1.375rem;padding:.5rem .875rem;border-radius:var(--r-pill);color:var(--text)}
.tc .rec{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.kin{font-weight:800;font-size:clamp(2.75rem,12.5vw,7.5rem);line-height:.98;letter-spacing:-.045em}
.kin-line{display:block}
/* cuvintele stau unul peste altul în aceeași celulă: spațiul e mereu cât cel mai lung, fără salturi */
.swap{display:inline-grid;justify-items:start;vertical-align:bottom}
.swap .w{grid-area:1/1;white-space:nowrap;
  /* spațiu de rezervă sus/jos, ca diacriticele și codițele să intre în gradient (altfel par tăiate) */
  padding:.14em .06em .2em 0;margin:-.14em -.06em -.2em 0;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;filter:blur(.625rem);transform:translateY(.22em);
  transition:opacity .35s ease,filter .35s ease,transform .6s var(--spring)}
.swap .w.on{opacity:1;filter:none;transform:none}
.swap .w.off{opacity:0;filter:blur(.625rem);transform:translateY(-.18em)}
.sub{color:#D4D4D8;font-size:1.06rem;line-height:1.5;letter-spacing:-.01em;max-width:34em;margin:1.25rem 0 1.75rem}
.sub span{display:block}
.sub span+span{margin-top:.35em}

/* banda care derulează */
.ticker{overflow:clip;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-in{display:inline-flex;align-items:center;padding:1rem 0;animation:slide 40s linear infinite}
/* hero-ul în afara ecranului (JS pune .off): animațiile lui infinite stau pe loc, ca să nu consume degeaba */
.hero.off :is(.strip-in,.ticker-in,.rec){animation-play-state:paused}
.ticker span{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;padding:0 1.375rem}
.ticker i{width:.5rem;height:.5rem;border-radius:50%;background:var(--grad);box-shadow:0 0 .5rem rgba(231,233,187,.5);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- portofoliu ---------- */
section{padding:var(--gap) 0;scroll-margin-top:5.5rem}
/* „Uite de ce să mă alegi” (#work): titlul portofoliului ajunge chiar sub meniu (5,75rem de sus), nu tot spațiul de deasupra secțiunii */
#work{scroll-margin-top:calc(.25rem - var(--gap))}
.sh{display:flex;flex-direction:column;gap:1.125rem;margin-bottom:2rem}
h2{font-weight:800;font-size:clamp(2.1rem,9vw,4.75rem);line-height:1.02;letter-spacing:-.04em;max-width:14em}
.mica{--x:-85%;padding:.1em .04em .16em 0;margin:-.1em -.04em -.16em 0;
  background:linear-gradient(90deg,rgba(245,245,247,0) 0%,var(--text) 45%) var(--x) 0/220% 100% no-repeat,var(--grad-text);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:baseline;gap:.3em;align-self:flex-start;padding:.875rem 1.5rem;border-radius:var(--r-pill);white-space:nowrap;font-size:clamp(1.05rem,3.6vw,1.3rem);line-height:1.2}
.stat .sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:55%;pointer-events:none;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.06) 70%,transparent 100%);mix-blend-mode:plus-lighter}
.stat b{font-size:inherit;font-weight:800;letter-spacing:-.03em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-weight:600;color:#E4E4E7}

.grid{display:grid;grid-template-columns:1fr;gap:1rem}
/* până construiește JS grila, îi ține locul: altfel secțiunile de dedesubt (scrise direct în HTML) par aproape de ecran și pozele lor leneșe se descarcă imediat */
.grid:empty{min-height:400vh}
.card{position:relative}
.cv{position:relative;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;background:var(--bg2);
  transition:transform .5s var(--spring)}
.cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--spring)}
.cv::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 25%,transparent 70%,rgba(0,0,0,.55) 100%)}
.cv::after{transition:opacity .45s ease}
.card.playing .cv::after{opacity:0}
:is(.cv,.ph)::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(180,171,194,.55) 0%,rgba(255,255,255,.07) 38%,rgba(255,255,255,.07) 62%,rgba(231,233,187,.6) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hit{position:absolute;inset:0;z-index:2;width:100%;background:none;border:0;cursor:pointer;color:inherit}
.hit:focus-visible{outline:none}
.card:has(.hit:active) .cv img{transform:scale(1.06);transition-duration:.25s}
.card:has(.hit:active) .pl{transform:scale(.9);transition-duration:.1s}
.card:has(.hit:focus-visible) .cv{outline:2px solid #fff;outline-offset:.1875rem}
.pl{position:absolute;inset:0;margin:auto;width:4.5rem;height:4.5rem;border-radius:50%;display:grid;place-items:center;
  /* sticlă limpede, nu mată: fără blur în spate, doar o tentă albă abia vizibilă și muchia luminoasă */
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .5s var(--spring),box-shadow .25s ease,opacity .3s ease,filter .3s ease}
.pl svg{width:1.625rem;height:1.625rem;fill:#fff;margin-left:.1875rem;filter:drop-shadow(0 2px .375rem rgba(0,0,0,.35))}

/* player în card */
/* pornire: coperta rămâne pe loc până când clipul chiar rulează, apoi playerul se „materializează” peste ea (blur + scară + opacitate);
   oprire: drumul invers, iar butonul de play revine din același loc */
.vp{position:absolute;inset:0;z-index:3;background:#000;opacity:0;transform:scale(1.035);filter:blur(.625rem);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .6s var(--spring),filter .45s cubic-bezier(.22,1,.36,1)}
.vp.ready{opacity:1;transform:none;filter:none}
.vp.out{opacity:0;transform:scale(1.02);filter:blur(.5rem);transition-duration:.28s,.28s,.28s;pointer-events:none}
.vp :is(.vc,.stop){translate:0 0;transition:opacity .3s ease .12s,translate .55s var(--spring) .12s,transform .5s var(--spring),background-color .2s ease}
.vp:not(.ready) :is(.vc,.stop){opacity:0;translate:0 .5rem}
.vp video{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer;background:#000}
.vc{position:absolute;left:.625rem;right:.625rem;bottom:.625rem;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:.375rem .5rem .5rem;border-radius:1.25rem;transition:opacity .25s ease}
.vc .b{width:2.75rem;height:2.75rem;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#fff;fill:currentColor;cursor:pointer;
  transition:transform .5s var(--spring),background-color .2s ease}
.vc svg{width:1.25rem;height:1.25rem}
.seek{flex:1 0 100%;order:-1;margin:.25rem .375rem 2px;height:1.125rem;accent-color:#fff;cursor:pointer}
.tm{flex:1;margin-left:.25rem;font-size:.7rem;color:#E4E4E7;white-space:nowrap}
.card.playing .cv{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),-1.125rem 1.25rem 3.75rem rgba(120,108,140,.4),1.125rem 1.25rem 3.75rem rgba(231,233,187,.18)}
.card.playing .hit{pointer-events:none}
.card.playing .pl{opacity:0;transform:scale(.82);filter:blur(.375rem)}
.stop{position:absolute;z-index:4;top:.75rem;right:.75rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;cursor:pointer;
  transition:transform .5s var(--spring),background-color .2s ease,opacity .25s ease}
.stop svg,.mx svg,.nv svg{width:1.25rem;height:1.25rem}
.verr{position:absolute;z-index:4;left:.75rem;right:.75rem;top:50%;transform:translateY(-50%);padding:.875rem 1rem;border-radius:1.125rem;background:rgba(22,22,32,.92);box-shadow:var(--edge);font-size:.9rem;text-align:center}

/* forma de undă */
.wave{position:relative;height:4.5rem;margin-bottom:var(--gap);container-type:inline-size}
.wave svg{display:block;width:100%;height:100%}
.wave path{fill:rgba(255,255,255,.14)}
.wave-ph,.wave-lit{will-change:transform}
.wave-lit{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.wave .wave-lit path{fill:url(#wg)}
.wave-ph{position:absolute;top:-.75rem;bottom:0;left:-1px;width:2px;border-radius:2px;background:var(--g2);box-shadow:0 0 .875rem rgba(231,233,187,.7)}
.wave-tc{position:absolute;left:1.25rem;right:1.25rem;top:-1.75rem;display:flex;justify-content:space-between;font-size:.66rem}
.wave-tc b{font-weight:inherit;color:var(--g2);font-variant-numeric:tabular-nums}

/* ---------- despre mine: povestea în capitole (text + poză), apoi replici mari fără poză ---------- */
#despre{padding-top:0}
.story{list-style:none;display:grid;gap:4.5rem}
.ch{display:grid;gap:1.5rem}
.ct{display:grid;gap:.9rem;align-content:center}
/* capitolele nu se lățesc după conținut: o replică cu rânduri care nu se rup (vezi fitSay în index.html) ar lărgi altfel toată grila */
#story .ch,#story .ct{min-width:0}
.ct p{font-weight:600;font-size:clamp(1.45rem,5.6vw,2.5rem);line-height:1.15;letter-spacing:-.03em;color:#D4D4D8}
.ct b{font-weight:800;color:var(--text)}
.ct s{text-decoration-thickness:.08em;color:var(--muted)}
.ct .ct-low{margin-top:-.5rem;font-size:clamp(1.15rem,4.2vw,1.6rem);line-height:1.3;font-weight:500;color:var(--muted)}
.ch-say .ct p:not(.ct-low){font-weight:800;font-size:clamp(2rem,8.4vw,4.25rem);line-height:1.02;letter-spacing:-.045em;color:var(--text);max-width:16em}
.ph{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center;padding:1.5rem;text-align:center;
  background:var(--noise) 0 0/11.25rem 11.25rem,radial-gradient(80% 60% at 30% 20%,rgba(64,59,74,.55),transparent 70%),var(--bg2)}
.ph-in{position:absolute;inset:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- rezultate: bandă continuă cu capturi ----------
   Curge în buclă de la stânga la dreapta (transform scris din JS); captura din centru e în prim-plan (--s, --o).
   Marginile benzii se estompează în fundal, ca banda TikTok · Instagram · Ads. */
.rz-car{--w:min(86vw,25rem);position:relative;overflow:clip;padding:.5rem 0 1rem;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rz-car.drag{cursor:grabbing;user-select:none}
.rz-track{display:flex;gap:.75rem;width:max-content;will-change:transform}
.rz-s{flex:none;width:var(--w);aspect-ratio:4/3;margin:0;transform:scale(var(--s,1));opacity:var(--o,1)}
.rz-s img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;pointer-events:none;-webkit-touch-callout:none}
/* ținând degetul pe bandă sau pe un card, iOS nu mai deschide meniul „Salvează imaginea” (întrerupea tragerea) */
.rz-car,.cv{-webkit-touch-callout:none}
/* mișcare redusă: fără buclă, derulare manuală cu snap */
.rz-car.calm{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:auto;-webkit-mask-image:none;mask-image:none}
.rz-car.calm .rz-track{padding:0 calc(50% - var(--w)/2)}
.rz-car.calm .rz-s{scroll-snap-align:center}


/* săgeata dintre secțiuni: gradientul site-ului, cu glow moale în aceleași culori; se dezvăluie de sus în jos (--r), cu margine moale */
/* masca stă pe .arw-in, care are loc de jur împrejur pentru glow (altfel masca ar tăia glow-ul drept, la marginea săgeții);
   spațiul de deasupra și de dedesubt e egal, ca săgeata să stea la mijloc între secțiuni */
.arw{display:flex;justify-content:center}
.arw-in{padding:2.5rem 3rem;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(var(--r,0)*135% - 35%),transparent calc(var(--r,0)*135%));
  mask-image:linear-gradient(180deg,#000 calc(var(--r,0)*135% - 35%),transparent calc(var(--r,0)*135%))}
.arw svg{display:block;width:6.5rem;height:13rem;overflow:visible;
  filter:drop-shadow(0 0 .35rem rgba(231,233,187,.35)) drop-shadow(0 0 1rem rgba(120,108,140,.45))}
#despre{padding-bottom:2rem}
#rezultate{padding-top:2rem}

/* pastila de la rezultate, cu nota cu asterisc dedesubt (mică, italică, mai închisă decât textul secundar, contrast ~5:1) */
.rz-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.rz-fn{font-size:.78rem;font-style:italic;color:#86868F;padding-left:1.5rem}

/* banda de rezultate: oprită la atingere; indicatorul apare scurt în mijloc, jos */
.rz-car:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:var(--r-card)}
.rz-hint{position:absolute;left:50%;bottom:1.5rem;transform:translate(-50%,.5rem);margin:0;padding:.5rem .9rem;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap;
  background:rgba(22,22,32,.82);box-shadow:var(--edge);color:var(--text);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .4s var(--spring)}
.rz-hint.on{opacity:1;transform:translate(-50%,0)}
.pf-i[role=button]{cursor:zoom-in}
.pf-i[role=button]:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* captura mărită: fereastră pe tot ecranul, fundal estompat; poza crește din chenarul atins (FLIP din JS) */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(5,5,10,.78);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);opacity:0;transition:opacity .3s ease}
.lb.on::backdrop{opacity:1}
.lb img{max-width:calc(100vw - 1.5rem);max-height:calc(100dvh - 8rem);width:auto;height:auto;border-radius:1rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.55);
  transition:transform .42s cubic-bezier(.22,1,.36,1);touch-action:pinch-zoom}
.lb .mx{position:absolute;top:max(1rem,env(safe-area-inset-top));right:1rem}
.lb .nv{position:absolute;bottom:max(1.25rem,env(safe-area-inset-bottom))}
.lb .nv.pv{left:calc(50% - 3.5rem)}.lb .nv.nx{right:calc(50% - 3.5rem)}
.lb :is(.mx,.nv){opacity:0;transition:opacity .3s ease .1s,transform .5s var(--spring)}
.lb.on :is(.mx,.nv){opacity:1}

/* analitice: capturile de telefon una lângă alta, cele de laptop pe toată lățimea; pe desktop telefoanele stau pe înălțime în stânga */
.pf{display:grid;gap:.75rem;margin-top:3rem}
.pf-row{display:flex;gap:.75rem}
.pf .ph{flex:var(--a,1) 1 0;min-width:0;background:var(--bg2);padding:0}

/* ---------- subsol = contact ---------- */
footer{position:relative;padding:2.5rem 0 calc(1.75rem + env(safe-area-inset-bottom));color:var(--muted);font-size:.9rem;scroll-margin-top:5rem;overflow:clip;
  background:radial-gradient(90% 70% at 50% 110%,rgba(64,59,74,.7),transparent 70%)}
footer .wrap{display:grid;gap:1.5rem}
.foot-k{color:var(--text);font-family:inherit;font-weight:700;font-size:clamp(1.35rem,3.2vw,2.25rem);line-height:1.15;letter-spacing:-.025em;text-transform:none}
.big-mail{display:block;width:max-content;max-width:100%;font-weight:800;font-size:clamp(4rem,22vw,15rem);line-height:.9;letter-spacing:-.06em;text-decoration:none;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;
  /* spațiu în plus la dreapta: cu literele strânse (-.06em), ultimul „i” iese din casetă și gradientul l-ar tăia */
  padding-right:.1em;margin-right:-.1em;transition:transform .6s var(--spring),filter .3s ease}
.fc{display:flex;flex-direction:column;gap:.625rem}
.fc a{display:inline-flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:0 1.375rem;border-radius:var(--r-pill);color:var(--text);font-weight:600;text-decoration:none;overflow-wrap:anywhere;
  transition:transform .5s var(--spring),background-color .2s ease}
.fc svg{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.fl{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.25rem;padding-top:1.125rem;border-top:1px solid var(--line)}
.fl span{width:100%}
.fl a{display:inline-block;padding:.75rem 0;text-decoration:none;transition:color .2s ease}

/* bara de jos pe telefon: ca bara de taburi din iOS 26 */
.dock{position:fixed;z-index:40;left:max(.75rem,env(safe-area-inset-left));right:max(.75rem,env(safe-area-inset-right));bottom:calc(.75rem + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.4375rem .4375rem .4375rem 1.25rem;border-radius:var(--r-pill);
  background:var(--noise) 0 0/11.25rem 11.25rem,var(--glass-thick);box-shadow:var(--edge),0 .75rem 2.5rem rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(1.75rem) saturate(190%);backdrop-filter:blur(1.75rem) saturate(190%);
  font-size:1.06rem;font-weight:700;line-height:1.2;letter-spacing:-.015em;transition:opacity .3s ease,transform .5s var(--spring),visibility .3s}
.dock .btn{min-height:2.875rem;padding:0 1.125rem;font-size:1.17rem;white-space:nowrap;flex:none}
.dock.off{opacity:0;visibility:hidden;transform:translateY(1.5rem) scale(.96)}

/* ---------- fereastra mare (pentru clipuri fără fișier) ---------- */
.modal{position:fixed;inset:0;z-index:100;overscroll-behavior:contain;background:rgba(5,5,10,.7);-webkit-backdrop-filter:blur(1.5rem) saturate(160%);backdrop-filter:blur(1.5rem) saturate(160%);display:none;place-items:center;padding:1.25rem}
.modal.open{display:grid;animation:materialize .45s var(--spring)}
.modal.open .stage{animation:rise .5s var(--spring)}
@keyframes materialize{from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes rise{from{opacity:0;transform:scale(.94)}}
.stage{display:flex;align-items:center;gap:1.25rem;max-width:100%}
.player{width:min(23.75rem,86vw);height:min(78vh,43.75rem);border-radius:var(--r-card);overflow:hidden;background:#000}
.player.hz{width:min(60rem,86vw);height:auto;aspect-ratio:16/9}
.player iframe,.player video{width:100%;height:100%;border:0;display:block}
.nv,.mx{width:3rem;height:3rem;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;cursor:pointer;background:var(--glass-thin);box-shadow:var(--edge);transition:transform .5s var(--spring)}
.nv{position:absolute;bottom:3.5rem}.nv.pv{left:1.25rem}.nv.nx{right:1.25rem}
.mx{position:absolute;top:max(1rem,env(safe-area-inset-top));right:1rem}
.mt{position:absolute;bottom:1.125rem;left:1.25rem;right:1.25rem;text-align:center}

/* ---------- pagini legale ---------- */
.back{display:inline-flex;align-items:center;gap:.625rem}
.back svg{width:1.125rem;height:1.125rem;flex:none}
.legal{padding:7.5rem 0 5rem}
.legal .wrap{max-width:45rem}
.legal h1{font-weight:800;font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.02;letter-spacing:-.04em;margin-bottom:.875rem}
.legal h2{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:2.5rem 0 .625rem;max-width:none}
.legal p,.legal li{color:#D4D4D8;margin-bottom:.75rem}
.legal ul{padding-left:1.375rem}
.legal .mono{margin-bottom:1.75rem;display:block}

/* ---------- apariție la scroll (regula principală de mișcare, ca pe fitandbusy.ro) ----------
   Când ajunge pe ecran, elementul urcă puțin și apare treptat, cu oprire lină (ease-out, ca un ease în After Effects).
   La scroll în sus sau în jos e la fel: iese discret când părăsește ecranul și reapare plutind în sus când revine.
   Blur: elementul vine din blur și se limpezește pe drum; la ieșire (pe sus sau pe jos, după direcția scroll-ului) se estompează din nou în blur.
   În grupuri, elementele apar unul câte unul (întârzierea --d). Se mișcă doar blocul întreg: încadrarea pozelor rămâne neatinsă. */
html.js .rv{opacity:0;transform:translateY(1.75rem);filter:blur(.75rem);transition:opacity .3s ease,transform .3s ease,filter .3s ease}
html.js .rv:not(.in):is(.card,.ph,.rz-car){filter:blur(.25rem)}
html.js .rv.in{opacity:1;transform:none;filter:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
/* scroll rapid (JS pune .fast pe html): elementele trec direct în starea finală, fără animație și fără întârziere, ca să nu rămână în urmă */
html.js.fast .rv{transition:none!important}

/* ---------- tabletă și desktop (adăugate peste baza de telefon) ---------- */
@media(min-width:640px){
  :root{--gap:7rem}
  .wrap{padding:0 1.75rem}
  .hero-in{padding:8.75rem 1.75rem 2.5rem}
  .btns{flex-direction:row}
  .btns .btn{width:auto}
  .grid{grid-template-columns:repeat(2,1fr)}
  .fc{flex-direction:row;flex-wrap:wrap}
  .fl span{width:auto;margin-right:auto}
  .reel{grid-template-columns:repeat(3,1fr);inset:-15% -10%}
  .reel .strip:nth-child(3){display:block}
  .wave{height:6rem}
  .ch:not(.ch-say){grid-template-columns:2fr 3fr;align-items:center;gap:2.5rem}
  .ch.flip{grid-template-columns:3fr 2fr}
  .ch.flip .ph{order:2}}
@media(min-width:1000px){
  /* scalare uniformă pe desktop: toate dimensiunile sunt în rem, iar rem-ul crește proporțional cu ecranul.
     Referința e 1440x810 (16:9, rem = 16px); pe ecranele 16:9 pagina arată identic la orice rezoluție.
     Pe ecranele late (21:9) decide înălțimea, ca un rând de carduri să încapă pe ecran. Minim 15px. */
  html{font-size:max(15px,min(1.1111vw,1.9753vh))}
  :root{--gap:8.75rem}
  /* meniul se aliniază cu conținutul: „regen.media” pe marginea din stânga a conținutului, „Contact” pe cea din dreapta
     (--cw = lățimea conținutului din .wrap: 80rem minus 2 x 1.75rem) */
  .nav{left:0;right:0;display:block}
  .nav-in{--cw:min(100% - 3.5rem,76.5rem);box-sizing:content-box;width:var(--cw);max-width:none;height:3.75rem;padding:0 .5rem 0 1.375rem;margin-left:calc((100% - var(--cw)) / 2 - 1.375rem)}
  .grid{grid-template-columns:repeat(4,1fr)}
  .grid{grid-auto-flow:row dense}
  .card.feat{grid-column:span 2;grid-row:span 2}
  .card.feat-r{grid-column:3 / span 2}
  .card.feat .cv{aspect-ratio:auto;height:100%}
  .card.feat .pl{width:6rem;height:6rem}
  .card.feat .pl svg{width:2.125rem;height:2.125rem}
  .sh{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .stat{align-self:auto}
  .reel{grid-template-columns:repeat(5,1fr);gap:1rem}
  .reel .strip:nth-child(n+4){display:block}
  .dock{display:none}
  .wave{height:6.875rem}
  .story{gap:7rem}
  .ch:not(.ch-say){grid-template-columns:4fr 8fr;gap:5rem}
  .ch.flip{grid-template-columns:8fr 4fr}
  .rz-car{--w:38rem}
  .lb img{max-width:calc(100vw - 10rem);max-height:calc(100dvh - 6rem)}
  .lb .nv{bottom:auto;top:calc(50% - 1.5rem)}
  .lb .nv.pv{left:1.5rem}.lb .nv.nx{right:1.5rem}
  .rz-stat{align-items:flex-end}
  .rz-fn{padding:0 1.5rem 0 0}
  .arw svg{width:8.5rem;height:17rem}
  .arw-in{padding:3rem 4rem}
  .pf{gap:1rem;margin-top:4rem}
  .pf-row{gap:1rem}
  .rz-track{gap:1.5rem}
}

/* hover doar pe dispozitive cu mouse: pastilele cresc ușor, butoanele strălucesc mai tare */
@media(hover:hover) and (pointer:fine){
  .lk:hover,.fc a:hover,.stop:hover,.vc .b:hover,.nv:hover,.mx:hover{transform:scale(1.06)}
  .lk:not(.lk-cta):hover,.fc a:hover,.vc .b:hover{background:rgba(255,255,255,.14)}
  .lk-cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--glow)}
  .btn:hover{transform:scale(1.04)}
  .btn-play:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(255,255,255,.2),var(--glow)}
  .btn-ghost:hover{background:rgba(255,255,255,.14)}
  .card:hover .cv img{transform:scale(1.06)}
  .card:hover .pl{transform:scale(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.16)}
  .vp:not(.paused):not(:hover):not(:has(:focus-visible)) :is(.vc,.stop){opacity:0}
  .big-mail:hover{transform:scale(1.02);filter:drop-shadow(-.75rem 0 1.875rem rgba(120,108,140,.6)) drop-shadow(.75rem 0 1.875rem rgba(231,233,187,.3))}
  .fl a:hover{color:var(--text)}
  .rz-b:hover{transform:scale(1.06);background:rgba(255,255,255,.14)}}

/* intrarea hero-ului și granulația (doar fără mișcare redusă) */
@media(prefers-reduced-motion:no-preference){
  .grain::before{animation:grain .8s steps(4) infinite}
  @keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}
  .hero-in>.tc,.hero-in>.sub,.hero-in>.btns,.kin-line{animation:enter .9s var(--spring) both}
  .hero-in>.tc{animation-delay:.05s}
  .kin-line:nth-child(1){animation-delay:.12s}
  .kin-line:nth-child(2){animation-delay:.22s}
  .hero-in>.sub{animation-delay:.34s}
  .hero-in>.btns{animation-delay:.44s}
  @keyframes enter{from{opacity:0;transform:translateY(2rem);filter:blur(.625rem)}}}

/* accesibilitate: mișcare redusă, transparență redusă, contrast mărit */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip-in,.ticker-in,.rec{animation:none}
  *:active{transform:none!important}
  .modal.open,.modal.open .stage{animation:none}
  .vp,.vp.out,.card.playing .pl{transform:none;filter:none}
  .vp:not(.ready) :is(.vc,.stop){translate:none}}
@media(prefers-reduced-transparency:reduce){
  .glass,.nav-in,.dock,.tc,.btn-ghost,.fc a,.stop,.vc,.pl,.stat,.modal,.nv,.mx,.rz-b{
    -webkit-backdrop-filter:none;backdrop-filter:none;background:#16161F}
  .reel{opacity:.25}}
@media(prefers-contrast:more){
  :root{--muted:#D4D4D8;--line:rgba(255,255,255,.4)}
  .glass,.nav-in,.dock,.tc,.btn-ghost,.fc a,.stop,.vc,.pl,.stat,.rz-b{background:#000;box-shadow:inset 0 0 0 1px #fff}}

/* ---------- doar telefon (sub 640px): ajustări din auditul pe mobil, 18.10.2026 ----------
   Tableta și desktopul nu sunt atinse. Varianta dinainte: git tag „inainte-de-audit-mobil”. */
@media(max-width:639px){
  /* clipurile pe 2 coloane (înainte: 1 coloană, 14 x 596px); fără carduri mari, ca rândurile să iasă pline */
  .grid{grid-template-columns:repeat(2,1fr);gap:.625rem}
  .cv{border-radius:1.125rem}
  .pl{width:3.25rem;height:3.25rem}
  .pl svg{width:1.25rem;height:1.25rem}
  /* playerul în cardul îngust: fără timp, controale mai aproape de margini, ca cele 3 butoane de 44px să încapă */
  .vc{left:.375rem;right:.375rem;bottom:.375rem;padding:.25rem;border-radius:1rem}
  .vc .tm{display:none}
  .vc .mu{margin-left:auto}
  .seek{margin:.25rem .25rem 2px}
  .stop{top:.5rem;right:.5rem}
  /* centrare: blocurile scurte (hero, titlurile cu pastile, subsolul); textele capitolelor din „Despre mine” rămân la stânga */
  .hero-in{text-align:center}
  .swap{display:grid;justify-items:center}
  .sub{margin-inline:auto}
  #work .sh,#rezultate .sh{align-items:center;text-align:center}
  #work .sh h2,#rezultate .sh h2{margin-inline:auto}
  .stat{align-self:center}
  .rz-stat{align-items:center}
  .rz-fn{padding:0;text-align:center}
  footer .wrap{justify-items:center;text-align:center}
  .fc{justify-self:stretch}
  .fc a{justify-content:center}
  .fl{justify-content:center;justify-self:stretch}
  /* un singur buton principal în hero: „Contact” e deja în meniu și în bara de jos */
  .hero .btn-ghost{display:none}
  /* bara de jos: se retrage la derulare în jos (JS pune .away), textul se rupe în două rânduri egale */
  .dock.away{opacity:0;visibility:hidden;transform:translateY(1.5rem) scale(.96)}
  .dock span{text-wrap:balance}
  /* fără cuvinte rămase singure pe ultimul rând (hero, notele capitolelor) */
  .sub span{text-wrap:balance}
  /* nota cu asterisc, puțin mai mare */
  .rz-fn{font-size:.85rem}
  /* capturile de analitice: o lupă discretă în colț arată că se deschid mari la atingere */
  .pf-i::after{content:"";position:absolute;z-index:6;right:.5rem;bottom:.5rem;width:1.75rem;height:1.75rem;border-radius:50%;pointer-events:none;
    background:rgba(11,11,16,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center/1rem no-repeat;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  /* fereastra cu captura mărită nu reîmprospătează pagina la tragere */
  .lb{overscroll-behavior:contain}
  /* hero: textul stă la mijloc între meniu și banda de jos (înainte era lipit de bandă, cu gol mare deasupra) */
  .hero-in{margin-block:auto;padding-top:5.5rem;padding-bottom:1.5rem}
}

/* lățimea casetelor de text, trasă de mână în editor (layout.js și about.js): separat pentru telefon și pentru tabletă/desktop.
   Fără valoare salvată, fiecare text are lățimea lui normală. */
@media(max-width:639px){.wm{max-width:var(--wm)!important}}
@media(min-width:640px){.wd{max-width:var(--wd)!important}}
/* text în gradientul de brand, ales din editor pentru o casetă */
.tg{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* capitolul fără poză: u-urile noi din „muuuultă” cresc pe rând, legate de scroll (lățimea, opacitatea și blurul le scrie JS).
   clip-path taie litera la lățimea curentă fără să-i mute linia de bază (overflow:hidden ar ridica-o) */
.uu-w{white-space:nowrap}
.uu{display:inline-block;clip-path:inset(-.4em 0 -.4em 0)}

/* alegerea serviciului de email (Gmail, Outlook, Yahoo, aplicația de mail, copiere): se deschide din linkurile de email, lângă linkul apăsat */
.mp{position:absolute;z-index:60;display:grid;gap:.375rem;min-width:15rem;padding:.5rem;border-radius:1.375rem;
  /* aproape opac și fără blur în spate: stă peste „Scrie-mi” (text cu gradient și filtre de apariție), iar cu backdrop-filter
     Chrome desena textul de dedesubt peste opțiuni */
  background:var(--noise) 0 0/11.25rem 11.25rem,rgba(16,16,24,.96);box-shadow:var(--edge),0 .75rem 2.5rem rgba(0,0,0,.6);
  opacity:0;transform:translateY(.375rem) scale(.97);transform-origin:50% 0;transition:opacity .2s ease,transform .35s var(--spring)}
.mp.on{opacity:1;transform:none}
.mp-t{padding:.375rem .75rem .25rem;font-size:.8rem;color:var(--muted)}
.mp a,.mp button{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:0 .875rem;border:0;border-radius:.875rem;background:none;color:var(--text);
  font:600 .95rem/1.2 var(--sans);letter-spacing:-.01em;text-decoration:none;text-align:left;cursor:pointer;transition:background-color .15s ease}
.mp a:hover,.mp button:hover,.mp a:focus-visible,.mp button:focus-visible{background:rgba(255,255,255,.1);outline:none}
.mp a:active,.mp button:active{background:rgba(255,255,255,.16)}
.mp svg{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.mp{transition:opacity .15s ease;transform:none}}
@media(prefers-reduced-transparency:reduce){.mp{background:#16161F}}

/* ecrane tactile (telefon, tabletă): apariția la scroll fără blur. Blurul pe titluri mari și pe carduri, pornit pe mai multe
   elemente odată și peste efectele legate de scroll, nu încăpea în cadre pe iPhone și apariția părea sacadată.
   Rămân urcarea și estomparea (doar transform și opacitate, ieftine). Desktopul păstrează blurul. */
@media(hover:none) and (pointer:coarse){
  html.js .rv,html.js .rv:not(.in):is(.card,.ph,.rz-car){filter:none}
  html.js .rv.in{transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
  /* apariția legată direct de scroll (nu de timp): elementul se estompează și urcă exact cât intră în ecran, la orice viteză,
     fără întârzieri între coloane și fără salturi după un scroll rapid; înapoi merge la fel. Rămâne vizibil când iese pe sus.
     Unde nu există (browsere vechi), rămâne apariția pe timp, dar fără întârzierea dintre elemente. */
  @supports (animation-timeline:view()){
    html.js .rv,html.js .rv.in{opacity:1;transform:none;filter:none;transition:none;
      animation:rv-scroll linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
  }
  @supports not (animation-timeline:view()){html.js .rv.in{transition-delay:0ms}}
  /* lumina de pe pastile fără mod de amestec (plus-lighter cerea redesenare la fiecare cadru) */
  .stat .sweep{mix-blend-mode:normal;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.04) 70%,transparent 100%)}
}
@keyframes rv-scroll{from{opacity:0;transform:translateY(1.75rem)}}