/* ═══════════════════════════════════════════════════════════════════════════ 1 · TOKENS — paleta e luată din studioul real: lemnul blond al aparatelor, pereții crem, alama caldă. Benzile „închise” sunt maro cald, nu verde. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --sand: #ece4d6; /* baza paginii — cald, NU alb */ --sand-d: #ded0b9; /* bandă mai adâncă */ --cream: #f6f1e7; /* suprafețe ridicate, carduri */ --forest: #6b503a; /* bandă maro cald (numele e istoric) */ --forest-d: #4a3527; /* maro adânc — footer, SCANECA */ --moss: #a58a6c; /* maro deschis, pentru linii și accente moi */ --brass: #c69a4e; /* accentul metalic pe fundal deschis */ --brass-d: #a87f38; --brass-l: #e2bb7d; /* accentul metalic pe fundal închis */ --ink: #221a12; --ink-70: rgba(34,26,18,.72); --ink-55: rgba(34,26,18,.56); --ink-38: rgba(34,26,18,.38); --ink-16: rgba(34,26,18,.16); --ink-08: rgba(34,26,18,.09); --on-dark: #f2ebdf; --on-dark-70:rgba(242,235,223,.74); --on-dark-45:rgba(242,235,223,.48); --on-dark-18:rgba(242,235,223,.2); --serif: 'Fraunces','Iowan Old Style',Georgia,serif; --sans: 'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --fs-mega: clamp(3.1rem, 10vw, 8.5rem); --fs-h2: clamp(2.1rem, 5.2vw, 4.4rem); --fs-h3: clamp(1.4rem, 2.3vw, 2rem); --fs-lead: clamp(1.04rem, 1.4vw, 1.28rem); --fs-body: clamp(.97rem, 1.05vw, 1.05rem); --fs-micro: .71rem; --pad: clamp(1.15rem, 5vw, 4.5rem); --sec: clamp(5rem, 11vw, 10rem); --maxw: 1440px; --hdr: 74px; --e: cubic-bezier(.22,.61,.36,1); --es: cubic-bezier(.33,.9,.28,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)} body{ margin:0;background:var(--sand);color:var(--ink); font-family:var(--sans);font-size:var(--fs-body);font-weight:300;line-height:1.66; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,iframe{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,p,figure,blockquote{margin:0} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--forest);color:var(--sand)} :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px} /* granulație de hârtie peste tot */ body::after{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.55; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); } .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .sec{padding-block:var(--sec);position:relative} /* Decorul se taie în stratul lui, NU pe secțiune: orice overflow pus pe un strămoș (hidden SAU clip) anulează position:sticky din interior. */ .deco-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} /* benzi tonale — nicăieri nu rămâne alb */ .b-sand{background:var(--sand)} .b-sand-d{background:var(--sand-d)} .b-cream{background:var(--cream)} .b-forest{background:var(--forest);color:var(--on-dark)} .b-forest-d{background:var(--forest-d);color:var(--on-dark)} .b-forest h2,.b-forest h3,.b-forest-d h2,.b-forest-d h3{color:var(--sand)} .b-forest p,.b-forest-d p{color:var(--on-dark-70)} /* tipografie */ .serif{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.03} .eyebrow{font-size:var(--fs-micro);letter-spacing:.28em;text-transform:uppercase;font-weight:500; color:var(--ink-55);display:inline-flex;align-items:center;gap:.7em} .b-forest .eyebrow,.b-forest-d .eyebrow{color:var(--on-dark-45)} .b-forest .eyebrow::before,.b-forest-d .eyebrow::before{background:var(--brass-l)} .eyebrow::before{content:"";width:22px;height:1px;background:var(--brass);display:inline-block} .lead{font-size:var(--fs-lead);color:var(--ink-70);line-height:1.6} .b-forest .lead,.b-forest-d .lead{color:var(--on-dark-70)} h2.big{font-family:var(--serif);font-size:var(--fs-h2);font-weight:300;line-height:1.02; letter-spacing:-.028em} h2.big em,h1 em{font-style:italic;color:var(--brass);font-weight:300} .rule{height:1px;background:var(--ink-16);transform-origin:left center} .b-forest .rule,.b-forest-d .rule{background:var(--on-dark-18)} .todo{color:var(--brass-d);background:rgba(198,154,78,.13);box-shadow:inset 0 0 0 1px rgba(198,154,78,.34); padding:.06em .5em;border-radius:2px;font-family:var(--sans);font-weight:400;font-style:normal; white-space:nowrap;font-size:.94em} .b-forest .todo,.b-forest-d .todo{color:var(--brass);background:rgba(198,154,78,.16)} /* ═══════════════════════════════════════════════════════════════════════════ 2 · SLOTURI FOTO — cu poză arată poza, fără poză arată un cadru desenat ═══════════════════════════════════════════════════════════════════════════ */ .slot{position:relative;aspect-ratio:var(--ar,4/3);overflow:hidden;background:var(--sand-d);isolation:isolate} /* CÂT SE ÎNCARCĂ poza: doar o suprafață caldă, liniștită. Nimic care să semene a imagine stricată — pictograma și numele fișierului erau gândite pentru pozele care LIPSESC, dar se vedeau la fiecare imagine până termina de încărcat, iar o întârziere de o clipă arăta ca o eroare. */ .slot::before{ content:"";position:absolute;inset:0;z-index:0; background: radial-gradient(110% 80% at 20% 6%, rgba(244,239,228,.95), rgba(244,239,228,0) 58%), linear-gradient(146deg,#e6dfd0 0%,#d9cdb9 48%,#c9bca6 100%); box-shadow:inset 0 0 0 1px var(--ink-08); } /* CÂND CHIAR LIPSEȘTE fișierul: pictogramă + numele așteptat, ca să se vadă imediat ce trebuie pus. `:has()` lipsește doar din browsere foarte vechi, unde rămâne varianta de mai sus — un cadru gol, nu o eroare. */ .slot:has(> img.ph-missing)::before{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%2316201a' stroke-opacity='.3' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='12.5' width='51' height='39' rx='2'/%3E%3Ccircle cx='20' cy='25' r='4'/%3E%3Cpath d='M6.5 44l14-13 10 9 8-7 18 15'/%3E%3C/svg%3E") center 44%/50px no-repeat, radial-gradient(110% 80% at 20% 6%, rgba(244,239,228,.95), rgba(244,239,228,0) 58%), linear-gradient(146deg,#e6dfd0 0%,#d9cdb9 48%,#c9bca6 100%); } .slot:has(> img.ph-missing)::after{ content:attr(data-ph);position:absolute;left:0;right:0;bottom:0;z-index:1;padding:.6rem .8rem; font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:500; color:rgba(22,28,24,.42);border-top:1px solid rgba(22,28,24,.1);text-align:center; background:linear-gradient(to top,rgba(244,239,228,.62),rgba(244,239,228,0)); } .slot>img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover; object-position:var(--pos,center);transition:transform 1.5s var(--e),filter .9s var(--e)} .slot>img.ph-missing{opacity:0;visibility:hidden} .slot.ph-ok::before,.slot.ph-ok::after{display:none} /* mască de dezvăluire a fotografiei la intrarea în cadru. Masca stă pe , nu pe container: altfel containerul are aria vizibilă 0 și IntersectionObserver nu l-ar mai raporta niciodată ca intrat în cadru. */ .reveal img{ clip-path:inset(0 0 100% 0); transition:transform 1.5s var(--e),filter .9s var(--e), clip-path 1.3s var(--es) var(--d,0s); } .reveal.in img{clip-path:inset(0 0 0 0)} /* ═══════════════════════════════════════════════════════════════════════════ 3 · MIȘCARE — reveal, „stretch”, linii ═══════════════════════════════════════════════════════════════════════════ */ .rv{opacity:0;transform:translateY(22px); transition:opacity .9s var(--e) var(--d,0s),transform 1s var(--e) var(--d,0s)} .rv.in{opacity:1;transform:none} .stretch{opacity:0;transform:scaleX(.84) translateY(10px);transform-origin:left center; transition:opacity .75s var(--e) var(--d,0s),transform 1.2s var(--es) var(--d,0s)} .stretch.in{opacity:1;transform:none} .s-rule{transform:scaleX(0);transform-origin:left center; transition:transform 1.3s var(--es) var(--d,0s)} .s-rule.in{transform:scaleX(1)} .flow{width:100%;height:auto;overflow:visible;color:var(--brass)} .flow path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round; stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600); transition:stroke-dashoffset 3.2s var(--es)} .flow.in path{stroke-dashoffset:0} /* ═══════════════════════════════════════════════════════════════════════════ 4 · BUTOANE ═══════════════════════════════════════════════════════════════════════════ */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7rem; padding:1.05rem 1.95rem;border:1px solid var(--forest);background:var(--forest);color:var(--sand); font-size:.79rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500; border-radius:999px;cursor:pointer;overflow:hidden;will-change:transform; transition:transform .45s var(--e),border-color .5s var(--e),color .5s var(--e), box-shadow .5s var(--e)} .btn>span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.65rem; transition:transform .5s var(--e)} .btn::before{content:"";position:absolute;inset:0;z-index:1;background:var(--brass); transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--es)} .btn:hover::before{transform:scaleX(1)} .btn:hover{border-color:var(--brass);color:var(--forest-d); box-shadow:0 16px 34px -20px rgba(74,53,39,.9)} .btn:active{transform:scale(.976)} .btn .arw{transition:transform .5s var(--e)} .btn:hover .arw{transform:translateX(4px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink-16)} .btn-ghost::before{background:var(--forest)} .btn-ghost:hover{color:var(--sand);border-color:var(--forest)} .b-forest .btn,.b-forest-d .btn{background:var(--sand);border-color:var(--sand);color:var(--forest-d)} .b-forest .btn-ghost,.b-forest-d .btn-ghost{background:transparent;color:var(--on-dark); border-color:var(--on-dark-18)} .b-forest .btn-ghost::before,.b-forest-d .btn-ghost::before{background:var(--sand)} .b-forest .btn-ghost:hover,.b-forest-d .btn-ghost:hover{color:var(--forest-d);border-color:var(--sand)} .btn-sm{padding:.7rem 1.25rem;font-size:.68rem;letter-spacing:.14em} .link-u{position:relative;display:inline-block;padding-bottom:2px} .link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor; transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--es)} .link-u:hover::after{transform:scaleX(1);transform-origin:left center} /* ═══════════════════════════════════════════════════════════════════════════ 5 · HEADER ═══════════════════════════════════════════════════════════════════════════ */ #progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:var(--brass); transform:scaleX(0);transform-origin:left center} .hdr{position:fixed;top:0;left:0;right:0;z-index:150;height:var(--hdr);display:flex;align-items:center; transition:background .5s var(--e),height .5s var(--e),box-shadow .5s var(--e),color .5s var(--e)} .hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink-16); transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--es)} .hdr.stuck{background:rgba(233,225,212,.82);-webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px);height:64px} .hdr.stuck::after{transform:scaleX(1)} .hdr-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad); display:flex;align-items:center;justify-content:space-between;gap:1.4rem} .brand{display:flex;align-items:center;gap:.7rem;flex:0 0 auto} .brand-logo{height:36px;width:auto;display:none} .brand.has-logo .brand-logo{display:block} .brand.has-logo .bm{display:none} .bm{display:flex;flex-direction:column;line-height:1} .bm .b1{font-family:var(--serif);font-size:1.14rem;font-weight:400;letter-spacing:.005em} .bm .b1 em{font-style:italic;color:var(--brass-d)} .bm .b2{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-55); margin-top:.34rem;font-weight:500} .nav{display:flex;align-items:center;gap:1.9rem} .nav a{position:relative;font-size:.77rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-70);padding-block:.3rem;transition:color .4s var(--e)} .nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass); transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--es)} .nav a:hover,.nav a[aria-current="true"]{color:var(--ink)} .nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left center} .hdr-act{display:flex;align-items:center;gap:1rem;flex:0 0 auto} .hdr-tel{font-size:.79rem;letter-spacing:.06em;color:var(--ink-70);display:inline-flex; align-items:center;gap:.45rem;transition:color .4s var(--e)} .hdr-tel:hover{color:var(--brass-d)} .cta-mini{display:none;width:44px;height:44px;border-radius:50%;background:var(--forest); color:var(--sand);place-items:center;transition:background .45s var(--e)} .cta-mini:hover{background:var(--brass-d)} .cta-mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .burger{display:none;width:44px;height:44px;border:1px solid var(--ink-16);background:transparent; border-radius:999px;cursor:pointer;position:relative} .burger i{position:absolute;left:13px;width:18px;height:1px;background:var(--ink); transition:transform .45s var(--e)} .burger i:nth-child(1){top:18px} .burger i:nth-child(2){top:24px} .burger.open i:nth-child(1){transform:translateY(3px) rotate(45deg)} .burger.open i:nth-child(2){transform:translateY(-3px) rotate(-45deg)} .mnav{position:fixed;inset:0;z-index:140;background:var(--forest);color:var(--on-dark); padding:calc(var(--hdr) + 2.5rem) var(--pad) 2.5rem;display:flex;flex-direction:column; justify-content:center;opacity:0;visibility:hidden; transition:opacity .5s var(--e),visibility .5s} .mnav.open{opacity:1;visibility:visible} .mnav>a{font-family:var(--serif);font-size:clamp(1.9rem,7.4vw,2.7rem);font-weight:300;color:var(--sand); padding-block:.4rem;border-bottom:1px solid var(--on-dark-18);opacity:0;transform:translateX(-16px); transition:opacity .55s var(--e),transform .55s var(--e)} .mnav.open>a{opacity:1;transform:none} .mnav .mf{margin-top:2rem;font-size:.86rem;color:var(--on-dark-45);line-height:1.9} /* ═══════════════════════════════════════════════════════════════════════════ 6 · HERO ═══════════════════════════════════════════════════════════════════════════ */ .hero{position:relative;padding-top:calc(var(--hdr) + clamp(1.4rem,3.6vw,2.8rem)); padding-bottom:clamp(2.5rem,6vw,5rem);overflow:hidden} .hero::before{content:"";position:absolute;top:-22%;left:-14%;width:60vw;height:60vw;max-width:820px; max-height:820px;pointer-events:none; background:radial-gradient(circle,rgba(165,138,108,.28) 0%,rgba(165,138,108,0) 62%); animation:breathe 17s var(--es) infinite} @keyframes breathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.16);opacity:1}} .hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(1.6rem,3.4vw,3.2rem);align-items:start} h1.mega{font-family:var(--serif);font-size:var(--fs-mega);font-weight:300;line-height:.94; letter-spacing:-.035em;margin-top:clamp(1.3rem,3vw,2.2rem)} h1.mega .ln{display:block;overflow:hidden} h1.mega .ln>span{display:block;transform:translateY(102%); transition:transform 1.15s var(--es) var(--d,0s)} h1.mega.in .ln>span{transform:none} /* cuvântul care se schimbă — eticheta și cuvântul stau pe aceeași linie de bază */ .swap{display:flex;align-items:center;gap:.45em;margin-top:clamp(1.3rem,2.6vw,2rem); font-size:var(--fs-lead);color:var(--ink-70);line-height:1.5} .swap-box{position:relative;display:block;height:1.5em;overflow:hidden;min-width:10ch;flex:0 0 auto} .swap-box b{ position:absolute;left:0;top:0;width:100%;height:100%; display:flex;align-items:center; /* centrare optică față de „Antrenăm” */ font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em; line-height:1;color:var(--forest-d);white-space:nowrap; opacity:0;transform:translateY(85%); transition:opacity .5s var(--e),transform .7s var(--es); } .swap-box b.on{opacity:1;transform:none} .swap-box b.out{opacity:0;transform:translateY(-85%)} .swap-box::after{ /* subliniere fină, ca să se citească drept „câmp variabil” */ content:"";position:absolute;left:0;right:0;bottom:.12em;height:1px; background:linear-gradient(90deg,var(--brass),transparent);opacity:.6; } /* ── DECOR: linii, arcuri, puncte — pentru zonele altfel plate ────────────── */ .deco{position:absolute;pointer-events:none;z-index:0} .deco>*{position:relative;z-index:0} /* caroiaj foarte fin */ .deco-grid{ background-image:linear-gradient(var(--ink-08) 1px,transparent 1px), linear-gradient(90deg,var(--ink-08) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 72%); mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent 72%); } .b-forest .deco-grid,.b-forest-d .deco-grid{ background-image:linear-gradient(rgba(242,235,223,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(242,235,223,.07) 1px,transparent 1px); } /* puncte în rețea */ .deco-dots{ background-image:radial-gradient(var(--ink-16) 1px,transparent 1px); background-size:16px 16px;opacity:.5; -webkit-mask-image:linear-gradient(to bottom right,#000,transparent 75%); mask-image:linear-gradient(to bottom right,#000,transparent 75%); } .b-forest .deco-dots,.b-forest-d .deco-dots{ background-image:radial-gradient(rgba(242,235,223,.22) 1px,transparent 1px)} /* arc subțire de alamă */ .deco-arc{border:1px solid var(--brass);border-radius:50%;opacity:.28} .b-forest .deco-arc,.b-forest-d .deco-arc{border-color:var(--brass-l);opacity:.3} .deco-arc.dash{border-style:dashed;opacity:.22} .deco-arc.spin{animation:spin 44s linear infinite} .deco-arc.spin-r{animation:spin 60s linear infinite reverse} /* linie orizontală care se pierde */ .deco-line{height:1px;background:linear-gradient(90deg,transparent,var(--ink-16),transparent)} .b-forest .deco-line,.b-forest-d .deco-line{ background:linear-gradient(90deg,transparent,var(--on-dark-18),transparent)} /* cuvânt-fantomă uriaș, în fundal */ .ghost{ position:absolute;pointer-events:none;z-index:0;font-family:var(--serif);font-weight:300; font-size:clamp(7rem,22vw,20rem);line-height:.8;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1px var(--ink-08);white-space:nowrap;user-select:none; } .b-forest .ghost,.b-forest-d .ghost{-webkit-text-stroke-color:rgba(242,235,223,.09)} /* cruciulițe de reper, ca pe un plan de arhitectură */ .tick-mark{position:absolute;width:14px;height:14px;pointer-events:none;z-index:1;opacity:.5} .tick-mark::before,.tick-mark::after{content:"";position:absolute;background:var(--brass)} .tick-mark::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)} .tick-mark::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)} .b-forest .tick-mark::before,.b-forest .tick-mark::after, .b-forest-d .tick-mark::before,.b-forest-d .tick-mark::after{background:var(--brass-l)} /* conținutul secțiunilor stă peste decor */ .sec>.wrap,.hero>.wrap{position:relative;z-index:1} /* ── LOGO ──────────────────────────────────────────────────────────────────── Wordmark, fără simbol. Linia de sub nume e șina reformerului, iar punctul de alamă marchează capătul cursei. La hover, șina se întinde. */ .bm .rail{display:block;height:1px;background:var(--ink);margin-top:.36rem;position:relative; transform-origin:left center;transition:transform .7s var(--es)} .bm .rail::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px; border-radius:50%;background:var(--brass);transition:transform .7s var(--es)} .brand:hover .bm .rail{transform:scaleX(1.06)} .brand:hover .bm .rail::after{transform:translateX(2px)} .bm .b2{margin-top:.34rem} /* pe fundal închis */ .ft .bm .rail,.mnav .bm .rail, .subpage .hdr:not(.stuck) .bm .rail{background:var(--sand)} .ft .bm .rail::after,.mnav .bm .rail::after, .subpage .hdr:not(.stuck) .bm .rail::after{background:var(--brass-l)} .hero-sub{margin-top:clamp(1.1rem,2.4vw,1.7rem);max-width:36ch;font-size:1.02rem;color:var(--ink-70)} .hero-sub strong{font-weight:500;color:var(--ink)} .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.7rem,3.2vw,2.5rem)} .hero-meta{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:clamp(1.5rem,2.6vw,2.2rem); padding-top:1.2rem;border-top:1px solid var(--ink-16)} .hero-meta dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-38); font-weight:500;margin-bottom:.36rem} .hero-meta dd{margin:0;font-size:.9rem;color:var(--ink-70)} /* Hero: o singură fotografie mare, aliniată sus, cu detaliul suprapus în colț. */ .hero-art{position:relative;margin-top:clamp(2.6rem,5vw,4.2rem)} .hero-art .main{--ar:4/5;box-shadow:0 34px 62px -44px rgba(34,26,18,.8)} .hero-art .main img{transform:scale(1.05)} .ha-c{position:absolute;left:-9%;bottom:-9%;width:38%;z-index:3; border:8px solid var(--sand);box-shadow:0 22px 40px -26px rgba(34,26,18,.7)} .ha-c .slot{--ar:1/1} .hero-art .badge{position:absolute;left:0;top:-1.15rem;z-index:4;background:var(--forest); color:var(--sand);padding:.6rem 1.05rem;font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;white-space:nowrap;transform:translateY(-50%)} .hero-art .badge b{color:var(--brass-l);font-weight:500} .cue{display:inline-flex;align-items:center;gap:.7rem;margin-top:clamp(1.4rem,2.6vw,2.2rem); font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-38)} .cue .tr{position:relative;width:44px;height:1px;background:var(--ink-16);overflow:hidden} .cue .tr i{position:absolute;inset:0;background:var(--brass);animation:cue 2.6s var(--es) infinite} @keyframes cue{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left} 55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}} /* ═══════════════════════════════════════════════════════════════════════════ 7 · BANDĂ MARQUEE ═══════════════════════════════════════════════════════════════════════════ */ .marq{background:var(--forest);color:var(--sand);padding-block:1.1rem;overflow:hidden; border-block:1px solid rgba(226,187,125,.3)} .marq-t{display:flex;width:max-content;will-change:transform;animation:marq 42s linear infinite} .marq-t span{font-family:var(--serif);font-size:clamp(1.1rem,2.1vw,1.7rem);font-weight:300; padding-inline:1.1rem;display:inline-flex;align-items:center;gap:1.6rem;white-space:nowrap} .marq-t i{width:6px;height:6px;background:var(--brass-l);border-radius:50%;display:inline-block; flex:0 0 auto} .marq-t em{font-style:italic;color:var(--brass-l)} @keyframes marq{to{transform:translateX(-50%)}} .marq:hover .marq-t{animation-play-state:paused} /* ═══════════════════════════════════════════════════════════════════════════ 8 · MANIFEST + STATISTICI ═══════════════════════════════════════════════════════════════════════════ */ .man-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,5rem);align-items:start} .man-grid p+p{margin-top:1.1rem} .quote{margin-top:2rem;padding-left:1.4rem;border-left:2px solid var(--brass); font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.55rem);font-style:italic;line-height:1.4} .quote cite{display:block;margin-top:.8rem;font:400 var(--fs-micro)/1 var(--sans);letter-spacing:.2em; text-transform:uppercase;color:var(--ink-38);font-style:normal} .man-art{margin-top:clamp(2.6rem,5vw,4rem);position:relative} .man-art .slot{--ar:21/9} .man-cap{margin-top:.95rem;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-55);display:flex;align-items:center;gap:.7rem} .man-cap::before{content:"";width:26px;height:1px;background:var(--brass);flex:0 0 auto} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-16); border-block:1px solid var(--ink-16);margin-top:clamp(4rem,7vw,6rem)} .stat{background:var(--sand);padding:clamp(1.5rem,3vw,2.3rem) clamp(.9rem,2vw,1.5rem)} .stat .n{font-family:var(--serif);font-size:clamp(2.4rem,5.6vw,4.2rem);font-weight:300;line-height:1; letter-spacing:-.035em;display:flex;align-items:baseline;gap:.08em} .stat .n sup{font-size:.32em;color:var(--brass-d);top:-1.2em;letter-spacing:0} .stat .l{margin-top:.75rem;font-size:var(--fs-micro);letter-spacing:.17em;text-transform:uppercase; color:var(--ink-55);line-height:1.6} /* ═══════════════════════════════════════════════════════════════════════════ 9 · SERVICII — listă editorială cu previzualizare care urmărește cursorul ═══════════════════════════════════════════════════════════════════════════ */ .srv-list{border-top:1px solid var(--on-dark-18);margin-top:clamp(2rem,4vw,3.2rem)} .srv-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.85fr) auto; gap:clamp(.9rem,2.4vw,2.4rem);align-items:center;padding:clamp(1.2rem,2.4vw,1.9rem) 0; border-bottom:1px solid var(--on-dark-18);cursor:pointer;isolation:isolate} .srv-row::before{content:"";position:absolute;inset:0 -1.4rem;z-index:-1;background:rgba(226,187,125,.13); transform:scaleY(0);transform-origin:center bottom;transition:transform .55s var(--es)} .srv-row:hover::before,.srv-row:focus-within::before{transform:scaleY(1)} .srv-row .num{font-size:.72rem;letter-spacing:.16em;color:var(--on-dark-45);font-weight:500; min-width:2.4em} .srv-row h3{font-family:var(--serif);font-size:clamp(1.45rem,3.4vw,2.7rem);font-weight:300; line-height:1.06;letter-spacing:-.025em;color:var(--sand); transition:transform .55s var(--es),color .5s var(--e)} .srv-row h3 sup{font-size:.36em;top:-1.2em;position:relative;color:var(--on-dark-45)} .srv-row:hover h3{transform:translateX(10px);color:var(--brass-l)} .srv-row p{font-size:.92rem;color:var(--on-dark-70);line-height:1.55} .srv-row .go{width:42px;height:42px;border-radius:50%;border:1px solid var(--on-dark-18); display:grid;place-items:center;flex:0 0 auto; transition:background .5s var(--e),border-color .5s var(--e),transform .5s var(--e)} .srv-row .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e)} .srv-row:hover .go{background:var(--brass-l);border-color:var(--brass-l);color:var(--forest-d)} .srv-row:hover .go svg{transform:translateX(3px)} /* ═══════════════════════════════════════════════════════════════════════════ 10 · SECȚIUNEA FIXATĂ — „cum arată o ședință” ═══════════════════════════════════════════════════════════════════════════ */ .pin{position:relative;height:300vh} .pin-st{position:sticky;top:0;height:100vh;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center; gap:clamp(1.5rem,4vw,4rem);max-width:var(--maxw);margin-inline:auto; padding:calc(var(--hdr) + 1rem) var(--pad) 2rem;overflow:hidden} .pin-media{position:relative;height:min(74vh,640px)} .pin-media figure{position:absolute;inset:0;opacity:0;transform:scale(1.04); transition:opacity .9s var(--e),transform 1.4s var(--e)} .pin-media figure.on{opacity:1;transform:none} .pin-media .slot{--ar:auto;height:100%} .pin-copy{position:relative;min-height:16rem} .pin-step{position:absolute;inset:0;opacity:0;transform:translateY(20px);visibility:hidden; transition:opacity .7s var(--e),transform .8s var(--e),visibility .7s} .pin-step.on{opacity:1;transform:none;visibility:visible;position:relative} .pin-step .idx{font-family:var(--serif);font-size:clamp(3rem,7vw,5.5rem);line-height:1;font-weight:300; color:var(--brass-d);letter-spacing:-.04em} .pin-step h3{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300; line-height:1.1;margin-top:.7rem;letter-spacing:-.02em} .pin-step p{margin-top:1rem;max-width:38ch} .pin-dots{display:flex;gap:.5rem;margin-top:2rem} .pin-dots i{width:34px;height:2px;background:var(--on-dark-18);transition:background .5s var(--e)} .pin-dots i.on{background:var(--brass-l)} /* indiciu pe desktop: se vede că etapele se schimbă din derulare */ .pin-hint{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem; font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase; color:var(--on-dark-45)} .pin-hint svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4; animation:pinNudge 2.4s var(--e) infinite} @keyframes pinNudge{0%,72%,100%{transform:translateY(0);opacity:.55} 84%{transform:translateY(4px);opacity:1}} /* Pe telefon și pe orice ecran cu atingere, secțiunea NU se mai fixează. Cu `position:sticky` + 300vh, degetul pe poză „prindea" pagina 1-2 secunde și nu se înțelegea dacă trecerea între etape e automată sau cere un gest. Desfăcută, devine o listă simplă: poză, text, poză, text — fără scroll captiv. `display:contents` pe cele două coloane le desface în aceeași grilă, ca să pot intercala fotografia cu textul ei prin `order`. */ @media (max-width:900px), (hover:none), (pointer:coarse){ .pin{height:auto} .pin-st{position:static;height:auto;display:grid;grid-template-columns:1fr; gap:0;padding-block:var(--sec);overflow:visible} .pin-media,.pin-copy{display:contents} .pin-media figure{position:relative;inset:auto;opacity:1;transform:none; margin-top:clamp(2.2rem,7vw,3.2rem)} .pin-media .slot{--ar:4/3;height:auto} .pin-step{position:relative;inset:auto;opacity:1;visibility:visible;transform:none; margin-top:1.2rem} .pin-step .idx{font-size:clamp(2.2rem,9vw,3rem)} .pin-dots,.pin-hint{display:none} .pin-media figure[data-step="0"]{order:1;margin-top:0} .pin-step[data-step="0"]{order:2} .pin-media figure[data-step="1"]{order:3} .pin-step[data-step="1"]{order:4} .pin-media figure[data-step="2"]{order:5} .pin-step[data-step="2"]{order:6} } /* ═══════════════════════════════════════════════════════════════════════════ 11 · SCANECA ═══════════════════════════════════════════════════════════════════════════ */ .sc-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:999px; border:1px solid var(--on-dark-18);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--on-dark-70)} .sc-badge .p{width:6px;height:6px;border-radius:50%;background:var(--brass-l);animation:pulse 2.8s infinite} .sc-logo{height:11px;width:auto;opacity:.9} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,187,125,.6)}70%{box-shadow:0 0 0 12px rgba(226,187,125,0)} 100%{box-shadow:0 0 0 0 rgba(226,187,125,0)}} .sc-main{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.8rem,4vw,4rem);margin-top:clamp(2.4rem,5vw,4rem)} .sc-stage{position:relative;border:1px solid var(--on-dark-18);padding:clamp(1.2rem,2.4vw,2rem); display:flex;flex-direction:column; background:linear-gradient(170deg,rgba(236,229,216,.05),rgba(236,229,216,.01))} .sc-h{display:flex;justify-content:space-between;gap:1rem;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--on-dark-45)} .sc-fig{flex:1;display:grid;place-items:center;padding-block:clamp(1rem,3vw,2rem);min-height:330px} .sc-svg{width:min(100%,280px);height:auto;overflow:visible} .sc-body{fill:none;stroke:rgba(236,229,216,.5);stroke-width:1.1;stroke-linejoin:round} .sc-fill{fill:rgba(236,229,216,.05);stroke:none} .sc-wire line{stroke:var(--brass-l);stroke-width:.7;opacity:0} .sc-dots circle{fill:var(--brass-l);opacity:0} .sc-axis{stroke:rgba(236,229,216,.16);stroke-width:.6;stroke-dasharray:2 5} .sc-lbl{font:400 7px/1 var(--sans);letter-spacing:.18em;fill:rgba(236,229,216,.4)} .sc-beam{opacity:0} .is-scan .sc-beam{opacity:1;animation:beam 4.2s var(--es) .2s infinite} @keyframes beam{0%{transform:translateY(0);opacity:0}6%{opacity:1}88%{opacity:1} 100%{transform:translateY(392px);opacity:0}} .is-scan .sc-wire line,.is-scan .sc-dots circle{animation:wireOn 4.2s var(--e) infinite} @keyframes wireOn{0%,4%{opacity:0}12%{opacity:.95}30%{opacity:.34}92%{opacity:.34}100%{opacity:0}} .sc-foot{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1.1rem;border-top:1px solid var(--on-dark-18)} .chip{font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:.4rem .75rem; border:1px solid var(--on-dark-18);border-radius:999px;color:var(--on-dark-45)} .chip.on{border-color:var(--brass-l);color:var(--brass-l)} .sc-panel{display:flex;flex-direction:column;gap:clamp(1.1rem,2.2vw,1.6rem)} .sc-ph{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap} .sc-sample{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-l); border:1px dashed rgba(226,187,125,.5);padding:.34rem .68rem} .readout{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--on-dark-18); border:1px solid var(--on-dark-18)} .tile{background:#5b432f;padding:clamp(.95rem,1.8vw,1.35rem);position:relative;overflow:hidden} .tile::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--brass-l); transform:scaleX(0);transform-origin:left center;transition:transform 1.5s var(--es)} .tile.in::after{transform:scaleX(var(--fill,.6))} .tile .k{font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--on-dark-45); min-height:2.2em;display:block} .tile .v{font-family:var(--serif);font-size:clamp(1.45rem,2.7vw,2rem);font-weight:300;color:var(--sand); line-height:1;margin-top:.6rem;display:flex;align-items:baseline;gap:.2em} .tile .v u{font-size:.4em;text-decoration:none;color:var(--on-dark-45);font-family:var(--sans)} .bal{border:1px solid var(--on-dark-18);padding:clamp(1.1rem,2.2vw,1.6rem)} .bal-t{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.19em; text-transform:uppercase;color:var(--on-dark-45)} .bal-n{display:flex;justify-content:space-between;align-items:baseline;margin-top:.45rem} .bal-n b{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:300;color:var(--sand)} .bal-bar{position:relative;height:6px;margin-top:.9rem;background:rgba(236,229,216,.13);overflow:hidden} .bal-bar i{position:absolute;inset:0 auto 0 0;background:var(--brass-l);width:50%; transition:width 1.8s var(--es)} .bal-bar::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px; background:rgba(236,229,216,.45)} .bal-beam{margin-top:1.2rem;height:30px;position:relative;display:grid;place-items:center} .bal-beam .bb{width:100%;height:1px;background:rgba(236,229,216,.3);animation:tilt 7s var(--es) infinite} .bal-beam .pv{position:absolute;width:9px;height:9px;background:var(--brass-l);transform:rotate(45deg)} @keyframes tilt{0%,100%{transform:rotate(-.85deg)}50%{transform:rotate(.85deg)}} .bal-note{margin-top:.9rem;font-size:.85rem;color:var(--on-dark-70);line-height:1.6} .sc-bottom{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(1.8rem,4vw,4rem);margin-top:clamp(3rem,6vw,5rem);align-items:start} .sc-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--on-dark-18); border:1px solid var(--on-dark-18)} .cap{background:#5b432f;padding:clamp(1rem,2vw,1.45rem);display:flex;gap:.85rem;align-items:flex-start} .cap .ic{color:var(--brass-l);flex:0 0 auto;margin-top:.15rem} .cap .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.2; stroke-linecap:round;stroke-linejoin:round} .cap h4{font-size:.85rem;font-weight:500;color:var(--sand);margin-bottom:.28rem} .cap p{font-size:.82rem;line-height:1.55;color:var(--on-dark-70)} .cmp{margin-top:clamp(1.8rem,3.5vw,2.6rem)} .cmp-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; margin-bottom:1rem} .cmp-tabs{display:inline-flex;border:1px solid var(--on-dark-18);border-radius:999px;overflow:hidden} .cmp-tabs button{background:transparent;border:0;padding:.52rem 1rem;cursor:pointer;font-size:10px; letter-spacing:.17em;text-transform:uppercase;color:var(--on-dark-45); transition:background .45s var(--e),color .45s var(--e)} .cmp-tabs button[aria-selected="true"]{background:var(--brass-l);color:var(--forest-d)} .cmp-stage{position:relative;aspect-ratio:1/1;max-width:600px;margin-inline:auto; background:#0e0c0a;overflow:hidden;border:1px solid var(--on-dark-18)} /* O lamelă care primește etichete în română nu trebuie să preia nici raportul, nici `position:relative` din `.ro-fig` — altfel iese din stivă și cade sub scenă. */ .cmp-slide.ro-fig{position:absolute;aspect-ratio:auto} .cmp-slide{position:absolute;inset:0;opacity:0;transform:scale(1.03); transition:opacity .8s var(--e),transform 1.4s var(--e)} .cmp-slide.on{opacity:1;transform:none} .cmp-slide img{width:100%;height:100%;object-fit:contain} .cmp-slide.miss::after{content:"vizual SCANECA";position:absolute;inset:0;display:grid; place-items:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:var(--on-dark-45)} .cmp-stage .stamp{position:absolute;z-index:3;left:1rem;bottom:1rem;background:rgba(30,22,15,.8); padding:.4rem .78rem;font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--on-dark);border:1px solid var(--on-dark-18)} .sc-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:clamp(2.2rem,4vw,3rem)} .sc-gdpr{font-size:.78rem;color:var(--on-dark-45)} /* ═══════════════════════════════════════════════════════════════════════════ 12 · ECHIPA ═══════════════════════════════════════════════════════════════════════════ */ .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,2.2rem)} .tm{position:relative} .tm .ph{position:relative;overflow:hidden} .tm .slot{--ar:4/5} .tm .slot>img{filter:saturate(.72) contrast(1.03)} .tm:hover .slot>img{filter:saturate(1) contrast(1);transform:scale(1.045)} .tm .ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass); transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--es);z-index:3} .tm:hover .ph::after{transform:scaleX(1)} .tm .n{position:absolute;top:.9rem;left:.9rem;z-index:4;font-family:var(--serif);font-size:.8rem; color:var(--sand);background:rgba(43,31,21,.62);-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);width:30px;height:30px;display:grid;place-items:center;border-radius:50%} .tm-b{padding-top:1.2rem} .tm h3{font-family:var(--serif);font-size:1.55rem;font-weight:400;letter-spacing:-.01em} .tm .role{margin-top:.35rem;font-size:var(--fs-micro);letter-spacing:.19em;text-transform:uppercase; color:var(--brass-d);font-weight:500} .tm p{margin-top:.8rem;color:var(--ink-70);font-size:.92rem} .founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem); align-items:center;margin-top:clamp(2.6rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--ink-16)} .founder .fnd-photo{position:relative;width:clamp(170px,21vw,250px);flex:0 0 auto} .founder .fnd-photo .slot{--ar:1/1;box-shadow:0 24px 44px -28px rgba(34,26,18,.8)} .founder .fnd-frame{position:absolute;inset:-10px -10px auto auto;width:58%;height:58%; border-top:1px solid var(--brass);border-right:1px solid var(--brass);opacity:.55; pointer-events:none} .founder .fnd-ring{position:absolute;left:-26px;bottom:-26px;width:78px;height:78px; border-radius:50%;border:1px dashed rgba(198,154,78,.55);animation:spin 30s linear infinite; pointer-events:none} .creds{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem} .creds li{font-size:.76rem;letter-spacing:.09em;padding:.4rem .8rem;border-radius:999px; border:1px solid var(--ink-16);color:var(--ink-70)} .creds li b{font-weight:500;color:var(--ink)} @keyframes spin{to{transform:rotate(360deg)}} .founder h3{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:300} .founder p{margin-top:.5rem;color:var(--ink-70);max-width:56ch} /* ── FORMARE PROFESIONALĂ ─────────────────────────────────────────────────── */ .form-grid2{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(2rem,5vw,5rem);align-items:start} .form-list{margin-top:clamp(1.8rem,3.2vw,2.6rem);border-top:1px solid var(--on-dark-18)} .form-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem; padding:1.15rem 0;border-bottom:1px solid var(--on-dark-18)} .form-list li b{font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--brass-l)} .form-list h4{font-size:.98rem;font-weight:500;color:var(--sand);margin-bottom:.3rem} .form-list p{font-size:.89rem;line-height:1.55;color:var(--on-dark-70)} .form-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px; background:var(--on-dark-18);border:1px solid var(--on-dark-18); margin-top:clamp(1.6rem,3vw,2.2rem)} .form-meta>div{background:#5b432f;padding:clamp(.9rem,1.8vw,1.2rem)} .form-meta dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-45); font-weight:500} .form-meta dd{margin:.55rem 0 0;font-size:.92rem;color:var(--sand)} .form-art{position:relative} .form-art .slot{box-shadow:0 34px 60px -44px rgba(20,14,9,.9)} .form-art-in{position:absolute;right:-5%;bottom:-8%;width:46%;border:8px solid var(--forest);z-index:3} .form-art-in .slot{--ar:1/1} /* ═══════════════════════════════════════════════════════════════════════════ 13 · GALERIE ORIZONTALĂ ═══════════════════════════════════════════════════════════════════════════ */ .hgal{position:relative;height:340vh} .hgal-st{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden} .hgal-tr{display:flex;gap:clamp(.9rem,1.8vw,1.8rem);padding-inline:var(--pad);will-change:transform} .hgal-i{flex:0 0 auto;width:min(44vw,600px);position:relative} .hgal-i:nth-child(odd){align-self:flex-start;margin-top:5vh} .hgal-i:nth-child(even){align-self:flex-end;margin-bottom:5vh} .hgal-i .slot{--ar:4/3} .hgal-i.tall{width:min(30vw,400px)} .hgal-i.tall .slot{--ar:3/4} .hgal-i .slot>img{transform:scale(1.15);will-change:transform} .hgal-i figcaption{margin-top:.8rem;font-size:var(--fs-micro);letter-spacing:.17em; text-transform:uppercase;color:var(--ink-38);display:flex;gap:.65rem;align-items:center} .hgal-i figcaption i{width:16px;height:1px;background:var(--brass)} .hgal-lead{flex:0 0 auto;width:min(32vw,400px);align-self:center;padding-right:clamp(1rem,3vw,2.6rem)} .hgal-hint{position:absolute;bottom:5vh;left:var(--pad);z-index:5;display:flex;align-items:center; gap:.75rem;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-38)} .hgal-hint .bar{width:86px;height:1px;background:var(--ink-16);position:relative} .hgal-hint .bar i{position:absolute;inset:0;background:var(--brass);transform:scaleX(0); transform-origin:left center} /* ═══════════════════════════════════════════════════════════════════════════ 15 · PROGRAMARE ═══════════════════════════════════════════════════════════════════════════ */ .book-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2rem,4.5vw,4.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)} .expect{margin-top:2rem;border-top:1px solid var(--on-dark-18)} .expect li{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--on-dark-18); font-size:.92rem;color:var(--on-dark-70);line-height:1.55} .expect li b{font-family:var(--serif);color:var(--brass-l);font-weight:400;flex:0 0 auto;min-width:1.6em} .book-note{margin-top:1.6rem;font-size:.83rem;color:var(--on-dark-45);display:flex;gap:.6rem; line-height:1.55} .form{background:rgba(236,229,216,.04);border:1px solid var(--on-dark-18); padding:clamp(1.3rem,3vw,2.5rem);position:relative} .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)} .field{position:relative} .field.full{grid-column:1/-1} .field input,.field select,.field textarea{width:100%;background:transparent;border:0; border-bottom:1px solid var(--on-dark-18);padding:1.5rem 0 .58rem;color:var(--sand);font-size:.97rem; font-weight:300;border-radius:0;appearance:none;transition:border-color .45s var(--e)} .field textarea{min-height:100px;resize:vertical;line-height:1.6} .field label{position:absolute;left:0;top:1.45rem;pointer-events:none;font-size:.94rem; color:var(--on-dark-45);font-weight:300;transform-origin:left top; transition:transform .45s var(--e),color .45s var(--e)} .field input:focus+label,.field textarea:focus+label,.field select:focus+label,.field.filled label{ transform:translateY(-1.4rem) scale(.76);color:var(--brass-l)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--brass-l)} .field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass-l); transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--es)} .field:focus-within::after{transform:scaleX(1)} .field select{cursor:pointer;background-repeat:no-repeat;background-position:right .2rem center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23ece5d8' stroke-opacity='.5' stroke-width='1.3'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")} .field select option{background:#5b432f;color:var(--sand)} .field input[type="date"]{color-scheme:dark} .field-date label{transform:translateY(-1.4rem) scale(.76)} .field-date:not(.filled) input:not(:focus){color:transparent} .field .err{position:absolute;left:0;bottom:-1.1rem;font-size:.71rem;color:var(--brass-l);opacity:0; transform:translateY(-4px);transition:opacity .35s,transform .35s} .field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:var(--brass-l)} .field.invalid .err{opacity:1;transform:none} .fform{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:2.3rem} .fnote{font-size:.79rem;color:var(--on-dark-45);max-width:28ch} .wa-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.82rem 1.3rem;border-radius:999px; background:transparent;cursor:pointer;border:1px solid var(--on-dark-18);font-size:.74rem; letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-70); transition:border-color .45s var(--e),color .45s var(--e),background .45s var(--e)} .wa-btn:hover{border-color:var(--brass-l);color:var(--sand);background:rgba(226,187,125,.18)} .wa-btn svg{width:16px;height:16px;fill:currentColor} .fsucc{position:absolute;inset:0;z-index:5;background:#5b432f;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:clamp(1.4rem,4vw,3rem);gap:.9rem; opacity:0;visibility:hidden;transform:scale(.985); transition:opacity .6s var(--e),transform .7s var(--e),visibility .6s} .fsucc.on{opacity:1;visibility:visible;transform:none} .fsucc .tick{width:62px;height:62px;border-radius:50%;border:1px solid var(--brass-l);display:grid; place-items:center;color:var(--brass-l)} .fsucc .tick svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2; stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40} .fsucc.on .tick svg{animation:draw .9s var(--es) .2s forwards} @keyframes draw{to{stroke-dashoffset:0}} .fsucc h3{font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--sand)} .fsucc p{color:var(--on-dark-70);max-width:38ch} /* ═══════════════════════════════════════════════════════════════════════════ 16 · CONTACT · FOOTER · BUTOANE FLOTANTE ═══════════════════════════════════════════════════════════════════════════ */ .ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,4rem);align-items:start} .info{border-top:1px solid var(--ink-16)} .info li{padding:1.3rem 0;border-bottom:1px solid var(--ink-16);display:grid; grid-template-columns:128px minmax(0,1fr);gap:1rem;align-items:baseline} .info .k{font-size:10px;letter-spacing:.21em;text-transform:uppercase;color:var(--ink-38);font-weight:500} .info .v{font-size:1.01rem;line-height:1.5} .info .v small{display:block;color:var(--ink-55);font-size:.85rem;margin-top:.22rem} .socials{display:flex;gap:.65rem;margin-top:1.7rem} .soc{width:46px;height:46px;border:1px solid var(--ink-16);border-radius:50%;display:grid; place-items:center;transition:background .45s var(--e),color .45s var(--e), border-color .45s var(--e),transform .45s var(--e)} .soc:hover{background:var(--forest);color:var(--sand);border-color:var(--forest);transform:translateY(-3px)} .soc svg{width:17px;height:17px;fill:currentColor} .map-f{position:relative;border:1px solid var(--ink-16);padding:9px;background:var(--cream)} .map-i{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand-d)} .map-i iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0; filter:grayscale(1) sepia(.22) contrast(.95) brightness(1.03); transition:opacity 1s var(--e),filter .7s var(--e)} .map-i iframe.is-ready{opacity:1} .map-f:hover .map-i iframe.is-ready{filter:grayscale(.2) sepia(.05) contrast(1)} .map-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.7rem;text-align:center;padding:2rem; background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(34,26,18,.05) 38px 39px), repeating-linear-gradient(90deg,transparent 0 38px,rgba(34,26,18,.05) 38px 39px), linear-gradient(150deg,#eae0cd,#d6c5aa)} .map-fb .pin{color:var(--brass-d)} .map-fb .pin svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2} .map-fb strong{font-family:var(--serif);font-size:1.15rem;font-weight:400} .map-cap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.8rem; font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-38)} .ft{background:var(--forest-d);color:var(--on-dark);padding-top:clamp(3rem,6vw,5rem); /* spațiu ca butoanele flotante să nu acopere ultimul rând */ padding-bottom:clamp(5.5rem,8vw,7rem)} .ft .bm .b1{color:var(--sand)} .ft .bm .b1 em{color:var(--brass-l)} .ft .bm .b2{color:var(--on-dark-45)} .ft-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.8fr)); gap:clamp(1.8rem,4vw,3.4rem);padding-bottom:clamp(2.4rem,5vw,3.6rem)} .ft-tag{margin-top:1.1rem;color:var(--on-dark-70);max-width:34ch;font-size:.92rem} .ft h4{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-45); font-weight:500;margin-bottom:1rem} .ft li{margin-bottom:.58rem} .ft li a,.ft li span{font-size:.91rem;color:var(--on-dark-70);transition:color .4s var(--e)} .ft li a:hover{color:var(--brass-l)} .ft-legal{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding-top:1.4rem; border-top:1px solid var(--on-dark-18);font-size:.8rem} .ft-legal a{color:var(--on-dark-70);transition:color .4s var(--e)} .ft-legal a:hover{color:var(--brass-l)} .studio-more{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,5rem)} .studio-more-in{display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center; justify-content:space-between} .ft-b{display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;align-items:baseline; padding-top:1.1rem;font-size:.77rem;color:var(--on-dark-45)} .ft-b span{min-width:0} .floats{position:fixed;right:clamp(.9rem,2.2vw,1.8rem);bottom:clamp(.9rem,2.2vw,1.8rem);z-index:120; display:flex;flex-direction:column;gap:.65rem;align-items:center} .fab{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer; border:1px solid var(--ink-16);background:var(--cream);color:var(--ink); box-shadow:0 16px 34px -22px rgba(34,26,18,.75); transition:transform .5s var(--e),background .45s var(--e),color .45s var(--e),opacity .45s,visibility .45s} .fab:hover{transform:translateY(-3px)} .fab svg{width:22px;height:22px} .fab-wa{background:var(--forest);color:var(--sand);border-color:var(--forest)} .fab-wa:hover{background:var(--brass-l);border-color:var(--brass-l);color:var(--forest-d)} .fab-wa svg{fill:currentColor} .fab-top{opacity:0;visibility:hidden} .fab-top.on{opacity:1;visibility:visible} .fab-top svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round} /* ═══════════════════════════════════════════════════════════════════════════ 17 · RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1080px){ .hero-grid,.man-grid,.sc-main,.sc-bottom,.book-grid,.ct-grid{grid-template-columns:1fr} .hero-art{order:2;margin-top:2.6rem} .hero-art .main{--ar:3/2} .ha-c{left:auto;right:3%;bottom:-7%;width:30%} .team{grid-template-columns:repeat(2,1fr)} .readout{grid-template-columns:repeat(2,1fr)} .ft-grid{grid-template-columns:1fr 1fr} .ft-grid>:first-child{grid-column:1/-1} .pin-st{grid-template-columns:1fr;align-content:center;gap:1.4rem} .pin-media{height:min(42vh,340px)} .pin-copy{min-height:13rem} .srv-row{grid-template-columns:auto minmax(0,1fr) auto} .srv-row p{display:none} } /* header: eliberăm spațiul înainte să se înghesuie */ @media (max-width:1180px){ .hdr-tel{display:none} .nav{gap:1.45rem} } @media (max-width:1010px){ .nav{display:none} .burger{display:block} } @media (max-width:900px){ .hgal{height:auto} .hgal-st{position:static;height:auto;display:block;overflow:visible} .hgal-tr{transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;padding-bottom:2.4rem;scrollbar-width:none} .hgal-tr::-webkit-scrollbar{display:none} .hgal-i,.hgal-i.tall{width:min(78vw,400px);scroll-snap-align:center;margin:0 !important; align-self:auto !important} .hgal-i.tall .slot{--ar:4/3} .hgal-i .slot>img{transform:none !important} .hgal-lead{width:min(82vw,440px);scroll-snap-align:center;padding-right:0} .hgal-hint{position:static;padding:0 var(--pad);margin-top:-.6rem} .studio-sec{padding-bottom:clamp(3rem,7vw,5rem)} } @media (max-width:720px){ .stats{grid-template-columns:1fr} .team{grid-template-columns:1fr;gap:2.4rem} .sc-caps{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr} .rev{grid-template-columns:1fr;gap:.3rem} .rev .qm{line-height:.5} .info li{grid-template-columns:1fr;gap:.25rem} .ft-grid{grid-template-columns:1fr} .sc-h{flex-direction:column;gap:.3rem} .srv-row{grid-template-columns:auto minmax(0,1fr);row-gap:.2rem} .srv-row .go{display:none} .founder{grid-template-columns:1fr;text-align:left} } @media (max-width:640px){ .hdr-act .btn{display:none} .cta-mini{display:grid} .hdr-act{gap:.55rem} } @media (max-width:640px){ .hero-art .badge{font-size:8.5px;padding:.5rem .8rem;letter-spacing:.16em} } @media (max-width:440px){ .ha-c{width:34%;right:1%} .readout{grid-template-columns:1fr} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} } /* ═══════════════════════════════════════════════════════════════════════════ 18 · MIȘCARE REDUSĂ — totul rămâne lizibil ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .rv,.stretch,.pin-step{opacity:1 !important;transform:none !important;visibility:visible !important; position:relative !important} .s-rule{transform:scaleX(1) !important} .reveal img{clip-path:none !important} h1.mega .ln>span{transform:none !important} .flow path{stroke-dashoffset:0 !important} .marq-t{animation:none !important} .hgal{height:auto} .hgal-st{position:static;height:auto;display:block;overflow:visible} .hgal-tr{transform:none !important;overflow-x:auto} .hgal-i{margin:0 !important;align-self:auto !important} .hgal-i .slot>img{transform:none !important} .pin{height:auto} .pin-st{position:static;height:auto;padding-block:var(--sec)} .pin-media{height:auto;display:grid;gap:1rem} .pin-media figure{position:relative;opacity:1;transform:none} .pin-media .slot{--ar:4/3} .sc-wire line,.sc-dots circle{opacity:.35 !important} .sc-beam{opacity:0 !important} .tile::after{transform:scaleX(var(--fill,.6)) !important} .swap-box b{position:relative;opacity:1;transform:none} .swap-box b:not(.on){display:none} } /* ═══════════════════════════════════════════════════════════════════════════ 19 · PAGINI INTERIOARE (scaneca.html · studio.html · termeni.html) ═══════════════════════════════════════════════════════════════════════════ */ .subpage{padding-top:0} .page-hero{position:relative;overflow:hidden; padding-top:calc(var(--hdr) + clamp(2rem,5vw,4rem));padding-bottom:clamp(3rem,7vw,6rem)} .page-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,4vw,4rem);align-items:end;position:relative;z-index:1} .page-hero .wrap{position:relative;z-index:1} .crumbs{font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-45)} .crumbs a{transition:color .4s var(--e)} .crumbs a:hover{color:var(--brass-l)} .crumbs span[aria-hidden]{margin-inline:.5em;opacity:.5} .b-sand .crumbs,.b-cream .crumbs{color:var(--ink-38)} /* pași numerotați */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ink-16); border:1px solid var(--ink-16);margin-top:clamp(2.2rem,4vw,3.2rem)} .steps li{background:var(--sand);padding:clamp(1.3rem,2.4vw,1.9rem);position:relative} .steps li b{font-family:var(--serif);font-size:1.6rem;font-weight:300;color:var(--brass-d); display:block;margin-bottom:.7rem} .steps li h3{font-family:var(--serif);font-size:1.24rem;font-weight:400;margin-bottom:.55rem} .steps li p{font-size:.9rem;color:var(--ink-70);line-height:1.6} /* galerie de trei */ .gal-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.8rem); margin-top:clamp(2.4rem,4.5vw,3.6rem)} .gal-3 figcaption{margin-top:.8rem;font-size:var(--fs-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--ink-38)} .b-forest .gal-3 figcaption,.b-forest-d .gal-3 figcaption{color:var(--on-dark-45)} /* carduri „ce măsoară” */ .mas-grid{display:grid;gap:clamp(1.2rem,2.4vw,2rem);margin-top:clamp(2.4rem,4.5vw,3.6rem)} .mas{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem)} .mas .ro-fig{margin-top:0 !important;max-width:820px;width:100%;margin-inline:auto} .mas-txt{max-width:76ch} .mas{border:1px solid var(--on-dark-18);padding:clamp(1.3rem,2.4vw,2.2rem); background:rgba(242,235,223,.04)} .mas-ic{color:var(--brass-l);display:block;margin-bottom:1rem} .mas-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2; stroke-linecap:round;stroke-linejoin:round} .mas h3{font-family:var(--serif);font-size:1.4rem;font-weight:400;margin-bottom:.6rem;color:var(--sand)} .mas p{font-size:.9rem;line-height:1.6;color:var(--on-dark-70)} .mas .slot{background:#0e0c0a} .mas .slot>img{object-fit:contain} .note-src{margin-top:clamp(1.6rem,3vw,2.2rem);font-size:.8rem;color:var(--on-dark-45);max-width:72ch} /* două coloane simple */ .two-col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem);align-items:start} .two-col p+p{margin-top:1.1rem} .ticks{margin-top:1.6rem;display:grid;gap:.7rem} .ticks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start; font-size:.94rem;color:var(--ink-70)} .ticks li::before{content:"";width:14px;height:14px;margin-top:.35em;border-radius:50%; border:1px solid var(--brass);background: radial-gradient(circle at 50% 50%,var(--brass) 0 3px,transparent 3px)} .b-forest .ticks li,.b-forest-d .ticks li{color:var(--on-dark-70)} .b-forest .ticks li::before,.b-forest-d .ticks li::before{border-color:var(--brass-l); background:radial-gradient(circle at 50% 50%,var(--brass-l) 0 3px,transparent 3px)} /* întrebări frecvente */ .faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--ink-16)} .faq details{border-bottom:1px solid var(--ink-16)} .faq summary{list-style:none;cursor:pointer;padding:1.2rem 2.5rem 1.2rem 0;position:relative; font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.32rem);font-weight:400; transition:color .4s var(--e)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--brass-d)} .faq summary::after,.faq summary::before{content:"";position:absolute;right:.35rem;top:50%; background:var(--brass-d);transition:transform .45s var(--es),opacity .45s var(--e)} .faq summary::before{width:14px;height:1px;transform:translateY(-50%)} .faq summary::after{width:1px;height:14px;right:.75rem;transform:translateY(-50%)} .faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0} .faq details p{padding:0 2.5rem 1.4rem 0;color:var(--ink-70);max-width:74ch; animation:faqIn .5s var(--e)} @keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* bandă de final */ .cta-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.6rem,4vw,3.5rem); align-items:center;position:relative;z-index:1} .cta-band-act{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center} @media (max-width:1080px){ .page-hero-grid{grid-template-columns:1fr} .steps{grid-template-columns:repeat(2,1fr)} .mas-grid{grid-template-columns:1fr} .two-col{grid-template-columns:1fr} .cta-band{grid-template-columns:1fr} } @media (max-width:720px){ .steps{grid-template-columns:1fr} .gal-3{grid-template-columns:1fr} .form-grid2{grid-template-columns:1fr} .form-meta{grid-template-columns:repeat(2,1fr)} .form-art-in{width:42%;right:0;bottom:-6%} .founder{grid-template-columns:auto minmax(0,1fr)} .studio-more-in{flex-direction:column;align-items:flex-start} } @media (max-width:520px){ .founder{grid-template-columns:1fr} .form-meta{grid-template-columns:1fr} } /* header peste un hero închis (paginile interioare) */ .subpage .hdr:not(.stuck) .nav a, .subpage .hdr:not(.stuck) .hdr-tel{color:var(--on-dark-70)} .subpage .hdr:not(.stuck) .nav a:hover, .subpage .hdr:not(.stuck) .nav a[aria-current="true"], .subpage .hdr:not(.stuck) .hdr-tel:hover{color:var(--sand)} .subpage .hdr:not(.stuck) .bm .b1{color:var(--sand)} .subpage .hdr:not(.stuck) .bm .b1 em{color:var(--brass-l)} .subpage .hdr:not(.stuck) .bm .b2{color:var(--on-dark-45)} .subpage .hdr:not(.stuck) .burger{border-color:var(--on-dark-18)} .subpage .hdr:not(.stuck) .burger i{background:var(--sand)} .subpage .hdr:not(.stuck) .hdr-act .btn{background:var(--sand);border-color:var(--sand); color:var(--forest-d)} .subpage .hdr:not(.stuck) .hdr-act .btn:hover{color:var(--forest-d);border-color:var(--brass-l)} .subpage .hdr:not(.stuck) .cta-mini{background:var(--sand);color:var(--forest-d)} /* imagini de produs pe fundal negru — nu le tăiem */ .slot.contain{background:#0e0c0a} .slot.contain>img{object-fit:contain} /* ── STUDIO: zone, video, masonry ─────────────────────────────────────────── */ .zones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem); margin-top:clamp(2.4rem,4.5vw,3.6rem)} .zone .slot{box-shadow:0 26px 46px -38px rgba(34,26,18,.8)} .zone:hover .slot>img{transform:scale(1.05)} .zone-b{padding-top:1.1rem} .zone-n{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--brass-d);font-weight:500} .zone h3{font-family:var(--serif);font-size:1.42rem;font-weight:400;margin:.45rem 0 .6rem} .zone p{font-size:.93rem;color:var(--ink-70);line-height:1.62} .vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2rem); margin-top:clamp(2.2rem,4vw,3.2rem)} .vid{position:relative} .vid-el,.vid .yt{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#0e0c0a; border:1px solid var(--on-dark-18);max-height:min(66vh,600px)} .vid-yt .yt{aspect-ratio:16/9} .vid figcaption{margin-top:.8rem;font-size:var(--fs-micro);letter-spacing:.15em; text-transform:uppercase;color:var(--on-dark-45)} /* cadru marcat când filmarea încă nu a fost adăugată */ .vid-fb{position:absolute;inset:0;display:none;flex-direction:column;align-items:center; justify-content:center;gap:.4rem;text-align:center;padding:1.2rem;pointer-events:none; background:linear-gradient(150deg,#3d2c1f,#2a1e15);border:1px dashed var(--on-dark-18)} .vid.missing .vid-fb{display:flex} .vid-fb span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-l)} .vid-fb small{font-size:10px;color:var(--on-dark-45);letter-spacing:.08em} /* buton YouTube (se încarcă doar la click) */ .vid .yt{position:relative;padding:0;cursor:pointer;overflow:hidden} .vid .yt img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .5s var(--e), transform 1.2s var(--e)} .vid .yt:hover img{opacity:.8;transform:scale(1.04)} .yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px; border-radius:50%;background:rgba(242,235,223,.92);display:grid;place-items:center; transition:transform .45s var(--es),background .45s var(--e)} .vid .yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);background:var(--brass-l)} .yt-play svg{width:26px;height:26px;fill:var(--forest-d);margin-left:3px} .yt-hint{position:absolute;left:0;right:0;bottom:0;padding:.5rem;font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--on-dark-45);background:rgba(20,14,9,.7)} .yt-hint code{font-family:ui-monospace,monospace;color:var(--brass-l)} .vid .yt.ready .yt-hint{display:none} .vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block} .masonry{columns:3;column-gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2.2rem,4vw,3.2rem)} .masonry figure{break-inside:avoid;margin-bottom:clamp(1rem,2vw,1.6rem)} .masonry .slot{box-shadow:0 20px 40px -34px rgba(34,26,18,.7)} .masonry figure:hover .slot>img{transform:scale(1.04)} @media (max-width:1080px){ .zones{grid-template-columns:repeat(2,1fr)} .vid-grid{grid-template-columns:repeat(2,1fr)} .masonry{columns:2} } @media (max-width:720px){ .zones{grid-template-columns:1fr} .vid-grid{grid-template-columns:1fr} .masonry{columns:1} } /* ── PAGINA LEGALĂ ────────────────────────────────────────────────────────── */ .legal-nav{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(1.4rem,3vw,2rem)} .legal-nav a{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;padding:.55rem 1rem; border:1px solid var(--on-dark-18);border-radius:999px;color:var(--on-dark-70); transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e)} .legal-nav a:hover{background:var(--brass-l);border-color:var(--brass-l);color:var(--forest-d)} .legal .wrap{max-width:900px} .legal-updated{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-38)} .legal-warn{margin-top:1.4rem;padding:1.1rem 1.3rem;border:1px solid var(--brass); background:rgba(198,154,78,.11);font-size:.9rem;line-height:1.6;color:var(--ink-70)} .legal-warn b{color:var(--ink);font-weight:500} .legal article{margin-top:clamp(3rem,6vw,5rem);scroll-margin-top:calc(var(--hdr) + 20px)} .legal article h2{font-size:clamp(1.7rem,3.4vw,2.6rem)} .legal h3{font-family:var(--serif);font-size:clamp(1.1rem,1.9vw,1.4rem);font-weight:400; margin-top:2rem;margin-bottom:.6rem} .legal p{color:var(--ink-70);margin-bottom:.9rem;max-width:76ch} .legal-list{margin:.4rem 0 1rem;display:grid;gap:.5rem} .legal-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem; color:var(--ink-70);font-size:.95rem;max-width:76ch} .legal-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brass); margin-top:.62em} .legal-note{font-size:.86rem;color:var(--ink-55);border-left:2px solid var(--brass); padding-left:1rem;margin-top:1rem} .legal-table{width:100%;border-collapse:collapse;margin:1rem 0 1.2rem;font-size:.87rem; display:block;overflow-x:auto} .legal-table th,.legal-table td{border:1px solid var(--ink-16);padding:.7rem .8rem; text-align:left;vertical-align:top;min-width:150px} .legal-table th{background:var(--sand-d);font-weight:500;font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-70)} .legal-table td{color:var(--ink-70)} .anpc-badges{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0} .anpc-b{display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1.2rem;border:1px solid var(--ink-16); background:var(--cream);transition:border-color .45s var(--e),transform .45s var(--e)} .anpc-b:hover{border-color:var(--brass);transform:translateY(-2px)} .anpc-b b{font-size:.85rem;letter-spacing:.1em} .anpc-b span{font-size:.78rem;color:var(--ink-55)} /* ═══════════════════════════════════════════════════════════════════════════ 20 · AVATARUL 3D (secțiunea SCANECA, prima pagină) Videoclip oficial SCANECA, pe fundal negru. `screen` scoate negrul, deci modelul plutește direct pe maroul secțiunii. ═══════════════════════════════════════════════════════════════════════════ */ .avatar3d{position:relative;width:min(100%,320px);aspect-ratio:453/680;display:grid; place-items:center; /* `screen` se amestecă doar cu ce e desenat în același context de stivuire. .wrap are z-index, deci fundalul secțiunii nu ajunge aici — îl reproducem, ca negrul din videoclip să dispară complet. */ background:linear-gradient(170deg,#523e30,#4c3729)} .avatar3d-v{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen; filter:contrast(1.06) brightness(1.04)} .avatar3d-ring{position:absolute;left:50%;bottom:6%;width:78%;aspect-ratio:3/1; transform:translateX(-50%);border:1px solid var(--brass-l);border-radius:50%;opacity:.34; animation:ringPulse 6s var(--es) infinite} .avatar3d-ring.r2{width:104%;opacity:.16;border-style:dashed;animation-delay:-3s} @keyframes ringPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.32} 50%{transform:translateX(-50%) scale(1.06);opacity:.16}} .avatar3d-base{position:absolute;left:50%;bottom:4%;width:64%;height:14%; transform:translateX(-50%);pointer-events:none; background:radial-gradient(ellipse at 50% 100%,rgba(226,187,125,.3),transparent 68%)} /* ── suprapuneri în română peste vizualele oficiale SCANECA ──────────────── */ .ro-fig{position:relative;aspect-ratio:1/1;background:#000;overflow:hidden} .ro-fig>img{width:100%;height:100%;object-fit:contain;display:block} .ro-fig .ov{position:absolute;display:flex;align-items:center;justify-content:center; text-align:center;line-height:1.15;color:#fff;font-weight:500; font-size:clamp(7px,1.05vw,13px);letter-spacing:.01em;padding:.2em .3em} .ro-fig .ov.box{background:#3c3c3c} /* peste casetele gri */ .ro-fig .ov.dark{background:#000} /* peste fundalul negru */ .ro-fig .ov.blue{background:#00a6e6;color:#fff} .ro-fig .ov.white{background:#fff;color:#111} .ro-fig .ov.cyan{background:#000;color:#25b6e8} .ro-fig .ov.l{justify-content:flex-start;text-align:left} .ro-fig-cap{margin-top:.8rem;font-size:var(--fs-micro);letter-spacing:.14em; text-transform:uppercase;color:var(--on-dark-45)} .b-sand .ro-fig-cap,.b-cream .ro-fig-cap{color:var(--ink-38)} /* etichetele românești desenate peste vizualele SCANECA */ .ro-fig .ov{position:absolute;display:flex;align-items:center;justify-content:center; text-align:center;line-height:1.1;color:#fff;font-weight:500;overflow:hidden; font-size:var(--ro-fs,10px);letter-spacing:.005em;white-space:nowrap} .ro-fig .ov.split{justify-content:space-between;gap:.3em;padding:0 .35em;font-weight:500} .ro-fig .ov.split b,.ro-fig .ov.split u{font-weight:inherit;text-decoration:none; overflow:hidden;text-overflow:ellipsis} .ro-fig .ov.split u{flex:0 0 auto} .ro-fig .ov.rows{flex-direction:column;justify-content:space-evenly;align-items:stretch; padding:.3em .5em .3em 2.6em} .ro-fig .ro-row{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25} .ro-fig .ro-row b{font-weight:600;font-size:.95em} .ro-fig .ro-row u{text-decoration:none;font-weight:400;opacity:.95} /* ── Instagram, la fiecare trainer ────────────────────────────────────────── */ .tm-ig{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.45rem .85rem; border:1px solid var(--ink-16);border-radius:999px;font-size:.76rem;letter-spacing:.06em; color:var(--ink-70); transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e), transform .45s var(--e)} .tm-ig svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto} .tm-ig:hover{background:var(--forest);border-color:var(--forest);color:var(--sand); transform:translateY(-2px)} .founder .tm-ig{margin-top:1.1rem} /* ═══════════════════════════════════════════════════════════════════════════ 21 · AURA DE SUB CURSOR Un singur element fix, în spatele a tot, era acoperit de fundalul fiecărei secțiuni. Așa că fiecare bandă își desenează propria aură, cu ::after fix, la z-index -1 într-un context de stivuire propriu: iese peste fundalul secțiunii, dar rămâne sub text. Poziția vine dintr-o singură pereche de variabile, actualizate o dată pe cadru. ═══════════════════════════════════════════════════════════════════════════ */ :root{--gx:50vw;--gy:38vh} .hero,.page-hero,.b-sand,.b-sand-d,.b-cream,.b-forest,.b-forest-d,.ft,.marq{isolation:isolate} .hero::after,.page-hero::after,.b-sand::after,.b-sand-d::after,.b-cream::after, .b-forest::after,.b-forest-d::after,.ft::after{ content:"";position:fixed;top:0;left:0;z-index:-1;pointer-events:none; width:140px;height:140px;margin:-70px 0 0 -70px;opacity:0; transform:translate3d(var(--gx),var(--gy),0); background:radial-gradient(circle,rgba(198,154,78,.02) 0%,rgba(198,154,78,.007) 46%, rgba(198,154,78,0) 76%); transition:opacity .7s var(--e);will-change:transform; } /* pe benzile închise aura e mai luminoasă, altfel nu se vede */ .b-forest::after,.b-forest-d::after,.ft::after{ background:radial-gradient(circle,rgba(226,187,125,.028) 0%,rgba(226,187,125,.01) 46%, rgba(226,187,125,0) 76%); } html.glow-on .hero::after,html.glow-on .page-hero::after,html.glow-on .b-sand::after, html.glow-on .b-sand-d::after,html.glow-on .b-cream::after,html.glow-on .b-forest::after, html.glow-on .b-forest-d::after,html.glow-on .ft::after{opacity:1} /* conținutul footerului trebuie să stea peste aură */ .ft .wrap{position:relative;z-index:1} @media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){ .hero::after,.page-hero::after,.b-sand::after,.b-sand-d::after,.b-cream::after, .b-forest::after,.b-forest-d::after,.ft::after{display:none} } /* ═══════════════════════════════════════════════════════════════════════════ 22 · FORMULARUL DE PROGRAMARE — mai viu ═══════════════════════════════════════════════════════════════════════════ */ .form{position:relative;overflow:hidden; background:linear-gradient(155deg,rgba(242,235,223,.075),rgba(242,235,223,.02))} /* contur de alamă care se aprinde când scrii în formular */ .form::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; border:1px solid var(--brass-l);opacity:0;transition:opacity .8s var(--e); } .form:focus-within::before{opacity:.55} /* rază lentă care mătură cardul, o dată la câteva secunde */ .form::after{ content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;z-index:0;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(242,235,223,.07) 45%,transparent); animation:formSweep 9s var(--es) infinite; } @keyframes formSweep{0%{left:-45%}55%,100%{left:115%}} /* ATENȚIE: .fsucc trebuie să rămână `position:absolute` (vezi secț. 15). Dacă îi dai `position:relative` aici, iese din suprapunere, intră în flux și adaugă ~350px de gol sub formular. Are deja z-index:5, deci e oricum peste ::before/::after. */ .form form{position:relative;z-index:1} /* colțuri de alamă, ca un cadru de aparat foto */ .form-corner{position:absolute;width:18px;height:18px;z-index:2;pointer-events:none; border-color:var(--brass-l);opacity:.6;transition:opacity .6s var(--e), width .6s var(--es),height .6s var(--es)} .form-corner.tl{top:10px;left:10px;border-top:1px solid;border-left:1px solid} .form-corner.tr{top:10px;right:10px;border-top:1px solid;border-right:1px solid} .form-corner.bl{bottom:10px;left:10px;border-bottom:1px solid;border-left:1px solid} .form-corner.br{bottom:10px;right:10px;border-bottom:1px solid;border-right:1px solid} .form:focus-within .form-corner{width:26px;height:26px;opacity:1} /* eticheta câmpului activ capătă un punct de alamă */ .field::before{content:"";position:absolute;left:-14px;top:1.55rem;width:5px;height:5px; border-radius:50%;background:var(--brass-l);opacity:0;transform:scale(.4); transition:opacity .4s var(--e),transform .5s var(--es)} .field:focus-within::before{opacity:1;transform:none} /* progresul completării */ .form-progress{position:relative;height:2px;background:var(--on-dark-18);margin-bottom:2.4rem} .form-progress i{position:absolute;inset:0 auto 0 0;width:0;background:var(--brass-l); transition:width .7s var(--es)} .form-progress span{position:absolute;right:0;top:.55rem;font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--brass-l);opacity:.85} @media (max-width:720px){ .field::before{display:none} } @media (prefers-reduced-motion:reduce){ .form::after{animation:none;display:none} } /* buton de redare pe clipurile din studio (se redau doar la click) */ .vid{position:relative} .vid-play{position:absolute;inset:0;z-index:3; border:0;background:transparent;cursor:pointer;display:grid;place-items:center; color:var(--sand);transition:background .5s var(--e)} .vid-play:hover{background:rgba(20,14,9,.28)} .vp-ring{position:absolute;width:74px;height:74px;border-radius:50%; background:rgba(20,14,9,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(242,235,223,.35); transition:transform .5s var(--es),background .45s var(--e),border-color .45s var(--e)} .vid-play:hover .vp-ring{transform:scale(1.09);background:var(--brass-l);border-color:var(--brass-l)} .vid-play svg{position:relative;width:26px;height:26px;fill:currentColor;stroke:currentColor; stroke-width:2;stroke-linecap:round;transition:color .45s var(--e)} .vid-play:hover svg{color:var(--forest-d)} .vp-i{margin-left:4px} .vp-p{display:none;fill:none} /* în timpul redării butonul devine „pauză” și se retrage */ .vid.playing .vid-play{background:transparent} .vid.playing .vid-play .vp-ring{opacity:0;transform:scale(.7)} .vid.playing .vid-play svg{opacity:0} .vid.playing .vid-play:hover .vp-ring{opacity:1;transform:scale(1)} .vid.playing .vid-play:hover svg{opacity:1} .vid.playing .vp-i{display:none} .vid.playing .vp-p{display:block} .vid-el{cursor:pointer} /* Elementele de grilă au implicit min-width:auto, deci un copil lat (o imagine, o scenă cu aspect fix) poate lăți coloana peste ecran. Le lăsăm să se strângă. */ .sc-main>*,.sc-bottom>*,.book-grid>*,.two-col>*,.form-grid2>*,.page-hero-grid>*, .hero-grid>*,.man-grid>*,.ct-grid>*,.zones>*,.team>*,.vid-grid>*,.mas{min-width:0} .cmp-stage{width:100%} /* ── carduri traineri: nume complet, formare, contact ─────────────────────── */ .tm-full{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-38); margin-top:.5rem !important} .tm-cred{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem} .tm-cred li{font-size:.7rem;letter-spacing:.05em;padding:.32rem .65rem;border-radius:999px; border:1px solid var(--ink-16);color:var(--ink-55);line-height:1.35} .tm-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem} .tm-tel{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border-radius:999px; border:1px solid var(--ink-16);font-size:.74rem;letter-spacing:.05em;color:var(--ink-70); transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e), transform .45s var(--e)} .tm-tel svg{width:13px;height:13px;flex:0 0 auto} .tm-tel:hover{background:var(--forest);border-color:var(--forest);color:var(--sand); transform:translateY(-2px)} .tm-tel.todo{border-color:rgba(198,154,78,.34)} .tm-ig{margin-top:0} /* tabel de program */ .hours{border-collapse:collapse;margin-top:.15rem} .hours th{text-align:left;font-weight:400;color:var(--ink-55);font-size:.92rem; padding:.16rem 1.4rem .16rem 0;white-space:nowrap} .hours td{font-size:.95rem;color:var(--ink);padding:.16rem 0} /* filmarea verticală din hero-ul paginii SCANECA */ .page-hero .vid{max-width:400px;margin-inline:auto;width:100%} .page-hero .vid .vid-el{aspect-ratio:9/16;max-height:min(74vh,700px); border-color:var(--on-dark-18)} .page-hero .vid .vid-fb{background:linear-gradient(150deg,#3d2c1f,#2a1e15)} /* citatele trainerilor — la persoana întâi, între ghilimele */ .tm-say{position:relative;margin-top:.9rem;padding-left:1.05rem;font-family:var(--serif); font-size:1.02rem;font-style:italic;line-height:1.55;color:var(--ink-70); border-left:2px solid var(--brass)} .tm-say::before,.tm-say::after{font-style:normal;color:var(--brass-d)} .tm-say::before{content:"„"} .tm-say::after{content:"”"} /* ═══════════════════════════════════════════════════════════════════════════ 24 · FORMARE PROFESIONALĂ (formare.html) Cardurile de curs, linia „cum decurge”, blocul formatorului. ═══════════════════════════════════════════════════════════════════════════ */ /* ── cele două cursuri ─────────────────────────────────────────────────── */ /* Distanță mare între carduri + numerotare + suprafață proprie: trebuie să se vadă din prima că sunt DOUĂ programe separate, nu o listă continuă. */ .crs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,4.5vw,4.5rem);margin-top:clamp(2.6rem,5vw,4rem);position:relative} /* linia verticală dintre cele două cursuri */ .crs-grid::before{content:"";position:absolute;top:8%;bottom:8%;left:50%;width:1px; background:linear-gradient(to bottom,transparent,var(--ink-16) 18%,var(--ink-16) 82%,transparent); pointer-events:none} .crs{position:relative;display:flex;flex-direction:column;min-width:0; background:var(--sand);border:1px solid var(--ink-16); padding:clamp(1.6rem,3vw,2.6rem); box-shadow:0 20px 44px -40px rgba(34,26,18,.6); transition:box-shadow .7s var(--e),transform .7s var(--e),border-color .7s var(--e)} .crs:hover{transform:translateY(-4px);border-color:rgba(198,154,78,.45); box-shadow:0 34px 60px -42px rgba(34,26,18,.8)} /* bara de alamă de sus: se trage singură când cardul intră în ecran */ .crs::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px; background:var(--brass);transform:scaleX(0);transform-origin:left center; transition:transform 1.1s var(--es) .15s} .crs.in::before{transform:scaleX(1)} /* numărul cursului, mare și decorativ, în colțul din dreapta sus */ .crs::after{content:attr(data-n);position:absolute;right:clamp(1rem,2vw,1.6rem); top:clamp(.7rem,1.4vw,1.1rem);font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem); font-weight:300;line-height:1;color:var(--ink);opacity:.07;pointer-events:none} .crs-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-micro); letter-spacing:.2em;text-transform:uppercase;color:var(--brass-d);font-weight:500} .crs-tag::before{content:"";width:18px;height:1px;background:var(--brass)} .crs h3{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:400; line-height:1.18;margin:.7rem 0 .6rem} .crs>p{font-size:.93rem;color:var(--ink-70);line-height:1.64} .crs-price{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap; margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--ink-16)} .crs-price b{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.4rem);font-weight:300; color:var(--ink);line-height:1} .crs-price span{font-size:.83rem;color:var(--ink-55)} /* tabelul de specificații */ .crs-meta{margin-top:1.4rem;border:1px solid var(--ink-16);border-collapse:collapse;width:100%} .crs-meta tr{border-bottom:1px solid var(--ink-16)} .crs-meta tr:last-child{border-bottom:0} .crs-meta tr:nth-child(odd){background:rgba(246,241,231,.6)} .crs-meta th{width:34%;text-align:left;font-size:var(--fs-micro);letter-spacing:.13em; text-transform:uppercase;color:var(--ink-38);font-weight:500; padding:.7rem .9rem;vertical-align:middle;border-right:1px solid var(--ink-16)} .crs-meta td{padding:.7rem .9rem;font-size:.91rem;color:var(--ink);vertical-align:middle} .crs-meta td b{font-weight:500;color:var(--brass-d)} .crs h4{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-38);font-weight:500;margin:1.5rem 0 .2rem} .crs .ticks{margin-top:.9rem} .crs .ticks li{font-size:.89rem} .crs-act{margin-top:auto;padding-top:1.8rem} /* ── linia „cum decurge” ───────────────────────────────────────────────── */ .cflow{margin-top:clamp(3.4rem,6vw,5.5rem);padding-top:clamp(2.4rem,4vw,3.4rem); border-top:1px solid var(--ink-16)} .cflow-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem 1.4rem} .cflow-head h3{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:400; color:var(--ink)} .cflow-head p{font-size:.9rem;color:var(--ink-55);max-width:52ch} /* resetul global acoperă doar