/* ============================================================ HR PARTNERS — landing styles ============================================================ */ /* Fontshare: Clash Display (headings) + Satoshi (body) + Cabinet Grotesk (accent). Loaded via in — moved out of CSS @import to shave one RTT off the critical path. */ :root{ /* palette */ --black: #050505; --ink: #0b0b0c; --graphite: #1a1a1d; --graphite-2: #232327; --steel: #3a3a40; --smoke: #6a6a72; --mist: #9a9aa3; --paper: #f4f4f2; --white: #ffffff; --accent: #fd7525; --accent-soft: rgba(253,117,37,.14); /* type */ --display: 'Clash Display', 'Satoshi', system-ui, sans-serif; --sans: 'Satoshi', system-ui, -apple-system, sans-serif; --grotesk: 'Cabinet Grotesk', 'Clash Display', sans-serif; /* layout */ --gutter: clamp(20px, 5vw, 90px); --maxw: 1320px; --radius: 18px; /* motion */ --ease: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ font-family: var(--sans); background: var(--black); color: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; line-height: 1.5; } /* page-wide top→bottom gradient base, per brand 000 -> 666 */ .bg-stage{ position: fixed; inset:0; z-index:-2; min-height: 100lvh; /* покрывает экран iPhone даже когда прячется адресная строка */ background: linear-gradient(180deg, #000000 0%, #0c0c0e 38%, #1d1d20 72%, #3a3a3f 100%); transform: translateZ(0); /* отдельный GPU-слой → фон не перерисовывается при скролле (нет лага) */ } .bg-grain{ position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; transform: translateZ(0); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{ background: var(--accent); color:#fff; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } .wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); } /* ---------- typography helpers ---------- */ .eyebrow{ font-size: clamp(11px,1vw,13px); letter-spacing: .28em; text-transform: uppercase; color: var(--mist); font-weight:500; display:inline-flex; align-items:center; gap:12px; } .eyebrow::before{ content:""; width:34px; height:1px; background: var(--accent); display:inline-block; } .display{ font-family: var(--display); font-weight:600; line-height:.96; letter-spacing:-.02em; text-wrap: balance; } .section-title{ font-family: var(--display); font-weight:600; font-size: clamp(34px, 5.5vw, 76px); line-height: .98; letter-spacing:-.02em; text-wrap: balance; } .lead{ color: var(--mist); font-size: clamp(16px,1.4vw,20px); max-width: 56ch; } .accent{ color: var(--accent); } /* ---------- buttons ---------- */ .btn{ --pad: 17px 30px; position:relative; display:inline-flex; align-items:center; gap:12px; padding: var(--pad); border-radius: 100px; font-weight:700; font-size:15px; letter-spacing:.01em; transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease); will-change: transform; overflow:hidden; isolation:isolate; } .btn .btn-label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px; } .btn-primary{ background: var(--accent); color:#140a02; } .btn-primary::after{ content:""; position:absolute; inset:0; z-index:1; background:#fff; border-radius:inherit; transform: translateY(102%); transition: transform .5s var(--ease); } .btn-primary:hover::after{ transform: translateY(0); } .btn-primary:hover{ color:#140a02; } .btn-ghost{ background: transparent; color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); } .btn-ghost::after{ content:""; position:absolute; inset:0; z-index:1; background:#fff; border-radius:inherit; transform: scale(0); transform-origin:center; transition: transform .5s var(--ease); } .btn-ghost:hover{ color:#0b0b0c; } .btn-ghost:hover::after{ transform: scale(1.02); } .btn-arrow{ transition: transform .5s var(--ease); } .btn:hover .btn-arrow{ transform: translateX(5px); } /* ============================================================ HEADER ============================================================ */ .site-header{ position: fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding: 22px var(--gutter); transition: padding .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease); border-bottom: 1px solid transparent; } .site-header.scrolled{ padding: 13px var(--gutter); background: rgba(5,5,6,.62); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.07); } @media (pointer:coarse){ /* backdrop-blur repaints the fixed header every scroll frame — heavy on weak Android GPUs */ .site-header.scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; background: rgba(5,5,6,.94); } .mobile-menu{ backdrop-filter:none; -webkit-backdrop-filter:none; background: rgba(5,5,6,.99); } } .brand{ display:flex; align-items:center; gap:14px; z-index:101; } .brand-logo{ height:44px; width:auto; display:block; transition: height .5s var(--ease); } .site-header.scrolled .brand-logo{ height:36px; } .brand-tag{ font-family:var(--sans); font-weight:500; font-size:9.5px; line-height:1.3; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); padding-left:14px; border-left:1px solid rgba(255,255,255,.18); } .foot-brand .brand-logo{ height:52px; } .nav{ display:flex; align-items:center; gap:38px; } .nav-links{ display:flex; gap:30px; } .nav-links a{ font-size:14px; font-weight:500; color: rgba(255,255,255,.72); position:relative; padding:4px 0; transition: color .3s var(--ease); } .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--accent); transition: width .4s var(--ease); } .nav-links a:hover{ color:#fff; } .nav-links a:hover::after{ width:100%; } .nav-links a.is-active{ color:#fff; } .nav-links a.is-active::after{ width:100%; background: var(--accent); } .nav .btn{ --pad: 12px 22px; font-size:14px; } /* burger + mobile menu */ .burger{ display:none; position:relative; z-index:101; width:46px; height:46px; border-radius:12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition: transform .4s var(--ease), opacity .3s var(--ease); } .burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); } .mobile-menu{ position:fixed; inset:0; z-index:99; background: rgba(5,5,6,.97); backdrop-filter: blur(20px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; padding: 96px var(--gutter) 40px; overflow-y:auto; opacity:0; visibility:hidden; transform: translateY(-12px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; } .mobile-menu.open{ opacity:1; visibility:visible; transform:none; } .mobile-menu-links{ display:flex; flex-direction:column; gap:4px; width:100%; } .mobile-menu-links a{ font-family:var(--display); font-weight:500; font-size: clamp(28px,7vw,44px); letter-spacing:-.02em; color:#fff; padding:8px 0; line-height:1.1; opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s; } @media (max-height: 600px){ .mobile-menu{ justify-content:flex-start; } .mobile-menu-links a{ font-size:24px; padding:6px 0; } .mobile-menu-cta{ margin-top:22px; } } .mobile-menu.open .mobile-menu-links a{ opacity:1; transform:none; } .mobile-menu.open .mobile-menu-links a:nth-child(1){ transition-delay:.06s; } .mobile-menu.open .mobile-menu-links a:nth-child(2){ transition-delay:.10s; } .mobile-menu.open .mobile-menu-links a:nth-child(3){ transition-delay:.14s; } .mobile-menu.open .mobile-menu-links a:nth-child(4){ transition-delay:.18s; } .mobile-menu.open .mobile-menu-links a:nth-child(5){ transition-delay:.22s; } .mobile-menu.open .mobile-menu-links a:nth-child(6){ transition-delay:.26s; } .mobile-menu-links a:active{ color: var(--accent); } .mobile-menu-cta{ margin-top:34px; opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s; } .mobile-menu.open .mobile-menu-cta{ opacity:1; transform:none; } body.menu-open{ overflow:hidden; padding-right: var(--sbw, 0px); } body.menu-open .site-header{ right: var(--sbw, 0px); } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; min-height: 100svh; display:flex; flex-direction:column; justify-content:center; padding-top: 140px; padding-bottom: 60px; overflow:hidden; } .hero-glow{ position:absolute; z-index:0; width:60vw; height:60vw; max-width:760px; max-height:760px; right:-10vw; top:8%; background: radial-gradient(circle, rgba(253,117,37,.18), transparent 62%); filter: blur(20px); pointer-events:none; } .hero-watermark{ position:absolute; right: -6vw; bottom: -14vh; z-index:0; width: 62vw; max-width:920px; opacity:.05; pointer-events:none; filter: grayscale(1); } /* full-bleed hero video */ /* full-bleed hero video */ .hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; } .hero-video-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 1.1s var(--ease); } .hero-video.has-video .hero-video-el{ opacity:1; } .hero-video-poster{ position:absolute; top:50%; right:-6%; transform: translateY(-50%); width:min(620px,52vw); height:auto; object-fit:contain; opacity:.12; filter: grayscale(1); transition: opacity .8s var(--ease); pointer-events:none; } .hero-video.has-video .hero-video-poster{ opacity:0; } .hero-video-scrim{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, rgba(5,5,6,.90) 0%, rgba(5,5,6,.62) 26%, rgba(5,5,6,.12) 54%, rgba(5,5,6,0) 76%), linear-gradient(180deg, rgba(5,5,6,.45) 0%, transparent 18%, transparent 74%, rgba(5,5,6,.55) 100%); } .hero-video-drop{ position:absolute; right:22px; bottom:104px; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px; background:rgba(8,8,10,.5); backdrop-filter:blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color:rgba(255,255,255,.7); font-size:12px; font-weight:500; letter-spacing:.02em; cursor:pointer; transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); } .hero-video-drop:hover{ color:#fff; background:rgba(8,8,10,.7); box-shadow: inset 0 0 0 1px var(--accent); } .hero-video-drop svg{ opacity:.8; } .hero-video.has-video .hero-video-drop{ opacity:.4; } .hero-video.has-video .hero-video-drop:hover{ opacity:1; } .hero.drag .hero-video-scrim{ background: rgba(253,117,37,.12); } .hero.drag{ box-shadow: inset 0 0 0 2px var(--accent); } .hero-inner{ position:relative; z-index:3; display:flex; align-items:center; } .hero-text{ max-width: 680px; transform: translateY(-9%); } @media (min-width: 981px){ /* прижимаем текст к левому краю (~24px), но всегда в пределах экрана — не режется на зуме/узких окнах */ .hero-text{ margin-left: calc(24px - var(--gutter)); } } .hero h1{ font-size: clamp(42px, 6.2vw, 102px); margin-bottom: 30px; } .hero h1 .line{ display:block; overflow:hidden; } .hero h1 .line > span{ display:block; will-change: transform; } .hero h1 .accent-word{ font-family: var(--grotesk); font-weight: 800; font-size: 1.04em; color: var(--accent); letter-spacing: -.02em; padding-right: .04em; } .hero .lead{ max-width: 42ch; } .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 34px; } @media (max-width: 980px){ .hero-video-poster{ right:-12%; width:min(440px,64vw); opacity:.10; } .hero-video-scrim{ background: linear-gradient(180deg, rgba(5,5,6,.5) 0%, rgba(5,5,6,.25) 28%, rgba(5,5,6,.45) 68%, rgba(5,5,6,.82) 100%); } .hero-video-drop{ bottom:90px; } } .hero-marquee{ position:absolute; left:0; right:0; bottom:0; z-index:2; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding: 16px 0; overflow:hidden; background: rgba(0,0,0,.2); backdrop-filter: blur(3px); } /* spacing baked into each item (padding-right), no flex-gap on track — so translateX(-50%) lands copy 2 exactly on copy 1 = seamless, no seam */ .marquee-track{ display:flex; width:max-content; animation: marquee 64s linear infinite; will-change: transform; } .marquee-track span{ font-family:var(--display); font-weight:500; font-size:clamp(15px,1.5vw,20px); color: rgba(255,255,255,.55); display:inline-flex; align-items:center; gap:48px; white-space:nowrap; padding-right:48px; } .marquee-track span::after{ content:"●"; color: var(--accent); font-size:8px; } @keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .scroll-hint{ position:absolute; left:var(--gutter); bottom: 90px; z-index:3; display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mist); } .scroll-hint .dot{ width:22px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:14px; position:relative; } .scroll-hint .dot::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px; background:var(--accent); transform:translateX(-50%); animation: scrolldot 1.8s var(--ease) infinite; } @keyframes scrolldot{ 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0; transform:translate(-50%,12px)} } /* при нехватке высоты (низкий экран / зум) подсказка скролла наезжает на кнопку — прячем её */ @media (max-height: 820px){ .scroll-hint{ display:none; } } /* ============================================================ SECTIONS shell ============================================================ */ section{ position:relative; z-index:1; } .section{ padding: clamp(80px, 12vh, 170px) 0; } .section-head{ display:flex; flex-direction:column; gap:22px; margin-bottom: clamp(48px,7vh,90px); max-width: 70ch; } .section-head.between{ flex-direction:row; align-items:flex-end; justify-content:space-between; max-width:none; gap:40px; flex-wrap:wrap; } .section-num{ font-family:var(--display); font-size:13px; color:var(--accent); letter-spacing:.1em; } /* ---------- reveal primitives ---------- */ [data-reveal]{ opacity:0; transform: translateY(38px); transition: opacity 1s var(--ease), transform 1s var(--ease); } [data-reveal].in{ opacity:1; transform:none; } [data-reveal-delay="1"]{ transition-delay:.08s; } [data-reveal-delay="2"]{ transition-delay:.16s; } [data-reveal-delay="3"]{ transition-delay:.24s; } [data-reveal-delay="4"]{ transition-delay:.32s; } [data-reveal-delay="5"]{ transition-delay:.40s; } .mask-up{ overflow:hidden; } .mask-up > *{ display:block; transform: translateY(110%); transition: transform 1.05s var(--ease); } .mask-up.in > *{ transform: translateY(0); } @media (prefers-reduced-motion: reduce){ [data-reveal], .mask-up > *{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ============================================================ STATS ============================================================ */ .stats{ border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .stats .wrap{ padding-block: clamp(20px,3vw,40px); } .stats-grid{ display:grid; grid-template-columns: repeat(3,1fr); } .stat{ padding: clamp(34px,4vh,56px) clamp(26px,2.4vw,44px); position:relative; } .stat:first-child{ padding-left:0; } .stat:last-child{ padding-right:0; } .stat:not(:last-child){ border-right:1px solid rgba(255,255,255,.08); } .stat-num{ font-family:var(--display); font-weight:600; font-size: clamp(44px,3.6vw,72px); line-height:1; letter-spacing:-.03em; white-space:nowrap; } .stat-num .suf{ color: var(--accent); } .stat-num .suf.word{ font-size:.5em; margin-left:.14em; letter-spacing:0; } .stat-label{ color:var(--mist); font-size:15px; line-height:1.45; margin-top:18px; max-width:26ch; text-wrap:pretty; } /* ============================================================ INTRO / about with big copy ============================================================ */ .bigcopy{ font-family:var(--display); font-weight:500; font-size: clamp(30px,4.2vw,60px); line-height:1.1; letter-spacing:-.02em; max-width: 18ch; text-wrap:balance; } .bigcopy .dim{ color: #83838d; } .bigcopy em{ font-style:normal; color:var(--accent); } .about-grid{ display:grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px,6vw,110px); align-items:start; } .about-side{ max-width: 46ch; padding-top: 10px; } .about-side p{ color: rgba(255,255,255,.72); font-size: clamp(16px,1.15vw,18px); line-height:1.6; margin-bottom:22px; } .about-side .btn{ margin-top:12px; } /* ============================================================ SERVICES ============================================================ */ .svc-list{ border-top:1px solid rgba(255,255,255,.1); } .svc{ display:grid; grid-template-columns: 76px 1fr auto; align-items:center; gap: clamp(20px,4vw,60px); padding: clamp(26px,3.4vw,42px) 0; border-bottom:1px solid rgba(255,255,255,.1); position:relative; transition: padding-left .5s var(--ease); } .svc::before{ content:""; position:absolute; inset:0; left:-2vw; right:-2vw; z-index:-1; border-radius:14px; background: linear-gradient(90deg, rgba(253,117,37,.10), rgba(253,117,37,0)); opacity:0; transition: opacity .5s var(--ease); } .svc:hover{ padding-left: 22px; } .svc:hover::before{ opacity:1; } .svc-idx{ font-family:var(--display); color: var(--smoke); font-size:15px; transition: color .4s var(--ease); } .svc:hover .svc-idx{ color: var(--accent); } .svc-name{ font-family:var(--display); font-weight:500; font-size: clamp(22px,2.6vw,38px); letter-spacing:-.01em; } .svc-desc{ color:var(--mist); font-size:15px; max-width: 42ch; justify-self:start; } .svc-arrow{ width:48px; height:48px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); display:grid; place-items:center; transition: background .4s var(--ease), transform .5s var(--ease), color .4s; } .svc:hover .svc-arrow{ background: var(--accent); color:#140a02; transform: rotate(-45deg); } @media (max-width:880px){ .svc{ grid-template-columns: 40px 1fr; } .svc-desc{ grid-column: 2 / -1; } .svc-arrow{ display:none; } } /* ============================================================ PROCESS ============================================================ */ .process{ background: var(--ink); border-radius: clamp(20px,3vw,40px); } .proc-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: 20px; overflow:hidden; } .proc{ position:relative; overflow:hidden; background: var(--ink); padding: clamp(28px,3vw,44px); min-height: 320px; display:flex; flex-direction:column; transition: background .5s var(--ease); } .proc:hover{ background: var(--graphite); } .proc-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.09; filter: grayscale(.5) brightness(.7); z-index:0; pointer-events:none; transition: opacity .5s var(--ease); } .proc:hover .proc-bg{ opacity:.15; } .proc > *:not(.proc-bg){ position:relative; z-index:1; } .proc-step{ font-family:var(--display); font-size: clamp(40px,4vw,64px); font-weight:600; color: var(--steel); line-height:1; letter-spacing:-.03em; transition: color .5s var(--ease); } .proc:hover .proc-step{ color: var(--accent); } .proc-name{ font-family:var(--display); font-weight:500; font-size: 22px; margin-top:auto; } .proc-text{ color:var(--mist); font-size:14.5px; margin-top:14px; } @media (max-width:980px){ .proc-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .proc-grid{ grid-template-columns: 1fr; } } /* ============================================================ CASES ============================================================ */ .cases-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(20px,2.4vw,34px); } .case{ position:relative; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); background: var(--black); will-change: transform; } .case.tall{ grid-row: span 1; } .case-media{ position:relative; background: var(--black); -webkit-backface-visibility:hidden; backface-visibility:hidden; } .case image-slot{ width:100%; height: clamp(280px,32vw,440px); transition: transform 1.1s var(--ease); display:block; } .case:hover image-slot{ transform: scale(1.05); } .case-shade{ position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.86)); pointer-events:none; z-index:2; } .case-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding: clamp(22px,2.4vw,36px); pointer-events:none; } .case-tags{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .case-tag{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; padding:6px 12px; border-radius:100px; background: rgba(255,255,255,.13); backdrop-filter: blur(6px); } .case-tag.hl{ background: var(--accent); color:#140a02; font-weight:700; } .case-title{ font-family:var(--display); font-weight:600; font-size: clamp(24px,2.6vw,40px); line-height:1.02; letter-spacing:-.01em; } .case-meta{ display:flex; gap:26px; margin-top:16px; } .case-meta div span{ display:block; } .case-meta .k{ color: var(--mist); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; } .case-meta .v{ font-family:var(--display); font-size:19px; font-weight:500; } .case-corner{ position:absolute; top:18px; right:18px; z-index:4; width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); display:grid; place-items:center; transition: background .4s var(--ease), transform .5s var(--ease), color .4s; } .case:hover .case-corner{ background:#fff; color:#0b0b0c; transform: rotate(-45deg); } @media (max-width:820px){ .cases-grid{ grid-template-columns: 1fr; } } /* ============================================================ TEAM ============================================================ */ .team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.8vw,26px); } .member{ position:relative; } .member image-slot{ width:100%; height: clamp(260px,24vw,340px); display:block; filter: grayscale(1) contrast(1.02); transition: filter .6s var(--ease), transform .6s var(--ease); } .member:hover image-slot{ filter: grayscale(0); } .member-info{ display:flex; align-items:baseline; justify-content:space-between; margin-top:16px; gap:10px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); transition: border-color .4s; } .member:hover .member-info{ border-color: var(--accent); } .member-name{ font-family:var(--display); font-weight:500; font-size:19px; } .member-role{ color:var(--mist); font-size:13px; text-align:right; } @media (max-width:900px){ .team-grid{ grid-template-columns: repeat(2,1fr); } } /* ============================================================ TESTIMONIALS ============================================================ */ .quotes{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2vw,28px); } .quote{ background: var(--graphite); border:1px solid rgba(255,255,255,.07); border-radius: var(--radius); padding: clamp(28px,2.6vw,40px); display:flex; flex-direction:column; transition: transform .6s var(--ease), border-color .5s; } .quote:hover{ transform: translateY(-8px); border-color: rgba(253,117,37,.4); } .quote .mark{ font-family:var(--display); font-size:60px; line-height:.6; color: var(--accent); height:34px; } .quote-text{ font-size: 17px; color:#e9e9ec; margin: 22px 0 30px; flex:1; } .quote-by{ display:flex; align-items:center; gap:14px; } .quote-ava{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0; } .quote-ava image-slot{ width:100%; height:100%; display:block; } .quote-name{ font-family:var(--display); font-weight:500; font-size:15px; } .quote-co{ color:var(--mist); font-size:13px; } @media (max-width:900px){ .quotes{ grid-template-columns: 1fr; } } /* ============================================================ CERTIFICATES ============================================================ */ .certs{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,1.8vw,24px); } .cert{ aspect-ratio: 3/4; border-radius: 12px; overflow:hidden; background: var(--graphite); border:1px solid rgba(255,255,255,.08); transition: transform .5s var(--ease), border-color .4s; } .cert image-slot{ width:100%; height:100%; display:block; } .cert:hover{ transform: translateY(-6px) scale(1.01); border-color: rgba(253,117,37,.4); } @media (max-width:820px){ .certs{ grid-template-columns: repeat(2,1fr); } } /* ============================================================ CONTACT / CTA ============================================================ */ .cta-band{ position:relative; overflow:hidden; border-radius: clamp(20px,3vw,40px); background: var(--accent); color:#140a02; padding: clamp(26px,4vw,52px); } .cta-band .cta-huge{ font-family:var(--display); font-weight:600; font-size: clamp(28px,4.4vw,58px); line-height:.98; letter-spacing:-.03em; max-width: 18ch; } .cta-band .lead{ color: rgba(20,10,2,.72); margin-top:14px; max-width:52ch; } .cta-watermark{ position:absolute; right:-3%; top:50%; transform: translateY(-50%); height: calc(160% + 280px); width:auto; opacity:.10; pointer-events:none; } @media (max-width:720px){ .cta-watermark{ height:auto; width:74%; right:-8%; } } .contact{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,80px); } .contact-info h3{ font-family:var(--display); font-weight:500; font-size:clamp(26px,3vw,42px); letter-spacing:-.01em; margin-bottom:30px; } .contact-rows{ display:flex; flex-direction:column; gap:2px; } .crow{ display:flex; flex-direction:column; gap:5px; padding:20px 0; border-top:1px solid rgba(255,255,255,.1); } .crow .k{ color:var(--mist); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; } .crow .v{ font-family:var(--display); font-weight:500; font-size: clamp(20px,2vw,28px); } .crow .v:hover{ color: var(--accent); } .form{ background: var(--graphite); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: clamp(28px,3vw,44px); } .field{ position:relative; margin-bottom:6px; } .field input, .field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.16); padding: 22px 0 12px; color:#fff; font-family:var(--sans); font-size:16px; outline:none; transition: border-color .4s var(--ease); } .field textarea{ resize:none; min-height:90px; } .field label{ position:absolute; left:0; top:22px; color:var(--smoke); font-size:16px; pointer-events:none; transition: all .35s var(--ease); } .field input:focus, .field textarea:focus{ border-color: var(--accent); } .field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{ top:2px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); } .hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; } .form .btn{ width:100%; justify-content:center; margin-top:26px; } .form .btn[disabled]{ opacity:.7; pointer-events:none; } .form-note{ color:var(--smoke); font-size:12.5px; margin-top:16px; text-align:center; } @media (max-width:820px){ .contact{ grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .site-footer{ padding: clamp(54px,7vh,90px) 0 40px; border-top:1px solid rgba(255,255,255,.08); margin-top: clamp(60px,9vh,120px); } .foot-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom: 60px; } .foot-brand{ max-width: 30ch; } .foot-brand .brand{ margin-bottom:20px; } .foot-brand p{ color:var(--mist); font-size:14px; } .foot-cols{ display:flex; gap: clamp(40px,6vw,90px); flex-wrap:wrap; } .foot-col h5{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); margin-bottom:18px; } .foot-col a{ display:block; color:rgba(255,255,255,.72); font-size:15px; padding:6px 0; transition:color .3s; } .foot-col a:hover{ color: var(--accent); } .foot-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); color:var(--smoke); font-size:13px; } /* ============================================================ RESPONSIVE ============================================================ */ /* large desktops — let content breathe a touch wider */ @media (min-width: 1700px){ :root{ --maxw: 1480px; } } /* tablet landscape & down — collapse nav into burger menu */ @media (max-width: 1024px){ .nav-links{ display:none; } .nav .btn{ display:none; } .brand-tag{ display:none; } .burger{ display:flex; } .quotes{ grid-template-columns: repeat(2,1fr); } } /* tablet portrait */ @media (max-width: 940px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } .stat{ padding: clamp(28px,5vw,44px) clamp(18px,3vw,30px); } .stat:nth-child(odd){ padding-left:0; } .stat:nth-child(even){ padding-right:0; border-right:none; } .stat:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.08); } .about-grid{ grid-template-columns:1fr; align-items:start; } .team-grid{ grid-template-columns: repeat(2,1fr); } .certs{ grid-template-columns: repeat(2,1fr); } .hero-text{ transform:none; } .hero h1{ font-size: clamp(40px, 8.6vw, 84px); } } /* small tablet / large phone */ @media (max-width: 720px){ .quotes{ grid-template-columns: 1fr; } .foot-top{ flex-direction:column; gap:44px; } .scroll-hint{ display:none; } .hero{ padding-top: 116px; padding-bottom: 90px; } .hero .lead{ font-size:16px; } } /* phones */ @media (max-width: 560px){ .hero h1{ font-size: clamp(36px, 11vw, 56px); } .hero .lead{ display:none; } /* на телефоне оставляем только заголовок */ .hero-cta{ width:100%; margin-top:24px; } .hero-cta .btn{ flex:1 1 auto; justify-content:center; } /* метрики — мельче и горизонтально в 3 колонки */ .stats .wrap{ padding-block: 26px; } .stats-grid{ grid-template-columns: repeat(3,1fr); } .stat{ padding: 4px 6px !important; border:none !important; } .stat:not(:last-child){ border-right:1px solid rgba(255,255,255,.10) !important; } .stat-num{ font-size: clamp(22px,7.4vw,30px); } .stat-label{ font-size:10.5px; line-height:1.35; margin-top:8px; max-width:none; } /* кейсы — компактная сетка 2×2 */ .cases-grid{ grid-template-columns: repeat(2,1fr); gap:12px; } .case image-slot{ height: clamp(136px,42vw,168px); } .case-body{ padding:12px; } .case-tags{ margin-bottom:8px; gap:5px; } .case-tag{ font-size:9px; padding:4px 8px; letter-spacing:.06em; } .case-title{ font-size:15px; line-height:1.06; letter-spacing:0; } .case-meta{ display:none; } .case-corner{ width:34px; height:34px; top:10px; right:10px; } .team-grid{ grid-template-columns: repeat(2,1fr); gap:14px; } .marquee-track span{ font-size:14px; gap:30px; padding-right:30px; } .cta-band .cta-huge{ font-size: clamp(24px,7.5vw,36px); } .foot-bottom{ flex-direction:column; gap:8px; } .bg-grain{ display:none; } /* одним фикс-слоем меньше → плавнее скролл */ } /* very small phones */ @media (max-width: 380px){ .hero h1{ font-size: 34px; } .brand-logo{ height:38px; } .site-header.scrolled .brand-logo{ height:32px; } } /* ============================================================ CASE MODAL (shape-morph) ============================================================ */ body.modal-open{ overflow:hidden; padding-right: var(--sbw, 0px); } body.modal-open .site-header{ right: var(--sbw, 0px); } .case-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding: clamp(16px,4vw,52px); } .case-modal.open{ display:flex; } .case-modal-backdrop{ position:absolute; inset:0; background: rgba(5,5,5,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity:0; transition: opacity .45s var(--ease); } .case-modal.show .case-modal-backdrop{ opacity:1; } .case-modal-card{ position:relative; z-index:1; width:min(720px,100%); max-height:88vh; overflow-y:auto; background: var(--graphite); border-radius: clamp(20px,2.4vw,30px); } .case-modal.show .case-modal-card{ box-shadow: 0 40px 120px rgba(0,0,0,.6); } .case-modal-card::-webkit-scrollbar{ width:0; height:0; } .case-modal-media{ position:relative; height: clamp(200px,28vw,300px); overflow:hidden; } .case-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; } .case-modal-cover{ position:absolute; inset:0; z-index:3; opacity:1; pointer-events:none; transition: opacity .42s var(--ease); } .case-modal.revealed .case-modal-cover{ opacity:0; } .case-modal-cover .case-shade{ z-index:1; } .case-modal-cover .case-body{ z-index:2; pointer-events:none; } .case-modal-inner{ position:relative; padding: clamp(26px,3vw,44px); opacity:0; transform: translateY(10px); transition: opacity .34s var(--ease), transform .34s var(--ease); } .case-modal.revealed .case-modal-inner{ opacity:1; transform:none; transition-delay:.14s; } .case-modal-inner .case-modal-tags{ position:relative; z-index:2; margin-top:0; margin-bottom:20px; } .case-modal-title{ font-family:var(--display); font-weight:600; font-size: clamp(28px,3.4vw,46px); line-height:1.03; letter-spacing:-.02em; margin-bottom:22px; text-wrap:balance; } .case-modal-lead{ color:#e9e9ec; font-size: clamp(16px,1.5vw,19px); line-height:1.5; margin: 0 0 26px; max-width:54ch; text-wrap:pretty; } .case-sec{ padding: 22px 0; border-top:1px solid rgba(255,255,255,.1); } .case-sec:first-of-type{ border-top:0; padding-top:0; } .case-sec-h{ font-family:var(--display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); margin-bottom:10px; } .case-sec p{ color: var(--mist); font-size: clamp(15px,1.4vw,17px); line-height:1.6; max-width:58ch; text-wrap:pretty; } .case-sec ul{ list-style:none; display:flex; flex-direction:column; gap:11px; } .case-sec li{ color: var(--mist); font-size: clamp(15px,1.4vw,17px); line-height:1.5; padding-left:22px; position:relative; } .case-sec li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--accent); } .case-modal-cta{ margin-top:30px; } .case-modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:44px; height:44px; border:0; border-radius:50%; background: rgba(5,5,5,.5); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s var(--ease), transform .3s var(--ease), color .3s; } .case-modal-close:hover{ background:#fff; color:#0b0b0c; transform: rotate(90deg); } @media (prefers-reduced-motion: reduce){ .case-modal-card, .case-modal-inner, .case-modal-backdrop{ transition:none; } } /* ============================================================ TEAM — temporarily hidden (re-enable when photos are ready: remove this block) ============================================================ */ #team, #cases, #reviews{ display:none; } /* ============================================================ FAQ (accordion) ============================================================ */ .faq{ border-top:1px solid rgba(255,255,255,.1); } .faq-item{ border-bottom:1px solid rgba(255,255,255,.1); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: clamp(20px,4vw,48px); padding: clamp(22px,2.8vw,34px) 0; text-align:left; font-family:var(--display); font-weight:500; font-size: clamp(18px,2vw,28px); line-height:1.15; letter-spacing:-.01em; color:#fff; transition: color .3s var(--ease); } .faq-q:hover{ color: var(--accent); } .faq-item.open .faq-q{ color: var(--accent); } .faq-ic{ position:relative; flex-shrink:0; width:24px; height:24px; } .faq-ic::before, .faq-ic::after{ content:""; position:absolute; left:50%; top:50%; border-radius:2px; background: var(--accent); transition: transform .4s var(--ease); } .faq-ic::before{ width:18px; height:2px; transform: translate(-50%,-50%); } .faq-ic::after{ width:2px; height:18px; transform: translate(-50%,-50%); } .faq-item.open .faq-ic::after{ transform: translate(-50%,-50%) scaleY(0); } .faq-a{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .faq-item.open .faq-a{ grid-template-rows: 1fr; } .faq-a-inner{ overflow:hidden; } .faq-a-inner p{ color: var(--mist); font-size: clamp(15px,1.3vw,17px); line-height:1.65; max-width: 76ch; padding: 0 clamp(40px,5vw,64px) clamp(24px,2.8vw,34px) 0; opacity:0; transform: translateY(6px); transition: opacity .4s var(--ease) .08s, transform .4s var(--ease) .08s; } .faq-item.open .faq-a-inner p{ opacity:1; transform:none; } @media (max-width:560px){ .faq-a-inner p{ padding-right:0; } } @media (prefers-reduced-motion: reduce){ .faq-a{ transition:none; } .faq-a-inner p{ transition:none; } } .nav-links a[href="#team"], .mobile-menu-links a[href="#team"]{ display:none; } /* Кейсы и Отзывы временно скрыты — прячем и все ссылки на #cases (меню, футер, кнопка в hero) */ a[href="#cases"]{ display:none; } /* ============================================================ SERVICE SWITCH — cross-site buttons (.work / .expert) ============================================================ */ .svc-switch{ display:flex; align-items:center; gap:10px; position:relative; padding-left:22px; } .svc-switch::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:24px; background:rgba(255,255,255,.14); } .svc-btn{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; padding:10px 16px; border-radius:100px; font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:.01em; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), color .4s var(--ease); will-change: transform; } .svc-btn-ic{ height:18px; width:auto; flex-shrink:0; display:block; } .svc-btn--dark{ background: linear-gradient(135deg, #2b2b31 0%, #121215 52%, #060607 100%); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } .svc-btn--dark:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.45); } .svc-btn--light{ background:#fff; color:#0b0b0c; box-shadow: 0 0 0 1px rgba(0,0,0,.05); } .svc-btn--light:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,255,255,.18); } /* crowded header → icon-only pills */ @media (max-width: 1280px){ .svc-switch .svc-btn-label{ display:none; } .svc-switch .svc-btn{ padding:10px; } } /* nav collapses into burger → header switch hidden, lives in mobile menu */ @media (max-width: 1024px){ .svc-switch{ display:none; } } /* mobile menu variant */ .mobile-svc{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:26px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); opacity:0; transform: translateY(16px); transition: opacity .5s var(--ease) .34s, transform .5s var(--ease) .34s; } .mobile-menu.open .mobile-svc{ opacity:1; transform:none; } .mobile-svc-head{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); margin-bottom:4px; } .mobile-svc .svc-btn{ justify-content:center; padding:15px 20px; font-size:15px; } .mobile-svc .svc-btn-ic{ height:20px; } /* ============================================================ BACK TO TOP (возврат в hero) ============================================================ */ .to-top{ position:fixed; right: clamp(18px,3vw,34px); bottom: clamp(18px,3vw,34px); z-index:90; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background: var(--accent); color:#140a02; box-shadow: 0 12px 30px rgba(0,0,0,.45); opacity:0; transform: translateY(16px) scale(.9); pointer-events:none; transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .3s var(--ease); } .to-top.show{ opacity:1; transform:none; pointer-events:auto; } .to-top:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.5); } .to-top svg{ display:block; } @media (max-width:560px){ .to-top{ width:46px; height:46px; } } @media (prefers-reduced-motion: reduce){ .to-top{ transition: opacity .3s; } } /* ============================================================ SERVICES — tile grid 3×2 + detail modal ============================================================ */ .svc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,22px); } .svc-tile{ position:relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow:hidden; display:block; width:100%; text-align:left; cursor:pointer; isolation:isolate; background: var(--graphite); } .svc-tile-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter: saturate(.92) brightness(.82); transition: transform 1.1s var(--ease), filter .6s var(--ease); } .svc-tile:hover .svc-tile-img, .svc-tile:focus-visible .svc-tile-img{ transform: scale(1.06); filter: saturate(1) brightness(.96); } .svc-tile-shade{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.9) 100%); } .svc-tile-idx{ position:absolute; top:16px; left:18px; z-index:2; font-family:var(--display); font-size:14px; color: rgba(255,255,255,.7); letter-spacing:.05em; } .svc-tile-name{ position:absolute; left:18px; right:54px; bottom:18px; z-index:2; font-family:var(--display); font-weight:500; font-size: clamp(18px,1.7vw,25px); line-height:1.08; letter-spacing:-.01em; color:#fff; } .svc-tile-arrow{ position:absolute; right:14px; bottom:14px; z-index:2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); color:#fff; transition: background .4s var(--ease), transform .5s var(--ease), color .4s; } .svc-tile:hover .svc-tile-arrow, .svc-tile:focus-visible .svc-tile-arrow{ background: var(--accent); color:#140a02; transform: rotate(-45deg); } @media (max-width:820px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .svc-grid{ grid-template-columns: repeat(2,1fr); gap:12px; } .svc-tile-name{ font-size:15px; left:12px; right:42px; bottom:12px; } .svc-tile-idx{ top:11px; left:12px; font-size:12px; } .svc-tile-arrow{ width:32px; height:32px; right:10px; bottom:10px; } } /* detail modal (fade + scale) */ .svc-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding: clamp(16px,4vw,52px); } .svc-modal.open{ display:flex; } .svc-modal-backdrop{ position:absolute; inset:0; background: rgba(5,5,5,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity:0; transition: opacity .4s var(--ease); } .svc-modal.show .svc-modal-backdrop{ opacity:1; } .svc-modal-card{ position:relative; z-index:1; width:min(640px,100%); max-height:88vh; overflow-y:auto; background: var(--graphite); border-radius: clamp(20px,2.4vw,30px); opacity:0; transform: translateY(14px) scale(.96); transition: opacity .4s var(--ease), transform .4s var(--ease); } .svc-modal.show .svc-modal-card{ opacity:1; transform:none; box-shadow: 0 40px 120px rgba(0,0,0,.6); } .svc-modal-card::-webkit-scrollbar{ width:0; height:0; } .svc-modal-media{ position:relative; height: clamp(200px,30vw,300px); overflow:hidden; } .svc-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; } .svc-modal-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(26,26,29,.92)); } .svc-modal-inner{ position:relative; padding: clamp(24px,3vw,40px); } .svc-modal-idx{ font-family:var(--display); font-size:13px; color: var(--accent); letter-spacing:.1em; } .svc-modal-title{ font-family:var(--display); font-weight:600; font-size: clamp(26px,3vw,40px); line-height:1.04; letter-spacing:-.02em; margin:8px 0 18px; text-wrap:balance; } .svc-modal-text{ color: var(--mist); font-size: clamp(15px,1.4vw,17px); line-height:1.65; max-width:56ch; text-wrap:pretty; } .svc-modal-cta{ margin-top:28px; } .svc-modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:44px; height:44px; border:0; border-radius:50%; background: rgba(5,5,5,.5); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s var(--ease), transform .3s var(--ease), color .3s; } .svc-modal-close:hover{ background:#fff; color:#0b0b0c; transform: rotate(90deg); } @media (prefers-reduced-motion: reduce){ .svc-modal-card{ transition: opacity .2s; transform:none; } } /* ============================================================ CONTACT — messenger buttons (WhatsApp / Telegram) ============================================================ */ .contact-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; } .msg-btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:100px; font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.01em; transition: transform .4s var(--ease), box-shadow .4s var(--ease); will-change: transform; } .msg-btn svg{ width:19px; height:19px; flex-shrink:0; display:block; } .msg-btn:hover{ transform: translateY(-2px); } .msg-wa{ background:#25d366; color:#04130a; } .msg-wa:hover{ box-shadow: 0 12px 28px rgba(37,211,102,.32); } .msg-tg{ background:#229ed9; color:#fff; } .msg-tg:hover{ box-shadow: 0 12px 28px rgba(34,158,217,.34); } @media (max-width:380px){ .msg-btn{ flex:1 1 auto; justify-content:center; } } /* ============================================================ PAINS — проблема → решение ============================================================ */ .pains{ border-top:1px solid rgba(255,255,255,.1); } .pain{ display:grid; grid-template-columns: 1fr auto 1.1fr; align-items:center; gap: clamp(16px,3vw,54px); padding: clamp(24px,3vw,38px) 0; border-bottom:1px solid rgba(255,255,255,.1); } .pain-problem{ color: var(--mist); font-size: clamp(16px,1.5vw,20px); line-height:1.4; } .pain-x{ color:#e0563a; font-weight:700; margin-right:6px; } .pain-arrow{ color: var(--accent); font-size: clamp(20px,2vw,26px); } .pain-solution{ color:#fff; font-family:var(--display); font-weight:500; font-size: clamp(17px,1.8vw,24px); line-height:1.22; letter-spacing:-.01em; } .pain-check{ color: var(--accent); font-weight:700; margin-right:8px; } @media (max-width:760px){ .pain{ grid-template-columns: 1fr; gap:8px; padding: 22px 0; } .pain-arrow{ transform: rotate(90deg); justify-self:start; font-size:18px; margin:2px 0 2px 4px; } } /* анимированный знак в блоке «О компании» */ .about-logo{ width: clamp(116px,14vw,176px); height:auto; display:block; margin-bottom: clamp(22px,3vw,40px); } /* фоновое видео секции болей (X / ✓), циклично, с затемнением под текст */ #pains{ position:relative; overflow:hidden; } .pains-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .pains-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; opacity:.5; } .pains-bg-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,5,6,.74) 0%, rgba(5,5,6,.48) 48%, rgba(5,5,6,.6) 100%); } #pains > .wrap{ position:relative; z-index:1; } @media (max-width:760px){ .pains-bg{ display:none; } }