/* ========================================================= EDNO GRUP VOLTAIC — landing page ========================================================= */ :root{ --bg: #080B12; --bg-alt: #0C111B; --surface: #111827; --surface-2: #151E30; --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16); --text: #EEF2F8; --muted: #98A5BC; --muted-2: #6C7A93; --amber: #FFB020; --orange: #FF7A18; --cyan: #35D6FF; --grad: linear-gradient(100deg, #FFD24A 0%, #FFB020 38%, #FF7A18 100%); --grad-soft: linear-gradient(160deg, rgba(255,176,32,.16), rgba(255,122,24,.04)); --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 34px; --shadow: 0 24px 60px -20px rgba(0,0,0,.7); --shadow-glow: 0 18px 50px -14px rgba(255,140,30,.45); --maxw: 1200px; --ease: cubic-bezier(.22,.68,.35,1); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:96px; } body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.is-locked{ overflow:hidden; } h1,h2,h3,h4{ font-family:'Sora',system-ui,sans-serif; line-height:1.14; letter-spacing:-.025em; margin:0 0 .5em; font-weight:700; } p{ margin:0 0 1em; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ul,ol{ margin:0; padding:0; list-style:none; } button{ font:inherit; } .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; } .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---------- reveal animation ---------- Vizibil implicit; ascuns doar dacă JS a pornit (clasa .js pe ). */ .js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0) * 90ms); } .js .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ========================================================= HEADER ========================================================= */ .header{ position:fixed; inset:0 0 auto 0; z-index:100; padding:14px 0; transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; } .header.is-stuck{ background:rgba(8,11,18,.78); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom-color:var(--line); padding:8px 0; } .header__inner{ display:flex; align-items:center; gap:20px; } .logo{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0; } .logo__mark{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--grad); color:#150C02; box-shadow:0 8px 22px -8px rgba(255,150,30,.75); } .logo__mark svg{ width:21px; height:21px; } .logo__text{ font-family:'Sora',sans-serif; font-weight:800; font-size:1.16rem; letter-spacing:-.02em; line-height:1.05; display:flex; flex-direction:column; } .logo__text em{ font-style:normal; font-size:.6rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .nav{ margin-left:auto; display:flex; align-items:center; gap:6px; } .nav > a{ padding:9px 14px; border-radius:99px; font-size:.94rem; font-weight:500; color:var(--muted); transition:color .25s, background .25s; } .nav > a:hover{ color:var(--text); background:rgba(255,255,255,.06); } .nav > a.is-active{ color:var(--text); } .nav__cta{ margin-left:8px; color:#150C02 !important; background:var(--grad); font-weight:600 !important; box-shadow:0 10px 26px -12px rgba(255,150,30,.85); } .nav__cta:hover{ background:var(--grad) !important; filter:brightness(1.06); } /* Elemente doar pentru meniul mobil — ascunse pe desktop */ .nav__label, .nav__foot{ display:none; } .nav__scrim{ position:fixed; inset:0; z-index:99; background:rgba(4,6,11,.66); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .42s var(--ease), visibility 0s .42s; } .nav__scrim.is-open{ opacity:1; visibility:visible; transition:opacity .42s var(--ease); } .header__phone{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--line-strong); border-radius:99px; font-size:.9rem; font-weight:600; color:var(--text); transition:border-color .25s, background .25s; } .header__phone svg{ width:17px; height:17px; color:var(--amber); } .header__phone:hover{ border-color:var(--amber); background:rgba(255,176,32,.08); } .burger{ display:none; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; background:transparent; cursor:pointer; padding:0; position:relative; } .burger span{ position:absolute; left:12px; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; } .burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; } .burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .burger.is-open span:nth-child(2){ opacity:0; } .burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ========================================================= BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:99px; font-family:'Sora',sans-serif; font-weight:600; font-size:.97rem; letter-spacing:-.01em; border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .3s, background .25s, border-color .25s, color .25s; } .btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); } .btn:hover svg{ transform:translateX(4px); } .btn--primary{ background:var(--grad); color:#150C02; box-shadow:var(--shadow-glow); } .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 22px 55px -14px rgba(255,140,30,.6); } .btn--ghost{ background:rgba(255,255,255,.06); border-color:var(--line-strong); color:var(--text); backdrop-filter:blur(8px); } .btn--ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); } .btn--outline{ border-color:var(--line-strong); color:var(--text); } .btn--outline:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); } .btn--block{ width:100%; } /* ========================================================= HERO ========================================================= */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:150px 0 100px; overflow:hidden; isolation:isolate; } .hero__media{ position:absolute; inset:0; z-index:-2; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; filter:saturate(.85) contrast(1.05); animation:slowzoom 26s var(--ease) infinite alternate; } @keyframes slowzoom{ from{ transform:scale(1); } to{ transform:scale(1.09); } } .hero__media::after{ content:''; position:absolute; inset:0; background: linear-gradient(105deg, rgba(8,11,18,.96) 0%, rgba(8,11,18,.88) 38%, rgba(8,11,18,.45) 66%, rgba(8,11,18,.72) 100%), linear-gradient(to top, var(--bg) 2%, transparent 40%); } .hero__glow{ position:absolute; z-index:-1; width:720px; height:720px; right:-160px; top:-220px; background:radial-gradient(circle, rgba(255,150,30,.28), transparent 62%); filter:blur(30px); pointer-events:none; } .hero__inner{ position:relative; } .pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 17px 8px 13px; border:1px solid var(--line-strong); border-radius:99px; background:rgba(255,255,255,.05); backdrop-filter:blur(10px); font-size:.83rem; font-weight:500; letter-spacing:.01em; color:var(--text); margin-bottom:26px; } .pill__dot{ width:8px; height:8px; border-radius:50%; background:#3DE07A; box-shadow:0 0 0 4px rgba(61,224,122,.18); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(61,224,122,0); } } .hero__title{ font-size:clamp(2.5rem, 6.1vw, 4.7rem); font-weight:800; max-width:15ch; margin-bottom:.42em; } .hero__lead{ font-size:clamp(1.02rem, 1.5vw, 1.19rem); color:var(--muted); max-width:56ch; margin-bottom:2.2em; } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:64px; } .hero__stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; margin:0; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; max-width:840px; backdrop-filter:blur(12px); } .stat{ padding:22px 24px; background:rgba(12,17,27,.72); } .stat dt{ font-family:'Sora',sans-serif; font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:800; letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:2px; } .stat dd{ margin:0; font-size:.86rem; color:var(--muted-2); line-height:1.35; } .hero__scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid var(--line-strong); border-radius:99px; display:grid; place-items:start center; padding-top:8px; } .hero__scroll span{ width:3px; height:8px; border-radius:2px; background:var(--amber); animation:scrolldot 1.8s var(--ease) infinite; } @keyframes scrolldot{ 0%{ opacity:0; transform:translateY(0);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(14px);} } /* ========================================================= MARQUEE ========================================================= */ .marquee{ border-block:1px solid var(--line); background:var(--bg-alt); padding:20px 0; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track{ display:flex; width:max-content; animation:scrollx 34s linear infinite; } .marquee__group{ display:flex; align-items:center; gap:26px; padding-right:26px; } .marquee__group span{ font-family:'Sora',sans-serif; font-weight:600; font-size:1.02rem; color:var(--muted-2); white-space:nowrap; transition:color .3s; } .marquee:hover .marquee__group span{ color:var(--muted); } .marquee__group i{ color:var(--amber); font-style:normal; opacity:.55; } @keyframes scrollx{ to{ transform:translateX(-50%); } } /* ========================================================= SECTION SHELL ========================================================= */ .section{ padding:clamp(74px, 9vw, 128px) 0; position:relative; } .section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); } .section__head{ max-width:660px; margin:0 auto clamp(44px,5vw,70px); text-align:center; } .section__head--left{ margin-inline:0; text-align:left; } .eyebrow{ display:inline-block; font-size:.79rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:14px; } .eyebrow::before{ content:''; display:inline-block; width:22px; height:1px; background:var(--amber); vertical-align:middle; margin-right:10px; opacity:.6; } .section__title{ font-size:clamp(1.85rem, 3.6vw, 3rem); } .section__lead{ color:var(--muted); font-size:1.04rem; margin-bottom:0; } .section__head--left .section__lead{ margin-bottom:26px; } /* ========================================================= SERVICII — cards ========================================================= */ .cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; } .card{ position:relative; grid-column:span 1; padding:30px; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(165deg, var(--surface), rgba(17,24,39,.4)); overflow:hidden; transition:transform .45s var(--ease), border-color .35s, box-shadow .4s; } .card::before{ content:''; position:absolute; inset:0; background:var(--grad-soft); opacity:0; transition:opacity .4s; pointer-events:none; } .card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow); } .card:hover::before{ opacity:1; } .card h3{ font-size:1.22rem; margin-bottom:.45em; position:relative; } .card p{ color:var(--muted); font-size:.96rem; margin-bottom:0; position:relative; } .card--wide{ grid-column:span 2; grid-row:span 2; padding:0; display:flex; flex-direction:column; } .card--tall{ grid-column:span 2; grid-row:span 2; padding:0; display:flex; flex-direction:column; } .card__img{ position:relative; overflow:hidden; flex:1; min-height:280px; } .card__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .card--wide:hover .card__img img, .card--tall:hover .card__img img{ transform:scale(1.06); } .card__img::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(17,24,39,1) 2%, rgba(17,24,39,.1) 55%); } .card__body{ padding:26px 30px 32px; position:relative; } .card__tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:99px; background:rgba(255,176,32,.13); color:var(--amber); border:1px solid rgba(255,176,32,.28); margin-bottom:14px; } .icon{ width:50px; height:50px; display:grid; place-items:center; border-radius:14px; background:rgba(255,176,32,.1); border:1px solid rgba(255,176,32,.2); color:var(--amber); margin-bottom:20px; position:relative; transition:background .35s, transform .35s var(--ease); } .card:hover .icon{ background:rgba(255,176,32,.18); transform:scale(1.06) rotate(-4deg); } .icon svg{ width:24px; height:24px; } .ticks{ margin-top:18px; display:grid; gap:9px; position:relative; } .ticks li{ position:relative; padding-left:28px; font-size:.93rem; color:var(--muted); } .ticks li::before{ content:''; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:50%; background:rgba(255,176,32,.14); border:1px solid rgba(255,176,32,.35); } .ticks li::after{ content:''; position:absolute; left:5px; top:.72em; width:5px; height:8px; border-right:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(42deg); } /* ========================================================= SPLIT — de ce noi ========================================================= */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 5vw, 76px); align-items:center; } .split__media{ position:relative; } .split__media img{ width:100%; aspect-ratio:4/4.2; object-fit:cover; border-radius:var(--r-xl); border:1px solid var(--line); } .split__media::after{ content:''; position:absolute; inset:auto -30px -30px auto; width:220px; height:220px; background:radial-gradient(circle, rgba(255,150,30,.3), transparent 66%); filter:blur(20px); z-index:-1; } .floatcard{ position:absolute; left:-22px; bottom:38px; padding:20px 26px; border-radius:var(--r); background:rgba(12,17,27,.86); backdrop-filter:blur(18px); border:1px solid var(--line-strong); box-shadow:var(--shadow); display:flex; flex-direction:column; animation:float 6s ease-in-out infinite; } @keyframes float{ 50%{ transform:translateY(-11px); } } .floatcard__num{ font-family:'Sora',sans-serif; font-size:2.15rem; font-weight:800; line-height:1; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .floatcard__label{ font-size:.82rem; color:var(--muted-2); margin-top:7px; line-height:1.35; } .features{ display:grid; gap:22px; margin-top:34px; } .features li{ display:flex; gap:18px; align-items:flex-start; } .features__n{ font-family:'Sora',sans-serif; font-weight:800; font-size:.82rem; letter-spacing:.06em; color:var(--amber); padding-top:4px; flex-shrink:0; width:26px; } .features h4{ font-size:1.06rem; margin-bottom:.28em; } .features p{ color:var(--muted); font-size:.94rem; margin:0; } /* ========================================================= PROCES ========================================================= */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; } .step{ position:relative; padding:32px 26px 26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); transition:transform .4s var(--ease), border-color .35s, background .35s; } .step:hover{ transform:translateY(-6px); border-color:rgba(255,176,32,.4); background:var(--surface-2); } .step__num{ position:absolute; top:-18px; left:26px; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--grad); color:#150C02; font-family:'Sora',sans-serif; font-weight:800; box-shadow:0 10px 24px -10px rgba(255,150,30,.8); } .step h3{ font-size:1.1rem; margin-top:10px; margin-bottom:.4em; } .step p{ color:var(--muted); font-size:.93rem; margin-bottom:14px; } .step__meta{ display:inline-block; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); padding-top:12px; border-top:1px dashed var(--line-strong); width:100%; } /* ========================================================= PACHETE ========================================================= */ .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; } .plan{ display:flex; flex-direction:column; padding:34px 30px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); transition:transform .4s var(--ease), border-color .35s; } .plan:hover{ transform:translateY(-6px); border-color:var(--line-strong); } .plan h3{ font-size:1.35rem; margin-bottom:.25em; } .plan__for{ color:var(--muted-2); font-size:.88rem; min-height:2.8em; } .plan__price{ font-family:'Sora',sans-serif; font-size:2.5rem; font-weight:800; letter-spacing:-.04em; line-height:1; margin:14px 0 22px; padding-bottom:22px; border-bottom:1px solid var(--line); } .plan__price span{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:8px; } .plan__price em{ font-style:normal; font-size:1.5rem; color:var(--muted); } .plan .ticks{ margin-top:0; margin-bottom:28px; flex:1; } .plan .btn{ width:100%; } .plan--featured{ border-color:rgba(255,176,32,.45); background: linear-gradient(165deg, rgba(255,176,32,.09), transparent 55%), var(--surface-2); box-shadow:0 30px 70px -30px rgba(255,140,30,.4); position:relative; } .plan--featured .plan__price{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .plan--featured .plan__price em{ color:rgba(255,176,32,.7); } .plan__badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 16px; border-radius:99px; background:var(--grad); color:#150C02; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; box-shadow:0 10px 26px -12px rgba(255,150,30,.9); } .plans__note{ text-align:center; color:var(--muted-2); font-size:.86rem; margin:28px auto 0; max-width:56ch; } /* ========================================================= GALERIE ========================================================= */ .gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:16px; } .gallery__item{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); } .gallery__item--lg{ grid-column:span 2; grid-row:span 2; } .gallery__item--wide{ grid-column:span 2; } .gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .5s; filter:saturate(.9); } .gallery__item:hover img{ transform:scale(1.07); filter:saturate(1.05); } .gallery__item figcaption{ position:absolute; inset:auto 0 0 0; padding:44px 22px 20px; background:linear-gradient(to top, rgba(8,11,18,.95) 20%, transparent); display:flex; flex-direction:column; gap:2px; } .gallery__item figcaption strong{ font-family:'Sora',sans-serif; font-size:1rem; font-weight:700; } .gallery__item figcaption span{ font-size:.82rem; color:var(--muted-2); } /* ========================================================= TESTIMONIALE ========================================================= */ .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .quote{ margin:0; padding:32px 30px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); position:relative; transition:transform .4s var(--ease), border-color .35s; } .quote:hover{ transform:translateY(-5px); border-color:var(--line-strong); } .quote::after{ content:'”'; position:absolute; top:14px; right:26px; font-family:'Sora',serif; font-size:5rem; line-height:1; color:rgba(255,176,32,.13); } .stars{ color:var(--amber); letter-spacing:.16em; font-size:.94rem; margin-bottom:14px; } .quote p{ font-size:.99rem; color:#D5DCE9; margin-bottom:20px; } .quote footer{ display:flex; flex-direction:column; padding-top:16px; border-top:1px solid var(--line); } .quote footer strong{ font-family:'Sora',sans-serif; font-size:.96rem; } .quote footer span{ font-size:.83rem; color:var(--muted-2); } /* ========================================================= FAQ ========================================================= */ .faq-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:start; } .faq-wrap .section__head{ position:sticky; top:110px; margin-bottom:0; } .faq{ display:grid; gap:12px; } .faq__item{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; transition:border-color .3s, background .3s; } .faq__item[open]{ border-color:rgba(255,176,32,.35); background:var(--surface-2); } .faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; cursor:pointer; list-style:none; font-family:'Sora',sans-serif; font-weight:600; font-size:1.01rem; letter-spacing:-.015em; transition:color .25s; } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary:hover{ color:var(--amber); } .faq__ico{ position:relative; width:24px; height:24px; flex-shrink:0; border-radius:50%; border:1px solid var(--line-strong); transition:background .3s, border-color .3s, transform .35s var(--ease); } .faq__ico::before,.faq__ico::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--amber); border-radius:2px; } .faq__ico::before{ width:10px; height:2px; } .faq__ico::after{ width:2px; height:10px; transition:transform .3s var(--ease), opacity .3s; } .faq__item[open] .faq__ico{ background:rgba(255,176,32,.14); border-color:rgba(255,176,32,.4); transform:rotate(180deg); } .faq__item[open] .faq__ico::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; } .faq__body{ padding:0 24px 22px; } .faq__body p{ color:var(--muted); font-size:.96rem; margin:0; max-width:62ch; } .faq__item[open] .faq__body{ animation:fadein .4s var(--ease); } @keyframes fadein{ from{ opacity:0; transform:translateY(-6px); } } /* ========================================================= CONTACT ========================================================= */ .contact{ background: radial-gradient(900px 480px at 88% 8%, rgba(255,150,30,.13), transparent 62%), var(--bg-alt); border-top:1px solid var(--line); } .contact__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; } .contact .section__title{ font-size:clamp(1.7rem,3vw,2.5rem); } .contact__list{ display:grid; gap:18px; margin:34px 0; } .contact__list li{ display:flex; gap:16px; align-items:center; } .contact__ico{ width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:13px; background:rgba(255,176,32,.1); border:1px solid rgba(255,176,32,.22); color:var(--amber); } .contact__ico svg{ width:21px; height:21px; } .contact__list strong{ display:block; font-family:'Sora',sans-serif; font-size:1rem; } .contact__list span{ font-size:.85rem; color:var(--muted-2); } .contact__urgent{ padding:22px 26px; border-radius:var(--r); border:1px solid rgba(255,176,32,.28); background:linear-gradient(150deg, rgba(255,176,32,.1), transparent 70%); } .contact__urgent strong{ font-family:'Sora',sans-serif; display:block; margin-bottom:6px; } .contact__urgent p{ margin:0; color:var(--muted); font-size:.92rem; } /* form */ .form{ padding:clamp(26px,3vw,38px); border:1px solid var(--line); border-radius:var(--r-xl); background:rgba(17,24,39,.72); backdrop-filter:blur(14px); box-shadow:var(--shadow); display:grid; gap:16px; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field{ display:grid; gap:8px; } .field > span{ font-size:.83rem; font-weight:600; letter-spacing:.02em; color:var(--muted); } .field input,.field select,.field textarea{ width:100%; padding:13px 16px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:rgba(8,11,18,.6); color:var(--text); font-family:inherit; font-size:.95rem; transition:border-color .25s, background .25s, box-shadow .25s; appearance:none; } .field textarea{ resize:vertical; min-height:96px; } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A5BC' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:42px; cursor:pointer; } .field select option{ background:#0C111B; color:var(--text); } .field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--amber); background:rgba(8,11,18,.85); box-shadow:0 0 0 4px rgba(255,176,32,.12); } .field input.is-error,.field textarea.is-error{ border-color:#FF5C5C; box-shadow:0 0 0 4px rgba(255,92,92,.1); } .check{ display:flex; gap:11px; align-items:flex-start; font-size:.87rem; color:var(--muted); cursor:pointer; margin-top:2px; } .check input{ appearance:none; width:19px; height:19px; flex-shrink:0; margin-top:2px; border:1px solid var(--line-strong); border-radius:6px; background:rgba(8,11,18,.6); cursor:pointer; position:relative; transition:background .25s, border-color .25s; } .check input:checked{ background:var(--grad); border-color:transparent; } .check input:checked::after{ content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border-right:2px solid #150C02; border-bottom:2px solid #150C02; transform:rotate(42deg); } .check input.is-error{ border-color:#FF5C5C; } .form__status{ margin:0; font-size:.9rem; text-align:center; min-height:1.4em; color:var(--muted-2); } .form__status.is-ok{ color:#3DE07A; } .form__status.is-err{ color:#FF7B7B; } /* ========================================================= FOOTER ========================================================= */ .footer{ background:var(--bg); border-top:1px solid var(--line); padding-top:70px; } .footer__inner{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; } .footer__brand p{ color:var(--muted-2); font-size:.92rem; margin-top:18px; max-width:38ch; } .footer__col h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px; } .footer__col a{ display:block; color:var(--muted); font-size:.93rem; padding:5px 0; transition:color .25s, transform .25s var(--ease); } .footer__col a:hover{ color:var(--amber); transform:translateX(3px); } .footer__col p{ color:var(--muted); font-size:.93rem; margin:0; } .footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-block:22px; border-top:1px solid var(--line); } .footer__bottom p{ margin:0; font-size:.84rem; color:var(--muted-2); } .footer__credit a{ color:var(--muted); border-bottom:1px solid var(--line-strong); } .footer__credit a:hover{ color:var(--amber); } /* ========================================================= FAB ========================================================= */ .fab{ position:fixed; right:20px; bottom:20px; z-index:90; width:56px; height:56px; display:none; place-items:center; border-radius:50%; background:var(--grad); color:#150C02; box-shadow:0 14px 34px -10px rgba(255,150,30,.85); } .fab svg{ width:24px; height:24px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1080px){ .cards{ grid-template-columns:repeat(2,1fr); } .card--wide,.card--tall{ grid-column:span 2; grid-row:auto; } .steps{ grid-template-columns:repeat(2,1fr); gap:26px 18px; } .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } .plan__for{ min-height:0; } .quotes{ grid-template-columns:1fr; } .footer__inner{ grid-template-columns:1fr 1fr; } } @media (max-width:900px){ .header__phone{ display:none; } .burger{ display:block; } .burger{ z-index:2; } .nav{ position:fixed; inset:0 0 0 auto; width:min(340px,88vw); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; padding:calc(env(safe-area-inset-top,0px) + 86px) 20px max(24px,env(safe-area-inset-bottom,0px)); background:linear-gradient(200deg,#111A2A 0%,#0A0F19 52%,#080B12 100%); border-left:1px solid var(--line-strong); box-shadow:-34px 0 70px -24px rgba(0,0,0,.85); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; transform:translateX(100%); transition:transform .42s var(--ease), visibility 0s .42s; } .nav.is-open{ visibility:visible; transform:none; transition:transform .42s var(--ease); } .nav__label{ display:block; margin:0 0 12px; padding-left:18px; font-family:'Sora',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); } .nav > a{ display:flex; align-items:center; padding:16px 18px; font-size:1.05rem; font-weight:500; border-radius:14px; color:var(--text); opacity:0; transform:translateX(22px); transition:opacity .38s var(--ease), transform .38s var(--ease), background .25s, color .25s; } .nav.is-open > a{ opacity:1; transform:none; } .nav.is-open > a:nth-of-type(1){ transition-delay:.10s; } .nav.is-open > a:nth-of-type(2){ transition-delay:.15s; } .nav.is-open > a:nth-of-type(3){ transition-delay:.20s; } .nav.is-open > a:nth-of-type(4){ transition-delay:.25s; } .nav.is-open > a:nth-of-type(5){ transition-delay:.30s; } .nav.is-open > a:nth-of-type(6){ transition-delay:.35s; } /* săgeata din dreapta fiecărui link */ .nav > a:not(.nav__cta)::after{ content:''; margin-left:auto; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); opacity:.28; transition:opacity .25s, transform .25s var(--ease); } .nav > a:not(.nav__cta):hover{ background:rgba(255,255,255,.05); } .nav > a:not(.nav__cta):hover::after{ opacity:.7; transform:rotate(-45deg) translate(2px,2px); } .nav > a:not(.nav__cta):active{ background:rgba(255,255,255,.09); } .nav > a.is-active{ background:rgba(255,176,32,.1); color:var(--amber); font-weight:600; } .nav > a.is-active::after{ opacity:.75; } .nav__cta{ margin-left:0; margin-top:18px; padding:16px 18px; justify-content:center; text-align:center; } .nav__foot{ display:block; margin-top:auto; padding:22px 18px 0; border-top:1px solid var(--line); opacity:0; transform:translateX(22px); transition:opacity .38s var(--ease), transform .38s var(--ease); } .nav.is-open .nav__foot{ opacity:1; transform:none; transition-delay:.42s; } .nav__phone{ display:inline-flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-size:1.14rem; font-weight:700; letter-spacing:-.01em; color:var(--text); } .nav__phone svg{ width:18px; height:18px; color:var(--amber); flex-shrink:0; } .nav__foot p{ margin:9px 0 0; font-size:.84rem; line-height:1.55; color:var(--muted-2); } @media (prefers-reduced-motion:reduce){ .nav,.nav > a,.nav__foot,.nav__scrim{ transition:none; } .nav > a,.nav__foot{ opacity:1; transform:none; } } .hero{ min-height:auto; padding:130px 0 84px; } .hero__media img{ object-position:center 28%; } .hero__stats{ grid-template-columns:repeat(2,1fr); } .split,.faq-wrap,.contact__inner{ grid-template-columns:1fr; } .faq-wrap .section__head{ position:static; } .split__media{ order:-1; max-width:520px; } .split__media img{ aspect-ratio:4/3.4; } .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; } .gallery__item--lg{ grid-column:span 2; grid-row:span 2; } .gallery__item--wide{ grid-column:span 2; } .fab{ display:grid; } .footer{ padding-bottom:70px; } } @media (max-width:600px){ body{ font-size:16px; } .container{ padding-inline:18px; } .cards{ grid-template-columns:1fr; } .card--wide,.card--tall{ grid-column:span 1; } .steps{ grid-template-columns:1fr; } .hero__actions .btn{ width:100%; } .hero__stats{ max-width:none; } .stat{ padding:18px; } .floatcard{ left:12px; bottom:12px; padding:16px 20px; } .floatcard__num{ font-size:1.7rem; } .form__row{ grid-template-columns:1fr; } .gallery{ grid-template-columns:1fr; grid-auto-rows:200px; } .gallery__item--lg,.gallery__item--wide{ grid-column:span 1; grid-row:span 1; } .footer__inner{ grid-template-columns:1fr; gap:32px; } .footer__bottom{ flex-direction:column; } .hero__scroll{ display:none; } }