:root {
--brand: #0B7C5E;
--branddeep: #053E2F;
--brandsoft: #129873;
--mint: #2BE4A7;
--amber: #EFA73E;
--amberdeep: #C9862B;
--red: #E5484D;
--reddeep: #C23A3F;
--ink: #082019;
--paper: #FFFFFF;
--paper2: #F5FAF7;
--paper3: #E9F3EE;
--paper4: #DCEDE5;
--line: rgba(11, 124, 94, 0.14);
}
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
html, body { background: var(--paper); color: var(--ink); }
body {
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "cv11", "ss01";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.font-display { font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 700; }
.display-tight { letter-spacing: -0.03em; line-height: 1.04; }
.small-caps { font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.nlabel { font-variant-numeric: tabular-nums; }
/* ===== Fundal HERO — straturi radiale verzi ===== */
.hero-bg {
background:
radial-gradient(1400px 700px at 12% -5%, rgba(11, 124, 94, .10), transparent 55%),
radial-gradient(1000px 600px at 100% 0%, rgba(239, 167, 62, .09), transparent 60%),
radial-gradient(800px 500px at 75% 120%, rgba(11, 124, 94, .08), transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F2F9F5 100%);
}
/* ===== Panglica Eligibio — coloana de mătase din dreapta hero-ului =====
SVG cu benzi curbate (stroke-uri late pe curbe Bezier) în verzii brandului,
doar pe partea dreaptă, cu derivă lentă vizibilă (doar transform).
Decorativ, aria-hidden; marginea stângă și baza se estompează prin mască + fade. */
.hero-ribbon {
position: absolute; inset: 0;
overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-ribbon::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
background: linear-gradient(180deg, rgba(242, 249, 245, 0) 0%, #F2F9F5 94%);
}
.ribbon-svg { width: 100%; height: 100%; display: block; }
.silk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hero-ribbon.gl-on .silk-canvas { display: block; }
.hero-ribbon.gl-on .ribbon-svg { display: none; }
@media (min-width: 1024px) {
/* marginile panglicii rămân crocante: silueta taie blur-ul interior exact pe contur */
.ribbon-svg {
-webkit-mask-image: url("ribbon-mask.svg");
mask-image: url("ribbon-mask.svg");
-webkit-mask-size: cover; mask-size: cover;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
}
.rb-bundle, .rb-fold { will-change: transform; transform-box: view-box; transform-origin: 62% 45%; }
.rb-bundle { animation: rb-sway 24s ease-in-out infinite alternate; }
.rb-fold { animation: rb-sway 29s ease-in-out infinite alternate-reverse; }
@keyframes rb-sway {
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
100% { transform: translate3d(-16px, 14px, 0) rotate(1.1deg); }
}
@media (prefers-reduced-motion: reduce) {
.rb-bundle, .rb-fold { animation: none; }
}
@media (max-width: 1023px) {
.hero-ribbon { opacity: .8; }
.ribbon-svg { transform: translateX(20%); }
.hero-ribbon::after {
top: 20%; height: auto; bottom: 0;
background: linear-gradient(180deg, rgba(250, 252, 251, 0) 0%, #F7FBF9 42%, #F2F9F5 100%);
}
}
/* ===== Pagina „conturată" (stil Stripe): conținutul stă într-o coloană centrată,
cu margini albe pe lateral pe ecranele late — nu mai curge pe tot desktopul ===== */
body { background: #FFFFFF; }
header, main, footer {
max-width: 1440px;
margin-left: auto; margin-right: auto;
}
/* ===== Pagina „De ce Eligibio" — animația 2D (cronologie de 18s, buclă) =====
„Nu intri pe ușă? Intri pe geam, cu Eligibio."
0–16% merge spre ușa din dreapta 16–30% trage de ușă — nu se deschide
30–36% pas înapoi, dezumflat 36–44% IDEEA: beculețul + fereastra se aprind, apare scara
44–56% merge spre scară (stânga) 56–74% urcă pe scară și intră pe geam
76–88% linia continuă ascendent 88–100% respiro + reluare */
.a2-fig {
animation: a2-fig 18s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes a2-fig {
0% { transform: translate(80px, 430px) scale(1); opacity: 0; }
2% { transform: translate(96px, 430px) scale(1); opacity: 1; }
16% { transform: translate(526px, 430px) scale(1); opacity: 1; }
18% { transform: translate(522px, 430px) scale(1); opacity: 1; }
20% { transform: translate(528px, 430px) scale(1); opacity: 1; }
22% { transform: translate(521px, 430px) scale(1); opacity: 1; }
24% { transform: translate(528px, 430px) scale(1); opacity: 1; }
26% { transform: translate(521px, 430px) scale(1); opacity: 1; }
28% { transform: translate(527px, 430px) scale(1); opacity: 1; }
33%, 44% { transform: translate(504px, 430px) scale(1); opacity: 1; }
56% { transform: translate(454px, 430px) scale(1); opacity: 1; }
59% { transform: translate(441px, 415px) scale(.98); opacity: 1; }
63% { transform: translate(426px, 372px) scale(.94); opacity: 1; }
67% { transform: translate(412px, 328px) scale(.9); opacity: 1; }
71% { transform: translate(398px, 285px) scale(.86); opacity: 1; }
74% { transform: translate(386px, 255px) scale(.8); opacity: 1; }
77% { transform: translate(372px, 235px) scale(.66); opacity: 0; }
96% { transform: translate(372px, 235px) scale(.66); opacity: 0; }
98%, 100%{ transform: translate(80px, 430px) scale(1); opacity: 0; }
}
.a2-fig-inner {
transform-box: fill-box; transform-origin: center bottom;
animation: a2-inner 18s ease-in-out infinite;
}
@keyframes a2-inner {
0%, 16% { transform: scale(1, 1) rotate(0deg); }
18% { transform: scale(1, 1) rotate(-14deg); } /* trage de ușă, lăsat pe spate */
20% { transform: scale(1, 1) rotate(-4deg); }
22% { transform: scale(1, 1) rotate(-15deg); }
24% { transform: scale(1, 1) rotate(-4deg); }
26% { transform: scale(1, 1) rotate(-15deg); }
28% { transform: scale(1, 1) rotate(-5deg); }
31% { transform: scale(1, 1) rotate(3deg); } /* dezumflat */
36%, 42% { transform: scale(1, 1) rotate(0deg); }
45%, 56% { transform: scale(-1, 1) rotate(0deg); } /* se întoarce spre scară */
60% { transform: scale(-1, 1) rotate(-12deg); } /* urcă aplecat spre scară */
74% { transform: scale(-1, 1) rotate(-14deg); }
78% { transform: scale(-1, 1) rotate(-14deg); }
98%, 100%{ transform: scale(1, 1) rotate(0deg); }
}
.a2-leg { transform-box: fill-box; }
.a2-legL { transform-origin: right top; animation: a2-legL 18s linear infinite; }
.a2-legR { transform-origin: left top; animation: a2-legR 18s linear infinite; }
@keyframes a2-legL {
0% { transform: rotate(0deg); }
2% { transform: rotate(17deg); } 4% { transform: rotate(-17deg); } 6% { transform: rotate(17deg); }
8% { transform: rotate(-17deg); } 10% { transform: rotate(17deg); } 12% { transform: rotate(-17deg); }
14% { transform: rotate(15deg); } 16%, 44% { transform: rotate(0deg); }
47% { transform: rotate(17deg); } 50% { transform: rotate(-17deg); } 53% { transform: rotate(15deg); }
56% { transform: rotate(0deg); }
59% { transform: rotate(28deg); } 63% { transform: rotate(-10deg); } 67% { transform: rotate(28deg); }
71% { transform: rotate(-10deg); } 74% { transform: rotate(24deg); }
78%, 100% { transform: rotate(0deg); }
}
@keyframes a2-legR {
0% { transform: rotate(0deg); }
2% { transform: rotate(-17deg); } 4% { transform: rotate(17deg); } 6% { transform: rotate(-17deg); }
8% { transform: rotate(17deg); } 10% { transform: rotate(-17deg); } 12% { transform: rotate(17deg); }
14% { transform: rotate(-15deg); } 16%, 44% { transform: rotate(0deg); }
47% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } 53% { transform: rotate(-15deg); }
56% { transform: rotate(0deg); }
59% { transform: rotate(-12deg); } 63% { transform: rotate(26deg); } 67% { transform: rotate(-12deg); }
71% { transform: rotate(26deg); } 74% { transform: rotate(-8deg); }
78%, 100% { transform: rotate(0deg); }
}
/* brațul din față: se întinde spre clanță cât trage */
.a2-armF { transform-box: fill-box; transform-origin: left top; animation: a2-armF 18s ease-in-out infinite; }
@keyframes a2-armF {
0%, 15% { transform: rotate(0deg); }
17%, 29% { transform: rotate(-48deg); }
32%, 100% { transform: rotate(0deg); }
}
/* foaia ușii: doar se zgâlțâie — NU se deschide */
.a2-leaf { animation: a2-leaf 18s ease-in-out infinite; }
@keyframes a2-leaf {
0%, 17% { transform: translateX(0); }
19% { transform: translateX(-3px); } 21% { transform: translateX(0); }
23% { transform: translateX(-3px); } 25% { transform: translateX(0); }
27% { transform: translateX(-3px); } 29%, 100% { transform: translateX(0); }
}
/* beculețul-idee */
.a2-bulb {
opacity: 0; transform-box: fill-box; transform-origin: center bottom;
animation: a2-bulb 18s ease-in-out infinite;
}
@keyframes a2-bulb {
0%, 35% { opacity: 0; transform: scale(.3); }
38% { opacity: 1; transform: scale(1.2); }
40% { opacity: 1; transform: scale(1); }
50% { opacity: 1; transform: scale(1); }
54%, 100%{ opacity: 0; transform: scale(.3); }
}
/* fereastra se aprinde în verde–galben la momentul ideii */
.a2-win-glow { opacity: 0; animation: a2-win 18s ease-in-out infinite; }
@keyframes a2-win {
0%, 36% { opacity: 0; }
42% { opacity: .42; }
74% { opacity: .42; }
78% { opacity: .58; }
94% { opacity: .42; }
98%, 100%{ opacity: 0; }
}
/* scara apare odată cu ideea */
.a2-ladder { opacity: 0; animation: a2-ladder 18s ease-in-out infinite; }
@keyframes a2-ladder {
0%, 38% { opacity: 0; transform: translateY(10px); }
43% { opacity: .85; transform: translateY(0); }
95% { opacity: .85; transform: translateY(0); }
98%, 100%{ opacity: 0; transform: translateY(10px); }
}
/* calea Eligibio: din fereastră spre interiorul încăperii, cu săgeată și semn */
.a2-rise {
stroke-dasharray: 420; stroke-dashoffset: 420; opacity: 0;
animation: a2-rise 18s ease-in-out infinite;
}
@keyframes a2-rise {
0%, 76% { stroke-dashoffset: 420; opacity: 0; }
78% { stroke-dashoffset: 420; opacity: 1; }
87% { stroke-dashoffset: 0; opacity: 1; }
94% { stroke-dashoffset: 0; opacity: 1; }
98%, 100%{ stroke-dashoffset: 420; opacity: 0; }
}
.a2-rise-head { opacity: 0; animation: a2-rise-head 18s ease-in-out infinite; }
@keyframes a2-rise-head {
0%, 86% { opacity: 0; }
88%, 94% { opacity: 1; }
97%, 100%{ opacity: 0; }
}
.a2-rise-mark {
opacity: 0; transform-box: fill-box; transform-origin: center;
animation: a2-rise-mark 18s ease-in-out infinite;
}
@keyframes a2-rise-mark {
0%, 87% { opacity: 0; }
89% { opacity: 1; }
94% { opacity: 1; }
97%, 100%{ opacity: 0; }
}
/* clientul fericit dincolo de ușă: apare după săgeată și țopăie de bucurie */
.a2-fig2 {
opacity: 0; transform-box: fill-box; transform-origin: center bottom;
animation: a2-fig2 18s ease-in-out infinite;
}
@keyframes a2-fig2 {
0%, 88% { opacity: 0; transform: translateY(0) scale(.6); }
89.5% { opacity: 1; transform: translateY(0) scale(1.06); }
90.5% { opacity: 1; transform: translateY(0) scale(1); }
91.5% { opacity: 1; transform: translateY(-9px) scale(1); }
92.5% { opacity: 1; transform: translateY(0) scale(1); }
93.5% { opacity: 1; transform: translateY(-7px) scale(1); }
94.5% { opacity: 1; transform: translateY(0) scale(1); }
96% { opacity: 1; transform: translateY(0) scale(1); }
98%, 100%{ opacity: 0; transform: translateY(0) scale(.6); }
}
.a2-fig2-spark { opacity: 0; animation: a2-fig2-spark 18s ease-in-out infinite; }
@keyframes a2-fig2-spark {
0%, 89% { opacity: 0; }
90.5% { opacity: 1; }
93% { opacity: .4; }
94.5% { opacity: 1; }
96% { opacity: 1; }
98%, 100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.a2-fig, .a2-fig-inner, .a2-leg, .a2-legL, .a2-legR, .a2-armF, .a2-leaf,
.a2-bulb, .a2-win-glow, .a2-ladder, .a2-rise, .a2-rise-head, .a2-rise-mark,
.a2-fig2, .a2-fig2-spark { animation: none; }
.a2-rise-head, .a2-rise-mark { opacity: 1; }
.a2-fig2 { opacity: 1; transform: none; }
.a2-fig2-spark { opacity: 1; }
.a2-fig { transform: translate(560px, 430px); }
.a2-win-glow { opacity: .35; }
.a2-ladder { opacity: .85; transform: none; }
.a2-rise { stroke-dashoffset: 0; opacity: 1; }
}
/* cronologia — carduri pe orizontală, derulabile (auto + tragere) */
.tl-scroll {
overflow-x: auto; padding: 4px 24px 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: rgba(11,124,94,.35) transparent;
cursor: grab;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.tl-scroll.is-drag { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.tl-scroll .tl-card { user-select: none; }
/* indiciul de tragere: pastilă cu degetul care trage spre stânga, peste axă */
.tl-wrap { position: relative; }
.tl-swipe {
position: absolute; left: 50%; top: 50%; z-index: 6;
transform: translate(-50%, -50%);
display: inline-flex; align-items: center; gap: 5px;
padding: 13px 18px;
background: rgba(255, 255, 255, .94);
border: 1px solid var(--line); border-radius: 999px;
color: #0B7C5E;
box-shadow: 0 1px 0 rgba(11,124,94,.06), 0 22px 48px -24px rgba(11,124,94,.5);
pointer-events: none;
transition: opacity .45s ease, transform .45s ease;
}
.tl-swipe.is-hide { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.tl-swipe-hand { animation: tl-swipe-hand 2.4s ease-in-out infinite; }
.tl-swipe-arr { animation: tl-swipe-arr 2.4s ease-in-out infinite; }
@keyframes tl-swipe-hand {
0%, 12% { transform: translateX(0) rotate(0deg); }
42%, 58% { transform: translateX(-15px) rotate(-9deg); }
88%, 100%{ transform: translateX(0) rotate(0deg); }
}
@keyframes tl-swipe-arr {
0%, 12% { transform: translateX(0); opacity: .45; }
42%, 58% { transform: translateX(-5px); opacity: 1; }
88%, 100%{ transform: translateX(0); opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
.tl-swipe-hand, .tl-swipe-arr { animation: none; }
}
.tl-track { display: flex; gap: 18px; width: max-content; margin: 0 auto; padding: 0 max(0px, calc((100vw - 1320px) / 2)); }
.tl-card {
width: 300px; flex: none;
background: var(--paper); border: 1px solid var(--line); border-radius: 26px;
padding: 26px 24px;
box-shadow: 0 1px 0 rgba(11,124,94,.05), 0 18px 40px -30px rgba(11,124,94,.25);
}
.tl-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 14px;
background: rgba(11,124,94,.1); color: var(--brand);
}
.tl-an { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 30px; font-weight: 700; margin-top: 14px; letter-spacing: -0.02em; }
.tl-card h3 { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 16.5px; font-weight: 700; line-height: 1.35; margin-top: 6px; }
.tl-card p { font-size: 13.5px; line-height: 1.65; color: rgba(8,32,25,.65); margin-top: 8px; }
.tl-card-verde { background: linear-gradient(180deg, #06392C, #052A21); border-color: rgba(43,228,167,.25); }
.tl-card-verde .tl-ico { background: rgba(43,228,167,.16); color: var(--mint); }
.tl-card-verde .tl-an, .tl-card-verde h3 { color: #fff; }
.tl-card-verde p { color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) {
.dce-arrow, .dce-arrow-head, .dce-fereastra rect:first-child { animation: none; }
.dce-arrow { stroke-dashoffset: 0; }
.dce-arrow-head { opacity: 1; }
}
/* ===== Pagina „Drumul tău" — hero dark cu mintea conectată ===== */
.dt-hero {
background:
radial-gradient(900px 600px at 75% 30%, rgba(43, 228, 167, .12), transparent 60%),
radial-gradient(700px 500px at 15% 85%, rgba(18, 152, 115, .1), transparent 55%),
linear-gradient(180deg, #05201A 0%, #03150F 100%);
}
.dt-creier { animation: dt-puls 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dt-puls {
0%, 100% { filter: drop-shadow(0 0 14px rgba(43, 228, 167, .25)); transform: scale(1); }
50% { filter: drop-shadow(0 0 30px rgba(43, 228, 167, .5)); transform: scale(1.02); }
}
.dt-energie {
animation: dt-curge-lung 3s linear infinite;
filter: drop-shadow(0 0 5px rgba(43, 228, 167, .8));
}
@keyframes dt-curge-lung { to { stroke-dashoffset: -304; } }
@keyframes dt-curge { to { stroke-dashoffset: -200; } }
.dt-cerc { animation: dt-respira 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.dt-cerc2 { animation-delay: -3s; }
@keyframes dt-respira { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* Piramida nevoilor (Descoperă): ascensiunea animată + treapta Eligibio care pulsează */
.pir-urcare { animation: dt-curge 3.2s linear infinite; }
.pir-elig { animation: dt-priza-glow 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pir-sign { animation: dt-priza-glow 3.4s ease-in-out infinite; animation-delay: -1.7s; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
.pir-urcare, .pir-elig, .pir-sign { animation: none; }
}
.dt-priza { animation: dt-priza-glow 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dt-priza-glow {
0%, 100% { filter: drop-shadow(0 0 6px rgba(43, 228, 167, .3)); }
50% { filter: drop-shadow(0 0 18px rgba(43, 228, 167, .65)); }
}
@media (prefers-reduced-motion: reduce) {
.dt-creier, .dt-energie, .dt-cerc, .dt-priza { animation: none; }
}
/* bannerul de parteneri: șirul de cercuri cu logo-urile băncilor */
.prt-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
row-gap: 14px;
}
.prt-pill {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 92px; height: 84px; padding: 0 20px;
border-radius: 999px; background: rgba(43, 228, 167, .16);
border: 2px solid rgba(43, 228, 167, .35);
color: #fff; font-family: 'Space Grotesk', Inter, sans-serif;
font-size: 24px; font-weight: 700; line-height: 1;
margin-right: 6px;
}
.prt-pill em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-top: 4px; }
.prt-chip {
width: 84px; height: 84px; border-radius: 50%;
background: #fff; border: 3px solid rgba(255, 255, 255, .55);
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; margin-left: -12px; flex: none;
box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .45);
transition: transform .22s ease;
}
.prt-chip:hover { transform: translateY(-6px); z-index: 1; }
.prt-chip img { width: 72%; height: 72%; object-fit: contain; }
.prt-chip-plus {
background: rgba(255, 255, 255, .12); color: #fff;
font-family: 'Space Grotesk', Inter, sans-serif; font-size: 20px; font-weight: 700;
border-color: rgba(255, 255, 255, .3);
}
@media (max-width: 640px) {
.prt-chip { width: 62px; height: 62px; margin-left: -10px; }
.prt-pill { height: 62px; min-width: 74px; font-size: 18px; }
}
/* ===== Panoul „Problema" (Drumul tău) — radiografie în stil dashboard ===== */
.pb-panel {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 1px 0 rgba(11,124,94,.05), 0 30px 60px -42px rgba(8,32,25,.35);
overflow: hidden;
}
.pb-head {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: 22px 28px; border-bottom: 1px solid var(--line);
}
.pb-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.pb-title-mare {
font-weight: 700; font-size: 22px; line-height: 1.25; max-width: 46ch;
}
@media (min-width: 1024px) { .pb-title-mare { font-size: 26px; } }
.pb-sub { margin-top: 3px; font-size: 12.5px; color: rgba(8,32,25,.55); }
.pb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-chip {
font-size: 12px; font-weight: 600; color: rgba(8,32,25,.75);
border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--paper2);
}
.pb-chip-ghost { background: transparent; color: rgba(8,32,25,.5); }
.pb-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pb-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pb-col { padding: 24px 28px 26px; }
@media (min-width: 768px) {
.pb-col + .pb-col { border-left: 1px solid var(--line); }
}
@media (max-width: 767px) {
.pb-col + .pb-col { border-top: 1px solid var(--line); }
}
.pb-col-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.pb-col-q { margin-top: 2px; font-size: 12.5px; color: rgba(8,32,25,.55); min-height: 34px; }
.pb-stat {
margin-top: 10px; font-family: 'Space Grotesk', sans-serif;
font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
display: flex; align-items: baseline; gap: 8px;
}
.pb-stat-text { font-size: 21px; }
.pb-stat-unit { font-size: 15px; font-weight: 600; color: rgba(8,32,25,.6); }
.pb-trend { font-size: 12px; border-radius: 6px; padding: 2px 6px; }
.pb-trend-rau { color: var(--reddeep); background: rgba(229,72,77,.1); }
.pb-chart {
margin-top: 18px;
display: flex; align-items: flex-start; gap: 18px;
padding: 0 2px; position: relative;
}
.pb-chart::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px;
background: repeating-linear-gradient(to top, rgba(11,124,94,.09) 0 1px, transparent 1px 42px);
pointer-events: none;
}
.pb-bara { display: flex; flex-direction: column; align-items: center; flex: none; position: relative; z-index: 1; }
.pb-zone { height: 150px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.pb-val { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pb-val-rau { color: var(--reddeep); font-size: 14px; }
.pb-bar { width: 44px; display: flex; flex-direction: column-reverse; flex: none; }
.pb-bar-gol { width: 44px; height: 104px; border: 1.5px dashed rgba(194,58,63,.55); border-radius: 6px; }
.pb-seg { display: block; width: 100%; }
.pb-bar .pb-seg:last-child { border-radius: 4px 4px 0 0; }
.pb-lbl {
margin-top: 7px; font-size: 11px; line-height: 1.35;
color: rgba(8,32,25,.55); text-align: center; max-width: 92px;
}
.pb-nota { margin-top: 16px; font-size: 12.5px; color: rgba(8,32,25,.62); line-height: 1.55; }
.pb-legend { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.pb-legend li {
display: flex; align-items: center; gap: 9px;
font-size: 13px; color: rgba(8,32,25,.78);
}
.pb-legend i { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.pb-legend b { margin-left: auto; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pb-foot {
padding: 18px 28px; border-top: 1px solid var(--line);
font-size: 14px; color: rgba(8,32,25,.72); background: var(--paper2);
}
/* intrarea barelor: cresc de jos, eșalonat, când panoul intră în ecran */
@media (prefers-reduced-motion: no-preference) {
.pb-panel .pb-bar { transform: scaleY(0); transform-origin: bottom; }
.pb-panel.pb-go .pb-bar { animation: pb-creste .9s cubic-bezier(.2,.7,.2,1) forwards; }
.pb-panel.pb-go .pb-col:nth-child(2) .pb-bar { animation-delay: .25s; }
.pb-panel.pb-go .pb-col:nth-child(3) .pb-bar { animation-delay: .5s; }
.pb-panel.pb-go .pb-bar-ghost { animation-duration: .7s; }
}
@keyframes pb-creste { to { transform: scaleY(1); } }
/* ===== Secțiunea „Soluția" (Drumul tău) — fișa de evaluare ca document viu ===== */
.fs-map {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
font-size: 14px; line-height: 1.55;
}
.fs-map-nu {
font-weight: 700; color: var(--reddeep); white-space: nowrap;
text-decoration: line-through; text-decoration-color: rgba(194,58,63,.45); text-decoration-thickness: 1.5px;
}
.fs-map-sageata { color: var(--brand); flex: none; align-self: center; }
.fs-map-da { color: rgba(8,32,25,.78); flex: 1; min-width: 220px; }
.fs-doc {
background: var(--paper); border: 1px solid rgba(8,32,25,.07); border-radius: 28px;
box-shadow: 0 2px 6px -2px rgba(8,32,25,.06), 0 44px 90px -50px rgba(8,32,25,.45);
overflow: hidden; max-width: 560px; margin: 0 auto;
}
.fs-doc-head {
display: flex; align-items: center; gap: 12px;
padding: 18px 24px; border-bottom: 1px solid rgba(8,32,25,.06);
}
.fs-doc-titlu { display: flex; flex-direction: column; min-width: 0; }
.fs-doc-titlu b { font-family: 'Space Grotesk', sans-serif; font-size: 16px; letter-spacing: -0.01em; }
.fs-doc-titlu span { font-size: 12px; color: rgba(8,32,25,.55); }
.fs-chip {
margin-left: auto; flex: none;
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--brand);
border: 1px solid rgba(11,124,94,.22); border-radius: 999px; padding: 5px 12px;
}
.fs-chip::before {
content: ''; width: 6px; height: 6px; border-radius: 999px;
background: var(--mint); box-shadow: 0 0 8px rgba(43,228,167,.8);
}
.fs-doc-body { padding: 20px 22px 76px; }
.fs-scena { position: relative; max-width: 560px; margin: 0 auto; }
.fs-dark {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
border-radius: 20px; padding: 20px 22px; color: #fff;
background:
radial-gradient(220px 130px at 18% 0%, rgba(43,228,167,.16), transparent 70%),
radial-gradient(200px 140px at 100% 110%, rgba(15,154,116,.22), transparent 70%),
linear-gradient(135deg, #05231B 0%, #04191355 40%, #052A21 100%), #041B15;
box-shadow: 0 24px 48px -24px rgba(4,27,21,.6), inset 0 0 0 1px rgba(43,228,167,.12);
}
.fs-dark::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(140% 120% at 50% 0%, #000 30%, transparent 90%);
mask-image: radial-gradient(140% 120% at 50% 0%, #000 30%, transparent 90%);
}
.fs-dark > * { position: relative; }
.fs-dark-dr { text-align: right; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.1); }
.fs-dark-et { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.fs-dark-nr {
font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: #2BE4A7;
text-shadow: 0 0 28px rgba(43,228,167,.55);
}
.fs-dark-fico { font-size: 27px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.fs-dark-sub { font-size: 9.5px; color: rgba(255,255,255,.4); letter-spacing: .04em; }
.fs-dark-chip {
display: inline-block; margin-top: 6px;
font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
border-radius: 999px; padding: 3px 10px;
color: #2BE4A7; border: 1px solid rgba(43,228,167,.35);
}
.fs-statgrid {
margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
border-top: 1px solid rgba(8,32,25,.06); border-bottom: 1px solid rgba(8,32,25,.06);
padding: 13px 0;
}
@media (max-width: 460px) { .fs-statgrid { grid-template-columns: 1fr 1fr; } }
.fs-statgrid span { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(8,32,25,.4); }
.fs-statgrid b { display: block; font-size: 15.5px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.fs-statgrid i { display: block; font-style: normal; font-size: 9.5px; color: rgba(194,58,63,.75); margin-top: 1px; white-space: nowrap; }
.fs-stat-rau b { color: var(--reddeep); }
.fs-credite { margin-top: 10px; display: flex; flex-direction: column; }
.fs-credit {
display: flex; align-items: center; gap: 12px;
padding: 9px 0; border-bottom: 1px solid rgba(8,32,25,.05);
font-size: 12.5px;
}
.fs-credit:last-child { border-bottom: 0; }
.fs-credit span { flex: 1; min-width: 0; color: rgba(8,32,25,.78); font-weight: 600; }
.fs-credit b { font-weight: 700; white-space: nowrap; }
.fs-eval {
flex: none; display: inline-flex; align-items: center; gap: 6px;
font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .02em;
white-space: nowrap;
}
.fs-eval::before {
content: ''; width: 7px; height: 7px; border-radius: 999px;
background: currentColor; box-shadow: 0 0 7px currentColor;
}
.fs-eval-rau { color: var(--reddeep); }
.fs-eval-mediu { color: #B07314; }
.fs-eval-ok { color: var(--brand); }
.fs-float {
position: absolute; left: -26px; bottom: 60px; z-index: 2;
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.92); border: 1px solid rgba(8,32,25,.07); border-radius: 16px;
padding: 12px 16px; backdrop-filter: blur(6px);
box-shadow: 0 24px 50px -26px rgba(8,32,25,.4);
}
.fs-float-ico {
width: 26px; height: 26px; border-radius: 999px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; background: var(--brand);
}
.fs-float-txt b { display: block; font-size: 11px; font-weight: 700; color: rgba(8,32,25,.6); }
.fs-float-txt span { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.fs-float-txt s { color: var(--reddeep); }
.fs-float-txt strong { color: var(--brand); font-weight: 800; }
.fs-card {
position: absolute; right: -28px; bottom: -42px; z-index: 3;
width: 268px; border-radius: 20px; padding: 18px 20px;
background:
radial-gradient(170px 100px at 88% 8%, rgba(43,228,167,.22), transparent 70%),
linear-gradient(150deg, #082E23 0%, #05231B 55%, #0B4534 100%);
box-shadow: 0 36px 68px -30px rgba(4,27,21,.75), inset 0 0 0 1px rgba(43,228,167,.25);
color: #fff; overflow: hidden;
}
.fs-card::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
}
.fs-card-sus { display: flex; align-items: center; justify-content: space-between; }
.fs-card-brand { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.fs-card-brand b { color: #2BE4A7; }
.fs-card-cip {
width: 30px; height: 22px; margin-top: 16px; border-radius: 5px;
background: linear-gradient(135deg, #F6CE8B, #C9862B); opacity: .92;
position: relative;
}
.fs-card-cip::before {
content: ''; position: absolute; inset: 5px 7px;
border: 1px solid rgba(8,32,25,.35); border-radius: 3px;
}
.fs-card-jos { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 18px; }
.fs-vizita { display: flex; align-items: center; gap: 13px; margin-top: 16px; }
.fs-avatar { flex: none; display: block; filter: drop-shadow(0 0 10px rgba(43,228,167,.25)); }
.fs-vizita-txt { min-width: 0; }
.fs-card-nume {
display: block; font-family: 'Space Grotesk', sans-serif;
font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
}
.fs-card-rol { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .03em; color: rgba(43,228,167,.85); }
@media (max-width: 1100px) {
.fs-float { position: static; margin-top: 14px; box-shadow: 0 14px 30px -20px rgba(8,32,25,.35); }
.fs-card { position: static; margin: 14px auto 0; }
}
.fs-kv-sus { margin-top: 6px; }
.fs-kv-lista { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fs-kv {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 10px 0; border-bottom: 1px solid rgba(8,32,25,.05);
font-size: 13px;
}
.fs-kv:last-child { border-bottom: 0; }
.fs-kv span { color: rgba(8,32,25,.6); }
.fs-kv b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.fs-ok { color: var(--brand) !important; }
.fs-kv-rau b { color: var(--reddeep); }
.fs-kv-rau b i { font-style: normal; font-weight: 600; font-size: 11px; color: rgba(194,58,63,.8); }
.fs-flag {
display: inline-block; font-style: normal; font-size: 10px; font-weight: 700;
color: var(--reddeep); background: rgba(229,72,77,.1);
border-radius: 999px; padding: 2px 8px; margin-left: 6px;
white-space: nowrap; vertical-align: 1px;
}
.fs-sub {
margin-top: 20px; padding-top: 0; border-top: 0;
font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: rgba(8,32,25,.38);
}
.fs-banci { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.fs-banca { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.fs-banca span { width: 64px; flex: none; color: rgba(8,32,25,.7); }
.fs-banca b { width: 38px; flex: none; text-align: right; font-weight: 700; }
.fs-track { flex: 1; height: 5px; border-radius: 999px; background: rgba(8,32,25,.06); overflow: visible; }
.fs-fill {
display: block; height: 100%; border-radius: 999px; width: var(--w);
background: linear-gradient(90deg, #0B7C5E, #2BE4A7);
box-shadow: 0 0 10px rgba(43,228,167,.55);
}
.fs-fill-slab { background: linear-gradient(90deg, #C9862B, #EFA73E); box-shadow: 0 0 10px rgba(239,167,62,.5); }
.fs-plan { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.fs-plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: rgba(8,32,25,.8); }
.fs-plan li i {
flex: none; font-style: normal; font-size: 11px; font-weight: 700;
width: 20px; height: 20px; border-radius: 999px; margin-top: 1px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--brand); background: transparent; border: 1.5px solid rgba(11,124,94,.5);
}
.fs-doc-foot {
display: flex; align-items: center; justify-content: flex-start; gap: 12px;
padding: 14px 24px; border-top: 1px solid rgba(8,32,25,.06);
background: transparent; font-size: 13px; color: rgba(8,32,25,.6);
}
.fs-doc-foot b { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: var(--brand); }
@media (max-width: 520px) {
.fs-top { flex-direction: column; align-items: flex-start; }
}
/* ===== Fișa hero în dark — look de aplicație high-tech ===== */
.fs-doc {
background:
radial-gradient(420px 240px at 82% -8%, rgba(43,228,167,.14), transparent 65%),
radial-gradient(300px 220px at -10% 100%, rgba(15,154,116,.12), transparent 70%),
linear-gradient(165deg, #082A20 0%, #051B15 45%, #03110D 100%);
border: 1px solid rgba(43,228,167,.22);
box-shadow: 0 8px 20px -10px rgba(3,17,13,.5), 0 50px 100px -50px rgba(3,17,13,.9), inset 0 1px 0 rgba(255,255,255,.06);
position: relative;
}
.fs-doc::before {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 95%);
mask-image: radial-gradient(120% 100% at 50% 0%, #000 25%, transparent 95%);
}
.fs-doc > * { position: relative; z-index: 1; }
.fs-doc .fs-doc-head { border-bottom: 1px solid rgba(255,255,255,.08); }
.fs-doc .fs-doc-titlu b { color: #fff; }
.fs-doc .fs-doc-titlu span { color: rgba(255,255,255,.45); }
.fs-doc .fs-chip { color: #2BE4A7; border-color: rgba(43,228,167,.35); }
.fs-doc .fs-dark {
background:
radial-gradient(220px 130px at 18% 0%, rgba(43,228,167,.2), transparent 70%),
linear-gradient(135deg, rgba(43,228,167,.09), rgba(255,255,255,.02) 60%);
box-shadow: inset 0 0 0 1px rgba(43,228,167,.22);
}
.fs-doc .fs-kv { border-bottom-color: rgba(255,255,255,.06); }
.fs-doc .fs-kv span { color: rgba(255,255,255,.5); }
.fs-doc .fs-kv b { color: #EAFBF4; }
.fs-doc .fs-ok { color: #2BE4A7 !important; text-shadow: 0 0 12px rgba(43,228,167,.4); }
.fs-doc .fs-kv-rau b { color: #FF8489; }
.fs-doc .fs-kv-rau b i { color: rgba(255,132,137,.75); }
.fs-doc .fs-flag { color: #FF9CA0; background: rgba(229,72,77,.16); }
.fs-doc .fs-statgrid { border-color: rgba(255,255,255,.07); }
.fs-doc .fs-statgrid span { color: rgba(255,255,255,.38); }
.fs-doc .fs-statgrid b { color: #fff; }
.fs-doc .fs-stat-rau b { color: #FF8489; }
.fs-doc .fs-statgrid i { color: rgba(255,132,137,.7); }
.fs-doc .fs-sub { color: rgba(43,228,167,.55); }
.fs-doc .fs-credit { border-bottom-color: rgba(255,255,255,.06); }
.fs-doc .fs-credit span { color: rgba(255,255,255,.75); }
.fs-doc .fs-credit b { color: #fff; }
.fs-doc .fs-eval-rau { color: #FF8489; }
.fs-doc .fs-eval-mediu { color: #FFC46B; }
.fs-doc .fs-eval-ok { color: #2BE4A7; }
.fs-doc .fs-banca span { color: rgba(255,255,255,.6); }
.fs-doc .fs-banca b { color: #fff; }
.fs-doc .fs-track { background: rgba(255,255,255,.09); }
.fs-doc .fs-plan li { color: rgba(255,255,255,.78); }
.fs-doc .fs-plan li i { color: #2BE4A7; border-color: rgba(43,228,167,.45); }
.fs-doc .fs-doc-foot { border-top-color: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.fs-doc .fs-doc-foot b { color: #2BE4A7; text-shadow: 0 0 14px rgba(43,228,167,.45); }
.fs-scena .fs-float {
background: rgba(6,31,24,.88); border-color: rgba(43,228,167,.3);
box-shadow: 0 24px 50px -22px rgba(3,17,13,.8);
}
.fs-scena .fs-float-ico { background: #2BE4A7; color: #04231A; box-shadow: 0 0 14px rgba(43,228,167,.6); }
.fs-scena .fs-float-txt b { color: rgba(255,255,255,.5); }
.fs-scena .fs-float-txt span { color: #fff; }
.fs-scena .fs-float-txt s { color: #FF8489; }
.fs-scena .fs-float-txt strong { color: #2BE4A7; }
/* graficele high-tech din fișă: vitezometru, riglă FICO, bară-glonț, mini-bare */
.fs-gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fs-gauge-svg { display: block; width: 150px; height: 94px; }
.fs-gauge-nr { font-size: 30px; font-weight: 700; fill: #2BE4A7; letter-spacing: -0.02em; }
.fs-gauge-cap { font-size: 8px; fill: rgba(255,255,255,.35); font-weight: 600; }
.fs-gauge-dot { fill: #EAFFF7; filter: drop-shadow(0 0 6px rgba(43,228,167,.9)); }
.fs-fico-bar {
position: relative; width: 92px; height: 4px; border-radius: 999px;
background: rgba(255,255,255,.14); margin: 8px 0 3px auto;
}
.fs-fico-bar i {
position: absolute; left: 0; top: 0; bottom: 0; width: var(--p);
border-radius: 999px; background: linear-gradient(90deg, #0B7C5E, #2BE4A7);
box-shadow: 0 0 9px rgba(43,228,167,.7);
}
.fs-fico-bar i::after {
content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
width: 7px; height: 7px; border-radius: 999px; background: #EAFFF7;
box-shadow: 0 0 7px rgba(43,228,167,.9);
}
.fs-fico-range { display: flex; justify-content: space-between; width: 92px; margin-left: auto; font-size: 8px; color: rgba(255,255,255,.32); }
.fs-bullet { position: relative; height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); margin: 2px 0 26px; }
.fs-bullet-fill {
position: absolute; left: 0; top: 0; bottom: 0; width: var(--p);
border-radius: 999px; background: linear-gradient(90deg, #C9862B, #E5484D);
box-shadow: 0 0 11px rgba(229,72,77,.55);
}
.fs-bullet-lim {
position: absolute; left: var(--l); top: -4px; bottom: -4px; width: 2px;
background: #2BE4A7; border-radius: 2px; box-shadow: 0 0 8px rgba(43,228,167,.8);
}
.fs-bullet-lbl {
position: absolute; left: var(--l); top: 11px; transform: translateX(-50%);
font-size: 9px; font-weight: 700; letter-spacing: .04em; color: #2BE4A7; white-space: nowrap;
}
.fs-mini { flex: 0 0 56px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); position: relative; }
.fs-mini::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w);
border-radius: 999px; background: var(--c); box-shadow: 0 0 8px var(--c);
}
@media (prefers-reduced-motion: no-preference) {
.fs-fill { position: relative; overflow: hidden; }
.fs-doc .fs-fill::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
animation: fs-sclipire 2.6s ease-in-out infinite;
}
@keyframes fs-sclipire { 0% { left: -40px; } 60%, 100% { left: 110%; } }
}
/* intrarea: inelul se umple, barele cresc — când secțiunea intră în ecran */
@media (prefers-reduced-motion: no-preference) {
.fs-ring-prog { transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .2s; }
.fs-fill { width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1) .5s; }
.fs-banca:nth-child(2) .fs-fill { transition-delay: .65s; }
.fs-banca:nth-child(3) .fs-fill { transition-delay: .8s; }
.fs-float { opacity: 0; transform: translateY(10px); transition: opacity .6s ease 1.15s, transform .6s cubic-bezier(.2,.7,.2,1) 1.15s; }
.fs-card { opacity: 0; transform: translateY(14px) rotate(1.5deg); transition: opacity .7s ease 1.4s, transform .7s cubic-bezier(.2,.7,.2,1) 1.4s; }
.fs-gauge-arc { transition: stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1) .15s; }
.fs-gauge-dot { opacity: 0; transition: opacity .4s ease 1.5s; }
.fs-fico-bar i { width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1) .6s; }
.fs-bullet-fill { width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1) .8s; }
}
.fs-go .fs-ring-prog { stroke-dashoffset: 75.4; } /* 645 din 850 ≈ 76% */
.fs-go .fs-fill { width: var(--w); }
.fs-go .fs-float { opacity: 1; transform: translateY(0); }
.fs-go .fs-card { opacity: 1; transform: translateY(0) rotate(0deg); }
.fs-go .fs-gauge-arc { stroke-dashoffset: 33.4; } /* 62 pe scala −100…+100 ≈ 81% */
.fs-go .fs-gauge-dot { opacity: 1; }
.fs-go .fs-fico-bar i { width: var(--p); }
.fs-go .fs-bullet-fill { width: var(--p); }
@media (prefers-reduced-motion: reduce) {
.fs-ring-prog { stroke-dashoffset: 75.4; }
.fs-fill { width: var(--w); }
.fs-float { opacity: 1; transform: none; }
.fs-card { opacity: 1; transform: none; }
.fs-gauge-arc { stroke-dashoffset: 33.4; }
.fs-gauge-dot { opacity: 1; }
.fs-fico-bar i { width: var(--p); }
.fs-bullet-fill { width: var(--p); }
}
/* ===== „Fișa ta, în detaliu" (Drumul tău) — capitolele fișei, cu machete UI ===== */
.f2-nr {
font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: .14em; color: var(--brand);
}
.f2-scena { position: relative; max-width: 480px; margin: 0 auto; }
.f2-panou {
background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
padding: 20px 22px;
box-shadow: 0 1px 0 rgba(11,124,94,.05), 0 28px 56px -40px rgba(8,32,25,.4);
}
.f2-panou-titlu { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.f2-et { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(8,32,25,.45); }
.f2-input {
margin: 6px 0 10px; display: flex; align-items: center;
border: 1.5px solid rgba(11,124,94,.4); border-radius: 12px;
padding: 10px 14px; background: var(--paper2);
font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700;
}
.f2-caret { width: 2px; height: 18px; background: var(--brand); margin-left: 3px; }
@media (prefers-reduced-motion: no-preference) {
.f2-caret { animation: f2-clipire 1.1s steps(1) infinite; }
}
@keyframes f2-clipire { 50% { opacity: 0; } }
.f2-btn {
margin-top: 14px; text-align: center; border-radius: 999px; padding: 10px 16px;
font-size: 13px; font-weight: 700; color: #fff;
background: linear-gradient(90deg, #0B7C5E, #129873);
}
.f2-pop {
position: absolute; right: -18px; bottom: -58px; z-index: 2; max-width: 250px;
background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: rgba(8,32,25,.8);
box-shadow: 0 22px 46px -22px rgba(8,32,25,.45);
}
.f2-pop-et { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(8,32,25,.45); margin-bottom: 2px; }
@media (max-width: 640px) {
.f2-pop { position: static; margin-top: 12px; max-width: none; }
}
.f2-scala { display: flex; flex-wrap: wrap; gap: 5px; }
.f2-scala i {
font-style: normal; font-size: 9px; font-weight: 800;
border: 1px solid; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.f2-interzis {
margin-top: 12px; border: 1px dashed rgba(229,72,77,.45); border-radius: 12px;
padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--reddeep);
background: rgba(229,72,77,.04);
}
.f2-scut {
margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; font-weight: 700; color: var(--brand);
background: rgba(11,124,94,.07); border-radius: 999px; padding: 6px 12px;
}
.f2-check {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px dashed rgba(11,124,94,.16);
font-size: 13px; color: rgba(8,32,25,.8);
}
.f2-check:last-of-type { border-bottom: 0; }
.f2-check i {
width: 20px; height: 20px; border-radius: 999px; flex: none; font-style: normal;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; color: #fff; background: var(--brand);
}
.f2-check-gol { color: rgba(8,32,25,.45); }
.f2-check-gol i { background: transparent; border: 1.5px dashed rgba(8,32,25,.3); }
.f2-check-nu { color: rgba(8,32,25,.6); }
.f2-check-nu i { background: var(--reddeep); }
.f2-gata {
margin-top: 12px; display: inline-block;
font-size: 11.5px; font-weight: 800; color: var(--brand);
background: rgba(43,228,167,.14); border: 1px solid rgba(43,228,167,.45);
border-radius: 999px; padding: 6px 13px;
}
.f2-nota { margin-top: 10px; font-size: 11.5px; line-height: 1.55; color: rgba(8,32,25,.55); }
.f2-nevoie {
border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px;
background: var(--paper2); text-align: center;
}
.f2-nevoie b { display: block; font-size: 14px; line-height: 1.35; }
.f2-nevoie span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: rgba(8,32,25,.6); }
.f2-dupa {
border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px;
background: var(--paper2);
}
.f2-dupa h4 { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.f2-dupa p { margin-top: 7px; font-size: 13px; line-height: 1.6; color: rgba(8,32,25,.65); }
/* ===== Panourile capitolelor în dark — ferestre de aplicație high-tech ===== */
.f2-dark {
background:
radial-gradient(300px 180px at 85% -10%, rgba(43,228,167,.14), transparent 65%),
linear-gradient(165deg, #082A20 0%, #051B15 50%, #03110D 100%);
border-color: rgba(43,228,167,.22);
box-shadow: 0 6px 16px -8px rgba(3,17,13,.5), 0 40px 80px -46px rgba(3,17,13,.9), inset 0 1px 0 rgba(255,255,255,.06);
position: relative; overflow: hidden;
}
.f2-dark::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 25%, transparent 95%);
mask-image: radial-gradient(130% 110% at 50% 0%, #000 25%, transparent 95%);
}
.f2-dark > * { position: relative; }
.f2-dark .f2-panou-titlu { color: #fff; }
.f2-dark .f2-et { color: rgba(43,228,167,.6); }
.f2-dark .f2-input { border-color: rgba(43,228,167,.4); background: rgba(255,255,255,.05); color: #fff; }
.f2-dark .fs-kv { border-bottom-color: rgba(255,255,255,.06); }
.f2-dark .fs-kv span { color: rgba(255,255,255,.5); }
.f2-dark .fs-kv b { color: #EAFBF4; }
.f2-dark .fs-statgrid { border-color: rgba(255,255,255,.07); }
.f2-dark .fs-statgrid span { color: rgba(255,255,255,.38); }
.f2-dark .fs-statgrid b { color: #fff; }
.f2-dark .fs-stat-rau b { color: #FF8489; }
.f2-dark .fs-credit { border-bottom-color: rgba(255,255,255,.06); }
.f2-dark .fs-credit span { color: rgba(255,255,255,.75); }
.f2-dark .fs-credit b { color: #fff; }
.f2-dark .fs-eval-rau { color: #FF8489; }
.f2-dark .fs-eval-mediu { color: #FFC46B; }
.f2-dark .fs-eval-ok { color: #2BE4A7; }
.f2-dark .fs-plan li { color: rgba(255,255,255,.78); }
.f2-dark .fs-plan li i { color: #2BE4A7; border-color: rgba(43,228,167,.45); }
.f2-dark .f2-scala i { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.f2-dark .f2-interzis { color: #FF8489; border-color: rgba(255,132,137,.45); background: rgba(229,72,77,.08); }
.f2-dark .f2-scut { color: #2BE4A7; background: rgba(43,228,167,.1); }
.f2-dark .f2-check { color: rgba(255,255,255,.8); border-bottom-color: rgba(255,255,255,.06); }
.f2-dark .f2-check-gol { color: rgba(255,255,255,.4); }
.f2-dark .f2-check-gol i { border-color: rgba(255,255,255,.3); }
.f2-dark .f2-gata { color: #2BE4A7; background: rgba(43,228,167,.12); border-color: rgba(43,228,167,.45); }
.f2-dark .f2-nota { color: rgba(255,255,255,.45); }
/* părticele din rapoarte (Diagnoza) */
.f2-frag {
margin-top: 12px; border: 1px solid rgba(43,228,167,.2); border-radius: 12px;
padding: 10px 13px; background: rgba(255,255,255,.04);
font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.6);
}
.f2-frag b {
display: block; font-size: 9px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: rgba(43,228,167,.7); margin-bottom: 3px;
}
.f2-frag span { display: block; }
.f2-frag i { font-style: normal; font-weight: 700; color: #EAFBF4; }
.f2-frag-a { transform: rotate(-1.2deg); }
.f2-frag-b { transform: rotate(1deg); margin-top: 10px; }
/* graficul comparativ al pierderii (Câți bani pierzi) */
.f2-comp { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 6px 2px 0; }
.f2-comp-bara { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.f2-comp-val { font-size: 13px; font-weight: 700; color: #fff; }
.f2-comp-col { width: 54px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 8px 8px 3px 3px; overflow: hidden; }
.f2-comp-col i { display: block; width: 100%; }
.f2-comp-lbl { font-size: 10.5px; line-height: 1.35; color: rgba(255,255,255,.5); text-align: center; }
.f2-comp-dif { flex: 1; text-align: center; padding-bottom: 34px; }
.f2-comp-dif b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #FF8489; text-shadow: 0 0 16px rgba(255,90,96,.5); }
.f2-comp-dif span { display: block; font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 2px; }
.f2-comp-dif em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: rgba(255,132,137,.85); margin-top: 5px; }
.f2-comp-legenda { display: flex; gap: 16px; margin-top: 12px; font-size: 10.5px; color: rgba(255,255,255,.55); }
.f2-comp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.f2-comp-legenda i { width: 8px; height: 8px; border-radius: 999px; }
/* tabelul de credite evaluate (Evaluarea) */
.f2-cr {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
font-size: 12px;
}
.f2-cr:last-of-type { border-bottom: 0; }
.f2-cr span { flex: 1; min-width: 0; font-weight: 600; color: rgba(255,255,255,.8); }
.f2-cr b { flex: none; width: 62px; text-align: right; font-weight: 700; color: #fff; white-space: nowrap; }
.f2-cr u { flex: none; width: 46px; text-align: right; text-decoration: none; font-weight: 600; color: rgba(255,255,255,.55); }
.f2-cr em.fs-eval { width: 108px; justify-content: flex-start; }
.f2-cr-cap { padding: 10px 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.f2-cr-cap span, .f2-cr-cap b, .f2-cr-cap u, .f2-cr-cap em {
font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: .12em;
text-transform: uppercase; color: rgba(43,228,167,.55) !important;
}
.f2-cr-cap em { font-style: normal; width: 108px; }
/* logo-uri de bănci reale, ascunse prin blur (capitolul Băncile) */
.f2-blur-logo {
flex: none; width: 44px; height: 15px; object-fit: contain;
filter: blur(3.5px) grayscale(.15) brightness(2.4);
opacity: .75; user-select: none; -webkit-user-drag: none;
}
/* scara aplicărilor: de la Banca A la Banca E (capitolul Ordinea) */
.f2-scari {
position: relative; display: flex; align-items: flex-end; gap: 6px;
margin-top: 14px; padding-top: 24px;
}
.f2-scari-linie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.f2-treapta {
flex: 1; height: var(--h);
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding-top: 7px;
border: 1px solid rgba(43,228,167,.32); border-bottom-width: 3px;
border-radius: 9px 9px 0 0;
background: linear-gradient(180deg, rgba(43,228,167,.13), rgba(43,228,167,.02));
}
.f2-treapta b {
width: 17px; height: 17px; border-radius: 999px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #2BE4A7;
border: 1px solid rgba(43,228,167,.55);
}
.f2-treapta span { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; }
/* discuția cu banca (capitolul Ce să spui) */
.f2-chat { display: flex; flex-direction: column; gap: 9px; }
.f2-balon {
max-width: 86%; border-radius: 14px; padding: 9px 13px;
font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.85);
}
.f2-balon b {
display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; margin-bottom: 2px;
}
.f2-balon-banca {
align-self: flex-start; background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12); border-bottom-left-radius: 4px;
}
.f2-balon-banca b { color: rgba(255,255,255,.45); }
.f2-balon-nu {
align-self: flex-end; background: rgba(229,72,77,.08);
border: 1px dashed rgba(255,132,137,.5); border-bottom-right-radius: 4px;
color: rgba(255,255,255,.55); text-decoration: line-through;
text-decoration-color: rgba(255,132,137,.6); text-decoration-thickness: 1px;
}
.f2-balon-nu b { color: #FF8489; text-decoration: none; }
.f2-balon-da {
align-self: flex-end; background: rgba(43,228,167,.1);
border: 1px solid rgba(43,228,167,.4); border-bottom-right-radius: 4px;
box-shadow: 0 0 16px -6px rgba(43,228,167,.5);
}
.f2-balon-da b { color: #2BE4A7; }
/* dosarul-folder (capitolul Dosarul de creditare) */
.f2-dosar {
position: relative; margin-top: 30px;
border: 1px solid rgba(43,228,167,.3);
border-radius: 0 18px 18px 18px;
padding: 18px 22px;
background:
radial-gradient(280px 160px at 85% -10%, rgba(43,228,167,.13), transparent 65%),
linear-gradient(165deg, #082A20 0%, #051B15 50%, #03110D 100%);
box-shadow: 0 6px 16px -8px rgba(3,17,13,.5), 0 40px 80px -46px rgba(3,17,13,.9), inset 0 1px 0 rgba(255,255,255,.06);
}
.f2-dosar-tab {
position: absolute; top: -27px; left: -1px;
padding: 6px 16px 5px;
font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: #2BE4A7;
border: 1px solid rgba(43,228,167,.3); border-bottom: 0;
border-radius: 12px 12px 0 0;
background: linear-gradient(180deg, #0A3325, #082A20);
}
.f2-dosar .f2-check { color: rgba(255,255,255,.8); border-bottom-color: rgba(255,255,255,.06); }
.f2-dosar .f2-check-gol { color: rgba(255,255,255,.4); }
.f2-dosar .f2-check-gol i { border-color: rgba(255,255,255,.3); }
.f2-dosar .f2-gata { color: #2BE4A7; background: rgba(43,228,167,.12); border-color: rgba(43,228,167,.45); }
/* Caruselul cu băncile din bara de sub hero */
.banci-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.banci-track {
display: flex; align-items: center; gap: 64px;
width: max-content; padding-right: 64px;
animation: banci-scroll 112s linear infinite;
will-change: transform;
}
.banci-track img {
height: 26px; width: auto; flex: none;
filter: grayscale(.65) saturate(.75);
opacity: .72;
transition: filter .25s ease, opacity .25s ease;
user-select: none; -webkit-user-drag: none;
}
.banci-track img:hover { filter: none; opacity: 1; }
/* logo-urile „pătrățoase" au nevoie de mai multă înălțime ca să rămână lizibile */
.banci-track img[src*="credit-europe"],
.banci-track img[src*="credit-prime"],
.banci-track img[src*="hora-credit"],
.banci-track img[src*="viva-credit"],
.banci-track img[src*="axi"] { height: 36px; }
.banci-marquee:hover .banci-track { animation-play-state: paused; }
@keyframes banci-scroll {
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 640px) {
.banci-track { gap: 40px; padding-right: 40px; animation-duration: 82s; }
.banci-track img { height: 21px; }
.banci-track img[src*="credit-europe"],
.banci-track img[src*="credit-prime"],
.banci-track img[src*="hora-credit"],
.banci-track img[src*="viva-credit"],
.banci-track img[src*="axi"] { height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
.banci-track { animation: none; }
}
/* ===== Compoziția hero — „motorul de eligibilitate" =====
Straturi peste panglică: lumini pulsatile, particule, interfața centrală (scor + inel),
carduri plutitoare. Doar transform + opacity; tilt 3D discret din JS pe desktop. */
.hero-vis {
position: relative; height: 520px; max-width: 470px;
perspective: 1100px;
}
.vis-tilt {
position: absolute; inset: 0;
transform-style: preserve-3d;
will-change: transform;
}
/* Lumini */
.vis-glow { position: absolute; border-radius: 50%; filter: blur(46px); }
.vis-glow-a {
width: 340px; height: 340px; left: 8%; top: 12%;
background: radial-gradient(closest-side, rgba(43, 228, 167, .38), transparent 72%);
animation: vis-glow 8s ease-in-out infinite;
}
.vis-glow-b {
width: 280px; height: 280px; right: -6%; bottom: 6%;
background: radial-gradient(closest-side, rgba(11, 124, 94, .30), transparent 72%);
animation: vis-glow 11s ease-in-out infinite reverse;
}
@keyframes vis-glow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
/* Particule și detalii */
.vis-particles { position: absolute; inset: 0; }
.vp { position: absolute; border-radius: 50%; background: rgba(11, 124, 94, .35); }
.vp-1 { width: 5px; height: 5px; left: 12%; top: 8%; animation: vp-float 14s ease-in-out infinite alternate; }
.vp-2 { width: 4px; height: 4px; left: 86%; top: 16%; background: rgba(43, 228, 167, .55); animation: vp-float 17s ease-in-out infinite alternate-reverse; }
.vp-3 { width: 6px; height: 6px; left: 5%; top: 56%; background: rgba(43, 228, 167, .4); animation: vp-float 19s ease-in-out infinite alternate; }
.vp-4 { width: 3px; height: 3px; left: 92%; top: 52%; animation: vp-float 12s ease-in-out infinite alternate-reverse; }
.vp-5 { width: 4px; height: 4px; left: 22%; top: 90%; animation: vp-float 16s ease-in-out infinite alternate; }
.vp-6 { width: 5px; height: 5px; left: 78%; top: 86%; background: rgba(5, 62, 47, .3); animation: vp-float 21s ease-in-out infinite alternate-reverse; }
.vp-line { width: 1.5px; height: 42px; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(11, 124, 94, .35), transparent); }
.vp-7 { left: 16%; top: 30%; animation: vp-float 18s ease-in-out infinite alternate; }
.vp-8 { left: 88%; top: 66%; height: 30px; animation: vp-float 15s ease-in-out infinite alternate-reverse; }
@keyframes vp-float {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(8px, -12px, 0); }
}
/* Interfața principală — scorul */
.vis-core {
position: absolute; left: 50%; top: 50%;
width: 296px; transform: translate(-50%, -50%);
background: rgba(255, 255, 255, .78);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border: 1px solid rgba(11, 124, 94, .16);
border-radius: 30px;
box-shadow: 0 1px 0 rgba(11, 124, 94, .08), 0 30px 60px -28px rgba(11, 124, 94, .35);
padding: 20px 24px 24px;
text-align: center;
z-index: 5;
}
.vis-core-head {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(8, 32, 25, .55);
}
.vis-ring-wrap { position: relative; width: 172px; height: 172px; margin: 14px auto 4px; }
.vis-ring { width: 100%; height: 100%; display: block; }
.vis-score {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: #082019;
}
.vis-core-label { font-size: 15px; font-weight: 700; color: #0B7C5E; margin-top: 2px; }
.vis-core-sub { font-size: 12px; color: rgba(8, 32, 25, .5); margin-top: 6px; }
/* Carduri plutitoare */
.vis-chip {
position: absolute; display: inline-flex; align-items: center; gap: 8px;
padding: 10px 15px; border-radius: 999px;
background: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(11, 124, 94, .14);
box-shadow: 0 1px 0 rgba(11, 124, 94, .06), 0 20px 40px -24px rgba(11, 124, 94, .3);
font-size: 13px; font-weight: 600; color: #082019;
white-space: nowrap; z-index: 7; will-change: transform;
}
.chip-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(11, 124, 94, .12); color: #0B7C5E;
}
.chip-ico.is-up { background: rgba(43, 228, 167, .22); color: #053E2F; }
.chip-spin {
width: 14px; height: 14px; border-radius: 50%;
border: 2.5px solid rgba(239, 167, 62, .8); border-top-color: transparent;
animation: chip-spin 1.3s linear infinite;
}
@keyframes chip-spin { to { transform: rotate(360deg); } }
.vis-chip-1 { left: -4%; top: 13%; animation: chip-float-a 6s ease-in-out infinite; }
.vis-chip-2 { right: -5%; top: 30%; animation: chip-float-b 7.5s ease-in-out infinite; transform: scale(.94); opacity: .95; }
.vis-chip-3 { left: -7%; top: 63%; animation: chip-float-b 5.5s ease-in-out infinite reverse; }
.vis-chip-4 { right: -3%; top: 76%; animation: chip-float-a 8s ease-in-out infinite reverse; }
@keyframes chip-float-a { 0%, 100% { transform: translate3d(0, -8px, 0); } 50% { transform: translate3d(0, 8px, 0); } }
@keyframes chip-float-b { 0%, 100% { transform: translate3d(0, 7px, 0); } 50% { transform: translate3d(0, -7px, 0); } }
@media (max-width: 1023px) {
.hero-vis { height: 420px; max-width: 360px; }
.vis-core { width: 268px; }
.vis-ring-wrap { width: 150px; height: 150px; }
.vis-score { font-size: 38px; }
.vis-particles { display: none; }
.vis-chip-2 { display: none; }
.vis-chip-1 { left: 0; top: 8%; }
.vis-chip-3 { left: -2%; }
.vis-chip-4 { right: -2%; }
.vis-glow-a { width: 260px; height: 260px; }
.vis-glow-b { width: 200px; height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
.vis-glow, .vp, .vis-chip, .chip-spin { animation: none; }
}
/* ===== Fundal dark — verde adânc ===== */
.bg-deep-green {
background:
radial-gradient(900px 600px at 10% 10%, rgba(18, 152, 115, .45), transparent 55%),
radial-gradient(700px 500px at 100% 90%, rgba(43, 228, 167, .12), transparent 55%),
linear-gradient(180deg, #06392C 0%, #052A21 100%);
}
/* Grain / textură pe suprafețe dark */
.grain-dark { position: relative; }
.grain-dark::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: .5; mix-blend-mode: overlay;
border-radius: inherit;
}
/* ===== Eyebrow live cu pulse ===== */
.eyebrow-live {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px; border-radius: 999px;
background: rgba(11, 124, 94, .08); border: 1px solid rgba(11, 124, 94, .24);
color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow-live .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); animation: dotBlink 1.4s ease-in-out infinite; }
@keyframes dotBlink { 0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(11,124,94,.5) } 50% { opacity:.55; box-shadow: 0 0 0 5px rgba(11,124,94,0) } }
/* ===== Gradient text brand (verde → mentă) ===== */
.brand-flow {
background: linear-gradient(95deg, #053E2F 0%, #0B7C5E 40%, #129873 70%, #0B7C5E 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 1px 0 rgba(255,255,255,.30)) drop-shadow(0 2px 6px rgba(5,62,47,.20));
}
/* ===== Butoane ===== */
.btn-primary {
background: var(--brand); color: #fff; border: 1px solid var(--brand);
transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background-color .22s ease;
}
.btn-primary:hover { background: var(--branddeep); border-color: var(--branddeep); transform: translateY(-1px); box-shadow: 0 14px 36px -12px rgba(11, 124, 94, .55); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn-amber {
background: var(--amber); color: #3A2708; border: 1px solid var(--amber); font-weight: 800;
transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background-color .22s ease;
}
.btn-amber:hover { background: var(--amberdeep); border-color: var(--amberdeep); color: #2A1B04; transform: translateY(-1px); box-shadow: 0 14px 36px -12px rgba(239, 167, 62, .6); }
.btn-amber:active { transform: translateY(0); }
.btn-amber:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-ghost {
color: var(--ink); border: 1px solid rgba(8,32,25,.18); background: transparent;
transition: background-color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost:hover { background: rgba(11,124,94,.06); border-color: rgba(11,124,94,.35); }
.btn-ghost:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-ghost-inv {
color: #fff; border: 1px solid rgba(255,255,255,.25); background: transparent;
transition: background-color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.btn-ghost-inv:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.btn-ghost-inv:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
/* ===== NAV desktop ===== */
.nav-link { position: relative; }
.nav-link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--brand);
transform-origin: center; transform: scaleX(0); transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
/* ===== Card chenar (banner-framed) ===== */
.banner-framed {
background: var(--paper2);
border: 1px solid var(--line);
border-radius: 28px;
padding: 36px 28px;
position: relative;
box-shadow: 0 1px 0 rgba(5,32,24,.04), 0 30px 70px -32px rgba(5,32,24,.18);
}
@media (min-width: 768px) { .banner-framed { padding: 48px 40px; border-radius: 32px; } }
@media (min-width: 1024px) { .banner-framed { padding: 64px 56px; border-radius: 36px; } }
/* Card chenar dark — verde adânc + grain */
.banner-framed-dark {
position: relative;
background:
radial-gradient(900px 600px at 8% 10%, rgba(18, 152, 115, .5), transparent 55%),
radial-gradient(700px 500px at 100% 90%, rgba(229, 72, 77, .14), transparent 55%),
linear-gradient(180deg, #06392C 0%, #052A21 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.10);
border-radius: 28px;
padding: 36px 28px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(5,32,24,.10), 0 40px 80px -32px rgba(5,32,24,.50);
}
@media (min-width: 768px) { .banner-framed-dark { padding: 48px 40px; border-radius: 32px; } }
@media (min-width: 1024px) { .banner-framed-dark { padding: 64px 56px; border-radius: 36px; } }
.banner-framed-dark::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: .5; mix-blend-mode: overlay;
border-radius: inherit;
}
.banner-framed-dark > * { position: relative; z-index: 1; }
/* Cerc numerotare pași */
.step-circle {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
color: var(--brand);
background: var(--paper);
border: 2px solid var(--brand);
box-shadow: 0 1px 0 rgba(11,124,94,.10), 0 14px 28px -14px rgba(11,124,94,.40);
}
@media (min-width: 1024px) { .step-circle { width: 64px; height: 64px; font-size: 26px; } }
/* ===== HERO stat-buttons (pastile colorate) ===== */
.hero-stat-btn {
position: relative;
display: flex; align-items: center; gap: 18px;
padding: 22px 26px;
border-radius: 999px;
background: linear-gradient(135deg, var(--brand) 0%, var(--branddeep) 100%);
color: #fff;
text-decoration: none;
box-shadow: 0 1px 0 rgba(11,124,94,.10), 0 22px 48px -22px rgba(11,124,94,.55);
transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.hero-stat-btn:hover {
transform: translateY(-3px);
box-shadow: 0 1px 0 rgba(11,124,94,.10), 0 32px 64px -24px rgba(11,124,94,.65);
}
.hero-stat-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.hero-stat-btn.is-amber {
background: linear-gradient(135deg, var(--amber) 0%, var(--amberdeep) 100%);
color: #2A1B04;
box-shadow: 0 1px 0 rgba(239,167,62,.10), 0 22px 48px -22px rgba(239,167,62,.55);
}
.hero-stat-btn.is-amber:hover { box-shadow: 0 1px 0 rgba(239,167,62,.10), 0 32px 64px -24px rgba(201,134,43,.7); }
.hero-stat-btn.is-deep {
background: linear-gradient(135deg, #0A5B46 0%, #053E2F 100%);
box-shadow: 0 1px 0 rgba(5,62,47,.12), 0 22px 48px -22px rgba(5,62,47,.6);
}
.hero-stat-btn .ico {
flex-shrink: 0;
width: 44px; height: 44px; border-radius: 999px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.30);
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(8px);
}
.hero-stat-btn.is-amber .ico { background: rgba(255,255,255,.34); border-color: rgba(58,39,8,.18); }
.hero-stat-btn .label { font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; flex: 1; }
.hero-stat-btn .arrow { opacity: .8; transition: transform .3s ease, opacity .3s ease; }
.hero-stat-btn:hover .arrow { transform: translateX(4px); opacity: 1; }
/* ===== MOCK RAPORT (cardul din hero) ===== */
.report-card {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: 0 1px 0 rgba(11,124,94,.08), 0 40px 90px -36px rgba(5,62,47,.45), 0 18px 36px -24px rgba(5,62,47,.25);
overflow: hidden;
}
.report-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, #FFFFFF 0%, #F5FAF7 100%);
}
.report-badge {
font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--brand);
background: rgba(11,124,94,.08);
border: 1px solid rgba(11,124,94,.22);
padding: 4px 10px; border-radius: 999px;
}
.chance-bar { height: 8px; border-radius: 999px; background: var(--paper3); overflow: hidden; position: relative; }
.chance-bar > span {
display: block; height: 100%; border-radius: 999px;
transform-origin: left;
animation: barGrow 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.chance-bar > span.is-green { background: linear-gradient(90deg, var(--brand), var(--brandsoft)); }
.chance-bar > span.is-amber { background: linear-gradient(90deg, var(--amberdeep), var(--amber)); }
.chance-bar > span.is-muted { background: linear-gradient(90deg, #9DB8AC, #C0D4C9); }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.report-card .delay-a { animation-delay: .3s; }
.report-card .delay-b { animation-delay: .5s; }
.report-card .delay-c { animation-delay: .7s; }
/* Semafor eligibilitate */
.semafor { display: inline-flex; align-items: center; gap: 8px; }
.semafor .light { width: 14px; height: 14px; border-radius: 999px; background: var(--paper4); box-shadow: inset 0 1px 2px rgba(5,32,24,.18); }
.semafor .light.on-green { background: var(--brand); box-shadow: 0 0 0 4px rgba(11,124,94,.15), 0 0 12px rgba(11,124,94,.55); }
.semafor .light.on-amber { background: var(--amber); box-shadow: 0 0 0 4px rgba(239,167,62,.16), 0 0 12px rgba(239,167,62,.55); }
.semafor .light.on-red { background: var(--red); box-shadow: 0 0 0 4px rgba(229,72,77,.14), 0 0 12px rgba(229,72,77,.5); }
/* ===== Carduri features ===== */
.feature-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 20px;
padding: 26px 24px;
transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.feature-card:hover {
transform: translateY(-4px);
border-color: rgba(11,124,94,.32);
box-shadow: 0 1px 0 rgba(11,124,94,.08), 0 30px 60px -28px rgba(11,124,94,.30);
}
.feature-ico {
width: 46px; height: 46px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: rgba(11,124,94,.08);
border: 1px solid rgba(11,124,94,.18);
color: var(--brand);
margin-bottom: 16px;
}
.feature-card.is-amber .feature-ico { background: rgba(239,167,62,.12); border-color: rgba(239,167,62,.3); color: var(--amberdeep); }
.feature-card.is-red .feature-ico { background: rgba(229,72,77,.09); border-color: rgba(229,72,77,.26); color: var(--red); }
/* Chips durere (RATE MARI etc.) */
.pain-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px;
background: rgba(229,72,77,.12);
border: 1px solid rgba(229,72,77,.35);
color: #FFD9DB;
font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pain-chip svg { color: #FF8A8E; }
/* Chips dorințe (Familie, Hobby-uri, Vacanțe) */
.joy-chip {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 20px; border-radius: 999px;
background: rgba(43,228,167,.10);
border: 1px solid rgba(43,228,167,.35);
color: #D9FFF1;
font-size: 14px; font-weight: 700;
}
.joy-chip svg { color: var(--mint); }
/* ===== Pachete (pricing) ===== */
.plan-card {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
padding: 32px 28px;
display: flex; flex-direction: column;
transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.plan-card:hover {
transform: translateY(-5px);
border-color: rgba(11,124,94,.35);
box-shadow: 0 1px 0 rgba(11,124,94,.08), 0 34px 70px -30px rgba(11,124,94,.35);
}
.plan-card.is-featured {
background:
radial-gradient(600px 400px at 90% -10%, rgba(43,228,167,.16), transparent 55%),
linear-gradient(180deg, #06392C 0%, #052A21 100%);
color: #fff;
border: 1px solid rgba(43,228,167,.35);
box-shadow: 0 1px 0 rgba(5,32,24,.12), 0 44px 90px -34px rgba(5,62,47,.65);
}
.plan-card.is-featured:hover { border-color: rgba(43,228,167,.6); }
.plan-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
white-space: nowrap;
background: linear-gradient(135deg, var(--amber), var(--amberdeep));
color: #2A1B04;
font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
padding: 7px 16px; border-radius: 999px;
box-shadow: 0 10px 24px -10px rgba(201,134,43,.7);
}
.plan-name {
font-family: 'Space Grotesk', sans-serif;
font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--brand);
}
.plan-card.is-featured .plan-name { color: var(--mint); }
.plan-feat { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.plan-feat svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.plan-card.is-featured .plan-feat svg { color: var(--mint); }
.plan-feat.is-off { opacity: .38; }
.plan-feat.is-off svg { color: rgba(8,32,25,.4); }
/* ===== FAQ accordion ===== */
.faq-item { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item:hover { border-color: rgba(11,124,94,.3); }
.faq-item[data-open="true"] { border-color: rgba(11,124,94,.35); box-shadow: 0 1px 0 rgba(11,124,94,.06), 0 18px 40px -26px rgba(11,124,94,.3); }
.faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
text-align: left; padding: 18px 22px;
background: transparent; border: 0; cursor: pointer;
font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.faq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 16px; }
.faq-q .faq-chevron { flex-shrink: 0; color: var(--brand); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.faq-item[data-open="true"] .faq-chevron { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1); }
.faq-a-inner { overflow: hidden; min-height: 0; }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; }
.faq-a-inner p { padding: 0 22px 20px; font-size: 14.5px; line-height: 1.7; color: rgba(8,32,25,.72); }
/* ===== Formular ===== */
.field-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(8,32,25,.6); margin-bottom: 8px; }
.field-input {
width: 100%;
background: var(--paper);
border: 1px solid rgba(8,32,25,.16);
border-radius: 14px;
padding: 14px 16px;
font-size: 15px; color: var(--ink);
transition: border-color .22s ease, box-shadow .22s ease;
}
.field-input::placeholder { color: rgba(8,32,25,.35); }
.field-input:hover { border-color: rgba(11,124,94,.35); }
.field-input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(11,124,94,.14); }
select.field-input { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.gdpr-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.gdpr-check input {
appearance: none; flex-shrink: 0;
width: 22px; height: 22px; margin-top: 1px;
border: 1.5px solid rgba(8,32,25,.3); border-radius: 7px;
background: var(--paper); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background-color .2s ease, border-color .2s ease;
}
.gdpr-check input:checked { background: var(--brand); border-color: var(--brand); }
.gdpr-check input:checked::after {
content: ""; width: 11px; height: 6px;
border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
transform: rotate(-45deg) translateY(-1px);
}
.gdpr-check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* ===== Video placeholder ===== */
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
overflow: hidden;
background:
radial-gradient(700px 400px at 30% 20%, rgba(18,152,115,.55), transparent 60%),
radial-gradient(500px 350px at 90% 90%, rgba(43,228,167,.18), transparent 55%),
linear-gradient(160deg, #085441 0%, #042A20 100%);
border: 1px solid rgba(255,255,255,.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -32px rgba(5,42,33,.7);
display: flex; align-items: center; justify-content: center;
}
.video-play {
width: 84px; height: 84px; border-radius: 999px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.35);
backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
color: #fff;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease;
}
.video-frame:hover .video-play { transform: scale(1.08); background: rgba(255,255,255,.2); }
/* ===== Reveal la scroll ===== */
.drop-line { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.drop-line.is-in { opacity: 1; transform: none; }
.drop-line.delay-1 { transition-delay: .08s; }
.drop-line.delay-2 { transition-delay: .18s; }
.drop-line.delay-3 { transition-delay: .28s; }
.drop-line.delay-4 { transition-delay: .4s; }
.drop-line.delay-5 { transition-delay: .52s; }
/* ===== CTA final ===== */
.final-cta {
position: relative;
background:
radial-gradient(700px 300px at 90% 0%, rgba(18,152,115,.5), transparent 60%),
radial-gradient(500px 300px at 0% 100%, rgba(43,228,167,.12), transparent 55%),
linear-gradient(135deg, #06392C 0%, #052A21 60%, #031F18 100%);
color: #fff;
border-radius: 24px;
padding: 40px 32px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(5,32,24,.08), 0 24px 50px -24px rgba(11,124,94,.4), 0 14px 28px -14px rgba(5,32,24,.3);
}
@media (min-width: 768px) { .final-cta { padding: 56px 48px; border-radius: 28px; } }
@media (min-width: 1024px) { .final-cta { padding: 72px 64px; border-radius: 32px; } }
.final-cta::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: .5; mix-blend-mode: overlay;
}
.final-cta > * { position: relative; z-index: 1; }
/* ===== MOBILE NAV — hamburger + drawer ===== */
.nav-hamburger {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 12px;
background: var(--paper2); border: 1px solid var(--line); color: var(--brand);
cursor: pointer; position: relative;
transition: background-color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover { background: var(--paper3); }
.nav-hamburger:active { transform: scale(.94); }
.nav-hamburger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-hamburger .bar {
position: absolute; left: 12px; right: 12px; height: 2px;
background: currentColor; border-radius: 2px;
transition: transform .28s cubic-bezier(.6,-0.2,.4,1.4), opacity .2s ease, top .28s cubic-bezier(.6,-0.2,.4,1.4);
}
.nav-hamburger .bar:nth-child(1) { top: 14px; }
.nav-hamburger .bar:nth-child(2) { top: 21px; }
.nav-hamburger .bar:nth-child(3) { top: 28px; }
.nav-hamburger[aria-expanded="true"] .bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] .bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .nav-hamburger { display: none; } }
.mnav-overlay {
position: fixed; inset: 0;
background: rgba(5, 32, 24, .55);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity .28s ease;
z-index: 90;
}
.mnav-overlay.is-open { opacity: 1; pointer-events: auto; }
.mnav-drawer {
position: fixed; top: 0; right: 0;
height: 100dvh; width: min(86vw, 380px);
background: var(--paper);
box-shadow: -24px 0 60px -20px rgba(5, 32, 24, .35);
display: flex; flex-direction: column;
transform: translateX(105%);
transition: transform .36s cubic-bezier(.22,1,.36,1);
z-index: 100; will-change: transform;
}
.mnav-drawer.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .mnav-overlay, .mnav-drawer { display: none; } }
.mnav-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.mnav-close {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px;
background: var(--paper2); border: 1px solid var(--line); color: var(--ink);
cursor: pointer;
transition: background-color .2s ease, transform .2s ease;
}
.mnav-close:hover { background: var(--paper3); }
.mnav-close:active { transform: scale(.94); }
.mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 10px 24px; }
.mnav-item { border-bottom: 1px solid var(--line); }
.mnav-item:last-child { border-bottom: none; }
.mnav-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 16px 14px;
text-decoration: none; color: var(--ink);
font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
border-radius: 10px;
transition: background-color .2s ease;
-webkit-tap-highlight-color: transparent;
}
.mnav-row:hover, .mnav-row:focus-visible { background: var(--paper2); }
.mnav-foot {
flex-shrink: 0;
padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--paper);
display: flex; flex-direction: column; gap: 12px;
}
.mnav-foot .mnav-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 20px; border-radius: 999px;
background: var(--brand); color: #fff;
font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
text-decoration: none;
transition: background-color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.mnav-foot .mnav-cta:hover { background: var(--branddeep); }
.mnav-foot .mnav-cta:active { transform: scale(.98); }
.mnav-foot .mnav-trust { font-size: 11.5px; color: rgba(8,32,25,.55); text-align: center; line-height: 1.45; }
body.mnav-locked { overflow: hidden; }
/* ===== WIZARD verificare eligibilitate (inspirat din fluxul APLICA) ===== */
.wiz-steps {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.wiz-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px; border-radius: 999px;
background: var(--paper);
border: 1px solid var(--line);
color: rgba(8,32,25,.5);
font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.wiz-pill .n {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 999px;
background: var(--paper3); color: rgba(8,32,25,.55);
font-size: 11px; font-weight: 800;
transition: background-color .3s ease, color .3s ease;
}
.wiz-pill.on { background: rgba(11,124,94,.08); border-color: rgba(11,124,94,.35); color: var(--brand); }
.wiz-pill.on .n { background: var(--brand); color: #fff; }
.wiz-pill.done { color: var(--brand); }
.wiz-pill.done .n { background: rgba(11,124,94,.16); color: var(--brand); }
.wiz-step { display: none; opacity: 0; transform: translateY(12px); }
.wiz-step.on { display: block; }
.wiz-step.on.vis { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.wiz-q { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.wiz-hint { font-size: 12.5px; color: rgba(8,32,25,.5); font-weight: 500; }
/* Carduri opțiune (radio / checkbox vizuale) */
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.opt-card {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border-radius: 16px;
background: var(--paper);
border: 1.5px solid rgba(8,32,25,.14);
cursor: pointer;
user-select: none;
transition: border-color .22s ease, background-color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.opt-card:hover { border-color: rgba(11,124,94,.45); transform: translateY(-1px); }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card .opt-ico {
flex-shrink: 0;
width: 38px; height: 38px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(11,124,94,.07);
border: 1px solid rgba(11,124,94,.16);
color: var(--brand);
transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.opt-card .opt-label { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.opt-card .opt-tick {
position: absolute; top: -7px; right: -7px;
width: 22px; height: 22px; border-radius: 999px;
background: var(--brand); color: #fff;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(.5);
transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
box-shadow: 0 6px 14px -6px rgba(11,124,94,.6);
}
.opt-card.is-sel {
border-color: var(--brand);
background: rgba(11,124,94,.06);
box-shadow: 0 1px 0 rgba(11,124,94,.06), 0 16px 34px -20px rgba(11,124,94,.45);
}
.opt-card.is-sel .opt-ico { background: var(--brand); border-color: var(--brand); color: #fff; }
.opt-card.is-sel .opt-tick { opacity: 1; transform: scale(1); }
.opt-card:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.wiz-err {
display: none;
margin-top: 10px;
font-size: 13px; font-weight: 600;
color: var(--reddeep);
}
.wiz-err.show { display: block; }
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 32px; }
.wiz-back {
display: inline-flex; align-items: center; gap: 8px;
color: rgba(8,32,25,.6); font-size: 14px; font-weight: 600;
background: transparent; border: 0; cursor: pointer; padding: 10px 6px;
transition: color .2s ease, transform .2s ease;
}
.wiz-back:hover { color: var(--brand); transform: translateX(-2px); }
.wiz-back:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
/* Bară progres subțire */
.wiz-progress { height: 4px; border-radius: 999px; background: var(--paper3); overflow: hidden; }
.wiz-progress > span {
display: block; height: 100%; width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand), var(--brandsoft));
transition: width .45s cubic-bezier(.22,.61,.36,1);
}
/* ===== FIȘA DE EVALUARE — chips evaluare credite + Smart CreditScore ===== */
.eval-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap;
}
.eval-chip.lvl-bad { background: rgba(229,72,77,.10); color: var(--reddeep); border: 1px solid rgba(229,72,77,.30); }
.eval-chip.lvl-warn { background: rgba(239,167,62,.14); color: #8A5A14; border: 1px solid rgba(239,167,62,.38); }
.eval-chip.lvl-good { background: rgba(11,124,94,.09); color: var(--brand); border: 1px solid rgba(11,124,94,.28); }
.eval-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
padding: 14px 0;
}
.eval-row + .eval-row { border-top: 1px dashed rgba(11,124,94,.18); }
.eval-diff {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border-radius: 999px;
background: rgba(11,124,94,.09); border: 1px solid rgba(11,124,94,.25);
color: var(--brand); font-size: 12.5px; font-weight: 800;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.loss-strip {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
background: rgba(229,72,77,.07);
border: 1px solid rgba(229,72,77,.22);
border-radius: 14px;
padding: 13px 18px;
}
/* Bara Smart CreditScore (−100 → +100) */
.score-bar {
position: relative;
height: 10px; border-radius: 999px;
background: linear-gradient(90deg, #E5484D 0%, #EFA73E 48%, #0B7C5E 100%);
box-shadow: inset 0 1px 2px rgba(5,32,24,.18);
}
.score-marker {
position: absolute; top: 50%;
width: 18px; height: 18px; border-radius: 999px;
background: #fff;
transform: translate(-50%, -50%);
box-shadow: 0 4px 10px -2px rgba(5,32,24,.35);
}
.score-marker.is-now { border: 3.5px solid var(--red); }
.score-marker.is-goal { border: 3.5px solid var(--brand); }
.score-marker .tag {
position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.score-marker.is-now .tag { background: rgba(229,72,77,.1); color: var(--reddeep); border: 1px solid rgba(229,72,77,.3); }
.score-marker.is-goal .tag { background: rgba(11,124,94,.09); color: var(--brand); border: 1px solid rgba(11,124,94,.3); }
/* Preț redus pe cardul Complet */
.price-old {
font-size: 20px; font-weight: 700;
color: rgba(255,255,255,.82);
text-decoration: line-through;
text-decoration-color: rgba(255,255,255,.92);
text-decoration-thickness: 1.5px;
font-variant-numeric: tabular-nums;
}
.price-cut {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 999px;
background: linear-gradient(135deg, var(--amber), var(--amberdeep));
color: #2A1B04;
font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
box-shadow: 0 8px 18px -8px rgba(201,134,43,.65);
}
/* Mini-carduri variante de finanțare */
.variant-mini {
display: flex; align-items: flex-start; gap: 11px;
padding: 13px 15px;
border-radius: 14px;
background: var(--paper2);
border: 1px solid var(--line);
transition: border-color .25s ease, transform .25s ease;
}
.variant-mini:hover { border-color: rgba(11,124,94,.35); transform: translateY(-2px); }
.variant-mini .vnum {
flex-shrink: 0;
width: 26px; height: 26px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff;
font-size: 12.5px; font-weight: 800;
}
/* ===== Diverse ===== */
.rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(11,124,94,.22) 15%, rgba(11,124,94,.22) 85%, transparent); }
.dot-green { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 3px rgba(11,124,94,.15); display: inline-block; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
.drop-line { opacity: 1 !important; transform: none !important; transition: none !important; }
.chance-bar > span { animation: none !important; }
.eyebrow-live .pulse { animation: none !important; }
.marq-track { animation: none !important; }
}