/* Шрифты подключаются не-блокирующим в страниц (см. HTML). Это быстрее, чем @import, и не задерживает первый рендер. */ :root { --bg: #ffffff; --bg-tint: #f3f4fe; /* лёгкий индиго-оттенок секций */ --text: #0e1020; /* почти чёрный */ --muted: #5b6172; --border: #e6e7f6; --card: #ffffff; /* PRIMARY = электрик-индиго (имена --navy* сохранены ради каскада) */ --navy: #4f46e5; --navy-mid: #4338ca; --navy-light: #6366f1; --navy-pale: #eef0ff; /* акцент (имена --gold* сохранены) = циан */ --gold: #06b6d4; --gold-strong: #0891b2; --gold-soft: #e2f7fd; /* спектр ярких физических акцентов */ --c-violet: #7c3aed; --c-blue: #2563eb; --c-cyan: #06b6d4; --c-orange: #fb923c; --c-lime: #22c55e; --c-pink: #ec4899; /* тёмные поверхности (футер, контрастные блоки) */ --ink-dark: #0e1020; --ink-dark-2: #211a52; --on-dark: #eef0ff; --on-dark-soft:#a8acce; /* мягкие индиго-тонированные тени (как в эталоне) */ --shadow-sm: 0 4px 14px rgba(79,70,229,.08); --shadow-md: 0 12px 34px rgba(79,70,229,.12); --shadow-lg: 0 24px 60px rgba(79,70,229,.18); --radius: 18px; --radius-lg: 24px; --radius-xl: 30px; --accent: var(--navy-light); --blue: var(--navy); --blue-dark: var(--navy); --blue-mid: var(--navy-mid); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif; font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } .container { max-width: 1360px; margin: 0 auto; padding: 0 20px; } @media(min-width:768px) { .container { padding: 0 36px; } } .header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 16px; } .brand { display: flex; align-items: center; gap: 11px; } .brand__logo { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; display: block; flex-shrink: 0; } span.brand__logo { width: 42px; height: 42px; border-radius: 10px; background: var(--navy); display: inline-block; vertical-align: middle; } .brand__name { font-weight: 800; font-size: 16px; letter-spacing: -.3px; color: var(--navy); } .nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 8px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; user-select: none; white-space: nowrap; transition: background .16s, color .16s, box-shadow .16s, transform .12s, border-color .16s; } .btn:hover { background: var(--navy); color: #fff; box-shadow: 0 4px 16px rgba(79,70,229,.24); transform: translateY(-1px); } .btn:active { transform: scale(.97); background: var(--navy-mid); border-color: var(--navy-mid); } .btn:disabled { opacity: .42; pointer-events: none; } .btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 2px 10px rgba(79,70,229,.2); } .btn--primary:hover { background: var(--navy-mid); border-color: var(--navy-mid); box-shadow: 0 6px 22px rgba(79,70,229,.30); } .btn--ghost { background: transparent; } .btn--small { padding: 6px 13px; font-size: 13px; } .h1 { font-family: 'Manrope', system-ui, sans-serif; font-size: 34px; line-height: 1.12; margin: 0 0 16px; font-weight: 400; letter-spacing: -.4px; } @media(min-width:768px) { .h1 { font-size: 52px; } } .h2 { font-family: 'Manrope', system-ui, sans-serif; font-size: 24px; line-height: 1.2; margin: 0 0 10px; font-weight: 400; letter-spacing: -.2px; } @media(min-width:768px) { .h2 { font-size: 32px; } } .grad { background: linear-gradient(90deg,#7aaeff,#b8d0ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; } @media(min-width:768px) { .lead { font-size: 18px; } } .p { color: var(--muted); margin: 0 0 16px; line-height: 1.75; } .small { font-size: 13px; color: var(--muted); } .hero { position: relative; padding: 80px 0 96px; overflow: hidden; background-size: cover; background-position: center top; background-repeat: no-repeat; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(67,56,202,.88) 0%, rgba(79,70,229,.72) 28%, rgba(79,70,229,.38) 56%, rgba(79,70,229,.08) 78%, transparent 100%); pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; } .hero__inner { max-width: 580px; } .hero .h1 { color: #fff; } .hero .lead { color: rgba(255,255,255,.88); } .hero .hero-desc { color: rgba(255,255,255,.76); font-size: 15px; line-height: 1.7; margin: 0 0 24px; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .hero__actions .btn { font-size: 14.5px; padding: 11px 22px; border-radius: 8px; } .hero__actions .btn:not(.btn--primary) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; backdrop-filter: blur(4px); } .hero__actions .btn:not(.btn--primary):hover { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; } .section { padding: 56px 0; } .section--tint { background: var(--bg-tint); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cards { display: grid; grid-template-columns: 1fr; gap: 14px; } @media(min-width:768px) { .cards { grid-template-columns: repeat(3,1fr); gap: 20px; } } .card { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px; transition: box-shadow .22s, transform .22s, border-color .22s; } .card:hover { box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.18); transform: translateY(-2px); } .card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; } .card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; } .card--wide { padding: 0; } .features { display: grid; grid-template-columns: 1fr; gap: 14px; } @media(min-width:768px) { .features { grid-template-columns: repeat(2,1fr); } } @media(min-width:1024px) { .features { grid-template-columns: repeat(4,1fr); } } .feat-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--navy-pale); border: 1px solid rgba(79,70,229,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--navy); flex-shrink: 0; } .kpis { display: grid; grid-template-columns: 1fr; gap: 12px; } @media(min-width:768px) { .kpis { grid-template-columns: repeat(3,1fr); } } .kpi { border: 1px solid var(--border); border-top: 3px solid var(--navy); border-radius: var(--radius); padding: 18px 22px; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .22s, transform .22s; } .kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .kpi b { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; } .kpi span { color: var(--muted); font-size: 13px; } .kpis--col { grid-template-columns: 1fr !important; max-width: 520px; margin: 0 auto; } .kpis--centered { justify-items: center; } .kpis--centered .kpi { width: 100%; text-align: center; } .kpi--row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; } .kpi--row b { font-size: 15px; white-space: nowrap; font-weight: 700; } .kpi--row span { text-align: right; } .twin-cta { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 8px; } @media(min-width:768px) { .twin-cta { grid-template-columns: 1fr 1fr; } } .cta-block { border: 1.5px solid rgba(79,70,229,.16); border-radius: var(--radius-lg); padding: 30px 26px; background: linear-gradient(135deg, rgba(79,70,229,.05) 0%, rgba(79,70,229,.02) 100%); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .22s, border-color .22s, transform .22s; } .cta-block:hover { box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.28); transform: translateY(-2px); } .cta-block__title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; } .cta-block__desc { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; flex: 1; } .cta-block .btn { align-self: flex-start; margin-top: 6px; } .cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; color: var(--navy); flex-shrink: 0; margin-bottom: 10px; } .cta { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(90deg, rgba(67,56,202,.95), rgba(67,56,202,.95)); color: #fff; border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .cta p { margin: 0; color: rgba(255,255,255,.9); } .install-note { display: flex; align-items: center; gap: 12px; background: var(--navy-pale); border: 1px solid rgba(79,70,229,.16); border-radius: var(--radius); padding: 14px 18px; margin-top: 18px; font-size: 14px; color: var(--text); line-height: 1.5; } .museum-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media(min-width:900px) { .museum-layout { grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; } } @media(min-width:900px) { .museum-text { position: sticky; top: 90px; } } .museum-text p { color: var(--muted); line-height: 1.75; margin: 0 0 14px; font-size: 15px; } .museum-text p:last-child { margin-bottom: 0; } .museum-photos { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; } .museum-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media(max-width:500px) { .museum-cards { grid-template-columns: 1fr; } } .museum-card { text-align: center; padding: 22px 14px; } .museum-card .museum-icon { font-size: 32px; margin-bottom: 10px; } .museum-card h3 { font-size: 15px; margin: 0 0 6px; } .museum-photo-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .22s, transform .22s; } .museum-photo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .museum-photo-wrap { width: 100%; aspect-ratio: 4/3; background: var(--navy-pale); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; } .museum-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* (диагональный оверлей убран — фото чище) */ .museum-photo-name { font-weight: 700; font-size: 13px; color: var(--text); padding: 10px 12px 2px; line-height: 1.3; } .museum-photo-city { font-size: 12px; color: var(--muted); padding: 0 12px 10px; } .proj-wrap { position: relative; } .proj-arrows { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 14px; } .proj-viewport { overflow: hidden; } .proj-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 8px 4px 16px; scrollbar-width: none; } .proj-track::-webkit-scrollbar { display: none; } .proj-card { flex: 0 0 clamp(260px,38vw,340px); scroll-snap-align: start; border: 1.5px solid var(--border); border-radius: var(--radius); background: #fff; padding: 22px; box-shadow: var(--shadow-sm); transition: box-shadow .25s, border-color .25s, transform .25s; } .proj-card:hover { box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.22); transform: translateY(-2px); } .proj-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; } .proj-card p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.55; } .proj-peek::after { content: ''; position: absolute; top: 0; right: 0; bottom: 16px; width: 64px; background: linear-gradient(to left, var(--bg), transparent); pointer-events: none; } .section--tint .proj-peek::after { background: linear-gradient(to left, var(--bg-tint), transparent); } .split { display: grid; grid-template-columns: 1fr; gap: 16px; } @media(min-width:1024px) { .split { grid-template-columns: 1fr 1fr; gap: 24px; } } .list { display: grid; gap: 10px; margin-top: 12px; } .linkbtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border: 1.5px solid rgba(79,70,229,.14); background: #fff; transition: box-shadow .2s, border-color .2s; } .linkbtn:hover { box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.28); } .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(79,70,229,.15); background: var(--navy-pale); color: var(--navy); font-weight: 600; font-size: 12.5px; } .funnel-wrap { width: 100%; padding: 0 8px; margin-top: 18px; } .funnel-svg { display: block; width: 100%; height: 70px; overflow: visible; } .footer { padding: 32px 0; border-top: 1px solid var(--border); background: var(--bg-tint); color: var(--muted); } .footer__row { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .footer a { color: var(--muted); font-size: 14px; } .footer a:hover { color: var(--navy); } .page { padding: 32px 0 72px; } .page h1 { font-family: 'Manrope', system-ui, sans-serif; font-size: 30px; margin: 0 0 10px; font-weight: 400; } .page .sub { color: var(--muted); margin: 0 0 22px; } .prose { line-height: 1.75; color: var(--text); } .prose p { color: var(--muted); } .models { display: grid; gap: 16px; padding: 24px; } @media(min-width:768px) { .models { grid-template-columns: repeat(2,1fr); gap: 20px; } } @media(min-width:1100px) { .models { grid-template-columns: repeat(3,1fr); } } .model { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .22s, transform .22s, border-color .22s; } .model:hover { box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.2); transform: translateY(-3px); } .model__img { width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); background: var(--navy-pale); } .model__body { display: flex; flex-direction: column; gap: 10px; padding: 16px; } .model__title { margin: 0; font-size: 15px; font-weight: 700; } .model__meta { display: flex; gap: 8px; flex-wrap: wrap; } .model__actions { margin-top: auto; } form { display: grid; gap: 12px; max-width: 720px; } input, textarea, select { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; font: inherit; font-size: 15px; } textarea { min-height: 140px; resize: vertical; } label { font-weight: 700; } .roles { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 24px; } @media(min-width:600px) { .roles { grid-template-columns: repeat(3,1fr); } } @media(min-width:900px) { .roles { grid-template-columns: repeat(4,1fr); } } .role { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px 20px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform .22s, box-shadow .22s, border-color .22s; gap: 12px; } .role:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(79,70,229,.26); } .role__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--navy); box-shadow: 0 0 0 4px var(--navy-pale); background: var(--navy-pale); flex-shrink: 0; } .role__head { display: flex; flex-direction: column; gap: 4px; width: 100%; } .role__name { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.3; } .role__tag { font-size: 12px; color: var(--navy); font-weight: 600; background: var(--navy-pale); border-radius: 6px; padding: 3px 10px; display: inline-block; } .sc-wrap { display: flex; align-items: center; gap: 16px; } .sc-arrow { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--navy); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); box-shadow: var(--shadow-sm); transition: background .18s, color .18s, box-shadow .18s, transform .12s; } .sc-arrow:hover { background: var(--navy); color: #fff; box-shadow: 0 6px 20px rgba(79,70,229,.28); } .sc-arrow:active { transform: scale(.91); } .sc-viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16%, black 84%, transparent 100%); } .sc-track { display: flex; align-items: stretch; gap: 24px; will-change: transform; padding: 16px 0 20px; } .sc-card { flex: 0 0 clamp(220px,36vw,400px); border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: #fff; padding: 32px 24px 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; opacity: .28; filter: blur(2px); transform: scale(.88); transition: opacity .45s, filter .45s, transform .45s, box-shadow .45s, border-color .45s; cursor: pointer; } .sc-card.is-active { opacity: 1; filter: none; transform: scale(1); border-color: rgba(79,70,229,.38); box-shadow: 0 0 0 4px var(--navy-pale), var(--shadow-lg); cursor: default; } .sc-logo { width: 80px; height: 80px; border-radius: 18px; background: var(--navy-pale); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .sc-logo img { width: 100%; height: 100%; object-fit: contain; } .sc-name { font-weight: 800; font-size: 16px; color: var(--text); line-height: 1.3; } .sc-sub { font-size: 13px; color: var(--muted); } .tc-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--navy); box-shadow: 0 0 0 6px var(--navy-pale); background: var(--navy-pale); flex-shrink: 0; } .sc-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; } .sc-dot { width: 8px; height: 8px; border-radius: 999px; background: #c8d0dc; border: none; padding: 0; cursor: pointer; transition: background .3s, width .3s; outline: none; } .sc-dot.is-active { background: var(--navy); width: 24px; } @media(max-width:640px) { .sc-card { flex: 0 0 clamp(180px,68vw,280px); } .sc-arrow { flex: 0 0 38px; width: 38px; height: 38px; } .sc-wrap { gap: 8px; } } .contact-section { padding: 60px 0 88px; min-height: calc(100vh - 70px); background: radial-gradient(circle at 8% 15%, rgba(79,70,229,.08), transparent 48%), radial-gradient(circle at 92% 82%, rgba(67,56,202,.07), transparent 48%), var(--bg-tint); } .contact-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media(min-width:1024px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } } .contact-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 6px; background: var(--navy-pale); color: var(--navy); font-weight: 700; font-size: 12.5px; margin-bottom: 16px; border: 1px solid rgba(79,70,229,.18); } .contact-title { font-family: 'Manrope', system-ui, sans-serif; font-size: 34px; font-weight: 400; line-height: 1.15; margin: 0 0 16px; color: var(--text); } @media(min-width:768px) { .contact-title { font-size: 44px; } } .contact-desc { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 36px; max-width: 440px; } .contact-perks { display: flex; flex-direction: column; gap: 20px; } .perk { display: flex; align-items: flex-start; gap: 14px; } .perk__icon { font-size: 20px; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } .perk__title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--text); } .perk__sub { font-size: 13px; color: var(--muted); line-height: 1.5; } .contact-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .contact-card__head { padding: 28px 30px 24px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--navy-pale), rgba(255,255,255,0)); } .contact-card__title { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 4px; } .contact-card__sub { font-size: 14px; color: var(--muted); } .contact-form { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 16px; } .cf-row { display: grid; grid-template-columns: 1fr; gap: 16px; } @media(min-width:500px) { .cf-row { grid-template-columns: 1fr 1fr; } } .cf-field { display: flex; flex-direction: column; gap: 6px; } .cf-label { font-size: 13px; font-weight: 700; color: var(--text); } .cf-req { color: var(--navy); } .cf-input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-tint); font: inherit; font-size: 14px; color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s, background .18s; -webkit-appearance: none; } .cf-input::placeholder { color: #9aa3b0; } .cf-input:focus { border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(79,70,229,.1); } .cf-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .cf-textarea { min-height: 100px; resize: vertical; } .cf-submit { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 10px; border: none; background: var(--navy); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 4px; transition: opacity .18s, transform .12s, box-shadow .18s, background .18s; box-shadow: 0 4px 16px rgba(79,70,229,.28); } .cf-submit:hover { background: var(--navy-mid); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(79,70,229,.36); } .cf-submit:active { transform: scale(.97); } .cf-note { font-size: 12px; color: #94a3b8; text-align: center; line-height: 1.5; } .deck,.panel,.topbar,.topnav,.to-top,.footer__meta,.footer__top { all: unset; } .nav-toggle { display: none; } @media (max-width: 767px) { .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; border: 1.5px solid var(--navy); border-radius: 10px; background: #fff; cursor: pointer; flex-shrink: 0; z-index: 60; transition: background .18s, border-color .18s; } .nav-toggle:hover { background: var(--navy-pale); } .nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transform-origin: center; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1); } .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; width: 0; } .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 55; flex-direction: column; align-items: stretch; background: rgba(255,255,255,.98); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 0 20px; gap: 0; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height .42s cubic-bezier(.4,0,.2,1), opacity .32s cubic-bezier(.4,0,.2,1), padding .32s cubic-bezier(.4,0,.2,1); } .nav-open .nav { max-height: 400px; opacity: 1; pointer-events: auto; padding: 14px 20px 18px; } .nav .btn { width: 100%; justify-content: flex-start; padding: 12px 16px; border-radius: 10px; font-size: 14.5px; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--navy); transform: none; box-shadow: none; } .nav .btn:hover { background: var(--navy-pale); color: var(--navy); transform: none; box-shadow: none; } .nav .btn:last-child { border-bottom: none; } .nav .btn--primary { background: var(--navy); color: #fff; border: none; margin-top: 8px; justify-content: center; box-shadow: 0 2px 10px rgba(79,70,229,.2); border-radius: 10px; } .nav .btn--primary:hover { background: var(--navy-mid); } .header { position: sticky; overflow: visible; } .header__inner { position: relative; } .nav-overlay { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(1,15,50,.22); backdrop-filter: blur(2px); animation: fadeInOverlay .28s ease; } .nav-open ~ .nav-overlay, .nav-open .nav-overlay { display: block; } @keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } } } /* ════════════════════════════════════════════════════════ SCROLL REVEAL + HERO ENTRANCE ════════════════════════════════════════════════════════ */ .vp-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); will-change: opacity, transform; } .vp-js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vp-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Hero — плавное появление при загрузке */ .vp-js .hero__inner > * { opacity: 0; animation: heroIn .7s cubic-bezier(.4,0,.2,1) forwards; } .vp-js .hero__inner > *:nth-child(1) { animation-delay: .05s; } .vp-js .hero__inner > *:nth-child(2) { animation-delay: .15s; } .vp-js .hero__inner > *:nth-child(3) { animation-delay: .25s; } .vp-js .hero__inner > *:nth-child(4) { animation-delay: .35s; } @keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .vp-js .hero__inner > * { opacity: 1; animation: none; } } /* Лёгкий зум фоновой картинки героя */ .hero { will-change: background-position; } /* ════════════════════════════════════════════════════════ TEAM — описания и статистика ════════════════════════════════════════════════════════ */ .tc-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 2px 0 0; max-width: 260px; } .team-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 26px; } .team-stat { flex: 1 1 120px; min-width: 110px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 16px 18px; text-align: center; transition: box-shadow .22s, transform .22s; } .team-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .team-stat b { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: 30px; color: var(--navy); line-height: 1; } .team-stat span { font-size: 13px; color: var(--muted); } /* ════════════════════════════════════════════════════════ PROJECT CARDS — чип + описание ════════════════════════════════════════════════════════ */ .proj-card .chip { margin-bottom: 10px; } .model__desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; } /* Картинки моделей — лёгкий зум при наведении */ .model__img { transition: transform .4s cubic-bezier(.4,0,.2,1); } .model:hover .model__img { transform: scale(1.05); } /* ════════════════════════════════════════════════════════ DETAIL PAGES — страницы проектов ════════════════════════════════════════════════════════ */ .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 22px; transition: gap .18s, color .18s; } .back-link:hover { gap: 10px; } .detail { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-bottom: 36px; } @media (min-width: 860px) { .detail { grid-template-columns: 1.05fr 1fr; gap: 44px; } } .detail__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--navy-pale); aspect-ratio: 4/3; } .detail__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); } .detail__media:hover .detail__img { transform: scale(1.04); } .detail__head .chip { margin-bottom: 14px; } .detail__title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 0 14px; } @media (min-width: 768px) { .detail__title { font-size: 40px; } } .detail__lead { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 20px; } .detail__principle { display: inline-flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--navy); padding: 4px 0 4px 14px; margin-bottom: 22px; } .detail__principle-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .detail__principle-value { font-size: 16px; font-weight: 700; color: var(--text); } .detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 30px; } @media (min-width: 760px) { .detail-grid { grid-template-columns: 1fr 1fr; gap: 18px; } } .detail-block { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 22px 24px; transition: box-shadow .22s, transform .22s, border-color .22s; } .detail-block:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(79,70,229,.16); } .detail-block h2 { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800; margin: 0 0 10px; color: var(--text); } .detail-block p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14.5px; } .detail-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; } .detail-list li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.6; font-size: 14.5px; } .detail-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy-pale); box-shadow: inset 0 0 0 2px var(--navy); } .detail-formula { background: linear-gradient(135deg, var(--navy-pale), rgba(255,255,255,0)); } .formula { font-family: 'Manrope', system-ui, sans-serif; font-size: 26px; color: var(--navy); background: #fff; border: 1.5px dashed rgba(79,70,229,.3); border-radius: 12px; padding: 14px 18px; text-align: center; margin-bottom: 12px; letter-spacing: .5px; } .formula sub { font-size: 16px; } .detail-takeaways { margin-bottom: 32px; } .detail-takeaways > h2 { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 24px; margin: 0 0 16px; } .takeaways { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .takeaways { grid-template-columns: repeat(3,1fr); } } .takeaway { border: 1px solid var(--border); border-top: 3px solid var(--navy); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); padding: 18px 20px; transition: box-shadow .22s, transform .22s; } .takeaway:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .takeaway b { display: block; font-size: 15px; margin-bottom: 4px; color: var(--text); } .takeaway span { font-size: 13px; color: var(--muted); line-height: 1.5; } .detail-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-radius: var(--radius-lg); padding: 26px 30px; background: linear-gradient(120deg, var(--navy), var(--navy-mid)); color: #fff; box-shadow: var(--shadow-md); } .detail-cta__title { font-size: 19px; font-weight: 800; margin-bottom: 4px; } .detail-cta__sub { font-size: 14px; color: rgba(255,255,255,.85); max-width: 460px; line-height: 1.55; } .detail-cta .btn--primary { background: #fff; color: var(--navy); border-color: #fff; } .detail-cta .btn--primary:hover { background: rgba(255,255,255,.9); color: var(--navy); } /* ════════════════════════════════════════════════════════ CONTACT FORM — статус, спиннер, доп. поля ════════════════════════════════════════════════════════ */ .cf-opt { color: var(--muted); font-weight: 500; font-size: 12px; } .cf-status { font-size: 13.5px; text-align: center; line-height: 1.5; min-height: 0; transition: min-height .2s; } .cf-status:not(:empty) { min-height: 20px; padding: 4px 0; } .cf-status--error { color: #b91c1c; } .cf-status--ok { color: #15803d; } .cf-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: vpSpin .7s linear infinite; } @keyframes vpSpin { to { transform: rotate(360deg); } } .is-loading .cf-submit { pointer-events: none; opacity: .85; } .is-loading .cf-submit__label { opacity: .85; } .is-loading .cf-submit__arrow { display: none; } .is-loading .cf-spinner { display: inline-block; } /* ════════════════════════════════════════════════════════ BACK TO TOP ════════════════════════════════════════════════════════ */ .vp-totop { position: fixed; right: 22px; bottom: 92px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transition: opacity .25s, transform .25s, visibility .25s, background .18s, color .18s; } .vp-totop.is-visible { opacity: 1; visibility: visible; transform: none; } .vp-totop:hover { background: var(--navy); color: #fff; transform: translateY(-2px); } /* ════════════════════════════════════════════════════════ AI CHAT WIDGET ════════════════════════════════════════════════════════ */ .vp-chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--navy-light), var(--navy)); color: #fff; box-shadow: 0 10px 30px rgba(79,70,229,.4); display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; } .vp-chat-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 38px rgba(79,70,229,.5); } .vp-chat-fab:active { transform: scale(.95); } .vp-chat-fab__ic { position: absolute; display: flex; align-items: center; justify-content: center; transition: transform .3s, opacity .3s; } .vp-chat-fab__ic svg { width: 26px; height: 26px; } .vp-chat-fab__ic--close { transform: rotate(-90deg) scale(.4); opacity: 0; } .vp-chat-fab.is-active .vp-chat-fab__ic--chat { transform: rotate(90deg) scale(.4); opacity: 0; } .vp-chat-fab.is-active .vp-chat-fab__ic--close { transform: none; opacity: 1; } .vp-chat-fab__dot { position: absolute; top: 12px; right: 12px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; animation: vpPulse 2s ease-in-out infinite; } .vp-chat-fab.is-active .vp-chat-fab__dot { display: none; } @keyframes vpPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } } .vp-chat { position: fixed; right: 22px; bottom: 92px; z-index: 70; width: 376px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 130px); background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 70px rgba(79,70,229,.32); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(20px) scale(.97); transform-origin: bottom right; transition: opacity .26s cubic-bezier(.4,0,.2,1), transform .26s cubic-bezier(.4,0,.2,1), visibility .26s; } .vp-chat.is-open { opacity: 1; visibility: visible; transform: none; } .vp-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--navy), var(--navy-mid)); color: #fff; } .vp-chat__ava { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 20px; } .vp-chat__htxt { flex: 1; min-width: 0; } .vp-chat__title { font-weight: 800; font-size: 15px; line-height: 1.2; } .vp-chat__sub { font-size: 12px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; } .vp-chat__sub::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; } .vp-chat__x { width: 34px; height: 34px; border-radius: 9px; border: none; cursor: pointer; flex-shrink: 0; background: rgba(255,255,255,.12); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .18s; } .vp-chat__x svg { width: 18px; height: 18px; } .vp-chat__x:hover { background: rgba(255,255,255,.25); } .vp-chat__msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-tint); scroll-behavior: smooth; } .vp-msg { display: flex; max-width: 100%; } .vp-msg--user { justify-content: flex-end; } .vp-bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-sm); word-wrap: break-word; animation: vpBubbleIn .3s cubic-bezier(.4,0,.2,1); } @keyframes vpBubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .vp-msg--bot .vp-bubble { background: #fff; color: var(--text); border-bottom-left-radius: 5px; } .vp-msg--user .vp-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 5px; } .vp-bubble a { color: var(--navy-light); font-weight: 600; text-decoration: underline; } .vp-msg--user .vp-bubble a { color: #fff; } .vp-typing .vp-bubble { display: flex; gap: 4px; padding: 14px; } .vp-dot { width: 7px; height: 7px; border-radius: 50%; background: #b6c0d0; animation: vpType 1.2s infinite ease-in-out; } .vp-dot:nth-child(2) { animation-delay: .2s; } .vp-dot:nth-child(3) { animation-delay: .4s; } @keyframes vpType { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } } .vp-chat__quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px; } .vp-chat__quick:not(:empty) { padding: 10px 16px 4px; } .vp-q { border: 1.5px solid rgba(79,70,229,.22); background: #fff; color: var(--navy); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .16s, color .16s, transform .12s; } .vp-q:hover { background: var(--navy); color: #fff; } .vp-q:active { transform: scale(.96); } .vp-chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: #fff; } .vp-chat__text { flex: 1; resize: none; border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 14px; font: inherit; font-size: 14px; line-height: 1.4; max-height: 110px; background: var(--bg-tint); transition: border-color .18s, background .18s; outline: none; } .vp-chat__text:focus { border-color: var(--navy); background: #fff; } .vp-chat__send { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: none; cursor: pointer; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .18s, transform .12s; } .vp-chat__send svg { width: 20px; height: 20px; } .vp-chat__send:hover { background: var(--navy-mid); } .vp-chat__send:active { transform: scale(.92); } .vp-chat__foot { font-size: 11px; color: var(--muted); text-align: center; padding: 0 16px 10px; } .vp-chat__foot a { color: var(--navy); font-weight: 600; text-decoration: underline; } @media (max-width: 640px) { .vp-chat { right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: 82vh; max-height: 82vh; border-radius: 18px 18px 0 0; } .vp-chat-fab { right: 16px; bottom: 16px; } .vp-totop { right: 16px; bottom: 86px; } } /* ════════════════════════════════════════════════════════ HEADER REDESIGN — обновлённая верхняя панель ════════════════════════════════════════════════════════ */ .header { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); transition: box-shadow .28s ease, background .28s ease; } /* тонкая градиентная линия сверху */ .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--navy) 0%, var(--navy-light) 45%, #5b8be0 100%); z-index: 2; } .header__inner { transition: padding .28s ease; } .header.is-scrolled { background: rgba(255,255,255,.95); box-shadow: 0 6px 26px rgba(79,70,229,.12); } .header.is-scrolled .header__inner { padding-top: 8px; padding-bottom: 8px; } /* лого + название */ .brand__logo { transition: transform .25s cubic-bezier(.34,1.56,.64,1), width .28s, height .28s; box-shadow: 0 3px 10px rgba(79,70,229,.20); } .brand:hover .brand__logo { transform: rotate(-5deg) scale(1.08); } .header.is-scrolled .brand__logo { width: 36px; height: 36px; } .brand__name { transition: color .2s; } .brand:hover .brand__name { color: var(--navy-light); } /* десктопная навигация: аккуратные ссылки + яркая кнопка CTA */ @media (min-width: 768px) { .nav { gap: 2px; } .nav .btn:not(.btn--primary) { border: none; background: transparent; color: var(--text); font-weight: 600; font-size: 14px; padding: 9px 15px; border-radius: 9px; position: relative; box-shadow: none; } .nav .btn:not(.btn--primary)::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--navy), var(--navy-light)); transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.4,0,.2,1); } .nav .btn:not(.btn--primary):hover { background: var(--navy-pale); color: var(--navy); box-shadow: none; transform: none; } .nav .btn:not(.btn--primary):hover::after, .nav .btn:not(.btn--primary).is-active::after { transform: scaleX(1); } .nav .btn:not(.btn--primary).is-active { color: var(--navy); } .nav .btn--primary { border: none; border-radius: 10px; padding: 10px 18px; background: linear-gradient(135deg, var(--navy-light), var(--navy)); box-shadow: 0 4px 14px rgba(79,70,229,.28); } .nav .btn--primary:hover { background: linear-gradient(135deg, var(--navy-light), var(--navy-mid)); transform: translateY(-2px); box-shadow: 0 9px 24px rgba(79,70,229,.40); } } /* акцентная черта под заголовками секций */ .section .h2 { position: relative; padding-bottom: 14px; } .section .h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--navy), var(--navy-light)); } /* ════════════════════════════════════════════════════════ DESIGN REFRESH — hero, нумерованные карточки, ховеры ════════════════════════════════════════════════════════ */ /* более глубокий градиент поверх фото в hero */ .hero::after { background: linear-gradient(to right, rgba(1,18,66,.93) 0%, rgba(79,70,229,.80) 30%, rgba(79,70,229,.45) 60%, rgba(79,70,229,.12) 82%, transparent 100%); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; margin-bottom: 18px; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.32); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .2px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero__stats { display: flex; flex-wrap: wrap; gap: 16px 30px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.22); } .hero__stat b { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: 30px; line-height: 1; color: #fff; } .hero__stat span { font-size: 13px; color: rgba(255,255,255,.78); } /* доводим каскад анимации hero до 6 элементов */ .vp-js .hero__inner > *:nth-child(5) { animation-delay: .45s; } .vp-js .hero__inner > *:nth-child(6) { animation-delay: .55s; } /* крупные полупрозрачные номера на карточках «Почему это важно» */ .cards--numbered { counter-reset: vpcard; } .cards--numbered .card { position: relative; overflow: hidden; counter-increment: vpcard; } .cards--numbered .card::before { content: counter(vpcard, decimal-leading-zero); position: absolute; top: -10px; right: 8px; font-family: 'Manrope', system-ui, sans-serif; font-size: 66px; line-height: 1; color: var(--navy); opacity: .08; pointer-events: none; } .cards--numbered .card h3, .cards--numbered .card p { position: relative; z-index: 1; } /* иконки фич оживают при наведении на карточку */ .features .card .feat-icon { transition: background .25s, color .25s, transform .25s; } .features .card:hover .feat-icon { background: var(--navy); color: #fff; transform: translateY(-2px) rotate(-4deg); } @media (max-width: 480px) { .hero__stat b { font-size: 26px; } .hero__stats { gap: 14px 22px; } } /* ════════════════════════════════════════════════════════ GLOBAL POLISH — скроллбар, выделение, фокус, кнопки ════════════════════════════════════════════════════════ */ html { scrollbar-width: thin; scrollbar-color: var(--navy-light) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--navy-light), var(--navy)); border-radius: 999px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--navy); } ::selection { background: var(--navy); color: #fff; } :focus-visible { outline: 3px solid rgba(99,102,241,.45); outline-offset: 2px; } .btn:focus-visible, .cf-submit:focus-visible, .vp-q:focus-visible { border-radius: 9px; } /* primary-кнопка — единый градиент по всему сайту */ .btn--primary { background: linear-gradient(135deg, var(--navy-light), var(--navy)); border-color: transparent; } .btn--primary:hover { background: linear-gradient(135deg, var(--navy-light), var(--navy-mid)); border-color: transparent; } /* мягкое свечение под основными кнопками при наведении */ .hero__actions .btn--primary:hover { box-shadow: 0 10px 30px rgba(79,70,229,.45); } /* ── декоративные градиентные пятна в тонированных секциях ── */ .section--tint { position: relative; overflow: hidden; } .section--tint::before { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; top: -180px; right: -140px; z-index: 0; background: radial-gradient(circle, rgba(99,102,241,.10), transparent 70%); pointer-events: none; } .section--tint .container { position: relative; z-index: 1; } /* ── карточки проектов: акцент сверху при наведении ── */ .proj-card { position: relative; } .proj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--navy), var(--navy-light)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4,0,.2,1); } .proj-card:hover::before { transform: scaleX(1); } /* ── футер: акцентная линия и подчёркивание ссылок ── */ .footer { position: relative; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--navy), var(--navy-light), #5b8be0); } .footer a:not([style]) { position: relative; } .footer a:not([style])::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1.5px; background: var(--navy); transition: right .25s ease; } .footer a:not([style]):hover::after { right: 0; } /* ── ссылки «другие проекты SM» ── */ .linkbtn { transition: box-shadow .2s, border-color .2s, transform .2s; } .linkbtn:hover { transform: translateY(-2px); } .linkbtn span[aria-hidden] { transition: transform .2s; } .linkbtn:hover span[aria-hidden] { transform: translate(3px,-3px); } /* ════════════════════════════════════════════════════════ THANKS PAGE — страница «Спасибо» ════════════════════════════════════════════════════════ */ .thanks { max-width: 540px; margin: 24px auto; text-align: center; } .thanks__icon { width: 92px; height: 92px; margin: 0 auto 24px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 36px rgba(22,163,74,.4); animation: thanksPop .5s cubic-bezier(.34,1.56,.64,1) both; } .thanks__icon svg { width: 46px; height: 46px; } @keyframes thanksPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .thanks__title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 34px; margin: 0 0 12px; } .thanks__sub { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 28px; } .thanks__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* музейные фото — зум при наведении */ .museum-photo-wrap img { transition: transform .5s cubic-bezier(.4,0,.2,1); } .museum-photo-card:hover .museum-photo-wrap img { transform: scale(1.06); } /* выделенный callout «прямо в вашей школе» */ .install-note { border-left: 4px solid var(--navy); } /* мягкое появление картинок моделей/детальных страниц */ .model__img, .detail__img, .museum-photo-wrap img { background: var(--navy-pale); } /* ════════════════════════════════════════════════════════ EDITORIAL UPGRADE — вдохновлено дизайн-системами (Claude/Linear) navy × gold, тёмные акценты, типографика ════════════════════════════════════════════════════════ */ /* более воздушный ритм секций */ @media (min-width: 768px) { .section { padding: 78px 0; } } /* плотный трекинг на крупном дисплейном тексте (как в editorial-системах) */ @media (min-width: 768px) { .h1 { letter-spacing: -1.2px; } .h2 { letter-spacing: -0.6px; } } .contact-title, .detail__title { letter-spacing: -0.8px; } /* тёплый акцент в hero-eyebrow */ .hero__eyebrow { color: var(--gold); border-color: rgba(232,165,90,.45); background: rgba(232,165,90,.12); } /* подчёркивание заголовков — переход navy → gold */ .section .h2::after { width: 58px; height: 3px; background: linear-gradient(90deg, var(--navy), var(--gold)); } /* крупные номера карточек — тёплый тон */ .cards--numbered .card::before { color: var(--gold-strong); opacity: .15; } /* формула на странице проекта — тёплый «маркер важного» */ .formula { border: 1.5px solid var(--gold); background: linear-gradient(135deg, var(--gold-soft), #fff); color: var(--navy); } /* акцент-полоска у callout «прямо в школе» */ .install-note { border-left-color: var(--gold); } /* ── FULL-BLEED CTA BAND (перед футером) ── */ .cta-band { position: relative; overflow: hidden; padding: 60px 0; background: linear-gradient(120deg, var(--ink-dark) 0%, var(--ink-dark-2) 100%); color: var(--on-dark); } .cta-band::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -220px; right: -120px; pointer-events: none; background: radial-gradient(circle, rgba(232,165,90,.22), transparent 70%); } .cta-band::after { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; bottom: -200px; left: -100px; pointer-events: none; background: radial-gradient(circle, rgba(99,102,241,.35), transparent 70%); } .cta-band__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .cta-band__title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.5px; color: #fff; margin: 0 0 8px; } @media (min-width: 768px) { .cta-band__title { font-size: 38px; } } .cta-band__sub { color: var(--on-dark-soft); margin: 0; max-width: 540px; line-height: 1.6; } .cta-band__btn { background: var(--gold); border: none; color: #2a1a05; font-weight: 800; white-space: nowrap; padding: 14px 28px; border-radius: 12px; font-size: 15px; box-shadow: 0 8px 24px rgba(232,165,90,.35); transition: transform .18s, box-shadow .18s, background .18s, color .18s; } .cta-band__btn:hover { background: var(--gold-strong); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(232,165,90,.5); } /* ── ТЁМНЫЙ ФУТЕР (закрывает каждую страницу) ── */ .footer { background: var(--ink-dark); color: var(--on-dark-soft); border-top: none; } .footer::before { background: linear-gradient(90deg, var(--gold-strong), var(--gold), var(--navy-light)); } .footer [style*="color:var(--text)"] { color: #fff !important; } .footer .small { color: var(--on-dark-soft); } .footer a { color: var(--on-dark-soft); } .footer a:hover { color: #fff; } .footer a:not([style])::after { background: var(--gold); } /* ════════════════════════════════════════════════════════ AURORA HERO — анимированный градиент вместо фото (вдохновлено Aurora UI; навигация: 1 ключевая анимация) ════════════════════════════════════════════════════════ */ .hero { background: radial-gradient(58% 55% at 10% 6%, rgba(99,102,241,.20), transparent 60%), radial-gradient(52% 48% at 92% -4%, rgba(6,182,212,.18), transparent 60%), radial-gradient(48% 60% at 78% 96%, rgba(124,58,237,.15), transparent 60%), linear-gradient(180deg, #f6f7ff 0%, #ffffff 72%); isolation: isolate; padding: 88px 0 104px; } .hero::after { display: none; } .hero__aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero__blob { position: absolute; border-radius: 50%; filter: blur(66px); will-change: transform; opacity: .55; } .hero__blob--1 { width: 460px; height: 460px; top: -120px; left: -70px; background: radial-gradient(circle, rgba(99,102,241,.85), transparent 68%); animation: heroFloat1 16s ease-in-out infinite; } .hero__blob--2 { width: 420px; height: 420px; bottom: -150px; right: 5%; opacity: .5; background: radial-gradient(circle, rgba(6,182,212,.8), transparent 68%); animation: heroFloat2 21s ease-in-out infinite; } .hero__blob--3 { width: 520px; height: 520px; top: 16%; right: -150px; opacity: .45; background: radial-gradient(circle, rgba(124,58,237,.78), transparent 68%); animation: heroFloat3 18s ease-in-out infinite; } .hero__grid { position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(79,70,229,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.06) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 88% at 28% 0%, #000 22%, transparent 70%); mask-image: radial-gradient(120% 88% at 28% 0%, #000 22%, transparent 70%); } @keyframes heroFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.12); } } @keyframes heroFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-48px,-30px) scale(1.16); } } @keyframes heroFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.1); } } .hero .container { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero__blob { animation: none; } } @media (max-width: 640px) { .hero__blob { filter: blur(48px); } } /* светлый hero: тёмный (чёрный) текст вместо белого */ .hero .h1 { color: var(--text); font-weight: 800; letter-spacing: -1.4px; line-height: 1.04; font-size: clamp(34px, 4.4vw, 58px); } /* ── 2-колоночный hero: текст слева + атом справа ── */ .hero__cols { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } @media (min-width: 920px) { .hero__cols { grid-template-columns: 1.05fr .95fr; gap: 40px; } } .hero__inner { max-width: 600px; } .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; } .hero__glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.22), transparent 65%); filter: blur(20px); } .hero__atom { position: relative; width: min(420px, 86%); height: auto; overflow: visible; } .hero__atom .orbit { transform-box: view-box; transform-origin: 150px 150px; } .hero__atom .orbit--1 { animation: atomSpin 13s linear infinite; } .hero__atom .orbit--2 { animation: atomSpin 13s linear infinite; animation-delay: -4.33s; } .hero__atom .orbit--3 { animation: atomSpin 13s linear infinite; animation-delay: -8.66s; } .hero__atom .electron { filter: drop-shadow(0 0 6px currentColor); } @keyframes atomSpin { to { transform: rotate(360deg); } } .hero__chip { position: absolute; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--navy); white-space: nowrap; } .hero__chip--a { top: 6%; right: 8%; color: var(--c-violet); animation: chipFloat 6s ease-in-out infinite; } .hero__chip--b { bottom: 14%; left: 2%; color: var(--navy); animation: chipFloat 7.5s ease-in-out infinite .6s; } .hero__chip--c { bottom: 30%; right: 0%; color: var(--c-cyan); animation: chipFloat 8.5s ease-in-out infinite 1.2s; } @keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .hero__atom .orbit, .hero__chip { animation: none; } } @media (max-width: 919px) { .hero__visual { min-height: 280px; margin-top: 6px; } .hero__atom { width: min(340px, 80%); } } .hero .lead { color: var(--text); opacity: .82; font-weight: 500; } .hero .hero-desc { color: var(--muted); } .hero__eyebrow { background: #fff; border: 1px solid var(--border); color: var(--navy); box-shadow: var(--shadow-sm); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; -webkit-backdrop-filter: none; backdrop-filter: none; } .hero__actions .btn:not(.btn--primary) { background: #fff; border: 1.5px solid var(--text); color: var(--text); backdrop-filter: none; } .hero__actions .btn:not(.btn--primary):hover { background: var(--text); color: #fff; box-shadow: var(--shadow-md); } .hero__stats { border-top: 1px solid var(--border); } .hero__stat b { color: var(--navy); font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; } .hero__stat span { color: var(--muted); } /* ════════════════════════════════════════════════════════ MORE MOTION — прогресс, споты, частицы, блик, параллакс ════════════════════════════════════════════════════════ */ /* индикатор прокрутки страницы */ .vp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--navy), var(--navy-light), var(--gold)); will-change: transform; } /* свечение-спот, следующее за курсором, на карточках */ .vp-spotlight { position: relative; } .vp-spotlight::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 50%), rgba(232,165,90,.16), transparent 62%); } .vp-spotlight:hover::after { opacity: 1; } /* блик-свайп по основным кнопкам */ .btn--primary, .cta-band__btn, .cf-submit { position: relative; overflow: hidden; isolation: isolate; } .btn--primary::after, .cta-band__btn::after, .cf-submit::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s cubic-bezier(.4,0,.2,1); pointer-events: none; } .btn--primary:hover::after, .cta-band__btn:hover::after, .cf-submit:hover::after { left: 150%; } /* частицы-«созвездие» в CTA-баннере */ .cta-band .vp-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* варианты появления */ .vp-js .reveal--left { transform: translateX(-26px); } .vp-js .reveal--right { transform: translateX(26px); } .vp-js .reveal--scale { transform: scale(.94); } .vp-js .reveal--left.is-visible, .vp-js .reveal--right.is-visible, .vp-js .reveal--scale.is-visible { transform: none; } /* плавный «вылет» иконки-стрелки в ссылках «подробнее» уже есть; добавим лифт логотипов школ */ .sc-card.is-active .sc-logo { animation: vpFloat 3.4s ease-in-out infinite; } @keyframes vpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .vp-progress { display: none; } .vp-spotlight::after { display: none; } .btn--primary::after, .cta-band__btn::after, .cf-submit::after { display: none; } .sc-card.is-active .sc-logo { animation: none; } } /* ════════════════════════════════════════════════════════ LANGUAGE SWITCHER ════════════════════════════════════════════════════════ */ .vp-lang { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; flex-shrink: 0; } .vp-lang__btn { border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .3px; padding: 5px 9px; border-radius: 999px; cursor: pointer; line-height: 1; transition: background .18s, color .18s; } .vp-lang__btn:hover { color: var(--navy); } .vp-lang__btn.is-active { background: var(--navy); color: #fff; } @media (max-width: 767px) { .vp-lang { margin-right: 10px; } } /* ════════════════════════════════════════════════════════ BRIGHT REDESIGN — vibrant pill-кнопки + жирные Manrope-заголовки ════════════════════════════════════════════════════════ */ /* pill-кнопки (как в эталоне) */ .btn { border-radius: 999px; } .btn--primary, .nav .btn--primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,.30); } .btn--primary:hover, .nav .btn--primary:hover { background: linear-gradient(135deg, #5b54f0, #7c3aed); box-shadow: 0 13px 30px rgba(124,58,237,.45); transform: translateY(-2px); } .nav .btn--primary { border-radius: 999px; } .cf-submit { border-radius: 999px; background: linear-gradient(135deg, #6366f1, #8b5cf6); } .cf-submit:hover { background: linear-gradient(135deg, #5b54f0, #7c3aed); } /* жирные геометрические заголовки (Manrope 800) */ .h1, .h2, .contact-title, .detail__title, .thanks__title, .cta-band__title, .page h1, .detail-takeaways > h2, .adm h1 { font-weight: 800; letter-spacing: -.5px; } .h1, .hero .h1, .contact-title, .detail__title { letter-spacing: -1.4px; } @media (min-width: 768px) { .h2 { font-size: 40px; } } /* акцентная черта под заголовками — индиго → циан */ .section .h2::after { background: linear-gradient(90deg, var(--navy), var(--gold)); height: 4px; width: 60px; } /* цветные верхние линии на «нумерованных» и takeaway-карточках для спектра */ .cards--numbered .card { border-top: 3px solid transparent; } .cards--numbered .card:nth-child(1) { border-top-color: var(--c-blue); } .cards--numbered .card:nth-child(2) { border-top-color: var(--c-violet); } .cards--numbered .card:nth-child(3) { border-top-color: var(--c-cyan); } /* мягкое волнообразное завершение hero в белую секцию (как в эталоне) */ .hero { border-bottom: none; } /* ════════════════════════════════════════════════════════ HOME SECTIONS — плотная визуальная композиция ════════════════════════════════════════════════════════ */ /* Блок принципов теперь выглядит как самостоятельный интерактивный экспонат. */ .wiw { position: relative; display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 42px; overflow: hidden; padding: clamp(28px, 4.6vw, 58px); border-radius: 30px; color: #f9faff; background: radial-gradient(circle at 13% 93%, rgba(6,182,212,.2), transparent 31%), radial-gradient(circle at 88% 8%, rgba(139,92,246,.31), transparent 31%), linear-gradient(135deg, #11162e 0%, #17143e 47%, #26205b 100%); box-shadow: 0 28px 70px rgba(20,20,67,.24); isolation: isolate; } .wiw::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .42; 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: 38px 38px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 88%); mask-image: linear-gradient(90deg, #000, transparent 88%); } .wiw__intro { position: relative; z-index: 2; align-self: center; max-width: 430px; } .wiw__eye { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(203,213,255,.26); border-radius: 999px; color: #b9c9ff; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .wiw__eye::before { content: '✦'; color: #60e6ff; } .wiw__title { max-width: 475px; margin: 17px 0 0; color: #fff; font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.04; letter-spacing: -1.25px; } .wiw__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .wiw__item { position: relative; min-height: 186px; overflow: hidden; padding: 23px 21px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.055)); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 15px 30px rgba(5,6,32,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s, border-color .35s, box-shadow .35s; } .wiw__item::before { content: ''; position: absolute; width: 90px; height: 90px; right: -30px; bottom: -42px; border: 1px solid rgba(155,235,255,.34); border-radius: 50%; box-shadow: 0 0 0 17px rgba(124,58,237,.08), 0 0 0 34px rgba(6,182,212,.045); transition: transform .5s cubic-bezier(.16,1,.3,1); } .wiw__item::after { position: absolute; top: 15px; right: 17px; font-size: 20px; color: #71e6ff; opacity: .78; } .wiw__item:nth-child(1)::after { content: '◉'; } .wiw__item:nth-child(2)::after { content: '✦'; color: #c4a5ff; } .wiw__item:nth-child(3)::after { content: '≈'; color: #82f2dc; } .wiw__item:nth-child(4)::after { content: '↗'; color: #aeb7ff; } .wiw__item:hover { z-index: 3; border-color: rgba(139,210,255,.48); background: linear-gradient(145deg, rgba(106,103,255,.29), rgba(12,191,220,.12)); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 20px 36px rgba(4,5,34,.28); transform: translateY(-7px); } .wiw__item:hover::before { transform: scale(1.28); } .wiw__num { position: relative; z-index: 1; display: block; margin-bottom: 28px; color: #71e6ff; font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .13em; } .wiw__item h3 { position: relative; z-index: 1; margin: 0 0 9px; color: #fff; font-size: 16px; line-height: 1.3; } .wiw__item p { position: relative; z-index: 1; margin: 0; color: rgba(231,237,255,.76); font-size: 13px; line-height: 1.62; } .wiw__field { position: absolute; z-index: 1; width: 360px; height: 360px; left: -118px; bottom: -185px; opacity: .9; pointer-events: none; } .wiw__orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(116,228,255,.34); border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg); } .wiw__orbit--one { width: 235px; height: 78px; animation: vpWiwOrbitOne 13s linear infinite; } .wiw__orbit--two { width: 226px; height: 92px; border-color: rgba(186,139,255,.36); animation: vpWiwOrbitTwo 16s linear infinite; } .wiw__core { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #dcd3ff, #8b5cf6 42%, #4f46e5); box-shadow: 0 0 0 12px rgba(120,92,250,.09), 0 0 34px rgba(126,94,255,.76); transform: translate(-50%,-50%); animation: vpWiwCore 3.5s ease-in-out infinite; } .wiw__spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #6ce9ff; box-shadow: 0 0 12px currentColor; animation: vpWiwSpark 4s ease-in-out infinite; } .wiw__spark--one { top: 24%; left: 16%; } .wiw__spark--two { right: 20%; bottom: 22%; color: #c19cff; background: currentColor; animation-delay: -1.1s; } .wiw__spark--three { right: 11%; top: 49%; color: #9ff2e4; background: currentColor; animation-delay: -2.4s; } @keyframes vpWiwOrbitOne { to { transform: translate(-50%,-50%) rotate(336deg); } } @keyframes vpWiwOrbitTwo { to { transform: translate(-50%,-50%) rotate(-384deg); } } @keyframes vpWiwCore { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.17); } } @keyframes vpWiwSpark { 0%,100% { transform: translateY(0); opacity: .48; } 50% { transform: translateY(-13px); opacity: 1; } } /* Три сценария применения — не текстовый список, а цветная витрина направлений. */ .app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; } .app-card { position: relative; display: flex; flex-direction: column; min-height: 312px; overflow: hidden; padding: 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; color: #fff; box-shadow: 0 16px 34px rgba(62,64,161,.14); isolation: isolate; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; } .app-card::before { content: ''; position: absolute; z-index: -1; width: 245px; height: 245px; top: -110px; right: -98px; border: 1px solid rgba(255,255,255,.32); border-radius: 44% 56% 47% 53%; box-shadow: 0 0 0 24px rgba(255,255,255,.07), 0 0 0 49px rgba(255,255,255,.04); transform: rotate(25deg); transition: transform .7s cubic-bezier(.16,1,.3,1); } .app-card::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .56; background-image: radial-gradient(rgba(255,255,255,.52) 1px, transparent 1px); background-size: 17px 17px; -webkit-mask-image: linear-gradient(125deg, transparent 14%, #000 100%); mask-image: linear-gradient(125deg, transparent 14%, #000 100%); } .app-card--violet { background: linear-gradient(140deg, #5b4ce7, #7556eb 55%, #a464ed); } .app-card--blue { background: linear-gradient(140deg, #1266cc, #2587dc 55%, #31c1d3); } .app-card--cyan { background: linear-gradient(140deg, #057e9d, #0aa4ba 55%, #30c995); } .app-card:hover { transform: translateY(-9px); box-shadow: 0 25px 42px rgba(62,64,161,.25); } .app-card:hover::before { transform: rotate(75deg) scale(1.08); } .app-card__icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: auto; border: 1px solid rgba(255,255,255,.33); border-radius: 17px; color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s; } .app-card:hover .app-card__icon { transform: rotate(-8deg) scale(1.1); background: rgba(255,255,255,.23); } .app-card h3 { margin: 30px 0 10px; color: #fff; font-family: 'Manrope', system-ui, sans-serif; font-size: 22px; letter-spacing: -.55px; line-height: 1.12; } .app-card p { margin: 0; max-width: 295px; color: rgba(255,255,255,.84); font-size: 14px; line-height: 1.62; } .app-card__link { display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 24px; color: #fff; font-size: 13px; font-weight: 800; } .app-card__link::after { content: '→'; font-size: 18px; line-height: 1; transition: transform .25s; } .app-card__link:hover::after { transform: translateX(5px); } #principles, #applications { scroll-margin-top: 86px; } @media (max-width: 900px) { .wiw { grid-template-columns: 1fr; gap: 30px; } .wiw__intro { max-width: 600px; } .wiw__field { left: auto; right: -90px; bottom: auto; top: -150px; opacity: .62; } .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-card:last-child { grid-column: span 2; } } @media (max-width: 600px) { .wiw { padding: 25px 18px 18px; border-radius: 24px; } .wiw__title { font-size: 31px; } .wiw__grid { grid-template-columns: 1fr; } .wiw__item { min-height: 155px; } .wiw__field { right: -145px; top: -185px; transform: scale(.78); } .app-grid { grid-template-columns: 1fr; gap: 13px; } .app-card, .app-card:last-child { grid-column: auto; min-height: 248px; padding: 22px; } .app-card h3 { margin-top: 24px; font-size: 20px; } } /* ════════════════════════════════════════════════════════ PHYSICS MOTION SYSTEM — поле, энергия, кинетика ════════════════════════════════════════════════════════ */ /* Это слой «живой лаборатории»: он дополняет содержание, а не конкурирует с ним. */ .hero__visual { --hero-rotate-x: 0deg; --hero-rotate-y: 0deg; isolation: isolate; transform: perspective(1050px) rotateX(var(--hero-rotate-x)) rotateY(var(--hero-rotate-y)); transition: transform .45s cubic-bezier(.16,1,.3,1); } .hero__visual::before, .hero__visual::after { content: ''; position: absolute; left: 50%; top: 50%; width: min(390px, 88%); aspect-ratio: 1; border-radius: 50%; pointer-events: none; } .hero__visual::before { z-index: 1; background: conic-gradient(from 12deg, transparent 0 12%, rgba(6,182,212,.55) 18%, transparent 27% 45%, rgba(124,58,237,.5) 56%, transparent 65% 82%, rgba(99,102,241,.45) 90%, transparent 100%); -webkit-mask: radial-gradient(transparent 61%, #000 62% 63.5%, transparent 65%); mask: radial-gradient(transparent 61%, #000 62% 63.5%, transparent 65%); transform: translate(-50%,-50%) rotate(0deg); animation: vpEnergyOrbit 22s linear infinite; } .hero__visual::after { z-index: 1; width: min(304px, 70%); border: 1px dashed rgba(79,70,229,.22); transform: translate(-50%,-50%) scale(.85); animation: vpEnergyBreathe 5.5s ease-in-out infinite; } .vp-force-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .86; mix-blend-mode: multiply; } .hero__glow { z-index: 2; animation: vpGlowPulse 6s ease-in-out infinite; } .hero__atom { z-index: 3; filter: drop-shadow(0 20px 24px rgba(79,70,229,.15)); animation: vpAtomHover 7s ease-in-out infinite; } .hero__atom .nucleus { animation: vpNucleusPulse 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .hero__atom .nucleus-ring { animation: vpNucleusRing 3.6s ease-out infinite; transform-box: fill-box; transform-origin: center; } .hero__chip { z-index: 4; } .hero__chip::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid currentColor; opacity: 0; transform: scale(.82); animation: vpChipSignal 5.5s ease-out infinite; } .hero__chip--b::before { animation-delay: 1.6s; } .hero__chip--c::before { animation-delay: 3.2s; } @keyframes vpEnergyOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } } @keyframes vpEnergyBreathe { 0%,100% { opacity: .32; transform: translate(-50%,-50%) scale(.85); } 50% { opacity: .8; transform: translate(-50%,-50%) scale(1.06); } } @keyframes vpGlowPulse { 0%,100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.1); } } @keyframes vpAtomHover { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } } @keyframes vpNucleusPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 48% { transform: scale(1.12); filter: brightness(1.18); } } @keyframes vpNucleusRing { 0% { opacity: .65; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.55); } } @keyframes vpChipSignal { 0%,18% { opacity: 0; transform: scale(.82); } 30% { opacity: .38; } 60%,100% { opacity: 0; transform: scale(1.3); } } /* Линии схемы в блоке преимуществ передают движение от опыта к пониманию. */ .funnel-svg line { stroke-dasharray: 8 12; animation: vpFlowLine 2.8s linear infinite; } .funnel-svg line:nth-child(2) { animation-delay: -.7s; } .funnel-svg line:nth-child(3) { animation-delay: -1.4s; } .funnel-svg line:nth-child(4) { animation-delay: -2.1s; } .funnel-svg polygon { transform-origin: 400px 80px; animation: vpArrowPulse 1.6s ease-in-out infinite; } @keyframes vpFlowLine { to { stroke-dashoffset: -40; } } @keyframes vpArrowPulse { 0%,100% { opacity: .62; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } } /* Тактильная глубина: курсор чуть наклоняет карточку, как реальный экспонат. */ .vp-tilt { transform-style: preserve-3d; will-change: transform; } .vp-tilt > * { transform: translateZ(1px); } .vp-magnetic { will-change: transform; transition: transform .25s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion: reduce) { .hero__visual, .hero__atom, .hero__glow, .hero__atom .nucleus, .hero__atom .nucleus-ring, .hero__visual::before, .hero__visual::after, .hero__chip::before, .funnel-svg line, .funnel-svg polygon, .wiw__orbit, .wiw__core, .wiw__spark { animation: none !important; transform: none !important; } .vp-force-field { display: none; } } @media (max-width: 640px) { .hero__visual::before { width: min(318px, 84%); } .hero__visual::after { width: min(246px, 66%); } .hero__atom { filter: drop-shadow(0 12px 18px rgba(79,70,229,.13)); } } /* ════════════════════════════════════════════════════════ MOBILE EXPERIENCE — отдельная композиция для телефона ════════════════════════════════════════════════════════ */ @media (max-width: 640px) { html { scroll-padding-top: 76px; } body { overflow-x: clip; -webkit-text-size-adjust: 100%; } .container { padding-left: 20px; padding-right: 20px; } /* Шапка остаётся компактной, но все цели касания не меньше 44px. */ .header__inner { min-height: 66px; padding: 9px 0; gap: 8px; } .brand { gap: 8px; min-width: 0; } .brand__logo, span.brand__logo { width: 38px; height: 38px; border-radius: 9px; } .brand__name { font-size: 15px; white-space: nowrap; } .vp-lang { margin-left: auto; margin-right: 2px; padding: 3px; } .vp-lang__btn { min-width: 29px; padding: 6px 7px; font-size: 11px; } .nav-toggle { width: 44px; height: 44px; border-radius: 13px; } .nav-open .nav { padding: 12px 16px 16px; } .nav .btn { min-height: 48px; padding: 12px 14px; } /* Атом становится частью первого экрана, а не отдельной высокой строкой. */ .hero { padding: 48px 0 36px; } .hero__cols { position: relative; gap: 0; } .hero__inner { position: relative; z-index: 2; } .hero__visual { position: absolute; top: -30px; right: -88px; z-index: 0; width: 224px; height: 224px; min-height: 224px; margin: 0; opacity: .42; pointer-events: none; } .hero__atom { width: 206px; } .hero__glow { width: 92%; } .hero__chip { padding: 5px 9px; font-size: 9px; box-shadow: 0 5px 14px rgba(79,70,229,.15); } .hero__chip--a { top: 17%; right: 22%; } .hero__chip--b, .hero__chip--c { display: none; } .vp-force-field { opacity: .45; } .hero__eyebrow { max-width: calc(100% - 30px); margin-bottom: 16px; padding: 7px 11px; font-size: 9.5px; letter-spacing: .1em; } .hero .h1 { max-width: 350px; margin-bottom: 14px; font-size: clamp(34px, 9.2vw, 38px); line-height: 1.03; letter-spacing: -1.05px; } .hero .lead { max-width: 338px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.56; } .hero .hero-desc { max-width: 335px; margin-bottom: 20px; font-size: 14px; line-height: 1.58; } .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 0; } .hero__actions .btn { min-height: 50px; padding: 11px 16px; font-size: 13px; } .hero__actions .btn:not(.btn--primary) { width: 56%; justify-self: start; } .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 26px; padding-top: 18px; } .hero__stat { min-width: 0; padding: 0 8px; } .hero__stat:first-child { padding-left: 0; } .hero__stat + .hero__stat { border-left: 1px solid var(--border); } .hero__stat b { font-size: 24px; } .hero__stat span { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.28; } /* Вертикальный ритм и крупные зоны касания по всему сайту. */ .section { padding: 52px 0; } .section .h2, .h2 { padding-bottom: 11px; font-size: 31px; line-height: 1.08; letter-spacing: -.8px; } .section .h2::after { width: 48px; height: 3px; } .p { margin-bottom: 20px; font-size: 14px; line-height: 1.68; } .btn, .cf-submit, .cta-band__btn { min-height: 46px; touch-action: manipulation; } input, textarea, select, .cf-input { font-size: 16px; } .card { padding: 19px; border-radius: 16px; } .features, .cards { gap: 12px; } .features .card { min-height: 0; } .feat-icon { width: 46px; height: 46px; margin-bottom: 10px; } .kpi--row { align-items: flex-start; flex-direction: column; gap: 3px; padding: 16px 17px; } .kpi--row span { text-align: left; } .install-note { align-items: flex-start; padding: 15px; font-size: 13px; } /* Горизонтальные галереи получают удобный размер карточки и место для свайпа. */ .proj-arrows { gap: 8px; margin-bottom: 8px; } .proj-arrows .btn { width: 42px; min-height: 42px; padding: 0; } .proj-track { gap: 12px; padding: 7px 1px 16px; } .proj-card { flex-basis: min(83vw, 326px); min-height: 238px; padding: 20px; border-radius: 17px; } .proj-card h3 { font-size: 17px; } .proj-card p { font-size: 13.5px; } .proj-card .btn { min-height: 42px; } .proj-peek::after { width: 34px; } /* Плотные секции, собранные на прошлом шаге, не теряют характер на маленьком экране. */ .wiw { gap: 24px; padding: 24px 17px 17px; border-radius: 23px; } .wiw__eye { padding: 6px 9px; font-size: 9px; } .wiw__title { max-width: 290px; margin-top: 14px; font-size: 31px; } .wiw__grid { gap: 10px; } .wiw__item { min-height: 148px; padding: 18px 17px; border-radius: 17px; } .wiw__num { margin-bottom: 18px; } .wiw__item h3 { font-size: 15px; } .wiw__item p { font-size: 12.5px; } .wiw__field { opacity: .45; } .app-grid { gap: 12px; margin-top: 22px; } .app-card { min-height: 236px; padding: 21px; border-radius: 20px; } .app-card__icon { width: 50px; height: 50px; border-radius: 15px; } .app-card h3 { margin-top: 21px; font-size: 21px; } .app-card p { font-size: 13px; } .app-card__link { min-height: 40px; margin-top: 15px; } /* Формы, каталог и финальный CTA остаются удобными одной рукой. */ .page { padding: 24px 0 54px; } .page h1 { font-size: 31px; line-height: 1.08; } .models { gap: 14px; padding: 0; } .model__img { height: 205px; } .model__body { padding: 16px; } .contact-section { min-height: auto; padding: 40px 0 64px; } .contact-layout { gap: 28px; } .contact-title { font-size: 34px; } .contact-desc { margin-bottom: 25px; font-size: 15px; } .contact-perks { gap: 15px; } .contact-card { border-radius: 20px; } .contact-card__head { padding: 22px 20px 19px; } .contact-form { padding: 20px; gap: 14px; } .cf-submit { min-height: 52px; } .cta-band { padding: 42px 0; } .cta-band__inner { gap: 20px; } .cta-band__title { font-size: 31px; } .cta-band__btn { width: 100%; text-align: center; } .footer { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); } .footer__row { gap: 16px; } .footer__row > * { width: 100%; } /* Плавающий чат не закрывает важный контент и дружит с safe-area iPhone. */ .vp-chat-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 54px; height: 54px; } .vp-chat-fab__ic svg { width: 23px; height: 23px; } .vp-chat-fab__dot { top: 9px; right: 9px; } .vp-totop { right: 15px; bottom: calc(78px + env(safe-area-inset-bottom)); } .vp-chat { padding-bottom: env(safe-area-inset-bottom); } } @media (max-width: 374px) { .brand__name { font-size: 14px; } .vp-lang__btn { min-width: 27px; padding-left: 6px; padding-right: 6px; } .hero .h1 { font-size: 33px; } .hero__eyebrow { font-size: 8.5px; } .hero__stat { padding-left: 6px; padding-right: 6px; } .hero__stat span { font-size: 10px; } } /* ════════════════════════════════════════════════════════ PROJECT SHOWCASE — реальные модели вместо абстрактных карточек ════════════════════════════════════════════════════════ */ .proj-card { display: flex; flex-direction: column; min-height: 388px; padding: 0; overflow: hidden; border-color: rgba(79,70,229,.14); background: #fff; } .proj-card__media { position: relative; display: grid; height: 160px; place-items: center; overflow: hidden; background: linear-gradient(135deg, #eff1ff, #e9fbff); } .proj-card__media::before { content: ''; position: absolute; z-index: 2; inset: 0; opacity: .31; background-image: linear-gradient(rgba(79,70,229,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.13) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(135deg, #000, transparent 76%); mask-image: linear-gradient(135deg, #000, transparent 76%); } .proj-card__media::after { content: ''; position: absolute; z-index: 2; width: 160px; height: 160px; right: -52px; bottom: -87px; border: 1px solid rgba(79,70,229,.2); border-radius: 50%; box-shadow: 0 0 0 16px rgba(79,70,229,.06), 0 0 0 33px rgba(6,182,212,.045); transition: transform .65s cubic-bezier(.16,1,.3,1); } .proj-card__media img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); transform: scale(1.02); transition: transform .75s cubic-bezier(.16,1,.3,1), filter .55s ease; } .proj-card__media span { position: absolute; z-index: 3; top: 13px; right: 13px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(79,70,229,.16); border-radius: 50%; color: var(--navy); background: rgba(255,255,255,.8); box-shadow: 0 5px 14px rgba(79,70,229,.1); font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 800; } .proj-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 19px 21px 21px; } .proj-card__body .chip { margin-bottom: 10px; } .proj-card__body h3 { margin-bottom: 7px; } .proj-card__body p { flex: 1; margin-bottom: 16px; } .proj-card__body .btn { min-height: 37px; } .proj-card:hover .proj-card__media img { filter: saturate(1.03) contrast(1.04); transform: scale(1.1); } .proj-card:hover .proj-card__media::after { transform: rotate(24deg) scale(1.14); } .proj-card:nth-child(6n + 2) .proj-card__media { background: linear-gradient(135deg, #e9fbff, #e7f3ff); } .proj-card:nth-child(6n + 3) .proj-card__media { background: linear-gradient(135deg, #f7edff, #eff1ff); } .proj-card:nth-child(6n + 4) .proj-card__media { background: linear-gradient(135deg, #e9faff, #edf4ff); } .proj-card:nth-child(6n + 5) .proj-card__media { background: linear-gradient(135deg, #efffed, #f5f4ff); } .proj-card:nth-child(6n) .proj-card__media { background: linear-gradient(135deg, #fff4e9, #eefbff); } @media (max-width: 640px) { .proj-card { min-height: 366px; } .proj-card__media { height: 148px; } .proj-card__body { padding: 17px 18px 19px; } } /* ════════════════════════════════════════════════════════ MUSEUM GALLERY — вдохновение, показанное как экспозиция ════════════════════════════════════════════════════════ */ .museum-layout { gap: 32px; } .museum-text { position: relative; overflow: hidden; padding: 28px; border: 1px solid rgba(79,70,229,.12); border-radius: 24px; background: radial-gradient(circle at 100% 0, rgba(6,182,212,.12), transparent 32%), linear-gradient(145deg, #fff, #f7f8ff); box-shadow: 0 14px 35px rgba(79,70,229,.08); } .museum-text::before { content: '01—04'; position: absolute; top: 14px; right: 18px; color: rgba(79,70,229,.16); font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .15em; } .museum-text p { position: relative; z-index: 1; font-size: 15px; } .museum-text p:first-child { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.7; } .museum-text .btn { position: relative; z-index: 1; margin-top: 7px !important; } .museum-photos { grid-template-columns: 1.12fr .72fr .72fr; grid-template-rows: repeat(2, 166px); grid-auto-rows: 166px; gap: 14px; } .museum-photo-card { position: relative; display: block; min-height: 0; border: 0; border-radius: 20px; box-shadow: 0 12px 26px rgba(31,36,95,.16); isolation: isolate; } .museum-photo-card:nth-child(1) { grid-row: span 2; } .museum-photo-card:nth-child(2) { grid-column: 2; } .museum-photo-card:nth-child(3) { grid-column: 3; } .museum-photo-card:nth-child(4) { grid-column: 2 / span 2; } .museum-photo-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 38%, rgba(6,8,30,.82) 100%); pointer-events: none; } .museum-photo-card::after { position: absolute; top: 13px; left: 13px; z-index: 2; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(13,16,42,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: 'Manrope', system-ui, sans-serif; font-size: 10px; font-weight: 800; } .museum-photo-card:nth-child(1)::after { content: '01'; } .museum-photo-card:nth-child(2)::after { content: '02'; } .museum-photo-card:nth-child(3)::after { content: '03'; } .museum-photo-card:nth-child(4)::after { content: '04'; } .museum-photo-wrap { height: 100%; aspect-ratio: auto; background: #dfe5fa; } .museum-photo-wrap img { transition: transform .75s cubic-bezier(.16,1,.3,1), filter .5s ease; } .museum-photo-card:hover { z-index: 2; box-shadow: 0 22px 42px rgba(31,36,95,.25); transform: translateY(-5px); } .museum-photo-card:hover .museum-photo-wrap img { filter: saturate(1.12) contrast(1.04); transform: scale(1.09); } .museum-photo-name, .museum-photo-city { position: absolute; z-index: 2; left: 16px; right: 13px; padding: 0; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.32); } .museum-photo-name { bottom: 28px; font-size: 14px; } .museum-photo-city { bottom: 12px; color: rgba(255,255,255,.78); font-size: 11px; } .museum-photo-card:nth-child(1) .museum-photo-name { font-size: 17px; bottom: 31px; } .museum-photo-card:nth-child(1) .museum-photo-city { bottom: 14px; font-size: 12px; } @media (max-width: 899px) { .museum-text { position: relative; top: auto; } } @media (min-width: 900px) { .museum-text { position: sticky; top: 90px; } } @media (max-width: 640px) { .museum-layout { gap: 18px; } .museum-text { padding: 22px 19px; border-radius: 20px; } .museum-text p { font-size: 14px; } .museum-text p:first-child { font-size: 14.5px; } .museum-photos { grid-template-rows: repeat(2, 132px); grid-auto-rows: 132px; gap: 10px; } .museum-photos { grid-template-columns: 1.12fr .88fr; } .museum-photo-card:nth-child(2), .museum-photo-card:nth-child(3) { grid-column: auto; } .museum-photo-card:nth-child(4) { grid-column: span 2; } .museum-photo-card { border-radius: 16px; } .museum-photo-name { left: 12px; bottom: 24px; font-size: 12px; } .museum-photo-city { left: 12px; bottom: 10px; font-size: 10px; } .museum-photo-card:nth-child(1) .museum-photo-name { bottom: 26px; font-size: 14px; } .museum-photo-card:nth-child(1) .museum-photo-city { bottom: 10px; font-size: 10px; } } /* ════════════════════════════════════════════════════════ CATALOG CONTROLS — быстрый выбор физических тем ════════════════════════════════════════════════════════ */ .catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 25px 0 16px; padding: 12px; border: 1px solid rgba(79,70,229,.13); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(243,244,254,.78)); box-shadow: 0 10px 25px rgba(79,70,229,.06); } .catalog-filters { display: flex; flex-wrap: wrap; gap: 7px; } .catalog-filter { min-height: 36px; padding: 7px 13px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .15s; } .catalog-filter:hover { color: var(--navy); background: rgba(79,70,229,.07); } .catalog-filter:active { transform: scale(.96); } .catalog-filter.is-active { border-color: rgba(79,70,229,.1); color: #fff; background: linear-gradient(135deg, var(--navy-light), var(--c-violet)); box-shadow: 0 6px 14px rgba(99,102,241,.24); } .catalog-count { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 7px 10px; border-radius: 10px; color: var(--muted); background: #fff; font-size: 12px; white-space: nowrap; } .catalog-count b { color: var(--navy); font-size: 16px; line-height: 1; } .models .model[hidden] { display: none !important; } .models .model.is-filter-enter { animation: catalogCardIn .38s cubic-bezier(.16,1,.3,1) both; } @keyframes catalogCardIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .catalog-tools { align-items: flex-start; flex-direction: column; gap: 11px; margin: 20px 0 14px; padding: 11px; border-radius: 16px; } .catalog-filters { gap: 6px; } .catalog-filter { min-height: 38px; padding: 7px 11px; font-size: 11.5px; } .catalog-count { padding: 6px 9px; } } /* ════════════════════════════════════════════════════════ TEAM PAGE — команда как живая студия проекта ════════════════════════════════════════════════════════ */ .team-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(270px, .92fr); gap: 30px; min-height: 370px; overflow: hidden; padding: clamp(28px, 4.5vw, 55px); border-radius: 30px; color: #fff; background: radial-gradient(circle at 87% 17%, rgba(6,182,212,.2), transparent 26%), radial-gradient(circle at 8% 100%, rgba(124,58,237,.32), transparent 31%), linear-gradient(135deg, #0d1230 0%, #1d1950 55%, #30256d 100%); box-shadow: 0 26px 64px rgba(24,22,76,.23); isolation: isolate; } .team-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .46; 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: 38px 38px; -webkit-mask-image: linear-gradient(115deg, #000, transparent 82%); mask-image: linear-gradient(115deg, #000, transparent 82%); } .team-hero__copy { position: relative; z-index: 2; align-self: center; max-width: 650px; } .team-hero .contact-badge { border-color: rgba(159,238,255,.3); color: #aeeeff; background: rgba(255,255,255,.08); } .team-hero h2 { max-width: 540px; margin: 13px 0 14px !important; color: #fff; font-size: clamp(34px, 4vw, 52px) !important; font-weight: 800 !important; line-height: 1.03; letter-spacing: -1.3px; } .team-hero p[data-i18n] { margin: 0 !important; color: rgba(232,238,255,.8) !important; font-size: 15px !important; } .team-hero .team-stats { margin: 26px 0 0; gap: 10px; } .team-hero .team-stat { min-width: 106px; padding: 13px 15px; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .team-hero .team-stat:hover { border-color: rgba(129,227,255,.36); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 25px rgba(2,4,28,.22); } .team-hero .team-stat b { color: #7be8ff; font-size: 28px; } .team-hero .team-stat span { color: rgba(235,239,255,.72); } .team-hero__visual { position: relative; z-index: 1; min-height: 270px; align-self: stretch; } .team-hero__orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(147,228,255,.4); border-radius: 50%; transform: translate(-50%,-50%) rotate(-20deg); } .team-hero__orbit--one { width: 270px; height: 92px; animation: teamOrbitOne 15s linear infinite; } .team-hero__orbit--two { width: 250px; height: 105px; border-color: rgba(189,151,255,.44); animation: teamOrbitTwo 18s linear infinite; } .team-hero__orbit--three { width: 232px; height: 84px; border-color: rgba(100,220,245,.36); animation: teamOrbitThree 12s linear infinite; } .team-hero__core { position: absolute; top: 50%; left: 50%; display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; color: #fff; background: radial-gradient(circle at 32% 26%, #d2efff 0%, #6e8aff 30%, #7959e8 68%, #4930a1 100%); box-shadow: 0 0 0 16px rgba(122,94,246,.11), 0 0 42px rgba(116,96,255,.72); font-family: 'Manrope', system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.5px; transform: translate(-50%,-50%); animation: teamCorePulse 4s ease-in-out infinite; } .team-hero__node { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #73eaff; box-shadow: 0 0 16px currentColor; animation: teamNodeFloat 3.6s ease-in-out infinite; } .team-hero__node--one { top: 21%; left: 19%; } .team-hero__node--two { right: 16%; top: 47%; color: #c7a4ff; background: currentColor; animation-delay: -1.1s; } .team-hero__node--three { right: 30%; bottom: 14%; color: #9cf0d4; background: currentColor; animation-delay: -2.1s; } @keyframes teamOrbitOne { to { transform: translate(-50%,-50%) rotate(340deg); } } @keyframes teamOrbitTwo { to { transform: translate(-50%,-50%) rotate(-380deg); } } @keyframes teamOrbitThree { to { transform: translate(-50%,-50%) rotate(340deg); } } @keyframes teamCorePulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.12); } } @keyframes teamNodeFloat { 0%,100% { transform: translateY(0); opacity: .58; } 50% { transform: translateY(-11px); opacity: 1; } } .team-roster { position: relative; margin-top: 34px; padding: 24px 0 5px; } .team-roster::before { content: ''; position: absolute; inset: 0 -14vw; z-index: -1; background: linear-gradient(90deg, rgba(79,70,229,.03), rgba(6,182,212,.06), rgba(79,70,229,.03)); } .team-roster__head { display: flex; align-items: center; gap: 13px; margin: 0 0 10px 60px; color: var(--navy); font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .16em; } .team-roster__head::after { content: ''; width: 52px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--navy), var(--c-cyan)); } .team-roster .sc-wrap { gap: 13px; } .team-roster .sc-viewport { padding: 8px 0; } .team-roster .sc-track { gap: 22px; padding: 12px 0 23px; } .team-roster .team-member { position: relative; flex-basis: clamp(238px, 32vw, 315px); min-height: 402px; overflow: hidden; padding: 27px 21px 23px; border-radius: 26px; border-color: rgba(79,70,229,.17); background: linear-gradient(150deg, #fff, #f6f7ff); box-shadow: 0 14px 28px rgba(70,70,155,.11); } .team-roster .team-member::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--c-violet), var(--c-cyan)); } .team-roster .team-member::after { content: ''; position: absolute; z-index: -1; width: 150px; height: 150px; top: -68px; right: -55px; border: 1px solid rgba(79,70,229,.11); border-radius: 50%; box-shadow: 0 0 0 18px rgba(6,182,212,.035), 0 0 0 36px rgba(124,58,237,.03); } .team-roster .team-member.is-active { border-color: rgba(79,70,229,.34); background: linear-gradient(145deg, #fff, #f2f4ff); box-shadow: 0 0 0 4px rgba(99,102,241,.09), 0 22px 46px rgba(70,70,155,.18); } .team-roster .tc-photo { width: 126px; height: 126px; border-width: 3px; box-shadow: 0 0 0 7px rgba(79,70,229,.09), 0 12px 26px rgba(54,47,128,.17); } .team-roster .team-member.is-active .tc-photo { animation: teamAvatarLift 4s ease-in-out infinite; } .team-roster .sc-name { margin-top: 5px; font-family: 'Manrope', system-ui, sans-serif; font-size: 18px; } .team-roster .sc-sub { color: var(--navy); font-size: 12px; font-weight: 800; line-height: 1.4; } .team-roster .tc-desc { margin-top: 5px; font-size: 13px; line-height: 1.62; } .team-roster .sc-arrow { border-color: rgba(79,70,229,.28); background: #fff; } .team-roster .sc-dot.is-active { background: linear-gradient(90deg, var(--navy), var(--c-cyan)); } @keyframes teamAvatarLift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (max-width: 760px) { .team-hero { grid-template-columns: 1fr; min-height: 0; gap: 12px; padding: 28px 20px 24px; border-radius: 24px; } .team-hero h2 { max-width: 310px; font-size: 35px !important; } .team-hero p[data-i18n] { font-size: 14px !important; } .team-hero .team-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 21px; } .team-hero .team-stat { min-width: 0; padding: 11px 7px; } .team-hero .team-stat b { font-size: 23px; } .team-hero .team-stat span { font-size: 10px; line-height: 1.25; } .team-hero__visual { position: absolute; top: -38px; right: -104px; width: 242px; min-height: 242px; opacity: .45; } .team-hero__orbit--one { width: 210px; height: 70px; } .team-hero__orbit--two { width: 195px; height: 78px; } .team-hero__orbit--three { width: 178px; height: 62px; } .team-hero__core { width: 63px; height: 63px; font-size: 14px; } .team-roster { margin-top: 22px; padding-top: 17px; } .team-roster__head { margin-left: 47px; } .team-roster .sc-wrap { gap: 7px; } .team-roster .team-member { flex-basis: min(72vw, 278px); min-height: 376px; padding: 24px 17px 20px; border-radius: 22px; } .team-roster .tc-photo { width: 108px; height: 108px; } .team-roster .sc-name { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .team-hero__orbit, .team-hero__core, .team-hero__node, .team-roster .team-member.is-active .tc-photo { animation: none !important; } } /* ════════════════════════════════════════════════════════════════ MAXIMUM UPGRADE — premium physics lab layer across every tab ════════════════════════════════════════════════════════════════ */ body { min-height: 100vh; background: radial-gradient(760px 520px at 8% -6%, rgba(99,102,241,.13), transparent 66%), radial-gradient(680px 500px at 96% 9%, rgba(6,182,212,.11), transparent 62%), linear-gradient(180deg, #fbfcff 0%, #ffffff 44%, #f7f8ff 100%); } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .42; background-image: linear-gradient(rgba(79,70,229,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(90% 80% at 50% 0%, #000 0 35%, transparent 82%); mask-image: radial-gradient(90% 80% at 50% 0%, #000 0 35%, transparent 82%); } .vp-ambient-canvas { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: .72; mix-blend-mode: multiply; } .header, .hero, .section, .page, .contact-section, .cta-band, .footer { position: relative; z-index: 3; } .vp-booting .hero__inner > *, .vp-booting .page > *, .vp-booting .contact-layout > * { filter: blur(2px); } .section { isolation: isolate; overflow: hidden; } .section > .container { position: relative; z-index: 1; } .section::before { content: ''; position: absolute; inset: 18px max(20px, 5vw); z-index: 0; border: 1px solid rgba(79,70,229,.055); border-radius: 34px; pointer-events: none; opacity: .7; } .section:nth-of-type(even)::after { content: ''; position: absolute; width: 340px; height: 340px; right: -150px; top: 12%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(6,182,212,.12), transparent 69%); pointer-events: none; } .vp-cursor-dot, .vp-cursor-ring, .vp-click-pulse { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; } .vp-cursor-dot { width: 7px; height: 7px; left: 50vw; top: 50vh; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 18px rgba(6,182,212,.78); transform: translate(-50%, -50%); } .vp-cursor-ring { width: 34px; height: 34px; left: 50vw; top: 50vh; border: 1px solid rgba(79,70,229,.38); border-radius: 50%; box-shadow: 0 0 0 6px rgba(79,70,229,.035); transform: translate(-50%, -50%); } .vp-click-pulse { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--c-cyan); animation: vpClickPulse .72s cubic-bezier(.16,1,.3,1) forwards; transform: translate(-50%, -50%); } @keyframes vpClickPulse { to { opacity: 0; transform: translate(-50%, -50%) scale(5.6); border-color: rgba(124,58,237,.1); } } .sc-wrap, .sc-viewport { min-width: 0; } .team-roster, .sc-viewport { overflow-x: clip; } .cards, .features, .kpis, .twin-cta, .models, .takeaways, .detail-grid, .app-grid, .wiw__grid, .museum-photos { overflow-x: clip; } .card, .proj-card, .model, .detail-block, .takeaway, .contact-card, .perk, .catalog-tools, .app-card, .wiw__item, .team-roster .team-member { backface-visibility: hidden; } .card, .model, .detail-block, .takeaway, .contact-card, .catalog-tools { border-color: rgba(79,70,229,.13); box-shadow: 0 12px 30px rgba(51,48,135,.08); } .card:hover, .model:hover, .detail-block:hover, .takeaway:hover, .contact-card:hover, .catalog-tools:hover { border-color: rgba(79,70,229,.28); box-shadow: 0 24px 54px rgba(51,48,135,.16); } .card::after, .model::after, .detail-block::after, .contact-card::after, .app-card::after, .team-roster .team-member::after { pointer-events: none; } .page { position: relative; padding-top: 46px; padding-bottom: 70px; } .page::before { content: ''; position: absolute; inset: 12px 18px auto; height: 240px; z-index: -1; border-radius: 34px; background: radial-gradient(circle at 18% 22%, rgba(99,102,241,.14), transparent 38%), radial-gradient(circle at 82% 12%, rgba(6,182,212,.13), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.82), rgba(241,244,255,.62)); border: 1px solid rgba(79,70,229,.08); } .page > .contact-badge, .page > h1, .page > .sub, .back-link { position: relative; z-index: 1; } .page h1 { max-width: 860px; margin-top: 8px; font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(38px, 5vw, 70px); line-height: .98; letter-spacing: -2px; font-weight: 900; } .page .sub { max-width: 760px; color: #4e5368; font-size: 17px; } .vp-page-catalog .card--wide { margin-top: 24px; border: none; background: transparent; box-shadow: none; } .catalog-tools { position: sticky; top: 78px; z-index: 12; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 16px 38px rgba(54,47,128,.11); } .catalog-filter { position: relative; overflow: hidden; } .catalog-filter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.46), transparent); transform: translateX(-130%); transition: transform .5s cubic-bezier(.16,1,.3,1); } .catalog-filter:hover::before { transform: translateX(130%); } .models { padding: 6px; } .model { position: relative; overflow: hidden; border-radius: 26px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, rgba(99,102,241,.38), rgba(6,182,212,.16), rgba(251,146,60,.18)) border-box; border: 1px solid transparent; } .model::before { content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 0 42%, rgba(10,14,36,.03) 100%), radial-gradient(circle at var(--mx, 80%) var(--my, 20%), rgba(6,182,212,.14), transparent 34%); opacity: 0; transition: opacity .28s; } .model:hover::before { opacity: 1; } .model__img { height: 240px; filter: saturate(.92) contrast(1.05); } .model__body { position: relative; z-index: 3; } .model__title { font-family: 'Manrope', system-ui, sans-serif; font-weight: 900; letter-spacing: -.55px; } .model__badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 15px; } .model__badges span { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border: 1px solid rgba(79,70,229,.13); border-radius: 999px; background: rgba(79,70,229,.045); color: #30334c; font-size: 11px; font-weight: 800; } .detail { position: relative; overflow: hidden; padding: 22px; border: 1px solid rgba(79,70,229,.09); border-radius: 34px; background: rgba(255,255,255,.74); box-shadow: 0 24px 70px rgba(51,48,135,.11); } .detail::before { content: ''; position: absolute; right: -52px; top: -52px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(79,70,229,.16); box-shadow: 0 0 0 20px rgba(6,182,212,.04), 0 0 0 42px rgba(124,58,237,.035); pointer-events: none; } .detail__media { border-radius: 28px; transform: translateZ(0); } .detail__media::after { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.46); border-radius: 20px; pointer-events: none; } .detail__principle { border-left: 0; padding: 12px 15px; border-radius: 16px; background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(6,182,212,.08)); } .formula { position: relative; overflow: hidden; } .formula::after { content: ''; position: absolute; left: -20%; bottom: 0; width: 42%; height: 3px; background: linear-gradient(90deg, transparent, var(--c-cyan), transparent); animation: formulaScan 2.2s linear infinite; } @keyframes formulaScan { to { left: 110%; } } .contact-section { position: relative; overflow: hidden; background: radial-gradient(620px 460px at 8% 12%, rgba(99,102,241,.17), transparent 62%), radial-gradient(520px 420px at 88% 78%, rgba(6,182,212,.13), transparent 64%), linear-gradient(180deg, #f8f9ff, #eef1ff); } .contact-section::before { content: ''; position: absolute; inset: 26px; border: 1px solid rgba(79,70,229,.08); border-radius: 34px; pointer-events: none; } .contact-info { position: relative; } .contact-info::after { content: 'F = ma'; position: absolute; left: 0; bottom: -58px; color: rgba(79,70,229,.08); font-family: 'Manrope', system-ui, sans-serif; font-size: clamp(52px, 11vw, 132px); font-weight: 900; letter-spacing: -6px; pointer-events: none; } .contact-card { position: relative; overflow: hidden; border-radius: 32px; } .contact-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 8%, rgba(6,182,212,.18), transparent 28%), linear-gradient(90deg, rgba(79,70,229,.02), transparent); } .contact-card__head, .contact-form { position: relative; z-index: 1; } .cf-field:focus-within .cf-label { color: var(--navy); } .cf-input { box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .cf-input:hover { border-color: rgba(79,70,229,.28); } .perk { padding: 12px; border: 1px solid rgba(79,70,229,.08); border-radius: 18px; background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .team-hero { box-shadow: 0 30px 80px rgba(17,20,66,.28); } .team-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25% 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25% 88%, transparent); } .team-roster .team-member:hover .tc-photo { transform: translateY(-5px) scale(1.03); } .tc-photo { transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s; } .tc-photo--dulat { object-position: 50% 42%; } .tc-photo--omirbek { object-position: 50% 28%; } .team-roster .team-member:hover .sc-sub { color: var(--c-violet); } /* VISUAL DEMOS + CLEAN TOP LANGUAGE SWITCHER */ .brand__logo { object-fit: contain; padding: 0; background: transparent; border-radius: 14px; } .header__inner { padding-right: 150px; } .vp-lang { position: fixed; top: max(8px, env(safe-area-inset-top)); right: 14px; z-index: 1400; box-shadow: 0 12px 30px rgba(31,41,86,.16); border-color: rgba(99,102,241,.22); } .vp-visuals { overflow: hidden; } .viz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; } .viz-card { position: relative; overflow: hidden; min-height: 330px; padding: 18px; border: 1px solid rgba(99,102,241,.16); border-radius: 28px; background: radial-gradient(circle at 20% 0%, rgba(129,140,248,.18), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,247,255,.88)); box-shadow: 0 18px 45px rgba(55,62,120,.11); } .viz-card::before { content: ''; position: absolute; inset: -35% -20% auto auto; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(79,70,229,.12); box-shadow: 0 0 0 18px rgba(6,182,212,.035), 0 0 0 36px rgba(124,58,237,.025); } .viz-card h3 { position: relative; z-index: 1; margin: 16px 0 8px; font-family: 'Manrope', system-ui, sans-serif; font-size: 19px; color: var(--navy); } .viz-card p { position: relative; z-index: 1; margin: 0 0 12px; color: var(--muted); line-height: 1.62; font-size: 14px; } .viz-card a { position: relative; z-index: 1; color: var(--navy); font-weight: 800; text-decoration: none; } .viz-stage { position: relative; height: 155px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(232,238,255,.7)), repeating-linear-gradient(90deg, rgba(79,70,229,.07) 0 1px, transparent 1px 24px); border: 1px solid rgba(79,70,229,.12); overflow: hidden; } .viz-track { position: absolute; left: 22px; right: 22px; bottom: 35px; height: 8px; border-radius: 99px; background: #132041; box-shadow: inset 0 2px 4px rgba(255,255,255,.25); } .viz-cart { position: absolute; left: 38px; bottom: 43px; width: 120px; height: 38px; border-radius: 14px; background: linear-gradient(135deg, #d9b36a, #f2ddaa); box-shadow: 0 12px 20px rgba(20,24,70,.12); animation: vizCart 2.8s cubic-bezier(.36,.03,.2,.98) infinite; } .viz-ball { position: absolute; bottom: 91px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #aeb7c8 35%, #25304f 100%); box-shadow: 0 6px 12px rgba(0,0,0,.12); animation: vizBallLag 2.8s cubic-bezier(.36,.03,.2,.98) infinite; } .viz-ball--a { left: 56px; } .viz-ball--b { left: 98px; animation-delay: -.14s; } .viz-ball--c { left: 140px; animation-delay: -.28s; } @keyframes vizCart { 0%,100% { transform: translateX(0); } 45%,65% { transform: translateX(60px); } } @keyframes vizBallLag { 0%,100% { transform: translateX(0); } 45%,65% { transform: translateX(30px); } } .viz-beaker { position:absolute; left:50%; bottom:24px; width:98px; height:100px; transform:translateX(-50%); border:3px solid rgba(20,31,63,.28); border-top-width:2px; border-radius:10px 10px 18px 18px; background:rgba(255,255,255,.38); } .viz-water { position:absolute; left:50%; bottom:27px; width:92px; height:54px; transform:translateX(-50%); border-radius:0 0 15px 15px; background:linear-gradient(180deg, rgba(80,210,244,.35), rgba(37,99,235,.3)); animation: vizWater 2.6s ease-in-out infinite; } .viz-scale { position:absolute; left:50%; top:17px; width:3px; height:70px; background:#b58938; transform:translateX(-50%); } .viz-load { position:absolute; left:50%; top:75px; width:42px; height:42px; transform:translateX(-50%); border-radius:12px; background:linear-gradient(135deg,#d4d8df,#3b4352); animation: vizFloat 2.6s ease-in-out infinite; } .viz-arrow-up { position:absolute; left:calc(50% + 36px); bottom:53px; width:12px; height:42px; border-radius:99px; background:linear-gradient(#22d3ee,#4f46e5); animation: vizArrow 2.6s ease-in-out infinite; } .viz-arrow-up::before { content:''; position:absolute; left:50%; top:-8px; transform:translateX(-50%) rotate(45deg); width:13px; height:13px; border-left:3px solid #22d3ee; border-top:3px solid #22d3ee; } @keyframes vizWater { 50% { transform:translateX(-50%) translateY(-3px); } } @keyframes vizFloat { 50% { transform:translateX(-50%) translateY(-11px); } } @keyframes vizArrow { 50% { opacity:.55; transform:translateY(-8px); } } .viz-box { position:absolute; inset:24px; border:2px solid rgba(20,31,63,.18); border-radius:18px; background:rgba(255,255,255,.38); } .viz-particle { position:absolute; width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff,#c7ccd8 32%,#5a6478); box-shadow:0 0 12px rgba(79,70,229,.22); animation: vizBrown 3.1s linear infinite; } .p1 { left:46px; top:42px; animation-delay:-.2s; } .p2 { left:132px; top:74px; animation-delay:-.9s; } .p3 { left:215px; top:46px; animation-delay:-1.3s; } .p4 { left:76px; top:108px; animation-delay:-1.8s; } .p5 { left:185px; top:112px; animation-delay:-2.2s; } .p6 { left:240px; top:92px; animation-delay:-2.7s; } @keyframes vizBrown { 0%{transform:translate(0,0)} 25%{transform:translate(22px,-13px)} 50%{transform:translate(-10px,20px)} 75%{transform:translate(18px,12px)} 100%{transform:translate(0,0)} } .viz-stand { position:absolute; left:42px; right:42px; bottom:35px; height:16px; border-radius:10px; background:#132041; } .viz-axis { position:absolute; left:48px; right:48px; top:75px; height:7px; border-radius:99px; background:#9aa4b5; } .viz-wheel { position:absolute; left:50%; top:30px; width:90px; height:90px; margin-left:-45px; border-radius:50%; border:11px solid #172346; background:radial-gradient(circle,#eef2ff 0 10px, #9ca3af 11px 14px, transparent 15px), conic-gradient(from 0deg, rgba(255,255,255,.9), rgba(99,102,241,.18), rgba(255,255,255,.88), rgba(6,182,212,.25)); animation: vizWheel .78s linear infinite; box-shadow:0 10px 25px rgba(20,24,70,.18); } @keyframes vizWheel { to { transform:rotate(360deg); } } .viz-frame { position:absolute; left:39px; right:39px; top:23px; height:90px; border:8px solid #132041; border-bottom:none; border-radius:14px 14px 0 0; } .viz-rope { position:absolute; left:50%; top:35px; width:76px; height:95px; transform:translateX(-50%); border-left:4px solid #e9e2d3; border-right:4px solid #e9e2d3; border-radius:0 0 30px 30px; animation: vizRope 2.5s ease-in-out infinite; } .viz-pulley { position:absolute; left:50%; width:38px; height:38px; margin-left:-19px; border-radius:50%; border:6px solid #c99834; background:#ffe6a7; } .viz-pulley.top { top:36px; } .viz-pulley.mid { top:82px; animation: vizPulley 2.5s ease-in-out infinite; } .viz-weight { position:absolute; left:50%; bottom:16px; width:48px; height:34px; margin-left:-24px; border-radius:9px; background:linear-gradient(135deg,#d9dce3,#556071); animation: vizWeight 2.5s ease-in-out infinite; } .viz-hand-force { position:absolute; right:42px; top:80px; color:#4f46e5; font-weight:900; animation: vizForce 2.5s ease-in-out infinite; } @keyframes vizPulley { 50% { transform:translateY(-14px); } } @keyframes vizWeight { 50% { transform:translateY(-14px); } } @keyframes vizRope { 50% { height:82px; } } @keyframes vizForce { 50% { transform:translate(10px,20px); } } .viz-cube { position:absolute; bottom:48px; width:42px; height:42px; border-radius:10px; box-shadow:0 14px 18px rgba(20,24,70,.14); animation: vizCube 3s ease-in-out infinite; } .cube-a { left:42px; background:linear-gradient(135deg,#d17b45,#9a3f21); } .cube-b { left:112px; background:linear-gradient(135deg,#f2d06b,#ad7c21); animation-delay:-.25s; } .cube-c { left:182px; background:linear-gradient(135deg,#d7dbe2,#4b5563); animation-delay:-.5s; } .viz-balance { position:absolute; left:35px; right:35px; bottom:36px; height:6px; border-radius:99px; background:#132041; } @keyframes vizCube { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } } /* Interactive canvas simulations (viz.js) */ .viz-canvas-wrap { position: relative; height: 172px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(79,70,229,.14); background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(232,238,255,.7)), repeating-linear-gradient(90deg, rgba(79,70,229,.06) 0 1px, transparent 1px 26px); } .viz-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; } .viz-card .viz-canvas-wrap + h3 { margin-top: 16px; } @media (max-width: 980px) { .viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .header__inner { padding-right: 0; } .vp-lang { top: 8px; right: 68px; padding: 3px; } .viz-grid { grid-template-columns: 1fr; } .viz-card { min-height: 304px; border-radius: 24px; } } @media (prefers-reduced-motion: reduce) { .viz-card *, .viz-card *::before, .viz-card *::after { animation: none !important; } } .vp-chat-fab { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.58), transparent 24%), linear-gradient(135deg, #06b6d4, #6366f1 48%, #7c3aed); box-shadow: 0 18px 46px rgba(79,70,229,.42), 0 0 0 8px rgba(99,102,241,.08); } .vp-chat-fab::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(6,182,212,.38); animation: chatSignal 2.8s ease-out infinite; } @keyframes chatSignal { 0% { opacity: .65; transform: scale(.75); } 70%,100% { opacity: 0; transform: scale(1.22); } } .vp-chat { width: 405px; height: 590px; border: 1px solid rgba(99,102,241,.24); border-radius: 28px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 28px 90px rgba(35,36,92,.28), 0 0 0 1px rgba(255,255,255,.68) inset; } .vp-chat__head { position: relative; overflow: hidden; padding: 16px; background: radial-gradient(circle at 85% -20%, rgba(6,182,212,.52), transparent 40%), linear-gradient(135deg, #121633, #4338ca 58%, #06b6d4); } .vp-chat__head::after { content: ''; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } .vp-chat__ava { position: relative; z-index: 1; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.34); background: radial-gradient(circle at 30% 20%, #c8fbff, #6366f1 48%, #251b77); box-shadow: 0 0 22px rgba(6,182,212,.45); } .vp-chat__ava span { color: #fff; font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: -.4px; } .vp-chat__htxt, .vp-chat__x { position: relative; z-index: 1; } .vp-chat__lab { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid rgba(79,70,229,.1); background: linear-gradient(90deg, rgba(79,70,229,.06), rgba(6,182,212,.055)); } .vp-chat__lab span { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border: 1px solid rgba(79,70,229,.12); border-radius: 999px; background: rgba(255,255,255,.72); color: #313650; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .vp-chat__lab [data-chat-provider] { color: var(--navy); } .vp-chat.is-ai-live .vp-chat__lab [data-chat-provider] { color: #047857; background: rgba(34,197,94,.11); border-color: rgba(34,197,94,.18); } .vp-chat__msgs { background: radial-gradient(circle at 15% 0%, rgba(99,102,241,.08), transparent 34%), radial-gradient(circle at 90% 78%, rgba(6,182,212,.08), transparent 36%), #f6f7ff; } .vp-msg--bot .vp-bubble { border: 1px solid rgba(79,70,229,.08); } .vp-msg--user .vp-bubble { background: linear-gradient(135deg, var(--navy), var(--c-violet)); } .vp-q { background: linear-gradient(135deg, #fff, #f5f7ff); box-shadow: 0 4px 12px rgba(54,47,128,.07); } .vp-q:hover { background: linear-gradient(135deg, var(--navy), var(--c-violet)); } .vp-chat__form { background: rgba(255,255,255,.92); } .vp-chat__send { background: linear-gradient(135deg, var(--c-cyan), var(--navy)); box-shadow: 0 10px 22px rgba(79,70,229,.24); } @media (max-width: 760px) { .vp-ambient-canvas, .vp-cursor-dot, .vp-cursor-ring, .vp-click-pulse { display: none; } .section::before, .section:nth-of-type(even)::after, .contact-section::before { display: none; } .page { padding-top: 28px; } .page::before { inset: 8px 10px auto; height: 190px; border-radius: 24px; } .page h1 { font-size: clamp(34px, 11vw, 44px); letter-spacing: -1.3px; } .catalog-tools { position: relative; top: auto; } .models { padding: 0; } .model { border-radius: 22px; } .model__img { height: 205px; } .detail { padding: 12px; border-radius: 24px; } .detail::before { display: none; } .contact-info::after { display: none; } .vp-chat { height: min(86vh, 720px); max-height: min(86vh, 720px); border-radius: 24px 24px 0 0; } .vp-chat__lab { overflow-x: auto; scrollbar-width: none; } .vp-chat__lab::-webkit-scrollbar { display: none; } } @media (prefers-reduced-motion: reduce) { .vp-ambient-canvas, .vp-cursor-dot, .vp-cursor-ring, .vp-click-pulse { display: none !important; } .vp-chat-fab::before, .formula::after { animation: none !important; } } /* ════════════════════════════════════════════════════════════════ NEXT UPGRADE — app feel, transitions, smart dock, richer catalog ════════════════════════════════════════════════════════════════ */ .vp-loader { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; gap: 14px; align-content: center; background: radial-gradient(circle at 50% 44%, rgba(99,102,241,.19), transparent 34%), radial-gradient(circle at 62% 54%, rgba(6,182,212,.14), transparent 28%), rgba(248,250,255,.96); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); transition: opacity .45s ease, visibility .45s ease, transform .45s ease; } .vp-loader.is-hidden { opacity: 0; visibility: hidden; transform: scale(1.04); } .vp-loader__atom { position: relative; display: grid; width: 112px; height: 112px; place-items: center; } .vp-loader__atom span { position: absolute; width: 108px; height: 42px; border: 2px solid rgba(79,70,229,.42); border-radius: 50%; } .vp-loader__atom span:nth-child(1) { animation: loaderOrbitOne 1.4s linear infinite; } .vp-loader__atom span:nth-child(2) { border-color: rgba(6,182,212,.44); animation: loaderOrbitTwo 1.7s linear infinite; } .vp-loader__atom span:nth-child(3) { border-color: rgba(124,58,237,.34); animation: loaderOrbitThree 1.9s linear infinite; } .vp-loader__atom b { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 28% 24%, #a5f3fc, #6366f1 48%, #312e81); box-shadow: 0 14px 36px rgba(79,70,229,.34), 0 0 0 8px rgba(99,102,241,.08); font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 900; } .vp-loader__txt { color: var(--navy); font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } @keyframes loaderOrbitOne { to { transform: rotate(360deg); } } @keyframes loaderOrbitTwo { to { transform: rotate(-420deg); } } @keyframes loaderOrbitThree { to { transform: rotate(360deg); } } .vp-page-transition { position: fixed; inset: 0; z-index: 480; display: grid; grid-template-columns: repeat(3, 1fr); pointer-events: none; visibility: hidden; } .vp-page-transition span { transform: scaleY(0); transform-origin: bottom; background: linear-gradient(180deg, #111633, #4338ca 58%, #06b6d4); transition: transform .34s cubic-bezier(.16,1,.3,1); } .vp-page-transition span:nth-child(2) { transition-delay: .04s; } .vp-page-transition span:nth-child(3) { transition-delay: .08s; } .vp-page-transition.is-active { visibility: visible; } .vp-page-transition.is-active span { transform: scaleY(1); } .vp-smart-dock { position: fixed; left: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 68; display: flex; gap: 5px; max-width: calc(100vw - 112px); padding: 7px; border: 1px solid rgba(79,70,229,.16); border-radius: 999px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(20px) saturate(165%); backdrop-filter: blur(20px) saturate(165%); box-shadow: 0 18px 48px rgba(41,37,110,.17), inset 0 1px rgba(255,255,255,.72); } .vp-smart-dock a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border-radius: 999px; color: #30334c; font-size: 12px; font-weight: 900; white-space: nowrap; transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .vp-smart-dock a:hover { color: var(--navy); background: rgba(79,70,229,.075); transform: translateY(-2px); } .vp-smart-dock a.is-active { color: #fff; background: linear-gradient(135deg, var(--navy), var(--c-violet)); box-shadow: 0 10px 22px rgba(79,70,229,.24); } .vp-smart-dock__ic { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--navy); font-size: 13px; line-height: 1; } .vp-smart-dock a.is-active .vp-smart-dock__ic { background: rgba(255,255,255,.18); color: #fff; } .model__meter { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 6px; margin: -2px 0 15px; padding: 9px; border: 1px solid rgba(79,70,229,.1); border-radius: 15px; background: linear-gradient(135deg, rgba(79,70,229,.045), rgba(6,182,212,.04)); overflow: hidden; } .model__meter::before { content: ''; position: absolute; left: -35%; top: 0; width: 28%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent); transform: skewX(-18deg); animation: meterSweep 3.4s ease-in-out infinite; } .model__meter span { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(79,70,229,.1); } .model__meter span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--c-cyan)); transform-origin: left; animation: meterLoad 2.4s cubic-bezier(.16,1,.3,1) infinite alternate; } .model__meter span:nth-child(2)::after { animation-delay: -.7s; transform: scaleX(.76); } .model__meter span:nth-child(3)::after { animation-delay: -1.2s; transform: scaleX(.58); } .model__meter em { position: relative; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } @keyframes meterSweep { 0%, 28% { left: -35%; opacity: 0; } 45% { opacity: 1; } 70%,100% { left: 110%; opacity: 0; } } @keyframes meterLoad { from { transform: scaleX(.46); } to { transform: scaleX(1); } } .model:hover .model__badges span:nth-child(1) { animation: badgePop .42s cubic-bezier(.16,1,.3,1) both; } .model:hover .model__badges span:nth-child(2) { animation: badgePop .42s cubic-bezier(.16,1,.3,1) .07s both; } .model:hover .model__badges span:nth-child(3) { animation: badgePop .42s cubic-bezier(.16,1,.3,1) .14s both; } @keyframes badgePop { 0% { transform: translateY(4px) scale(.96); } 100% { transform: none; } } .detail::after { content: ''; position: absolute; left: -20%; top: 0; width: 18%; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-16deg); animation: detailSweep 5.5s ease-in-out infinite; } @keyframes detailSweep { 0%, 35% { left: -25%; opacity: 0; } 52% { opacity: 1; } 80%,100% { left: 120%; opacity: 0; } } .vp-chat.is-open { animation: chatOpenPop .38s cubic-bezier(.16,1,.3,1); } @keyframes chatOpenPop { from { transform: translateY(22px) scale(.94); filter: blur(3px); } to { transform: none; filter: none; } } .vp-msg--bot .vp-bubble::selection, .vp-chat__text::selection { background: rgba(6,182,212,.28); color: var(--text); } @media (max-width: 760px) { .vp-loader__atom { width: 96px; height: 96px; } .vp-loader__atom span { width: 94px; height: 36px; } .vp-smart-dock { left: 12px; right: 80px; bottom: calc(13px + env(safe-area-inset-bottom)); max-width: none; overflow-x: auto; scrollbar-width: none; } .vp-smart-dock::-webkit-scrollbar { display: none; } .vp-smart-dock a { flex: 0 0 auto; min-height: 42px; padding: 8px 10px; } .vp-smart-dock__txt { display: none; } .vp-smart-dock__ic { width: 27px; height: 27px; } .model__meter { grid-template-columns: 1fr 1fr 1fr; } .model__meter em { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .vp-loader__atom span, .model__meter::before, .model__meter span::after, .detail::after, .model:hover .model__badges span, .vp-chat.is-open { animation: none !important; } .vp-page-transition { display: none !important; } } /* ════════════════════════════════════════════════════════ CONTACT DETAILS — телефон / сайт / Instagram (из заявки) ════════════════════════════════════════════════════════ */ .contact-details { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .contact-detail { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); font-weight: 600; font-size: 14px; transition: transform .18s, box-shadow .18s, color .18s, border-color .18s; } .contact-detail svg { color: var(--navy); flex-shrink: 0; } .contact-detail:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--navy); border-color: var(--navy-light); } /* Партнёры / при поддержке */ .partners-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 22px; } .partner-card { display: flex; align-items: center; justify-content: center; padding: 38px 72px; border: 1px solid rgba(79,70,229,.12); border-radius: 24px; background: #fff; box-shadow: 0 18px 46px rgba(55,62,120,.11); } .partner-logo { max-height: 140px; max-width: 440px; object-fit: contain; } .partner-name { font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; color: var(--navy); letter-spacing: .2px; } /* Отступ снизу, чтобы плавающее меню (dock) и чат не перекрывали нижний контент */ body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* «Живой» логотип партнёра: лёгкое парение + реакция при наведении */ .partner-card { position: relative; overflow: hidden; transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease; } .partner-card::after { content: ''; position: absolute; top: 0; left: -75%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(99,102,241,.22) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; } .partner-logo { position: relative; z-index: 1; animation: partnerFloat 4.5s ease-in-out infinite; will-change: transform; transition: filter .4s ease; } /* реакция при наведении */ .partner-card:hover { transform: translateY(-8px) scale(1.04); border-color: rgba(99,102,241,.45); box-shadow: 0 30px 70px rgba(79,70,229,.26); } .partner-card:hover .partner-logo { filter: drop-shadow(0 8px 16px rgba(79,70,229,.22)); } .partner-card:hover::after { animation: partnerShine 0.9s ease-out; } @keyframes partnerFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes partnerShine { from { left: -75%; } to { left: 135%; } } @media (prefers-reduced-motion: reduce) { .partner-logo { animation: none; } .partner-card:hover { transform: none; } .partner-card:hover::after { animation: none; } }