, NOT on .process — .process starts below the section heading, so anchoring here used to cut a hard horizontal line right under it. Full-bleed horizontally (the 1220px .container would slice it vertically) and masked top/bottom so it can never end on a visible edge. */ .gb-proc-bg{ position:absolute;top:0;bottom:0; left:calc(50% - 50vw);width:100vw; z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 240px),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 240px,#000 calc(100% - 240px),transparent 100%); } /* keep the section's own content above the backdrop */ .gb-secbg-host>.container{position:relative;z-index:1} /* faint dot texture, faded out towards the edges */ .gb-proc-bg::before{ content:'';position:absolute;inset:0; background-image:radial-gradient(rgba(245,244,241,.04) 1px,transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(72% 58% at 50% 50%,#000 35%,transparent 100%); mask-image:radial-gradient(72% 58% at 50% 50%,#000 35%,transparent 100%); } /* slow drifting aurora blobs in the brand palette */ .gb-proc-bg i{position:absolute;border-radius:50%;will-change:transform} /* Banding is the enemy here: on a near-black page the steps between stops are below one 8-bit level, so a plain gradient shows visible bands and a hard rim. Three defences: fade to rgba(colour,0) instead of `transparent` (which is transparent BLACK and muddies the ramp), run the last stop all the way to 100%, and dither the whole layer with noise (.gb-proc-bg::after). */ .gb-proc-bg i:nth-child(1){ width:132vw;height:132vw;left:-48vw;top:-14%; background:radial-gradient(closest-side circle, rgba(139,92,246,.085) 0%, rgba(139,92,246,.070) 12%, rgba(139,92,246,.055) 24%, rgba(139,92,246,.041) 36%, rgba(139,92,246,.029) 48%, rgba(139,92,246,.019) 60%, rgba(139,92,246,.011) 72%, rgba(139,92,246,.005) 84%, rgba(139,92,246,.002) 93%, rgba(139,92,246,0) 100%); animation:procDrift1 30s ease-in-out infinite; } .gb-proc-bg i:nth-child(2){ width:120vw;height:120vw;right:-44vw;top:24%; background:radial-gradient(closest-side circle, rgba(59,130,246,.075) 0%, rgba(59,130,246,.062) 12%, rgba(59,130,246,.049) 24%, rgba(59,130,246,.036) 36%, rgba(59,130,246,.026) 48%, rgba(59,130,246,.017) 60%, rgba(59,130,246,.010) 72%, rgba(59,130,246,.005) 84%, rgba(59,130,246,.002) 93%, rgba(59,130,246,0) 100%); animation:procDrift2 38s ease-in-out infinite; } .gb-proc-bg i:nth-child(3){ width:112vw;height:112vw;left:-26vw;bottom:-16%; background:radial-gradient(closest-side circle, rgba(178,158,251,.065) 0%, rgba(172,150,250,.053) 12%, rgba(163,138,249,.042) 24%, rgba(154,124,248,.031) 36%, rgba(147,112,247,.022) 48%, rgba(141,101,246,.014) 60%, rgba(139,92,246,.008) 72%, rgba(139,92,246,.004) 84%, rgba(139,92,246,.001) 93%, rgba(139,92,246,0) 100%); animation:procDrift3 34s ease-in-out infinite; } /* noise dither — randomises the last bit so the ramps read as continuous */ .gb-proc-bg::after{ content:'';position:absolute;inset:0;pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"); } @keyframes procDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,-5vh) scale(1.14)}} @keyframes procDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,6vh) scale(1.09)}} @keyframes procDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-7vh) scale(.9)}} /* everything in the list paints above the backdrop */ .process-item{z-index:1} /* SVG "journey" line — drawn by scroll, see js/main.js */ .gb-journey{position:absolute;left:0;top:0;overflow:visible;pointer-events:none} .gb-jt{fill:none;stroke:rgba(245,244,241,.10);stroke-width:1.5} .gb-jd{ fill:none;stroke:url(#gbJourneyGrad);stroke-width:2.5;stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(139,92,246,.7)); } .gb-jnode{ fill:var(--bg3);stroke:rgba(245,244,241,.18);stroke-width:1; transition:fill .45s var(--ease),stroke .45s; } .gb-jnode.lit{fill:#c4b5fd;stroke:transparent;filter:drop-shadow(0 0 8px rgba(139,92,246,.95))} .gb-jh{fill:#ece6ff;filter:drop-shadow(0 0 11px rgba(167,139,250,1));transition:opacity .3s} .process-item{ display:flex;gap:34px;padding:40px 0;border-bottom:1px solid var(--border-soft);align-items:flex-start; position:relative;transition:opacity .5s; } .process-item:last-child{border-bottom:none} /* wide screens: one step per screenful, blocks alternating left / right, with the journey line weaving between them down the middle */ @media(min-width:861px){ .process{padding-left:0} .process-item{ min-height:100vh;width:43%;padding:80px 0; align-items:center;border-bottom:none; } /* side is tagged by JS (.gb-right) — :nth-child would also count the

