@font-face{font-family:'Outfit';src:url('/assets/fonts/outfit-latin-variable.woff2') format('woff2');font-style:normal;font-weight:300 900;font-display:swap}

/* ============================================================
   WEBRAPID.RO - „REGIA"
   Un singur fir de scroll, regizat scenă cu scenă.
   Stone Cream #FAFAF8 · Ink #1A1A18 · Gray #5A5A55 · Line #D3D2CC
   ============================================================ */
:root{
  --cream:#FAFAF8; --ink:#141412; --ink2:#1A1A18;
  --gray:#5A5A55; --line:#D3D2CC;
  --serif:'Outfit', system-ui, sans-serif;
  --sans:'Outfit', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--sans); background:var(--ink); color:var(--cream);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#C9B58C;color:var(--ink)}
.serif{font-family:var(--serif);font-weight:800}
.it{font-style:italic}
.kicker{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;font-weight:700;opacity:.55}
/* greutăți display: totul mai BOLD, pe Outfit */
.mline,.hp-title,#zc h2,.pk-head h2,#s-final h2{font-weight:800;letter-spacing:-.028em}
.hp-num{font-weight:800}
.vmq-track span{font-weight:800}
.nav-cta,.hp-btn,.pk-btn{font-weight:700}

/* ---------- NAV (mix-blend difference => contrast automat pe orice scenă) ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem clamp(1.2rem,4vw,3rem);
  mix-blend-mode:difference;color:#fff;pointer-events:none;
}
.nav a{pointer-events:auto}
.nav-cta{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  border:1px solid #fff;padding:.42rem .95rem;border-radius:99px;
  opacity:0;transform:translateY(-14px);pointer-events:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.24,1), background .3s, color .3s;
}
body.cta-on .nav-cta{opacity:1;transform:none;pointer-events:auto}
.nav-cta:hover{background:#fff;color:#000}

/* ---------- indicator de capitole, dreapta ---------- */
.chapters{
  position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:14px;mix-blend-mode:difference;
}
.chapters i{
  width:5px;height:5px;border-radius:50%;background:#fff;opacity:.28;
  transition:opacity .4s, transform .4s;
}
.chapters i.on{opacity:1;transform:scale(1.7)}

/* ============================================================
   SCENA 1 - INTRO: particulele se asamblează în WR, apoi zoom PRIN literă
   ============================================================ */
#s-intro{height:300vh;position:relative;background:var(--ink)}
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
#intro-zoom{position:absolute;inset:0;will-change:transform,opacity;background:var(--ink)}
#wrCanvas{position:absolute;inset:0;width:100%;height:100%}
#introLogo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  width:min(56vh,80vw);opacity:0;
  filter:invert(1) grayscale(1) contrast(1.35);mix-blend-mode:screen;
}
.intro-label{
  position:absolute;top:16vh;left:0;right:0;text-align:center;
  font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;font-weight:500;color:var(--cream);
  opacity:0;
}
.intro-sub{
  position:absolute;bottom:14vh;left:0;right:0;text-align:center;color:var(--cream);opacity:0;
}
.intro-sub .serif{font-size:clamp(1.3rem,2.6vw,2rem)}
.intro-hint{
  position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--cream);
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;opacity:.6;
}
.intro-hint::after{
  content:'';width:1px;height:44px;background:linear-gradient(var(--cream),transparent);
  animation:hintDrop 1.6s ease-in-out infinite;
}
@keyframes hintDrop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* varianta din panourile cinema: peste bara de letterbox */
.panel-hint{bottom:8vh;z-index:3}
/* flash-ul crem în care se intră prin literă */
#intro-flash{position:absolute;inset:0;background:var(--cream);opacity:0;pointer-events:none}
/* mesajul din albul final: te ghidează mai departe */
#flashHint{
  position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);
  text-align:center;color:var(--ink);opacity:0;pointer-events:none;
  font-size:.72rem;letter-spacing:.36em;text-transform:uppercase;font-weight:700;
}
#flashHint::after{
  content:'';display:block;width:1px;height:48px;margin:1.1rem auto 0;
  background:linear-gradient(var(--ink),transparent);
  animation:hintDrop 1.6s ease-in-out infinite;
}

/* ============================================================
   SCENA 2 - MANIFEST pe crem: liniile glisează cu viteze diferite
   ============================================================ */
#s-manifest{
  background:var(--cream);color:var(--ink);position:relative;
  padding:7vh 0 16vh;overflow:hidden;
}
#s-manifest .wm{
  position:absolute;inset:auto -8vw -6vh auto;width:24vw;opacity:.35;
  mix-blend-mode:multiply;pointer-events:none;
}
.mline{
  font-family:var(--serif);font-size:clamp(2.6rem,7.6vw,6.4rem);line-height:1.04;
  white-space:nowrap;will-change:transform;letter-spacing:-.01em;
}
.mline .it{color:var(--gray)}
.mwrap{padding:0 clamp(1.2rem,5vw,4rem)}
.mpara{
  max-width:520px;margin:9vh auto 0;padding:0 1.4rem;text-align:center;
  color:var(--gray);font-weight:300;font-size:1.05rem;
}
.mpara b{color:var(--ink);font-weight:600}

/* ============================================================
   SCENA 3 - CARDUL CARE SE EXTINDE => intrare în capitolul orizontal
   ============================================================ */
#s-zoomcard{height:260vh;position:relative;background:var(--cream)}
#zc{
  position:absolute;inset:0;background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  will-change:transform;border-radius:34px;overflow:hidden;
}
#zc .kicker{color:var(--cream);opacity:.5}
#zc h2{font-family:var(--serif);font-size:clamp(2rem,6vw,5rem);text-align:center;line-height:1.05;padding:0 1rem}
#zc .zc-hint{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;opacity:.45}
#zc .zc-pattern{position:absolute;inset:0;opacity:.05;filter:invert(1) grayscale(1);object-fit:cover;width:100%;height:100%}

/* ============================================================
   SCENA 4 - CAPITOLUL ORIZONTAL (mecanica preferată, regizată)
   ============================================================ */
