/* Pagini "în lucru" pentru verticalele Dosarino. Culoarea vine din --c (setată pe <html> prin clasă). */
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

.v-eu{--c:#2453ff}.v-mediu{--c:#12a150}.v-contabil{--c:#0a8fd6}.v-contracte{--c:#4f46e5}
.v-notar{--c:#8b3dff}.v-imobil{--c:#e08a00}.v-transport{--c:#0f9b8e}.v-anvelope{--c:#e2335a}
.o0{--c:#2453ff}.o1{--c:#12a150}.o2{--c:#0a8fd6}.o3{--c:#4f46e5}.o4{--c:#8b3dff}.o5{--c:#e08a00}.o6{--c:#0f9b8e}.o7{--c:#e2335a}

:root{--ink:#0b1533;--text:#2a3352;--muted:#68708a;--line:#e3e6f0;--font:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;
  background:radial-gradient(700px 500px at 85% 10%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%),
             radial-gradient(600px 500px at 0% 90%,color-mix(in srgb,var(--c) 10%,transparent),transparent 70%),
             color-mix(in srgb,var(--c) 3%,#f7f8fb)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}
a{color:inherit;text-decoration:none}
svg{width:1em;height:1em;flex:none}
.sprite{position:absolute;width:0;height:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* fundaluri pe domenii */
.p-dots::before{background-image:radial-gradient(color-mix(in srgb,var(--c) 30%,transparent) 1.2px,transparent 1.4px);background-size:26px 26px}
.p-grid::before{background-image:linear-gradient(color-mix(in srgb,var(--c) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent) 1px,transparent 1px);background-size:22px 22px}
.p-lines::before{background-image:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--c) 16%,transparent) 31px 32px)}
.p-rings::before{background-image:repeating-radial-gradient(circle at 80% 20%,transparent 0 22px,color-mix(in srgb,var(--c) 12%,transparent) 22px 23px)}
.p-blue::before{background-image:linear-gradient(color-mix(in srgb,var(--c) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--c) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--c) 8%,transparent) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}
.p-route::before{background-image:radial-gradient(circle,color-mix(in srgb,var(--c) 35%,transparent) 1.5px,transparent 2px),linear-gradient(135deg,transparent 48%,color-mix(in srgb,var(--c) 10%,transparent) 49% 51%,transparent 52%);background-size:40px 40px,120px 120px}
.p-leaf::before{background-image:radial-gradient(ellipse 10px 5px at 50% 50%,color-mix(in srgb,var(--c) 18%,transparent) 98%,transparent);background-size:60px 46px}
.p-tread::before{background-image:repeating-linear-gradient(45deg,transparent 0 14px,color-mix(in srgb,var(--c) 9%,transparent) 14px 22px),repeating-linear-gradient(-45deg,transparent 0 14px,color-mix(in srgb,var(--c) 9%,transparent) 14px 22px);background-size:60px 60px}

/* bara de sus */
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink)}
.brand .ic{width:40px;height:40px;font-size:21px;border-radius:12px}
.brand b{color:var(--c);font-weight:800}
.brand .tt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--c) 55%,transparent)}
.part{font-size:.86rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.7);transition:.25s}
.part:hover{color:var(--ink);border-color:var(--c)}
.ic{display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 70%,white),var(--c));box-shadow:0 8px 18px -8px var(--c),inset 0 1px 0 rgba(255,255,255,.35)}

