/* Базовий CSS reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { scroll-behavior: smooth; height: 100%; width: 100%; font-family: sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { text-rendering: optimizeSpeed; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; border: none; outline: none; background: none; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } table { border-collapse: collapse; border-spacing: 0; } /* ----------- */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Manrope:wght@400;600&display=swap'); /* Icons: Lucide (в HTML ) */ :root { --color-primary: #4573d2; --color-secondary: #edf0f6; --color-accent: #e94e77; --color-yellow: #f6c667; --color-text: #23232e; --color-white: #fff; --radius: 18px; --shadow: 0 6px 24px rgba(69, 115, 210, 0.06); } body { font-family: 'Manrope', Arial, sans-serif; background: var(--color-secondary); color: var(--color-text); margin: 0; padding: 0; min-height: 100vh; letter-spacing: 0.01em; line-height: 1.6; } h1, h2, h3, h4, h5 { font-family: 'Montserrat', Arial, sans-serif; color: var(--color-primary); margin-bottom: 0.3em; } a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; } a:hover, a:focus { color: var(--color-secondary); } button, .btn { font-family: 'Manrope', Arial, sans-serif; border-radius: var(--radius); background: var(--color-primary); color: var(--color-white); border: none; padding: 0.7em 1.5em; box-shadow: var(--shadow); cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.13s; font-size: 1rem; } button:hover, .btn:hover { background: var(--color-accent); transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 32px rgba(233, 78, 119, 0.11); } img { border-radius: var(--radius); box-shadow: var(--shadow); max-width: 100%; display: block; } /* Адаптив */ @media (max-width: 700px) { body { font-size: 16px; } h1 { font-size: 2rem; } } .header { background: var(--color-white); box-shadow: 0 2px 18px rgba(69,115,210,0.06); position: sticky; top: 0; z-index: 99; opacity: 0; transform: translateY(-30px); transition: opacity .7s cubic-bezier(.7,.1,.2,1), transform .7s cubic-bezier(.7,.1,.2,1); } .header--show { opacity: 1; transform: translateY(0); } .header__nav { display: flex; align-items: center; justify-content: space-between; max-width: 1150px; margin: 0 auto; padding: 1.1rem 2vw; } .header__logo { font-family: 'Montserrat', Arial, sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--color-primary); display: flex; align-items: center; gap: 10px; letter-spacing: 0.02em; transition: filter .22s; cursor: pointer; } .header__logo i { font-size: 1.55em; color: var(--color-accent); filter: drop-shadow(0 1px 6px #f6c66744); } .header__menu { display: flex; gap: 2.5vw; list-style: none; margin: 0; padding: 0; align-items: center; transition: .32s; } .header__menu li { position: relative; } .header__link { font-family: inherit; font-size: 1.07em; color: var(--color-text); text-transform: none; letter-spacing: 0.02em; padding: .3em .7em; border-radius: 10px; transition: background .16s, color .16s, box-shadow .18s; position: relative; z-index: 1; } .header__link--hover, .header__link:focus { background: var(--color-secondary); color: var(--color-primary); box-shadow: 0 1px 8px #4573d22c; } .header__burger { display: none; background: transparent; border: none; color: var(--color-primary); font-size: 1.8em; margin-left: 16px; cursor: pointer; transition: color .17s, transform .17s; } .header__burger--active { color: var(--color-accent); transform: rotate(90deg) scale(1.1); } @media (max-width: 850px) { .header__menu { position: absolute; top: 65px; right: 2vw; background: var(--color-white); box-shadow: 0 8px 32px #4573d229; border-radius: var(--radius); flex-direction: column; gap: 1em; padding: 1em 2em; min-width: 180px; opacity: 0; pointer-events: none; transform: translateY(-20px) scale(.98); transition: .31s cubic-bezier(.86,0,.07,1); } .header__menu--open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); } .header__nav { padding: 1rem 3vw; } .header__burger { display: block; } } .footer { background: var(--color-primary); color: var(--color-white); padding: 2.8rem 0 1.7rem 0; font-size: 1.07em; margin-top: 0; box-shadow: 0 -4px 22px #4573d216; } .footer__container { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr 1.8fr; gap: 2vw; max-width: 1200px; margin: 0 auto; padding: 0 2vw; } .footer__col { display: flex; flex-direction: column; gap: 1.3em; } .footer__col--logo { font-family: 'Montserrat', Arial, sans-serif; font-size: 1.35em; font-weight: 700; gap: 0.7em; } .footer__col--logo i { color: var(--color-accent); font-size: 1.35em; margin-bottom: 0.4em; filter: drop-shadow(0 2px 10px #f6c66766); } .footer__country { margin-top: 0.3em; font-size: .93em; color: var(--color-yellow); display: flex; align-items: center; gap: 0.4em; font-weight: 500; } .footer__col ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: .5em; } .footer__col a { color: var(--color-white); opacity: 0.84; transition: color 0.18s, opacity .18s, text-decoration .18s; text-decoration: none; font-weight: 400; } .footer__col a:hover { color: var(--color-yellow); opacity: 1; text-decoration: underline wavy 1.5px var(--color-yellow); } .footer__col--contacts i { color: var(--color-yellow); margin-right: 0.5em; font-size: 1em; } .footer__col--contacts li { display: flex; align-items: flex-start; gap: 0.6em; font-size: 1em; } @media (max-width: 980px) { .footer__container { grid-template-columns: 1fr 1fr; gap: 2em; } } @media (max-width: 600px) { .footer__container { grid-template-columns: 1fr; gap: 1.2em; padding: 0 5vw; } .footer { font-size: 1em; padding: 2.3em 0 1em 0; } .footer__col { gap: .7em; } } .main { width: 100%; min-height: 600px; } .hero { display: flex; align-items: center; justify-content: space-between; gap: 3vw; min-height: 67vh; background: linear-gradient(99deg, var(--color-secondary) 60%, #fff 100%); border-radius: var(--radius); box-shadow: 0 12px 36px #4573d211; padding: 3.5em 2vw 3.5em 2vw; margin: 2vw auto 1.5vw auto; max-width: 1100px; position: relative; overflow: hidden; } .hero__content { flex: 1.2; z-index: 2; display: flex; flex-direction: column; gap: 2.3em; } .hero__title { font-size: 2.7em; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; color: var(--color-primary); line-height: 1.15; margin-bottom: 0.3em; display: flex; align-items: center; gap: .8em; } .hero__flag img { width: 56px; height: 38px; object-fit: cover; border-radius: 7px; box-shadow: 0 0 12px #f6c66722; border: 2px solid #fff; background: #ddd; } .hero__desc { font-size: 1.18em; color: #333d52; max-width: 450px; line-height: 1.6; } .hero__highlight { display: inline-block; color: var(--color-accent); font-weight: 600; margin-top: 0.9em; font-size: 1em; letter-spacing: 0.02em; animation: heroGlow 2.5s infinite alternate; } @keyframes heroGlow { 0% { filter: brightness(1.05) drop-shadow(0 1px 8px #e94e7735);} 100% { filter: brightness(1.27) drop-shadow(0 3px 28px #e94e7725);} } .hero__btn { margin-top: 1.3em; font-size: 1.09em; padding: 0.8em 2em; font-weight: 600; display: inline-flex; align-items: center; gap: .7em; background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-accent) 100%); border: none; } .hero__visual { flex: 1; min-width: 270px; min-height: 270px; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; } .hero__ai-img { width: 230px; height: 230px; object-fit: cover; border-radius: 40px; box-shadow: 0 10px 36px #4573d233; position: relative; z-index: 2; } .hero__ai-canvas { position: absolute; left: 0; top: 0; width: 270px; height: 270px; pointer-events: none; z-index: 1; opacity: 0.78; } @media (max-width: 870px) { .hero { flex-direction: column; padding: 2.4em 3vw 2.8em 3vw; gap: 1.6em; } .hero__visual { margin-top: 1.1em; } } @media (max-width: 600px) { .hero { min-height: unset; padding: 1.6em 3vw 2.1em 3vw; } .hero__title { font-size: 1.27em; gap: .3em;} .hero__visual { min-width: 160px; min-height: 160px;} .hero__ai-img, .hero__ai-canvas { width: 140px; height: 140px;} } .about { background: linear-gradient(105deg, var(--color-secondary) 85%, #fff 100%); padding: 3.5em 0 2.7em 0; border-radius: var(--radius); margin: 0 auto 2vw auto; box-shadow: 0 3px 18px #e94e7713; max-width: 1100px; } .about__container { display: flex; align-items: flex-start; gap: 2.2em; padding: 0 2.5vw; } .about__icon { flex: 0 0 75px; display: flex; align-items: flex-start; justify-content: center; font-size: 3em; color: var(--color-primary); filter: drop-shadow(0 3px 16px #4573d22e); margin-top: .25em; animation: aboutIconPop 1.2s cubic-bezier(.7,1.8,.6,1) both; } @keyframes aboutIconPop { 0% { transform: scale(0.7) rotate(-30deg); opacity: 0;} 80% { transform: scale(1.08) rotate(9deg);} 100% { transform: scale(1) rotate(0); opacity: 1;} } .about__text { flex: 1; display: flex; flex-direction: column; gap: 1.2em; } .about__title { font-size: 2em; color: var(--color-primary); margin-bottom: 0.2em; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; } .about__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55em; } .about__list li { font-size: 1.07em; display: flex; align-items: center; gap: 0.65em; color: #23232e; } .about__list i { color: var(--color-yellow); font-size: 1.04em; } .about__accent { margin-top: 1.1em; font-weight: 600; color: var(--color-accent); font-size: 1.07em; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.6em; animation: aboutAccentPulse 2s infinite alternate; } @keyframes aboutAccentPulse { 0% { filter: drop-shadow(0 1px 8px #e94e7746);} 100% { filter: drop-shadow(0 2px 15px #e94e7788);} } @media (max-width: 750px) { .about__container { flex-direction: column; gap: 1em;} .about__icon { margin: 0 auto 0.7em auto; } } .cases { background: #fff; border-radius: var(--radius); margin: 2vw auto 2vw auto; padding: 3em 0 2.2em 0; box-shadow: 0 3px 24px #4573d218; max-width: 1100px; } .cases__container { padding: 0 2vw; } .cases__title { font-size: 2em; color: var(--color-primary); margin-bottom: 1.5em; font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; display: flex; align-items: center; gap: 0.6em; } .cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.1em 1.7em; } .case-card { background: var(--color-secondary); border-radius: 18px; box-shadow: 0 4px 16px #e94e7730; padding: 2.1em 1.1em 1.5em 1.1em; display: flex; flex-direction: column; align-items: stretch; transition: transform .22s, box-shadow .24s; position: relative; min-height: 270px; overflow: hidden; animation: casesCardAppear .7s cubic-bezier(.62,1.62,.45,1) both; } @keyframes casesCardAppear { 0% {opacity: 0; transform: translateY(36px) scale(.94);} 100% {opacity: 1; transform: none;} } .case-card:hover { transform: translateY(-7px) scale(1.028) rotate(-1.1deg); box-shadow: 0 10px 44px #e94e773a; } .case-card__icon { font-size: 2.4em; color: var(--color-primary); margin-bottom: 0.7em; filter: drop-shadow(0 3px 10px #f6c66756); transition: color .21s, filter .17s; } .case-card:hover .case-card__icon { color: var(--color-accent); filter: drop-shadow(0 7px 24px #f6c667aa); } .case-card__title { font-size: 1.13em; font-weight: 700; color: var(--color-primary); margin-bottom: 0.47em; font-family: 'Montserrat', Arial, sans-serif; } .case-card__desc { font-size: 1.02em; color: var(--color-text); margin-bottom: 1.2em; line-height: 1.5; } .case-card__btn { margin-top: auto; align-self: flex-start; background: var(--color-primary); color: #fff; font-size: 0.98em; font-weight: 600; padding: .58em 1.25em; box-shadow: 0 2px 12px #4573d219; transition: background .18s; border-radius: 14px; } .case-card__btn:hover { background: var(--color-accent); color: #fff; } @media (max-width: 980px) { .cases__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 660px) { .cases__grid { grid-template-columns: 1fr; gap: 1.5em; } .case-card { min-height: unset; } .cases { padding: 2em 0 1em 0; } } .insight { background: linear-gradient(99deg, #f6c66722 10%, var(--color-secondary) 100%); border-radius: var(--radius); box-shadow: 0 5px 32px #4573d21a; margin: 2vw auto 2vw auto; padding: 3em 0 2.5em 0; max-width: 1100px; } .insight__container { display: flex; align-items: flex-start; gap: 2.8em; padding: 0 2.5vw; } .insight__visual { flex: 0 0 180px; display: flex; justify-content: center; align-items: center; position: relative; height: 210px; } .insight__circles { position: relative; width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; } .insight__circles i { position: absolute; font-size: 2.2em; background: var(--color-white); border-radius: 50%; box-shadow: 0 6px 18px #e94e7744; padding: 0.37em 0.43em; color: var(--color-primary); transition: transform .28s, color .18s, box-shadow .18s; } .insight__circles i:nth-child(1) { top: 5%; left: 50%; transform: translateX(-50%) scale(1);} .insight__circles i:nth-child(2) { left: 10%; top: 68%; } .insight__circles i:nth-child(3) { right: 10%; top: 68%; } .insight__circles i:nth-child(4) { bottom: 0; left: 50%; transform: translateX(-50%) scale(1);} .insight__circles i:hover { color: var(--color-accent); box-shadow: 0 8px 26px #f6c66799; transform: scale(1.25) rotate(-10deg); } .insight__content { flex: 1; display: flex; flex-direction: column; gap: 1.3em; } .insight__title { font-size: 1.6em; color: var(--color-primary); font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; display: flex; align-items: center; gap: 0.6em; margin-bottom: .7em; } .insight__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9em; font-size: 1.08em; } .insight__list li { display: flex; align-items: center; gap: 0.7em; color: #2c3c49; } .insight__list i { color: var(--color-yellow); font-size: 1.18em; } .insight__stat { margin-top: 1.2em; padding: 0.7em 1em; background: #fffbea; border-radius: 11px; color: var(--color-accent); font-weight: 600; font-size: 1.08em; display: flex; align-items: center; gap: 0.6em; box-shadow: 0 2px 9px #f6c66744; animation: insightStatFlash 2s infinite alternate; } .insight__stat i { color: var(--color-yellow); font-size: 1.23em; } @keyframes insightStatFlash { 0% { background: #fffbea;} 100% { background: #f6c66733;} } @media (max-width: 900px) { .insight__container { flex-direction: column; gap: 1.2em;} .insight__visual { margin-bottom: 1.1em; } } .contact { background: var(--color-secondary); border-radius: var(--radius); box-shadow: 0 6px 28px #e94e7716; max-width: 900px; margin: 2vw auto 2vw auto; padding: 2.7em 0 2.4em 0; } .contact__container { display: flex; gap: 3em; align-items: flex-start; padding: 0 2vw; } .contact__info { flex: 1.1; display: flex; flex-direction: column; gap: 1.5em; font-size: 1.07em; } .contact__title { font-size: 1.45em; color: var(--color-primary); font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; display: flex; align-items: center; gap: 0.55em; margin-bottom: .7em; } .contact__desc { color: #2c3c49; margin-bottom: 0.5em; } .contact__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5em; color: var(--color-accent); font-weight: 600; } .contact__list i { color: var(--color-yellow); margin-right: .6em; font-size: 1em; } .contact__form { flex: 1; background: #fff; border-radius: 14px; box-shadow: 0 2px 10px #4573d214; padding: 2em 1.2em; display: flex; flex-direction: column; gap: 1.3em; min-width: 270px; max-width: 340px; position: relative; z-index: 1; } .contact__form-group { display: flex; flex-direction: column; gap: .38em; margin-bottom: .1em; } .contact__form-group label { font-size: 1em; font-weight: 600; color: var(--color-primary); } .contact__form-group input, .contact__form-group textarea { font-family: inherit; font-size: 1.03em; padding: .65em .8em; border: 1.5px solid #dbeafe; border-radius: 10px; background: #f5f7fc; color: var(--color-text); outline: none; transition: border .18s, box-shadow .18s; box-shadow: 0 1px 4px #4573d214; } .contact__form-group input:focus, .contact__form-group textarea:focus { border-color: var(--color-accent); box-shadow: 0 2px 12px #e94e7722; } .contact__form-captcha label { font-weight: 700; color: var(--color-accent); font-size: 1.08em; display: flex; align-items: center; gap: 0.5em; } .contact__form-captcha #captchaValue { display: inline-block; background: #fffbea; color: var(--color-yellow); font-size: 1.15em; border-radius: 7px; padding: .07em .5em; margin-left: .5em; letter-spacing: 0.12em; box-shadow: 0 2px 7px #f6c66744; font-family: 'Montserrat', Arial, sans-serif; } .contact__form-btn { font-weight: 700; font-size: 1.09em; width: 100%; padding: .8em 0; margin-top: .6em; background: linear-gradient(95deg, var(--color-primary) 70%, var(--color-accent) 100%); border: none; border-radius: 10px; box-shadow: 0 2px 8px #4573d216; display: flex; align-items: center; justify-content: center; gap: 0.8em; } .contact__form-success, .contact__form-error { margin-top: 1em; font-size: 1em; padding: 0.6em 1em; border-radius: 8px; display: flex; align-items: center; gap: 0.6em; } .contact__form-success { color: #119f66; background: #e6f7ee; } .contact__form-error { color: var(--color-accent); background: #fff5f7; } @media (max-width: 900px) { .contact__container { flex-direction: column; gap: 1.6em;} .contact__form { max-width: 100%; } } .cookie-popup { position: fixed; left: 50%; bottom: 1.8em; transform: translateX(-50%) translateY(60px); min-width: 320px; max-width: 98vw; background: #fffbea; color: var(--color-text); border-radius: 13px; box-shadow: 0 6px 36px #f6c66744; z-index: 2000; padding: 1.3em 2em 1.1em 1.1em; font-size: 1.04em; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity .35s, transform .38s cubic-bezier(.7,1.8,.6,1); } .cookie-popup--show { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .cookie-popup__content { display: flex; align-items: center; gap: 1.1em; width: 100%; } .cookie-popup__icon i { font-size: 1.65em; color: var(--color-yellow); filter: drop-shadow(0 2px 8px #f6c667aa); animation: cookieIconBite 2.1s infinite alternate; } @keyframes cookieIconBite { 0% { transform: rotate(-11deg) scale(1);} 100% { transform: rotate(9deg) scale(1.12);} } .cookie-popup a { color: var(--color-accent); text-decoration: underline; font-weight: 500; transition: color .19s; } .cookie-popup a:hover { color: var(--color-primary); } .cookie-popup__btn { margin-left: 1.2em; padding: 0.53em 1.4em; font-size: 1em; background: var(--color-yellow); color: #323244; font-weight: 700; border-radius: 8px; box-shadow: 0 1px 7px #f6c66744; transition: background .18s, color .18s; } .cookie-popup__btn:hover { background: var(--color-accent); color: #fff; } @media (max-width: 600px) { .cookie-popup { padding: 1em 1.1em 1em 0.7em; font-size: .97em; } .cookie-popup__content { gap: 0.6em; flex-direction: column; align-items: flex-start; } .cookie-popup__btn { margin-left: 0; margin-top: .8em; width: 100%; } } .pages { background: #fff; border-radius: var(--radius); box-shadow: 0 6px 34px #4573d218; margin: 2vw auto 2vw auto; padding: 2.7em 0 2.7em 0; max-width: 900px; min-height: 70vh; } .pages .container { max-width: 730px; margin: 0 auto; padding: 0 2vw; display: flex; flex-direction: column; gap: 2em; } .pages h1 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 800; font-size: 2.2em; color: var(--color-primary); margin-bottom: 0.8em; line-height: 1.13; letter-spacing: 0.01em; text-align: left; } .pages h2 { font-family: 'Montserrat', Arial, sans-serif; font-weight: 700; color: var(--color-accent); font-size: 1.26em; margin-top: 2em; margin-bottom: 0.6em; letter-spacing: 0.01em; } .pages p { font-family: 'Manrope', Arial, sans-serif; font-size: 1.08em; color: var(--color-text); line-height: 1.7; margin-bottom: 0.7em; } .pages ul { margin: 0 0 1.4em 1.3em; padding: 0; list-style: disc; font-size: 1.06em; color: #23232e; line-height: 1.7; } .pages ul li { margin-bottom: .45em; } .pages ul li strong { color: var(--color-primary); font-weight: 700; } .pages a { color: var(--color-accent); text-decoration: underline; transition: color 0.16s; font-weight: 500; word-break: break-all; } .pages a:hover { color: var(--color-primary); } @media (max-width: 700px) { .pages { padding: 1.3em 0 1.3em 0;} .pages .container { padding: 0 4vw;} .pages h1 { font-size: 1.35em;} .pages h2 { font-size: 1.07em;} .pages ul { margin-left: 1.1em; } }