*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--orange: #FC5109;
--orange-light: #FFF4EC;
--orange-ink: #7A2A04;
--orange-shadow: rgba(252,81,9,0.10);
--bg: #FFFFFF;
--bg-soft: #F8F7F5;
/* Ultimele trei valori neutre-reci din paletă, aduse în familia caldă a restului
(`--muted`, `--ink-soft`, `--bg-soft`). Erau folosite peste tot — carduri de servicii,
recenzii, borduri, titluri — deci ele dădeau senzația că „ceva nu se potrivește", fără
să se vadă unde anume.
`--text` nu mai e negru absolut, ci un gri cald foarte închis: pe crem, `#111111` taie
prea sec, iar diferența se citește ca duritate, nu ca lizibilitate. Contrastul rămâne
peste 14:1, deci nu se pierde nimic. */
--surface: #F8F6F3;
--border: #ECE7E1;
--text: #26221E;
--muted: #6B6560;
--ink-soft: #2E2A26;
--radius-sm: 8px;
--radius-md: 16px;
--radius-pill: 999px;
/* ── Telefonul-mockup ──
Toate griurile de aici sunt CALDE, în aceeași familie cu `--muted` și `--ink-soft`.
Înainte interiorul folosea griuri neutre-reci (#EEEEEE, #F9F9F9, #E5E5E5, #444),
moștenite de pe vremea când telefonul stătea pe fundal alb. Pe portocaliul saturat de
acum, un gri rece se citește murdar și scoate tot obiectul din paletă.
Cele trei trepte sunt distanțate intenționat: rama trebuie să se vadă ca ramă, nu să
se topească în ecranul alb. */
--phone-frame: #D9D3CB; /* rama, notch-ul, butoanele, bara din ecran */
--phone-ui: #EBE6E0; /* liniile-substitut de conținut */
--phone-ui-soft: #F7F4F0; /* cardurile din ecran */
/* ── Text și accente pe blocurile portocalii ──
Nimic nu mai e alb pur. Albul absolut pe portocaliu saturat e cea mai dură pereche
posibilă, iar lângă telefonul cu griuri calde ieșea din paletă. Cele trei trepte sunt
aceleași griuri calde, doar duse spre alb — deci blocul portocaliu și mockup-ul din el
aparțin, în sfârșit, aceleiași familii.
Luminozitatea e păstrată aproape identică cu albul de dinainte (raportul de contrast
față de portocaliu rămâne ~3.4:1), deci nu se pierde lizibilitate. */
--on-orange-strong: #FCF8F4; /* titluri, cifrele din statistici */
--on-orange: #F7F2ED; /* descrieri, paragrafe */
--on-orange-soft: #F6F1EC; /* etichete */
--shadow-xs: 0 3px 14px rgba(60,32,10,0.06);
--shadow-warm: 0 10px 24px rgba(74,32,5,0.09);
--section-space-desktop: 84px;
--section-space-mobile: 64px;
--content-max-desktop: 1200px;
}
/* `clip`, nu `hidden`. `overflow-x: hidden` cu `overflow-y: visible` face ca overflow-y
să se calculeze la `auto`: html și body devin containere de scroll, iar asta anulează
`position: sticky` pentru tot ce e înăuntru — deci întreaga stivă de panouri.
`overflow: clip` taie la fel de bine pe orizontală, dar nu creează container de scroll.
Același schimb e făcut deja pe `.hero` în blocul de mobil (vezi mai jos). */
html {
scroll-padding-top: 68px;
max-width: 100%;
overflow-x: clip;
}
body {
font-family: 'Manrope', sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
overflow-x: clip;
max-width: 100%;
}
/* Plasă pentru browserele fără `overflow: clip` (pre-Safari 16): se pierde stivuirea,
dar pagina nu capătă scroll orizontal. */
@supports not (overflow-x: clip) {
html, body { overflow-x: hidden; }
}
/* ── NAVBAR ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 0 5vw;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
transition: box-shadow 0.3s, background 0.3s, backdrop-filter 0.3s;
background: rgba(255,255,255,0);
}
nav.scrolled {
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,0.05);
}
.nav-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.nav-logo img {
display: block;
height: 80px;
width: auto;
flex-shrink: 0;
}
.nav-links {
display: flex; align-items: center; gap: 36px;
list-style: none;
}
.nav-links a {
font-size: 14px; font-weight: 500; color: var(--muted);
text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
background: var(--orange);
color: #fff;
border: none;
border-radius: var(--radius-pill);
padding: 10px 22px;
font-size: 14px; font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s, transform 0.15s;
}
.nav-cta:hover { opacity: 0.92; transform: translateY(-1px); }
/* hamburger */
.hamburger {
display: none;
flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span {
display: block; width: 22px; height: 2px;
background: var(--text); border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: flex;
position: fixed; top: 68px; left: 0; right: 0;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 24px 5vw 28px;
flex-direction: column; gap: 20px;
z-index: 99;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.mobile-menu.open {
opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
transition: opacity 0.22s ease, transform 0.22s ease;
}
.mobile-menu a {
font-size: 15px; font-weight: 500;
color: var(--text); text-decoration: none;
padding: 6px 0; border-bottom: 1px solid var(--border);
}
.mobile-menu .nav-cta { text-align: center; margin-top: 4px; }
/* ── HERO ── */
.hero {
min-height: clamp(700px, 94vh, 900px);
display: grid;
grid-template-columns: minmax(440px, 640px) minmax(360px, 500px);
align-items: center;
justify-content: center;
gap: clamp(32px, 5vw, 72px);
padding: 108px 5vw 92px;
position: relative;
overflow: hidden;
/* Both layers fade to fully TRANSPARENT rather than to a colour of their own, so the
hero composites onto the page wash on instead of covering it. That is what
removes the seam at the hero's bottom edge — there is no longer an opaque block
ending against a different opaque block. */
background:
radial-gradient(circle at 68% 43%, rgba(252, 81, 9, 0.018) 0 280px, rgba(252, 81, 9, 0) 560px),
radial-gradient(ellipse 78% 92% at 50% 42%, rgba(255, 246, 235, 0.66) 0%, rgba(255, 246, 235, 0.34) 46%, rgba(255, 246, 235, 0) 78%);
}
/* Grain over the gradient, so the fade has a surface instead of reading as flat vector
colour. A pre-rendered 1.8KB tile rather than an inline SVG `feTurbulence`: the filter
would have to be rasterised by the browser, and this costs less on the low-end Androids
most of this site's visitors are holding. Plain alpha compositing over a static raster
— no filter, no mask layer, and no `background-blend-mode` (that last one is what made
the earlier grain attempt on the H1 render inconsistently across browsers, see
MODIFICARI_2026-08-02 §5).
The tile is warm (#FCF6F0 ± luminance noise), not neutral grey, and that is the whole
trick. Grey noise over plain alpha drags a near-white background toward grey as you
strengthen it, so the page goes dull before the grain is even visible. A tile whose
mean already matches the cream shifts no colour, so the opacity can go high enough for
the texture to actually read. `soft-light` was the other candidate and is colour-safe,
but it flattens to nothing on a base this close to white.
Covers the whole page at every width: a grain layer that stops anywhere — at a section
boundary or at a breakpoint — draws a hard texture edge. `fixed` so it never re-tiles
as you scroll, and `z-index: -1` so it sits above the body's wash but beneath every
card, photo and letter on the page. A single static tile on its own compositor layer is
about the cheapest full-screen effect there is, which is why it is safe on mobile. */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.3;
background-image: url("Photos/grain.webp");
background-size: 160px 160px;
background-repeat: repeat;
}
@media (min-width: 769px) {
/* The circle is anchored to the H1 itself and sized in `em`, so it is measured
against the headline's own font-size. Positioning it against the section (as it
was before) made it drift off the words at every other screen size. */
.hero h1 { position: relative; isolation: isolate; }
.hero-title-circle {
position: absolute;
z-index: -1;
width: 3.9em;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: rgba(252, 81, 9, 0.08);
left: -1.5em;
top: -1.15em;
pointer-events: none;
}
}
.hero > * {
position: relative;
z-index: 2;
}
.hero-content {
max-width: 620px;
margin-left: 0;
justify-self: end;
display: flex;
flex-direction: column;
}
.hero-content h1 { order: 2; }
.hero-content p { order: 3; }
.hero-content .hero-usp-badges { order: 4; }
.hero-content .hero-buttons { order: 5; }
.hero h1 {
font-family: 'Sora', sans-serif;
font-size: clamp(40px, 5.2vw, 72px);
font-weight: 700;
line-height: 1.02;
letter-spacing: -2px;
color: var(--text);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
margin-bottom: 18px;
}
.hero h1 em {
font-style: normal;
color: transparent;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.12) 0 0.5px, transparent 0.5px),
radial-gradient(circle at 65% 70%, rgba(122,42,4,0.1) 0 0.5px, transparent 0.5px),
linear-gradient(var(--orange), var(--orange));
background-size: 4px 4px, 5px 5px, 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-line,
.hero h1 em { white-space: nowrap; }
.hero p {
font-size: 18px;
color: var(--ink-soft);
max-width: 100%;
margin-bottom: 16px;
line-height: 1.45;
letter-spacing: -0.2px;
}
.subtitle-mobile { display: none; }
.hero-usp-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin: 0 0 22px;
}
.hero-usp-badges span {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--text);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.usp-icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
color: var(--orange);
}
.usp-icon svg {
display: block;
}
.hero-buttons {
display: flex; flex-wrap: wrap; gap: 12px;
justify-content: flex-start;
margin-bottom: 18px;
}
.btn-primary {
background: var(--orange); color: #fff;
border: none; border-radius: var(--radius-pill);
padding: 14px 30px; font-size: 15px; font-weight: 600;
cursor: pointer; text-decoration: none;
box-shadow: 0 3px 8px rgba(252, 81, 9, 0.16);
transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
display: inline-block;
}
.btn-primary:hover { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(252, 81, 9, 0.2); }
.btn-secondary {
background: transparent; color: var(--text);
border: 1.5px solid #D0D0D0; border-radius: var(--radius-pill);
padding: 14px 30px; font-size: 15px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: border-color 0.2s, transform 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-secondary:hover { border-color: var(--text); transform: translateY(-1px); }
.cta-mobile { display: none; }
.cta-desktop {
display: inline-flex;
align-items: center;
gap: 8px;
}
.phone-pulse-icon {
position: relative;
display: inline-grid;
place-items: center;
color: var(--orange);
flex: 0 0 auto;
}
.phone-pulse-ring {
position: absolute;
inset: -5px;
border: 1px solid rgba(252, 81, 9, 0.34);
border-radius: 50%;
}
.phone-pulse-icon svg {
display: block;
}
.hero-media {
display: flex;
justify-content: flex-start;
align-items: center;
justify-self: start;
width: 100%;
transform: translateY(-6px);
}
/* The collage is one box with a locked aspect-ratio; both photos are placed in
percentages of it, so the composition can only scale as a unit — it can never
rearrange itself between one screen size and the next. `container-type` lets the
corner radius and the frame thickness scale with the box too (a fixed-px ring would
read twice as thick on mobile; a % border-radius would go elliptical). */
.hero-collage {
position: relative;
width: min(100%, 460px);
aspect-ratio: 315 / 435;
container-type: inline-size;
margin-inline: auto;
}
/* --w mirrors each photo's own width as a fraction of the collage, so the corner
radius and the frame stay proportional to the PHOTO rather than to the container.
Without it, shrinking a card (as the bench does on mobile) would leave it wearing a
ring sized for a much larger card. The 5.3 coefficient matches the rounded corner
baked into the photos' alpha channel. */
/* Poziționarea stă pe înveliș, ca ![]()
să rămână liber pentru animația de intrare.
Fără `container-type` aici, altfel `cqw`-urile de mai jos s-ar rezolva față de
înveliș în loc de colaj și rama s-ar dubla ca grosime. */
.hero-photo-depth { position: absolute; }
.hero-photo-depth--shop { left: 0; top: 0; width: 86%; z-index: 1; }
.hero-photo-depth--bench { left: 20%; top: 42%; width: 80%; z-index: 2; }
.hero-photo {
position: relative;
display: block;
width: 100%;
height: auto;
border-radius: calc(5.3cqw * var(--w));
box-shadow:
0 0 0 calc(1.5cqw * var(--w)) var(--bg),
0 0 0 calc(2.2cqw * var(--w)) var(--orange),
var(--shadow-warm);
}
.hero-photo--shop { --w: 0.86; }
.hero-photo--bench { --w: 0.80; }
.hero-scroll-cue {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
width: 34px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 4;
opacity: 0.85;
transition: opacity 0.2s ease;
}
.hero-scroll-cue:hover { opacity: 1; }
.hero-scroll-cue span {
width: 14px;
height: 14px;
border-right: 2px solid var(--orange);
border-bottom: 2px solid var(--orange);
transform: rotate(45deg);
display: block;
}
/* ── SECTION WRAPPER ── */
section {
padding: var(--section-space-desktop) 5vw;
/* Fără `scroll-margin-top` aici: `html { scroll-padding-top: 68px }` acoperă deja
decalajul barei, iar Lenis le scade pe AMÂNDOUĂ — împreună cu vechiul `offset: -68`
din animations.js, fiecare clic pe meniu depășea ținta cu 204px, nu cu 68. */
}
.motion-init { opacity: 0; }
.motion-init-up { opacity: 0; transform: translateY(16px); }
.motion-init-scale { opacity: 0; transform: translateY(16px) scale(0.96); }
.motion-init-left { opacity: 0; transform: translateX(-40px); }
.motion-init-right { opacity: 0; transform: translateX(40px); }
.section-label {
font-size: 13px; font-weight: 600; color: var(--orange);
letter-spacing: 0.8px; text-transform: uppercase;
margin-bottom: 12px;
}
.section-title {
font-family: 'Sora', sans-serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 700; letter-spacing: -1px;
color: var(--text); margin-bottom: 8px;
line-height: 1.15;
}
.title-line {
width: 40px; height: 4px; border-radius: 2px;
background: var(--orange); margin-top: 14px; margin-bottom: 48px;
}
/* ── SERVICES ── */
.services-bg { background: var(--bg); border-top: 1px solid rgba(0,0,0,0.03); }
#services { padding-top: 78px; }
#services .section-label,
#services .section-title {
text-align: center;
}
#services .title-line {
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
}
.services-layout {
display: grid;
grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
gap: clamp(34px, 4.5vw, 64px);
align-items: center;
justify-content: center;
max-width: var(--content-max-desktop);
margin: 0 auto;
}
.services-main {
width: 100%;
}
.services-media {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.services-media picture {
width: 100%;
max-width: 560px;
display: block;
}
.services-media img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
transform-origin: center center;
}
@media (min-width: 769px) {
.services-media picture {
max-width: 640px;
}
.services-media[data-category="tablete"] picture {
max-width: 560px;
}
.services-media[data-category="laptopuri"] picture {
max-width: 500px;
}
}
.service-tabs {
display: inline-flex;
gap: 10px;
background: #FAFAFA;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 6px;
margin: 0 auto 26px;
flex-wrap: wrap;
}
#services .service-tabs {
display: flex;
justify-content: center;
width: fit-content;
margin-bottom: 34px;
}
.service-tab {
border: none;
background: transparent;
color: var(--muted);
font-size: 14px;
font-weight: 600;
padding: 10px 16px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.service-tab:hover {
color: var(--text);
}
.service-tab.is-active {
background: var(--orange);
color: #fff;
box-shadow: 0 2px 6px rgba(252, 81, 9, 0.14);
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.service-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px 18px;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
position: relative;
overflow: hidden;
}
.service-card:hover {
border-color: var(--orange);
box-shadow: 0 4px 14px var(--orange-shadow);
transform: translateY(-2px);
}
.service-icon {
width: 34px; height: 34px;
background: var(--orange-light);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform 0.24s ease, background-color 0.24s ease;
}
.service-card:hover .service-icon {
background: var(--orange-light);
}
.service-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.service-card-head h3 {
margin-bottom: 0;
}
.service-icon svg {
display: block;
}
.service-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.service-card p { font-size: 12px; color: var(--muted); line-height: 1.45; }
@media (min-width: 769px) {
.service-card { min-height: 108px; }
}
.services-show-more {
display: none;
margin: 14px auto 0;
background: transparent;
color: var(--orange);
border: 1.5px solid var(--orange);
border-radius: var(--radius-pill);
padding: 10px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.15s;
}
.services-show-more:hover {
background: var(--orange);
color: #fff;
transform: translateY(-1px);
}
/* ── HOW IT WORKS (panou portocaliu) ──
Fundalul îl dă `.panel--how`, mai jos. Aici se inversează doar culorile de text:
tot ce era gândit închis-pe-deschis devine alb-pe-portocaliu. */
.panel--how .section-title,
.panel--how .step-body h4 { color: var(--on-orange-strong); }
.panel--how .step-body p { color: var(--on-orange); }
.panel--how .title-line { background: var(--on-orange-strong); }
.how-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 56px);
align-items: center;
max-width: var(--content-max-desktop);
margin: 0 auto;
}
/* CSS Phone Mockup — ascuns la ORICE lățime.
Pe mobil era deja: nu spunea nimic în plus față de cei trei pași, dar împingea conținutul
real cu ~420px în jos. Pe desktop scoaterea lui lasă capitolul să se așeze pe o singură
coloană, cu text mai mare și titlu centrat.
Markup-ul rămâne în pagină, iar regulile de mai jos rămân cu el: sunt inofensive cât timp
elementul nu se afișează, și ar trebui oricum recalibrate dacă se readuce.
`animations.js` verifică `offsetParent !== null` înainte să pornească bara de progres,
deci nu rulează niciun `setInterval` pentru ceva invizibil. */
.phone-wrap { display: none; }
/* Ramă neagră, ecran alb. Rama e desenată din `border` + inelul `inset` al umbrei, deci
ambele trebuie să fie închise ca să arate ca un telefon real, nu ca un contur.
Ecranul rămâne alb: pe portocaliu e contrastul maxim și partea care poartă conținutul.
Umbra exterioară e adâncă fiindcă pe un fundal saturat una discretă dispare complet și
telefonul pare lipit. */
.phone {
width: 252px; height: 480px;
border: 2.5px solid var(--phone-frame);
border-radius: 40px;
background: #fff;
box-shadow: 0 24px 60px rgba(90,25,0,0.34), inset 0 0 0 6px var(--phone-frame);
position: relative;
/* Fără `overflow: hidden` aici: butoanele laterale trebuie să iasă în afara conturului,
exact ca pe un telefon real. Tăierea s-a mutat pe `.phone-screen`, care e singurul
care chiar are conținut ce ar putea depăși colțurile rotunjite. */
display: flex; flex-direction: column;
}
/* Butoane laterale. Înălțimile sunt în procente din telefon, ca să se scaleze singure
între desktop, panoul comprimat și mobil; grosimea rămâne în px, altfel ar deveni
invizibile pe ecranele mici. Aceeași culoare ca rama — o singură piesă. */
.phone-btn {
position: absolute;
background: var(--phone-frame);
border-radius: 2px;
pointer-events: none;
}
.phone-btn--silent { left: -2.5px; top: 16.5%; width: 2.5px; height: 4%; }
.phone-btn--vol-up { left: -3px; top: 24%; width: 3px; height: 8.5%; }
.phone-btn--vol-down { left: -3px; top: 34.5%; width: 3px; height: 8.5%; }
.phone-btn--power { right: -3px; top: 29%; width: 3px; height: 12.5%; }
/* Insula rămâne în tonul ramei, coborâtă în ecran — poziția e ce o face să se citească
corect, nu culoarea. */
.phone-notch {
width: 62px; height: 15px;
background: var(--phone-frame);
border-radius: var(--radius-pill);
margin: 13px auto 0; flex-shrink: 0;
position: relative; z-index: 2;
}
/* Fără fundal și fără margini proprii: albul vine de la `.phone`, iar rama e inelul
`inset` al acesteia. Un fundal alb pus aici s-ar picta PESTE inelul respectiv (fundalul
unui copil acoperă umbra interioară a părintelui) și rama s-ar rupe pe laturi. */
.phone-screen {
flex: 1; display: flex; flex-direction: column;
padding: 14px;
/* Preia tăierea de la `.phone`. Fără fundal propriu — albul vine de la `.phone`, iar un
fundal pus aici s-ar picta peste inelul `inset` care desenează rama. */
overflow: hidden;
border-radius: 0 0 34px 34px;
}
/* Bara asta era portocalie, iar portocaliu pe portocaliu se pierde. Ia tonul ramei, ca
telefonul să arate ca un obiect dintr-o singură bucată. Bara de progres și procentul
rămân portocalii — sunt mici, stau pe alb, și țin brandul viu în interiorul ecranului. */
.phone-header {
background: var(--phone-frame);
border-radius: 10px;
height: 50px;
display: flex; align-items: center;
padding: 0 15px; margin-bottom: 14px; flex-shrink: 0;
}
/* Albe pe griul deschis al barei: e singura pereche care dă contrast în ambele sensuri —
bara se distinge de ecranul alb, iar conținutul ei se distinge de bară. */
.phone-header-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.85); margin-right: 9px; }
.phone-header-line { height: 7px; background: #FFFFFF; border-radius: 3px; flex: 1; }
.phone-line {
height: 9px; background: var(--phone-ui);
border-radius: 4px; margin-bottom: 9px;
}
.phone-line.short { width: 60%; }
.phone-line.shorter { width: 40%; }
.phone-card-sim {
background: var(--phone-ui-soft); border: 1px solid #EFEAE4;
border-radius: 10px; padding: 11px; margin-bottom: 13px;
}
.phone-card-sim .phone-line { margin-bottom: 7px; }
.phone-card-sim .phone-line:last-child { margin-bottom: 0; }
.phone-progress-wrap {
margin-top: auto;
padding-top: 11px;
border: 1px solid #EFEAE4;
border-radius: 13px;
background: #fff;
padding: 11px;
}
.phone-progress-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
}
.phone-progress-label {
font-size: 10px;
color: var(--ink-soft);
font-weight: 600;
letter-spacing: 0.1px;
font-family: 'Manrope', sans-serif;
}
.phone-progress-percent {
font-size: 10px;
color: var(--orange);
font-weight: 700;
font-family: 'Manrope', sans-serif;
}
.phone-progress-bg {
height: 8px;
background: var(--phone-ui);
border-radius: var(--radius-pill);
overflow: hidden;
border: 1px solid #E4DED7;
}
.phone-progress-bar {
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--orange) 0%, #FF9A52 100%);
border-radius: var(--radius-pill);
position: relative;
transform: scaleX(0);
transform-origin: left center;
}
.phone-progress-glow {
position: absolute;
top: 0;
bottom: 0;
right: -18px;
width: 18px;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 100%);
}
.phone-progress-note {
margin-top: 7px;
font-size: 9px;
color: var(--muted);
font-family: 'Manrope', sans-serif;
}
/* Steps */
.steps { margin-top: 8px; }
.step {
display: flex; gap: 20px; align-items: flex-start;
position: relative;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
left: 15px; top: 44px;
width: 2px; height: calc(100% - 20px);
border-left: 2px dashed rgba(231, 223, 215, 0.5);
}
/* Cerc plin cu cifră portocalie. Nu alb pur: pastilele erau cele mai dure puncte de pe tot
blocul, iar un gri cald foarte deschis le așază lângă telefon în loc să le smulgă din
compoziție. Suficient de deschis cât cifra portocalie să rămână lizibilă. */
.step-num {
width: 32px; height: 32px;
border-radius: 50%;
background: #FBF8F5;
border: none;
color: var(--orange);
font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.step-body { padding-bottom: 40px; }
.step-body-last { padding-bottom: 0; }
.step-body h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.step-body p { font-size: 14px; color: var(--muted); line-height: 1.55; }
/* ── STATS (sub-bloc în capitolul portocaliu) ──
Era o secțiune proprie, o bandă scurtă pe alb între "Cum funcționează" și "Avantaje".
Acum închide cei 3 pași, în același panou. Linia de sus e singurul separator din
capitol și e deliberată — nu o cusătură între două cutii opace. */
.how-stats {
text-align: center;
max-width: var(--content-max-desktop);
margin: clamp(52px, 6vw, 76px) auto 0;
padding-top: clamp(36px, 4vw, 52px);
border-top: 1px solid rgba(231, 223, 215, 0.26);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0;
max-width: var(--content-max-desktop); margin: 0 auto;
}
.stat-item {
padding: 32px 24px;
border-right: 1px solid rgba(231, 223, 215, 0.28);
}
.stat-item:last-child { border-right: none; }
.stat-num {
font-family: 'Sora', sans-serif;
font-size: 52px; font-weight: 800;
color: var(--on-orange-strong); letter-spacing: -2px; line-height: 1;
margin-bottom: 6px;
}
.stat-label { font-size: 13px; color: var(--on-orange-soft); font-weight: 500; }
/* ── WHY US ── */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px;
max-width: var(--content-max-desktop);
margin: 0 auto;
}
.why-card {
padding: 32px 28px;
border-radius: var(--radius-md);
transition: background 0.2s;
}
.why-card:hover { background: var(--surface); }
.why-icon {
width: 40px; height: 40px;
background: var(--orange-light); border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.why-icon svg { color: var(--orange); }
.why-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.why-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }
/* ── TESTIMONIALS ── */
/* Era o secțiune separată; acum e a doua jumătate a panoului „dovadă", sub Avantaje.
Fundalul îl dă panoul, deci aici rămân doar tăierea marquee-ului și alinierea. */
.proof-testimonials {
overflow: hidden;
text-align: center;
margin-top: clamp(56px, 6vw, 84px);
}
/* Titlul e centrat, dar `.title-line` e un bloc de 40px lățime, pe care `text-align` nu-l
mișcă — rămânea lipit de marginea stângă. Era așa și înainte (pe desktop se centra doar
la Servicii); acum, lângă Avantaje care e aliniat la stânga, nepotrivirea sare în ochi. */
.proof-testimonials .title-line { margin-left: auto; margin-right: auto; }
.testi-marquee {
overflow: hidden;
max-width: 100vw;
margin: 0 auto;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-track {
display: flex;
gap: 20px;
width: max-content;
}
.testi-card {
flex: 0 0 320px;
width: 320px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 24px 22px;
text-align: left;
}
.stars { color: var(--orange); font-size: 15px; margin-bottom: 14px; letter-spacing: 2px; }
.testi-text {
font-size: 14px; color: var(--text);
line-height: 1.65; margin-bottom: 20px;
font-style: italic;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.65em * 4);
}
.testi-author { font-size: 13px; font-weight: 600; }
.testi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.testi-source {
display: inline-block;
margin-top: 20px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.testi-source:hover { color: var(--orange); border-color: rgba(252, 81, 9, 0.4); }
/* ── CONTACT ── */
.contact-section {
background: linear-gradient(140deg, #F4510A 0%, #E3450A 56%, #D6400A 100%);
/* Același alb cald ca pe celălalt bloc portocaliu — cele două trebuie să se citească ca
începutul și sfârșitul aceleiași idei, nu ca două tratamente diferite. */
color: var(--on-orange-strong);
text-align: left;
/* Sus mai mult decât jos: contactul urcă peste ultimul panou, deci muchia lui de sus e
prima care se vede și are nevoie de aer ca să se citească drept capitol nou, nu ca o
continuare a Recenziilor. */
padding: 116px 5vw var(--section-space-desktop);
border-top: 1px solid rgba(0,0,0,0.03);
}
.contact-shell {
max-width: var(--content-max-desktop);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
gap: clamp(20px, 4vw, 44px);
align-items: stretch;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 24px;
padding: clamp(22px, 3vw, 34px);
box-shadow: 0 14px 30px rgba(120,30,0,0.16);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.contact-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-section h2 {
font-family: 'Sora', sans-serif;
font-size: clamp(26px, 4vw, 40px);
font-weight: 800; letter-spacing: -1px;
max-width: 640px; margin: 0 0 14px;
line-height: 1.15;
}
.contact-section p,
.contact-section .contact-buttons,
.contact-section .schedule {
max-width: 560px;
margin-left: 0;
margin-right: 0;
}
.contact-section p {
font-size: 16px; opacity: 0.92;
margin-bottom: 28px;
}
.contact-buttons {
display: flex; flex-wrap: wrap; gap: 14px;
justify-content: flex-start;
margin-bottom: 22px;
}
.btn-white {
background: #fff; color: var(--orange);
border: none; border-radius: var(--radius-pill);
padding: 14px 28px; font-size: 15px; font-weight: 700;
cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: opacity 0.2s, transform 0.15s;
}
.btn-white:hover { opacity: 0.92; transform: translateY(-1px); }
.schedule {
font-size: 14px; opacity: 0.8;
display: flex; align-items: center; gap: 8px;
justify-content: flex-start;
}
.schedule-dot {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,0.6);
}
.contact-map-wrap {
width: 100%;
max-width: none;
margin: 0;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.34);
box-shadow: 0 12px 24px rgba(120,30,0,0.14);
background: rgba(255,255,255,0.12);
}
.contact-map-wrap iframe {
width: 100%;
height: 100%;
min-height: 320px;
border: 0;
display: block;
filter: saturate(0.9) contrast(1.02);
}
.map-consent-placeholder {
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
text-align: center;
padding: 20px;
background: rgba(255,255,255,0.14);
color: #fff;
}
.map-consent-placeholder p {
margin: 0;
font-size: 14px;
line-height: 1.5;
max-width: 420px;
}
.map-consent-btn {
border: 1px solid rgba(255,255,255,0.5);
background: #fff;
color: var(--orange);
border-radius: var(--radius-pill);
padding: 10px 16px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.map-consent-btn:hover {
opacity: 0.9;
transform: translateY(-1px);
border-color: rgba(255,255,255,0.8);
}
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 250;
background: rgba(19, 19, 19, 0.96);
color: #fff;
border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--radius-md);
padding: 14px;
display: grid;
gap: 12px;
box-shadow: 0 12px 28px rgba(0,0,0,0.28);
opacity: 0; transform: translateY(12px); visibility: hidden; pointer-events: none;
transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
}
.cookie-banner.is-visible {
opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
transition: opacity 0.24s ease, transform 0.24s ease;
}
.cookie-banner p {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: rgba(255,255,255,0.92);
}
.cookie-banner a {
color: #ffb58e;
text-decoration: underline;
}
.cookie-banner-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cookie-btn {
border: 1px solid rgba(255,255,255,0.28);
border-radius: var(--radius-pill);
padding: 8px 14px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.cookie-btn:hover {
transform: translateY(-1px);
}
.cookie-btn-accept {
background: var(--orange);
color: #fff;
border-color: var(--orange);
}
.cookie-btn-accept:hover {
opacity: 0.92;
}
.cookie-btn-reject {
background: transparent;
color: #fff;
}
.cookie-btn-reject:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.4);
}
@media (min-width: 769px) {
.cookie-banner {
max-width: 760px;
left: 24px;
right: auto;
bottom: 24px;
}
}
/* ── FOOTER ── */
footer {
border-top: 1px solid rgba(0,0,0,0.06);
background: linear-gradient(180deg, #FAF8F6 0%, #F6F3EF 100%);
padding: 22px 5vw 30px;
}
.footer-shell {
max-width: var(--content-max-desktop);
margin: 0 auto;
border: 1px solid #EDE8E3;
border-radius: 18px;
padding: 18px 20px;
background: rgba(255,255,255,0.72);
display: grid;
grid-template-columns: minmax(240px, 1fr) auto;
align-items: center;
gap: 14px 18px;
}
.footer-brand {
display: flex;
align-items: center;
gap: 14px;
}
.footer-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.footer-logo img {
display: block;
height: 38px;
width: auto;
}
.footer-tagline {
font-size: 13px;
color: #6E6660;
line-height: 1.4;
margin: 0;
max-width: 330px;
}
.footer-copy {
font-size: 12px;
color: #7B746F;
grid-column: 1 / -1;
border-top: 1px solid #EEE7E1;
padding-top: 10px;
margin-top: 2px;
}
.footer-socials {
display: flex;
gap: 10px;
justify-self: end;
}
.footer-legal {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.footer-legal a {
font-size: 13px;
color: #6F6862;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-legal a:hover {
color: var(--orange);
border-color: rgba(252, 81, 9, 0.45);
}
.footer-trust {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.footer-trust img {
height: 34px;
width: auto;
display: block;
border: 1px solid #E8DFD6;
border-radius: var(--radius-sm);
background: #fff;
padding: 4px 8px;
}
.footer-socials a {
color: #7C746E;
text-decoration: none;
transition: color 0.2s, transform 0.15s, border-color 0.2s, background 0.2s;
line-height: 1;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
border: 1px solid #E8DFD6;
background: #FFFDFC;
display: inline-flex;
align-items: center;
justify-content: center;
}
.footer-socials a:hover {
color: var(--orange);
border-color: #E4C4AE;
background: var(--orange-light);
transform: translateY(-1px);
}
.footer-socials svg { display: block; }
/* ── PAGE WASH (desktop) ──
Previously each section painted its own gradient. That can't be made seamless: section
A's bottom edge resolves to one colour and section B's top edge to another, so every
boundary is a visible step — worst between Stats (warm at its BOTTOM, centre at 82%)
and Why-us (cool at its top). Add the 1px `border-top` hairlines and the grain ending
at the hero, and you get the lines in the screenshots.
So the page is painted ONCE, on , and the sections are made transparent. With no
opaque section boxes there are no edges left to mismatch — the wash is one continuous
surface and the warm blooms still migrate down it, which is what gave the depth.
Percentages here resolve against the full document height, so the blooms are spread
over the whole scroll rather than repeating per section.
Contact keeps its orange (a deliberate colour block, not a seam) and the footer keeps a
soft tint that fades in from transparent.
Applies at every width. The bloom sizes are percentages of the document box, so on a
narrow tall phone they simply resolve to a taller, narrower wash — the composition
adapts instead of needing a second set of values. */
body {
background-color: #FDFCFB;
background-image:
radial-gradient(ellipse 62% 13% at 16% 23%, rgba(255, 243, 232, 0.52), rgba(255, 243, 232, 0) 72%),
radial-gradient(ellipse 58% 12% at 86% 41%, rgba(255, 241, 228, 0.45), rgba(255, 241, 228, 0) 72%),
radial-gradient(ellipse 64% 13% at 28% 59%, rgba(255, 244, 234, 0.45), rgba(255, 244, 234, 0) 72%),
radial-gradient(ellipse 56% 12% at 78% 76%, rgba(255, 242, 230, 0.34), rgba(255, 242, 230, 0) 72%);
background-repeat: no-repeat;
}
/* ── STIVA DE PANOURI ──
Nota din 08-12 §3c rămâne adevărată: două cutii opace lipite au întotdeauna o muchie,
și de-asta secțiunile obișnuite sunt transparente peste spălarea de pe .
Panourile sunt excepția deliberată. Ca să poată aluneca unul peste altul trebuie să fie
OPACE — un panou transparent ar lăsa să se vadă prin el panoul rămas lipit dedesubt.
Muchia lor nu mai e o cusătură accidentală, ci marginea desenată a unui capitol: colț
rotunjit sus și o umbră care cade în SUS, peste panoul de dedesubt.
Doar contactul și hero-ul mai stau direct pe spălare; între panouri, spălarea se vede
în colțurile rotunjite, la fiecare îmbinare. */
.panel {
position: relative;
border-radius: 28px 28px 0 0;
padding: clamp(64px, 7vw, 104px) 5vw;
/* Liniuțele de 1px dintre secțiuni erau exact cusăturile eliminate la 08-12. Acum
muchia o desenează colțul rotunjit plus o umbră care cade în SUS, peste panoul de
dedesubt. Panourile NU primesc `overflow: hidden` — ar tăia chiar umbra asta. */
border-top: none;
box-shadow: 0 -18px 44px rgba(74, 32, 5, 0.10);
/* Retragerea sub panoul următor (animations.js) trebuie să tragă panoul spre marginea
lui de sus, care e singura vizibilă în acel moment. Cu origine centrală, conținutul
s-ar ridica în timp ce e acoperit. */
transform-origin: center top;
}
.panel--services { background: #FFFDFB; }
.panel--how {
/* Portocaliul LUMINOS. Contactul păstrează varianta adâncă (140°, #F4510A→#D6400A):
două blocuri portocalii identice s-ar citi ca o greșeală de copy-paste, așa se
citesc ca începutul și sfârșitul aceleiași idei. */
background: linear-gradient(165deg, #FC5109 0%, #EE4A08 62%, #E3450A 100%);
color: #fff;
}
.panel--proof { background: #FAF7F3; }
/* Grain pe fiecare panou. `body::before` e `fixed; z-index: -1`, deci un panou opac îl
acoperă complet — fără stratul ăsta, exact blocurile noi ar fi singurele suprafețe
plate de pe pagină. Aceeași lipsă exista deja, netratată, pe blocul de contact. */
.panel::after,
.contact-section::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("Photos/grain.webp");
background-size: 160px 160px;
background-repeat: repeat;
opacity: 0.3;
border-radius: inherit;
}
/* Pe portocaliu se aplică aceeași regulă din 08-12 §3b, cu alt tile — NU alt mod de
compunere. Tile-ul crem are media 0.97: peste portocaliu, alfa simplu l-ar trage spre
roz-spălăcit, exact eșecul de la 08-12 în oglindă. Iar `soft-light` nu salvează
situația: identitatea lui e un strat gri 0.5, deci un tile de 0.97 acționează ca o
trecere de albire uniformă — decolorează în loc să textureze.
Deci: un al doilea tile, cu media chiar pe portocaliu (#FC5109, zgomot ±30 doar pe
luminanță). Media fiind deja culoarea de dedesubt, nu schimbă tonul, deci opacitatea
poate urca destul cât textura să se vadă. Fără blend mode, fără filtru. */
.panel--how::after,
.contact-section::after {
background-image: url("Photos/grain-orange.webp");
/* Puțin peste cel de pe suprafețele deschise: pe o bază la luminanță medie, aceeași
amplitudine de zgomot se citește mai slab decât pe aproape-alb. */
opacity: 0.34;
}
/* Conținutul stă peste ambele pseudo-elemente. */
.panel > *,
.contact-section > * { position: relative; z-index: 1; }
/* Lipirea propriu-zisă e opt-in: animations.js pune `stack-on` pe abia după ce a
calculat `top`-ul fiecărui panou. Fără JS, cu prefers-reduced-motion sau sub 769px,
panourile rămân blocuri normale unul sub altul — cu fundal și grain, dar fără sticky. */
/* Containerul de lipire. Cele trei panouri trebuie să fie FRAȚI aici: blocul lor
conținător e `.stack`, deci fiecare rămâne lipit până la capătul stivei, în timp ce
următoarele alunecă peste el. Dacă fiecare panou ar avea wrapper-ul lui, cursa de
lipire ar fi zero și nu s-ar mai prinde niciunul.
⚠ `.stack` nu are voie să primească NICIODATĂ `overflow` (altul decât visible),
`transform`, `filter`, `perspective`, `will-change` sau `contain`: oricare dintre ele
l-ar transforma în container de scroll sau în bloc conținător și ar anula toate
lipirile, fără nicio eroare. */
.stack { position: relative; }
/* Lipirea e valabilă la ORICE lățime, inclusiv pe telefon. `top` e suprascris per panou
din animations.js: un panou mai înalt decât ecranul trebuie să se lipească cu marginea
de JOS la baza ferestrei (top negativ), altfel partea lui de jos nu se vede niciodată. */
html.stack-on .panel {
position: sticky;
top: 0;
}
/* ── MOBIL ──
Pe telefon panourile NU sunt forțate la înălțimea ecranului. Un capitol întreg —
șase carduri, sau telefonul plus trei pași plus patru cifre — nu încape într-un ecran
de ~650px utili, iar a-l îndesa acolo ar însemna text de 10px. Aici panoul curge
normal cât e nevoie, se lipește când i se termină conținutul, iar următorul alunecă
peste el: aceeași mecanică, doar fără constrângerea de o singură fereastră.
Fără `min-height` tocmai de-asta: pe mobil ar fi și inutilă, și periculoasă —
`100vh` nu ține cont de bara de adresă care apare și dispare, deci ar produce un salt
de layout la fiecare schimbare de direcție a scroll-ului.
Pauza dintre capitole e mai scurtă decât pe desktop: 46vh dintr-un ecran de telefon
înseamnă aproape trei sferturi de gest de scroll petrecut pe un capitol deja citit. */
@media (max-width: 768px) {
html.stack-on .stack > .panel:not(:last-child) { margin-bottom: 16vh; }
html.stack-on .panel {
border-radius: 20px 20px 0 0;
/* Panoul are 64px de padding, bara fixă are 68 — cât timp secțiunile curgeau normal,
titlul doar trecea pe sub bară o clipă. Lipit, rămâne tăiat acolo permanent. */
padding-top: 88px;
}
/* Serviciile NU primeau regula de mai sus: `#services { padding-top: 72px }` din blocul
`max-width: 1100px` are un id, deci specificitate (1,0,0), și bate `html.stack-on
.panel` (0,2,1) — indiferent de ordinea în fișier. Rezultatul era un titlu la 4px sub
bara fixă de 68px, față de 20px la celelalte două panouri. Selectorul de aici include
id-ul, ca să câștige. */
html.stack-on #services { padding-top: 88px; }
/* Marginea de jos rămăsese la 64px: la runda anterioară am suprascris pe mobil doar
`padding-top`. Contează mai mult decât pare — panourile fiind lipite, următorul urcă și
acoperă DINSPRE JOS, deci ultimul element e primul înghițit. Necondiționat de
`stack-on`: și fără stivuire panoul respiră mai bine așa. */
.panel { padding-bottom: 96px; }
}
@media (min-width: 769px) {
/* Garantează că un panou lipit acoperă tot ecranul. Fără asta, pe un monitor înalt
un panou mai scund decât fereastra ar lăsa să se vadă pe sub el panoul dinainte,
exact în pauza adăugată mai jos. */
html.stack-on .panel { min-height: 100vh; }
/* ── Timpul de ședere ──
Fără regulile astea, stivuirea nu se vede aproape deloc: `top` e calculat ca
`fereastră − înălțime`, deci un panou termină de intrat exact în cadrul în care
următorul începe să-l acopere. Rezultatul măsurat era zero pauză — capitolul
portocaliu era acoperit înainte ca cifrele din josul lui să apuce să fie citite.
Marginea adaugă distanță de scroll ÎNTRE panouri fără să le mărească înălțimea:
panoul lipit acoperă fereastra (min-height de mai sus), deci spațiul nu se vede —
se simte doar ca un răgaz în care capitolul stă pe loc înainte să fie acoperit.
Doar ÎNTRE panouri. Ultimul nu primește pauză: acolo nu mai urmează niciun panou
care s-o acopere, deci s-ar vedea exact ca ce e — un ecran gol între recenzii și
blocul de contact. Pauza lui o face contactul, care urcă peste el la fel ca un
panou, fiindcă e opac. */
html.stack-on .stack > .panel:not(:last-child) { margin-bottom: 46vh; }
/* ── COMPRESIE PENTRU STIVUIRE ──
Un panou lipit trebuie să încapă ÎNTREG în fereastră. Altfel `top` iese negativ
(vezi animations.js) și capitolul se lipește cu capul tăiat sub bară — exact ce se
vedea la Servicii și la „Cum funcționează", unde titlul dispărea.
Panoul devine înalt cât fereastra și își centrează conținutul pe verticală, deci
spațiul rămas se împarte egal sus/jos în loc să se adune la coadă. `padding-top`
de 96px ține conținutul sub bara fixă de 68px.
Toate reducerile de mai jos sunt condiționate de `stack-on`: pe mobil și în cazul
plaselor de siguranță, unde secțiunile curg normal una sub alta, dimensiunile
generoase rămân neschimbate. */
html.stack-on .panel {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
/* Bara de navigație e `fixed` și acoperă primii 68px ai panoului lipit. Conținutul e
centrat în cutia panoului, deci cu padding-uri apropiate spațiul VIZIBIL ieșea
inegal: sus rămâneau 90−68 = 22px, jos 54. De-asta capitolul părea lăsat în jos.
Regula: padding-top = 68 + X, padding-bottom = X. Aici X = 40, deci deasupra și
dedesubtul conținutului rămân exact 40px vizibili. */
padding-top: 108px;
padding-bottom: 40px;
}
html.stack-on #services { padding-top: 108px; }
/* Panoul e container flex, iar acolo `margin: 0 auto` (pe care blocurile astea îl au
din regulile de bază) nu mai înseamnă „întinde-te și centrează-te", ci „strânge-te
la conținut și centrează-te". `width: 100%` le readuce comportamentul de bloc:
lățime plină, plafonată de propriul `max-width`. */
html.stack-on .services-layout,
html.stack-on .how-grid,
html.stack-on .how-stats { width: 100%; }
/* Titlul era plafonat la 40px de `clamp(28px, 4vw, 40px)`. Pe un laptop de 16" ajungea
la doar 1.6× față de subtitlurile pașilor (25px), deci se citea ca un rând ceva mai
gros, nu ca titlu de capitol. Ridicat plafonul; minimul rămâne pentru desktopurile
înguste. */
html.stack-on .section-title { font-size: clamp(34px, 3.4vw, 52px); }
html.stack-on .title-line { margin-top: 10px; margin-bottom: 26px; }
html.stack-on .section-label { margin-bottom: 8px; }
/* Servicii: șase carduri una sub alta erau partea cea mai înaltă din pagină.
`min-height: 0` fiindcă la conținutul ăsta cardul e oricum mai înalt decât pragul de
108px din regula de bază — pragul doar bloca micșorarea. */
html.stack-on .services-grid { gap: 6px; }
html.stack-on .service-card { min-height: 0; padding: 9px 16px; }
html.stack-on .service-card h3 { font-size: 14px; }
html.stack-on .service-card p { font-size: 12px; line-height: 1.4; margin-top: 2px; }
html.stack-on #services .title-line { margin-bottom: 16px; }
/* Regula de bază e `#services .service-tabs`, cu id: una scrisă doar pe clasă ar fi
pierdut în fața ei oricât de jos ar fi stat în fișier. */
html.stack-on #services .service-tabs { margin-bottom: 20px; }
/* Imaginea de categorie dicta înălțimea rândului: la 640px lățime ieșea mai înaltă
decât toată coloana de carduri. */
/* Coloanele erau 1fr/1fr cu un gap de până la 64px, deci între ultimul card și imagine
rămâneau peste 200px de gol. Cardurile primesc partea mai mare, gap-ul se strânge,
iar containerul se lărgește peste cei 1200px impliciți ca blocul să pornească mai
spre stânga. */
html.stack-on .services-layout {
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.58fr);
gap: clamp(20px, 2.4vw, 38px);
max-width: 1320px;
}
/* Plafonare pe ÎNĂLȚIME, nu pe lățime. Cele trei ilustrații au proporții foarte
diferite (telefonul e pătrat, tableta ~1:1.25, laptopul ~1:1.47), așa că aceeași
lățime maximă producea înălțimi între 480 și 763px — panoul încăpea pe „Telefoane"
și ieșea cu 190px pe „Laptop-uri". Cu un plafon de înălțime, toate cele trei
categorii ocupă exact același spațiu vertical, indiferent de formă. */
/* Imaginea se lipește de începutul coloanei ei, nu se centrează în ea: plafonată pe
înălțime, e mult mai îngustă decât coloana, iar centrarea împingea golul exact între
carduri și ilustrație. */
html.stack-on .services-media { justify-content: flex-start; }
html.stack-on .services-media picture { max-width: 100%; }
html.stack-on .services-media img {
width: auto;
max-width: 100%;
/* Plafon legat de fereastra, nu fix: ilustratia e inalta si ingusta dupa decupare, deci
inaltimea e cea care ii da marimea. Un numar fix ori era mic pe monitoare mari, ori
scotea panoul din ecran pe cele de 900px. */
max-height: min(660px, 62vh);
/* Lipită de marginea stângă a coloanei, nu centrată în ea: `` ocupă toată
coloana, deci o imagine centrată împingea golul exact între carduri și ilustrație —
adică fix acolo unde nu-l vrem. */
margin-inline: 0;
}
/* Cum funcționează. Cu două coloane egale, telefonul (218px) plutea centrat într-o
coloană de 600px: îl împingea spre marginea stângă și lăsa peste 200px de gol până la
text. Coloana lui se strânge în jurul lui. */
/* Fără mockup rămâne o singură coloană. Lățimea e plafonată la 900px: pașii sunt text
curgător, iar pe un monitor lat un rând de 1200px devine greu de urmărit cu ochiul.
`justify-items: center` centrează coloana în panou. */
html.stack-on .how-grid {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 0;
}
html.stack-on .how-right {
max-width: 900px;
width: 100%;
}
/* Titlul capitolului, centrat — ca la Servicii, Avantaje și Recenzii. Pașii de dedesubt
rămân aliniați la stânga: sunt o listă numerotată, iar centrarea ar rupe coloana
cifrelor. */
html.stack-on .how-right .section-title { text-align: center; }
html.stack-on .how-right .title-line { margin-inline: auto; }
/* Text mai mare, acum că spațiul lăsat de mockup e liber. Cifrele cresc odată cu el, ca
raportul dintre pastilă și rândul de text să rămână același. */
html.stack-on .step { gap: 26px; }
html.stack-on .step-num { width: 46px; height: 46px; font-size: 18px; }
html.stack-on .step:not(:last-child)::after { left: 22px; top: 58px; }
html.stack-on .step-body h4 { font-size: 25px; margin-bottom: 10px; }
html.stack-on .step-body p { font-size: 20px; line-height: 1.6; }
/* Pașii se distanțează ca să umple capitolul: fără mockup, trei pași strânși lăsau
~300px de gol sub ei. Valoarea e plafonată de constrângerea de încadrare — panoul
trebuie să rămână exact cât fereastra. */
html.stack-on .step-body { padding-bottom: 58px; }
/* ⚠ Obligatoriu: regula de deasupra (0,2,1) bate `.step-body-last` (0,1,0), deci ultimul
pas primea și el 58px de padding invizibil. Acela era golul care făcea capitolul să
pară greu la bază — spațiu mort între ultimul rând de text și linia de separare. */
html.stack-on .step-body-last { padding-bottom: 0; }
html.stack-on .steps { margin-top: 26px; }
/* Cifrele cresc odată cu restul capitolului, ca banda de jos să nu rămână mărunțită
sub un text care s-a mărit. */
html.stack-on .panel--how .stat-num { font-size: 46px; }
html.stack-on .panel--how .stat-label { font-size: 15px; }
html.stack-on .phone-screen { padding: 12px; }
html.stack-on .phone-header { height: 42px; margin-bottom: 11px; }
html.stack-on .phone-line { height: 8px; margin-bottom: 7px; }
html.stack-on .phone-card-sim { padding: 9px; margin-bottom: 10px; }
html.stack-on .how-stats { margin-top: 52px; padding-top: 38px; }
html.stack-on .stat-item { padding: 16px 20px; }
html.stack-on .stat-num { font-size: 40px; margin-bottom: 3px; }
/* Avantaje + Recenzii */
/* Grila avea `max-width: 1200px` centrată, în timp ce titlul de deasupra ei curge până
la padding-ul panoului: pe un ecran lat, cardurile porneau cu ~80px mai la dreapta
decât propriul titlu. În panou nu mai e nevoie de al doilea container — lățimea o dă
panoul, deci ambele pornesc din același loc. */
html.stack-on .why-grid {
max-width: none; width: 100%; margin-left: 0; margin-right: 0;
/* Patru coloane fixe, nu `auto-fill`: sub ~1100px cele patru carduri treceau pe două
rânduri și panoul creștea cu un rând întreg, adică exact cât trebuia să economisim.
Un rând mai îngust e mai ieftin decât un rând în plus. */
grid-template-columns: repeat(4, minmax(0, 1fr));
}
html.stack-on .why-card { padding: 16px 20px; }
html.stack-on .why-icon { margin-bottom: 10px; width: 34px; height: 34px; }
/* În panou, Recenziile sunt a doua jumătate a aceluiași capitol, nu o secțiune nouă:
distanța dintre cele două blocuri crește ca să se citească drept două părți, nu una
lipită de alta. Titlul rămâne centrat (regula de bază) — aici se reglează doar
distanța. Cardurile rămân un marchiz pe toată lățimea. */
/* Trecerea dintre cele două jumătăți ale panoului: Avantajele se terminau prea aproape de
Recenzii ca să se citească drept capitole separate. Valorile sunt plafonate de spațiul
liber măsurat în panou (75px la 1440x900, 95px la 1512x800) — panoul trebuie să încapă
în continuare exact într-o fereastră. */
html.stack-on .proof-testimonials { margin-top: 116px; }
/* Titlul capitolului „Avantaje" se centrează ca celelalte. Copil DIRECT, obligatoriu:
`#why { text-align: center }` ar centra și textul din carduri, care trebuie să rămână
aliniat la stânga. Iar `.title-line` e un bloc de 40px, pe care `text-align` nu-l mișcă
— are nevoie de margini auto. */
html.stack-on #why > .section-title { text-align: center; }
html.stack-on #why > .title-line { margin-inline: auto; }
html.stack-on .testi-card { padding: 15px 18px; }
html.stack-on .testi-text {
-webkit-line-clamp: 3;
line-clamp: 3;
min-height: calc(1.65em * 3);
margin-bottom: 14px;
}
html.stack-on .testi-source { margin-top: 14px; }
}
/* Al doilea nivel de compresie, pe ÎNĂLȚIMEA ferestrei, nu pe lățime. Un laptop de 16"
ajunge la ~800px utili, unde reglajele de mai sus mai lasă câteva zeci de pixeli pe
dinafară. Separat, ca un monitor mare să nu fie strâns degeaba. */
@media (min-width: 769px) and (max-height: 840px) {
/* Aceeasi regula: 68 (bara) + 28 sus, 28 jos. */
html.stack-on .panel { padding-top: 96px; padding-bottom: 28px; }
html.stack-on #services { padding-top: 96px; }
/* Treapta intermediara (781-840px inaltime, tipic un laptop de 16"): titlul are voie
sa creasca, dar nu pana la valoarea de pe monitoarele mari. */
html.stack-on .section-title { font-size: 38px; }
html.stack-on .title-line { margin-top: 8px; margin-bottom: 18px; }
html.stack-on #services .title-line { margin-bottom: 12px; }
html.stack-on #services .service-tabs { margin-bottom: 14px; }
html.stack-on .services-grid { gap: 5px; }
html.stack-on .service-card { padding: 7px 14px; }
html.stack-on .service-card p { font-size: 11.5px; }
html.stack-on .services-media img { max-height: 450px; }
html.stack-on .phone { width: 198px; height: 368px; }
html.stack-on .step-body { padding-bottom: 20px; }
html.stack-on .how-stats { margin-top: 28px; padding-top: 22px; }
html.stack-on .stat-item { padding: 12px 18px; }
html.stack-on .stat-num { font-size: 34px; }
html.stack-on .why-card { padding: 13px 18px; }
html.stack-on .why-icon { margin-bottom: 8px; }
html.stack-on .proof-testimonials { margin-top: 68px; }
html.stack-on .testi-card { padding: 13px 16px; }
html.stack-on .testi-text { margin-bottom: 10px; }
}
/* Ultimul nivel: ecrane foarte scunde (1280×720 și similare). Doar Serviciile mai ies —
sunt șase carduri una sub alta, cel mai rigid conținut din pagină. */
/* Sub 790px înălțime titlul revine la valoarea mică. Pragul e aici, nu la 760, fiindcă
ecranele de 768px (1366×768, 1024×768) sunt exact cele pe care panoul de dovadă — cu
două titluri — iese din fereastră dacă titlul crește. */
@media (min-width: 769px) and (max-height: 790px) {
html.stack-on .section-title { font-size: 30px; }
}
@media (min-width: 769px) and (max-height: 760px) {
html.stack-on .services-grid { gap: 4px; }
html.stack-on .service-card { padding: 5px 12px; }
html.stack-on .services-media img { max-height: 375px; }
html.stack-on .proof-testimonials { margin-top: 44px; }
}
/* Desktop îngust (769–1100px). Aici problema nu era mărimea textului, ci împărțirea
coloanelor: regula de bază rezervă până la 560px imaginii, așa că la 1024px cardurilor
le rămâneau ~338px, descrierea trecea pe trei rânduri și înălțimea creștea cu peste
100px. Cardurile primesc acum partea mai mare — imaginea e oricum plafonată mai jos. */
@media (min-width: 769px) and (max-width: 1100px) {
html.stack-on .services-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
html.stack-on .service-card { padding: 6px 12px; }
html.stack-on .service-card p { font-size: 11.5px; }
html.stack-on .services-media img { max-height: 300px; }
}
/* Contactul e podeaua pe care se așază teancul: trebuie să treacă peste ultimul panou. */
.contact-section { position: relative; z-index: 4; }
footer { position: relative; z-index: 4; }
footer {
border-top: none;
background: linear-gradient(180deg, rgba(246, 243, 239, 0) 0%, rgba(246, 243, 239, 0.75) 22%, rgba(246, 243, 239, 0.9) 100%);
}
@media (max-width: 1100px) {
.hero {
grid-template-columns: minmax(380px, 1.2fr) minmax(320px, 0.9fr);
gap: clamp(20px, 3vw, 38px);
}
.hero-content {
max-width: 540px;
}
.hero-collage {
width: clamp(320px, 38vw, 420px);
}
.services-layout {
grid-template-columns: minmax(300px, 1fr) minmax(320px, 560px);
gap: 24px;
max-width: 1000px;
}
#services { padding-top: 72px; }
}
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
.nav-logo img { height: 65px; }
section { padding: var(--section-space-mobile) 24px; }
.section-label, .section-title { text-align: center; }
/* ── Scara verticală pe mobil ──
Valorile de aici erau negociate una câte una, la momente diferite: 24/40 sub linia de
titlu, 34 sub tab-uri, 44+36 și 56 la cusăturile din panouri, 14 deasupra butonului.
Se reduc la patru trepte: 12 (goluri în grile), 24 (grup → acțiune), 28 (titlu →
conținut), 36 (trecerea între cele două jumătăți ale unui capitol). */
.title-line { margin: 14px auto 28px; }
/* Cu id, ca să bată `#services .title-line` (1,1,0) din regula de bază. */
#services .title-line { margin-bottom: 28px; }
/* Idem: `#services .service-tabs` de la 543 impune 34px pe mobil, deși regula de clasă
de mai jos cere 20. Aceeași capcană de specificitate documentată la 1469. */
#services .service-tabs { margin-bottom: 24px; }
.nav-links, nav > .nav-cta { display: none; }
.hamburger { display: flex; }
.hero {
min-height: auto;
/* minmax(0,…) not 1fr: the nowrap headline's min-content width would otherwise
force the column — and with it the full-bleed media — wider than the screen
below ~360px, pushing the photo off-centre. */
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 98px 20px 46px;
/* No `background: #FFFFFF` here — an opaque hero would hide the page wash and the
grain behind it, and put back the very seam we removed on desktop. */
text-align: center;
justify-items: center;
max-width: 100%; /* not 100vw: vw counts the scrollbar, which made the
full-bleed media overhang by ~7px on each side */
overflow-x: clip;
}
.hero-content {
max-width: 360px;
margin-left: 0;
/* The desktop rule pins this to `justify-self: end` (it sits left of the photo in a
two-column grid). Mobile is a single centred column, and without this override the
whole text block — headline, paragraph, badges, buttons — is pushed to the right
edge of the grid area. `justify-items: center` on .hero can't win against an
explicit justify-self on the item. */
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-content h1 { order: 2; }
.hero-content p { order: 3; }
.hero-content .hero-usp-badges { order: 4; }
.hero-content .hero-buttons { order: 5; }
.hero h1 {
/* Floor is 29px, not 34px. The second line is `white-space: nowrap`, so at 34px it
is 319px wide no matter the screen — which ate the whole 20px page margin below
360px and touched the viewport edge at 320px. Dropping the floor lets the line
keep its margin on the narrowest phones; nothing changes above 374px, where
9.1vw overtakes the floor anyway. */
font-size: clamp(29px, 9.1vw, 44px);
line-height: 1.22;
letter-spacing: -1.2px;
margin-bottom: 20px;
}
.hero-line { white-space: normal; }
.hero h1 em { white-space: nowrap; }
.hero p {
font-size: 15px;
line-height: 1.45;
margin-bottom: 20px;
}
.subtitle-desktop { display: none; }
.subtitle-mobile { display: inline; }
.hero-usp-badges {
display: flex;
justify-content: center;
gap: 10px 16px;
max-width: 320px;
margin: 0 auto 22px;
}
.hero-usp-badges span {
font-size: 12px;
}
.usp-icon svg {
width: 14px; height: 14px;
}
.hero-buttons {
width: 100%;
max-width: none;
margin: 0 auto 8px;
flex-direction: column;
gap: 10px;
}
.btn-primary, .btn-secondary {
width: 100%;
padding: 10px 20px;
font-size: 14px;
justify-content: center;
text-align: center;
}
.cta-mobile {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.cta-desktop { display: none; }
/* Mobile shows the storefront only. A narrow column can't carry both photos: overlapped
they fight, side by side they're too small, and a swipe strip hid the second one
behind an interaction most people never perform. One photo, centred, at the same
margin as the text. The bench photo stays in the DOM for desktop. */
.hero-media {
width: 100%;
justify-self: center; /* overrides the desktop `justify-self: start` */
margin: 22px auto 0;
transform: none;
display: block;
}
.hero-collage {
width: min(88%, 380px);
margin-inline: auto;
display: block;
aspect-ratio: auto; /* undo the desktop lock */
}
.hero-photo-depth--bench { display: none; }
.hero-photo-depth--shop {
position: static; /* undo the desktop absolute positioning */
width: 100%;
}
.hero-photo--shop {
--w: 1; /* the photo now fills the collage, so the corner radius and
frame resolve straight off the container */
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
.hero-scroll-cue {
display: none;
}
.services-layout {
grid-template-columns: 1fr;
max-width: 460px;
margin: 0 auto;
gap: 16px;
}
.services-grid.is-collapsed .service-card:nth-child(n+4) {
display: none;
}
.services-show-more.is-visible {
display: block;
}
.services-media {
order: 1;
}
.services-main {
order: 2;
}
.services-media picture {
max-width: 400px;
margin: 0 auto;
}
/* Ilustrațiile au fost decupate de marginile transparente, deci sunt acum mult mai
înalte în raport cu lățimea: la 390px lățime ajungeau la peste 600px înălțime și
împingeau cardurile mult în jos. Plafon pe înălțime și aici. */
.services-media img {
max-height: 380px;
width: auto;
/* ⚠ Obligatoriu împreună cu `width: auto`. Varianta de mobil a laptopului
(laptop-mobile-disasembly.webp) e singura în format landscape — 2200×1500. Cu doar
plafon pe înălțime, 380px de înălțime îi dădeau 557px lățime, adică peste 200px în
afara ecranului, tăiați tăcut de `overflow-x: clip`. */
max-width: 100%;
margin-inline: auto;
}
.services-grid {
grid-template-columns: 1fr;
gap: 12px;
max-width: 460px;
margin: 0 auto;
}
.service-tabs {
width: 100%;
border-radius: 20px;
padding: 8px;
gap: 8px;
margin: 0 auto 20px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.service-tabs::-webkit-scrollbar { display: none; }
.service-tab {
flex: 1 0 calc(33.333% - 4px);
text-align: center;
padding: 13px 10px;
font-size: 14px;
white-space: nowrap;
}
.service-card {
padding: 24px 20px;
}
.how-grid { grid-template-columns: 1fr; gap: 48px; }
/* Mockup-ul dispare pe telefon. Într-o coloană îngustă nu mai spune nimic în plus față
de cei trei pași de lângă el — doar împinge conținutul real cu ~420px în jos, ceea ce
pe un panou lipit înseamnă un ecran întreg de derulat până la primul cuvânt util.
Regulile de mărime de mai jos rămân: sunt inofensive cât timp elementul e ascuns și
ar trebui oricum refăcute dacă mockup-ul se readuce vreodată pe mobil. */
.phone-wrap { display: none; }
.how-right { order: 1; }
.phone {
width: 220px;
height: 420px;
}
.phone-notch {
width: 80px;
height: 20px;
}
.phone-screen { padding: 12px; }
.phone-header {
height: 44px;
padding: 0 14px;
margin-bottom: 12px;
}
.phone-header-dot { width: 10px; height: 10px; margin-right: 8px; }
.phone-header-line { height: 6px; }
.phone-line { height: 8px; margin-bottom: 8px; }
.phone-card-sim { padding: 10px; margin-bottom: 12px; }
.phone-card-sim .phone-line { margin-bottom: 6px; }
.phone-progress-wrap {
padding-top: 10px;
border-radius: 12px;
padding: 10px;
}
.phone-progress-label, .phone-progress-percent { font-size: 9px; }
.phone-progress-bg { height: 7px; }
.phone-progress-note { margin-top: 6px; font-size: 8px; }
.how-right { opacity: 1; transform: none; }
.step-body { padding-bottom: 28px; }
.testi-card { padding: 22px 20px; }
/* Aceeași treaptă ca `.how-stats`: ambele sunt trecerea între cele două jumătăți ale unui
capitol și trebuie să fie aceeași valoare. Regula de bază dă 56px pe mobil. */
.proof-testimonials { margin-top: 36px; }
/* Butonul urmează după carduri cu gap de 12px; la 14px părea al șaptelea card, nu o
acțiune separată. */
.services-show-more { margin-top: 24px; }
/* Cardurile n-au fundal pe mobil (doar la hover, irelevant pe touch), deci cei 28px
laterali erau pură indentare: textul lor pornea de la 48.5px de marginea ecranului, în
timp ce titlurile porneau de la 19.5px — cel mai mare decalaj orizontal din pagină. */
.why-card { padding: 18px 0; }
/* Cifrele nu mai au secțiune proprie: stau în panoul portocaliu, care aduce deja
padding-ul lateral. Fostul `padding: … 20px` ar fi dublat inset-ul, iar
`margin-top: -8px` compensa o graniță de secțiune care nu mai există. */
/* 44+36 = 80px între ultimul pas și cifre. Cu telefonul-mockup ascuns pe mobil,
capitolul e deja scurt, iar golul se citea ca o pauză nejustificată. 36 deasupra liniei
și 28 sub ea — linia rămâne respirată pe ambele laturi, dar totalul scade la 64px. */
.how-stats {
margin-top: 36px;
padding: 28px 0 0;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 460px;
}
/* Cardurile erau albe, pentru o secțiune albă. Pe portocaliu, alb plin ar fi lăsat
cifrele (acum albe) invizibile — deci sticlă translucidă, cu textul neschimbat. */
.stat-item {
border: 1px solid rgba(231, 223, 215, 0.3);
border-radius: 14px;
background: rgba(252, 248, 244, 0.1);
box-shadow: none;
padding: 22px 12px;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}
.stat-item,
.stat-item:last-child,
.stat-item:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.26); }
.stat-num {
font-size: 34px;
margin-bottom: 4px;
}
.stat-label {
font-size: 12px;
line-height: 1.35;
}
.why-grid { grid-template-columns: 1fr; }
.contact-buttons {
width: 100%;
max-width: 360px;
margin: 0 auto 18px;
flex-direction: column;
gap: 10px;
}
.contact-section {
text-align: center;
}
.contact-shell {
grid-template-columns: 1fr;
border-radius: 18px;
padding: 18px 14px;
gap: 16px;
}
.contact-copy {
align-items: center;
}
.contact-section h2 {
margin: 0 auto 12px;
}
.contact-section p,
.contact-section .contact-buttons,
.contact-section .schedule {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.schedule {
flex-direction: column;
gap: 6px;
justify-content: center;
}
.schedule-dot { display: none; }
/* Ordinea pe telefon: titlu + descriere → hartă → butoane → program. Harta stă la mijloc,
între ce spune blocul și ce poți face, în loc să despartă butoanele de program.
`display: contents` scoate `.contact-copy` din layout fără să-l scoată din DOM, deci
copiii lui devin direct elemente ale grilei și pot fi ordonați individual față de hartă.
Fără el, `order` ar putea muta doar blocul întreg. Ordinea în DOM rămâne neschimbată —
citirea cu screen reader și tabularea nu se schimbă — iar pe desktop nu se aplică
nimic din toate astea. */
.contact-copy { display: contents; }
.contact-section h2 { order: 1; }
.contact-section p { order: 2; }
.contact-map-wrap { order: 3; }
.contact-buttons { order: 4; }
.schedule { order: 5; }
/* Cu `display: contents`, `gap`-ul grilei (16px) se aplică acum ÎNTRE fiecare text, peste
marginile lor proprii: titlul ajungea la 12+16=28px de descriere, iar descrierea la
28+16=44px de hartă. Marginile se anulează și distanțele le dă exclusiv `gap`-ul —
o singură sursă, nu două care se adună. */
.contact-section h2,
.contact-section p,
.contact-buttons { margin-bottom: 0; }
.contact-map-wrap {
margin-top: 0;
border-radius: 14px;
}
/* Pastilele albe pline erau cele mai dure suprafețe de pe tot blocul — mai apăsate decât
titlul, deși titlul e mesajul. Doar pe mobil, unde ocupă toată lățimea.
Alb cald opac, nu alb pur cu opacitate: la 0.92 alpha contrastul numărului de telefon
cădea de la 3.32 la 2.84, adică 15% pierdut chiar pe CTA-ul principal. Varianta de aici
stinge la fel de vizibil (aceeași familie caldă ca restul paginii) și rămâne la 3.14.
Bordura ține conturul pastilei pe portocaliu, acum că nu mai e alb absolut. */
.btn-white {
background: var(--on-orange-strong);
border: 1px solid rgba(255, 255, 255, 0.45);
}
.contact-map-wrap iframe {
min-height: 230px;
}
.map-consent-placeholder {
min-height: 230px;
padding: 16px;
}
.footer-shell {
grid-template-columns: 1fr;
text-align: center;
padding: 16px 14px;
gap: 12px;
}
.footer-brand {
flex-direction: column;
gap: 8px;
}
.footer-tagline {
max-width: 100%;
}
.footer-socials {
justify-self: center;
}
.footer-legal {
justify-content: center;
}
.footer-trust {
justify-content: center;
}
.footer-trust img {
height: 30px;
}
.footer-copy {
text-align: center;
margin-top: 0;
padding-top: 10px;
}
.cookie-banner-actions {
width: 100%;
}
.cookie-btn {
flex: 1 1 auto;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.motion-init,
.motion-init-up,
.motion-init-scale,
.motion-init-left,
.motion-init-right {
opacity: 1 !important;
transform: none !important;
}
.phone-pulse-ring {
display: none !important;
}
.testi-marquee { overflow-x: auto; overflow-y: hidden; }
.testi-track { transform: none !important; }
.testi-track > .testi-card:nth-child(n+8) { display: none; }
/* Redundant (fără JS clasa `stack-on` nu apare niciodată), dar explicit exact acolo
unde va căuta următorul care citește fișierul. */
.panel { position: static !important; top: auto !important; }
}
/* Safety net: if the Motion/Lenis modules never signal readiness (blocked
script, offline CDN-less local file://, etc.), motion-boot.js adds this
class so content isn't stuck permanently invisible. */
html.motion-fallback .motion-init,
html.motion-fallback .motion-init-up,
html.motion-fallback .motion-init-scale,
html.motion-fallback .motion-init-left,
html.motion-fallback .motion-init-right {
opacity: 1 !important;
transform: none !important;
}
html.motion-fallback .phone-pulse-ring {
display: none !important;
}
html.motion-fallback .testi-marquee { overflow-x: auto; overflow-y: hidden; }
html.motion-fallback .testi-track { transform: none !important; }
html.motion-fallback .testi-track > .testi-card:nth-child(n+8) { display: none; }
html.motion-fallback .panel { position: static !important; top: auto !important; }