/* conținut */
main{flex:1;display:flex;align-items:center}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:30px 20px 60px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c);background:color-mix(in srgb,var(--c) 10%,white);border:1px solid color-mix(in srgb,var(--c) 25%,white);padding:6px 13px;border-radius:99px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--c);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
h1{font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1.04;letter-spacing:-.045em;color:var(--ink);font-weight:800;margin:20px 0 18px}
h1 span{color:var(--c)}
.lead{font-size:1.1rem;color:var(--muted);max-width:520px}
.feats{list-style:none;display:grid;gap:10px;margin:26px 0 30px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--text)}
.feats svg{color:var(--c);font-size:1.15em;margin-top:.2em}
.status{max-width:420px}
.status p{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.status p b{color:var(--c)}
.bar{height:10px;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,white);overflow:hidden}
.bar i{display:block;height:100%;width:38%;border-radius:99px;background:repeating-linear-gradient(-45deg,var(--c) 0 10px,color-mix(in srgb,var(--c) 70%,white) 10px 20px);background-size:28px 28px;animation:stripes 1s linear infinite}
@keyframes stripes{to{background-position:28px 0}}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:14px;font-weight:700;transition:transform .25s,box-shadow .25s}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-c{background:var(--c);color:#fff;box-shadow:0 12px 30px -10px var(--c)}
.btn-c:hover{transform:translateY(-2px)}
.btn-g{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-g:hover{border-color:var(--c)}

/* scena */
.scene{position:relative;aspect-ratio:4/3;border-radius:32px;overflow:hidden;background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--c) 10%,#fff));border:1px solid color-mix(in srgb,var(--c) 18%,white);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--c) 60%,transparent),0 2px 6px rgba(11,21,51,.05)}
.scene svg{width:100%;height:100%}
.scene [class]{transform-box:fill-box}

/* alte soluții */
.others{padding:10px 0 34px}
.others p{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.others div{display:flex;flex-wrap:wrap;gap:10px}
.others a{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:.86rem;font-weight:600;transition:.25s}
.others a:hover{border-color:var(--c);transform:translateY(-2px)}
.others .ic{width:26px;height:26px;border-radius:8px;font-size:14px;box-shadow:none}
.foot{border-top:1px solid var(--line);padding:20px 0 26px;font-size:.82rem;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.foot a{color:var(--ink);font-weight:600}
.foot a:hover{color:var(--c)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px;padding-top:10px}
  .scene{order:-1}
  .part span{display:none}
}

/* ===== Scene animate ===== */
/* Fonduri Europene: stelele apar în cerc, dosarul primește bifa */
.s-eu .star{fill:#ffcc00;transform-origin:center;animation:starIn 6s ease-out infinite}
@keyframes starIn{0%{opacity:0;transform:scale(0) rotate(-90deg)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.6)}}
.s-eu .doc{animation:bob 3s ease-in-out infinite}
.s-eu .ok{transform-origin:center;animation:pop 6s ease-out infinite}
@keyframes pop{0%,30%{opacity:0;transform:scale(0)}36%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes bob{50%{transform:translateY(-6px)}}
.s-eu .coin{animation:fall 3.5s ease-in infinite}
@keyframes fall{0%{transform:translateY(-60px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(240px);opacity:0}}

/* Mediu: planta crește, reciclarea se rotește, frunze cad */
.s-mediu .cycle{transform-origin:center;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.s-mediu .stem{stroke-dasharray:160;animation:grow 6s ease-out infinite}
@keyframes grow{0%{stroke-dashoffset:160}35%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.s-mediu .lf{transform-origin:bottom left;animation:leaf 6s ease-out infinite}
.s-mediu .lf2{transform-origin:bottom right}
@keyframes leaf{0%,25%{transform:scale(0)}45%,90%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
.s-mediu .drop{animation:drift 7s linear infinite}
@keyframes drift{0%{transform:translate(0,-40px) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(60px,320px) rotate(260deg);opacity:0}}

/* Contabil: bonul iese din imprimantă, graficul crește */
.s-contabil .receipt{animation:print 6s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes print{0%{transform:translateY(-150px)}40%,90%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.s-contabil .barr{transform-origin:bottom;animation:barUp 6s ease-out infinite}
@keyframes barUp{0%,20%{transform:scaleY(0)}45%,90%{transform:scaleY(1);opacity:1}100%{opacity:0}}
.s-contabil .tot{animation:fadeIn 6s infinite}
@keyframes fadeIn{0%,38%{opacity:0}45%,90%{opacity:1}100%{opacity:0}}

/* Contracte: stiloul semnează */
.s-contracte .sig{stroke-dasharray:420;animation:sign 5s ease-in-out infinite}
@keyframes sign{0%,15%{stroke-dashoffset:420}65%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.s-contracte .pen{animation:penGo 5s ease-in-out infinite;transform:translate(330px,208px)}
@keyframes penGo{0%,15%{transform:translate(118px,214px)}25%{transform:translate(150px,192px)}35%{transform:translate(190px,184px)}45%{transform:translate(232px,200px)}55%{transform:translate(280px,206px)}65%,92%{transform:translate(330px,208px);opacity:1}100%{transform:translate(330px,208px);opacity:0}}
.s-contracte .ln{animation:fadeIn 5s infinite}

/* Notar: ștampila apasă, sigiliul apare */
.s-notar .stamp{animation:press 4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes press{0%,10%{transform:translateY(-70px)}30%{transform:translateY(0)}38%{transform:translateY(0)}60%,100%{transform:translateY(-70px)}}
.s-notar .seal{transform-origin:center;animation:ink 4s ease-out infinite}
@keyframes ink{0%,29%{opacity:0;transform:scale(1.15)}33%{opacity:1;transform:scale(1)}90%{opacity:1}100%{opacity:0}}
.s-notar .sealtxt{animation:spin 20s linear infinite;transform-origin:center}

/* Imobil: etajele cad pe rând, geamurile se aprind */
.s-imobil .fl{animation:drop1 7s cubic-bezier(.3,1.4,.5,1) infinite}
.s-imobil .f1{animation-name:drop1}.s-imobil .f2{animation-name:drop2}.s-imobil .f3{animation-name:drop3}.s-imobil .roof{animation:drop4 7s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes drop1{0%{transform:translateY(-280px)}12%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes drop2{0%,12%{transform:translateY(-280px)}24%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes drop3{0%,24%{transform:translateY(-280px)}36%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes drop4{0%,36%{transform:translateY(-280px)}48%,92%{transform:none;opacity:1}100%{transform:none;opacity:0}}
.s-imobil .win{animation:light 7s infinite}
@keyframes light{0%,50%{fill:#e8ecf5}56%,92%{fill:#ffd36b;opacity:1}100%{fill:#ffd36b;opacity:0}}
.s-imobil .sun{animation:sunArc 7s ease-in-out infinite}
@keyframes sunArc{0%{transform:translate(-40px,30px)}50%{transform:translate(0,0)}100%{transform:translate(40px,30px)}}

/* Transport: camionul merge pe traseu */
.s-transport .route{stroke-dasharray:8 10;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.s-transport .truck{offset-anchor:50% 100%;offset-path:path("M70 230C120 230 120 120 190 130S250 210 300 170 330 80 340 70");offset-rotate:0deg;animation:drive 6s ease-in-out infinite}
@keyframes drive{0%{offset-distance:0%}85%,100%{offset-distance:100%}}
.s-transport .pin2{transform-origin:bottom;animation:pinPop 6s infinite}
@keyframes pinPop{0%,80%{transform:scale(1)}86%{transform:scale(1.3)}92%,100%{transform:scale(1)}}

/* Anvelope: roata se învârte, drumul curge */
.s-anvelope .wheel{transform-origin:center;animation:spin 1.1s linear infinite}
.s-anvelope .road{stroke-dasharray:30 24;animation:roadGo .6s linear infinite}
@keyframes roadGo{to{stroke-dashoffset:54}}
.s-anvelope .speed{animation:whoosh 1.2s ease-out infinite}
@keyframes whoosh{0%{transform:translateX(30px);opacity:0}30%{opacity:1}100%{transform:translateX(-60px);opacity:0}}
.s-anvelope .needle{transform-origin:50% 100%;animation:gauge 4s ease-in-out infinite}
@keyframes gauge{0%{transform:rotate(-70deg)}50%,80%{transform:rotate(15deg)}100%{transform:rotate(-70deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .s-transport .truck{offset-distance:100%}
}

/* utilitare pentru scene (CSP nu permite style inline) */
.fc{fill:var(--c)}.sc{stroke:var(--c)}.fl2{fill:color-mix(in srgb,var(--c) 14%,white)}.fl3{fill:color-mix(in srgb,var(--c) 35%,white)}
.t1{animation-delay:.15s!important}.t2{animation-delay:.3s!important}.t3{animation-delay:.45s!important}.t4{animation-delay:.6s!important}
.t5{animation-delay:.75s!important}.t6{animation-delay:.9s!important}.t7{animation-delay:1.05s!important}.t8{animation-delay:1.2s!important}
.t9{animation-delay:1.35s!important}.t10{animation-delay:1.5s!important}.t11{animation-delay:1.65s!important}
.u1{animation-delay:1.1s!important}.u2{animation-delay:2.3s!important}.u3{animation-delay:3.4s!important}.u4{animation-delay:4.6s!important}