/* ========================================================================= AutoKredit — Amanet Auto · stil site Culori păstrate de pe autokredit.ro: bleumarin #0f377a, albastru deschis #d9eafd, gri-albăstrui #bcccdc / #9aa6b2, alb #ffffff, #f2f5f7. ========================================================================= */ /* ---------- fonturi găzduite local (fără Google Fonts → fără date trimise la terți) ---------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --navy-950: #030c20; --navy-900: #061634; --navy-850: #08204a; --navy-800: #0a285c; --navy: #0f377a; /* culoarea principală a brandului */ --navy-600: #174a9c; --blue: #2f6fe4; /* albastrul brandului, luminos (accente, lumini) */ --blue-400: #5b93ff; --blue-300: #8fb6ff; --sky: #d9eafd; /* albastru deschis brand */ --sky-50: #eef5fe; --mist: #bcccdc; /* gri-albăstrui brand */ --steel: #9aa6b2; /* gri brand (footer vechi) */ --ice: #f2f5f7; --white: #ffffff; --ink: #0a1733; --text: #3b4458; --muted: #667089; --line: rgba(15, 55, 122, .12); --line-dark: rgba(255, 255, 255, .12); --gold: #ffc23d; --wa: #25d366; --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --container: 1240px; --gutter: clamp(16px, 4vw, 40px); --radius: 22px; --radius-lg: 30px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --shadow-1: 0 1px 2px rgba(6, 22, 52, .05), 0 10px 30px -12px rgba(6, 22, 52, .14); --shadow-2: 0 40px 80px -30px rgba(6, 22, 52, .38); --nav-h: 68px; } /* ---------- bază ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: clip; } body { margin: 0; min-height: 100vh; overflow-x: clip; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; font-weight: 500; color: var(--text); background: var(--ice); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; color: var(--ink); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--navy); color: #fff; } :focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; border-radius: 8px; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; border-radius: 12px; background: #fff; color: var(--navy); font-weight: 800; transition: top .3s; } .skip-link:focus { top: 16px; } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(88px, 11vw, 150px); } .section--white { background: #fff; } .section--ice { background: var(--ice); } .section--sky { background: linear-gradient(180deg, var(--sky-50), #fff); } .section--dark { background: var(--navy-900); color: rgba(255, 255, 255, .74); } .section--dark h2, .section--dark h3 { color: #fff; } .i { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .i--fill { fill: currentColor; stroke: none; } /* ---------- tipografie ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; } .section--dark .eyebrow, .on-dark .eyebrow { color: var(--blue-300); } .h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); } .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.02em; } .lead { font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.65; color: var(--muted); max-width: 60ch; } .section--dark .lead, .on-dark .lead { color: rgba(217, 234, 253, .78); } .head { display: grid; gap: 20px; margin-bottom: clamp(44px, 6vw, 72px); } .head--center { text-align: center; justify-items: center; } .head--center .lead { margin-inline: auto; } .head--split { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 28px 64px; } .head--split .eyebrow, .head--split .h2 { grid-column: 1; } .head--split .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; } .grad { background: linear-gradient(100deg, #ffffff 0%, var(--blue-300) 35%, var(--blue-400) 55%, var(--sky) 80%, #ffffff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s ease-in-out infinite; } .grad--navy { background-image: linear-gradient(100deg, var(--navy) 0%, var(--blue) 45%, var(--navy-600) 70%, var(--navy) 100%); } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hl { color: var(--blue); } .mark { background: linear-gradient(transparent 62%, rgba(47, 111, 228, .18) 62%); padding-inline: .06em; } /* ---------- butoane ---------- */ .btn { --h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px; border-radius: 999px; overflow: hidden; isolation: isolate; font-family: var(--font-body); font-weight: 800; font-size: 1rem; letter-spacing: -.005em; white-space: nowrap; transition: transform .5s var(--ease-out), box-shadow .4s, background-color .3s, color .3s, border-color .3s; will-change: transform; } .btn .i { width: 1.15em; height: 1.15em; } .btn--lg { --h: 62px; padding: 0 30px; font-size: 1.06rem; } .btn--sm { --h: 44px; padding: 0 18px; font-size: .92rem; } .btn--block { width: 100%; } .btn::after { /* sclipire */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%); transform: translateX(-120%); transition: transform .9s var(--ease-out); } .btn:hover::after { transform: translateX(120%); } .btn--light { background: #fff; color: var(--navy); box-shadow: 0 18px 40px -14px rgba(91, 147, 255, .65), inset 0 -2px 0 rgba(15, 55, 122, .08); } .btn--light::after { background: linear-gradient(110deg, transparent 30%, rgba(47, 111, 228, .16) 48%, transparent 66%); } .btn--light:hover { box-shadow: 0 24px 50px -14px rgba(91, 147, 255, .85); } .btn--navy { background: linear-gradient(135deg, var(--navy-600), var(--navy)); color: #fff; box-shadow: 0 18px 36px -16px rgba(15, 55, 122, .8), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn--navy:hover { box-shadow: 0 24px 46px -14px rgba(15, 55, 122, .9), inset 0 1px 0 rgba(255, 255, 255, .18); } .btn--ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); } .btn--outline { color: var(--navy); border: 1.5px solid rgba(15, 55, 122, .25); background: #fff; } .btn--outline:hover { border-color: var(--navy); } .btn--wa { background: var(--wa); color: #06341a; box-shadow: 0 18px 36px -16px rgba(37, 211, 102, .8); } .btn__num { font-weight: 600; opacity: .7; padding-left: 10px; margin-left: 2px; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); } .link-arrow .i { transition: transform .4s var(--ease-out); } .link-arrow:hover .i { transform: translateX(5px); } .on-dark .link-arrow, .section--dark .link-arrow { color: #fff; } /* ---------- intrare (preloader) ---------- */ .preloader { display: none; } .js:not(.no-intro) .preloader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--navy-900); transition: transform 1s var(--ease-in-out), border-radius 1s var(--ease-in-out); animation: pre-fallback .01s 5s forwards; } .preloader__logo { position: relative; width: 150px; animation: pre-logo 1.1s var(--ease-out) both; } .preloader__logo img { width: 100%; filter: drop-shadow(0 0 40px rgba(91, 147, 255, .45)); } .preloader__logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); mask: url("../img/logo-autokredit-220.webp") center / contain no-repeat; -webkit-mask: url("../img/logo-autokredit-220.webp") center / contain no-repeat; background-size: 300% 100%; animation: pre-sweep 1.2s .35s var(--ease-in-out) both; } .preloader__bar { position: absolute; left: 50%; bottom: 18vh; width: 160px; height: 2px; margin-left: -80px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; } .preloader__bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-400), #fff); transform-origin: left; animation: pre-bar 1.1s var(--ease-in-out) both; } .preloader.is-done { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 18% 18%; } @keyframes pre-logo { from { opacity: 0; transform: scale(.82) translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes pre-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } @keyframes pre-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pre-fallback { to { visibility: hidden; opacity: 0; pointer-events: none; } } /* ---------- bară progres scroll ---------- */ .progress { position: fixed; left: 0; top: 0; z-index: 120; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue), var(--blue-300), #fff); pointer-events: none; } /* ---------- navigație ---------- */ .nav { position: fixed; inset: 14px 0 auto; z-index: 100; transition: transform .6s var(--ease-out); pointer-events: none; } .nav.is-hidden { transform: translateY(calc(-100% - 20px)); } .nav__bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 18px; height: var(--nav-h); padding: 0 10px 0 12px; border-radius: 999px; background: rgba(6, 22, 52, .5); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 10px 40px -12px rgba(3, 12, 32, .4); transition: background .4s, box-shadow .4s; } .nav.is-scrolled .nav__bar { background: rgba(6, 22, 52, .82); box-shadow: 0 18px 50px -14px rgba(3, 12, 32, .55); } .brand { display: flex; align-items: center; gap: 12px; color: #fff; flex-shrink: 0; } .brand img { width: 46px; height: auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); transition: transform .6s var(--ease-out); } .brand:hover img { transform: rotate(-6deg) scale(1.06); } .brand__text { display: grid; line-height: 1; } .brand__name { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 1.02rem; letter-spacing: .01em; } .brand__sub { margin-top: 5px; font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300); } .nav__links { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; } .nav__link { position: relative; z-index: 1; padding: 10px 15px; border-radius: 999px; font-size: .93rem; font-weight: 700; color: rgba(255, 255, 255, .78); transition: color .3s; } .nav__link:hover, .nav__link.is-active { color: #fff; } .nav__indicator { position: absolute; z-index: 0; top: 50%; left: 0; height: 40px; width: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .08); transform: translate(var(--x, 0), -50%); opacity: 0; transition: transform .5s var(--ease-out), width .5s var(--ease-out), opacity .3s; pointer-events: none; } .nav__cta { margin-left: 8px; } .nav__cta .btn { --h: 48px; padding: 0 20px; } .burger { display: none; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--navy); position: relative; margin-left: 8px; } .burger span { position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease-out), opacity .3s; } .burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 27px; } .menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .nav__call { display: none; } /* meniu mobil */ .menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 48px) var(--gutter) calc(28px + env(safe-area-inset-bottom)); background: radial-gradient(120% 60% at 100% 0%, rgba(47, 111, 228, .35), transparent 60%), var(--navy-900); clip-path: circle(0% at calc(100% - 44px) 48px); visibility: hidden; transition: clip-path .8s var(--ease-in-out), visibility 0s .8s; } .menu-open .menu { clip-path: circle(150% at calc(100% - 44px) 48px); visibility: visible; transition: clip-path .8s var(--ease-in-out); } .menu__links { display: grid; gap: 4px; } .menu__link { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.03em; color: #fff; line-height: 1.1; opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); } .menu__link small { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--blue-300); letter-spacing: .1em; } .menu__link.is-active { color: var(--blue-300); } .menu-open .menu__link { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + 200ms); } .menu__foot { display: grid; gap: 10px; opacity: 0; transition: opacity .6s .5s; } .menu-open .menu__foot { opacity: 1; } .menu__foot .btn { width: 100%; } .menu-open { overflow: hidden; } /* ---------- hero ---------- */ .hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 70px) 0 120px; color: #fff; background: var(--navy-900); overflow: clip; } .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero__photo { position: absolute; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; object-position: 60% 50%; opacity: .62; animation: kenburns 38s var(--ease-in-out) infinite alternate; } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, 1.5%, 0); } } .hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 22, 52, .96) 0%, rgba(6, 22, 52, .78) 38%, rgba(6, 22, 52, .25) 75%, rgba(6, 22, 52, .4) 100%), linear-gradient(0deg, var(--navy-900) 2%, rgba(6, 22, 52, 0) 38%), linear-gradient(180deg, rgba(6, 22, 52, .75) 0%, rgba(6, 22, 52, 0) 28%); } .hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(60% 70% at 72% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 70% at 72% 40%, #000 0%, transparent 75%); } .hero__glow { position: absolute; width: 70vw; height: 70vw; max-width: 1100px; max-height: 1100px; right: -18vw; top: -32vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 111, 228, .55), rgba(47, 111, 228, 0)); animation: breathe 9s ease-in-out infinite; } @keyframes breathe { 50% { transform: scale(1.12); opacity: .8; } } .hero__spot { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), rgba(143, 182, 255, .16), transparent 60%); } .noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 5vw, 80px); align-items: center; } .pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--sky); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pill__dot { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(91, 147, 255, .22); color: #fff; } .pill__dot .i { width: 14px; height: 14px; } .hero__title { margin: 26px 0 26px; font-size: clamp(2.3rem, 5.45vw, 5.2rem); font-stretch: 110%; font-weight: 900; line-height: .98; letter-spacing: -.045em; color: #fff; } .hero__title .ln { display: block; overflow: hidden; padding: .04em .04em .1em; margin: -.04em -.04em -.1em; } .hero__title .ln > span { display: inline-block; } .js .hero__title .ln > span { transform: translateY(115%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 110ms + 100ms); } .is-ready .hero__title .ln > span { transform: none; } .hero__lead { max-width: 54ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: rgba(217, 234, 253, .8); } .hero__lead strong { color: #fff; font-weight: 700; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 40px; font-size: .92rem; color: rgba(217, 234, 253, .78); } .hero__trust li { display: flex; align-items: center; gap: 10px; } .hero__trust .i { color: var(--blue-300); } .hero__trust strong { color: #fff; font-weight: 800; } .stars { display: inline-flex; gap: 2px; color: var(--gold); } .stars .i { width: 15px; height: 15px; } .gmark { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #fff; } .js .hero .fx { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms + 500ms); } .is-ready .hero .fx { opacity: 1; transform: none; } .hero__aside { position: relative; } .hero__scroll { position: absolute; left: 50%; bottom: 34px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(217, 234, 253, .55); } .hero__scroll span { width: 24px; height: 38px; border-radius: 14px; border: 1.5px solid rgba(217, 234, 253, .35); position: relative; } .hero__scroll span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: wheel 2s var(--ease-in-out) infinite; } @keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } } /* ecuson rotativ cu logo */ .badge { position: absolute; z-index: 3; width: 150px; height: 150px; display: grid; place-items: center; transition: translate .9s var(--ease-out); } .badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; } .badge__ring text { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 11.5px; letter-spacing: 1.2px; fill: rgba(255, 255, 255, .85); text-transform: uppercase; } .badge__core { position: relative; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #e8f1fe); display: grid; place-items: center; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .55), 0 0 0 6px rgba(255, 255, 255, .08), 0 0 50px rgba(91, 147, 255, .45); } .badge__core img { width: 64px; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- calculator ---------- */ @property --beam { syntax: ""; inherits: false; initial-value: 0deg; } .calc { position: relative; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--radius-lg); color: #fff; background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .07)); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .2); } .beam::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(143, 182, 255, .2) 280deg, rgba(143, 182, 255, .95) 330deg, #fff 345deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: beam 5.5s linear infinite; } @keyframes beam { to { --beam: 360deg; } } .calc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .calc__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-stretch: 125%; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300); } .live { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; color: rgba(217, 234, 253, .7); } .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5bffa0; box-shadow: 0 0 0 0 rgba(91, 255, 160, .6); animation: live 2s infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(91, 255, 160, .55); } 70% { box-shadow: 0 0 0 9px rgba(91, 255, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 255, 160, 0); } } .calc__q { margin-top: 16px; font-size: 1.02rem; font-weight: 700; color: rgba(217, 234, 253, .85); } .calc__amount { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font-family: var(--font-display); font-weight: 900; font-stretch: 100%; letter-spacing: -.04em; } .calc__amount .odo { font-size: clamp(2.8rem, 4.6vw, 4rem); } .calc__cur { font-size: 1.15rem; font-weight: 800; letter-spacing: 0; color: var(--blue-300); } .calc__range { margin-top: 18px; } .calc__scale { display: grid; grid-template-columns: 1fr auto 1fr; margin-top: 6px; font-size: .75rem; font-weight: 700; color: rgba(217, 234, 253, .5); } .calc__scale span:last-child { text-align: right; } .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; } .tier { position: relative; padding: 12px 10px 11px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: background .4s, color .4s, transform .5s var(--ease-out), border-color .4s, box-shadow .4s; } .tier__rate { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; } .tier__rate small { font-size: .62em; font-weight: 700; opacity: .7; margin-right: 2px; letter-spacing: 0; } .tier__range { display: block; margin-top: 4px; font-size: .7rem; font-weight: 700; color: rgba(217, 234, 253, .6); transition: color .4s; } .tier.is-on { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(91, 147, 255, .7); } .tier.is-on .tier__range { color: var(--muted); } .calc__rows { display: grid; margin-top: 18px; border-top: 1px solid var(--line-dark); } .calc__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-dark); font-size: .93rem; color: rgba(217, 234, 253, .72); } .calc__row > span:first-child { display: inline-flex; align-items: center; gap: 10px; } .calc__row .i { width: 18px; height: 18px; color: var(--blue-300); } .calc__val { font-weight: 800; color: #fff; text-align: right; white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; } .calc__val .odo { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; } .calc__val small { font-size: .78rem; font-weight: 700; color: rgba(217, 234, 253, .6); } .calc__cta { margin-top: 20px; } .calc__alt { margin-top: 12px; text-align: center; font-size: .86rem; color: rgba(217, 234, 253, .65); } .calc__alt a { font-weight: 800; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); } .calc__note { margin-top: 14px; font-size: .74rem; line-height: 1.5; color: rgba(217, 234, 253, .5); text-align: center; } /* varianta luminoasă a calculatorului (pagini interioare) */ .calc--light { color: var(--ink); background: #fff; border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-2); } .calc--light .calc__tag { color: var(--blue); } .calc--light .live { color: var(--muted); } .calc--light .calc__q { color: var(--text); } .calc--light .calc__cur { color: var(--blue); } .calc--light .calc__scale, .calc--light .calc__note { color: var(--muted); } .calc--light .tier { background: var(--ice); border-color: transparent; } .calc--light .tier__range { color: var(--muted); } .calc--light .tier.is-on { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 16px 30px -12px rgba(15, 55, 122, .6); } .calc--light .tier.is-on .tier__range { color: rgba(217, 234, 253, .8); } .calc--light .calc__rows, .calc--light .calc__row { border-color: var(--line); } .calc--light .calc__row { color: var(--muted); } .calc--light .calc__row .i { color: var(--blue); } .calc--light .calc__val { color: var(--ink); } .calc--light .calc__val small { color: var(--muted); } .calc--light .calc__alt { color: var(--muted); } .calc--light .calc__alt a { color: var(--navy); border-color: rgba(15, 55, 122, .3); } .calc--light .beam::before, .calc--light.beam::before { background: conic-gradient(from var(--beam), transparent 0deg 250deg, rgba(47, 111, 228, .15) 280deg, rgba(47, 111, 228, .9) 335deg, var(--navy) 350deg, transparent 360deg); } /* contor cu cifre care se rotesc */ .odo { display: inline-flex; align-items: flex-start; height: 1.06em; line-height: 1.06; overflow: hidden; font-variant-numeric: tabular-nums; } .odo__d { display: inline-block; height: 1.06em; overflow: hidden; } .odo__s { display: flex; flex-direction: column; transition: transform 1s var(--ease-out); } .odo__s span { display: block; height: 1.06em; text-align: center; } .odo__x { display: inline-block; } /* slider */ .range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --p: 30%; } .range:focus { outline: none; } .range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blue-400), #fff var(--p), rgba(255, 255, 255, .14) var(--p)); } .range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blue-400), #fff var(--p), rgba(255, 255, 255, .14) var(--p)); } .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #fff; border: 7px solid var(--blue); box-shadow: 0 0 0 7px rgba(91, 147, 255, .22), 0 8px 22px rgba(0, 0, 0, .45); transition: transform .25s var(--ease-out), box-shadow .25s; } .range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 7px solid var(--blue); box-shadow: 0 0 0 7px rgba(91, 147, 255, .22), 0 8px 22px rgba(0, 0, 0, .45); transition: transform .25s var(--ease-out); } .range:active::-webkit-slider-thumb { transform: scale(1.15); } .range:active::-moz-range-thumb { transform: scale(1.15); } .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--blue-400); } .range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--blue-400); } .calc--light .range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--blue), var(--navy) var(--p), var(--ice) var(--p)); } .calc--light .range::-moz-range-track { background: linear-gradient(90deg, var(--blue), var(--navy) var(--p), var(--ice) var(--p)); } .calc--light .range::-webkit-slider-thumb { border-color: var(--navy); box-shadow: 0 0 0 7px rgba(15, 55, 122, .14), 0 8px 18px rgba(15, 55, 122, .35); } .calc--light .range::-moz-range-thumb { border-color: var(--navy); } /* ---------- benzi marquee ---------- */ .bands { position: relative; z-index: 4; height: 200px; margin-top: -100px; margin-bottom: -100px; pointer-events: none; } .band { position: absolute; left: -5%; width: 110%; display: flex; overflow: hidden; padding: 17px 0; pointer-events: auto; } .band--a { top: 70px; background: var(--sky); color: var(--navy); transform: rotate(-3.6deg); box-shadow: 0 20px 40px -24px rgba(6, 22, 52, .5); } .band--b { top: 70px; background: linear-gradient(90deg, var(--navy), var(--navy-600), var(--navy)); color: #fff; transform: rotate(2.8deg); box-shadow: 0 24px 50px -20px rgba(3, 12, 32, .6); } .band__track { display: flex; flex-shrink: 0; align-items: center; animation: marquee 46s linear infinite; } .band--b .band__track { animation-duration: 52s; animation-direction: reverse; } .band:hover .band__track { animation-play-state: paused; } .band__item { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(.95rem, 1.5vw, 1.2rem); text-transform: uppercase; letter-spacing: .02em; } .band__item img { width: 26px; height: auto; } .band__item .i { width: 20px; height: 20px; opacity: .7; } @keyframes marquee { to { transform: translateX(-100%); } } /* ---------- manifest + cifre ---------- */ .manifesto { padding-top: clamp(150px, 16vw, 210px); } .manifesto__text { max-width: 22em; font-family: var(--font-display); font-stretch: 104%; font-weight: 800; font-size: clamp(1.75rem, 3.7vw, 3.3rem); line-height: 1.14; letter-spacing: -.03em; color: var(--navy); } .manifesto__text .w { display: inline; transition: opacity .5s, color .5s; } .js .manifesto__text .w { opacity: .13; } .js .manifesto__text .w.on { opacity: 1; } .manifesto__text .k { color: var(--blue); } .manifesto__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 40px; } .nope { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 800; color: var(--navy); box-shadow: var(--shadow-1); } .nope span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; } .nope .i { width: 16px; height: 16px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(56px, 7vw, 90px); } .stat { position: relative; overflow: hidden; isolation: isolate; padding: 30px 28px 28px; border-radius: 26px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease-out), box-shadow .5s; } .stat:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } .stat::after { content: ""; position: absolute; right: -40px; top: -40px; z-index: -1; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 111, 228, .14), transparent); } .stat__num { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-weight: 900; font-stretch: 105%; font-size: clamp(2.6rem, 4.4vw, 3.7rem); line-height: 1; letter-spacing: -.05em; color: var(--navy); } .stat__num small { font-size: .42em; font-weight: 800; letter-spacing: -.01em; color: var(--blue); } .stat__num .i { width: .5em; height: .5em; color: var(--gold); align-self: center; } .stat__label { margin-top: 14px; font-size: .97rem; line-height: 1.5; color: var(--muted); } .stat__label strong { color: var(--ink); } /* ---------- pași + drum ---------- */ .steps { position: relative; } .steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step { position: relative; padding: 34px 32px 32px; border-radius: 28px; background: #fff; border: 1px solid var(--line); transition: transform .8s var(--ease-out), box-shadow .8s, border-color .6s; } .step__top { display: flex; align-items: center; justify-content: space-between; } .step__num { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: 4.6rem; line-height: .9; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.6px rgba(15, 55, 122, .35); transition: color .7s, -webkit-text-stroke-color .7s; } .step__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--ice); color: var(--navy); transition: background .6s, color .6s, transform .8s var(--ease-out); } .step__icon .i { width: 26px; height: 26px; } .step h3 { margin-top: 26px; font-size: 1.5rem; } .step p { margin-top: 10px; color: var(--muted); } .step p strong { color: var(--ink); } .step.is-on { transform: translateY(-10px); box-shadow: var(--shadow-2); border-color: transparent; } .step.is-on .step__num { color: var(--navy); -webkit-text-stroke-color: var(--navy); } .step.is-on .step__icon { background: var(--navy); color: #fff; transform: rotate(-8deg) scale(1.06); } .docs-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .docs-mini span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sky-50); color: var(--navy); font-size: .8rem; font-weight: 800; } .docs-mini .i { width: 14px; height: 14px; } .road { position: relative; height: 92px; margin-top: 46px; } .road__asphalt { position: absolute; left: 0; right: 0; top: 50%; height: 66px; transform: translateY(-50%); border-radius: 99px; background: linear-gradient(180deg, #13244a, #0b1938); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 24px 40px -22px rgba(6, 22, 52, .7); overflow: hidden; } .road__asphalt::before { content: ""; position: absolute; left: 30px; right: 30px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 26px, transparent 26px 52px); } .road__trail { position: absolute; left: 0; top: 0; bottom: 0; width: var(--trail, 0px); background: linear-gradient(90deg, rgba(47, 111, 228, 0), rgba(47, 111, 228, .45)); } .road__stop { position: absolute; top: 50%; left: var(--at, 50%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #0b1938; border: 3px solid rgba(188, 204, 220, .5); transition: background .5s, border-color .5s, box-shadow .5s; z-index: 1; } .road__stop.is-on { background: #fff; border-color: var(--blue-400); box-shadow: 0 0 0 8px rgba(91, 147, 255, .25), 0 0 24px rgba(91, 147, 255, .8); } .road__car { position: absolute; left: 0; top: 50%; z-index: 2; width: 118px; transform: translate3d(var(--x, 0px), -50%, 0); will-change: transform; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); } .road__car svg { width: 100%; overflow: visible; } .road__flag { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(217, 234, 253, .55); } /* ---------- parcul auto (imagine care se extinde) ---------- */ .park { overflow: clip; } .park__media { --ix: 7; --r: 34px; position: relative; margin-top: clamp(40px, 5vw, 64px); clip-path: inset(0 calc(var(--ix) * 1%) round var(--r)); will-change: clip-path; } .park__media > img { width: 100%; aspect-ratio: 2000 / 923; object-fit: cover; transform: scale(calc(1 + var(--ix) * .006)); } .park__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 22, 52, .45), transparent 30%, transparent 70%, rgba(6, 22, 52, .5)); } .hotspot { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i) * 140ms); } .park.is-open .hotspot { opacity: 1; transform: none; } .hotspot__dot { position: absolute; inset: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(255, 255, 255, .3), 0 8px 22px rgba(0, 0, 0, .55); transition: transform .4s var(--ease-out), background .3s; } .hotspot__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(var(--navy), var(--navy)) center / 12px 2.5px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2.5px 12px no-repeat; transition: transform .4s var(--ease-out); } .hotspot:hover .hotspot__dot::after, .hotspot.is-open .hotspot__dot::after { transform: rotate(45deg); } .hotspot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); animation: ping 2.4s var(--ease-out) infinite; animation-delay: calc(var(--i) * 300ms); } @keyframes ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } .hotspot:hover .hotspot__dot, .hotspot.is-open .hotspot__dot { transform: scale(1.12); background: var(--sky); } .hotspot__tip { position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 250px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--text); text-align: left; font-size: .86rem; line-height: 1.45; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .55); opacity: 0; transform: translate(-50%, 8px) scale(.96); transform-origin: 50% 100%; pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); } .hotspot__tip strong { display: block; margin-bottom: 3px; font-family: var(--font-display); font-size: .98rem; letter-spacing: -.01em; color: var(--ink); } .hotspot--end .hotspot__tip { left: auto; right: -8px; transform: translate(0, 8px) scale(.96); transform-origin: 90% 100%; } .hotspot--start .hotspot__tip { left: -8px; transform: translate(0, 8px) scale(.96); transform-origin: 10% 100%; } .hotspot:hover .hotspot__tip, .hotspot:focus-visible .hotspot__tip, .hotspot.is-open .hotspot__tip { opacity: 1; transform: translate(-50%, 0) scale(1); } .hotspot--end:hover .hotspot__tip, .hotspot--end:focus-visible .hotspot__tip, .hotspot--end.is-open .hotspot__tip, .hotspot--start:hover .hotspot__tip, .hotspot--start:focus-visible .hotspot__tip, .hotspot--start.is-open .hotspot__tip { transform: none; } .park__label { position: absolute; z-index: 2; left: calc(var(--ix) * 1% + 28px); top: 26px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(6, 22, 52, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .15); font-size: .8rem; font-weight: 800; color: #fff; } .park__label .i { width: 16px; height: 16px; color: var(--blue-300); } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(40px, 5vw, 64px); } .feature { display: flex; gap: 18px; padding: 26px; border-radius: 24px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); } .feature__icon { display: grid; place-items: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 16px; background: linear-gradient(145deg, var(--blue), var(--navy)); color: #fff; box-shadow: 0 12px 26px -10px rgba(47, 111, 228, .8); } .feature h3 { font-size: 1.12rem; letter-spacing: -.015em; } .feature p { margin-top: 6px; font-size: .95rem; color: rgba(217, 234, 253, .7); } /* ---------- bento servicii ---------- */ .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .card { position: relative; isolation: isolate; overflow: hidden; grid-column: span 4; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: transform .6s var(--ease-out), box-shadow .6s; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } .card--7 { grid-column: span 7; } .card--5 { grid-column: span 5; } .spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 111, 228, .11), transparent 50%); } .spot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity .5s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 111, 228, .85), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .spot:hover::before, .spot:hover::after { opacity: 1; } .icon-box { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, var(--navy-600), var(--navy)); box-shadow: 0 14px 28px -12px rgba(15, 55, 122, .7), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .7s var(--ease-out); } .icon-box .i { width: 26px; height: 26px; } .card:hover .icon-box { transform: rotate(-8deg) scale(1.07); } .card h3 { margin-top: 24px; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.025em; } .card p { margin-top: 10px; color: var(--muted); } .card__more { margin-top: auto; padding-top: 22px; } .bars { display: grid; gap: 14px; margin-top: 28px; } .bar { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; font-size: .9rem; font-weight: 700; color: var(--text); } .bar__rate { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; color: var(--navy); letter-spacing: -.02em; } .bar__rate small { font-size: .7em; color: var(--muted); font-weight: 700; margin-right: 3px; letter-spacing: 0; } .bar__track { grid-column: 1 / -1; height: 12px; border-radius: 99px; background: var(--ice); overflow: hidden; } .bar__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--blue)); transform-origin: left; transition: transform 1.6s var(--ease-out); transition-delay: calc(var(--i) * 150ms + 200ms); } .js .bar__fill { transform: scaleX(0); } .js .is-in .bar__fill, .js .bars.is-in .bar__fill { transform: scaleX(1); } .bars__hint { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .86rem; font-weight: 700; color: var(--blue); } .bars__hint .i { width: 16px; height: 16px; } /* card „cameră video" */ .cctv { color: #fff; min-height: 440px; justify-content: flex-end; background: #050d1f; border-color: transparent; } .cctv > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.15) brightness(.72) saturate(.9); transition: transform 1.4s var(--ease-out); } .cctv:hover > img { transform: scale(1.06); } .cctv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(6, 22, 52, .4), rgba(6, 22, 52, .05) 30%, rgba(3, 12, 32, .75) 62%, rgba(3, 12, 32, .96) 100%); } .cctv h3 { color: #fff; } .cctv p { color: rgba(217, 234, 253, .78); } .cctv .icon-box { background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; border: 1px solid rgba(255, 255, 255, .2); } .hud { position: absolute; top: 22px; left: 24px; right: 24px; display: flex; justify-content: space-between; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .76rem; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .6); } .rec { display: inline-flex; align-items: center; gap: 8px; } .rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 10px #ff3b4e; animation: blink 1.4s steps(2, start) infinite; } @keyframes blink { to { visibility: hidden; } } .corners { position: absolute; inset: 14px; z-index: 0; pointer-events: none; opacity: .75; background: linear-gradient(#fff, #fff) left top / 22px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 22px no-repeat, linear-gradient(#fff, #fff) right top / 22px 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px 22px no-repeat, linear-gradient(#fff, #fff) left bottom / 22px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 22px no-repeat, linear-gradient(#fff, #fff) right bottom / 22px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 22px no-repeat; } /* ---------- video ---------- */ .vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); } .vcard { position: relative; isolation: isolate; display: block; width: 100%; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 10; background: #000; color: #fff; text-align: left; cursor: pointer; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); } .vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), filter .6s; } .vcard:hover img { transform: scale(1.07); filter: brightness(.85); } .vcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(3, 12, 32, .9)); } .vcard__meta { position: absolute; z-index: 2; left: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px); bottom: clamp(18px, 2.6vw, 28px); } .vcard__meta small { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-300); } .vcard__meta strong { display: block; margin-top: 6px; font-family: var(--font-display); font-stretch: 108%; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .6); transition: transform .6s var(--ease-out); } .play .i { width: 30px; height: 30px; margin-left: 4px; } .play::before, .play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: ping 2.4s var(--ease-out) infinite; } .play::after { animation-delay: 1.2s; } .vcard:hover .play { transform: scale(1.12); } .vcard__dur { position: absolute; z-index: 2; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .76rem; font-weight: 800; } .vcard__dur .i { width: 14px; height: 14px; color: #ff4b4b; } /* ---------- modal video + lightbox ---------- */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 70px var(--gutter) 40px; background: rgba(3, 12, 32, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .45s, visibility 0s .45s; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity .45s; } .modal__frame { width: min(100%, 1100px); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .8); transform: scale(.94) translateY(20px); transition: transform .6s var(--ease-out); } .modal.is-open .modal__frame { transform: none; } .modal__frame iframe { width: 100%; height: 100%; border: 0; } .modal__close { position: absolute; top: 18px; right: 18px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .18); transition: background .3s, transform .4s var(--ease-out); } .modal__close:hover { background: rgba(255, 255, 255, .2); transform: rotate(90deg); } .lb { padding-inline: clamp(16px, 7vw, 110px); } .lb__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; transform: scale(.96); transition: transform .6s var(--ease-out); } .lb.is-open .lb__stage { transform: none; } .lb__img { max-width: min(100%, 1500px); max-height: calc(100vh - 190px); max-height: calc(100svh - 190px); width: auto; height: auto; border-radius: 18px; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .8); transition: opacity .35s, transform .5s var(--ease-out); user-select: none; -webkit-user-drag: none; } .lb__img.is-swap { opacity: 0; transform: scale(.97); } .lb__nav { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: background .3s, transform .4s var(--ease-out); } .lb__nav:hover { background: rgba(255, 255, 255, .22); } .lb__prev { left: clamp(10px, 2vw, 30px); } .lb__next { right: clamp(10px, 2vw, 30px); } .lb__prev:hover { transform: translateX(-3px); } .lb__next:hover { transform: translateX(3px); } .lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; color: rgba(217, 234, 253, .8); font-size: .95rem; font-weight: 700; } .lb__count { font-family: var(--font-display); font-stretch: 112%; color: #fff; white-space: nowrap; } .field.is-err input { border-color: #e5484d; box-shadow: 0 0 0 5px rgba(229, 72, 77, .14); } /* ---------- recenzii ---------- */ .reviews { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .rating__score { display: flex; align-items: flex-end; gap: 14px; font-family: var(--font-display); font-weight: 900; font-stretch: 105%; font-size: clamp(6rem, 13vw, 10rem); line-height: .82; letter-spacing: -.06em; color: var(--navy); } .rating__score small { margin-bottom: .55em; font-size: .16em; font-weight: 800; letter-spacing: 0; color: var(--muted); } .rating__stars { display: flex; gap: 6px; margin-top: 22px; color: var(--gold); } .rating__stars .i { width: 30px; height: 30px; } .js .rating__stars .i { opacity: 0; transform: scale(.3) rotate(-40deg); transition: opacity .5s, transform .8s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 90ms + 250ms); } .js .is-in .rating__stars .i { opacity: 1; transform: none; } .rating__text { margin-top: 18px; font-size: 1.08rem; color: var(--muted); max-width: 30ch; } .rating__text strong { color: var(--ink); } .rating__g { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 800; color: var(--ink); box-shadow: var(--shadow-1); transition: transform .4s var(--ease-out), box-shadow .4s; } .rating__g:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .rating__g .gmark { width: 30px; height: 30px; padding: 5px; background: var(--ice); } .tstack { position: relative; height: var(--h, 360px); } .tcard { position: absolute; inset: 0 0 auto; margin: 0; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transform-origin: 50% 100%; transition: transform .8s var(--ease-out), opacity .8s var(--ease-out), box-shadow .8s; user-select: none; touch-action: pan-y; } .tcard[data-pos="0"] { z-index: 3; box-shadow: var(--shadow-2); } .tcard[data-pos="1"] { z-index: 2; transform: translate3d(0, 24px, 0) scale(.95) rotate(1.6deg); opacity: .75; } .tcard[data-pos="2"] { z-index: 1; transform: translate3d(0, 48px, 0) scale(.9) rotate(-1.8deg); opacity: .45; } .tcard.is-out { transform: translate3d(-115%, -10px, 0) rotate(-14deg) !important; opacity: 0 !important; } .tcard__q { width: 46px; height: 46px; color: var(--sky); } .tcard__text { margin: 14px 0 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 600; font-size: clamp(1.12rem, 1.7vw, 1.38rem); line-height: 1.45; letter-spacing: -.015em; color: var(--ink); } .tcard__who { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .tcard__av { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(145deg, var(--navy-600), var(--navy)); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; } .tcard__who strong { display: block; color: var(--ink); font-weight: 800; } .tcard__who small { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .tcard__who .stars { margin-left: auto; } .tnav { display: flex; align-items: center; gap: 12px; margin-top: 74px; } .tnav__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--navy); transition: background .3s, color .3s, transform .4s var(--ease-out); } .tnav__btn:hover { background: var(--navy); color: #fff; transform: scale(1.06); } .tnav__dots { display: flex; gap: 8px; margin-left: 8px; } .tnav__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--mist); transition: width .5s var(--ease-out), background .4s; } .tnav__dot.is-on { width: 30px; background: var(--navy); } /* ---------- galerie în mișcare ---------- */ .reel { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 60px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .reel__row { display: flex; width: max-content; animation: reel 60s linear infinite; } @keyframes reel { to { transform: translateX(-50%); } } .reel__row--rev { animation-direction: reverse; animation-duration: 70s; } .reel:hover .reel__row { animation-play-state: paused; } .reel__set { display: flex; gap: 18px; padding-right: 18px; } .reel__item { position: relative; display: block; flex-shrink: 0; height: clamp(170px, 20vw, 270px); aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--mist); } .reel__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .reel__item:hover img { transform: scale(1.08); } .reel__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15, 55, 122, .1); } /* ---------- întrebări ---------- */ .faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .faq__aside { position: sticky; top: 120px; display: grid; gap: 22px; } .helpcard { margin-top: 18px; padding: 28px; border-radius: 26px; background: var(--navy-900); color: rgba(217, 234, 253, .78); position: relative; overflow: hidden; isolation: isolate; } .helpcard::before { content: ""; position: absolute; right: -60px; top: -60px; z-index: -1; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 111, 228, .55), transparent); } .helpcard strong { display: block; font-family: var(--font-display); font-stretch: 108%; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; } .helpcard p { margin-top: 8px; font-size: .95rem; } .helpcard .btn { margin-top: 20px; } .acc { border-bottom: 1px solid var(--line); } .acc:first-child { border-top: 1px solid var(--line); } .acc summary { list-style: none; position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 60px 26px 0; cursor: pointer; font-family: var(--font-display); font-stretch: 104%; font-weight: 700; font-size: clamp(1.08rem, 1.6vw, 1.28rem); letter-spacing: -.02em; color: var(--ink); transition: color .3s; } .acc summary::-webkit-details-marker { display: none; } .acc summary:hover { color: var(--navy); } .acc__n { font-size: .78rem; font-weight: 800; color: var(--blue); letter-spacing: .04em; min-width: 22px; } .acc__ic { position: absolute; right: 0; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: #fff; border: 1px solid var(--line); transition: background .4s, border-color .4s, transform .6s var(--ease-out); } .acc__ic::before, .acc__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--navy); transition: transform .5s var(--ease-out), background .3s; } .acc__ic::after { transform: rotate(90deg); } .acc[open] .acc__ic { background: var(--navy); border-color: var(--navy); transform: rotate(180deg); } .acc[open] .acc__ic::before, .acc[open] .acc__ic::after { background: #fff; } .acc[open] .acc__ic::after { transform: rotate(0deg); } .acc__body { overflow: hidden; } .acc__body p { padding: 0 60px 26px 40px; color: var(--muted); } .acc__body strong { color: var(--ink); } /* ---------- CTA final + contact ---------- */ .cta { position: relative; isolation: isolate; overflow: clip; text-align: center; color: rgba(217, 234, 253, .78); background: var(--navy-900); } .cta__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 110%, rgba(47, 111, 228, .55), transparent 70%), radial-gradient(40% 50% at 10% 0%, rgba(47, 111, 228, .25), transparent 70%); } .cta__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(50% 60% at 50% 60%, #000, transparent); mask-image: radial-gradient(50% 60% at 50% 60%, #000, transparent); } .cta h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.2rem); } .cta .lead { margin: 18px auto 0; } .cta__phone { display: inline-block; margin-top: clamp(26px, 4vw, 44px); font-family: var(--font-display); font-stretch: 118%; font-weight: 900; font-size: clamp(2.5rem, 9.4vw, 8.6rem); line-height: 1; letter-spacing: -.045em; white-space: nowrap; background: linear-gradient(100deg, #fff 0%, var(--blue-300) 30%, #fff 50%, var(--sky) 70%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s ease-in-out infinite; transition: transform .6s var(--ease-out); } .cta__phone:hover { transform: scale(1.03); } .cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 4vw, 40px); } .cta__note { margin-top: 22px; font-size: .9rem; color: rgba(217, 234, 253, .55); } .contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; margin-top: clamp(64px, 8vw, 110px); text-align: left; } .ccards { display: grid; gap: 14px; } .ccard { position: relative; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); color: rgba(217, 234, 253, .7); transition: background .4s, border-color .4s, transform .5s var(--ease-out); } a.ccard:hover, .ccard--link:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); transform: translateX(6px); } .ccard__ic { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; background: rgba(91, 147, 255, .16); color: #fff; } .ccard__ic .i { width: 22px; height: 22px; } .ccard small { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-300); } .ccard strong { display: block; margin-top: 3px; font-size: 1.08rem; font-weight: 800; color: #fff; line-height: 1.35; } .ccard__go { margin-left: auto; color: rgba(255, 255, 255, .5); transition: transform .4s var(--ease-out), color .3s; } a.ccard:hover .ccard__go { transform: translateX(4px); color: #fff; } .ccard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .82rem; font-weight: 800; transition: background .3s, transform .3s; } .chip:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); } .chip .i { width: 15px; height: 15px; } .chip.is-done { background: #2fbf71; border-color: #2fbf71; } /* hartă (se încarcă la click) */ .map { position: relative; overflow: hidden; isolation: isolate; min-height: 380px; border-radius: 26px; background: #0b1938; border: 1px solid var(--line-dark); } .map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform 1.2s var(--ease-out); } .map:hover > img { transform: scale(1.05); } .map::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 46%, transparent 0 60px, rgba(3, 12, 32, .55) 260px); pointer-events: none; } .map iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; } .map__pin { position: absolute; z-index: 1; left: 50%; top: 46%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #fff; color: var(--navy); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6); animation: bob 2.6s ease-in-out infinite; } .map__pin img { width: 38px; transform: rotate(45deg); } .map__pin::after { content: ""; position: absolute; left: -12px; bottom: -12px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; transform: rotate(45deg); animation: ping 2.4s var(--ease-out) infinite; } @keyframes bob { 50% { translate: 0 -8px; } } .map__ui { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 20px; border-radius: 20px; background: rgba(6, 22, 52, .75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-dark); color: #fff; } .map__ui strong { font-weight: 800; } .map__ui small { display: block; color: rgba(217, 234, 253, .7); font-size: .82rem; } /* ---------- footer ---------- */ .footer { position: relative; overflow: hidden; padding-top: clamp(70px, 9vw, 110px); background: var(--navy-950); color: rgba(217, 234, 253, .62); font-size: .95rem; } .footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; } .footer__brand img { width: 120px; } .footer__brand p { margin-top: 18px; max-width: 32ch; } .socials { display: flex; gap: 10px; margin-top: 22px; } .socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background .3s, transform .4s var(--ease-out); } .socials a:hover { background: var(--navy); transform: translateY(-3px); } .socials .i { width: 18px; height: 18px; } .footer h4 { font-family: var(--font-display); font-stretch: 125%; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 18px; } .footer li + li { margin-top: 10px; } .footer a:not(.btn) { transition: color .3s; } .footer a:not(.btn):hover { color: #fff; } .footer__contact li { display: flex; gap: 10px; } .footer__contact .i { width: 18px; height: 18px; margin-top: 3px; color: var(--blue-300); } .footer__mega { margin: clamp(50px, 8vw, 90px) 0 0; font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 11.3vw; line-height: .78; letter-spacing: -.05em; text-align: center; white-space: nowrap; user-select: none; color: transparent; -webkit-text-stroke: 1px rgba(217, 234, 253, .16); background: linear-gradient(180deg, rgba(91, 147, 255, .35), rgba(91, 147, 255, 0) 80%); -webkit-background-clip: text; background-clip: text; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding: 26px 0 30px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .84rem; position: relative; } /* ---------- elemente plutitoare ---------- */ .wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 16px 34px -10px rgba(37, 211, 102, .7); transition: transform .5s var(--ease-out); } .wa-float:hover { transform: scale(1.08) rotate(-6deg); } .wa-float .i { width: 30px; height: 30px; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: ping 2.6s var(--ease-out) infinite; } .wa-bubble { position: fixed; right: 24px; bottom: 100px; z-index: 80; display: flex; align-items: flex-start; gap: 12px; max-width: 290px; padding: 16px 18px; border-radius: 20px 20px 6px 20px; background: #fff; color: var(--text); box-shadow: 0 24px 60px -18px rgba(6, 22, 52, .5); font-size: .92rem; line-height: 1.45; opacity: 0; transform: translateY(14px) scale(.95); transform-origin: 100% 100%; pointer-events: none; transition: opacity .5s, transform .6s var(--ease-out); } .wa-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; } .wa-bubble strong { display: block; color: var(--ink); } .wa-bubble__x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); } .wa-bubble__x .i { width: 14px; height: 14px; } .wa-bubble__av { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ice); } .wa-bubble__av img { width: 30px; } .mbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 80; display: none; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 24px; background: rgba(6, 22, 52, .86); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 50px -10px rgba(3, 12, 32, .6); transform: translateY(160%); transition: transform .6s var(--ease-out); } .mbar.is-on { transform: none; } .mbar .btn { --h: 52px; padding: 0 14px; } /* ---------- pagini interioare ---------- */ .phero { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--nav-h) + clamp(80px, 12vh, 130px)) 0 clamp(70px, 9vw, 120px); color: rgba(217, 234, 253, .8); background: var(--navy-900); } .phero__bg { position: absolute; inset: 0; z-index: -1; } .phero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; animation: kenburns 40s var(--ease-in-out) infinite alternate; } .phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 22, 52, .95) 0%, rgba(6, 22, 52, .7) 50%, rgba(6, 22, 52, .35) 100%), linear-gradient(0deg, var(--navy-900), transparent 45%); } .phero__glow { position: absolute; right: -10%; top: -40%; z-index: -1; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 111, 228, .45), transparent); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .86rem; font-weight: 700; color: rgba(217, 234, 253, .6); } .crumbs a:hover { color: #fff; } .crumbs .i { width: 14px; height: 14px; opacity: .6; } .crumbs [aria-current] { color: #fff; } .phero h1 { margin-top: 22px; font-size: clamp(2.7rem, 7.6vw, 6.4rem); font-stretch: 112%; font-weight: 900; letter-spacing: -.05em; line-height: .96; color: #fff; } .phero .lead { margin-top: 22px; } .phero__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; } .phero__by { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-weight: 800; color: #fff; } .phero__by img { width: 40px; } .phero__by small { display: block; font-size: .78rem; font-weight: 700; color: var(--blue-300); letter-spacing: .06em; } /* despre — 5 lucruri */ .five { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 90px); align-items: start; } .five__aside { position: sticky; top: 120px; } .five__count { display: flex; align-items: baseline; gap: 10px; margin-top: 34px; font-family: var(--font-display); font-weight: 900; font-stretch: 112%; color: var(--navy); } .five__count .odo { font-size: clamp(5rem, 10vw, 8rem); letter-spacing: -.06em; } .five__count small { font-size: 1.4rem; color: var(--mist); letter-spacing: -.02em; } .five__prog { height: 4px; margin-top: 18px; border-radius: 4px; background: var(--sky); overflow: hidden; max-width: 260px; } .five__prog span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--navy), var(--blue)); transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .8s var(--ease-out); } .five__list { display: grid; gap: 18px; } .five__item { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: opacity .6s, transform .8s var(--ease-out), box-shadow .8s; } .js .five__item { opacity: .45; } .js .five__item.is-active { opacity: 1; box-shadow: var(--shadow-2); transform: translateX(-6px); } .five__item header { display: flex; align-items: center; gap: 16px; } .five__item h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); } .five__n { font-family: var(--font-display); font-weight: 900; font-size: .9rem; color: var(--blue); } .facts { display: grid; gap: 14px; margin-top: 22px; } .facts li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--text); } .facts .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--sky-50); color: var(--navy); stroke-width: 3; margin-top: 2px; } .facts strong { color: var(--ink); } /* certificat BNR */ .cert { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(26px, 4vw, 48px); border-radius: var(--radius-lg); color: rgba(217, 234, 253, .78); background: linear-gradient(135deg, var(--navy-800), var(--navy-900)); box-shadow: var(--shadow-2); } .cert::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px); } .cert__seal { position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--sky)); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 0 0 16px rgba(255, 255, 255, .03), 0 20px 40px -10px rgba(0, 0, 0, .5); } .cert__seal img { width: 72px; } .cert h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); } .cert dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; margin: 18px 0 0; } .cert dt { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-300); } .cert dd { margin: 2px 0 0; font-weight: 800; color: #fff; } /* servicii — ce îți oferim */ .offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .offer__item { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 3.4vw, 40px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); } .offer__big { font-family: var(--font-display); font-stretch: 112%; font-weight: 900; font-size: clamp(3rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -.05em; color: var(--navy); } .offer__big small { font-size: .38em; letter-spacing: -.01em; color: var(--blue); } .offer__item h3 { margin-top: 18px; font-size: 1.35rem; } .offer__item p { margin-top: 8px; color: var(--muted); } .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: flow; position: relative; } .flow__item { position: relative; padding: 0 clamp(16px, 2vw, 30px) 0 0; } .flow__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--navy); font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; box-shadow: var(--shadow-1); } .flow__item::before { content: ""; position: absolute; top: 32px; left: 64px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--mist) 0 8px, transparent 8px 16px); } .flow__item:last-child::before { display: none; } .flow__item h3 { margin-top: 22px; font-size: 1.3rem; } .flow__item p { margin-top: 8px; color: var(--muted); max-width: 30ch; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; } .split--calc { grid-template-columns: 1fr minmax(0, 480px); } .sticky-col { position: sticky; top: 120px; } .media-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } .media-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } .media-card__tag { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--navy); font-weight: 800; font-size: .9rem; } .checks { display: grid; gap: 14px; margin-top: 28px; } .checks li { display: flex; align-items: flex-start; gap: 14px; font-weight: 700; color: var(--ink); } .checks .i { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--navy); color: #fff; stroke-width: 3; } .rates { width: 100%; margin-top: 28px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; } .rates th, .rates td { padding: 16px 22px; text-align: left; } .rates th { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: var(--ice); font-weight: 800; } .rates td { border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); } .rates td:last-child { font-family: var(--font-display); font-weight: 900; color: var(--navy); font-size: 1.1rem; } .rates td:last-child small { font-family: var(--font-body); font-size: .8rem; color: var(--muted); font-weight: 700; margin-right: 4px; } /* acte necesare (bifă) */ .docs { display: grid; gap: 12px; margin-top: 28px; } .doc { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 22px; background: #fff; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s, background .3s; } .doc:hover { transform: translateX(4px); border-color: rgba(15, 55, 122, .3); } .doc input { -webkit-appearance: none; appearance: none; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 10px; border: 2px solid var(--mist); background: #fff; cursor: pointer; transition: background .3s, border-color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .doc input::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .doc input:checked { background: var(--navy); border-color: var(--navy); transform: scale(1.08); } .doc input:checked::after { transform: rotate(-45deg) scale(1); } .doc:has(input:checked) { border-color: var(--navy); background: var(--sky-50); } .doc__ic { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--ice); color: var(--navy); } .doc strong { display: block; color: var(--ink); font-weight: 800; } .doc small { display: block; color: var(--muted); font-size: .88rem; } .docs__done { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 18px 22px; border-radius: 22px; background: var(--navy); color: #fff; opacity: 0; transform: translateY(10px); max-height: 0; overflow: hidden; padding-block: 0; transition: opacity .5s, transform .6s var(--ease-out), max-height .6s var(--ease-out), padding .6s var(--ease-out); } .docs__done.is-on { opacity: 1; transform: none; max-height: 200px; padding-block: 18px; } .docs__done .btn { margin-left: auto; } .docs__meter { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .9rem; font-weight: 800; color: var(--navy); } .docs__meter span { flex: 1; height: 6px; border-radius: 6px; background: var(--sky); overflow: hidden; } .docs__meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--blue)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-out); } /* cronologie verticală */ .timeline { position: relative; display: grid; gap: clamp(20px, 3vw, 34px); } .timeline__rail { position: absolute; left: 31px; top: 20px; bottom: 20px; width: 2px; background: var(--sky); } .timeline__rail span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--blue), var(--navy)); transform-origin: top; transform: scaleY(var(--p, 0)); } .tl { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: clamp(18px, 3vw, 34px); align-items: start; } .tl__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--sky); color: var(--navy); font-family: var(--font-display); font-weight: 900; transition: background .6s, color .6s, border-color .6s, box-shadow .6s; } .tl.is-on .tl__dot { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 0 0 10px rgba(47, 111, 228, .12); } .tl__card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: box-shadow .6s, transform .8s var(--ease-out); } .tl.is-on .tl__card { box-shadow: var(--shadow-2); } .tl__card h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); } .tl__card p { margin-top: 10px; color: var(--muted); } .tl__card p strong { color: var(--ink); } /* galerie */ .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; } .filter { padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 800; font-size: .92rem; color: var(--navy); transition: background .3s, color .3s, border-color .3s, transform .3s; } .filter:hover { transform: translateY(-2px); } .filter.is-on { background: var(--navy); color: #fff; border-color: var(--navy); } .filter sup { margin-left: 4px; font-size: .7em; opacity: .65; } .gal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(180px, 20vw, 270px); grid-auto-flow: dense; gap: 16px; } .gal__item { position: relative; overflow: hidden; border-radius: 24px; background: var(--mist); cursor: zoom-in; display: block; } .gal__item--wide { grid-column: span 2; } .gal__item--tall { grid-row: span 2; } .gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; } .gal__item:hover img { transform: scale(1.07); } .gal__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 12, 32, .75)); opacity: 0; transition: opacity .5s; } .gal__item:hover::after, .gal__item:focus-visible::after { opacity: 1; } .gal__cap { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 800; font-size: .95rem; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease-out); } .gal__cap .i { width: 20px; height: 20px; } .gal__item:hover .gal__cap, .gal__item:focus-visible .gal__cap { opacity: 1; transform: none; } .gal__item.is-hidden { display: none; } .gal__item.is-pop { animation: pop .7s var(--ease-out) both; } @keyframes pop { from { opacity: 0; transform: scale(.94); } } /* formular WhatsApp */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form .full { grid-column: 1 / -1; } .field { position: relative; } .field input, .field textarea, .field select { width: 100%; height: 62px; padding: 24px 18px 8px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-weight: 600; color: var(--ink); transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; } .field textarea { height: 130px; resize: vertical; padding-top: 28px; } .field label { position: absolute; left: 19px; top: 20px; font-weight: 700; color: var(--muted); pointer-events: none; transition: top .3s var(--ease-out), font-size .3s, color .3s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 5px rgba(47, 111, 228, .14); } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 9px; font-size: .74rem; color: var(--blue); letter-spacing: .02em; } .form__note { font-size: .84rem; color: var(--muted); } .form-card { padding: clamp(26px, 3.6vw, 44px); border-radius: var(--radius-lg); background: var(--ice); border: 1px solid var(--line); } .form-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .form-card > p { margin: 8px 0 24px; color: var(--muted); } /* pagini legale */ .legal { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: start; } .toc { position: sticky; top: 110px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); max-height: calc(100vh - 140px); overflow: auto; } .toc strong { display: block; margin-bottom: 12px; font-family: var(--font-display); font-stretch: 125%; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); } .toc a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; font-size: .86rem; font-weight: 700; line-height: 1.35; color: var(--muted); transition: background .3s, color .3s; } .toc a:hover { color: var(--navy); background: var(--ice); } .toc a.is-on { color: var(--navy); background: var(--sky-50); } .prose { max-width: 780px; font-size: 1.02rem; line-height: 1.75; color: var(--text); overflow-wrap: anywhere; } .prose h2 { margin: 2.2em 0 .7em; font-size: clamp(1.2rem, 2vw, 1.45rem); font-stretch: 100%; letter-spacing: -.015em; line-height: 1.25; scroll-margin-top: 110px; } .prose h2:first-child { margin-top: 0; } .prose p { margin: 0 0 1.05em; } .prose ul { margin: 0 0 1.2em; padding-left: 0; display: grid; gap: .5em; } .prose li { position: relative; padding-left: 26px; } .prose li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .prose a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(15, 55, 122, .3); text-underline-offset: 3px; } .prose strong { color: var(--ink); } .legal__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } /* pagina 404 */ .nf { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .nf__code { margin: 0 0 6px; font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(6.5rem, 24vw, 19rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(217, 234, 253, .3); background: linear-gradient(180deg, rgba(143, 182, 255, .55), rgba(143, 182, 255, 0) 85%); -webkit-background-clip: text; background-clip: text; } /* ---------- animații la scroll ---------- */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 46px, 0); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); } .js [data-reveal="left"] { transform: translate3d(-50px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(50px, 0, 0); } .js [data-reveal="scale"] { transform: scale(.92); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-split]:not(.is-split) { visibility: hidden; } .js [data-split] .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .js [data-split] .wd > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 45ms); } .js [data-split].is-in .wd > span { transform: none; } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .nav__link { padding: 10px 11px; font-size: .9rem; } .brand__text { display: none; } } @media (max-width: 1100px) { .hero__inner { grid-template-columns: 1fr; } .hero__title { font-size: clamp(2.2rem, 9.4vw, 4.8rem); } .hero__aside { max-width: 560px; margin-top: 46px; } .hero { min-height: auto; } .head--split { grid-template-columns: 1fr; } .head--split .lead { grid-column: 1; grid-row: auto; } .stats { grid-template-columns: repeat(2, 1fr); } .card, .card--7, .card--5 { grid-column: span 6; } .card--7 { grid-column: span 12; } .reviews, .faq, .five, .split, .split--calc { grid-template-columns: 1fr; } .faq__aside, .five__aside, .sticky-col { position: static; } .five__count { display: none; } .js .five__item { opacity: 1; } .contact { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr 1fr; } .legal { grid-template-columns: 1fr; } .toc { position: static; max-height: none; } .features { grid-template-columns: 1fr; } } @media (max-width: 960px) { .nav__links, .nav__cta { display: none; } .burger, .nav__call { display: grid; place-items: center; } .nav__bar { gap: 8px; padding: 0 8px 0 10px; } .brand { gap: 10px; } .brand img { width: 40px; } .nav__call { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; margin-left: auto; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .15); } .nav__call .i { width: 20px; height: 20px; } .brand__text { display: grid; } .offer { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; gap: 26px; } .flow__item { display: grid; grid-template-columns: 64px 1fr; gap: 6px 20px; padding: 0; } .flow__item .flow__dot { grid-row: span 2; } .flow__item h3 { margin-top: 4px; } .flow__item::before { top: 64px; bottom: -26px; left: 31px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--mist) 0 8px, transparent 8px 16px); } .cert { grid-template-columns: 1fr; text-align: left; } .cert dl { grid-template-columns: 1fr; } } @media (max-width: 860px) { /* pași: drum vertical */ .steps__wrap { display: grid; grid-template-columns: 64px 1fr; gap: 18px; } .steps__grid { grid-template-columns: 1fr; gap: 18px; grid-column: 2; grid-row: 1; } .road { grid-column: 1; grid-row: 1; height: auto; margin: 0; } .road__asphalt { left: 50%; right: auto; top: 0; bottom: 0; width: 58px; height: auto; transform: translateX(-50%); } .road__asphalt::before { left: 50%; right: auto; top: 26px; bottom: 26px; width: 3px; height: auto; margin: 0 0 0 -1.5px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 22px, transparent 22px 44px); } .road__trail { left: 0; right: 0; top: 0; width: auto; height: var(--trail, 0px); bottom: auto; background: linear-gradient(180deg, rgba(47, 111, 228, 0), rgba(47, 111, 228, .45)); } .road__stop { left: 50%; top: var(--at, 50%); } .road__car { left: 50%; top: 0; width: 82px; transform: translate3d(-50%, var(--y, 0px), 0) rotate(90deg); } .road__flag { display: none; } .step.is-on { transform: translateX(-4px); } .vgrid { grid-template-columns: 1fr; } } @media (max-width: 760px) { body { font-size: 1rem; } .hero { padding-top: calc(var(--nav-h) + 54px); padding-bottom: 100px; } .hero__ctas .btn { flex: 1 1 auto; } .phero h1 { font-size: clamp(2rem, 10.2vw, 3.4rem); } .hero__trust { gap: 12px 18px; } .hero__scroll { display: none; } .band--a { top: 44px; transform: rotate(-5deg); } .band--b { top: 100px; transform: rotate(3deg); } .hero__aside { margin-top: 58px; } .badge { width: 112px; height: 112px; right: -8px !important; top: -58px !important; } .live { display: none; } .calc__row { font-size: .88rem; } .badge__core { width: 70px; height: 70px; } .badge__core img { width: 48px; } .stats { grid-template-columns: 1fr 1fr; gap: 12px; } .stat { padding: 22px 20px; } .bento { gap: 14px; } .card, .card--7, .card--5 { grid-column: span 12; } .cctv { min-height: 380px; } .footer__top { grid-template-columns: 1fr; gap: 34px; } .footer { padding-bottom: 90px; } .wa-float, .wa-bubble { display: none; } .mbar { display: grid; } .acc summary { padding-right: 54px; } .acc__body p { padding: 0 0 24px 40px; } .form { grid-template-columns: 1fr; } .gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; } .gal__item { border-radius: 16px; } .gal__item--tall { grid-row: span 1; } .lb__nav { top: auto; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; } .lb__prev { left: calc(50% - 68px); } .lb__next { right: calc(50% - 68px); } .lb__img { max-height: calc(100svh - 230px); border-radius: 14px; } .hotspot { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .hotspot__dot { inset: 10px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3), 0 6px 16px rgba(0, 0, 0, .5); } .hotspot__dot::after { background-size: 9px 2px, 2px 9px; } .hotspot__tip { max-width: 200px; font-size: .8rem; } .park__label { display: none; } .tnav { margin-top: 70px; } .map { min-height: 320px; } .rates th, .rates td { padding: 14px 16px; } } @media (max-width: 420px) { .stats { grid-template-columns: 1fr; } .brand__sub { display: none; } .tiers { gap: 6px; } .tier__rate { font-size: 1.1rem; } .tier__range { font-size: .64rem; } } /* ---------- mișcare redusă ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .band__track, .reel__row { animation: none !important; } .js [data-reveal], .js [data-split] .wd > span, .js .hero__title .ln > span, .js .hero .fx { opacity: 1 !important; transform: none !important; } .js .manifesto__text .w { opacity: 1; } }