/* ============================================================ LumoAI — foaia de stil comuna celor trei pagini. 1. Token-uri (spatiere, tipografie, forme, miscare) 2. Teme de culoare: dark (implicita) si light 3. Baza + componente ============================================================ */ :root{ /* ---------- spatiere: scala de 8px ---------- */ --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px; /* ---------- tipografie ---------- O singura familie, trei greutati: 400 text, 600 accente, 700 titluri. Stiva de sistem: zero cereri de retea, deci zero intarziere la afisare. Daca vrei Inter, adauga in si pune-l primul in --font. */ --font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI', Roboto,'Helvetica Neue',Arial,sans-serif; --fw-normal:400; --fw-semi:600; --fw-bold:700; /* Scala fluida: fiecare pas creste odata cu latimea ecranului, intre limite. */ --text-xs:clamp(0.6875rem,0.66rem + 0.14vw,0.75rem); /* 11 -> 12px */ --text-sm:clamp(0.8125rem,0.79rem + 0.16vw,0.875rem); /* 13 -> 14px */ --text-base:clamp(0.9375rem,0.90rem + 0.25vw,1.0625rem);/* 15 -> 17px */ --text-lg:clamp(1rem,0.95rem + 0.35vw,1.1875rem); /* 16 -> 19px */ --text-xl:clamp(1.0625rem,1.00rem + 0.45vw,1.3125rem); /* 17 -> 21px */ --text-2xl:clamp(1.5rem,1.20rem + 1.40vw,2.0625rem); /* 24 -> 33px (h2) */ --text-3xl:clamp(1.875rem,1.45rem + 1.95vw,2.875rem); /* 30 -> 46px (h1) */ --leading-tight:1.14; --leading-snug:1.3; --leading-body:1.65; /* in intervalul cerut, 1.5-1.7 */ /* ---------- forme ---------- */ --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:24px; --radius-pill:100px; /* ---------- miscare ---------- */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:150ms; --t-med:200ms; --t-reveal:500ms; } /* ============================================================ Teme de culoare. Tema se alege in aceasta ordine: 1. ce a ales utilizatorul (data-theme, salvat in localStorage) 2. dark — implicit la prima vizita, indiferent de setarea sistemului ============================================================ */ :root, :root[data-theme="dark"]{ color-scheme:dark; --bg:#080b17; --bg-2:#0e1428; --surface:rgba(255,255,255,.04); --surface-brd:rgba(255,255,255,.09); --text:#f4f6fb; --text-soft:#a9b2c9; /* 9.4:1 pe --bg */ --accent:#6c8cff; --accent-2:#22d3ee; /* 9.6:1 pe --bg */ --accent-2-tare:#22d3ee; --accent-3:#a855f7; --cta-text:#ffffff; --node-bg:rgba(255,255,255,.05); --node-brd:rgba(255,255,255,.12); --line:rgba(255,255,255,.16); --dot:#22d3ee; --glow:rgba(108,140,255,.45); --shadow:0 30px 60px -20px rgba(0,0,0,.6); --header-bg:rgba(8,11,23,.72); --ok:#4ade80; --err:#fb7185; } :root[data-theme="light"]{ color-scheme:light; --bg:#ffffff; --bg-2:#eef1f9; --surface:rgba(13,18,32,.035); --surface-brd:rgba(13,18,32,.12); --text:#0d1220; /* 18.6:1 pe alb */ --text-soft:#4a5468; /* 7.9:1 pe alb */ --accent:#3f57d6; /* 6.4:1 pe alb */ --accent-2:#0a6076; /* 7.0:1 pe alb */ --accent-3:#7b34c9; /* 6.5:1 pe alb */ /* Varianta pentru text mic asezat pe un fond deja colorat cu accent-2 (etichetele din diagrama): acolo contrastul scade, deci mergem mai inchis. */ --accent-2-tare:#06414f; --cta-text:#ffffff; --node-bg:rgba(13,18,32,.035); --node-brd:rgba(13,18,32,.12); --line:rgba(13,18,32,.16); --dot:#0b6f8c; --glow:rgba(63,87,214,.16); --shadow:0 24px 48px -22px rgba(13,18,32,.28); --header-bg:rgba(255,255,255,.8); --ok:#0f7a3d; /* 5.1:1 pe alb */ --err:#c02640; /* 5.9:1 pe alb */ } /* ============================================================ Baza si componente ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); font-size:var(--text-base); font-weight:var(--fw-normal); line-height:var(--leading-body); background: radial-gradient(1100px 620px at 82% -6%, var(--glow), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); background-attachment:fixed; color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; /* Schimbarea de tema trebuie sa fie o tranzitie, nu un clipit. */ transition:background .4s ease,color .3s ease; overflow-x:hidden; } a{color:inherit} :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px} /* ---------- shared layout ---------- */ .container{max-width:1200px;margin:0 auto;padding:0 var(--space-4)} @media (max-width:920px){ .container{padding:0 var(--space-3)} } .section{padding:var(--space-7) 0} @media (max-width:920px){ .section{padding:var(--space-6) 0} } .section-head{max-width:640px;margin-bottom:var(--space-5)} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .kicker{ display:inline-flex;align-items:center;gap:var(--space-1); font-size:var(--text-xs);font-weight:var(--fw-bold); letter-spacing:.06em;text-transform:uppercase; color:var(--accent-2);margin-bottom:var(--space-2); } h2{ font-size:var(--text-2xl);line-height:var(--leading-tight); letter-spacing:-.02em;font-weight:var(--fw-bold);text-wrap:balance; } .lead{ margin-top:var(--space-2);font-size:var(--text-lg); line-height:var(--leading-body);color:var(--text-soft); } .grad{ background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent-3) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .card{ background:var(--surface);border:1px solid var(--surface-brd); border-radius:var(--radius-lg);padding:26px; transition:transform var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med) ease; } .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 35%,transparent)} .ico-box{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center; color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-3)); box-shadow:0 8px 18px -8px var(--glow);margin-bottom:18px; } .ico-box svg{width:22px;height:22px} /* ---------- header ---------- */ /* Header transparent peste hero; capata fundal si linie doar dupa ce incepe scroll-ul, ca textul paginii sa nu treaca peste el. */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:40; background:transparent; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .site-header.is-stuck{ background:var(--header-bg);backdrop-filter:blur(14px); border-bottom-color:var(--surface-brd); } .header-inner{ max-width:1200px;margin:0 auto;padding:12px 32px; display:flex;align-items:center;gap:24px; } @media (max-width:920px){ .header-inner{padding:10px 22px} } .logo{display:flex;align-items:center;gap:11px;font-weight:var(--fw-bold);font-size:18px;letter-spacing:-.02em;text-decoration:none} /* Regulile pentru imaginea din logo sunt folosite acum doar de footer. */ .logo .mark{ width:32px;height:38px;flex:none;display:block; object-fit:cover;border-radius:var(--radius-sm); box-shadow:0 8px 18px -8px var(--glow); } .nav{display:flex;gap:4px;margin-left:auto} .nav a{ font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--text-soft);text-decoration:none; padding:9px 13px;border-radius:9px;transition:color var(--t-med) ease,background var(--t-med) ease; } .nav a:hover{color:var(--text);background:var(--surface)} @media (max-width:1020px){ .nav{display:none} } .header-cta{ font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--cta-text);text-decoration:none; padding:11px 18px;border-radius:11px;white-space:nowrap; background:linear-gradient(120deg,var(--accent),var(--accent-3)); box-shadow:0 12px 26px -12px var(--glow); transition:transform var(--t-fast) ease; } .header-cta:hover{transform:translateY(-2px)} @media (max-width:1020px){ .header-cta{margin-left:auto} } @media (max-width:520px){ .header-cta{display:none} } /* ---------- meniu mobil ---------- */ /* Butonul apare exact de unde dispare navigatia orizontala. */ .nav-toggle{ display:none;flex:none;width:42px;height:42px;padding:0;cursor:pointer; align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--surface-brd);border-radius:11px; color:var(--text);transition:background var(--t-med) ease,border-color var(--t-med) ease; } .nav-toggle:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)} @media (max-width:1020px){ .nav-toggle{display:flex} } @media (max-width:520px){ .nav-toggle{margin-left:auto} } .nav-toggle-bars{display:block;width:18px;height:12px;position:relative} .nav-toggle-bars i{ position:absolute;left:0;width:100%;height:2px;border-radius:2px; background:currentColor;transition:transform var(--t-med) ease,opacity var(--t-med) ease; } .nav-toggle-bars i:nth-child(1){top:0} .nav-toggle-bars i:nth-child(2){top:5px} .nav-toggle-bars i:nth-child(3){top:10px} .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* Header-ul e transparent sus, deci panoul isi aduce propriul fundal, altfel linkurile s-ar suprapune peste hero. */ .nav-mobil{ display:none;overflow:hidden;height:0; background:var(--header-bg);backdrop-filter:blur(14px); border-top:1px solid var(--surface-brd); transition:height .28s ease; } @media (max-width:1020px){ .nav-mobil{display:block} } /* [hidden] castiga peste display:block cand JS nu a rulat inca. */ .nav-mobil[hidden]{display:none} .nav-mobil-inner{ display:flex;flex-direction:column;gap:2px; padding:10px 22px 20px; } .nav-mobil-inner a{ font-size:var(--text-lg);font-weight:var(--fw-semi);color:var(--text-soft);text-decoration:none; padding:13px 12px;border-radius:11px; transition:color var(--t-med) ease,background var(--t-med) ease; } .nav-mobil-inner a:hover{color:var(--text);background:var(--surface)} .nav-mobil-cta{ margin-top:10px;text-align:center; color:var(--cta-text) !important;font-weight:var(--fw-bold); background:linear-gradient(120deg,var(--accent),var(--accent-3)); box-shadow:0 12px 26px -12px var(--glow); } @media (prefers-reduced-motion: reduce){ .nav-mobil{transition:none} .nav-toggle-bars i{transition:none} } /* ---------- hero ---------- Trei zone pe un rand la desktop: portret | text | diagrama. Portretul si textul impart coloana din stanga (.col-text), diagrama ramane coloana din dreapta. Sub 1080px diagrama coboara sub ele, sub 760px si portretul urca deasupra textului. Latime mai mare decat restul paginii: trei zone au nevoie de aer. */ /* Diagrama primeste o latime fixa: sub ~400px etichetele din noduri se rup pe trei randuri. Restul spatiului merge la portret si text. Cele trei zone au nevoie de 1280px ca sa stea pe un rand; sub atat, diagrama coboara. */ .wrap{ position:relative; max-width:1340px;margin:0 auto;padding:132px 32px 90px; display:grid;grid-template-columns:minmax(0,1fr) 420px; gap:48px;align-items:center; } /* ---------- fundalul de sub header: ploaia de caractere ---------- Canvas-ul e cat ecranul, nu cat continutul: .wrap are max-width 1340px, deci cu inset:0 ar fi lasat dungi pe margini la ecrane late. Panza e opaca. Fara opacity:.5 hero-ul ar deveni un dreptunghi plat lipit peste degradeul paginii; asa ploaia se aseaza in fundalul existent. Trei taieturi, combinate cu mask-composite: - sus, 70px cat header-ul, plus 40px de trecere: bara ramane curata si ploaia nu incepe brusc; - jos, stingere de la 60%, ca sa intre lin in sectiunea urmatoare; - la mijloc, o pata mai slaba peste coloana de text, ca literele care cad sa nu concureze cu paragraful. */ .matrix{ position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%; z-index:0;pointer-events:none;display:block; opacity:.5; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 70px, #000 110px, #000 60%, transparent 100%), radial-gradient(520px 300px at 46% 42%, rgba(0,0,0,.28), #000 76%); mask-image: linear-gradient(180deg, transparent 0, transparent 70px, #000 110px, #000 60%, transparent 100%), radial-gradient(520px 300px at 46% 42%, rgba(0,0,0,.28), #000 76%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* Ploaia merge pe ambele teme; paleta se schimba din JS (vezi PALETE). */ /* Continutul trece peste fundal. */ .col-text, .diagram{position:relative;z-index:1} /* Doua randuri: pe primul stau poza si tot textul, pe al doilea doar cifrele. .col-foto e transparent pentru grila (display:contents), altfel textul s-ar centra fata de poza SI cifre la un loc si ar cobori sub poza. Asa, textul ramane fix in dreptul portretului. */ .col-text{ display:grid;grid-template-columns:320px minmax(0,1fr); column-gap:38px;align-items:center; } .col-foto{display:contents} .portret{grid-column:1;grid-row:1} .trust{grid-column:1;grid-row:2} .col-copy{grid-column:2;grid-row:1} /* Cifrele mostenesc latimea coloanei, deci stau exact sub poza. */ /* Cardul portretului: aceleasi rotunjiri si aceeasi umbra ca diagrama, ca sa citeasca drept pereche vizuala. Degradeul de jos leaga fundalul negru al fotografiei de fundalul paginii, mai ales pe tema light. */ .portret{ position:relative;width:100%;margin:0; border-radius:var(--radius-xl);overflow:hidden; border:1px solid var(--surface-brd);box-shadow:var(--shadow); background:var(--surface); } .portret img{display:block;width:100%;height:auto} .portret::after{ content:"";position:absolute;inset:auto 0 0 0;height:34%; background:linear-gradient(to top,var(--bg),transparent); opacity:.55;pointer-events:none; } @media (max-width:1280px){ .wrap{grid-template-columns:1fr;padding:112px 22px 64px;gap:44px} } @media (max-width:760px){ /* Pe un singur rand nu mai incape nimic langa poza, deci ordinea devine poza -> text -> cifre: numele si butonul raman aproape de prima privire, iar cifrele inchid blocul. */ .col-text{grid-template-columns:minmax(0,1fr);row-gap:28px;justify-items:center} .portret{grid-row:1;width:min(280px,72vw)} .col-copy{grid-column:1;grid-row:2;width:100%} .trust{grid-column:1;grid-row:3;width:min(280px,72vw);margin-top:0} } .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:var(--text-sm);font-weight:var(--fw-semi);letter-spacing:.02em; color:var(--text-soft); background:var(--surface);border:1px solid var(--surface-brd); padding:7px 14px;border-radius:var(--radius-pill);margin-bottom:26px; } .eyebrow .dot{width:8px;height:8px;border-radius:50%; background:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 25%,transparent); animation:blink 2.4s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} h1{ font-size:var(--text-3xl); line-height:var(--leading-tight);letter-spacing:-.02em;font-weight:var(--fw-bold); margin-bottom:22px;text-wrap:balance; } h1 .grad{ background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent-3) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } /* Numele si rolul, unul sub altul: rolul e o linie de sprijin, nu un titlu. */ #hero h1 span{display:block} /* Un nume nu are nevoie de 46px: coboram o treapta fata de titlul standard, ca sa lase aer portretului si paragrafului. */ #hero h1{font-size:var(--text-2xl);margin-bottom:18px} #hero h1 .rol{ font-size:var(--text-lg);font-weight:var(--fw-semi); letter-spacing:0;line-height:var(--leading-snug);margin-top:4px; } #hero .sub{font-size:var(--text-base);margin-bottom:28px} #hero .eyebrow{margin-bottom:20px} /* Butonul din hero: mai mic decat cel din sectiunile de jos, ca sa nu concureze vizual cu portretul. */ #hero .cta{font-size:var(--text-base);padding:13px 22px} #hero .cta svg{width:17px;height:17px} .sub{ font-size:var(--text-lg);line-height:var(--leading-body);color:var(--text-soft); max-width:540px;margin-bottom:36px; } .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px} .cta{ display:inline-flex;align-items:center;gap:11px; font-size:var(--text-lg);font-weight:var(--fw-bold);color:var(--cta-text);cursor:pointer; text-decoration:none;padding:17px 30px;border-radius:var(--radius-md);border:0; background:linear-gradient(120deg,var(--accent),var(--accent-3)); box-shadow:0 16px 34px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.25); transition:transform var(--t-fast) ease, box-shadow var(--t-fast) ease; } .cta:hover{transform:translateY(-2px);box-shadow:0 22px 42px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.3)} .cta svg{transition:transform var(--t-fast) ease} .cta:hover svg{transform:translateX(4px)} .cta.ghost{ background:var(--surface);color:var(--text); border:1px solid var(--surface-brd);box-shadow:none; } .cta.ghost:hover{box-shadow:var(--shadow)} .cta-note{font-size:var(--text-sm);color:var(--text-soft);display:flex;align-items:center;gap:7px} .cta-note svg{width:16px;height:16px;color:var(--accent-2)} /* Cifrele: o coloana centrata sub portret, cu linii fine intre ele. Randul orizontal nu ar incapea pe 320px fara sa rupa etichetele. */ .trust{ margin-top:22px;display:flex;flex-direction:column; border:1px solid var(--surface-brd);border-radius:var(--radius-lg); background:var(--surface);overflow:hidden; } .trust .stat{ display:flex;flex-direction:column;gap:2px; align-items:center;text-align:center;padding:13px 12px; } .trust .stat + .stat{border-top:1px solid var(--surface-brd)} .trust .num{ font-size:20px;font-weight:var(--fw-bold);letter-spacing:-.01em; font-variant-numeric:tabular-nums; } .trust .lbl{font-size:var(--text-xs);color:var(--text-soft);text-wrap:balance} /* ---------- flow diagram ---------- */ .diagram{ position:relative;padding:26px;border-radius:var(--radius-xl); background:var(--surface);border:1px solid var(--surface-brd); box-shadow:var(--shadow);backdrop-filter:blur(8px); } .diagram-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .diagram-head .title{font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--text-soft);letter-spacing:.04em;text-transform:uppercase} .diagram-head .live{display:flex;align-items:center;gap:7px;font-size:var(--text-xs);font-weight:var(--fw-semi);color:var(--accent-2)} .diagram-head .live .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent-2);animation:blink 1.6s infinite} .flow{position:relative;display:grid;gap:14px} .node{ position:relative;display:flex;align-items:center;gap:14px; padding:15px 16px;border-radius:15px; background:var(--node-bg);border:1px solid var(--node-brd); opacity:0;transform:translateY(10px); animation:rise .6s forwards; } /* Nodurile sunt copiii 1, 3, 5, 7, 9: intre ele stau conectorii .conn. Cu :nth-child(1..5) ultimele doua noduri ramaneau fara intarziere si apareau primele, deci fluxul se desena in dezordine. */ .node:nth-child(1){animation-delay:.15s} .node:nth-child(3){animation-delay:.5s} .node:nth-child(5){animation-delay:.85s} .node:nth-child(7){animation-delay:1.2s} .node:nth-child(9){animation-delay:1.55s} @keyframes rise{to{opacity:1;transform:none}} .node .ico{ flex:none;width:42px;height:42px;border-radius:12px; display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-3)); box-shadow:0 8px 18px -8px var(--glow); } .node.ai .ico{background:linear-gradient(135deg,var(--accent-2),var(--accent))} .node .ico svg{width:21px;height:21px} .node .txt{display:flex;flex-direction:column;gap:2px;min-width:0} .node .txt .t{font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:-.01em} .node .txt .d{font-size:var(--text-xs);color:var(--text-soft)} .node .tag{ margin-left:auto;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.03em; padding:5px 9px;border-radius:var(--radius-pill);color:var(--accent-2-tare); background:color-mix(in srgb,var(--accent-2) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent-2) 28%,transparent); white-space:nowrap; } /* connectors between nodes */ .conn{position:relative;height:0} .conn::before{ content:"";position:absolute;left:36px;top:-14px;height:14px;width:2px; background:var(--line); } .conn::after{ content:"";position:absolute;left:33px;top:-14px;width:8px;height:8px;border-radius:50%; background:var(--dot);box-shadow:0 0 12px 2px var(--dot); animation:travel 3.2s linear infinite;opacity:0; } .conn.c1::after{animation-delay:.2s} .conn.c2::after{animation-delay:1s} .conn.c3::after{animation-delay:1.8s} .conn.c4::after{animation-delay:2.6s} @keyframes travel{ 0%{top:-14px;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:0px;opacity:0} } .diagram-foot{ margin-top:20px;padding-top:16px;border-top:1px solid var(--surface-brd); display:flex;align-items:center;justify-content:space-between;gap:12px; } .diagram-foot .saved{font-size:var(--text-sm);color:var(--text-soft)} .diagram-foot .saved b{color:var(--text)} .diagram-foot .zero{ font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--accent-2); display:flex;align-items:center;gap:6px; } /* Precizarea de sub cifra: discreta, dar lizibila (respecta pragul AA). */ .diagram-nota{ margin-top:var(--space-1); font-size:var(--text-xs);line-height:1.5;color:var(--text-soft); } /* ---------- problema ---------- */ /* Doua coloane pe desktop, o coloana sub 900px. Cardurile se intind pe toata inaltimea randului ca solutia sa ramana aliniata jos, oricat text au. */ .pains{ display:grid;grid-template-columns:repeat(2,1fr);gap:20px; max-width:1000px;margin:0 auto;align-items:stretch; } @media (max-width:900px){ .pains{grid-template-columns:1fr;gap:16px;max-width:640px} } .pain{ display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--surface-brd); border-radius:var(--radius-lg);padding:28px; transition:transform var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med) ease; } .pain:hover{ transform:translateY(-3px);box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 35%,transparent); } @media (max-width:900px){ .pain{padding:24px 22px} } .pain-count{ display:inline-flex;align-items:center;gap:9px;align-self:flex-start; font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.08em; color:var(--accent-2);margin-bottom:18px; } /* Linia scurta de langa numar tine locul unei iconite, fara sa incarce cardul. */ .pain-count::after{ content:"";width:26px;height:1px; background:linear-gradient(90deg,var(--accent-2),transparent); } .pain-body{display:grid;gap:14px;margin-bottom:22px} .pain-body p{font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-soft)} @media (max-width:900px){ .pain-body p{font-size:var(--text-sm)} } /* Solutia sta lipita de baza cardului, indiferent de lungimea textului. */ .pain-solution{ margin-top:auto;display:flex;gap:12px;align-items:flex-start; padding-top:20px;border-top:1px solid var(--surface-brd); font-size:var(--text-sm);line-height:var(--leading-body);font-weight:var(--fw-semi);color:var(--text); } .pain-solution svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent-2)} /* ---------- ce facem ---------- */ /* Patru piloni, 4 coloane pe desktop, 2 pe tableta, 1 pe telefon. */ .pillars{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch; } @media (max-width:1020px){ .pillars{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .pillars{grid-template-columns:1fr;gap:16px;max-width:520px;margin:0 auto} } .pillar{ display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--surface-brd); border-radius:var(--radius-lg);padding:26px 24px; transition:transform var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med) ease; } .pillar:hover{ transform:translateY(-3px);box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 35%,transparent); } .pillar-num{ font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.08em; color:var(--accent-2);margin-bottom:14px; } .pillar h3{ font-size:var(--text-lg);font-weight:var(--fw-bold);letter-spacing:-.01em; line-height:var(--leading-snug);margin-bottom:10px;text-wrap:balance; } .pillar p{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft)} /* ---------- servicii ---------- */ .card h3{font-size:var(--text-lg);font-weight:var(--fw-bold);letter-spacing:-.01em;margin-bottom:9px} .card p{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft)} .card ul{margin-top:14px;display:grid;gap:7px;list-style:none} .card li{font-size:var(--text-sm);color:var(--text-soft);display:flex;gap:9px;align-items:flex-start} .card li::before{ content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%; background:var(--accent-2); } /* ---------- accordion servicii ---------- */ .acc{display:grid;gap:14px;max-width:900px;margin:0 auto} .acc-item{ background:var(--surface);border:1px solid var(--surface-brd); border-radius:var(--radius-lg);overflow:hidden; transition:border-color var(--t-med) ease, background var(--t-med) ease; } .acc-item.is-open{border-color:color-mix(in srgb,var(--accent) 42%,transparent)} .acc-heading{margin:0;font-size:inherit;font-weight:inherit} .acc-trigger{ width:100%;display:flex;align-items:flex-start;gap:18px; font:inherit;text-align:left;cursor:pointer;color:inherit; background:transparent;border:0;padding:22px 24px; } @media (max-width:620px){ .acc-trigger{padding:18px 18px;gap:14px} } .acc-num{ flex:none;font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:.04em; color:var(--accent-2);padding-top:4px;min-width:26px; } .acc-head-text{display:flex;flex-direction:column;gap:7px;min-width:0} .acc-title{ font-size:18px;font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.25; /* Regula: titlul nu trece de doua randuri pe mobil. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .acc-sub{font-size:var(--text-sm);line-height:1.5;color:var(--text-soft)} .acc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px} .acc-tags span{ font-size:var(--text-xs);font-weight:var(--fw-semi);padding:5px 10px;border-radius:var(--radius-pill); color:var(--text-soft);background:var(--node-bg);border:1px solid var(--node-brd); } .acc-chevron{ flex:none;margin-left:auto;margin-top:8px;width:11px;height:11px; border-right:2px solid var(--text-soft);border-bottom:2px solid var(--text-soft); transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,.61,.36,1); } .acc-item.is-open .acc-chevron{transform:rotate(225deg);border-color:var(--accent-2)} /* Inchis inseamna inchis: inaltime zero, continut taiat si scos din accesibilitate. Inaltimea o pune JS-ul in pixeli, ca sa se poata anima, apoi devine auto, ca sa se adapteze la redimensionarea ferestrei. Panoul sta in fluxul normal, deci deschiderea impinge cardurile de sub el. */ .acc-panel{ height:0; overflow:hidden; visibility:hidden; transition: height .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s; } .acc-item.is-open .acc-panel{ visibility:visible; transition: height .3s cubic-bezier(.22,.61,.36,1), visibility 0s; } .acc-panel-inner > *{ /* Coloana de text ramane in 60-75 de caractere. */ max-width:68ch; } .acc-panel-inner{padding:0 24px 24px 68px} @media (max-width:620px){ .acc-panel-inner{padding:0 18px 20px} } .acc-question{ font-size:19px;font-weight:var(--fw-bold);line-height:1.35;letter-spacing:-.02em; color:var(--text);margin:6px 0 22px; } .acc-label{ font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase; color:var(--text-soft);margin-bottom:10px; } /* Blocul de problema sta mai stins si separat vizual de solutie. */ .acc-problem{ background:var(--node-bg);border:1px solid var(--node-brd); border-radius:var(--radius-md);padding:18px 20px;margin-bottom:22px;opacity:.86; } .acc-problem .acc-label:not(:first-child){margin-top:18px} .acc-solution{ border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent); padding-left:20px;margin-bottom:22px; } .acc-solution .acc-label:not(:first-child){margin-top:20px} @media (max-width:620px){ .acc-solution{padding-left:14px} } .acc-text{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft)} .acc-text--strong{color:var(--text)} .acc-list,.acc-steps{list-style:none;display:grid;gap:9px} .acc-list li,.acc-steps li{ font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft); display:flex;gap:11px;align-items:flex-start; } .acc-list li::before{ content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%; background:var(--text-soft);opacity:.6; } .acc-list--check li{color:var(--text)} .acc-list--check li::before{ width:7px;height:7px;opacity:1; background:linear-gradient(135deg,var(--accent-2),var(--accent)); } .acc-steps{counter-reset:pas} .acc-steps li{counter-increment:pas} .acc-steps li::before{ content:counter(pas);flex:none;width:22px;height:22px;border-radius:7px; display:grid;place-items:center;font-size:var(--text-xs);font-weight:var(--fw-bold);color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-3)); } .acc-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px} @media (max-width:620px){ .acc-benefits{grid-template-columns:1fr} } .acc-benefit{ font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text); background:var(--node-bg);border:1px solid var(--node-brd); border-radius:12px;padding:14px 16px; } .acc-diff{margin-bottom:24px} /* Eticheta de dovada (rezultat masurabil, nume de client) pentru cand avem cifre reale de pus sub fiecare implementare. */ .acc-proof{ display:inline-block;margin-top:12px;font-size:var(--text-xs);font-weight:var(--fw-bold); padding:6px 12px;border-radius:var(--radius-pill); color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent); } .acc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px} .acc-foot .cta{font-size:var(--text-base);padding:14px 24px} .acc-close{ font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semi);cursor:pointer; color:var(--text-soft);background:transparent; border:1px solid var(--surface-brd);border-radius:11px;padding:13px 20px; transition:color var(--t-med) ease,border-color var(--t-med) ease; } .acc-close:hover{color:var(--text);border-color:var(--text-soft)} /* ---------- proces ---------- */ /* Doua coloane: stanga sta fixa cat timp derulezi pasii din dreapta, deci titlul si navigatia raman mereu in campul vizual. Pasul din dreptul mijlocului ecranului devine „activ" si se aprinde singur, fara click. */ .proces-grid{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px;align-items:start; } /* minmax(0,...) si min-width:0 sunt obligatorii: fara ele, coloana se dimensioneaza dupa continutul cel mai lat care nu se poate rupe (pastilele cu white-space:nowrap de pe mobil) si intinde toata pagina. */ .proces-aside,.proces-steps{min-width:0} @media (max-width:1020px){ .proces-grid{grid-template-columns:minmax(0,1fr);gap:34px} } .proces-aside-inner{position:sticky;top:104px} @media (max-width:1020px){ .proces-aside-inner{position:static} } .proces-aside .section-head{margin-bottom:38px;max-width:none} /* --- navigatia pe pasi (rail vertical) --- */ .proces-nav{position:relative} .proces-nav-track{ position:absolute;left:8px;top:18px;bottom:18px;width:2px; border-radius:2px;background:var(--line);overflow:hidden; } .proces-nav-track i{ position:absolute;inset:0;border-radius:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2) 55%,var(--accent-3)); transform-origin:top;transform:scaleY(var(--p,0)); transition:transform .55s cubic-bezier(.22,.61,.36,1); } .proces-nav-list{list-style:none;display:grid;gap:2px;padding-left:34px} .proces-nav-item{position:relative} .proces-nav-item::before{ content:"";position:absolute;left:-30px;top:50%;margin-top:-5px; width:10px;height:10px;border-radius:50%; background:var(--bg-2);border:2px solid var(--line); transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .35s ease; } .proces-nav-item.is-active::before{ background:var(--dot);border-color:var(--dot);transform:scale(1.15); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-2) 16%,transparent); } .proces-nav-item.is-done::before{background:var(--accent);border-color:var(--accent)} .proces-nav-btn{ font:inherit;text-align:left;cursor:pointer;width:100%; display:flex;align-items:baseline;gap:12px; padding:11px 14px;border:0;border-radius:12px; background:transparent;color:var(--text-soft); transition:color .3s ease,background .3s ease; } .proces-nav-btn .n{ flex:none;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em; color:var(--text-soft);opacity:.65;transition:color .3s ease,opacity .3s ease; } .proces-nav-btn .t{font-size:var(--text-base);font-weight:var(--fw-semi);letter-spacing:-.01em} .proces-nav-btn:hover{color:var(--text);background:var(--surface)} .proces-nav-item.is-active .proces-nav-btn{color:var(--text);background:var(--surface)} .proces-nav-item.is-active .proces-nav-btn .n{color:var(--accent-2);opacity:1} /* --- pasii --- */ .proces-steps{list-style:none;display:grid;gap:20px} .proces-step{scroll-margin-top:120px} .proces-step-card{ position:relative;overflow:hidden; display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start; padding:34px 34px 34px 32px;border-radius:var(--radius-xl); background:var(--surface);border:1px solid var(--surface-brd); opacity:.58; transition:opacity .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.22,.61,.36,1); } /* Aura calda apare doar pe pasul activ, ca ochiul sa stie unde e. */ .proces-step-card::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(460px 220px at 6% 0%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 70%); transition:opacity .5s ease; } /* Muchia din stanga se umple cand pasul devine activ: sugereaza progresul. */ .proces-step-card::after{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--accent),var(--accent-2) 55%,var(--accent-3)); transform:scaleY(0);transform-origin:top; transition:transform .6s cubic-bezier(.22,.61,.36,1); } .proces-step.is-active .proces-step-card{ opacity:1;transform:translateY(-2px);box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 34%,transparent); } .proces-step.is-active .proces-step-card::before{opacity:1} .proces-step.is-active .proces-step-card::after{transform:scaleY(1)} .proces-step-num{ position:relative;font-size:clamp(40px,4.6vw,58px);font-weight:var(--fw-bold); line-height:.9;letter-spacing:-.04em; color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.2); transition:-webkit-text-stroke-color .45s ease,opacity .45s ease; } .proces-step.is-active .proces-step-num{ -webkit-text-stroke:0; background:linear-gradient(150deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent-3) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .proces-step-body h3{ font-size:var(--text-xl);font-weight:var(--fw-bold); letter-spacing:-.02em;margin-bottom:10px; } .proces-step-body p{font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-soft);max-width:56ch} .proces-step.is-active .proces-step-body p{color:color-mix(in srgb,var(--text) 78%,var(--text-soft))} .proces-step-body strong{color:var(--text);font-weight:var(--fw-bold)} @media (max-width:1020px){ /* Pe ecrane mici railul devine o bara de pastile derulabila orizontal. */ .proces-nav-track,.proces-nav-item::before{display:none} .proces-nav-list{ display:flex;gap:8px;padding-left:0;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch; padding-bottom:4px; } .proces-nav-list::-webkit-scrollbar{display:none} .proces-nav-item{flex:none} .proces-nav-btn{ white-space:nowrap;padding:9px 14px;border-radius:var(--radius-pill); background:var(--surface);border:1px solid var(--surface-brd); } .proces-nav-item.is-active .proces-nav-btn{ border-color:color-mix(in srgb,var(--accent) 40%,transparent); } } @media (max-width:620px){ .proces-step-card{grid-template-columns:1fr;gap:14px;padding:28px 24px 28px 22px} .proces-step-body p{font-size:var(--text-sm)} } /* ---------- bara de logo-uri ---------- */ .logo-strip{ padding:26px 0 44px; border-top:1px solid var(--surface-brd); border-bottom:1px solid var(--surface-brd); } .logo-bar{ position:relative;overflow:hidden; /* Marginile se sting in fundal, ca banda sa nu para taiata brusc. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .logo-track{ display:flex;gap:12px;width:max-content; animation:marquee 38s linear infinite; } .logo-bar:hover .logo-track{animation-play-state:paused} @keyframes marquee{ to{ transform:translateX(-50%) } } .logo-item{ display:inline-flex;align-items:center;gap:10px;white-space:nowrap; font-size:var(--text-sm);font-weight:var(--fw-bold);letter-spacing:-.01em; padding:12px 20px;border-radius:var(--radius-pill); background:var(--surface);border:1px solid var(--surface-brd);color:var(--text-soft); transition:color var(--t-med) ease,border-color var(--t-med) ease; } .logo-item:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,transparent)} /* Logo-urile sunt monocrome si iau culoarea textului, ca banda sa ramana unitara si sa nu concureze cu accentele paginii. */ .logo-item svg{flex:none;width:19px;height:19px;fill:currentColor} @media (prefers-reduced-motion: reduce){ .logo-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center} .logo-bar{-webkit-mask-image:none;mask-image:none} } /* ---------- contact ---------- */ /* Intai argumentul, apoi formularul — o singura coloana, centrata, ca sa nu se imparta atentia intre doua lucruri deodata. */ .contact-intro{max-width:720px;margin:0 auto 44px;text-align:center} .contact-intro .lead{margin-left:auto;margin-right:auto} .contact-intro .lead + .lead{margin-top:14px} .contact-intro-titlu{ margin-top:32px;font-size:var(--text-base);font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--text); } /* Cele trei rezultate stau centrate, ca sa cada pe axa titlului. */ .contact-intro .checklist{margin:16px auto 0;max-width:560px} .contact-intro .checklist li{justify-content:center;text-align:left} .contact-intro .cta{margin-top:34px} .contact-grid{ max-width:720px;margin:0 auto; background:var(--surface);border:1px solid var(--surface-brd); border-radius:var(--radius-xl);padding:44px;box-shadow:var(--shadow); } @media (max-width:920px){ .contact-grid{padding:30px} } .checklist{margin-top:26px;display:grid;gap:13px;list-style:none} .checklist li{display:flex;gap:11px;align-items:flex-start;font-size:var(--text-sm);color:var(--text-soft);line-height:var(--leading-body)} .checklist svg{flex:none;width:19px;height:19px;color:var(--accent-2);margin-top:1px} .form{display:grid;gap:14px} .field{display:grid;gap:7px} .field label{font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--text-soft)} .field input,.field textarea{ font:inherit;font-size:var(--text-base);color:var(--text); background:var(--node-bg);border:1px solid var(--node-brd); border-radius:12px;padding:13px 15px;width:100%; transition:border-color var(--t-med) ease; } .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field textarea{min-height:118px;resize:vertical} .form .cta{justify-content:center;width:100%} .form-note{font-size:var(--text-xs);color:var(--text-soft);line-height:var(--leading-body)} .form-note.is-ok{color:#4ade80} .form-note.is-err{color:#fb7185} /* Mesaj de eroare sub campul respectiv. */ .field-err{font-size:var(--text-xs);color:#fb7185;line-height:1.45;display:none} .field.has-err .field-err{display:block} .field.has-err input,.field.has-err textarea{border-color:#fb7185} /* Capcana anti-spam: ascunsa de oameni, completata de boti. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- formular pe pasi ---------- */ /* O intrebare pe ecran: raspunsul e mai usor de dat si abandonul mai mic decat la un formular lung. Ultimul pas preda stafeta calendarului. */ .step-form{display:flex;flex-direction:column;gap:24px} /* display:flex ar invinge [hidden], deci o spunem explicit. */ .step-form[hidden]{display:none} .step-progress{display:grid;gap:11px} .step-count{ font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em; text-transform:uppercase;color:var(--accent-2); } .step-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden} .step-bar i{ display:block;height:100%;width:20%;border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2) 55%,var(--accent-3)); transition:width .5s cubic-bezier(.22,.61,.36,1); } /* Inaltime minima stabila: butoanele nu mai sar de la un pas la altul. */ .step-viewport{position:relative;min-height:252px} @media (max-width:620px){ .step-viewport{min-height:296px} } .step-slide{display:none} .step-slide.is-current{display:block} /* --from da directia: inainte intra din dreapta, inapoi din stanga. */ .js .step-slide.is-current{animation:stepIn .42s cubic-bezier(.22,.61,.36,1) both} @keyframes stepIn{ from{opacity:0;transform:translateX(var(--from,28px));filter:blur(6px)} to{opacity:1;transform:none;filter:none} } .step-slide h3{ font-size:var(--text-xl);font-weight:var(--fw-bold); letter-spacing:-.02em;line-height:var(--leading-tight);margin-bottom:9px;text-wrap:balance; } .step-slide .step-sub{ font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-soft);margin-bottom:24px; } .step-slide .field input,.step-slide .field textarea{font-size:var(--text-lg);padding:16px 18px} .step-slide .field textarea{min-height:104px} /* Variante de raspuns: carduri mari, selectabile dintr-un click. */ .step-optiuni{display:grid;gap:10px} .step-optiune{ position:relative;display:grid;gap:4px;cursor:pointer; padding:16px 18px;border-radius:15px; background:var(--node-bg);border:1px solid var(--node-brd); transition:border-color var(--t-med) ease,background var(--t-med) ease,transform var(--t-med) ease; } .step-optiune:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)} .step-optiune input{position:absolute;opacity:0;width:0;height:0} .step-optiune .o-titlu{font-size:var(--text-lg);font-weight:var(--fw-bold);letter-spacing:-.01em} .step-optiune .o-desc{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft)} .step-optiune:has(input:checked){ background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:color-mix(in srgb,var(--accent) 55%,transparent); } .step-optiune:has(input:focus-visible){outline:2px solid var(--accent-2);outline-offset:3px} .step-foot{display:flex;align-items:center;gap:12px} .step-foot .cta{flex:1;justify-content:center} .step-back{ font:inherit;font-size:var(--text-base);font-weight:var(--fw-semi);cursor:pointer; display:inline-flex;align-items:center;gap:8px;flex:none; color:var(--text-soft);background:transparent; border:1px solid var(--surface-brd);border-radius:13px;padding:16px 20px; transition:color var(--t-med) ease,border-color var(--t-med) ease; } .step-back:hover{color:var(--text);border-color:var(--text-soft)} .step-back[hidden]{display:none} /* ---------- calendly ---------- */ .calendly-wrap{display:grid;gap:20px} .calendly-wrap[hidden]{display:none} .calendly-head{display:flex;align-items:flex-start;gap:15px} .calendly-check{ flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center; color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-3)); box-shadow:0 8px 18px -8px var(--glow); } .calendly-check svg{width:21px;height:21px} .calendly-head h3{font-size:19px;font-weight:var(--fw-bold);letter-spacing:-.02em;margin-bottom:5px} .calendly-head p{font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft)} .calendly-embed{ /* Widgetul Calendly umple containerul, deci inaltimea o dam noi. Pe ecrane inguste calendarul se aseaza pe verticala si are nevoie de mai mult loc, altfel apare o a doua bara de scroll in interiorul lui. */ min-height:660px;min-width:320px; border-radius:18px;overflow:hidden; background:var(--node-bg);border:1px solid var(--node-brd); } @media (max-width:820px){ .calendly-embed{min-height:900px} } @media (max-width:620px){ .calendly-embed{min-height:1020px} } /* Mesajul afisat cat timp linkul Calendly e inca cel de exemplu. */ .calendly-fallback{ display:grid;place-items:center;gap:12px;text-align:center; min-height:inherit;padding:44px 26px; font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft); } .cta[disabled]{opacity:.65;cursor:not-allowed;transform:none} .cta[disabled]:hover{transform:none} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--surface-brd);padding:48px 0 36px;margin-top:40px} .footer-inner{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between} .footer-links{display:flex;flex-wrap:wrap;gap:20px} .footer-links a{font-size:var(--text-sm);color:var(--text-soft);text-decoration:none;transition:color var(--t-med) ease} .footer-links a:hover{color:var(--text)} .copyright{font-size:var(--text-sm);color:var(--text-soft)} /* ---------- reveal la scroll ---------- */ .js .reveal{opacity:0;transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0ms);} .js .reveal.is-visible{opacity:1;transform:none} /* Pasii intra si din blur, nu doar din translatie: da senzatia de „focus". */ .js .proces-step.reveal{ filter:blur(10px); transition-property:opacity,transform,filter; } .js .proces-step.reveal.is-visible{filter:none} /* ---------- telefoane inguste (sub 520px) ---------- */ /* Restul paginii se aseaza deja singura; aici corectam doar locurile unde latimea chiar se termina: butoane alaturate, casete cu padding mare si siruri lungi care nu au unde sa se rupa. */ @media (max-width:520px){ /* Doua butoane pe un rand nu incap: trec unul sub altul, la latime plina. */ .step-foot{flex-wrap:wrap} .step-foot .cta{flex:1 1 100%;order:1} .step-back{order:2;width:100%;justify-content:center} /* Padding mai mic = mai mult loc pentru continut. */ .contact-grid{padding:24px 20px} .diagram{padding:18px} .node{padding:13px 12px;gap:11px} .node .ico{width:38px;height:38px} /* Eticheta trece sub text in loc sa striveasca randul, dar titlul ramane langa iconita: fara flex:1 ar sari si el pe randul urmator. */ .node{flex-wrap:wrap} .node .txt{flex:1 1 140px} .node .tag{margin-left:49px} /* Cele doua repere de jos nu mai incap unul langa altul cand textele sunt lungi (mai ales in engleza): le punem unul sub altul. */ .diagram-foot{flex-direction:column;align-items:flex-start;gap:var(--space-1)} /* Textul butoanelor se rupe in loc sa iasa din ecran. */ .cta{font-size:var(--text-base);padding:15px 20px;text-align:center} .cta-row{gap:12px} .cta-row .cta{width:100%;justify-content:center} } /* Eticheta din diagrama era sub pragul de lizibilitate pe ecrane tactile. */ @media (max-width:1020px){ .node .tag{font-size:var(--text-xs)} } /* Zone de atins de cel putin ~40px inaltime, cat un deget. */ @media (max-width:1020px){ .footer-links{gap:6px 20px} .footer-links a{padding:11px 0;display:inline-block} .logo{padding:8px 0} } /* Adrese, linkuri si cuvinte lungi nu trebuie sa largeasca pagina. */ .step-slide .field input,.form-note,.calendly-fallback{overflow-wrap:anywhere} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important;transition:none !important} .js .reveal{opacity:1 !important;transform:none !important;filter:none !important} .node{opacity:1;transform:none} /* Fara animatie, pasul inactiv nu mai trebuie estompat ca sa ramana lizibil. */ .proces-step-card{opacity:1} .proces-step-card::after{transform:scaleY(1)} .proces-nav-track i{transform:scaleY(1)} } /* ============================================================ Pagina de politica de confidentialitate ============================================================ */ .header-back{ margin-left:auto;display:inline-flex;align-items:center;gap:9px; font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--text-soft);text-decoration:none; padding:9px 14px;border-radius:11px; transition:color var(--t-med) ease,background var(--t-med) ease; } .header-back:hover{color:var(--text);background:var(--surface)} .header-back svg{width:16px;height:16px} /* ---------- antet pagina ---------- */ .legal-hero{padding:150px 0 56px} @media (max-width:920px){ .legal-hero{padding:118px 0 40px} } .legal-hero h1{ font-size:var(--text-3xl);line-height:var(--leading-tight); letter-spacing:-.02em;font-weight:var(--fw-bold);text-wrap:balance; } .legal-meta{ margin-top:20px;display:inline-flex;align-items:center;gap:9px; font-size:var(--text-sm);font-weight:var(--fw-semi);color:var(--text-soft); background:var(--surface);border:1px solid var(--surface-brd); padding:7px 14px;border-radius:var(--radius-pill); } .legal-meta .dot{ width:7px;height:7px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 22%,transparent); } /* ---------- corpul documentului ---------- */ /* Cuprinsul ramane fix in stanga, ca sa stii mereu unde esti intr-un document lung. Sectiunea activa se marcheaza singura la scroll. */ .legal-grid{ display:grid;grid-template-columns:250px minmax(0,1fr); gap:72px;align-items:start;padding-bottom:96px; } /* Fara min-width:0, cuprinsul cu pastile nowrap de pe mobil intinde pagina. */ .legal-toc,.legal-body{min-width:0} @media (max-width:1020px){ .legal-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:64px} } .legal-toc-inner{position:sticky;top:104px} @media (max-width:1020px){ .legal-toc-inner{position:static} } .legal-toc-title{ font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase; color:var(--text-soft);opacity:.7;margin-bottom:14px;padding-left:14px; } .legal-toc ol{list-style:none;display:grid;gap:2px} .legal-toc a{ display:flex;align-items:baseline;gap:11px; padding:9px 14px;border-radius:11px;text-decoration:none; color:var(--text-soft);transition:color var(--t-med) ease,background var(--t-med) ease; } .legal-toc a .n{ flex:none;font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:.06em; opacity:.6;transition:color var(--t-med) ease,opacity var(--t-med) ease; } .legal-toc a .t{font-size:var(--text-sm);font-weight:var(--fw-semi);letter-spacing:-.01em} .legal-toc a:hover{color:var(--text);background:var(--surface)} .legal-toc a.is-active{color:var(--text);background:var(--surface)} .legal-toc a.is-active .n{color:var(--accent-2);opacity:1} @media (max-width:1020px){ .legal-toc-title{padding-left:0} .legal-toc ol{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px} .legal-toc ol::-webkit-scrollbar{display:none} .legal-toc li{flex:none} .legal-toc a{ white-space:nowrap;padding:8px 14px;border-radius:var(--radius-pill); background:var(--surface);border:1px solid var(--surface-brd); } .legal-toc a.is-active{border-color:color-mix(in srgb,var(--accent) 40%,transparent)} } .legal-body{display:grid;gap:14px} .legal-section{ position:relative;scroll-margin-top:110px; display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start; padding:34px;border-radius:var(--radius-xl); background:var(--surface);border:1px solid var(--surface-brd); } @media (max-width:620px){ .legal-section{grid-template-columns:1fr;gap:12px;padding:26px 22px} } .legal-num{ font-size:clamp(30px,3.4vw,40px);font-weight:var(--fw-bold);line-height:.9;letter-spacing:-.04em; color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.2); } .legal-section h2{ font-size:var(--text-xl);font-weight:var(--fw-bold); letter-spacing:-.02em;margin-bottom:14px; } .legal-section p{font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-soft);max-width:66ch} .legal-section p + p{margin-top:14px} .legal-section a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent)} .legal-section a:hover{color:var(--text);border-bottom-color:var(--text)} .legal-section strong{color:var(--text);font-weight:var(--fw-bold)} /* Liste cu bulina proprie, la fel ca pe pagina principala. */ .legal-list{list-style:none;display:grid;gap:11px;margin-top:16px;max-width:66ch} .legal-list li{ display:flex;gap:11px;align-items:flex-start; font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-soft); } .legal-list li::before{ content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:50%; background:linear-gradient(135deg,var(--accent-2),var(--accent)); } /* Drepturile GDPR: fiecare cu titlul lui, ca sa fie scanabile. */ .legal-rights{list-style:none;display:grid;gap:10px;margin-top:18px} .legal-rights li{ background:var(--node-bg);border:1px solid var(--node-brd); border-radius:var(--radius-md);padding:15px 17px; font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft); } .legal-rights b{display:block;color:var(--text);font-weight:var(--fw-bold);margin-bottom:3px} .legal-note{ margin-top:18px;padding:16px 18px;border-radius:var(--radius-md); background:color-mix(in srgb,var(--accent-2) 8%,transparent); border:1px solid color-mix(in srgb,var(--accent-2) 24%,transparent); font-size:var(--text-sm);line-height:var(--leading-body);color:var(--text-soft); } /* ---------- telefoane inguste ---------- */ @media (max-width:520px){ .legal-section{padding:22px 18px} .legal-rights li{padding:13px 15px} /* Adresele de email nu au unde sa se rupa: le lasam sa treaca pe randul urmator. */ .legal-section a,.legal-section p{overflow-wrap:anywhere} .header-back{font-size:var(--text-sm);padding:9px 10px} } /* ============================================================ Comenzi din header: tema si limba ============================================================ */ .header-tools{display:flex;align-items:center;gap:var(--space-1);flex:none} /* --- comutator de tema --- */ .theme-toggle{ width:42px;height:42px;flex:none;padding:0;cursor:pointer; display:grid;place-items:center; background:var(--surface);border:1px solid var(--surface-brd); border-radius:var(--radius-md);color:var(--text); transition:background var(--t-med) ease,border-color var(--t-med) ease, transform var(--t-fast) ease; } .theme-toggle:hover{ transform:translateY(-2px); background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); } .theme-toggle svg{width:19px;height:19px} /* Aratam soarele in tema dark (unde e util) si luna in tema light. */ .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} :root[data-theme="light"] .theme-toggle .icon-sun{display:none} :root[data-theme="light"] .theme-toggle .icon-moon{display:block} @media (prefers-color-scheme: dark){ :root:not([data-theme]) .theme-toggle .icon-sun{display:block} :root:not([data-theme]) .theme-toggle .icon-moon{display:none} } /* --- comutator de limba, tip pill --- */ .lang-switch{ display:flex;align-items:center;gap:2px;flex:none; padding:3px;border-radius:var(--radius-pill); background:var(--surface);border:1px solid var(--surface-brd); } .lang-btn{ font:inherit;font-size:var(--text-xs);font-weight:var(--fw-bold); letter-spacing:.04em;cursor:pointer; min-width:38px;padding:8px 10px;border:0;border-radius:var(--radius-pill); background:transparent;color:var(--text-soft); transition:color var(--t-med) ease,background var(--t-med) ease; } .lang-btn:hover{color:var(--text)} .lang-btn[aria-pressed="true"]{ color:var(--cta-text); background:linear-gradient(120deg,var(--accent),var(--accent-3)); box-shadow:0 8px 18px -10px var(--glow); } /* Comenzile raman in bara pe orice latime: paginile legala si 404 nu au meniu burger, deci daca le-am ascunde sub 520px ar disparea de tot. Sub 380px stramtam pastilele, ca sa incapa langa logo si buton. */ @media (max-width:400px){ .header-tools{gap:6px} .theme-toggle{width:40px;height:40px} .theme-toggle svg{width:17px;height:17px} .lang-btn{min-width:32px;padding:8px 7px} } /* ============================================================ Micro-interactiuni comune ============================================================ */ /* Orice buton sau link interactiv raspunde la fel: ridicare de 2px. */ .cta,.header-cta,.theme-toggle,.nav a,.footer-links a,.lang-btn,.step-back,.acc-close{ transition:color var(--t-med) ease,background var(--t-med) ease, border-color var(--t-med) ease,box-shadow var(--t-med) ease, transform var(--t-fast) ease; } .footer-links a:hover,.nav a:hover{transform:translateY(-2px)} .step-back:hover,.acc-close:hover{transform:translateY(-2px)} /* Linkurile din text primesc subliniere animata, nu doar schimbare de culoare. */ .legal-section a{ background-image:linear-gradient(var(--accent-2),var(--accent-2)); background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%; border-bottom:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent); transition:background-size var(--t-med) ease,color var(--t-med) ease; } .legal-section a:hover{background-size:100% 1px} /* ============================================================ Pagina 404 ============================================================ */ .eroare{ min-height:100vh;display:grid;place-items:center; padding:var(--space-7) var(--space-3);text-align:center; } .eroare-cod{ font-size:clamp(4.5rem,14vw,9rem);font-weight:var(--fw-bold); line-height:1;letter-spacing:-.04em;margin-bottom:var(--space-2); } .eroare h1{font-size:var(--text-2xl);margin-bottom:var(--space-2)} .eroare p{ font-size:var(--text-lg);color:var(--text-soft); max-width:46ch;margin:0 auto var(--space-5); } .eroare-actiuni{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center} /* ============================================================ Reduced motion: nimic din cele de mai sus nu se misca ============================================================ */ @media (prefers-reduced-motion: reduce){ .cta:hover,.header-cta:hover,.theme-toggle:hover, .nav a:hover,.footer-links a:hover,.lang-btn:hover, .step-back:hover,.acc-close:hover,.card:hover,.pain:hover,.pillar:hover{ transform:none !important; } .legal-section a{transition:none} }