*/ .case-cover .cover-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; transition:transform .6s var(--ease); } .case-card:hover .cover-img{transform:scale(1.05)} .case-body{padding:30px 30px 34px} .case-tag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:12px} .case-body h3{font-size:1.16rem;margin-bottom:10px} .case-body p{color:var(--muted);font-size:.92rem;margin-bottom:0} /* три равные колонки: в узких карточках (.grid.c3) длинные подписи переносятся, а не выталкивают третью цифру на новую строку */ .case-results{display:flex;gap:18px;margin-top:18px} .case-res{flex:1 1 0;min-width:0} .case-res .n{white-space:nowrap} .case-res .l{line-height:1.4} .case-res .n{font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;font-size:1.25rem;color:var(--accent-soft)} .case-res .l{font-size:.74rem;color:var(--muted)} /* ============ HOME: CASES (слайдер: 3 карточки на десктопе, 2 на планшете, 1+ на телефоне) ============ */ .hc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:44px} .hc-head .sec-sub{margin-bottom:0} .hc-nav{display:flex;gap:10px;flex:none} .hc-nav button{ width:50px;height:50px;border-radius:50%;border:1px solid var(--border);background:transparent; color:var(--text);font-size:1.05rem;cursor:pointer;display:grid;place-items:center; transition:background .3s,border-color .3s,opacity .3s; } .hc-nav button:hover:not(:disabled){background:var(--grad);border-color:transparent} .hc-nav button:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px} .hc-nav button:disabled{opacity:.3;cursor:default} .hc-slider.hc-static .hc-nav,.hc-slider.hc-static .hc-progress{display:none} /* всё влезло — листать нечего */ .hc-track{ display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 2px 6px;margin:-4px -2px 0; } .hc-track::-webkit-scrollbar{display:none} .hc-card{ flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start; position:relative;display:flex;flex-direction:column; background:var(--bg2);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden; transition:border-color .4s,box-shadow .4s; } .hc-card:hover{border-color:rgba(139,92,246,.4);box-shadow:0 24px 60px rgba(0,0,0,.5)} .hc-card:focus-visible{outline:2px solid var(--accent-soft);outline-offset:-2px} .hc-img{position:relative;overflow:hidden;aspect-ratio:16/9;flex:none} .hc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .hc-card:hover .hc-img img{transform:scale(1.045)} .hc-body{position:relative;padding:22px 24px 24px;flex:1 0 auto;display:flex;flex-direction:column} .hc-tag{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:9px;padding-right:44px} .hc-body h3{font-size:1rem;line-height:1.35;margin-bottom:18px;padding-right:44px} .hc-arrow{ position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%; border:1px solid var(--border);display:grid;place-items:center;font-size:.85rem; transition:background .35s,border-color .35s,transform .35s var(--ease); } .hc-card:hover .hc-arrow{background:var(--grad);border-color:transparent;transform:rotate(-45deg)} /* фишка блока: «было → стало». В узкой карточке «стало» стоит под стрелкой */ /* блок цифр прижат к низу карточки — большие числа во всех карточках стоят на одной линии, как бы ни переносился заголовок */ .hc-shift{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto} .hc-shift .from{ font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-size:.95rem;white-space:nowrap; color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(142,142,154,.55); } .hc-shift.funnel .from{text-decoration:none} /* .solo — одна сильная цифра без «было»: когда честного исходного значения нет */ .hc-shift.solo{padding-top:calc(.95rem * 1.68 + 8px)} /* место строки «было», чтобы цифра встала вровень с соседями */ /* воронка / старт с нуля, а не «было плохо» */ .hc-shift .line{ flex:1;min-width:36px;height:1px;position:relative;transform-origin:left center; background:linear-gradient(90deg,rgba(139,92,246,.12),#8B5CF6 70%,#3B82F6); transition:transform 1.1s var(--ease); } .hc-shift .line::after{ content:'';position:absolute;right:0;top:-3px; border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;border-left:7px solid #3B82F6; } /* пока карточка не видна — линия свёрнута; класс .in ставит JS. Без JS линия просто нарисована */ .hc-slider.hc-anim .hc-card:not(.in) .hc-shift .line{transform:scaleX(0)} .hc-shift .to{ flex:0 0 100%; font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;white-space:nowrap; font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1.05;letter-spacing:-.02em; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hc-shift-l{font-size:.74rem;color:var(--muted);margin:10px 0 18px;line-height:1.45;min-height:2.9em} /* всегда две строки — иначе короткая подпись сдвигает число */ .hc-metrics{display:flex;gap:28px;padding-top:14px;border-top:1px solid var(--border-soft)} .hc-metrics .n{font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;font-size:1.05rem;white-space:nowrap} .hc-metrics .l{font-size:.7rem;color:var(--muted);margin-top:2px} .hc-progress{position:relative;height:2px;margin-top:30px;background:var(--border);border-radius:2px;overflow:hidden} .hc-progress i{position:absolute;left:0;top:0;bottom:0;width:33%;background:var(--grad);border-radius:2px;transition:transform .25s linear} .hc-more{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:.86rem;color:var(--muted)} .hc-more a{color:var(--text);border-bottom:1px solid rgba(139,92,246,.5);padding-bottom:2px;transition:border-color .3s} .hc-more a:hover{border-color:var(--accent-soft)} @media(prefers-reduced-motion:reduce){.hc-track{scroll-behavior:auto}.hc-shift .line{transition:none}} @media(max-width:960px){.hc-card{flex-basis:calc((100% - 22px)/2)}} @media(max-width:600px){ .hc-head{flex-direction:column;align-items:flex-start;margin-bottom:30px} .hc-track{gap:14px} .hc-card{flex-basis:84%} /* край следующей карточки подсказывает, что можно листать */ .hc-nav button{width:44px;height:44px} } /* ============ CASE PAGE (отдельная страница кейса) ============ */ /* плашки-факты под заголовком кейса: клиент · сфера · гео · период */ .case-meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px} .case-meta span{ font-size:.74rem;letter-spacing:.02em;color:#c9c8d2; padding:8px 16px;border-radius:99px; background:rgba(245,244,241,.05);border:1px solid var(--border); } .case-meta span b{color:var(--text);font-weight:600} /* крупные цифры результата */ .res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .res-card{ background:var(--bg2);border:1px solid var(--border-soft);border-radius:var(--radius); padding:34px 28px;text-align:center; } .res-card .n{ font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500; font-size:clamp(2.1rem,4vw,3rem);line-height:1.05;letter-spacing:-.02em; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; /* ⚠️ никаких filter/will-change на потомках — убьёт background-clip:text */ } .res-card .l{font-size:.82rem;color:var(--muted);margin-top:12px;line-height:1.5;text-wrap:balance} /* широкая плашка под крупными цифрами — главный денежный результат кейса */ .res-hero{ margin-top:20px;padding:34px 36px;border-radius:var(--radius); display:flex;align-items:center;gap:22px 36px;flex-wrap:wrap; background:linear-gradient(120deg,rgba(139,92,246,.14),rgba(59,130,246,.08) 60%,rgba(59,130,246,0)); border:1px solid rgba(139,92,246,.28); } .res-hero .n{ font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;white-space:nowrap; font-size:clamp(2.2rem,5.4vw,4rem);line-height:1;letter-spacing:-.02em; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .res-hero .l{flex:1 1 240px;font-size:.95rem;color:#c9c8d2;line-height:1.5;text-wrap:balance} @media(max-width:480px){.res-hero{padding:26px 22px}.res-hero .n{font-size:2.1rem}} /* метрики канала: подпись слева, значение справа */ .metric-list{list-style:none} .metric-list li{ display:flex;align-items:baseline;justify-content:space-between;gap:18px; padding:14px 0;border-bottom:1px solid var(--border-soft); } .metric-list li:last-child{border-bottom:none} .metric-list .k{font-size:.86rem;color:var(--muted)} .metric-list .v{ font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500; font-size:1.05rem;color:var(--text);white-space:nowrap; } /* рост к прошлому периоду рядом со значением метрики */ .metric-list .v .up{ font-family:var(--font-b);font-variation-settings:normal;font-size:.72rem;font-weight:600; color:#10B981;margin-left:8px; } /* скриншоты соцсетей клиента в «телефонных» рамках */ .phone-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:960px;margin:0 auto} .phone-gallery figure{margin:0} .phone-gallery img{ display:block;width:100%;height:auto;border-radius:26px; border:1px solid rgba(245,244,241,.12);background:var(--bg2); box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 6px rgba(245,244,241,.03); } @media(max-width:760px){ /* на телефоне — горизонтальная лента со снапом, а не три крошечных скрина */ .phone-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px; padding:4px 4px 22px;margin:0 -4px;-webkit-overflow-scrolling:touch} .phone-gallery figure{flex:0 0 72%;scroll-snap-align:center} } /* сноска об источнике и периоде данных */ .case-note{ font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:26px; padding-left:16px;border-left:2px solid var(--border); } /* хронология «как рос результат» */ .timeline{list-style:none;position:relative;padding-left:26px} .timeline::before{ content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px; background:linear-gradient(180deg,rgba(139,92,246,0),rgba(139,92,246,.55) 18%,rgba(59,130,246,.45) 82%,rgba(59,130,246,0)); } .timeline li{position:relative;padding:0 0 26px} .timeline li:last-child{padding-bottom:0} .timeline li::before{ content:'';position:absolute;left:-26px;top:7px;width:9px;height:9px;border-radius:50%; background:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.16); } .timeline .t{font-weight:600;font-size:.92rem;margin-bottom:5px} .timeline .d{color:var(--muted);font-size:.88rem;line-height:1.6} @media(max-width:860px){ .res-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:480px){ .res-grid{grid-template-columns:1fr} .res-card{padding:26px 22px} .metric-list li{flex-direction:column;gap:4px} /* пять плашек в столбик съедали пол-экрана — ужимаем */ .case-meta{gap:7px;margin-top:26px} .case-meta span{font-size:.7rem;padding:6px 13px} } /* ============ detail lists ============ */ .detail-list{list-style:none} .detail-list li{ padding:17px 0 17px 34px;position:relative;border-bottom:1px solid var(--border-soft);color:#c9c8d2; } .detail-list li:last-child{border-bottom:none} .detail-list li::before{ content:'✦';position:absolute;left:2px;top:17px;color:var(--accent-soft);font-size:.85rem; } /* ============ CTA BAND (horizon) ============ */ .cta-band{ position:relative;border-radius:28px;overflow:hidden;padding:110px 60px 96px;text-align:center; background:#0d0d14;border:1px solid var(--border); } /* the aurora bloom under the horizon — slow breathing */ .cta-band::before{ content:'';position:absolute;left:50%;top:100%;width:160%;height:120%; transform:translate(-50%,-14%);border-radius:50%; background:radial-gradient(closest-side, rgba(240,163,94,.24) 0%,rgba(139,92,246,.32) 34%, rgba(59,130,246,.14) 58%,rgba(59,130,246,0) 78%); filter:blur(40px); animation:ctaBloom 7.5s ease-in-out infinite; } @keyframes ctaBloom{ 0%,100%{opacity:.82;transform:translate(-50%,-13%) scale(1)} 50% {opacity:1; transform:translate(-50%,-16%) scale(1.07)} } /* the crisp horizon line itself — gentle shimmer, opacity only so it stays on the compositor (animating box-shadow would repaint every frame) */ .cta-band::after{ content:'';position:absolute;left:50%;top:100%;width:150%;height:100%; transform:translate(-50%,-8%);border-radius:50%; box-shadow:0 -1px 0 rgba(245,244,241,.5),0 -10px 42px rgba(139,92,246,.55); animation:ctaLine 5.5s ease-in-out infinite; } @keyframes ctaLine{0%,100%{opacity:.78}50%{opacity:1}} /* a highlight travelling along the arc */ .cta-band .cta-sweep{ position:absolute;z-index:0;left:50%;bottom:-9%; width:64%;height:38%;margin-left:-32%; border-radius:50%;pointer-events:none; background:radial-gradient(closest-side ellipse, rgba(222,209,255,.42) 0%,rgba(167,139,250,.22) 32%, rgba(139,92,246,.08) 58%,rgba(139,92,246,0) 100%); filter:blur(30px); animation:ctaSweep 12s ease-in-out infinite alternate; will-change:transform; } @keyframes ctaSweep{ 0% {transform:translateX(-52%) scaleX(.88)} 100%{transform:translateX(52%) scaleX(1.12)} } .cta-band>*{position:relative;z-index:1} .cta-band h2{font-size:clamp(1.65rem,3.2vw,2.5rem);margin-bottom:18px} .cta-band p{color:var(--muted);max-width:500px;margin:0 auto 38px} /* ============ FOOTER ============ */ /* нижний отступ учитывает индикатор «домой» на iPhone (viewport-fit=cover) */ footer{border-top:1px solid var(--border); padding:80px 0 calc(42px + env(safe-area-inset-bottom,0px)); background:var(--bg);position:relative;overflow:hidden} footer::after{ content:'GrowBase';position:absolute;left:50%;bottom:-6vw;transform:translateX(-50%); font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;font-size:15vw;line-height:1; text-transform:uppercase;letter-spacing:.02em;white-space:nowrap; color:transparent;-webkit-text-stroke:1px rgba(245,244,241,.055);pointer-events:none; } .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:56px;position:relative;z-index:1} .footer-grid h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px;color:var(--muted)} .footer-grid ul{list-style:none} .footer-grid ul li{margin-bottom:11px} .footer-grid a{color:#c9c8d2;font-size:.92rem;transition:color .25s,padding-left .3s var(--ease)} .footer-grid a:hover{color:var(--text);padding-left:6px} .footer-desc{color:var(--muted);font-size:.9rem;max-width:300px;margin-top:16px} /* ---- social links ---- */ .socials{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap} .socials-lb{ font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .social-btn{ width:40px;height:40px;border-radius:50%;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border);color:var(--muted); transition:color .3s,border-color .3s,background .3s,transform .3s var(--ease); } .social-btn svg{width:19px;height:19px} .social-btn:hover{ color:var(--text);border-color:rgba(139,92,246,.55); background:rgba(139,92,246,.12);transform:translateY(-3px); } .socials-inline{margin-top:16px} .contact-info-card a.big + .socials-inline{margin-top:14px} .footer-bottom{ display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding-top:30px;border-top:1px solid var(--border-soft);color:var(--muted);font-size:.78rem; letter-spacing:.06em;position:relative;z-index:1; } /* ============ BREADCRUMB ============ */ .crumbs{ font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin-bottom:26px;position:relative;z-index:2; } .crumbs a{color:var(--accent-soft)} .crumbs span{margin:0 10px;opacity:.5} /* ============ CONTACT ============ */ .contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start} .contact-info-card{ background:linear-gradient(160deg,rgba(245,244,241,.028),rgba(245,244,241,.008)); border:1px solid var(--border-soft);border-radius:var(--radius);padding:38px 36px;margin-bottom:22px; transition:border-color .4s; } .contact-info-card:hover{border-color:rgba(139,92,246,.3)} .contact-info-card h3{font-size:1.1rem;margin-bottom:8px} .contact-info-card p{color:var(--muted);font-size:.92rem} .contact-info-card a.big{ font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;font-size:1.3rem;color:var(--accent-soft); display:inline-block;margin-top:6px; } .cal-wrap{ background:var(--bg2);border:1px solid rgba(139,92,246,.28);border-radius:var(--radius); overflow:hidden;min-height:640px;position:relative; } #my-cal-inline-30min{width:100%;height:100%;min-height:640px;overflow:auto} /* ============ MARQUEE ============ */ .marquee{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:30px 0;background:var(--bg)} .marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 30s linear infinite} .marquee-track span{ font-family:var(--font-d);font-variation-settings:var(--fvs-d);font-weight:500;font-size:1.05rem; text-transform:uppercase;letter-spacing:.14em;color:var(--muted); white-space:nowrap;display:flex;align-items:center;gap:64px; } .marquee-track span::after{content:'✦';color:var(--accent);font-size:.9rem} @keyframes marquee{to{transform:translateX(-50%)}} /* ============ RESPONSIVE ============ */ @media(max-width:960px){ .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr} /* на телефонах blur не справляется — контент читается сквозь шапку, делаем её плотной */ .nav.scrolled{background:rgba(11,11,16,.95)} /* burger takes over before the nav can wrap */ .nav-links{ position:fixed;top:calc(76px + env(safe-area-inset-top,0px));left:0;right:0;flex-direction:column;gap:0; background:rgba(11,11,16,.97);backdrop-filter:blur(20px); border-bottom:1px solid var(--border);display:none;padding:12px 0; } .nav-links.open{display:flex} .nav-links li{width:100%;text-align:center} .nav-links a{display:block;padding:15px} .burger{display:block} } @media(max-width:680px){ .grid.c3,.grid.c2,.grid.c4{grid-template-columns:1fr} .nav-right .btn{display:none} section{padding:70px 0} .hero{padding:150px 0 100px;min-height:92vh} .hero.sub{min-height:auto;padding:140px 0 70px} .hero h1{max-width:14ch} .hero-stats{margin-top:76px;gap:26px 0;padding:22px 6px;border-radius:18px} .hero-stat{padding:6px 18px;flex:1 1 42%} .hero-stat:nth-child(odd){border-left:none} .hero-stat .num{font-size:1.9rem} .hero-stat .lbl{max-width:none} .cta-band{padding:72px 26px 64px} .process{padding-left:54px} .process-item{gap:18px} .process-num{min-width:56px;font-size:2.1rem} #gb-loader{padding:24px} #gb-loader .gl-pct{right:20px} } /* ============ REDUCED MOTION ============ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none;filter:none} }