#s-cinema{height:560vh;position:relative;background:var(--ink)}
#track{
  display:flex;height:100%;width:max-content;will-change:transform;
}
.hpanel{
  width:100vw;height:100vh;flex:0 0 100vw;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity;
}
.hp-dark{background:var(--ink);color:var(--cream)}
.hp-cream{background:var(--cream);color:var(--ink)}
.hp-inner{position:relative;z-index:2;width:min(1150px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center}
.hp-num{
  position:absolute;top:-5vh;right:2vw;z-index:1;
  font-family:var(--serif);font-size:30vh;line-height:1;opacity:.07;will-change:transform;
  pointer-events:none;
}
.hp-kicker{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;opacity:.55;margin-bottom:1.1rem}
/* logo-urile reale ale proiectelor */
.proj-logo{display:block;margin-bottom:1.5rem}
.proj-logo.round{
  height:150px;width:150px;border-radius:50%;
  box-shadow:0 18px 44px rgba(26,26,24,.2);
}
.proj-logo.plain{width:280px;height:auto}
.proj-logo.skull{
  height:190px;width:auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.65));
}
/* panoul PlainStats: fundal identic cu fundalul logo-ului => fuziune perfectă */
.hp-plain{background:#FDF9F3;color:var(--ink)}
/* panoul BagaBont: scenă cinematică full-bleed */
.hp-bgimg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hp-bgimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.1)}
.hp-bgimg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,10,8,.92) 0%,rgba(8,10,8,.6) 45%,rgba(8,10,8,.18) 100%);
}
.hp-bgb .hp-num{opacity:.16;z-index:1}
.hp-title{font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.04;letter-spacing:-.01em}
.hp-desc{margin-top:1.3rem;max-width:400px;font-weight:300;opacity:.75;font-size:.98rem}
.hp-meta{margin-top:1.8rem;display:flex;gap:1.6rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:.5}
/* mockup browser CSS */
.mock{will-change:transform;border-radius:10px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.35)}
.hp-cream .mock{box-shadow:0 40px 90px rgba(26,26,24,.22)}
.mock-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#232320}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#4a4a45}
.mock-bar span{
  margin-left:10px;flex:1;height:16px;border-radius:8px;background:#31312d;
  font-size:.58rem;color:#8a8a83;display:flex;align-items:center;padding:0 10px;letter-spacing:.08em;
}
.mock-bar em{
  margin-left:10px;font-style:normal;font-size:.56rem;letter-spacing:.18em;
  font-weight:700;color:#43D17C;display:inline-flex;align-items:center;gap:5px;
}
.mock-bar em::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#43D17C;
  box-shadow:0 0 0 0 rgba(67,209,124,.5);animation:lpulse 1.8s ease-out infinite;
}
@keyframes lpulse{
  0%{box-shadow:0 0 0 0 rgba(67,209,124,.55)}
  70%{box-shadow:0 0 0 8px rgba(67,209,124,0)}
  100%{box-shadow:0 0 0 0 rgba(67,209,124,0)}
}
.mock-body{position:relative}
.mock-shot{
  width:100%;height:100%;object-fit:cover;object-position:top;display:block;
  transition:transform .65s cubic-bezier(.22,.9,.24,1), filter .55s ease;
}
a.mock:hover .mock-shot{filter:blur(7px) brightness(.72);transform:scale(1.05)}
/* vălul cu butonul „Mărește" din mijloc */
.mock-veil{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .5s ease;
}
a.mock:hover .mock-veil{opacity:1}
.mock-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--cream);color:var(--ink);padding:.85rem 1.7rem;border-radius:99px;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  box-shadow:0 14px 36px rgba(0,0,0,.4);
  transform:translateY(10px);transition:transform .5s cubic-bezier(.22,.9,.24,1);
}
a.mock:hover .mock-cta{transform:none}
.mock-cta b{font-size:.9rem;line-height:1}
.hp-btn{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.7rem;
  padding:.85rem 1.7rem;border:1px solid currentColor;border-radius:99px;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  transition:background .35s,color .35s;
}
.hp-btn span{transition:transform .35s}
.hp-btn:hover span{transform:translate(3px,-3px)}
.hp-dark .hp-btn:hover{background:var(--cream);color:var(--ink)}
.hp-cream .hp-btn:hover{background:var(--ink);color:var(--cream)}
.mock-body{height:min(46vh,380px);position:relative;overflow:hidden}
.mk-ddc .mock-body{background:linear-gradient(160deg,#F3F0E6,#DCE6CF)}
.mk-plain .mock-body{background:linear-gradient(160deg,#F2F4F7,#DCE2EA)}
.mk-bont .mock-body{background:linear-gradient(160deg,#221E33,#45325F)}
.mock-hero{position:absolute;inset:12% 8% auto 8%;height:38%;border-radius:6px;background:rgba(255,255,255,.16)}
.mk-ddc .mock-hero{background:rgba(52,64,42,.22)}
.mock-line{position:absolute;left:8%;height:10px;border-radius:5px;background:rgba(255,255,255,.28)}
.mk-ddc .mock-line{background:rgba(38,46,32,.3)}
.mk-plain .mock-line{background:rgba(41,52,74,.32)}
.mock-l1{top:58%;width:44%}.mock-l2{top:66%;width:30%}
.mock-chip{position:absolute;right:8%;top:58%;width:20%;height:18%;border-radius:6px;background:rgba(255,255,255,.2)}
.mk-ddc .mock-chip{background:rgba(38,46,32,.18)}
.mock-bars{position:absolute;left:8%;right:8%;top:12%;height:40%;display:flex;align-items:flex-end;gap:5%}
.mock-bars i{flex:1;background:rgba(41,52,74,.55);border-radius:3px 3px 0 0}
.mock-bars i:nth-child(1){height:45%}
.mock-bars i:nth-child(2){height:78%}
.mock-bars i:nth-child(3){height:58%}
.mock-bars i:nth-child(4){height:95%}
.mock-bars i:nth-child(5){height:66%}
/* panoul de servicii + handoff */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:currentColor;border:1px solid currentColor;margin-top:2rem}
.svc-cell{background:var(--ink);padding:1.4rem 1.5rem}
.svc-cell b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:400;margin-bottom:.3rem}
.svc-cell span{font-size:.85rem;font-weight:300;opacity:.65}
/* panoul 05 redesenat: proces în buclă + servicii ca listă, fără cutii */
.hp-inner.svc-inner{display:block;width:min(1240px,94vw)}
.svc-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:center}
.hp-svc .hp-num{display:none}
/* detaliul pasului activ, în stânga, sub titlu */
.ps-detail{margin-top:2.4rem;display:flex;gap:1.2rem;align-items:flex-start;min-height:130px}
.ps-num{font-weight:800;font-size:2.7rem;line-height:1;color:#C9B58C;letter-spacing:-.02em}
.ps-name{font-weight:800;font-size:1.15rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.4rem}
.ps-name::after{content:'';display:block;width:36px;height:2px;background:#C9B58C;margin-top:.55rem;border-radius:2px}
.proc-strip{text-align:right}
.ps-steps{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.ps-s{
  background:none;border:0;color:var(--cream);opacity:.55;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.35rem .2rem;transition:opacity .3s,color .3s;
}
.ps-s em{font-style:normal;opacity:.55;margin-right:.32rem}
.ps-s:hover{opacity:.9}
.ps-s.on{opacity:1;color:#C9B58C}
/* diagrama cu săgeata în buclă, desenată */
.proc-fig{position:relative;width:700px;height:400px;margin-left:auto}
/* ============================================================
   TIMELINE-UL PROCESULUI: linie cu 8 noduri + buclă marcată
   ============================================================ */
.proc-fig.tl{width:100%;max-width:680px;height:210px;margin-left:auto}
.tl-track{
  position:absolute;left:0;right:0;top:calc(56% - 1px);height:2px;
  background:rgba(250,250,248,.14);border-radius:2px;
}
.tl-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,rgba(201,181,140,.15),#C9B58C);
}
.tl-dot{
  position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;
  background:#EFE3C0;transform:translate(-50%,-50%);
  box-shadow:0 0 14px rgba(201,181,140,.95),0 0 34px rgba(201,181,140,.4);
}
/* coada de cometă din spatele punctului */
.tl-head{
  position:absolute;top:-1px;bottom:-1px;left:0;width:90px;
  transform:translateX(-100%);border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(239,227,192,.55));
}
/* gravură de ticks fine sub linie */
.tl-track::after{
  content:'';position:absolute;left:0;right:0;top:5px;height:4px;
  background:repeating-linear-gradient(90deg,rgba(250,250,248,.09) 0 1px,transparent 1px 12px);
}
/* săgeata de la capătul fluxului */
.proc-fig.tl::after{
  content:'→';position:absolute;left:calc(100% + 10px);top:56%;
  transform:translateY(-55%);color:rgba(250,250,248,.35);
  font-size:1.05rem;font-weight:700;transition:color .4s;
}
.proc-fig.tl.end-on::after{color:#C9B58C}
.tl-node{
  position:absolute;top:56%;transform:translate(-50%,-50%);
  width:38px;height:38px;background:none;border:0;cursor:pointer;padding:0;
}
.tl-pt{
  display:block;width:12px;height:12px;margin:auto;border-radius:50%;
  border:1.5px solid rgba(250,250,248,.5);background:#141412;
  box-shadow:0 0 0 6px #141412;
  transition:transform .35s,border-color .35s,background .35s,box-shadow .35s;
}
.tl-node:hover .tl-pt{border-color:rgba(250,250,248,.9)}
/* nodurile deja parcurse rămân marcate */
.tl-node.done .tl-pt{background:rgba(201,181,140,.45);border-color:rgba(201,181,140,.55)}
.tl-node.on .tl-pt{
  background:#C9B58C;border-color:#EFE3C0;transform:scale(1.35);
  box-shadow:0 0 0 5px #141412, 0 0 18px 5px rgba(201,181,140,.45);
}
/* inel de puls care emană din nodul activ */
.tl-node.on::after{
  content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;border-radius:50%;
  border:1.5px solid rgba(201,181,140,.6);
  animation:ringPing 1.9s ease-out infinite;pointer-events:none;
}
@keyframes ringPing{
  0%{transform:scale(.45);opacity:1}
  100%{transform:scale(1.7);opacity:0}
}
.tl-lab{
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:rgba(250,250,248,.55);transition:color .35s,letter-spacing .35s;
}
.tl-node.on .tl-lab{letter-spacing:.22em}
.tl-lab em{font-style:normal;opacity:.55;margin-right:.3rem}
.lab-a{bottom:calc(50% + 20px)}
.lab-b{top:calc(50% + 20px)}
.tl-node.on .tl-lab{color:#C9B58C}
.tl-bracket{
  position:absolute;left:40.5%;width:33.5%;top:calc(56% - 64px);height:24px;
  border:1.5px solid rgba(250,250,248,.22);border-bottom:0;
  border-radius:12px 12px 0 0;transition:border-color .4s,opacity .7s ease 1s;
}
.tl-bracket span{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:#141412;padding:0 .7rem;white-space:nowrap;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:rgba(250,250,248,.45);transition:color .4s;
}
.proc-fig.tl.loop-on .tl-bracket{border-color:rgba(201,181,140,.55)}
.proc-fig.tl.loop-on .tl-bracket span{color:#C9B58C}
/* intrarea: linia se trage, nodurile coboară în cascadă */
.proc-fig.tl .tl-track{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,.9,.24,1)}
.proc-fig.tl .tl-node{opacity:0;transform:translate(-50%,-20%);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.9,.24,1)}
.proc-fig.tl .tl-bracket{opacity:0}
.proc-fig.tl.drawn .tl-track{transform:scaleX(1)}
.proc-fig.tl.drawn .tl-node{opacity:1;transform:translate(-50%,-50%)}
.proc-fig.tl.drawn .tl-bracket{opacity:1}
.proc-fig.tl.drawn button:nth-of-type(1){transition-delay:.15s}
.proc-fig.tl.drawn button:nth-of-type(2){transition-delay:.23s}
.proc-fig.tl.drawn button:nth-of-type(3){transition-delay:.31s}
.proc-fig.tl.drawn button:nth-of-type(4){transition-delay:.39s}
.proc-fig.tl.drawn button:nth-of-type(5){transition-delay:.47s}
.proc-fig.tl.drawn button:nth-of-type(6){transition-delay:.55s}
.proc-fig.tl.drawn button:nth-of-type(7){transition-delay:.63s}
.proc-fig.tl.drawn button:nth-of-type(8){transition-delay:.71s}
.proc-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf-journey{stroke:none;fill:none}
/* stil de contur, fidel referinței: panglică desenată, nu umplută */
.pf-swoosh{stroke:rgba(250,250,248,.32);stroke-width:2.2;fill:none;stroke-linejoin:round}
.pf-bigarrow{stroke:rgba(250,250,248,.42);stroke-width:2.2;fill:none;stroke-linejoin:round}
.pf-detail{
  stroke:rgba(250,250,248,.16);stroke-width:1.2;stroke-dasharray:1 7;
  stroke-linecap:round;fill:none;pointer-events:none;transition:stroke .45s;
}
.pf-bghost{
  fill:rgba(250,250,248,.09);font-family:'Outfit',sans-serif;
  font-weight:800;font-size:26px;letter-spacing:.03em;pointer-events:none;
}
path.pf-seg{
  stroke:rgba(250,250,248,.38);stroke-width:2.2;fill:url(#glassGrad);
  stroke-linejoin:round;cursor:pointer;pointer-events:all;
  transition:stroke .45s,fill .45s,filter .45s;
}
path.pf-seg:hover{stroke:rgba(250,250,248,.65)}
path.pf-seg.on{
  stroke:#E9DCB8;fill:url(#goldFill);
  animation:segGlow 3.2s ease-in-out infinite;
}
@keyframes segGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(201,181,140,.25))}
  50%{filter:drop-shadow(0 0 18px rgba(201,181,140,.5))}
}
/* diagrama se desenează singură când ajungi pe cadru */
.proc-fig path.pf-seg,
.proc-fig .pf-swoosh,
.proc-fig .pf-bigarrow{
  stroke-dasharray:900;stroke-dashoffset:900;
}
.proc-fig:not(.drawn) path.pf-seg{fill:transparent}
.proc-fig .pf-ghost,.proc-fig .pf-bghost,.proc-fig .pf-detail{opacity:0;transition:opacity .9s ease 1.2s}
.proc-fig.drawn path.pf-seg,
.proc-fig.drawn .pf-swoosh,
.proc-fig.drawn .pf-bigarrow{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,.9,.24,1), stroke .45s, fill .45s .8s, filter .45s;
}
.proc-fig.drawn #a04{transition-delay:.1s,0s,.8s,0s}
.proc-fig.drawn #a05{transition-delay:.35s,0s,.9s,0s}
.proc-fig.drawn #a06{transition-delay:.6s,0s,1s,0s}
.proc-fig.drawn .pf-swoosh{transition-delay:.85s}
.proc-fig.drawn .pf-bigarrow{transition-delay:1.05s}
.proc-fig.drawn .pf-ghost,.proc-fig.drawn .pf-bghost,.proc-fig.drawn .pf-detail{opacity:1}
.pf-seg.on ~ .pf-ghost{fill:rgba(20,20,18,.2)}
.pf-ghost{
  fill:rgba(250,250,248,.13);font-family:'Outfit',sans-serif;
  font-weight:800;font-size:44px;letter-spacing:.03em;pointer-events:none;
}
#jdot{fill:#C9B58C;filter:drop-shadow(0 0 7px rgba(201,181,140,.9))}
#jdot2{fill:rgba(201,181,140,.45)}
#jdot3{fill:rgba(201,181,140,.22)}
.pb{
  position:absolute;top:340px;transform:translateY(-50%);
  border:1.5px solid rgba(250,250,248,.3);background:#1B1B19;
  width:92px;text-align:center;padding:.66rem 0;letter-spacing:.08em;
  transition:border-color .3s,color .3s,transform .3s;
  opacity:1;color:rgba(250,250,248,.62);
}
.pb:hover{opacity:1;color:rgba(250,250,248,.95);transform:translateY(-50%) translateY(-2px)}
.pb.on{opacity:1;border-color:#C9B58C;color:#C9B58C;background:#201E19}
.pc{position:absolute;padding:.3rem .4rem}
.ps-desc{
  margin-top:.55rem;font-size:1rem;font-weight:300;opacity:.72;
  max-width:400px;transition:opacity .3s;text-align:left;
}
.svc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem;margin-top:2.6rem}
.svc-item{border-top:1px solid rgba(250,250,248,.16);padding:1.15rem 0 1.35rem}
.svc-item i{font-style:normal;font-weight:700;font-size:.74rem;letter-spacing:.22em;opacity:.45}
.svc-item b{display:block;font-size:1.32rem;margin-top:.45rem;letter-spacing:-.01em}
.svc-item span{display:block;font-size:.96rem;font-weight:300;opacity:.65;margin-top:.4rem}
.handoff{
  position:absolute;bottom:5vh;left:0;right:0;text-align:center;
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;opacity:.55;
}
/* letterbox + contor */
.lbx{position:fixed;left:0;right:0;height:4.5vh;background:#000;z-index:80;transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.lbx-t{top:0;transform:scaleY(0);transform-origin:top}
.lbx-b{bottom:0;transform:scaleY(0);transform-origin:bottom}
body.in-cinema .lbx{transform:scaleY(1)}
.hcount{
  position:fixed;bottom:1.1vh;right:2rem;z-index:81;color:#FAFAF8;
  font-size:.66rem;letter-spacing:.3em;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .5s;
}
body.in-cinema .hcount{opacity:.9}
.hbar{
  position:fixed;bottom:2vh;left:2rem;z-index:81;width:min(220px,26vw);height:2px;
  background:rgba(250,250,248,.2);opacity:0;transition:opacity .5s;
}
body.in-cinema .hbar{opacity:1}
.hbar i{display:block;height:100%;background:#FAFAF8;transform:scaleX(0);transform-origin:left}

/* ============================================================
   SCENA 5 - MARQUEE cu viteză din scroll + PACHETE cu odometru
   ============================================================ */
#s-pachete{background:var(--cream);color:var(--ink);padding:0 0 16vh}
.vmq{overflow:hidden;padding:7vh 0 6vh;border-bottom:1px solid var(--line)}
.vmq-track{display:flex;gap:3.5rem;width:max-content;will-change:transform}
.vmq-track span{
  font-family:var(--serif);font-size:clamp(2.4rem,6vw,5rem);white-space:nowrap;
}
.vmq-track .o{color:#C9C6BB}
.pk-head{text-align:center;padding:11vh 1.4rem 6vh}
.pk-head h2{font-family:var(--serif);font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin-top:1rem}
.pk-talk{font-family:var(--serif);font-weight:800;font-size:1.55rem;letter-spacing:-.02em;line-height:1.15}
.price-note{
  margin-top:-.55rem;font-size:.8rem;font-weight:300;line-height:1.4;
  opacity:.6;max-width:250px;
}
/* grupuri detaliate în carduri */
.pk-group{display:flex;flex-direction:column;gap:.6rem}
.pk-glabel{
  font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  opacity:.45;padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.pk.hot .pk-glabel{border-color:rgba(250,250,248,.16)}
.pk-group ul{flex:0 0 auto;font-size:.88rem;gap:.5rem}
.pk-group li{line-height:1.45}
/* bonusul PlainStats */
.pk-bonus{
  border:1px dashed rgba(201,181,140,.5);border-radius:12px;padding:1rem 1.05rem;
  display:flex;flex-direction:column;gap:.35rem;background:rgba(201,181,140,.07);
}
.pk-bonus-tag{
  align-self:flex-start;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:#C9B58C;border:1px solid rgba(201,181,140,.5);
  border-radius:99px;padding:.2rem .55rem;
}
.pk-bonus b{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.pk-bonus em{font-style:normal;font-size:.78rem;font-weight:300;opacity:.72;line-height:1.5}
.pk-grid{
  width:min(1050px,92vw);margin:0 auto;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;align-items:start;
}
.pk{
  border:1px solid var(--line);border-radius:18px;padding:2.2rem 1.9rem;
  display:flex;flex-direction:column;gap:1.1rem;background:#fff;
  transition:transform .5s cubic-bezier(.22,.9,.24,1), box-shadow .5s;
}
.pk:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(26,26,24,.12)}
.pk.hot{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pk-tag{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;opacity:.5}
.pk.hot .pk-tag{color:#C9B58C;opacity:1}
.pk-name{font-family:var(--serif);font-size:1.7rem}
.price{display:flex;align-items:baseline;gap:.3rem;font-weight:600;font-size:2.4rem}
.price small{font-size:.85rem;font-weight:400;opacity:.55}
.odo{display:inline-flex;overflow:hidden;height:1em;line-height:1}
.odo b{display:inline-block;font-weight:600}
.odo .dcol{display:inline-block;height:1em;overflow:hidden}
.odo .dcol i{
  display:block;font-style:normal;height:1em;
  transform:translateY(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
.pk ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;font-weight:300;flex:1}
.pk ul li::before{content:'·';margin-right:.6rem;opacity:.5}
.pk-btn{
  text-align:center;border:1px solid currentColor;border-radius:99px;padding:.85rem;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  transition:background .3s,color .3s;
}
.pk-btn:hover{background:var(--ink);color:var(--cream)}
.pk.hot .pk-btn:hover{background:var(--cream);color:var(--ink)}

/* ============================================================
   SCENA 6 - FINAL: CTA magnetic + ștampilă
   ============================================================ */
#s-final{
  background:var(--ink);color:var(--cream);min-height:100vh;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16vh 1.4rem 0;overflow:hidden;
}
#s-final .pattern{
  position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
  opacity:.05;filter:invert(1) grayscale(1);pointer-events:none;
}
#finalCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#s-final h2{
  font-family:var(--serif);font-size:clamp(2.6rem,7vw,6rem);line-height:1.04;max-width:1000px;
  position:relative;z-index:1;
}
#s-final h2 .it{color:#C9B58C}
.magnet{
  position:relative;z-index:1;margin-top:4rem;display:inline-flex;align-items:center;gap:1rem;
  background:var(--cream);color:var(--ink);border-radius:99px;padding:1.15rem 2.4rem;
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
  will-change:transform;transition:box-shadow .4s;
}
.magnet:hover{box-shadow:0 20px 60px rgba(250,250,248,.18)}
.direct{position:relative;z-index:1;margin-top:1.8rem;font-size:.88rem;font-weight:300;letter-spacing:.04em;opacity:.65}
.stamp{
  position:absolute;z-index:1;right:clamp(1.5rem,7vw,7rem);bottom:20vh;
  width:200px;height:200px;border-radius:50%;
  filter:invert(1) grayscale(1) contrast(1.45);mix-blend-mode:screen;
  transform:rotate(-11deg);opacity:.92;
  /* tuș neuniform, ca o ștampilă reală: mască de zgomot fractal */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -0.6'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23fff' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.4 -0.6'/%3E%3C/filter%3E%3Crect width='200' height='200' fill='%23fff' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;mask-size:cover;
}
.foot{
  position:relative;z-index:1;width:100%;margin-top:9vh;padding:2rem clamp(1.2rem,4vw,3rem);
  border-top:1px solid rgba(250,250,248,.14);display:flex;justify-content:space-between;gap:1rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;opacity:.55;flex-wrap:wrap;
}

/* ============================================================
   MOBIL: capitolul orizontal devine vertical, restul rămâne
   ============================================================ */
/* ============================================================
   BROWSER-IN-BROWSER: preview mare, scrollabil, cu toolbar
   ============================================================ */
#bib{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center}
#bib[hidden]{display:none}
.bib-back{
  position:absolute;inset:0;background:rgba(10,10,9,.74);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;animation:bibBack .8s ease forwards;
}
@keyframes bibBack{to{opacity:1}}
.bib-win{
  position:relative;width:min(1150px,94vw);height:min(86vh,920px);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 60px 140px rgba(0,0,0,.65);
  will-change:transform,opacity;
}
#bib.closing .bib-back{animation:none;opacity:0;transition:opacity .6s ease}
.bib-bar{
  background:#232320;display:flex;align-items:center;gap:8px;
  padding:0 12px;height:48px;flex:0 0 48px;
}
.bib-bar > i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.bib-bar > i:nth-child(1){background:#E5655A}
.bib-bar > i:nth-child(2){background:#E0B341}
.bib-bar > i:nth-child(3){background:#57BE6C}
.bib-btn{
  width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;
  background:#31312d;color:#cfcfc8;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s,color .25s;flex:0 0 auto;
}
.bib-btn:hover{background:#43423d;color:#fff}
.bib-btn.spin{animation:bibSpin .5s ease}
@keyframes bibSpin{to{transform:rotate(360deg)}}
.bib-url{
  flex:1;min-width:0;background:#31312d;height:30px;border-radius:15px;
  color:#9a9a92;font-size:.72rem;letter-spacing:.06em;
  display:flex;align-items:center;padding:0 15px;gap:7px;
  white-space:nowrap;overflow:hidden;
}
.bib-url::before{content:'🔒';font-size:.62rem;filter:grayscale(1)}
.bib-open{
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#43D17C;white-space:nowrap;flex:0 0 auto;
}
.bib-open:hover{text-decoration:underline}
.bib-view{flex:1;overflow-y:auto;background:#151513;scroll-behavior:smooth;overscroll-behavior:contain}
.bib-view img{width:100%;display:block;transition:opacity .28s}
.bib-view.rl img{opacity:0}
.bib-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(20,20,18,.85);color:#cfcfc8;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;padding:.5rem 1.1rem;border-radius:99px;
  pointer-events:none;animation:hintFade 4s forwards;
}
@keyframes hintFade{0%,70%{opacity:1}100%{opacity:0}}
@media (max-width:820px){
  .bib-win{width:96vw;height:88vh}
  .bib-open{display:none}
}

/* ============================================================
   MOBIL: TOATE animațiile rămân active (pin, orizontal, zoom).
   Doar layoutul se compactează ca să încapă în 100vh per panou.
   ============================================================ */
@media (max-width:820px){
  .chapters{right:.6rem;gap:11px}
  .nav{padding:.8rem 1rem}
  .intro-sub .serif{font-size:1.1rem}
  #zc h2{font-size:clamp(1.7rem,8vw,3rem)}
  .hp-inner{grid-template-columns:1fr;gap:1.4rem;width:90vw}
  .hp-arrow{display:none}
  .hp-num{font-size:15vh;right:3vw;top:-2vh;opacity:.08}
  .hp-title{font-size:clamp(1.6rem,7.4vw,2.4rem)}
  .hp-desc{font-size:.88rem;margin-top:.8rem}
  .hp-meta{margin-top:1rem;gap:1rem}
  .hp-btn{margin-top:1rem;padding:.65rem 1.25rem}
  .proj-logo{margin-bottom:1rem}
  .proj-logo.round{height:88px;width:88px}
  .proj-logo.skull{height:104px}
  .proj-logo.plain{width:185px}
  .mock-body{height:26vh}
  .svc-grid{margin-top:1.2rem}
  .svc-cell{padding:.85rem .9rem}
  .svc-cell b{font-size:1.02rem}
  .svc-cell span{font-size:.76rem}
  .handoff{bottom:2.2vh}
  .hcount{right:1rem}
  .hbar{left:1rem;width:120px}
  .mline{font-size:clamp(1.9rem,9.4vw,3rem)}
  .mpara{margin-top:6vh}
  .pk-grid{grid-template-columns:1fr}
  .svc-head{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .proc-strip{max-width:100%;text-align:left}
  .ps-steps{justify-content:flex-start}
  .ps-s{font-size:.72rem}
  .svc-head{grid-template-columns:1fr;gap:1.4rem}
  .ps-detail{min-height:150px;margin-top:1.4rem}
  .ps-num{font-size:2rem}
  .proc-fig.tl{height:140px;margin-left:0}
  .tl-lab b{display:none}
  .lab-a{bottom:calc(50% + 13px)}
  .lab-b{top:calc(50% + 13px)}
  .tl-bracket{top:calc(56% - 44px);height:16px}
  .tl-bracket span{font-size:.5rem;letter-spacing:.16em}
  .ps-desc{font-size:.88rem;margin-top:.4rem}
  .svc-list{grid-template-columns:1fr 1fr;gap:0 1.2rem;margin-top:1.2rem}
  .svc-item{padding:.7rem 0 .8rem}
  .svc-item b{font-size:1.02rem}
  .svc-item span{font-size:.8rem}
  #s-final h2{font-size:clamp(2rem,9vw,3.4rem)}
  .stamp{width:120px;height:120px;right:1.2rem;bottom:13vh}
  .foot{flex-direction:column;align-items:center;gap:.5rem;text-align:center}
}

/* Abonamentele comerciale sunt generate separat de referința vizuală imuabilă. */
.pk-grid{width:min(1680px,95vw);grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.85rem,1.1vw,1.25rem);align-items:stretch}
.pk{padding:1.9rem clamp(1.1rem,1.4vw,1.55rem);gap:.95rem}
.pk-name{font-size:clamp(1.32rem,1.55vw,1.66rem);line-height:1.08}
.pk .price-note{max-width:32rem}
.pk .pk-btn{margin-top:auto}
.pk-sub-price{font-size:clamp(1.5rem,1.8vw,1.9rem);letter-spacing:-.03em;line-height:1}
.pk-audience{min-height:3.4em}
.pk-base-note{margin:0;font-size:.78rem;font-weight:750;letter-spacing:.01em;opacity:.85}
.pk-accs{display:grid;gap:.5rem}
.pk-acc{border:1px solid rgba(20,20,18,.14);border-radius:12px;background:rgba(20,20,18,.03);overflow:hidden;transition:border-color .4s,background .4s}
.pk.hot .pk-acc{border-color:rgba(250,250,248,.18);background:rgba(250,250,248,.05)}
.pk-acc.open{border-color:rgba(201,181,140,.65);background:rgba(201,181,140,.08)}
.pk-acc-head{
  width:100%;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.72rem .9rem;text-align:left;
}
.pk-acc-head span{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pk-acc-head i{position:relative;flex:none;width:13px;height:13px;transition:transform .55s cubic-bezier(.22,.9,.24,1)}
.pk-acc-head i::before,.pk-acc-head i::after{content:'';position:absolute;left:0;top:5.5px;width:13px;height:2px;background:currentColor;border-radius:2px;transition:transform .55s cubic-bezier(.22,.9,.24,1)}
.pk-acc-head i::after{transform:rotate(90deg)}
.pk-acc.open .pk-acc-head i{transform:rotate(180deg)}
.pk-acc.open .pk-acc-head i::after{transform:rotate(0deg)}
.pk-acc-head:focus-visible{outline:2px solid #c9b58c;outline-offset:-3px;border-radius:10px}
.pk-acc-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s cubic-bezier(.22,.9,.24,1),opacity .4s}
.pk-acc.open .pk-acc-body{grid-template-rows:1fr;opacity:1}
.pk-acc-inner{min-height:0;overflow:hidden;padding:0 .9rem}
.pk-acc-inner ul{display:grid;gap:.4rem;margin:0;padding:0 0 .85rem;list-style:none}
.pk-acc-inner li{position:relative;padding-left:1rem;font-size:.85rem;line-height:1.45;opacity:.85}
.pk-acc-inner li::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:#c9b58c}
.pk-fine{margin:-.2rem 0 .85rem;padding-left:.65rem;border-left:2px solid rgba(201,181,140,.7);font-size:.72rem;line-height:1.5;opacity:.7}
.pk.hot.pk-sub{animation:pkGlow 4.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes pkGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(201,181,140,.3),0 16px 44px rgba(0,0,0,.14)}
  50%{box-shadow:0 0 0 2px rgba(201,181,140,.62),0 22px 58px rgba(0,0,0,.2)}
}
.pk-terms{
  width:min(1100px,92vw);margin:clamp(2.4rem,4.5vw,3.6rem) auto 0;
  padding:clamp(1.4rem,2.4vw,2.1rem);border:1px solid var(--line);border-radius:18px;background:#fff;
}
.pk-terms h3{margin:0 0 .9rem;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em}
.pk-terms ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.6rem;margin:0;padding:0;list-style:none}
.pk-terms li{position:relative;padding-left:1.05rem;font-size:.88rem;line-height:1.5;color:var(--gray)}
.pk-terms li::before{content:'';position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;background:#c9b58c}
.pk-plainstats-card{
  width:min(1100px,92vw);margin:1rem auto 0;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:clamp(1.3rem,2.2vw,1.9rem);border:1px solid #c9b58c;border-radius:18px;background:#f4ead4;color:var(--ink);
}
.pk-plainstats-card h3{margin:0 0 .4rem;font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.02em}
.pk-plainstats-card p{margin:0;font-size:.9rem;line-height:1.55;color:#5d5747;max-width:52rem}
.pk-plainstats-btn{flex:none}
/* Intrarea eșalonată: activă doar cu JS, ca pagina să rămână completă fără el. */
.js-anim [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.22,.9,.24,1),transform .85s cubic-bezier(.22,.9,.24,1);transition-delay:calc(var(--pk-i,0)*110ms)}
.js-anim [data-reveal].in{opacity:1;transform:none}
@media(max-width:1400px){.pk-grid{width:min(1100px,94vw);grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){
  .pk-grid{width:min(720px,92vw);grid-template-columns:1fr}
  .pk-terms ul{grid-template-columns:1fr}
  .pk-plainstats-card{flex-direction:column;align-items:flex-start}
}

/* Footer inspirat de referința furnizată: email dominant și săgeată ritmică. */
.foot{
  --foot-arrow-short:clamp(64px,6vw,86px);--foot-arrow-tall:clamp(104px,9.5vw,138px);
  position:relative;z-index:1;width:100%;margin-top:clamp(5rem,10vh,10rem);
  min-height:calc(var(--foot-arrow-tall) + 4rem);padding:clamp(2rem,4vw,4rem);
  padding-right:clamp(8rem,12vw,13rem);border-top:1px solid rgba(250,250,248,.14);
  display:block;text-align:left;font-size:inherit;letter-spacing:normal;text-transform:none;
  font-weight:500;opacity:1;
}
.foot-email{
  display:block;width:fit-content;max-width:100%;color:var(--cream);
  font-family:var(--sans);font-size:clamp(2.45rem,6.8vw,7rem);font-weight:900;
  line-height:.82;letter-spacing:-.07em;overflow-wrap:normal;word-break:normal;
  transition:color .3s,letter-spacing .45s cubic-bezier(.22,.9,.24,1);
}
.foot-email:hover{color:#C9B58C;letter-spacing:-.055em}
.foot-meta{
  display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);flex-wrap:wrap;
  margin-top:clamp(3rem,7vh,6rem);font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;opacity:.62;
}
.foot-up{
  position:absolute;right:clamp(2rem,4vw,4rem);bottom:2rem;
  width:var(--foot-arrow-short);height:var(--foot-arrow-short);border:4px solid currentColor;
  border-radius:999px;color:var(--cream);display:grid;place-items:center;
  transform-origin:center bottom;will-change:height;
  animation:footArrowBreath 4.8s cubic-bezier(.65,0,.35,1) infinite;
  transition:color .3s,background .3s;
}
.foot-up svg{width:58%;height:58%;overflow:visible}
.foot-up path{fill:currentColor}
.foot-up:hover,.foot-up:focus-visible{color:var(--ink);background:var(--cream);outline:none}
.stamp{bottom:calc(20vh + 7rem)}
@keyframes footArrowBreath{
  0%,18%,82%,100%{height:var(--foot-arrow-short)}
  38%,62%{height:var(--foot-arrow-tall)}
}
@media(max-width:680px){
  .foot{padding-right:5.75rem;min-height:calc(var(--foot-arrow-tall) + 3rem)}
  .foot-email{font-size:clamp(2.1rem,10.7vw,4rem);line-height:.88}
  .foot-meta{align-items:flex-start;flex-direction:column;gap:.65rem;letter-spacing:.1em}
  .foot-up{right:1.35rem;bottom:1.5rem;border-width:3px}
  .stamp{bottom:calc(13vh + 10rem)}
}

/* „Cine este Vlad?" + dovezile + FAQ: blocul de încredere care închide secțiunea de abonamente. */
.pk-target{margin:.85rem auto 0;max-width:46rem;color:var(--gray);font-size:clamp(.95rem,1.35vw,1.1rem);font-weight:600;letter-spacing:.01em}
.about-vlad{
  width:min(1100px,92vw);margin:clamp(2.6rem,5vw,4rem) auto 0;
  display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(1.5rem,3vw,2.8rem);
  padding:clamp(1.5rem,2.8vw,2.5rem);border:1px solid var(--line);border-radius:18px;background:#fff;
}
.about-main .kicker{color:var(--gray);opacity:1}
.about-main h3{margin:.55rem 0 .85rem;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.03em;line-height:1.1}
.about-body{margin:0;color:var(--gray);font-size:.95rem;line-height:1.65}
.about-proof{border-left:1px solid var(--line);padding-left:clamp(1.2rem,2.4vw,2.2rem)}
.about-proof h4{margin:0 0 .95rem;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8a7a56}
.about-proof ul{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.about-proof li{position:relative;padding-left:1.45rem;font-size:.88rem;line-height:1.55;color:var(--gray)}
.about-proof li::before{
  content:'✓';position:absolute;left:0;top:.06em;width:1em;color:#0f8a3d;font-weight:800;
}
.pk-faq{width:min(860px,92vw);margin:clamp(2.4rem,4.5vw,3.4rem) auto 0}
.pk-faq h3{margin:0 0 1.1rem;text-align:center;font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.02em}
.faq-accs .pk-acc{background:#fff;border-color:var(--line)}
.faq-accs .pk-acc.open{border-color:rgba(201,181,140,.65);background:rgba(201,181,140,.08)}
.faq-accs .pk-acc-head{padding:.95rem 1.1rem}
.faq-accs .pk-acc-head span{font-size:.86rem;font-weight:700;letter-spacing:.01em;text-transform:none}
.faq-answer{margin:0;padding:0 0 1rem;font-size:.88rem;line-height:1.6;color:var(--gray)}
.faq-accs .pk-acc-inner{padding:0 1.1rem}
@media(max-width:900px){
  .about-vlad{grid-template-columns:1fr}
  .about-proof{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.3rem}
}

/* Preview inline: captura full-page a site-ului se deschide chiar în mockup, la aceeași dimensiune,
   și poate fi derulată pe loc. (Site-urile din portofoliu interzic încadrarea live prin frame-ancestors.) */
.mock-veil{flex-direction:column;gap:.55rem}
.mock-sub{display:block;color:var(--cream);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.82;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.mock-scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:#fff;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(21,21,19,.45) transparent;
}
.mock-scroll img{display:block;width:100%;height:auto}
.mock.live{cursor:default}
.mock.live .mock-shot,.mock.live .mock-veil{display:none}
.mock-live-close{
  display:none;flex:none;margin-left:.45rem;width:22px;height:22px;padding:0;border:0;border-radius:7px;
  background:rgba(255,255,255,.16);color:#fafaf8;font-family:inherit;font-size:.6rem;font-weight:700;line-height:1;
  cursor:pointer;transition:background .3s;
}
.mock.live .mock-live-close{display:grid;place-items:center}
.mock-live-close:hover{background:rgba(255,255,255,.34)}
.mock-live-close:focus-visible{outline:2px solid #c9b58c;outline-offset:2px}

/* Quick navigation: un checkpoint pentru fiecare scenă și cadru major. */
.chapters{gap:3px;mix-blend-mode:difference}
.chapters button{
  position:relative;width:22px;height:18px;padding:0;border:0;border-radius:999px;
  background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none;
}
.chapters button::before{
  content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  background:#fff;opacity:.28;transform:translate(-50%,-50%) scale(1);
  transition:opacity .4s,transform .4s,box-shadow .4s;
}
.chapters button:hover::before,.chapters button:focus-visible::before{opacity:.72;transform:translate(-50%,-50%) scale(1.35)}
.chapters button:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:1px}
.chapters button.on::before{opacity:1;transform:translate(-50%,-50%) scale(1.7);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
@media(max-width:820px){.chapters{right:.35rem;gap:1px}.chapters button{width:20px;height:16px}}

/* Titlul manifestului intră în flash-ul crem; scena următoare respiră în jurul mesajului. */
#s-intro{height:350vh}
#flashHint{
  position:absolute;left:clamp(1rem,4vw,4rem);right:clamp(1rem,4vw,4rem);top:47%;transform:translateY(-50%);
  display:flex;flex-direction:column;color:var(--ink);opacity:0;pointer-events:none;
  font-family:var(--serif);font-size:clamp(2.5rem,7.1vw,6.7rem);line-height:.94;
  font-weight:800;letter-spacing:-.045em;text-transform:none;text-align:left;
}
#flashHint::after{display:none}
.flash-title-line{display:block;animation:flashTitleDrift 4.8s cubic-bezier(.4,0,.2,1) infinite alternate;will-change:transform}
.flash-title-center{align-self:center;animation-delay:-1.6s}
.flash-title-end{align-self:flex-end;animation-delay:-3.2s}
.flash-title-line em{color:var(--gray);font-weight:inherit}
@keyframes flashTitleDrift{
  from{transform:translate3d(-.18em,0,0);letter-spacing:-.05em}
  to{transform:translate3d(.18em,0,0);letter-spacing:-.025em}
}
#s-manifest{
  min-height:100vh;padding:12vh clamp(1.25rem,6vw,6rem);
  display:grid;place-items:center;
}
.mpara{
  position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0;text-align:center;
  color:var(--gray);font-weight:300;font-size:clamp(1.55rem,2.65vw,2.75rem);
  line-height:1.28;letter-spacing:-.025em;
  animation:manifestFloat 6s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.mpara span{display:block}
.mpara-lead{color:var(--ink);font-weight:600;margin-bottom:.55em}
.mpara-detail{max-width:950px;margin-inline:auto}
.mpara b{color:var(--ink);font-weight:750;position:relative;display:inline-block;animation:manifestAccent 3.8s ease-in-out infinite alternate}
.mpara b:nth-of-type(2){animation-delay:-1.9s}
.mpara::after{
  content:'';display:block;width:clamp(80px,14vw,180px);height:2px;margin:1.5em auto 0;
  background:linear-gradient(90deg,transparent,var(--ink),transparent);
  transform-origin:center;animation:manifestLine 3.2s ease-in-out infinite;
}
@keyframes manifestFloat{from{transform:translate3d(0,-10px,0)}to{transform:translate3d(0,10px,0)}}
@keyframes manifestAccent{from{opacity:.62;transform:translateY(2px)}to{opacity:1;transform:translateY(-2px)}}
@keyframes manifestLine{0%,100%{transform:scaleX(.28);opacity:.22}50%{transform:scaleX(1);opacity:.78}}
@media(max-width:820px){
  #flashHint{font-size:clamp(2.15rem,10.6vw,4rem);left:1.15rem;right:1.15rem;line-height:.98}
  .flash-title-center,.flash-title-end{align-self:flex-start}
  .mpara{font-size:clamp(1.35rem,6vw,2rem)}
}

/* Butonul plutitor de contact: pill sub logo în hero, telefon pulsant lângă checkpoint-uri după scroll. */
.contact-dock{position:fixed;z-index:92;left:50%;top:71.5%;transform:translateX(-50%)}
/* Până îl „construiește" scena intro, butonul e invizibil; fără JS rămâne vizibil ca fallback.
   visibility:hidden e obligatoriu: cu opacity:0 singur, Chromium tot desenează patch-ul de
   backdrop-filter al pastilei (cutie gri fantomă la revenirea în hero). */
.js-anim .contact-dock:not(.docked){opacity:0;pointer-events:none;visibility:hidden;will-change:opacity,transform,filter}
.cd-toggle{
  position:relative;display:flex;align-items:center;gap:.55rem;padding:.85rem 1.3rem;
  border:1px solid rgba(250,250,248,.3);border-radius:999px;background:rgba(250,250,248,.09);
  backdrop-filter:blur(9px);color:var(--cream);font:750 .72rem/1 inherit;font-family:inherit;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  /* Fără tranziții pe culoare/dimensiuni: la revenirea din starea andocată textul trebuie să fie
     instant crem, altfel rămâne o clipă închis pe pastila întunecată și butonul pare gol. */
  transition:background .3s,border-color .3s,box-shadow .35s;
}
.cd-toggle:hover{background:rgba(250,250,248,.18);border-color:rgba(250,250,248,.55)}
.cd-toggle:focus-visible{outline:2px solid #c9b58c;outline-offset:3px}
.cd-phone{width:15px;height:15px;flex:none;fill:currentColor}
.cd-caret{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.contact-dock.open .cd-caret{transform:rotate(180deg)}
.cd-pulse{display:none}
.cd-menu{
  position:absolute;top:calc(100% + 12px);left:50%;min-width:300px;padding:.45rem;
  border:1px solid rgba(250,250,248,.16);border-radius:16px;background:rgba(17,17,16,.96);
  backdrop-filter:blur(18px);box-shadow:0 26px 70px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-8px) scale(.96);transform-origin:top center;
  transition:opacity .26s,transform .34s cubic-bezier(.22,.9,.24,1);
}
.contact-dock.open .cd-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.cd-item{display:flex;align-items:center;gap:.72rem;padding:.62rem .7rem;border-radius:11px;color:var(--cream);text-decoration:none;transition:background .18s}
.cd-item:hover{background:rgba(250,250,248,.09)}
.cd-item i{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid rgba(250,250,248,.16);border-radius:10px;background:rgba(250,250,248,.05);font-style:normal}
.cd-item i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cd-item i svg.filled{fill:currentColor;stroke:none}
.cd-item b{display:block;font-size:.84rem;font-weight:750;letter-spacing:-.01em}
.cd-item small{display:block;margin-top:2px;color:#98978f;font-size:.68rem}
.cd-wa i{color:#4fd35f;border-color:rgba(79,211,95,.35);background:rgba(79,211,95,.08)}
.contact-dock.docked{
  left:calc(100vw - .85rem);top:calc(50% - 175px);transform:translateX(-100%);
  animation:cdDockIn .65s cubic-bezier(.34,1.45,.5,1) both;
}
@keyframes cdDockIn{
  from{opacity:0;transform:translateX(-100%) translateY(14px) scale(.5)}
  to{opacity:1;transform:translateX(-100%) translateY(0) scale(1)}
}
.contact-dock.docked .cd-toggle{
  width:47px;height:47px;padding:0;justify-content:center;border-radius:50%;
  background:#c9b58c;border-color:#c9b58c;color:#151513;box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.contact-dock.docked .cd-toggle:hover{background:#e7c980;border-color:#e7c980}
.contact-dock.docked .cd-label,.contact-dock.docked .cd-caret{display:none}
.contact-dock.docked .cd-phone{width:19px;height:19px;animation:cdRing 3.8s ease-in-out infinite;transform-origin:50% 40%}
@keyframes cdRing{0%,84%,100%{transform:rotate(0)}86%{transform:rotate(-16deg)}89%{transform:rotate(13deg)}92%{transform:rotate(-9deg)}95%{transform:rotate(5deg)}98%{transform:rotate(0)}}
.contact-dock.docked .cd-pulse{
  display:block;position:absolute;inset:0;border-radius:50%;pointer-events:none;
  animation:cdPulse 2.7s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes cdPulse{0%{box-shadow:0 0 0 0 rgba(201,181,140,.55)}70%{box-shadow:0 0 0 15px rgba(201,181,140,0)}100%{box-shadow:0 0 0 0 rgba(201,181,140,0)}}
.contact-dock.docked .cd-menu{left:auto;right:0;transform:translateY(-8px) scale(.96);transform-origin:top right}
.contact-dock.docked.open .cd-menu{transform:translateY(0) scale(1)}
@media(max-width:680px){
  .contact-dock{top:74%}
  .contact-dock.docked{left:calc(100vw - .55rem);top:calc(50% - 152px)}
  .contact-dock.docked .cd-toggle{width:42px;height:42px}
  .cd-menu{min-width:272px}
  .contact-dock.docked .cd-menu{right:-2px}
}

/* Scoruri Lighthouse pe cardurile de portofoliu: inele desenate + numere care cresc la intrarea în cadru. */
.proj-scores{display:flex;flex-wrap:wrap;gap:.55rem 1.05rem;margin:1.05rem 0 1.15rem}
.score-ring{display:grid;justify-items:center;gap:.4rem}
.score-dial{position:relative;display:grid;place-items:center;width:52px;height:52px}
.score-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.score-dial circle{fill:none;stroke-width:3.4}
.ring-track{stroke:currentColor;opacity:.16}
.ring-arc{stroke-dasharray:119.4;stroke-dashoffset:119.4;stroke-linecap:round;transition:stroke-dashoffset 1.35s cubic-bezier(.22,.9,.24,1)}
.proj-scores.on .ring-arc{stroke-dashoffset:var(--dash,0)}
.score-dial b{font-size:.86rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.proj-scores.on .score-dial b{opacity:1;transform:scale(1)}
.score-label{font-size:.56rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;opacity:.62;text-align:center}
.score-good{color:#23c55e}
.score-avg{color:#f59e0b}
.score-poor{color:#ef4444}
.score-good .score-label,.score-avg .score-label,.score-poor .score-label{color:currentColor}
.hp-cream .score-good{color:#0f8a3d}
.score-ring:nth-child(2) .ring-arc{transition-delay:.12s}
.score-ring:nth-child(3) .ring-arc{transition-delay:.24s}
.score-ring:nth-child(4) .ring-arc{transition-delay:.36s}
.score-pill-wrap{justify-items:center}
.score-pill{
  display:flex;align-items:center;gap:.4rem;height:30px;margin-top:11px;padding:0 .8rem;
  border-radius:999px;background:rgba(35,197,94,.14);color:#23c55e;font-size:.8rem;font-weight:800;
  opacity:0;transform:translateY(8px);transition:opacity .5s .45s,transform .6s .45s cubic-bezier(.34,1.56,.64,1);
}
.hp-cream .score-pill{color:#0f8a3d;background:rgba(15,138,61,.12)}
.proj-scores.on .score-pill{opacity:1;transform:none}
.score-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:scoreDot 2.2s ease-in-out infinite}
@keyframes scoreDot{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:900px){
  .proj-scores{gap:.45rem .7rem;margin:.8rem 0 .9rem}
  .score-dial{width:44px;height:44px}
  .score-dial b{font-size:.74rem}
  .score-label{font-size:.5rem}
}

/* Responsive hardening: telefoane înguste, ecrane scurte, landscape și safe areas. */
html,body{width:100%;max-width:100%;overscroll-behavior-x:none}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(201,181,140,.2)}
h1,h2,h3,.hp-title,.pk-name{text-wrap:balance}
p,.hp-desc,.price-note{text-wrap:pretty}
section{scroll-margin-top:3.5rem}
.nav{
  padding-left:max(clamp(1.2rem,4vw,3rem),env(safe-area-inset-left));
  padding-right:max(clamp(1.2rem,4vw,3rem),env(safe-area-inset-right));
  padding-top:max(.65rem,env(safe-area-inset-top))
}
.chapters{right:max(.35rem,env(safe-area-inset-right))}
.foot{padding-bottom:max(clamp(2rem,4vw,4rem),env(safe-area-inset-bottom))}

@media(max-width:600px){
  .chapters button{width:34px;height:32px}
  .hp-svc .ps-detail,.hp-svc .proc-strip{display:none}
  .hp-svc .svc-head{display:block}
  .hp-inner.svc-inner{width:88vw}
  .hp-svc .svc-list{grid-template-columns:1fr 1fr;gap:0 1rem;margin-top:.7rem}
  .hp-svc .svc-item{padding:.42rem 0 .52rem}
  .hp-svc .svc-item i{font-size:.58rem}
  .hp-svc .svc-item b{font-size:.9rem;margin-top:.18rem;line-height:1.18}
  .hp-svc .svc-item span{font-size:.68rem;line-height:1.3;margin-top:.2rem}
  .hp-svc .hp-kicker{margin-bottom:.45rem}
  .hp-svc .hp-title{font-size:clamp(1.45rem,7.8vw,2rem);line-height:.92}
}

@media(max-width:480px) and (max-height:650px){
  .nav{padding-top:max(.45rem,env(safe-area-inset-top));padding-bottom:.45rem}
  .nav-cta{padding:.34rem .72rem;font-size:.55rem;letter-spacing:.14em}
  .hp-inner{gap:.65rem;width:88vw}
  .hp-kicker{font-size:.54rem;letter-spacing:.24em;margin-bottom:.4rem}
  .hpanel .hp-title{font-size:1.42rem;line-height:1.02}
  .hp-desc{font-size:.73rem;line-height:1.34;margin-top:.42rem}
  .hp-meta{margin-top:.5rem;gap:.7rem;font-size:.56rem}
  .hp-btn{margin-top:.55rem;padding:.48rem .9rem;font-size:.55rem}
  .proj-logo{margin-bottom:.4rem}
  .proj-logo.round{width:54px;height:54px}
  .proj-logo.plain{width:138px}
  .proj-logo.skull{height:64px}
  .mock-body{height:18vh}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:920px){
  .nav{padding:.38rem max(.75rem,env(safe-area-inset-right)) .38rem max(.75rem,env(safe-area-inset-left))}
  .nav-cta{padding:.3rem .7rem;font-size:.52rem;letter-spacing:.13em}
  .chapters{gap:0}.chapters button{width:30px;height:24px}
  .hpanel:not(.hp-svc) .hp-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.2vw;width:89vw}
  .hpanel:first-child .hp-inner{display:block;width:86vw}
  .hp-kicker{font-size:.52rem;letter-spacing:.22em;margin-bottom:.35rem}
  .hpanel .hp-title{font-size:clamp(1.25rem,3.7vw,1.85rem);line-height:1}
  .hp-desc{font-size:.68rem;line-height:1.3;margin-top:.38rem}
  .hp-meta{margin-top:.45rem;gap:.65rem;font-size:.52rem}
  .hp-btn{margin-top:.48rem;padding:.42rem .8rem;font-size:.52rem}
  .proj-logo{margin-bottom:.3rem}
  .proj-logo.round{width:48px;height:48px}
  .proj-logo.plain{width:128px}
  .proj-logo.skull{height:58px}
  .mock-body{height:min(62vh,238px)}
  .mock-bar{min-height:27px}
  .hp-inner.svc-inner{width:90vw}
  .hp-svc .svc-head{display:block}
  .hp-svc .ps-detail,.hp-svc .proc-strip{display:none}
  .hp-svc .svc-list{grid-template-columns:repeat(3,1fr);gap:0 1rem;margin-top:.45rem}
  .hp-svc .svc-item{padding:.3rem 0 .38rem}
  .hp-svc .svc-item i{font-size:.48rem}
  .hp-svc .svc-item b{font-size:.76rem;line-height:1.13;margin-top:.1rem}
  .hp-svc .svc-item span{font-size:.58rem;line-height:1.22;margin-top:.14rem}
  .hp-svc .hp-title{font-size:1.45rem;line-height:.92}
  .hp-svc .hp-kicker{margin-bottom:.25rem}
  .panel-hint{display:none}
}
@media(orientation:landscape) and (max-height:350px) and (max-width:620px){
  .mock-body{height:54vh}
}