/* ============================================================ WEBANO — stylesheet unic, optimizat. Identitate: editorial-tech premium. Miezul nopții (indigo) + cobalt electric + lime. Navbar liquid-glass. Teme: dark (implicit) + light. Fonturi: Fraunces/Instrument Sans/Fragment Mono. Fraunces (display) · Instrument Sans (text) · Fragment Mono (tehnic) Fonturile se încarcă din cu preconnect (nu @import). ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root,:root[data-theme="dark"]{ --ink:#0a0e1f; /* miezul nopții — indigo */ --ink-2:#10162f; --ink-3:#1a2348; --paper:#e8eeff; /* alb rece */ --paper-dim:#9aa6cf; --paper-faint:#62709c; --accent:#3b6dff; /* cobalt electric */ --accent-deep:#2348d6; --accent-2:#c6f24e; /* lime/chartreuse — accentul care pocnește */ --accent-ink:#ffffff; /* text pe cobalt */ --glow:rgba(59,109,255,.30); --glow-2:rgba(198,242,78,.20); --live:#c6f24e; /* punct „online" lime, electric */ --line:rgba(232,238,255,.11); --line-strong:rgba(232,238,255,.24); --nav-bg:rgba(10,14,31,.82); --glass-bg:linear-gradient(180deg,rgba(48,72,150,.40),rgba(12,18,42,.42)); --glass-brd:rgba(120,160,255,.32); --glass-hi:rgba(200,220,255,.22); --glass-sheen:rgba(120,200,255,.20); --card:var(--ink-2); --grain:.045; --stroke-faint:rgba(232,238,255,.07); --shadow-deep:0 40px 80px -30px rgba(0,0,0,.72); color-scheme:dark; } :root[data-theme="light"]{ --ink:#f3f6ff; /* alb rece, ușor albăstrui */ --ink-2:#e8eefc; --ink-3:#dbe4fa; --paper:#0a1024; --paper-dim:#46527a; --paper-faint:#8593bc; --accent:#2348d6; /* cobalt mai închis pt. contrast pe alb */ --accent-deep:#15309e; --accent-2:#5f8f0a; /* lime mai închis pt. contrast pe alb */ --accent-ink:#ffffff; --glow:rgba(35,72,214,.16); --glow-2:rgba(95,143,10,.14); --live:#3a8f1f; --line:rgba(10,16,36,.10); --line-strong:rgba(10,16,36,.18); --nav-bg:rgba(243,246,255,.82); --glass-bg:linear-gradient(180deg,rgba(255,255,255,.72),rgba(232,238,255,.55)); --glass-brd:rgba(35,72,214,.26); --glass-hi:rgba(255,255,255,.9); --glass-sheen:rgba(255,255,255,.6); --card:#ffffff; --grain:.02; --stroke-faint:rgba(10,16,36,.08); --shadow-deep:0 30px 60px -28px rgba(20,30,70,.22); color-scheme:light; } :root{ --display:'Fraunces',Georgia,serif; --body:'Instrument Sans',system-ui,sans-serif; --mono:'Fragment Mono',ui-monospace,monospace; --grad:linear-gradient(115deg,var(--accent),var(--accent-deep)); --max:1240px; --pad:clamp(20px,4vw,56px); } /* ---------- 2. BAZĂ ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)} body{ background:transparent;color:var(--paper); font-family:var(--body);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:color .4s; } /* aurora atmosferică — lumini cobalt + lime care plutesc lent în spate */ body::before{ content:"";position:fixed;inset:-12%;z-index:-1;pointer-events:none; background: radial-gradient(38% 32% at 14% 18%,rgba(59,109,255,.18),transparent 60%), radial-gradient(32% 28% at 86% 26%,rgba(198,242,78,.10),transparent 60%), radial-gradient(44% 38% at 72% 88%,rgba(59,109,255,.14),transparent 60%), radial-gradient(30% 26% at 30% 82%,rgba(120,90,255,.10),transparent 60%); animation:aurora 26s ease-in-out infinite alternate; } :root[data-theme="light"] body::before{opacity:.5} @keyframes aurora{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(2.5%,-2%,0) scale(1.1)} 100%{transform:translate3d(-2.5%,2%,0) scale(1.05)} } /* bară de progres la scroll (cobalt → lime) */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px var(--glow);pointer-events:none;will-change:width} ::selection{background:var(--accent);color:var(--accent-ink)} a{color:inherit;text-decoration:none} img,svg,video{display:block;max-width:100%} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} .skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:var(--accent-ink);padding:10px 18px;border-radius:0 0 8px 0;font-weight:600} .skip-link:focus{left:0} /* granulație de film */ body::after{ content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity:var(--grain);animation:grain 9s steps(10) infinite; } @keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,1%)}30%{transform:translate(2%,-2%)}50%{transform:translate(-1%,2%)}70%{transform:translate(3%,1%)}90%{transform:translate(-3%,-1%)}} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)} .mono.accent,.mono.copper{color:var(--accent)} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- 3. NAV — liquid glass ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:14px var(--pad);pointer-events:none;transition:padding .4s} .nav.scrolled{padding-top:10px} .nav-in{ pointer-events:auto;position:relative;max-width:var(--max);width:100%; display:flex;align-items:center;gap:28px; padding:9px 12px 9px 22px;border-radius:20px;overflow:hidden;isolation:isolate; background:var(--glass-bg); -webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%); border:1px solid var(--glass-brd); box-shadow:0 14px 44px -16px rgba(0,0,0,.55),inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(0,0,0,.18); transition:box-shadow .4s,border-color .4s,transform .4s; } /* sheen specular care „prinde lumina" în colțul de sus */ .nav-in::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1; background:radial-gradient(130% 120% at 0% -10%,var(--glass-sheen),transparent 46%),linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%)} /* dunga aurie fină pe muchia de sus = reflexie de sticlă */ .nav-in::after{content:"";position:absolute;left:18%;right:18%;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5} .nav.scrolled .nav-in{box-shadow:0 18px 50px -18px rgba(0,0,0,.7),inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(0,0,0,.2);border-color:var(--glass-brd)} .logo{font-family:var(--display);font-weight:640;font-style:italic;font-size:1.5rem;letter-spacing:-.045em;display:flex;align-items:center;gap:10px;flex:none} .logo img,.logo svg{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 8px var(--glow))} .logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .nav-links{display:flex;gap:6px;margin-left:auto;align-items:center} .nav-links a{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-dim);transition:.25s;position:relative;white-space:nowrap;padding:9px 14px;border-radius:11px} .nav-links a:hover{color:var(--paper);background:rgba(255,255,255,.06)} .nav-links a.act{color:var(--paper);background:var(--glow)} .nav-cta{margin-left:6px;background:var(--grad);color:var(--accent-ink)!important;font-weight:700;padding:10px 18px!important;border-radius:12px!important;box-shadow:0 6px 18px -6px var(--glow);transition:.25s} .nav-cta:hover{filter:brightness(1.08);transform:translateY(-1px);background:var(--grad);color:var(--accent-ink)!important} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--glass-brd);border-radius:50%;color:var(--paper-dim);cursor:pointer;background:rgba(255,255,255,.04);transition:.25s;flex:none} .theme-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--glow)} .theme-toggle svg{width:16px;height:16px} /* hamburger */ .nav-burger{display:none;width:40px;height:40px;border:1px solid var(--glass-brd);border-radius:11px;background:rgba(255,255,255,.04);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none} .nav-burger i{display:block;width:18px;height:2px;background:var(--paper);border-radius:2px;transition:.3s;font-style:normal} .nav.open .nav-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.open .nav-burger i:nth-child(2){opacity:0} .nav.open .nav-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:960px){ .nav-burger{display:flex;margin-left:auto;order:3} .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0; background:var(--glass-bg);-webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%); border:1px solid var(--glass-brd);border-radius:18px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-hi); flex-direction:column;align-items:stretch;gap:4px;padding:12px;margin:0;display:none} .nav.open .nav-links{display:flex} .nav-links a{padding:13px 14px;font-size:.74rem} .nav-cta{margin:8px 0 0;text-align:center} .theme-toggle{position:absolute;top:-52px;right:calc(var(--pad) + 54px)} } /* ---------- 4. HERO ---------- */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;padding-top:clamp(96px,13vh,150px);padding-bottom:clamp(34px,6vh,70px);isolation:isolate} .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 45% at 26% 92%,var(--glow),transparent 62%),radial-gradient(50% 40% at 92% 18%,var(--glow-2),transparent 60%)} .hero-img{position:absolute;inset:0;z-index:-2;overflow:hidden} .hero-img img{width:100%;height:100%;object-fit:cover;opacity:.5;animation:heroZoom 18s ease-out forwards} @keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}} .hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,31,.55) 0%,rgba(10,14,31,.12) 40%,rgba(10,14,31,.92) 88%,var(--ink) 100%)} :root[data-theme="light"] .hero-img img{opacity:.28} :root[data-theme="light"] .hero-img::after{background:linear-gradient(180deg,rgba(243,246,255,.45) 0%,rgba(243,246,255,.1) 40%,rgba(243,246,255,.94) 88%,var(--ink) 100%)} .hero h1{font-family:var(--display);font-size:clamp(2.9rem,10vw,8.6rem);font-weight:560;line-height:.96;letter-spacing:-.035em;font-variation-settings:"opsz" 144,"SOFT" 30} .hero h1 em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;text-shadow:0 0 60px var(--glow)} :root[data-theme="light"] .hero h1 em{text-shadow:none} .hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:44px;flex-wrap:wrap} .hero-sub{max-width:460px;color:var(--paper-dim);font-size:1.05rem} .hero-sub strong{color:var(--paper)} .hero-meta{display:flex;gap:36px;flex-wrap:wrap} .hero-meta div b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--paper)} .hero-meta div span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)} .scroll-hint{position:absolute;right:var(--pad);bottom:7vh;writing-mode:vertical-rl;font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint);display:flex;align-items:center;gap:12px} .scroll-hint::after{content:"";width:1px;height:54px;background:linear-gradient(var(--accent),transparent);animation:drip 2s infinite} @keyframes drip{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1);transform-origin:top}} @media(max-width:880px){.scroll-hint{display:none}} /* badge gratuit */ .free-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--accent);border-radius:30px;padding:8px 18px;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);background:var(--glow)} .free-pill i{width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 2.4s infinite;font-style:normal;flex:none} @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,220,151,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(61,220,151,0)}} /* bandă de încredere */ .trustbar{display:flex;gap:clamp(18px,4vw,54px);align-items:center;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);margin-top:40px} .trustbar span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint);display:flex;align-items:center;gap:9px} .trustbar span b{color:var(--accent-2);font-weight:400} /* ---------- 5. MARQUEE ---------- */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;background:var(--ink-2)} .marquee-track{display:flex;width:max-content;animation:mq 32s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);padding:0 28px;white-space:nowrap} .marquee-track span i{color:var(--accent);font-style:normal;margin-right:28px} @keyframes mq{to{transform:translateX(-50%)}} /* ---------- 6. SECȚIUNI ---------- */ section{padding:clamp(68px,11vh,128px) 0;position:relative} section.tight{padding:clamp(40px,6vh,70px) 0} .band{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sec-head{display:flex;align-items:baseline;gap:26px;margin-bottom:clamp(36px,6vh,68px);flex-wrap:wrap} .sec-num{font-family:var(--mono);color:var(--accent);font-size:.8rem;letter-spacing:.2em} .sec-head h2{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.6rem);font-weight:560;letter-spacing:-.03em;line-height:1.05;font-variation-settings:"opsz" 100;text-wrap:balance} .sec-head h2 em,.sec-head h2 .grad-text{font-style:italic;color:var(--accent)} .sec-head p{margin-left:auto;max-width:380px;color:var(--paper-dim);font-size:.95rem} /* reveal on scroll */ .rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.22s}.rv.d3{transition-delay:.34s}.rv.d4{transition-delay:.46s} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} body::after,.hero-img img,.marquee-track{animation:none!important} html{scroll-behavior:auto} } /* ---------- 7. BUTOANE ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:9px;font-family:var(--mono);font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--paper);transition:.3s;cursor:pointer;background:none} .btn:hover{border-color:var(--accent);color:var(--accent)} .btn.solid{background:var(--grad);border:none;color:var(--accent-ink);font-weight:700;box-shadow:0 10px 40px -10px var(--glow)} .btn.solid:hover{color:var(--accent-ink);filter:brightness(1.12);box-shadow:0 14px 48px -10px var(--glow)} .btn-row{display:flex;gap:16px;flex-wrap:wrap} /* ---------- 8. CARDS PRODUS ---------- */ .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} @media(max-width:880px){.prod-grid{grid-template-columns:1fr}} .prod{background:var(--ink);padding:42px 34px 38px;position:relative;overflow:hidden;transition:.35s;min-height:320px;display:flex;flex-direction:column} .prod:hover{background:var(--ink-3)} .prod::before{content:attr(data-n);position:absolute;top:-28px;right:-6px;font-family:var(--display);font-size:9rem;font-weight:900;color:transparent;-webkit-text-stroke:1px var(--stroke-faint);line-height:1;transition:.35s} .prod:hover::before{-webkit-text-stroke-color:var(--glow)} .prod h3{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;margin:18px 0 12px} .prod p{color:var(--paper-dim);font-size:.95rem;flex:1} .prod .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .prod .more{margin-top:26px;font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper);display:inline-flex;align-items:center;gap:10px} .prod .more::after{content:"→";color:var(--accent);transition:.3s} .prod:hover .more::after{transform:translateX(6px)} .prod:hover .tag{color:var(--accent-2)} /* ---------- 9. BROWSER MOCKUP ---------- */ .browser{border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:var(--ink-2);box-shadow:var(--shadow-deep)} .browser-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--ink-3)} .b-dots{display:flex;gap:7px} .b-dots i{width:11px;height:11px;border-radius:50%;background:var(--line-strong)} .b-dots i:first-child{background:#e06c5a}.b-dots i:nth-child(2){background:#d8b14a}.b-dots i:last-child{background:#58b86a} .b-url{flex:1;max-width:430px;margin:0 auto;background:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 14px;font-family:var(--mono);font-size:.68rem;color:var(--paper-dim);display:flex;align-items:center;gap:8px} .b-url::before{content:"🔒";font-size:.6rem;filter:grayscale(1) brightness(1.4)} .b-url b{color:var(--live);font-weight:400} .browser-body{position:relative} .browser-body img{width:100%} /* ---------- 10. TERMINAL (mereu dark) ---------- */ .term{background:#070b1a;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;font-family:var(--mono);font-size:.8rem;line-height:1.75;box-shadow:var(--shadow-deep)} .term-bar{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(242,234,217,.1);background:#0d1430;gap:14px} .term-bar .b-dots i{background:#28335c} .term-bar .b-dots i:first-child{background:#e06c5a}.term-bar .b-dots i:nth-child(2){background:#d8b14a}.term-bar .b-dots i:last-child{background:#7faa5a} .term-bar .t-title{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#6f7da6;margin:0 auto} .term-body{padding:22px 24px;min-height:300px;color:#e8eeff} .term-body .ln{display:block;white-space:pre-wrap} .term-body .c-dim{color:#6f7da6} .term-body .c-cu{color:#79a0ff} .term-body .c-ok{color:#c6f24e} .term-body .c-w{color:#e8eeff} .cursor{display:inline-block;width:8px;height:15px;background:#79a0ff;vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} /* chat bubbles */ .chat{display:flex;flex-direction:column;gap:14px;padding:24px} .msg{max-width:78%;padding:13px 17px;border-radius:12px;font-size:.9rem;line-height:1.55} .msg.user{align-self:flex-end;background:var(--grad);color:var(--accent-ink);border-bottom-right-radius:3px;font-weight:500} .msg.ai{align-self:flex-start;background:var(--ink-3);border:1px solid var(--line);border-bottom-left-radius:3px;color:var(--paper-dim)} .msg.ai b{color:var(--paper)} .msg .who{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px;opacity:.7} .msg.ai .who{color:var(--accent);opacity:1} /* ---------- 11. SPLIT EDITORIAL ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center} @media(max-width:880px){.split{grid-template-columns:1fr}} .split .body-l{font-size:clamp(1.2rem,1.8vw,1.5rem);font-family:var(--display);font-weight:430;line-height:1.45;letter-spacing:-.01em;color:var(--paper)} .split .body-l em{color:var(--accent);font-style:italic} .split p+p{margin-top:1.1em} .split .small{color:var(--paper-dim);font-size:.97rem;font-family:var(--body)} .figure{position:relative} .figure img{border-radius:10px;filter:saturate(.95) contrast(1.03)} .figure figcaption{display:flex;justify-content:space-between;gap:14px;margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)} .figure figcaption b{color:var(--accent);font-weight:400} .figure.offset{margin-top:60px} @media(max-width:880px){.figure.offset{margin-top:0}} /* ---------- 12. STATS ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--line);gap:1px;border-radius:14px;overflow:hidden} @media(max-width:880px){.stats{grid-template-columns:1fr 1fr}} .stat{background:var(--ink);padding:34px 28px} .stat b{font-family:var(--display);font-size:clamp(2.3rem,4vw,3.4rem);font-weight:560;letter-spacing:-.03em;display:block;line-height:1} .stat b i{color:var(--accent);font-style:normal} .stat span{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-top:10px} /* ---------- 13. PORTFOLIO ---------- */ .work-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.5vw,48px)} @media(max-width:880px){.work-grid{grid-template-columns:1fr}} .work{position:relative;display:block} .work .browser{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s} .work:hover .browser{transform:translateY(-8px);box-shadow:0 60px 100px -30px rgba(0,0,0,.85),0 0 0 1px var(--glow)} .work .browser-body{overflow:hidden} .work .browser-body img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1);aspect-ratio:16/10;object-fit:cover} .work:hover .browser-body img{transform:scale(1.05)} .work-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;gap:14px} .work-meta h3{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em} .work-meta .mono{font-size:.64rem} .work-desc{color:var(--paper-dim);font-size:.92rem;margin-top:6px;max-width:480px} .work-badge{position:absolute;top:54px;right:18px;z-index:3;background:var(--ink);border:1px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;padding:6px 12px;border-radius:30px;display:flex;gap:8px;align-items:center} .work-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 2.4s infinite} /* ---------- 14. PRICING ---------- */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px);align-items:stretch} @media(max-width:880px){.price-grid{grid-template-columns:1fr}} .price{border:1px solid var(--line);border-radius:14px;padding:40px 34px;display:flex;flex-direction:column;background:var(--card);position:relative;transition:.3s} .price:hover{border-color:var(--line-strong);transform:translateY(-4px)} .price.feat{background:linear-gradient(160deg,var(--ink-3),var(--ink-2));border-color:var(--accent)} :root[data-theme="light"] .price.feat{background:linear-gradient(160deg,#eef3ff,#ffffff)} .price.feat::before{content:"RECOMANDAT";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--grad);color:var(--accent-ink);font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;padding:4px 14px;border-radius:20px;font-weight:700} .price h3{font-family:var(--display);font-size:1.45rem;font-weight:600} .price .amount{font-family:var(--display);font-size:clamp(2.6rem,4vw,3.6rem);font-weight:560;letter-spacing:-.03em;margin:18px 0 4px;line-height:1} .price .amount small{font-size:1rem;font-family:var(--mono);color:var(--paper-faint);letter-spacing:0} .price .per{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:26px} .price ul{list-style:none;flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:30px} .price li{padding-left:26px;position:relative;color:var(--paper-dim);font-size:.93rem} .price li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-2);font-weight:700} .price li b{color:var(--paper);font-weight:600} /* ---------- 15. TABELE ---------- */ .spec{width:100%;border-collapse:collapse;font-size:.95rem} .spec tr{border-bottom:1px solid var(--line)} .spec td{padding:18px 10px;vertical-align:top} .spec td:first-child{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);width:34%} .spec td b{color:var(--accent);font-weight:600} .cmp{width:100%;border-collapse:collapse;font-size:.93rem} .cmp th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:16px 14px;text-align:left;color:var(--paper-faint);border-bottom:1px solid var(--line-strong)} .cmp th.us{color:var(--accent)} .cmp td{padding:15px 14px;border-bottom:1px solid var(--line);color:var(--paper-dim);vertical-align:top} .cmp tr:hover td{background:var(--ink-3)} .cmp td:first-child{color:var(--paper);font-weight:500} .cmp td.us{color:var(--paper);background:var(--glow);border-left:1px solid var(--accent);border-right:1px solid var(--accent)} .cmp .y{color:var(--accent);font-weight:700} .cmp .n{color:var(--paper-faint)} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- 16. GRAFICE ANIMATE ---------- */ .bench{display:grid;gap:22px} .bench .row{display:grid;grid-template-columns:170px 1fr 86px;gap:18px;align-items:center} @media(max-width:700px){.bench .row{grid-template-columns:1fr;gap:6px}} .bench .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-dim)} .bench .lbl b{display:block;color:var(--paper);font-size:.72rem} .bench .track{height:30px;background:var(--ink-3);border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative} .bench .fill{height:100%;width:0;border-radius:5px;background:var(--grad);transition:width 1.6s cubic-bezier(.2,.7,.2,1) .2s;position:relative} .bench .fill.bad{background:linear-gradient(90deg,#3c465c,#566380)} :root[data-theme="light"] .bench .fill.bad{background:linear-gradient(90deg,#c4cddd,#a8b4c9)} .bench .fill::after{content:"";position:absolute;top:0;bottom:0;right:0;width:26px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2))} .rv.in .bench .fill{width:var(--w)} .bench .val{font-family:var(--mono);font-size:.78rem;color:var(--accent);text-align:right} .bench .val.dim{color:var(--paper-faint)} .spark-card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:26px 26px 18px;position:relative;overflow:hidden} .spark-card .sk-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:12px;flex-wrap:wrap} .spark-card .sk-head b{font-family:var(--display);font-size:1.9rem;font-weight:600;letter-spacing:-.02em} .spark-card .sk-head b i{color:var(--accent);font-style:normal} .spark-card .sk-head span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)} .spark{width:100%;height:74px;display:block} .spark .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1} .spark .area{fill:url(#sparkfill);opacity:0;transition:opacity 1s 1.4s} .rv.in .spark .line{animation:sparkdraw 2.2s cubic-bezier(.4,0,.2,1) .3s forwards} .rv.in .spark .area{opacity:1} @keyframes sparkdraw{to{stroke-dashoffset:0}} .spark-card .sk-foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);margin-top:8px;gap:10px} @property --p{syntax:'';inherits:false;initial-value:0} .donut{--p:0;width:148px;height:148px;border-radius:50%;display:grid;place-items:center;position:relative; background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--ink-3) 0); transition:--p 1.8s cubic-bezier(.2,.7,.2,1) .3s} .rv.in .donut{--p:var(--target,100)} .donut::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--ink-2)} :root[data-theme="light"] .donut::before{background:#fff} .donut b{position:relative;font-family:var(--display);font-size:2.3rem;font-weight:600;letter-spacing:-.02em} .donut-row{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;justify-content:space-between} .donut-item{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;min-width:140px} .donut-item span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);text-align:center} .vitals{display:grid;gap:20px} .vital{display:grid;grid-template-columns:110px 1fr 120px;gap:16px;align-items:center} @media(max-width:700px){.vital{grid-template-columns:1fr}} .vital .vlbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)} .vital .vlbl small{display:block;color:var(--paper-faint);font-size:.56rem;text-transform:none;letter-spacing:.04em} .vital .zone{height:10px;border-radius:6px;position:relative;background:linear-gradient(90deg,#22c55e 0 38%,#eab308 38% 66%,#ef4444 66% 100%);opacity:.85} .vital .pin{position:absolute;top:-5px;width:4px;height:20px;border-radius:2px;background:var(--paper);left:0;transition:left 1.6s cubic-bezier(.2,.7,.2,1) .3s;box-shadow:0 0 12px var(--glow)} .rv.in .vital .pin{left:var(--x)} .vital .vval{font-family:var(--mono);font-size:.76rem;color:var(--accent-2);text-align:right} /* ---------- 17. TESTIMONIALE ---------- */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)} @media(max-width:900px){.testi-grid{grid-template-columns:1fr}} .testi{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:30px 28px;display:flex;flex-direction:column;gap:18px;position:relative;transition:.3s} .testi:hover{border-color:var(--line-strong);transform:translateY(-4px)} .testi::before{content:"„";position:absolute;top:6px;right:18px;font-family:var(--display);font-size:5rem;font-weight:900;color:var(--glow);line-height:1} .testi p{color:var(--paper-dim);font-size:.96rem;flex:1;position:relative} .testi p b{color:var(--paper)} .testi .who{display:flex;align-items:center;gap:14px} .testi .av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--accent-ink);font-size:1rem;flex:none} .testi .who b{display:block;font-size:.92rem;color:var(--paper)} .testi .who span{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint)} .testi .stars{color:#f0b429;font-size:.8rem;letter-spacing:3px} /* ---------- 18. FAQ ---------- */ .faq{display:grid;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:20px;padding:24px 0;font-family:var(--display);font-size:1.25rem;font-weight:560;letter-spacing:-.01em;transition:color .25s} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.1rem;transition:transform .3s;flex:none} .faq details[open] summary::before{transform:rotate(45deg)} .faq summary:hover{color:var(--accent)} .faq .a{padding:0 0 26px 38px;color:var(--paper-dim);font-size:.97rem;max-width:720px} .faq .a b{color:var(--paper)} /* ---------- 19. DIAGRAM / PIPELINE / STEPS ---------- */ .diagram{border:1px solid var(--line);border-radius:14px;padding:clamp(26px,4vw,50px);background:var(--ink-2);overflow-x:auto} .dg-flow{display:flex;align-items:center;min-width:680px;justify-content:space-between} .dg-node{border:1px solid var(--line-strong);border-radius:10px;padding:18px 20px;text-align:center;background:var(--ink);min-width:120px;position:relative;transition:.3s} .dg-node:hover{border-color:var(--accent);box-shadow:0 0 30px var(--glow)} .dg-node b{font-family:var(--display);font-size:1.05rem;font-weight:600;display:block} .dg-node span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-top:5px} .dg-node.hot{border-color:var(--accent)} .dg-node.hot b{color:var(--accent)} .dg-arrow{flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),var(--accent-deep));position:relative;min-width:30px;margin:0 6px} .dg-arrow::after{content:"";position:absolute;right:0;top:-3px;border-left:7px solid var(--accent-deep);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent} .dg-arrow::before{content:"";position:absolute;top:-1.5px;left:0;width:8px;height:4px;border-radius:4px;background:var(--accent-2);animation:packet 2.2s linear infinite;box-shadow:0 0 8px var(--accent-2)} @keyframes packet{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 8px);opacity:0}} .pipe{display:grid;position:relative;margin-left:8px} .pipe::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--accent),var(--glow))} .pipe>div{padding:0 0 30px 40px;position:relative} .pipe>div::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid var(--accent);box-shadow:0 0 14px var(--glow)} .pipe h4{font-family:var(--display);font-size:1.2rem;font-weight:600;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .pipe h4 code{font-family:var(--mono);font-size:.6rem;background:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:3px 10px;color:var(--accent)} .pipe p{color:var(--paper-dim);font-size:.92rem;max-width:520px;margin-top:4px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} @media(max-width:880px){.steps{grid-template-columns:1fr}} .step{background:var(--ink);padding:38px 32px} .step .n{font-family:var(--display);font-size:3.4rem;font-weight:900;color:transparent;-webkit-text-stroke:1.2px var(--accent);line-height:1} .step h3{font-family:var(--display);font-size:1.4rem;font-weight:600;margin:18px 0 10px} .step p{color:var(--paper-dim);font-size:.93rem} /* ---------- 20. MANIFEST / PRINCIPII ---------- */ .manif{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,3rem);font-weight:480;line-height:1.32;letter-spacing:-.02em;max-width:1000px} .manif em{color:var(--accent);font-style:italic;font-variation-settings:"SOFT" 70,"WONK" 1} .manif .strike{text-decoration:line-through;text-decoration-color:var(--accent-deep);text-decoration-thickness:3px;color:var(--paper-faint)} .princ{counter-reset:p;display:grid;border-top:1px solid var(--line)} .princ>div{counter-increment:p;display:grid;grid-template-columns:90px 1fr 1.4fr;gap:26px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline} @media(max-width:880px){.princ>div{grid-template-columns:60px 1fr}.princ>div p{grid-column:2}} .princ>div::before{content:"0" counter(p);font-family:var(--mono);color:var(--accent);font-size:.85rem;letter-spacing:.1em} .princ h3{font-family:var(--display);font-size:1.55rem;font-weight:600;letter-spacing:-.02em} .princ p{color:var(--paper-dim);font-size:.97rem} /* ---------- 21. STANDARD / CHECKLIST ---------- */ .std-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px)} @media(max-width:880px){.std-grid{grid-template-columns:1fr}} .std{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:32px 30px;position:relative;transition:.3s} .std:hover{border-color:var(--accent);box-shadow:0 0 40px var(--glow)} .std .ic{width:46px;height:46px;border-radius:12px;background:var(--glow);border:1px solid var(--accent);display:grid;place-items:center;color:var(--accent);font-size:1.3rem;margin-bottom:18px} .std h3{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:10px} .std p{color:var(--paper-dim);font-size:.94rem} .std ul{list-style:none;margin-top:14px;display:grid;gap:8px} .std li{padding-left:24px;position:relative;color:var(--paper-dim);font-size:.9rem} .std li::before{content:"✓";position:absolute;left:0;color:var(--accent-2);font-weight:700} .callout{border:1px solid var(--accent);border-left-width:4px;border-radius:10px;background:var(--glow);padding:22px 26px;color:var(--paper);font-size:.97rem} .callout b{color:var(--accent)} /* ---------- 22. BLOG ---------- */ /* filtre */ .chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,52px)} .chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-dim);border:1px solid var(--line-strong);border-radius:30px;padding:9px 20px;cursor:pointer;background:none;transition:.25s} .chip:hover{color:var(--paper);border-color:var(--accent)} .chip.on{background:var(--grad);border-color:transparent;color:var(--accent-ink);box-shadow:0 6px 18px -8px var(--glow)} /* articol featured — mai mare, decuplat de grilă printr-un spațiu generos */ .blog-hero-card{display:grid;grid-template-columns:1.12fr .88fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-deep);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;margin-bottom:clamp(40px,6vw,76px)} .blog-hero-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 50px 90px -34px rgba(0,0,0,.75),0 0 60px var(--glow)} @media(max-width:880px){.blog-hero-card{grid-template-columns:1fr}} .blog-hero-card .bh-img{position:relative;min-height:340px;overflow:hidden} .blog-hero-card .bh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .blog-hero-card:hover .bh-img img{transform:scale(1.05)} .blog-hero-card .bh-body{padding:clamp(30px,3.6vw,54px);display:flex;flex-direction:column;gap:18px;justify-content:center} .feat-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);background:var(--grad);padding:6px 14px;border-radius:30px;font-weight:700} .blog-hero-card h2{font-family:var(--display);font-size:clamp(1.6rem,2.9vw,2.5rem);font-weight:600;letter-spacing:-.025em;line-height:1.1} .blog-hero-card p{color:var(--paper-dim);font-size:1rem;line-height:1.6} .blog-hero-card .mono.accent{display:inline-flex;align-items:center;gap:8px;transition:gap .3s} .blog-hero-card:hover .mono.accent{gap:14px} /* eticheta „toate articolele" deasupra grilei */ .post-grid-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-faint);display:flex;align-items:center;gap:16px;margin-bottom:clamp(22px,3vh,34px)} .post-grid-label::after{content:"";flex:1;height:1px;background:var(--line)} /* grilă — spațiu generos între carduri */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,2.8vw,42px)} @media(max-width:980px){.post-grid{grid-template-columns:1fr 1fr}} @media(max-width:680px){.post-grid{grid-template-columns:1fr}} .post-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s} .post-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:3} .post-card:hover{transform:translateY(-8px);border-color:var(--line-strong);box-shadow:var(--shadow-deep)} .post-card:hover::before{transform:scaleX(1)} .post-card .pc-img{aspect-ratio:16/10;overflow:hidden} .post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)} .post-card:hover .pc-img img{transform:scale(1.06)} .post-card .pc-body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1} .post-card h3{font-family:var(--display);font-size:1.34rem;font-weight:600;letter-spacing:-.015em;line-height:1.22;transition:color .25s} .post-card:hover h3{color:var(--accent)} .post-card p{color:var(--paper-dim);font-size:.92rem;line-height:1.6;flex:1} .pc-more{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px;margin-top:2px} .pc-more::after{content:"→";transition:transform .3s} .post-card:hover .pc-more::after{transform:translateX(6px)} /* meta + categorie */ .post-meta{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);flex-wrap:wrap} .post-meta .cat{color:var(--accent);border:1px solid var(--glass-brd);background:var(--glow);border-radius:20px;padding:4px 12px;font-weight:500} /* articol */ .article{max-width:760px;margin:0 auto} .article-head{text-align:left;margin-bottom:clamp(30px,5vh,50px)} .article h1{font-family:var(--display);font-size:clamp(2.1rem,5vw,3.6rem);font-weight:560;letter-spacing:-.03em;line-height:1.06;margin:18px 0 22px} .article-cover{border-radius:14px;overflow:hidden;margin:clamp(26px,4vh,44px) 0;border:1px solid var(--line)} .article-cover img{width:100%;aspect-ratio:16/8;object-fit:cover} .article-body{font-size:1.05rem;color:var(--paper-dim);line-height:1.75} .article-body>*+*{margin-top:1.25em} .article-body h2{font-family:var(--display);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;color:var(--paper);margin-top:2em} .article-body h3{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--paper);margin-top:1.6em} .article-body strong,.article-body b{color:var(--paper)} .article-body a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--glow);text-underline-offset:3px} .article-body a:hover{text-decoration-color:var(--accent)} .article-body ul,.article-body ol{padding-left:1.3em;display:grid;gap:.5em} .article-body blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;font-family:var(--display);font-size:1.2rem;font-style:italic;color:var(--paper)} .article-body code{font-family:var(--mono);font-size:.85em;background:var(--ink-3);border:1px solid var(--line);border-radius:5px;padding:2px 8px;color:var(--accent-2)} .article-body figure{margin:1.8em 0} .article-body figure img{border-radius:10px;border:1px solid var(--line)} .article-body figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-faint);margin-top:10px} .author-box{display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:22px 24px;margin-top:clamp(36px,6vh,56px)} .author-box .av{width:48px;height:48px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--accent-ink);flex:none} .author-box b{display:block;font-size:.95rem} .author-box span{font-size:.84rem;color:var(--paper-dim)} .post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(30px,5vh,46px)} @media(max-width:680px){.post-nav{grid-template-columns:1fr}} .post-nav a{border:1px solid var(--line);border-radius:12px;padding:18px 22px;transition:.25s;display:block} .post-nav a:hover{border-color:var(--accent)} .post-nav a small{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-bottom:6px} .post-nav a b{font-family:var(--display);font-weight:600;font-size:1.02rem} .post-nav a.next{text-align:right} /* breadcrumbs */ .crumbs{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-faint);flex-wrap:wrap} .crumbs a:hover{color:var(--accent)} .crumbs i{font-style:normal;color:var(--line-strong)} /* ---------- 23. CTA FINAL ---------- */ .cta{padding:clamp(90px,16vh,170px) 0;text-align:center;position:relative;overflow:hidden} .cta::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;background:radial-gradient(circle,var(--glow),transparent 65%);pointer-events:none} .cta h2{font-family:var(--display);font-size:clamp(2.4rem,7vw,5.6rem);font-weight:560;letter-spacing:-.035em;line-height:1.02;margin-bottom:30px} .cta h2 em{color:var(--accent);font-style:italic;text-shadow:0 0 70px var(--glow)} .cta p{color:var(--paper-dim);max-width:500px;margin:0 auto 42px} .cta .btn-row{justify-content:center} /* ---------- 24. FOOTER ---------- */ footer{border-top:1px solid var(--line);padding:56px 0 38px;background:var(--ink-2)} .foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(26px,4vw,50px)} @media(max-width:880px){.foot{grid-template-columns:1fr 1fr}} @media(max-width:560px){.foot{grid-template-columns:1fr}} .foot .logo{font-size:1.25rem} .foot p.tag{color:var(--paper-dim);font-size:.9rem;margin-top:14px;max-width:280px} .foot h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:16px;font-weight:400} .foot nav{display:grid;gap:10px} .foot nav a{font-size:.9rem;color:var(--paper-dim);transition:.2s} .foot nav a:hover{color:var(--accent)} .foot-bottom{max-width:var(--max);margin:44px auto 0;padding:26px var(--pad) 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--paper-faint)} .foot-bottom b{color:var(--live);font-weight:400} /* ---------- 25. PAGE HERO (subpagini) ---------- */ .page-hero{padding:calc(90px + 7vh) 0 7vh;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .page-hero h1{font-family:var(--display);font-size:clamp(2.6rem,7.5vw,6.2rem);font-weight:560;letter-spacing:-.035em;line-height:1;margin-top:18px} .page-hero h1 em{font-style:italic;color:var(--accent)} .page-hero .lead{max-width:580px;color:var(--paper-dim);font-size:1.1rem;margin-top:26px} .page-hero .bg-word{position:absolute;right:-2%;bottom:-22%;font-family:var(--display);font-weight:900;font-size:clamp(8rem,22vw,20rem);color:transparent;-webkit-text-stroke:1px var(--stroke-faint);pointer-events:none;user-select:none;line-height:1} /* ---------- 26. FORM ---------- */ .cform{display:grid;gap:18px;max-width:560px} .cform label{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-faint);display:block;margin-bottom:8px} .cform input,.cform textarea,.cform select{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:9px;color:var(--paper);font-family:var(--body);font-size:1rem;padding:14px 16px;transition:.25s;outline:none} :root[data-theme="light"] .cform input,:root[data-theme="light"] .cform textarea,:root[data-theme="light"] .cform select{background:#fff;border-color:var(--line-strong)} .cform input:focus,.cform textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)} .cform textarea{min-height:130px;resize:vertical} /* ---------- 27. HERO — secvență cinematică de încărcare ---------- */ @keyframes heroRise{from{opacity:0;transform:translateY(32px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}} @keyframes heroGlow{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}} @keyframes heroSheen{from{background-position:175% 0}to{background-position:-80% 0}} .hero::before{animation:heroGlow 2.6s cubic-bezier(.2,.7,.2,1) both} .hero .free-pill{animation:heroRise .85s cubic-bezier(.2,.7,.2,1) both .15s} .hero h1 .l{display:block;animation:heroRise .95s cubic-bezier(.2,.7,.2,1) both} .hero h1 .l:nth-child(1){animation-delay:.32s} .hero h1 .l:nth-child(2){animation-delay:.47s} .hero h1 .l:nth-child(3){animation-delay:.64s} .hero .hero-foot{animation:heroRise 1s cubic-bezier(.2,.7,.2,1) both .9s} .hero .trustbar{animation:heroRise 1s cubic-bezier(.2,.7,.2,1) both 1.1s} .hero .scroll-hint{animation:heroRise 1s ease both 1.5s} /* sheen auriu care mătură o singură dată „cafeaua." (text de bază rămâne solid) */ .hero h1 em{position:relative} .hero h1 em::after{content:"cafeaua.";position:absolute;left:0;top:0;pointer-events:none; background:linear-gradient(100deg,transparent 38%,rgba(230,242,255,.95) 50%,transparent 62%); background-size:250% 100%;background-position:175% 0; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:heroSheen 2.4s ease-in-out 1.7s 1} @media(prefers-reduced-motion:reduce){ .hero::before,.hero .free-pill,.hero h1 .l,.hero .hero-foot,.hero .trustbar,.hero .scroll-hint{animation:none} .hero h1 em::after{display:none} } /* ---------- 28. ACCENTE LIME (pop electric, tema Midnight & Cobalt) ---------- */ .hero h1 em{color:var(--accent-2);text-shadow:0 0 60px var(--glow-2)} :root[data-theme="light"] .hero h1 em{text-shadow:none} .price li::before,.std li::before,.trustbar span b,.faq summary::before{color:var(--accent-2)} .stat b i{color:var(--accent-2)} .sec-head h2 em,.cta h2 em,.split .body-l em,.manif em{color:var(--accent-2)} .cta h2 em{text-shadow:0 0 70px var(--glow-2)} /* ---------- 29. INTRARE ORCHESTRATĂ pe paginile interioare + atmosferă ---------- */ .page-hero .mono,.page-hero h1,.page-hero .lead{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both} .page-hero h1{animation-delay:.16s} .page-hero .lead{animation-delay:.32s} .page-hero .bg-word{animation:bgWordIn 1.8s ease both .35s} @keyframes bgWordIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* glow viu pe CTA-ul principal */ .btn.solid{position:relative} .btn.solid::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 var(--glow);transition:box-shadow .4s;pointer-events:none} .btn.solid:hover::after{box-shadow:0 0 28px 2px var(--glow)} @media(prefers-reduced-motion:reduce){ body::before{animation:none} .page-hero .mono,.page-hero h1,.page-hero .lead,.page-hero .bg-word{animation:none} }