/* ============================================================
BAT – Business Audit Today
Main Stylesheet
============================================================ */
/* Fonts (Inter + Manrope) are loaded via +
in each page — NOT via @import here,
because a CSS @import is render-blocking and loads serially. */
/* ————————————————————————————————————————————
0. CSS VARIABLES
———————————————————————————————————————————— */
:root {
/* Type — premium, Cyrillic-capable, consistent on every OS */
--font-display: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 180ms;
--duration-base: 280ms;
--duration-slow: 520ms;
--duration-hero: 900ms;
--page-pad: 24px;
--site-max: 1760px;
--content-max: 1480px;
--module-max: 1680px;
--grid-gap: 24px;
--section-y: 128px;
--color-primary: #2A6FDB;
--color-primary-dark: #16308f;
--color-dark: #0B1024;
--color-body: #111827;
--color-muted: #6B7280;
--color-bg-alt: #F5F5F7;
--color-surface: #fff;
}
/* ————————————————————————————————————————————
1. RESET & BASE
———————————————————————————————————————————— */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-body);
background: var(--color-surface);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, video, svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
ul, ol {
list-style: none;
}
::selection {
background: var(--color-primary);
color: #fff;
}
/* ————————————————————————————————————————————
2. TYPOGRAPHY
———————————————————————————————————————————— */
.section-label,
.eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 12px;
}
.section-title {
font-size: clamp(1.875rem, 4vw, 3.25rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--color-dark);
}
.section-desc {
margin-top: 16px;
font-size: 17px;
line-height: 1.65;
color: var(--color-muted);
}
/* ————————————————————————————————————————————
3. LAYOUT WRAPPERS
———————————————————————————————————————————— */
.site-content {
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--page-pad);
}
.site-module {
max-width: var(--module-max);
margin-inline: auto;
padding-inline: var(--page-pad);
}
.site-shell {
max-width: var(--site-max);
margin-inline: auto;
padding-inline: var(--page-pad);
}
/* ————————————————————————————————————————————
4. BUTTONS
———————————————————————————————————————————— */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
box-shadow: 0 2px 8px rgba(42, 111, 219, 0.25);
transition: transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(42, 111, 219, 0.35);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-light {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.btn-light:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
}
.arrow-icon {
display: inline-block;
transition: transform var(--duration-fast) var(--ease-out);
}
a:hover .arrow-icon,
button:hover .arrow-icon {
transform: translateX(4px);
}
/* ————————————————————————————————————————————
5. FLOATING NAV
———————————————————————————————————————————— */
.floating-nav {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex;
align-items: center;
gap: 16px;
width: calc(100% - var(--page-pad) * 2);
max-width: var(--site-max);
height: 64px;
padding: 0 14px 0 20px;
border-radius: 18px;
background: rgba(24, 26, 34, 0.86);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
animation: navDrop 0.6s var(--ease-out) both;
transition: background var(--duration-base) var(--ease-soft),
box-shadow var(--duration-base) var(--ease-soft);
}
.floating-nav.scrolled {
background: rgba(16, 18, 26, 0.88);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}
.nav-brand {
display: flex;
align-items: center;
gap: 11px;
flex-shrink: 0;
}
.nav-logo {
font-size: 22px;
font-weight: 800;
color: #fff;
letter-spacing: 0.04em;
}
.nav-brand-text {
display: flex;
flex-direction: column;
line-height: 1.18;
}
.nav-brand-name {
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
}
.nav-brand-sub {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
}
/* Desktop menu */
.nav-links {
display: flex;
align-items: center;
gap: 2px;
margin-inline: auto;
}
.nav-top {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 13px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
background: none;
border: none;
border-radius: 10px;
white-space: nowrap;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.nav-top:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.nav-top .caret {
font-size: 10px;
opacity: 0.6;
transition: transform var(--duration-fast) var(--ease-out);
}
.nav-item {
position: relative;
}
.nav-item:hover > .nav-top .caret,
.nav-item:focus-within > .nav-top .caret {
transform: rotate(180deg);
}
/* Dropdown */
.dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 300px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 2px;
background: rgba(10, 12, 20, 0.92);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
visibility var(--duration-fast);
z-index: 1001;
}
.dropdown::before {
content: "";
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dropdown a {
display: block;
padding: 12px 14px;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.78);
border-radius: 12px;
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.dropdown a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.nav-controls {
display: flex;
align-items: center;
gap: 12px;
}
.nav-phone {
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-out);
}
.nav-phone:hover {
color: #cdddff;
}
.btn-nav-cta {
padding: 9px 20px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--color-primary);
border-radius: 999px;
transition: background var(--duration-fast) var(--ease-out);
white-space: nowrap;
}
.btn-nav-cta:hover {
background: var(--color-primary-dark);
}
/* Active section highlight (driven by body[data-page]) */
body[data-page="home"] .nav-top[data-section="home"],
body[data-page="clients"] .nav-top[data-section="clients"],
body[data-page="contacts"] .nav-top[data-section="contacts"],
body[data-page="audit"] .nav-item[data-section="audit"] > .nav-top,
body[data-page="accounting"] .nav-item[data-section="accounting"] > .nav-top,
body[data-page="services"] .nav-item[data-section="services"] > .nav-top,
body[data-page="about"] .nav-item[data-section="about"] > .nav-top {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
/* ————————————————————————————————————————————
6. BURGER / MOBILE TOGGLE
———————————————————————————————————————————— */
.burger-btn {
display: none;
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
z-index: 1001;
}
.burger-btn span {
position: absolute;
left: 11px;
right: 11px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: top 280ms cubic-bezier(0.16, 1, 0.3, 1),
transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.burger-btn span:nth-child(1) { top: 19px; }
.burger-btn span:nth-child(2) { top: 25px; }
.burger-btn.is-open span:nth-child(1) {
top: 22px;
transform: rotate(45deg);
}
.burger-btn.is-open span:nth-child(2) {
top: 22px;
transform: rotate(-45deg);
}
@media (max-width: 1560px) {
.nav-phone {
display: none;
}
}
@media (max-width: 1200px) {
.nav-links,
.nav-controls {
display: none;
}
.burger-btn {
display: flex;
}
/* Push the burger to the far right edge of the header */
.nav-actions {
margin-left: auto;
}
}
/* ————————————————————————————————————————————
7. MOBILE MENU
———————————————————————————————————————————— */
.mobile-overlay {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(5, 8, 18, 0.96);
-webkit-backdrop-filter: blur(28px);
backdrop-filter: blur(28px);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-16px);
pointer-events: none;
transition: opacity 320ms var(--ease-out),
transform 320ms var(--ease-out),
visibility 320ms;
}
.mobile-overlay.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mobile-menu {
min-height: 100dvh;
padding: 88px 24px 40px;
display: flex;
flex-direction: column;
}
.mobile-menu-links {
display: flex;
flex-direction: column;
}
.mobile-menu-links > a,
.m-acc-btn {
font-size: clamp(22px, 6vw, 28px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.2;
padding: 16px 0;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu-links > a {
display: block;
transition: color var(--duration-fast) var(--ease-out);
}
.mobile-menu-links > a:hover {
color: rgba(255, 255, 255, 0.7);
}
/* Mobile accordion groups */
.m-acc {
display: flex;
flex-direction: column;
}
.m-acc-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.m-acc-btn .caret {
font-size: 15px;
opacity: 0.6;
transition: transform var(--duration-base) var(--ease-out);
}
.m-acc-btn[aria-expanded="true"] .caret {
transform: rotate(180deg);
}
.m-acc-panel {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height var(--duration-base) var(--ease-out),
opacity var(--duration-base) var(--ease-out);
}
.m-acc-btn[aria-expanded="true"] + .m-acc-panel {
opacity: 1;
}
.m-acc-panel a {
display: block;
padding: 13px 0 13px 12px;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.66);
transition: color var(--duration-fast) var(--ease-out);
}
.m-acc-panel a:first-child { padding-top: 6px; }
.m-acc-panel a:last-child { padding-bottom: 18px; }
.m-acc-panel a:hover {
color: #fff;
}
.mobile-menu-footer {
margin-top: auto;
padding-top: 36px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: flex-start;
}
.mobile-phone {
font-size: 20px;
font-weight: 600;
color: #fff;
}
.mobile-lang {
background: rgba(255, 255, 255, 0.06);
border-radius: 999px;
padding: 4px;
}
.mobile-menu-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 16px 32px;
border-radius: 16px;
font-size: 16px;
font-weight: 600;
color: #fff;
background: var(--color-primary);
transition: background var(--duration-fast) var(--ease-out);
}
.mobile-menu-cta:hover {
background: var(--color-primary-dark);
}
/* ————————————————————————————————————————————
8. HERO
———————————————————————————————————————————— */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
text-align: left;
padding: 0;
overflow: hidden;
color: #fff;
/* Deep dark-blue base — clean fill before/without the video (no poster image) */
background: linear-gradient(160deg, #0e1c3d 0%, #0a1330 58%, #070d1f 100%);
}
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.hero-bg video {
width: 100%;
height: 100%;
object-fit: cover;
animation: heroZoom 18s var(--ease-soft) both;
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(11, 16, 36, 0.7) 0%, rgba(11, 16, 36, 0.3) 40%, rgba(11, 16, 36, 0.6) 100%),
linear-gradient(135deg, rgba(42, 111, 219, 0.12) 0%, transparent 60%);
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: 1fr auto;
flex: 1;
width: 100%;
}
.hero-content {
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 760px;
text-align: left;
padding-top: 120px;
padding-bottom: 96px;
animation: heroUp var(--duration-hero) var(--ease-smooth) 0.15s both;
}
.hero-badge {
display: inline-flex;
align-self: flex-start;
width: fit-content;
max-width: none;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
margin-bottom: 28px;
}
.hero-badge-dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}
.hero h1 {
font-size: clamp(3rem, 6vw, 6.5rem);
font-weight: 700;
line-height: 1;
letter-spacing: -0.045em;
text-align: left;
}
.hero-h1-muted {
color: rgba(255, 255, 255, 0.5);
}
.hero-desc {
margin-top: 22px;
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.76);
max-width: 680px;
text-align: left;
}
.hero-actions {
display: flex;
gap: 14px;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 36px;
animation: heroUp var(--duration-hero) var(--ease-smooth) 0.45s both;
}
.trust-bar {
grid-row: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding-bottom: 44px;
animation: heroUp var(--duration-hero) var(--ease-smooth) 0.6s both;
}
.trust-bar-item {
padding: 0 28px;
text-align: left;
border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.trust-bar-item:first-child {
border-left: none;
padding-left: 0;
}
.trust-bar-title {
display: block;
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.trust-bar-sub {
font-size: 13px;
color: rgba(255, 255, 255, 0.56);
line-height: 1.4;
}
/* ————————————————————————————————————————————
9. SECTION SPACING
———————————————————————————————————————————— */
.section-white,
.section-alt,
.section-dark {
padding-block: var(--section-y);
}
.section-alt {
background: var(--color-bg-alt);
}
.section-dark {
background: var(--color-dark);
color: #fff;
}
.section-dark .section-title {
color: #fff;
}
.section-dark .section-desc {
color: rgba(255, 255, 255, 0.6);
}
.section-dark .section-label {
color: rgba(255, 255, 255, 0.5);
}
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}
.section-header-text {
max-width: 680px;
}
.section-header-center {
text-align: center;
max-width: 680px;
margin-inline: auto;
margin-bottom: 56px;
}
.clients-heading {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 700;
text-align: center;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 48px;
}
/* ————————————————————————————————————————————
10. LOGO GRID
———————————————————————————————————————————— */
.logo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
/* Each logo sits on its own light "frosted plate" — logos are drawn for
light backgrounds, so every one stays legible on the dark section. */
.logo-slot {
display: flex;
align-items: center;
justify-content: center;
padding: 26px 22px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.93);
border: 1px solid rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: transform var(--duration-base) var(--ease-out),
background var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
}
.logo-slot img {
height: 54px;
width: auto;
max-width: 100%;
opacity: 0.78;
filter: grayscale(1); /* calm unified wall — legible on the light plate */
transition: opacity var(--duration-base) var(--ease-out),
filter var(--duration-base) var(--ease-out);
}
/* hover → plate lifts & brightens, logo blooms into its own brand colour */
.logo-slot:hover {
transform: translateY(-3px);
background: #fff;
border-color: rgba(37, 99, 235, 0.35);
box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.55);
}
.logo-slot:hover img {
opacity: 1;
filter: grayscale(0);
}
.logo-slot img.logo-fade-in {
animation: logoSwap 0.4s var(--ease-out) both;
}
/* ————————————————————————————————————————————
11. CAROUSEL
———————————————————————————————————————————— */
.carousel-track {
display: flex;
gap: var(--grid-gap);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scroll-padding-left: max(var(--page-pad), calc((100vw - var(--content-max)) / 2 + var(--page-pad)));
padding-left: max(var(--page-pad), calc((100vw - var(--content-max)) / 2 + var(--page-pad)));
padding-right: var(--page-pad);
padding-block: 16px 32px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
display: none;
}
.carousel-track > * {
scroll-snap-align: start;
flex-shrink: 0;
}
.carousel-arrows {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.carousel-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.12);
background: var(--color-surface);
font-size: 18px;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.carousel-arrow:hover {
background: var(--color-dark);
color: #fff;
border-color: var(--color-dark);
}
.section-dark .carousel-arrow {
border-color: rgba(255, 255, 255, 0.18);
background: transparent;
color: #fff;
}
.section-dark .carousel-arrow:hover {
background: #fff;
color: var(--color-dark);
border-color: #fff;
}
/* faded out when there's nothing more to scroll to (Apple-style) */
.carousel-arrow {
opacity: 1;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.carousel-arrow:disabled {
opacity: 0.32;
pointer-events: none;
}
.carousel-arrow:disabled:hover {
background: var(--color-surface);
color: inherit;
border-color: rgba(0, 0, 0, 0.12);
}
.section-dark .carousel-arrow:disabled:hover {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
}
@media (prefers-reduced-motion: reduce) {
.carousel-track { scroll-behavior: auto; }
}
/* ————————————————————————————————————————————
12. CARDS – BASE
———————————————————————————————————————————— */
.card {
border-radius: 24px;
overflow: hidden;
background: var(--color-surface);
transition: transform 260ms var(--ease-out),
box-shadow 260ms var(--ease-out),
border-color 260ms var(--ease-out);
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
.card-img-wrap {
overflow: hidden;
position: relative;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease-out);
}
.card:hover .card-img {
transform: scale(1.035);
}
.card-body {
padding: 24px 28px;
}
.card-body h3 {
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: var(--color-dark);
}
.card-body p {
margin-top: 8px;
font-size: 14px;
line-height: 1.55;
color: var(--color-muted);
}
.card-badge {
position: absolute;
top: 14px;
left: 14px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.card-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
}
/* ————————————————————————————————————————————
12a. SERVICE CARDS
———————————————————————————————————————————— */
.card-service {
width: 360px;
min-height: 420px;
padding: 34px;
border-radius: 32px;
border: 1px solid rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
}
.card-service-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 26px;
}
.card-service-ic {
width: 56px;
height: 56px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-alt);
color: var(--color-primary);
transition: background 260ms var(--ease-out), color 260ms var(--ease-out);
}
.card-service:hover .card-service-ic {
background: var(--color-primary);
color: #fff;
}
.card-service-cat {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-primary);
padding: 6px 14px;
border-radius: 999px;
background: rgba(42, 111, 219, 0.08);
}
.card-service .card-body {
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.card-service .card-body h3 {
font-size: 21px;
}
.card-service .card-link {
margin-top: auto;
padding-top: 18px;
}
/* ————————————————————————————————————————————
12b. SOLUTION CARDS
———————————————————————————————————————————— */
.card-solution {
width: 340px;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(160deg, #141828, #1a1f36);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.06);
text-align: left;
min-height: 260px;
}
.card-solution:hover {
transform: translateY(-3px);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}
.card-solution-top {
display: flex;
gap: 16px;
align-items: flex-start;
}
.card-solution-num {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 14px;
font-weight: 700;
color: #fff;
background: rgba(42, 111, 219, 0.3);
border: 1px solid rgba(42, 111, 219, 0.4);
}
.card-solution-top p {
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.8);
}
.card-solution-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
}
/* ————————————————————————————————————————————
12c. TRUST CARDS
———————————————————————————————————————————— */
.card-trust {
width: 320px;
padding: 32px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.card-trust-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--color-bg-alt);
color: var(--color-primary);
margin-bottom: 20px;
}
.card-trust h3 {
font-size: 17px;
font-weight: 600;
color: var(--color-dark);
margin-bottom: 8px;
}
.card-trust p {
font-size: 14px;
line-height: 1.55;
color: var(--color-muted);
}
/* ————————————————————————————————————————————
12d. TEAM CARDS
———————————————————————————————————————————— */
.card-team {
width: 330px;
display: flex;
flex-direction: column;
}
.card-team-header {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 40px 28px;
background: linear-gradient(135deg, var(--team-from, var(--color-primary)), var(--team-to, var(--color-primary-dark)));
}
.card-team-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: #fff;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.25);
}
.card-team-years {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
}
.card-team .card-body h3 {
font-size: 17px;
}
/* ————————————————————————————————————————————
13. NUMBERS PANEL
———————————————————————————————————————————— */
.numbers-panel {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-radius: 32px;
background: var(--color-dark);
overflow: hidden;
}
.numbers-item {
text-align: center;
padding: 48px 20px;
position: relative;
}
.numbers-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(255, 255, 255, 0.1);
}
.numbers-value {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.1;
background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.numbers-label {
display: block;
margin-top: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.45;
}
@media (max-width: 1024px) {
.numbers-panel {
grid-template-columns: repeat(3, 1fr);
}
.numbers-item:nth-child(3)::after {
display: none;
}
}
@media (max-width: 620px) {
.numbers-panel {
grid-template-columns: repeat(2, 1fr);
}
.numbers-item {
padding: 30px 16px;
}
.numbers-item::after {
display: none;
}
/* clean 2-col grid: vertical divider on right column, row separators below row 1 */
.numbers-item:nth-child(even) {
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.numbers-item:nth-child(n + 3) {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
}
/* ————————————————————————————————————————————
14. DOCUMENT VIEWER
———————————————————————————————————————————— */
.documents-section {
scroll-margin-top: 110px;
}
.documents-heading {
margin-bottom: 40px;
}
/* Apple-style dark feature gallery */
.documents-apple-gallery {
position: relative;
width: calc(100% - var(--page-pad) * 2);
max-width: 1680px;
margin-inline: auto;
min-height: 720px;
background: #000;
border-radius: 44px;
overflow: hidden;
color: #fff;
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.22);
display: grid;
grid-template-columns: 360px 1fr;
align-items: stretch;
}
/* Left feature rail */
.documents-feature-rail {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: 72px 0 72px 96px;
}
.doc-feature {
display: flex;
flex-direction: column;
align-items: flex-start;
cursor: pointer;
}
.doc-feature-btn {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 180px;
width: fit-content;
height: 54px;
padding: 0 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
}
.doc-feature-btn:hover {
background: rgba(255, 255, 255, 0.16);
}
.doc-feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
font-size: 15px;
line-height: 1;
transition: transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.doc-feature.is-active .doc-feature-btn {
background: #fff;
color: #111;
}
.doc-feature.is-active .doc-feature-icon {
background: rgba(0, 0, 0, 0.08);
transform: rotate(45deg);
}
.doc-feature-detail {
max-width: 320px;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-6px);
transition: max-height 240ms var(--ease-out),
opacity 240ms var(--ease-out),
transform 240ms var(--ease-out),
margin-top 240ms var(--ease-out);
}
/* Detail opens only for the active pill AND only while the gallery
is in the "detail open" state (the close button collapses it). */
.documents-apple-gallery.is-detail-open .doc-feature.is-active .doc-feature-detail {
max-height: 220px;
opacity: 1;
transform: none;
margin-top: 12px;
}
.doc-feature-detail p {
max-width: 320px;
background: rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 18px 20px;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.5;
}
/* Media area */
.documents-media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 720px;
padding: 72px 96px;
}
.documents-media::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 58% 50%, rgba(45, 92, 255, 0.22), transparent 48%);
pointer-events: none;
}
.document-stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
.document-image {
max-height: 560px;
max-width: min(620px, 70%);
width: auto;
height: auto;
object-fit: contain;
border-radius: 12px;
background: #fff;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.08);
transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.document-image.doc-fade-out {
opacity: 0;
transform: scale(0.985);
}
.document-caption {
display: none;
max-width: 420px;
text-align: center;
color: rgba(255, 255, 255, 0.66);
font-size: 14px;
line-height: 1.5;
}
/* Close button — collapses only the active detail panel.
Hidden when the detail is already closed. The document image
always stays; there is no placeholder. */
.doc-close {
position: absolute;
top: 28px;
right: 28px;
z-index: 4;
width: 40px;
height: 40px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
transition: background 180ms var(--ease-out);
}
.documents-apple-gallery.is-detail-open .doc-close {
display: inline-flex;
}
.doc-close:hover {
background: rgba(255, 255, 255, 0.18);
}
/* Apple-style vertical navigation stack (up / down) */
.doc-nav-stack {
position: absolute;
z-index: 6;
left: 32px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.doc-nav-btn {
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.12);
color: #fff;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 180ms var(--ease-smooth),
transform 180ms var(--ease-smooth);
}
.doc-nav-btn:hover {
background: rgba(255, 255, 255, 0.18);
transform: scale(1.04);
}
.doc-nav-btn:active {
transform: scale(0.96);
}
/* Tablet / mobile — stacked, horizontal pill carousel */
@media (max-width: 900px) {
.documents-apple-gallery {
width: calc(100% - var(--page-pad) * 2);
border-radius: 28px;
min-height: auto;
display: flex;
flex-direction: column;
}
.documents-media {
order: 1;
min-height: 520px;
padding: 64px 18px 28px;
}
.documents-feature-rail {
order: 2;
width: 100%;
flex-direction: row;
justify-content: flex-start;
gap: 10px;
padding: 18px 16px 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.documents-feature-rail::-webkit-scrollbar {
display: none;
}
.doc-feature {
flex: 0 0 auto;
scroll-snap-align: start;
}
.doc-feature-btn {
min-width: 0;
height: 46px;
font-size: 14px;
}
.doc-feature-detail {
display: none;
}
.document-caption {
display: block;
}
.document-image {
max-width: 88%;
max-height: 420px;
}
.documents-feature-rail {
padding-left: 16px;
}
.doc-nav-stack {
left: 14px;
top: 200px;
bottom: auto;
transform: none;
}
.doc-nav-btn {
width: 38px;
height: 38px;
}
.doc-close {
top: 16px;
right: 16px;
}
}
/* ————————————————————————————————————————————
15. EXPERT SECTION
———————————————————————————————————————————— */
.expert-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 0;
min-height: 640px;
border-radius: 44px;
overflow: hidden;
background:
radial-gradient(circle at 78% 48%, rgba(35, 83, 190, 0.28), transparent 42%),
#071020;
}
.expert-glow {
display: none;
}
.expert-photo {
position: relative;
min-height: 640px;
overflow: hidden;
}
.expert-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
transform: scale(1.06);
}
.expert-photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 55%, #071020 100%);
}
.expert-info {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 48px;
}
.expert-glass {
position: relative;
align-self: center;
width: min(680px, 100%);
padding: 48px 52px;
border-radius: 32px;
background: rgba(5, 12, 28, 0.58);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
.expert-title {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: 12px;
}
.expert-name {
font-size: 17px;
font-weight: 500;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 22px;
}
.expert-points {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 13px;
margin-bottom: 30px;
}
.expert-points li {
position: relative;
padding-left: 22px;
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.74);
}
.expert-points li::before {
content: "→";
position: absolute;
left: 0;
color: #7aa6ee;
}
@media (max-width: 900px) {
.expert-card {
grid-template-columns: 1fr;
min-height: 0;
border-radius: 28px;
}
.expert-photo {
min-height: 0;
height: 520px;
}
.expert-photo img {
object-position: left center;
transform: none;
}
.expert-photo-overlay {
background: linear-gradient(180deg, transparent 55%, #071020 100%);
}
.expert-info {
padding: 20px;
}
.expert-glass {
width: 100%;
padding: 28px;
border-radius: 24px;
}
.card-group-logo img {
max-width: 220px;
max-height: 104px;
}
}
/* ————————————————————————————————————————————
16. PARTNERS GRID
———————————————————————————————————————————— */
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--grid-gap);
}
.card-partner {
padding: 24px 26px 28px;
border: 1px solid rgba(15, 23, 42, 0.07);
border-radius: 28px;
background: #fff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
display: flex;
flex-direction: column;
transition: transform 0.36s var(--ease-out), box-shadow 0.36s var(--ease-out), border-color 0.36s var(--ease-out);
}
.card-partner:hover {
transform: translateY(-6px);
border-color: rgba(37, 99, 235, 0.22);
box-shadow: 0 30px 64px -26px rgba(15, 23, 42, 0.24);
}
/* Framed logo plate */
.card-partner-logo {
position: relative;
height: 150px;
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
background: radial-gradient(120% 130% at 50% 0%, #ffffff, #f2f4f8);
border: 1px solid rgba(15, 23, 42, 0.06);
overflow: hidden;
transition: border-color 0.36s var(--ease-out), background 0.36s var(--ease-out);
}
.card-partner:hover .card-partner-logo {
border-color: rgba(37, 99, 235, 0.2);
background: radial-gradient(120% 130% at 50% 0%, #ffffff, #eef2fb);
}
/* external-link badge */
.card-partner-logo::after {
content: "↗";
position: absolute; top: 12px; right: 12px;
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; line-height: 1; color: #94a3b8;
background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
opacity: 0; transform: translateY(-4px);
transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.card-partner:hover .card-partner-logo::after { opacity: 1; transform: translateY(0); color: var(--color-primary); }
.card-partner-logo img {
max-width: 210px;
max-height: 100px;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.45s var(--ease-out);
}
.card-partner:hover .card-partner-logo img { transform: scale(1.05); }
.card-partner-cat {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-primary);
margin-bottom: 10px;
}
.card-partner-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: 0 0 auto; }
.card-partner h3 {
font-size: 19px;
font-weight: 650;
letter-spacing: -0.01em;
margin-bottom: 9px;
color: var(--color-dark);
}
.card-partner p {
font-size: 14px;
line-height: 1.6;
color: var(--color-muted);
flex: 1;
}
.card-partner .card-link {
margin-top: 18px;
gap: 8px;
}
.card-partner .card-link .arrow-icon { transition: transform 0.26s var(--ease-out); }
.card-partner:hover .card-link .arrow-icon { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.card-partner, .card-partner-logo, .card-partner-logo img, .card-partner .card-link .arrow-icon { transition: none; }
.card-partner:hover { transform: none; }
.card-partner:hover .card-partner-logo img { transform: none; }
}
/* ————————————————————————————————————————————
17. GROUP GRID
———————————————————————————————————————————— */
.group-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--grid-gap);
margin-top: 48px;
}
.card-group {
text-align: center;
min-height: 230px;
padding: 34px 32px;
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none; /* partner cards reuse this as links */
color: inherit;
}
.card-group:hover {
transform: translateY(-3px);
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}
.card-group-logo {
height: 134px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
}
.card-group-logo img {
max-width: 250px;
max-height: 116px;
width: auto;
height: auto;
object-fit: contain;
}
.card-group-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* partner cards reuse .card-group but keep a short description */
.card-group p {
margin-top: 8px;
max-width: 280px;
font-size: 14px;
line-height: 1.5;
color: var(--color-muted);
text-align: center;
}
.card-group-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
padding: 2px 10px;
border-radius: 999px;
background: rgba(42, 111, 219, 0.08);
}
.card-group h3 {
font-size: 16px;
font-weight: 600;
color: var(--color-dark);
}
/* ————————————————————————————————————————————
18. FINAL CTA
———————————————————————————————————————————— */
.section-cta {
padding: var(--section-y) var(--page-pad);
}
.cta-card {
position: relative;
max-width: var(--content-max);
margin-inline: auto;
padding: 80px 48px;
border-radius: 36px;
background: var(--color-dark);
text-align: center;
overflow: hidden;
}
.cta-glow {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(42, 111, 219, 0.2) 0%, transparent 70%);
animation: ctaDrift 16s var(--ease-soft) infinite;
pointer-events: none;
}
.cta-inner {
position: relative;
z-index: 1;
max-width: 680px;
margin-inline: auto;
}
.cta-inner h2 {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
}
.cta-inner p {
margin-top: 16px;
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.6);
}
.cta-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 36px;
}
.cta-meta {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px;
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
}
.cta-meta a {
color: rgba(255, 255, 255, 0.5);
transition: color var(--duration-fast) var(--ease-out);
}
.cta-meta a:hover {
color: #fff;
}
/* ————————————————————————————————————————————
19. FOOTER
———————————————————————————————————————————— */
.site-footer {
background: #070A14;
color: rgba(255, 255, 255, 0.55);
padding: 64px 0 40px;
}
.footer-grid {
display: flex;
flex-wrap: wrap;
gap: 48px;
}
.footer-brand {
flex: 1 1 280px;
}
.footer-logo-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.footer-brand-name {
font-size: 16px;
font-weight: 600;
color: #fff;
}
.footer-desc {
font-size: 14px;
line-height: 1.65;
max-width: 320px;
margin-bottom: 20px;
}
.footer-label {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 12px;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 48px;
flex: 1;
}
.footer-col {
display: flex;
flex-direction: column;
flex: 0 1 180px;
}
.footer-col a {
display: block;
padding: 5px 0;
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
transition: color var(--duration-fast) var(--ease-out);
}
.footer-col a:hover {
color: #fff;
}
/* Homepage footer: brand + Услуги + Компания + Контакты on one row.
Scoped to home only — other pages keep the 2-column flex layout. */
[data-page="home"] .footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px;
align-items: start;
}
[data-page="home"] .footer-nav { display: contents; }
@media (max-width: 860px) {
[data-page="home"] .footer-grid { display: flex; flex-wrap: wrap; gap: 32px; }
[data-page="home"] .footer-nav { display: flex; flex-wrap: wrap; gap: 40px; flex: 1 1 100%; }
}
.footer-legal {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.35);
}
/* ————————————————————————————————————————————
20. MODAL
———————————————————————————————————————————— */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--page-pad);
background: rgba(0, 0, 0, 0.5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-base) var(--ease-soft);
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal-sheet {
position: relative;
width: 100%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
background: var(--color-surface);
border-radius: 32px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
animation: sheetIn 0.4s var(--ease-smooth) both;
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: rgba(0, 0, 0, 0.05);
transition: background var(--duration-fast) var(--ease-out);
}
.modal-close:hover {
background: rgba(0, 0, 0, 0.1);
}
.modal-badge {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 16px;
}
.modal-question {
font-size: 15px;
line-height: 1.55;
color: var(--color-muted);
margin-bottom: 16px;
}
.modal-title {
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--color-dark);
margin-bottom: 12px;
}
.modal-text {
font-size: 15px;
line-height: 1.65;
color: var(--color-body);
margin-bottom: 20px;
}
.modal-benefits {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.modal-cta {
width: 100%;
justify-content: center;
}
/* ————————————————————————————————————————————
21. LANGUAGE SWITCHER
———————————————————————————————————————————— */
.lang-group {
display: flex;
gap: 4px;
}
.lang-btn {
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
border-radius: 999px;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.lang-btn:hover {
color: #fff;
}
.lang-btn.active {
color: var(--color-dark);
background: #fff;
}
/* ————————————————————————————————————————————
22. REVEAL ANIMATION
———————————————————————————————————————————— */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
will-change: opacity, transform;
transition:
opacity 0.8s var(--ease-smooth),
transform 0.8s var(--ease-smooth);
}
[data-reveal].visible {
opacity: 1;
transform: none;
will-change: auto;
}
/* ————————————————————————————————————————————
23. SUB-PAGE STYLES
———————————————————————————————————————————— */
.page-hero {
text-align: center;
padding: 160px var(--page-pad) 80px;
background: var(--color-dark);
color: #fff;
}
.page-hero .section-title {
color: #fff;
}
.page-hero .section-desc {
color: rgba(255, 255, 255, 0.6);
max-width: 640px;
margin-inline: auto;
}
.page-content {
background: var(--color-surface);
padding: var(--section-y) var(--page-pad);
}
.page-content-inner {
max-width: var(--content-max);
margin-inline: auto;
}
/* ————————————————————————————————————————————
24. FOCUS-VISIBLE
———————————————————————————————————————————— */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* ————————————————————————————————————————————
25. KEYFRAME ANIMATIONS
———————————————————————————————————————————— */
@keyframes heroUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes heroZoom {
from { transform: scale(1.06); }
to { transform: scale(1); }
}
@keyframes overlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sheetIn {
from {
opacity: 0;
transform: translateY(28px) scale(0.975);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes docFade {
from {
opacity: 0;
transform: scale(0.985);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes logoSwap {
from {
opacity: 0;
transform: translateY(8px);
filter: grayscale(1) blur(4px);
}
to {
opacity: 0.78;
transform: none;
filter: grayscale(1); /* stay grey — no colour flash on swap */
}
}
@keyframes menuIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes ctaDrift {
0% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); }
50% { transform: translate(-50%, -50%) translate3d(0, -3%, 0) scale(1.08); }
100% { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); }
}
@keyframes navDrop {
from {
opacity: 0;
transform: translate(-50%, -14px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* ————————————————————————————————————————————
26. RESPONSIVE – 1024px
———————————————————————————————————————————— */
@media (max-width: 1024px) {
:root {
--page-pad: 20px;
--section-y: 96px;
}
.expert-card {
min-height: auto;
}
}
/* ————————————————————————————————————————————
27. RESPONSIVE – 768px
———————————————————————————————————————————— */
@media (max-width: 768px) {
:root {
--page-pad: 16px;
--grid-gap: 16px;
--section-y: 76px;
}
.section-header {
flex-direction: column;
align-items: flex-start;
margin-bottom: 32px;
}
.hero {
min-height: auto;
padding: 0;
}
.hero-content {
padding-top: 112px;
padding-bottom: 56px;
}
.hero h1 {
font-size: clamp(2.25rem, 7vw, 3.25rem);
}
.hero-overlay {
background: linear-gradient(180deg, rgba(5, 8, 18, 0.82) 0%, rgba(5, 8, 18, 0.5) 45%, rgba(5, 8, 18, 0.86) 100%);
}
.trust-bar {
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
padding-bottom: 8px;
}
.trust-bar-item {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.14);
padding: 16px 0 0;
}
.footer-grid {
gap: 32px;
}
.page-hero {
padding: 120px var(--page-pad) 60px;
}
.logo-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ————————————————————————————————————————————
28. RESPONSIVE – 620px
———————————————————————————————————————————— */
@media (max-width: 620px) {
.hero-actions {
flex-direction: column;
align-items: stretch;
}
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
justify-content: center;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.card-service {
width: 300px;
}
.card-trust {
width: 280px;
}
.card-team {
width: 280px;
}
.modal-sheet {
padding: 28px;
border-radius: 24px;
}
.logo-grid {
grid-template-columns: repeat(2, 1fr);
}
.logo-slot img { height: 46px; }
.trust-bar {
grid-template-columns: repeat(2, 1fr);
}
}
/* ————————————————————————————————————————————
29. REDUCED MOTION
———————————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
[data-reveal] {
opacity: 1;
transform: none;
filter: none;
}
.hero-bg video {
animation: none;
}
.cta-glow {
animation: none;
}
}
/* ════════════════════════════════════════════════
30. AUDIT SERVICES PAGE (scoped under .aud)
════════════════════════════════════════════════ */
.aud {
--aud-bg: #0b0d12;
--aud-surface: #111318;
--aud-surface-2: #171a22;
--aud-line: rgba(255, 255, 255, 0.08);
--aud-line-strong: rgba(255, 255, 255, 0.14);
--aud-text: rgba(255, 255, 255, 0.74);
--aud-accent: #2563eb;
background: var(--aud-bg);
color: var(--aud-text);
}
.aud-wrap {
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--page-pad);
}
.aud section {
padding-block: clamp(64px, 8vw, 120px);
}
.aud h2 {
font-size: clamp(1.875rem, 4vw, 3rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
color: #fff;
}
.aud h3 {
color: #fff;
}
.aud-eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7aa6ee;
margin-bottom: 14px;
}
.aud-section-head {
max-width: 720px;
margin-bottom: clamp(36px, 5vw, 56px);
}
.aud-section-head p {
margin-top: 16px;
font-size: 17px;
line-height: 1.6;
}
.aud [data-reveal] {
transition-delay: var(--sd, 0s);
}
/* ---- Breadcrumb ---- */
.aud-breadcrumb {
margin-bottom: 28px;
}
.aud-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.aud-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.aud-breadcrumb li:not(:last-child)::after { content: "/"; color: rgba(255, 255, 255, 0.3); }
.aud-breadcrumb a { color: rgba(255, 255, 255, 0.6); transition: color var(--duration-fast) var(--ease-out); }
.aud-breadcrumb a:hover { color: #fff; }
/* ---- Hero ---- */
.aud-hero {
position: relative;
overflow: hidden;
padding-top: clamp(130px, 16vh, 180px) !important;
background:
radial-gradient(900px 520px at 82% 18%, rgba(37, 99, 235, 0.18), transparent 60%),
var(--aud-bg);
}
.aud-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(40px, 5vw, 72px);
align-items: center;
}
.aud-hero h1 {
font-size: clamp(2.5rem, 5.4vw, 4.75rem);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.04em;
color: #fff;
}
.aud-hero .aud-lead {
margin-top: 22px;
max-width: 560px;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
}
.aud-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 34px;
}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 14px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--aud-line-strong);
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
/* ---- Hero abstract visual (no photo) ---- */
.aud-visual {
position: relative;
display: flex;
justify-content: center;
animation: audFloat 7s var(--ease-soft) infinite;
}
.aud-report {
position: relative;
width: min(420px, 100%);
padding: 26px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--aud-line-strong);
box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.aud-report-top {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 18px;
border-bottom: 1px solid var(--aud-line);
}
.aud-report-top .aud-ic {
width: 40px; height: 40px; border-radius: 12px;
background: rgba(37, 99, 235, 0.18);
color: #9ec0ff;
display: flex; align-items: center; justify-content: center;
}
.aud-report-top b { color: #fff; font-size: 15px; display: block; }
.aud-report-top span { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.aud-report-check { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; }
.aud-report-check li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.aud-tick {
flex: 0 0 auto;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(34, 197, 94, 0.16); color: #4ade80;
display: flex; align-items: center; justify-content: center;
}
.aud-report-chart {
margin: 4px 0 18px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--aud-line);
padding: 14px;
}
.aud-report-chart svg { display: block; width: 100%; height: 72px; }
.aud-chart-line {
fill: none; stroke: #5b8def; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 600; stroke-dashoffset: 600;
}
[data-reveal].visible .aud-chart-line { animation: audDraw 1.6s var(--ease-out) 0.2s forwards; }
.aud-report-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.aud-pill-mini {
font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--aud-line);
}
.aud-shield {
position: absolute;
right: -14px; bottom: -16px;
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 16px;
background: rgba(11, 13, 18, 0.78);
border: 1px solid var(--aud-line-strong);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.aud-shield svg { color: #9ec0ff; }
.aud-shield b { color: #fff; font-size: 15px; display: block; line-height: 1.1; }
.aud-shield span { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
/* ---- Trust strip ---- */
.aud-trust-strip {
padding-block: 0 !important;
}
.aud-trust-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: 24px;
background: var(--aud-surface);
border: 1px solid var(--aud-line);
overflow: hidden;
}
.aud-trust-cell {
padding: 28px 26px;
border-left: 1px solid var(--aud-line);
}
.aud-trust-cell:first-child { border-left: none; }
.aud-trust-cell b {
display: block; color: #fff; font-weight: 700;
font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.02em;
}
.aud-trust-cell span { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
/* ---- Card grids ---- */
.aud-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 18px;
}
/* Section header with carousel arrows on the right */
.aud-head-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 36px;
}
@media (max-width: 620px) {
.aud-head-row { flex-direction: column; align-items: flex-start; }
}
/* Carousel cards on the dark audit page */
.aud .carousel-track .aud-card {
width: 340px;
min-height: 268px;
}
/* benefit cards reuse the SAME carousel — just give them a track width */
.aud .carousel-track .inv-benefit {
width: 360px;
align-self: stretch;
}
/* stat cards reuse the SAME carousel too */
.aud .carousel-track .itp-stat {
width: 300px;
}
.aud .carousel-arrow {
border-color: var(--aud-line-strong);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.aud .carousel-arrow:hover {
background: #fff;
color: #111827;
border-color: #fff;
}
.aud-card {
padding: 30px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--aud-line);
transition: transform 260ms var(--ease-out),
background 260ms var(--ease-out),
border-color 260ms var(--ease-out);
}
.aud-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.06);
border-color: var(--aud-line-strong);
}
.aud-card-ic {
width: 52px; height: 52px; border-radius: 15px;
display: flex; align-items: center; justify-content: center;
background: rgba(37, 99, 235, 0.14); color: #9ec0ff;
margin-bottom: 20px;
}
.aud-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.aud-card p { font-size: 14.5px; line-height: 1.6; }
/* ---- Checklist (что входит) ---- */
.aud-split {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(36px, 5vw, 72px);
align-items: start;
}
.aud-check-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.aud-check-item {
display: flex; gap: 14px; align-items: flex-start;
padding: 22px;
border-radius: 20px;
background: var(--aud-surface);
border: 1px solid var(--aud-line);
}
.aud-check-item .aud-ic-s {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(37, 99, 235, 0.14); color: #9ec0ff;
}
.aud-check-item b { color: #fff; font-size: 15px; display: block; margin-bottom: 4px; }
.aud-check-item span { font-size: 13.5px; line-height: 1.5; }
/* ---- Process timeline ---- */
/* Horizontal one-line timeline with scroll-fill */
.aud-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
}
.aud-timeline::before {
content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 2px;
background: var(--aud-line);
}
.aud-timeline::after {
content: ""; position: absolute; left: 28px; top: 28px; width: 0; height: 2px;
background: linear-gradient(90deg, #2563eb, #5b8def);
transition: width 1.4s var(--ease-out);
}
.aud-timeline.visible::after { width: calc(100% - 56px); }
.aud-step {
position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.aud-step-num {
flex: 0 0 auto; position: relative; z-index: 1;
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; color: #fff;
background: var(--aud-surface-2);
border: 1px solid var(--aud-line-strong);
}
.aud-step-body h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.aud-step-body p { font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
.aud-timeline { grid-template-columns: 1fr; gap: 0; }
.aud-timeline::before { left: 27px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
.aud-timeline::after { left: 27px; top: 12px; width: 2px; height: 0; transition: height 1.2s var(--ease-out); }
.aud-timeline.visible::after { width: 2px; height: calc(100% - 24px); }
.aud-step { flex-direction: row; gap: 22px; padding: 16px 0; }
.aud-step-body { padding-top: 6px; }
}
/* ---- Deliverables (aligned grid) ---- */
.aud-deliver {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.aud-deliver-item {
display: flex; align-items: center; gap: 14px;
min-height: 96px;
padding: 22px 24px; border-radius: 20px;
background: var(--aud-surface); border: 1px solid var(--aud-line);
transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.aud-deliver-item:hover { transform: translateY(-3px); border-color: var(--aud-line-strong); }
.aud-deliver-item .aud-tick { width: 26px; height: 26px; flex: 0 0 auto; }
.aud-deliver-item span { color: #fff; font-size: 15px; font-weight: 500; }
@media (max-width: 980px) {
.aud-deliver { grid-template-columns: repeat(2, 1fr); }
}
/* ---- FAQ (centered, card style, larger) ---- */
.aud-section-head--center {
text-align: center;
margin-inline: auto;
}
.aud-section-head--center p { margin-inline: auto; }
.aud-faq {
max-width: 880px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.aud-faq-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--aud-line);
border-radius: 22px;
padding: 4px 28px;
transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.aud-faq-item:hover { border-color: var(--aud-line-strong); background: rgba(255, 255, 255, 0.055); }
.aud-faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 26px 0; text-align: left;
font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; color: #fff;
background: none; border: none; cursor: pointer;
}
.aud-faq-q .aud-faq-plus {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
background: rgba(255, 255, 255, 0.06); border: 1px solid var(--aud-line);
transition: transform 240ms var(--ease-out), background 240ms var(--ease-out);
}
.aud-faq-q[aria-expanded="true"] .aud-faq-plus { transform: rotate(45deg); background: rgba(37,99,235,0.22); color: #9ec0ff; }
.aud-faq-a {
overflow: hidden; max-height: 0; opacity: 0;
transition: max-height 280ms var(--ease-out), opacity 280ms var(--ease-out);
}
.aud-faq-a p { padding: 0 0 26px; font-size: 16px; line-height: 1.65; }
/* ---- CTA ---- */
.aud-cta-card {
position: relative; overflow: hidden;
max-width: var(--content-max); margin-inline: auto;
padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px);
border-radius: 40px; text-align: center;
background:
radial-gradient(700px 420px at 50% 0%, rgba(37, 99, 235, 0.25), transparent 60%),
var(--aud-surface);
border: 1px solid var(--aud-line);
}
.aud-cta-card h2 { max-width: 760px; margin-inline: auto; }
.aud-cta-card p { margin: 18px auto 0; max-width: 600px; font-size: 17px; line-height: 1.6; }
.aud-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.aud-cta-meta { margin-top: 26px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 14px; }
.aud-cta-meta a { color: rgba(255, 255, 255, 0.6); transition: color var(--duration-fast) var(--ease-out); }
.aud-cta-meta a:hover { color: #fff; }
@keyframes audFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes audDraw { to { stroke-dashoffset: 0; } }
/* ---- Audit page responsive ---- */
@media (max-width: 980px) {
.aud-hero-grid { grid-template-columns: minmax(0, 1fr); }
.aud-hero-grid > * { min-width: 0; }
.aud-report { width: 100%; max-width: 460px; margin-inline: auto; }
.aud-visual { order: 2; margin-top: 8px; }
.aud-split { grid-template-columns: 1fr; }
.aud-trust-grid { grid-template-columns: repeat(2, 1fr); }
.aud-trust-cell:nth-child(odd) { border-left: none; }
.aud-trust-cell:nth-child(n+3) { border-top: 1px solid var(--aud-line); }
}
@media (max-width: 620px) {
/* Keep card grids two-up on phones */
.aud-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aud-check-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aud-deliver { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.aud-card { padding: 20px; border-radius: 22px; }
.aud-card-ic { width: 44px; height: 44px; margin-bottom: 14px; }
.aud-card h3 { font-size: 16px; }
.aud-card p { font-size: 13px; }
.aud-check-item { padding: 16px; flex-direction: column; gap: 12px; }
.aud-deliver-item { padding: 16px 18px; min-height: 0; }
/* Hero buttons hug their content, not full width */
.aud-actions .btn-primary, .aud-actions .btn-ghost { flex: 0 0 auto; }
.aud-shield { right: 8px; bottom: -10px; }
}
@media (prefers-reduced-motion: reduce) {
.aud-visual { animation: none; }
[data-reveal].visible .aud-chart-line { animation: none; stroke-dashoffset: 0; }
.aud-timeline::after { transition: none; }
}
/* ════════════════════════════════════════════════
31. PRICING — Apple-style feature gallery (audit page)
════════════════════════════════════════════════ */
.aud .pricing-section {
padding-block: clamp(88px, 10vw, 150px);
overflow: hidden;
}
.pricing-header {
width: calc(100% - var(--page-pad) * 2);
max-width: calc(var(--content-max) - var(--page-pad) * 2);
margin: 0 auto clamp(36px, 4vw, 52px);
}
.pricing-header h2 {
max-width: 980px;
font-size: clamp(2.25rem, 5vw, 4rem);
line-height: 1;
letter-spacing: -0.04em;
margin-top: 4px;
}
.pricing-intro {
margin-top: 18px;
max-width: 640px;
font-size: 17px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.68);
}
/* Gallery module */
.pgal {
position: relative;
width: calc(100% - var(--page-pad) * 2);
max-width: calc(var(--content-max) - var(--page-pad) * 2);
margin-inline: auto;
min-height: 660px;
display: grid;
grid-template-columns: 380px 1fr;
border-radius: 44px;
overflow: hidden;
background:
radial-gradient(820px 520px at 88% 12%, rgba(37, 99, 235, 0.16), transparent 60%),
#0b0d12;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Up/down nav stack */
.pgal-navstack {
position: absolute;
z-index: 6;
left: 28px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.pgal-navbtn {
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.08);
color: #fff;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 180ms var(--ease-smooth), transform 180ms var(--ease-smooth);
}
.pgal-navbtn:hover { background: rgba(255, 255, 255, 0.16); transform: scale(1.04); }
.pgal-navbtn:active { transform: scale(0.96); }
/* Left rail of plan pills */
.pgal-rail {
display: flex;
flex-direction: column;
gap: 8px;
padding: 40px 18px 40px 88px;
overflow-y: auto;
scrollbar-width: none;
}
.pgal-rail::-webkit-scrollbar { display: none; }
.pgal-group {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
padding: 14px 14px 4px;
}
.pgal-group:first-child { padding-top: 0; }
.pgal-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
padding: 13px 18px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.82);
font-size: 15px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
border-color 200ms var(--ease-out);
}
.pgal-pill small {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
}
.pgal-pill:hover { background: rgba(255, 255, 255, 0.09); }
.pgal-pill.is-active {
background: #fff;
border-color: #fff;
color: #111827;
}
.pgal-pill.is-active small { color: #2563eb; }
.pgal-pill.is-featured { border-color: rgba(80, 140, 255, 0.34); }
.pgal-pill.is-featured.is-active { background: #fff; }
/* Right stage — active plan detail */
.pgal-stage {
position: relative;
display: grid; /* stack every panel in ONE cell → stage height = tallest panel,
so it stays constant across tabs and the side arrows don't jump */
align-items: center;
padding: clamp(36px, 4vw, 64px);
}
.pgal-panel {
grid-area: 1 / 1; /* all panels share the same grid cell (overlap) */
width: 100%;
max-width: 620px;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.pgal-panel.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
animation: pgalIn 360ms var(--ease-out) both;
}
@keyframes pgalIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.pgal-label {
display: inline-block;
padding: 7px 13px;
border-radius: 999px;
background: rgba(37, 99, 235, 0.16);
color: #8fb8ff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pgal-panel h3 {
margin-top: 18px;
font-size: clamp(1.6rem, 2.6vw, 2.25rem);
line-height: 1.08;
letter-spacing: -0.03em;
color: #fff;
}
.pgal-price {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
margin-top: 22px;
}
.pgal-price span {
font-size: clamp(2.75rem, 4.4vw, 4rem);
line-height: 0.95;
letter-spacing: -0.05em;
font-weight: 700;
color: #fff;
}
.pgal-price small {
font-size: 15px;
color: rgba(255, 255, 255, 0.62);
}
.pgal-desc {
margin-top: 18px;
font-size: 17px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
}
.pgal-list {
margin: 22px 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 11px 24px;
}
.pgal-list li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.74);
}
.pgal-list li::before {
content: "";
position: absolute;
left: 0; top: 1px;
width: 17px; height: 17px;
border-radius: 50%;
background:
rgba(143, 184, 255, 0.16)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238fb8ff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E")
center / 10px no-repeat;
}
.pgal-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 9px 14px;
border-radius: 14px;
font-size: 13px;
font-weight: 600;
color: #cfe0ff;
background: rgba(37, 99, 235, 0.16);
border: 1px solid rgba(80, 140, 255, 0.28);
}
.pgal-cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 28px;
min-height: 52px;
padding: 0 30px;
border-radius: 999px;
background: #fff;
color: #111827;
font-size: 15px;
font-weight: 700;
transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.pgal-cta:hover { transform: translateY(-2px); background: #eef4ff; }
/* Tablet / mobile — rail becomes a horizontal pill carousel on top */
@media (max-width: 900px) {
.pgal {
display: flex;
flex-direction: column;
min-height: 0;
border-radius: 28px;
}
.pgal-navstack { display: none; }
.pgal-rail {
order: 1;
flex-direction: row;
gap: 10px;
padding: 18px 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pgal-group {
display: none;
}
.pgal-pill {
flex: 0 0 auto;
width: auto;
scroll-snap-align: start;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 10px 16px;
}
.pgal-stage {
order: 2;
padding: 28px 22px 32px;
}
.pgal-list {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.pgal-rail { scroll-behavior: auto; }
.pgal-panel.is-active { animation: none; }
}
/* ════════════════════════════════════════════════
32. AUDIT IT PARK PAGE (.itp, builds on .aud)
════════════════════════════════════════════════ */
.itp-phone {
display: inline-block;
margin-top: 22px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
transition: color var(--duration-fast) var(--ease-out);
}
.itp-phone:hover { color: #9ec0ff; }
/* Hero IT report visual */
.itp-report { position: relative; overflow: hidden; }
.itp-codegrid {
position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
background-image:
linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(circle at 70% 20%, #000, transparent 70%);
mask-image: radial-gradient(circle at 70% 20%, #000, transparent 70%);
}
.itp-report > * { position: relative; z-index: 1; }
.itp-status {
margin-left: auto;
align-self: center;
font-size: 11px; font-weight: 700;
padding: 5px 10px; border-radius: 999px;
color: #6ee7a8;
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.3);
white-space: nowrap;
}
.itp-report .aud-shield svg { color: #6ee7a8; }
/* IMPORTANT panel */
.itp-important {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(32px, 4vw, 56px);
padding: clamp(32px, 4vw, 56px);
border-radius: 36px;
background:
radial-gradient(700px 400px at 12% 12%, rgba(239, 68, 68, 0.12), transparent 55%),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.itp-important-text h2 { margin: 6px 0 14px; }
.itp-important-text p { font-size: 16px; line-height: 1.55; }
.itp-important-text .aud-actions { margin-top: 26px; }
.itp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.itp-steps li {
display: flex; gap: 16px; align-items: flex-start;
padding: 18px 20px; border-radius: 18px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.itp-steps li.is-warning {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.34);
}
.itp-step-n {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #fff;
background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(80, 140, 255, 0.34);
}
.itp-steps li.is-warning .itp-step-n { background: rgba(239, 68, 68, 0.24); border-color: rgba(239, 68, 68, 0.45); }
.itp-steps p { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
/* (TRUST block .itp-trust/.itp-logos removed — both pages now use the
shared .inv-logos "Нам доверяют" block, so this CSS was dead.) */
/* PRICING (3 cards) */
.itp-pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.itp-price {
position: relative;
display: flex; flex-direction: column;
min-height: 400px;
padding: clamp(34px, 3vw, 46px);
border-radius: 30px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--aud-line);
transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), background 260ms var(--ease-out);
}
.itp-price:hover { transform: translateY(-4px); border-color: var(--aud-line-strong); background: rgba(255, 255, 255, 0.07); }
.itp-price.is-featured {
background: radial-gradient(circle at 78% 0%, rgba(37, 99, 235, 0.28), transparent 50%), rgba(255, 255, 255, 0.06);
border-color: rgba(80, 140, 255, 0.4);
box-shadow: 0 30px 80px rgba(37, 99, 235, 0.12);
}
.itp-price-badge {
position: absolute; top: 22px; right: 22px;
font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: #cfe0ff; padding: 6px 12px; border-radius: 999px;
background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(80, 140, 255, 0.34);
}
.itp-price-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.2; }
.itp-price-sub { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.itp-price-val { margin-top: 36px; }
.itp-price-val span { display: block; font-size: clamp(2.75rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: #fff; }
.itp-price-val small { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.itp-price-cta {
margin-top: auto; padding-top: 26px;
display: inline-flex; align-items: center; justify-content: center;
}
.itp-price-cta {
margin-top: auto; min-height: 50px; padding: 0 24px; border-radius: 999px;
background: rgba(255, 255, 255, 0.1); border: 1px solid var(--aud-line-strong);
color: #fff; font-size: 15px; font-weight: 600;
transition: background var(--duration-fast) var(--ease-out);
}
.itp-price-cta:hover { background: rgba(255, 255, 255, 0.18); }
.itp-price.is-featured .itp-price-cta { background: #fff; color: #111827; border-color: #fff; }
.itp-price.is-featured .itp-price-cta:hover { background: #eef4ff; }
/* CALCULATOR + FORM */
.itp-calc {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(36px, 5vw, 64px);
align-items: start;
}
.itp-calc-intro h2 { margin: 6px 0 16px; }
.itp-calc-intro p { font-size: 15.5px; line-height: 1.6; margin-bottom: 14px; }
.itp-note {
display: inline-block; margin-top: 8px;
padding: 12px 16px; border-radius: 14px;
font-size: 14px; color: #9ec0ff;
background: rgba(37, 99, 235, 0.12); border: 1px solid rgba(80, 140, 255, 0.24);
}
.itp-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: clamp(26px, 3vw, 36px);
border-radius: 28px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--aud-line);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.itp-field { display: flex; flex-direction: column; gap: 7px; }
.itp-field--full { grid-column: 1 / -1; }
.itp-field label { font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.itp-field input,
.itp-field select,
.itp-field textarea {
width: 100%;
padding: 13px 15px;
border-radius: 13px;
font: inherit; font-size: 15px;
color: #fff;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--aud-line-strong);
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.itp-field textarea { resize: vertical; min-height: 84px; }
.itp-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.itp-field input::placeholder, .itp-field textarea::placeholder { color: rgba(255, 255, 255, 0.34); }
.itp-field input:focus,
.itp-field select:focus,
.itp-field textarea:focus {
outline: none;
border-color: rgba(80, 140, 255, 0.6);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
background: rgba(255, 255, 255, 0.06);
}
.itp-form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.itp-privacy { font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.itp-privacy a { color: #9ec0ff; }
/* STATS */
.itp-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.itp-stat {
padding: 28px 24px; border-radius: 24px;
background: var(--aud-surface); border: 1px solid var(--aud-line);
}
.itp-stat b {
display: block; font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 700;
letter-spacing: -0.03em; line-height: 1.05; color: #fff; margin-bottom: 12px;
}
.itp-stat span { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
/* SPECIALISTS */
.itp-team {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.itp-person {
padding: 26px; border-radius: 24px;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.itp-person:hover { transform: translateY(-3px); border-color: var(--aud-line-strong); }
.itp-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 16px; margin-bottom: 18px;
font-size: 18px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, var(--from, #1d4ed8), var(--to, #0b1024));
}
.itp-person h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.itp-person p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); margin-bottom: 14px; }
.itp-exp { font-size: 12px; font-weight: 600; color: #9ec0ff; padding: 5px 11px; border-radius: 999px; background: rgba(37, 99, 235, 0.14); }
/* FINAL CTA */
.itp-cta { text-align: center; }
.itp-phone--cta { margin-top: 16px; font-size: 22px; }
.itp-form--cta { max-width: 640px; margin: 28px auto 0; text-align: left; }
.itp-cta-meta { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.itp-cta-meta a { color: rgba(255, 255, 255, 0.7); font-weight: 500; }
.itp-cta-meta a:hover { color: #fff; }
.itp-cta-note { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.itp-cta-note a { color: #9ec0ff; }
/* IT Park responsive */
@media (max-width: 960px) {
.itp-important { grid-template-columns: 1fr; }
.itp-calc { grid-template-columns: 1fr; }
.itp-stats { grid-template-columns: repeat(2, 1fr); }
.itp-team { grid-template-columns: repeat(2, 1fr); }
/* Pricing becomes a horizontal scroll-snap carousel */
.itp-pricing {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 86vw);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 8px;
}
.itp-pricing::-webkit-scrollbar { display: none; }
.itp-price { scroll-snap-align: start; }
}
@media (max-width: 620px) {
.itp-form { grid-template-columns: 1fr; }
.itp-stats { grid-template-columns: repeat(2, 1fr); }
.itp-team { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════════════════════════════════════════
33. AUDIT INVESTORS PAGE (.inv, builds on .aud)
════════════════════════════════════════════════ */
/* Hero risk report */
.inv-report { position: relative; overflow: hidden; }
.inv-score { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.inv-score-ring {
--val: 78;
position: relative; flex: 0 0 auto;
width: 64px; height: 64px; border-radius: 50%;
display: grid; place-items: center;
background: conic-gradient(#22d3ee calc(var(--val) * 1%), rgba(255, 255, 255, 0.1) 0);
}
.inv-score-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #141822; }
.inv-score-ring span { position: relative; font-size: 18px; font-weight: 700; color: #fff; }
.inv-score-meta b { display: block; color: #fff; font-size: 15px; }
.inv-score-meta span { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.inv-flag {
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #fca5a5; background: rgba(239, 68, 68, 0.16);
}
.inv-check li:last-child { color: rgba(255, 255, 255, 0.82); }
/* Risk map */
.inv-riskmap {
display: grid;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
padding: clamp(28px, 4vw, 48px);
border-radius: 36px;
background:
radial-gradient(600px 460px at 22% 40%, rgba(34, 211, 238, 0.1), transparent 60%),
rgba(255, 255, 255, 0.03);
border: 1px solid var(--aud-line);
}
.inv-radar { display: flex; justify-content: center; }
.inv-radar svg { width: 100%; max-width: 320px; height: auto; }
.inv-radar-shape { fill: rgba(34, 211, 238, 0.12); stroke: rgba(34, 211, 238, 0.5); stroke-width: 1.5; }
.inv-sweep { transform-box: view-box; transform-origin: center; animation: invSweep 9s linear infinite; }
@keyframes invSweep { to { transform: rotate(360deg); } }
.inv-risk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.inv-risk {
padding: 22px; border-radius: 20px;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.inv-risk:hover { transform: translateY(-3px); border-color: var(--aud-line-strong); }
.inv-risk.is-flag { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); }
.inv-risk-ic {
display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px;
background: rgba(34, 211, 238, 0.14); color: #67e8f9;
}
.inv-risk.is-flag .inv-risk-ic { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.inv-risk h3 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.inv-risk p { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); }
/* Trust logos */
.inv-logos {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--aud-line);
border-radius: 22px;
overflow: hidden;
}
.inv-logo {
display: flex; align-items: center; justify-content: center;
padding: 26px 18px; background: var(--aud-surface);
transition: background var(--duration-base) var(--ease-out);
}
.inv-logo img { height: 36px; width: auto; max-width: 130px; object-fit: contain; opacity: 0.62; filter: brightness(0) invert(1); transition: opacity var(--duration-base) var(--ease-out); }
.inv-logo:hover { background: var(--aud-surface-2); }
.inv-logo:hover img { opacity: 1; }
/* Investor benefits */
.inv-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 18px;
}
.inv-benefit {
padding: 30px; border-radius: 26px;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.inv-benefit:hover { transform: translateY(-3px); border-color: var(--aud-line-strong); }
.inv-benefit h3 { font-size: 19px; font-weight: 600; color: #fff; line-height: 1.25; margin-bottom: 10px; }
.inv-benefit > p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }
.inv-benefit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.inv-benefit li {
position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.76);
}
.inv-benefit li::before {
content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
background:
rgba(34, 211, 238, 0.16)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E")
center / 10px no-repeat;
}
.inv-disclaimer {
margin-top: 22px; max-width: 760px;
font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.5);
}
.inv-benefits + .inv-disclaimer + .aud-actions { margin-top: 22px; }
/* Investor page responsive */
@media (max-width: 960px) {
.inv-riskmap { grid-template-columns: 1fr; }
.inv-radar { order: -1; }
.inv-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
.inv-risk-cards { grid-template-columns: 1fr; }
.inv-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.inv-sweep { animation: none; }
}
/* ════════════════════════════════════════════════
34. AUDIT COMPANIES PAGE (.akt, builds on .aud)
════════════════════════════════════════════════ */
/* Hero selection visual */
.akt-report { position: relative; overflow: hidden; }
.akt-cats { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.akt-cat-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.akt-cat-row span { font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.akt-cat-row i {
display: block; height: 6px; border-radius: 999px;
background: linear-gradient(90deg, #2563eb, #5b8def); width: var(--w);
background-color: rgba(255, 255, 255, 0.08);
}
.akt-mini-check { padding: 4px 0 16px !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.akt-mini-check li { font-size: 13px; }
.akt-bars { display: flex; align-items: flex-end; gap: 12px; height: 86px; padding-top: 6px; }
.akt-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.akt-bar i { width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; height: var(--h); background: linear-gradient(180deg, #5b8def, rgba(37, 99, 235, 0.4)); }
.akt-bar span { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
/* Category tabs */
.akt-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--aud-line); margin-bottom: 26px; }
.akt-tab {
padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
color: rgba(255, 255, 255, 0.7); background: none; border: none; cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.akt-tab:hover { color: #fff; }
.akt-tab.is-active { background: #fff; color: #111827; }
.akt-panel { display: none; }
.akt-panel.is-active { display: block; animation: pgalIn 320ms var(--ease-out) both; }
.akt-panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-bottom: 12px; }
.akt-panel > p { font-size: 16px; line-height: 1.6; max-width: 760px; margin-bottom: 22px; }
.akt-cat-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.akt-co {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 500; color: #fff;
background: var(--aud-surface); border: 1px solid var(--aud-line);
transition: transform 200ms var(--ease-out), background 200ms var(--ease-out),
border-color 200ms var(--ease-out);
}
.akt-co::after {
content: ""; width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.45;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.akt-co:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.09);
border-color: var(--aud-line-strong);
}
.akt-co:hover::after { opacity: 0.9; transform: translate(2px, -2px); }
.akt-co--self {
background: rgba(37, 99, 235, 0.14);
border-color: rgba(80, 140, 255, 0.4);
color: #fff; font-weight: 600;
}
.akt-co--self::after { display: none; }
.akt-co--self:hover { background: rgba(37, 99, 235, 0.22); }
.akt-co-tag {
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: #9ec0ff; padding: 3px 8px; border-radius: 999px; background: rgba(80, 140, 255, 0.2);
}
/* Scenario / mistake numbered cards */
.akt-scenario { position: relative; }
.akt-num { display: inline-block; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: #7aa6ee; margin-bottom: 14px; }
.akt-fit { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78) !important; margin-bottom: 14px; }
.akt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.akt-list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); }
.akt-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #7aa6ee; }
/* Checklist panel */
.akt-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.akt-checklist li {
position: relative; padding: 16px 18px 16px 50px;
font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.82);
border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
}
.akt-checklist li::before {
content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; border-radius: 7px;
background:
rgba(34, 197, 94, 0.16)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E")
center / 12px no-repeat;
}
/* Price factors */
.akt-factors { display: flex; flex-wrap: wrap; gap: 12px; }
.akt-factor {
padding: 13px 18px; border-radius: 14px; font-size: 14.5px; color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.akt-factor:hover { border-color: var(--aud-line-strong); background: rgba(255, 255, 255, 0.06); }
/* "When useful" carousel cards */
.aud .carousel-track .akt-mini {
width: 256px; min-height: 120px; flex-shrink: 0;
display: flex; align-items: flex-end;
padding: 24px; border-radius: 22px;
font-size: 17px; font-weight: 600; line-height: 1.25; color: #fff;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.aud .carousel-track .akt-mini:hover { transform: translateY(-3px); border-color: var(--aud-line-strong); }
@media (max-width: 768px) {
.akt-tabs { display: flex; width: 100%; }
.akt-tab { flex: 1; padding: 10px 12px; }
}
/* ════════════════════════════════════════════════
35. BOOKKEEPING PAGE (.bkp, builds on .aud)
════════════════════════════════════════════════ */
.bkp-report { position: relative; overflow: hidden; }
.bkp-check { padding: 4px 0 16px !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.bkp-check li { font-size: 13px; }
.bkp-control {
display: flex; align-items: center; gap: 8px;
margin: 4px 0 18px; padding: 12px 16px; border-radius: 16px;
background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.bkp-control span {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #fff;
background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(80, 140, 255, 0.34);
}
.bkp-control small { margin-left: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.bkp-quote {
max-width: var(--content-max);
margin: clamp(28px, 4vw, 44px) auto 0;
padding-inline: var(--page-pad);
font-size: clamp(1.1rem, 2vw, 1.5rem);
line-height: 1.4; font-weight: 500; letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.74); font-style: italic;
}
/* ════════════════════════════════════════════════
36. OUTSOURCING PAGE (.abx, builds on .aud .bkp)
════════════════════════════════════════════════ */
/* ---- Hero accounting dashboard ---- */
.abx-mods {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 18px 0 16px;
}
.abx-mod {
display: flex; flex-direction: column; gap: 7px;
padding: 11px 12px; border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--aud-line);
}
.abx-mod span { color: rgba(255, 255, 255, 0.6); }
.abx-mod .abx-mod-ic { color: #9ec0ff; }
.abx-mod b { color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.abx-mod i {
width: 7px; height: 7px; border-radius: 50%;
background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
align-self: flex-end; margin-top: -22px;
}
.abx-flow {
margin: 0 0 16px; padding: 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--aud-line);
}
.abx-flow-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 12px;
}
.abx-flow-head b { color: #fff; font-size: 12.5px; font-weight: 600; }
.abx-flow-head span { color: #4ade80; font-size: 12px; font-weight: 600; }
.abx-bars { display: flex; align-items: flex-end; gap: 7px; height: 56px; }
.abx-bars i {
flex: 1; border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, #5b8def, rgba(37, 99, 235, 0.35));
transform-origin: bottom; transform: scaleY(0.15);
transition: transform 0.8s var(--ease-out);
}
[data-reveal].visible .abx-bars i { transform: scaleY(var(--h, 0.5)); }
@media (prefers-reduced-motion: reduce) {
.abx-bars i { transition: none; transform: scaleY(var(--h, 0.5)); }
}
.abx-flags { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.abx-flags li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.82); }
.abx-flags .aud-tick { width: 20px; height: 20px; }
/* ---- Comparison: штатный vs аутсорсинг ---- */
.bkp-vs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: stretch;
}
.bkp-vs-card {
display: flex; flex-direction: column;
padding: 30px; border-radius: 28px;
background: var(--aud-surface);
border: 1px solid var(--aud-line);
}
.bkp-vs-card--hl {
background: linear-gradient(160deg, rgba(37, 99, 235, 0.16), rgba(34, 211, 238, 0.06));
border-color: rgba(80, 140, 255, 0.4);
box-shadow: 0 30px 90px rgba(13, 40, 110, 0.28);
}
.bkp-vs-tag {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
color: rgba(255, 255, 255, 0.66);
background: rgba(255, 255, 255, 0.05); border: 1px solid var(--aud-line);
}
.bkp-vs-card--hl .bkp-vs-tag { color: #bcd3ff; background: rgba(37, 99, 235, 0.2); border-color: rgba(80, 140, 255, 0.38); }
.bkp-vs-card h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 20px; color: #fff; }
.bkp-vs-list { display: flex; flex-direction: column; gap: 14px; }
.bkp-vs-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.bkp-vs-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.bkp-vs-mark--bad { background: rgba(248, 113, 113, 0.14); color: #f87171; }
.bkp-vs-mark--good { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.bkp-save { margin-top: auto; padding-top: 22px; }
.bkp-save-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bkp-save-row span { flex: 0 0 86px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.bkp-save-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bkp-save-bar i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1.1s var(--ease-out); }
[data-reveal].visible .bkp-save-bar i { width: var(--w, 50%); }
@media (prefers-reduced-motion: reduce) { .bkp-save-bar i { transition: none; width: var(--w, 50%); } }
.bkp-save-bar--staff i { background: linear-gradient(90deg, #f87171, #fb923c); }
.bkp-save-bar--bat i { background: linear-gradient(90deg, #2563eb, #22d3ee); }
.bkp-save-row b { flex: 0 0 auto; font-size: 12.5px; color: #fff; font-weight: 600; }
/* ---- Diagnostic glass card (15-minute check) ---- */
.abx-diag {
display: grid;
grid-template-columns: 1.3fr 0.9fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
padding: clamp(30px, 4vw, 52px);
border-radius: 32px;
background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid var(--aud-line-strong);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.abx-diag h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 14px; }
.abx-diag p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 480px; margin-bottom: 24px; }
.abx-clock {
position: relative; aspect-ratio: 1; width: min(220px, 100%); margin-inline: auto;
border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
background: radial-gradient(circle at 50% 38%, rgba(37, 99, 235, 0.22), rgba(255, 255, 255, 0.02));
border: 1px solid var(--aud-line-strong);
}
.abx-clock::before {
content: ""; position: absolute; inset: 10px; border-radius: 50%;
border: 2px solid rgba(80, 140, 255, 0.18);
border-top-color: #5b8def; border-right-color: #22d3ee;
animation: audSpin 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .abx-clock::before { animation: none; } }
.abx-clock b { position: relative; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; color: #fff; letter-spacing: -0.03em; }
.abx-clock span { position: relative; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
@keyframes audSpin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
.bkp-vs { grid-template-columns: 1fr; }
.abx-diag { grid-template-columns: 1fr; text-align: center; }
.abx-diag p { margin-inline: auto; }
}
@media (max-width: 560px) {
.abx-mods { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════════════════════════════════════════
37. RECOVERY PAGE (.vsx, builds on .aud .itp)
════════════════════════════════════════════════ */
/* ---- Hero before → after recovery visual ---- */
.vsx-ba {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: stretch;
margin: 18px 0 16px;
}
.vsx-col {
padding: 14px 13px; border-radius: 16px;
border: 1px solid var(--aud-line);
background: rgba(255, 255, 255, 0.03);
}
.vsx-col--before { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.22); }
.vsx-col--after { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.26); }
.vsx-col h4 {
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
margin-bottom: 12px; font-weight: 600;
}
.vsx-col--before h4 { color: #fca5a5; }
.vsx-col--after h4 { color: #4ade80; }
.vsx-col ul { display: flex; flex-direction: column; gap: 9px; }
.vsx-col li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.vsx-col li svg { flex: 0 0 auto; margin-top: 1px; }
.vsx-col--before li svg { color: #f87171; }
.vsx-col--after li svg { color: #4ade80; }
.vsx-arrow {
align-self: center; display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
color: #9ec0ff; background: rgba(37, 99, 235, 0.18); border: 1px solid rgba(80, 140, 255, 0.3);
}
.vsx-progress { margin: 4px 0 16px; }
.vsx-progress-head { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 8px; }
.vsx-progress-head span:first-child { color: rgba(255, 255, 255, 0.55); }
.vsx-progress-head b { color: #4ade80; font-weight: 700; }
.vsx-progress-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.vsx-progress-track i {
display: block; height: 100%; width: 0; border-radius: 999px;
background: linear-gradient(90deg, #f87171, #fb923c 35%, #22c55e);
transition: width 1.5s var(--ease-out) 0.2s;
}
[data-reveal].visible .vsx-progress-track i { width: 100%; }
@media (prefers-reduced-motion: reduce) { .vsx-progress-track i { transition: none; width: 100%; } }
@media (max-width: 460px) {
.vsx-ba { grid-template-columns: 1fr; }
.vsx-arrow { transform: rotate(90deg); margin: 2px auto; }
}
/* ---- Risk cards accent (когда восстанавливать) ---- */
.vsx-risk .aud-card-ic { background: rgba(251, 146, 60, 0.14); color: #fdba74; }
.vsx-risk .aud-card { position: relative; }
/* ---- Important note under pricing ---- */
.vsx-note {
max-width: var(--content-max);
margin: clamp(22px, 3vw, 34px) auto 0;
padding: 20px 24px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--aud-line);
border-left: 3px solid rgba(251, 146, 60, 0.5);
font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.74);
}
/* ---- Services hub: category cards + price list (.svc) ---- */
.svc-cat { position: relative; display: flex; flex-direction: column; }
.svc-cat .svc-cat-go {
margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600; color: #9ec0ff;
transition: gap var(--duration-base) var(--ease-out);
}
.svc-cat:hover .svc-cat-go { gap: 11px; }
.svc-cat .svc-cat-go .arrow-icon { transition: transform var(--duration-base) var(--ease-out); }
.svc-prices { display: grid; gap: 12px; }
.svc-price {
display: flex; justify-content: space-between; align-items: center; gap: 20px;
padding: 20px 26px; border-radius: 18px;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--aud-line);
transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.svc-price:hover { transform: translateX(4px); border-color: var(--aud-line-strong); background: rgba(255, 255, 255, 0.06); }
.svc-price b { color: #fff; font-size: 16px; font-weight: 600; }
.svc-price span {
flex: 0 0 auto; color: #bcd3ff; font-weight: 700; white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
.svc-price { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px; }
}
.svc-firstmark {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: #fbbf24; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32);
}
/* ---- Comparison card labels (provider types) ---- */
.aud-co-label {
display: inline-block;
font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
background: rgba(255, 255, 255, 0.05); border: 1px solid var(--aud-line);
}
.aud-co-label--hl { color: #bcd3ff; background: rgba(37, 99, 235, 0.2); border-color: rgba(80, 140, 255, 0.38); }
.aud-card[data-featured] {
background: linear-gradient(160deg, rgba(37, 99, 235, 0.16), rgba(34, 211, 238, 0.05));
border-color: rgba(80, 140, 255, 0.4);
}
/* ════════════════════════════════════════════════
38. PREMIUM GLOBAL LAYER (applies to every page)
════════════════════════════════════════════════ */
/* ---- Display type on headings ---- */
h1, h2, h3, h4,
.section-title,
.nav-brand-name,
.aud-hero h1,
.pgal-panel h3,
.itp-price-name,
.aud-report-top b {
font-family: var(--font-display);
font-optical-sizing: auto;
}
.aud-hero h1 { font-weight: 800; }
/* Balanced headlines, pretty paragraphs */
h1, h2, h3, .section-title, .aud-hero h1 { text-wrap: balance; }
p, .aud-lead, .section-desc { text-wrap: pretty; }
/* ---- Tabular figures: numbers read like a ledger (subject tie-in) ---- */
.itp-stat b, .itp-price-val span, .itp-price-val small,
[data-count], .aud-report *, .vsx-progress-head b,
.bkp-control span, .akt-num, .aud-step-num, .itp-step-n,
.pgal-price span, .pgal-pill small {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ---- Signature: ambient aurora + fine grain on dark heroes ---- */
.aud-hero { isolation: isolate; }
.aud-hero > .aud-wrap { position: relative; z-index: 2; }
.aud-hero::before {
content: "";
position: absolute; inset: -25% -10% auto -10%; height: 150%;
z-index: 0; pointer-events: none;
background:
radial-gradient(42% 50% at 78% 16%, rgba(37, 99, 235, 0.30), transparent 62%),
radial-gradient(38% 46% at 92% 40%, rgba(34, 211, 238, 0.16), transparent 64%),
radial-gradient(46% 52% at 60% 0%, rgba(59, 130, 246, 0.12), transparent 70%);
filter: blur(18px) saturate(115%);
animation: batAurora 22s var(--ease-soft) infinite;
will-change: transform;
}
.aud-hero::after {
content: "";
position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: 0.05; mix-blend-mode: soft-light;
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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes batAurora {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-5%, 4%, 0) scale(1.14); }
}
/* CTA card gets the same quiet glow */
.aud-cta-card { position: relative; overflow: hidden; isolation: isolate; }
.aud-cta-card::before {
content: ""; position: absolute; inset: auto -20% -60% -20%; height: 90%;
z-index: 0; pointer-events: none;
background: radial-gradient(50% 60% at 50% 100%, rgba(37, 99, 235, 0.20), transparent 70%);
filter: blur(14px);
}
.aud-cta-card > * { position: relative; z-index: 1; }
/* ---- Primary button: premium depth + light sweep on hover ---- */
.btn-primary {
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 10px 26px -10px rgba(42, 111, 219, 0.6);
}
.btn-primary::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
transform: translateX(-130%);
transition: transform 0.75s var(--ease-out);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:hover::before { transform: translateX(130%); }
.btn-primary .arrow-icon { transition: transform var(--duration-base) var(--ease-out); }
.btn-primary:hover .arrow-icon { transform: translateX(3px); }
/* ---- Refined scrollbar ---- */
html { scrollbar-width: thin; scrollbar-color: rgba(120, 132, 156, 0.45) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(120, 132, 156, 0.45);
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 132, 156, 0.7); background-clip: content-box; }
/* ---- Focus ring: visible on light and dark ---- */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 6px;
box-shadow: 0 0 0 5px rgba(42, 111, 219, 0.2);
}
@media (prefers-reduced-motion: reduce) {
.aud-hero::before { animation: none; }
.btn-primary::before { display: none; }
.btn-primary .arrow-icon { transition: none; }
}
/* ════════════════════════════════════════════════
39. ABOUT PAGE — LIGHT THEME (.abt)
════════════════════════════════════════════════ */
.abt { background: #ffffff; color: #1f2937; }
.abt-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-pad); }
.abt-section { padding-block: clamp(64px, 8vw, 120px); }
.abt-alt { background: #f5f5f7; }
/* ---- Full-screen image hero ---- */
.abt-hero {
position: relative;
min-height: 100svh;
display: flex; align-items: flex-end;
padding: clamp(120px, 18vh, 200px) 0 clamp(48px, 7vw, 96px);
overflow: hidden; isolation: isolate;
color: #fff;
}
.abt-hero-bg { position: absolute; inset: 0; z-index: 0; }
.abt-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.abt-hero::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(8, 11, 20, 0.55) 0%, rgba(8, 11, 20, 0.35) 40%, rgba(8, 11, 20, 0.86) 100%);
}
.abt-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-pad); }
.abt-hero .abt-eyebrow { color: #bcd3ff; }
.abt-hero h1 {
color: #fff; max-width: 16ch;
font-size: clamp(2.4rem, 5.4vw, 4.5rem); font-weight: 800;
line-height: 1.05; letter-spacing: -0.035em;
}
.abt-hero p { margin-top: 18px; max-width: 60ch; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.abt-hero .aud-actions { margin-top: 32px; }
.abt-hero-stats {
display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px);
margin-top: clamp(32px, 5vw, 56px); padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.abt-hero-stat b { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.abt-hero-stat span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
/* ---- Section heads (light) ---- */
.abt-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2563eb; margin-bottom: 14px; }
.abt-head { max-width: 780px; margin-bottom: clamp(34px, 5vw, 54px); }
.abt-head--center { margin-inline: auto; text-align: center; }
.abt-head h2 { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: #0b1024; }
.abt-head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: #6b7280; }
.abt-lead-big { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.5; font-weight: 500; color: #1f2937; max-width: 920px; }
.abt-note { margin-top: 22px; font-size: 16px; line-height: 1.65; color: #6b7280; max-width: 880px; }
/* ---- Facts & figures (light stat cards) ---- */
.abt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.abt-stat { padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); }
.abt-stat b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; color: #0b1024; font-variant-numeric: tabular-nums; line-height: 1; }
.abt-stat span { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; color: #6b7280; }
/* ---- Service holding cards (light) ---- */
.abt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.abt-card { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 34px); border-radius: 26px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); transition: transform 0.26s var(--ease-out), box-shadow 0.26s var(--ease-out); }
a.abt-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(15, 23, 42, 0.1); }
.abt-card-ic { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.1); color: #2563eb; margin-bottom: 20px; }
.abt-card h3 { font-size: 19px; font-weight: 650; color: #0b1024; margin-bottom: 10px; }
.abt-card p { font-size: 14.5px; line-height: 1.6; color: #6b7280; }
.abt-card .abt-go { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #2563eb; transition: gap 0.26s var(--ease-out); }
a.abt-card:hover .abt-go { gap: 11px; }
/* ---- Advantage quote ---- */
.abt-quote { max-width: 940px; margin-inline: auto; text-align: center; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.02em; color: #0b1024; text-wrap: balance; }
.abt-quote span { color: #2563eb; }
/* ---- Regulatory info ---- */
.abt-reg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.abt-reg-item { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); }
.abt-reg-item b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #2563eb; margin-bottom: 8px; font-weight: 700; }
.abt-reg-item span { font-size: 15px; line-height: 1.5; color: #1f2937; }
/* ---- Team (light) ---- */
.abt-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.abt-person { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out); }
.abt-person:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09); }
.abt-avatar { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--from, #2563eb), var(--to, #0b1024)); margin-bottom: 14px; }
.abt-person h3 { font-size: 15.5px; font-weight: 650; color: #0b1024; }
.abt-person p { margin-top: 4px; font-size: 13px; line-height: 1.45; color: #6b7280; }
.abt-exp { margin-top: 12px; display: inline-block; font-size: 12px; font-weight: 600; color: #2563eb; background: rgba(37, 99, 235, 0.08); padding: 4px 10px; border-radius: 999px; }
/* ---- Light ghost button ---- */
.abt-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 14px; font-size: 15px; font-weight: 600; color: #0b1024; background: #fff; border: 1px solid rgba(15, 23, 42, 0.14); transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.abt-ghost:hover { border-color: rgba(15, 23, 42, 0.3); transform: translateY(-1px); }
@media (max-width: 600px) {
.abt-hero { min-height: 92svh; }
.abt-hero-stats { gap: 18px 28px; }
}
/* ════════════════════════════════════════════════
40. FAQ PAGE — LIGHT THEME + VISUALS (.fq, builds on .abt)
════════════════════════════════════════════════ */
/* ---- Light FAQ accordion (reuses .aud-faq JS) ---- */
.abt .aud-faq-item { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); }
.abt .aud-faq-item:hover { border-color: rgba(15, 23, 42, 0.16); background: #fff; }
.abt .aud-faq-q { color: #0b1024; }
.abt .aud-faq-q .aud-faq-plus { background: rgba(15, 23, 42, 0.05); border: 1px solid rgba(15, 23, 42, 0.12); color: #0b1024; }
.abt .aud-faq-q[aria-expanded="true"] .aud-faq-plus { background: rgba(37, 99, 235, 0.12); color: #2563eb; border-color: rgba(37, 99, 235, 0.3); }
.abt .aud-faq-a p { color: #4b5563; }
.abt .aud-faq-a ul { padding: 0 0 26px; display: flex; flex-direction: column; gap: 9px; }
.abt .aud-faq-a li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.6; color: #4b5563; }
.abt .aud-faq-a li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; }
.abt .aud-faq-a li b { color: #0b1024; font-weight: 650; }
.abt .aud-faq-a p + p { padding-top: 0; }
.fq-cat { max-width: 880px; margin: clamp(32px, 5vw, 48px) auto 18px; }
.fq-cat:first-of-type { margin-top: 0; }
.fq-cat span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #2563eb; }
.fq-cat span i { width: 22px; height: 22px; border-radius: 7px; background: rgba(37, 99, 235, 0.1); display: inline-flex; align-items: center; justify-content: center; }
/* ---- Visualization cards ---- */
.fq-viz { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: stretch; }
.fq-vizcard { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); border-radius: 26px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); }
.fq-vizcard h3 { font-size: 19px; font-weight: 650; color: #0b1024; margin-bottom: 6px; }
.fq-vizcard .fq-vizcard-sub { font-size: 14px; color: #6b7280; margin-bottom: 24px; }
/* Comparison bars */
.fq-bars { display: flex; flex-direction: column; gap: 20px; margin-top: auto; }
.fq-bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fq-bar-head b { font-size: 14px; color: #0b1024; font-weight: 600; }
.fq-bar-head span { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fq-bar-track { height: 16px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); overflow: hidden; }
.fq-bar-fill { height: 100%; width: 0; border-radius: 999px; transition: width 1.2s var(--ease-out); }
[data-reveal].visible .fq-bar-fill { width: var(--w, 50%); }
.fq-bar-fill--staff { background: linear-gradient(90deg, #f87171, #fb923c); }
.fq-bar-fill--bat { background: linear-gradient(90deg, #2563eb, #22c55e); }
.fq-bar-head .fq-staff-val { color: #ef4444; }
.fq-bar-head .fq-bat-val { color: #16a34a; }
.fq-bars-note { margin-top: 20px; font-size: 14px; color: #6b7280; }
.fq-bars-note b { color: #16a34a; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fq-bar-fill { transition: none; width: var(--w, 50%); } }
/* Team vs one */
.fq-vs { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
.fq-vs-row { padding: 18px; border-radius: 18px; border: 1px solid rgba(15, 23, 42, 0.08); }
.fq-vs-row--staff { background: rgba(248, 113, 113, 0.05); }
.fq-vs-row--bat { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.18); }
.fq-vs-row p { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-bottom: 12px; }
.fq-vs-row--staff p { color: #ef4444; }
.fq-vs-row--bat p { color: #2563eb; }
.fq-vs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #0b1024; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); padding: 7px 12px; border-radius: 999px; }
.fq-chip svg { color: #2563eb; }
/* 4-step process strip (light) */
.fq-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fq-steps::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: rgba(15, 23, 42, 0.1); }
.fq-steps::after { content: ""; position: absolute; left: 26px; top: 26px; width: 0; height: 2px; background: linear-gradient(90deg, #2563eb, #22c55e); transition: width 1.4s var(--ease-out); }
[data-reveal].visible.fq-steps::after { width: calc(100% - 52px); }
.fq-step { position: relative; }
.fq-step b { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2563eb, #1e3a8a); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25); }
.fq-step h4 { margin: 16px 0 6px; font-size: 16px; font-weight: 650; color: #0b1024; }
.fq-step p { font-size: 13.5px; line-height: 1.5; color: #6b7280; }
@media (prefers-reduced-motion: reduce) { .fq-steps::after { transition: none; } }
@media (max-width: 860px) {
.fq-viz { grid-template-columns: 1fr; }
.fq-steps { grid-template-columns: 1fr; gap: 0; }
.fq-steps::before { left: 25px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; }
.fq-steps::after { left: 25px; top: 12px; width: 2px; height: 0; }
[data-reveal].visible.fq-steps::after { width: 2px; height: calc(100% - 24px); }
.fq-step { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; }
.fq-step h4 { margin-top: 4px; }
}
/* ════════════════════════════════════════════════
41. PAIN→SOLUTION PAGE — LIGHT INTERACTIVE (.pn, builds on .abt)
════════════════════════════════════════════════ */
/* Light hero — one confident accent + faint ledger grid (audit subject) */
.pn-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(132px, 16vh, 184px); }
.pn-hero::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
inset: -25% -10% auto -10%; height: 130%;
background: radial-gradient(52% 62% at 80% 6%, rgba(37, 99, 235, 0.16), transparent 60%);
}
.pn-hero::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(15, 23, 42, 0.038) 1px, transparent 1px),
linear-gradient(90deg, rgba(15, 23, 42, 0.038) 1px, transparent 1px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(78% 68% at 50% 0%, #000, transparent 76%);
mask-image: radial-gradient(78% 68% at 50% 0%, #000, transparent 76%);
}
.pn-hero > .abt-wrap { position: relative; z-index: 1; }
.pn-hero h1 .pn-accent { color: #2563eb; }
.pn-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pn-hero-tag {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 500; color: #475569;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgba(15, 23, 42, 0.1); padding: 8px 14px; border-radius: 999px;
}
.pn-hero-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; opacity: 0.72; }
/* Interactive board — left pains, right resolved solution */
.pn-board { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 22px; align-items: start; }
.pn-board .akt-tabs { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; background: none; border: none; border-radius: 0; }
.pn-pain {
position: relative; overflow: hidden;
display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left;
padding: 16px 18px 16px 20px; border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.1); background: #fff; color: #1f2937;
font-size: 14.5px; font-weight: 500; line-height: 1.4; cursor: pointer;
transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.pn-pain:hover { color: #0b1024; border-color: rgba(15, 23, 42, 0.2); transform: translateX(2px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); }
.pn-pain:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.pn-board .akt-tab.is-active { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.4); color: #0b1024; box-shadow: 0 10px 26px rgba(37, 99, 235, 0.1); }
.pn-pain-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(239, 68, 68, 0.1); color: #ef4444; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.pn-board .akt-tab.is-active .pn-pain-ic { background: rgba(22, 163, 74, 0.14); color: #16a34a; transform: scale(1.05); }
.pn-pain-ic .ic-check { display: none; }
.pn-board .akt-tab.is-active .pn-pain-ic .ic-q { display: none; }
.pn-board .akt-tab.is-active .pn-pain-ic .ic-check { display: block; }
.pn-pain-tx b { display: block; font-size: 11px; color: #94a3b8; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.pn-board .akt-tab.is-active .pn-pain-tx b { color: #2563eb; }
.pn-stage { position: sticky; top: 96px; }
.pn-board .akt-panel { position: relative; overflow: hidden; padding: clamp(30px, 3.4vw, 46px); border-radius: 26px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); }
.pn-board .akt-panel::after {
content: ""; position: absolute; right: -26px; bottom: -34px;
width: 208px; height: 208px; z-index: 0; pointer-events: none; opacity: 0.06;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.5v5.5c0 4.2-2.9 7.4-7 9-4.1-1.6-7-4.8-7-9V5.5z'/%3E%3Cpath d='M9.2 12l1.9 1.9 3.7-3.8'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pn-board .akt-panel > * { position: relative; z-index: 1; }
.pn-sol-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #16a34a; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); padding: 6px 13px; border-radius: 999px; margin-bottom: 18px; }
.pn-board .akt-panel h3 { color: #0b1024; font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.2; margin-bottom: 14px; }
.pn-board .akt-panel p { color: #4b5563; font-size: 16px; line-height: 1.7; max-width: none; margin-bottom: 0; }
.pn-sol-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(15, 23, 42, 0.08); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pn-sol-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #2563eb; transition: gap 0.2s var(--ease-out); }
.pn-sol-link:hover { gap: 11px; }
.pn-sol-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; border-radius: 4px; }
.pn-sol-note { font-size: 13.5px; color: #94a3b8; }
/* Reassurance strip (light) */
.pn-reassure { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pn-reassure-item { padding: 26px; border-radius: 22px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.pn-reassure-item:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); }
.pn-reassure-item .pn-r-ic { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.1); color: #2563eb; margin-bottom: 16px; }
.pn-reassure-item h3 { font-size: 17px; font-weight: 650; color: #0b1024; margin-bottom: 8px; }
.pn-reassure-item p { font-size: 14px; line-height: 1.55; color: #6b7280; }
@media (max-width: 860px) {
.pn-board { grid-template-columns: 1fr; }
.pn-stage { position: static; }
}
@media (prefers-reduced-motion: reduce) {
.pn-pain, .pn-pain::before, .pn-pain-ic, .pn-reassure-item, .pn-sol-link { transition: none; }
}
/* ════════════════════════════════════════════════
42. LEGAL / DOCUMENT PAGE — LIGHT (.lgl, builds on .abt)
════════════════════════════════════════════════ */
.lgl { max-width: 880px; margin-inline: auto; }
.lgl-meta { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: #6b7280; background: #fff; border: 1px solid rgba(15, 23, 42, 0.1); padding: 8px 14px; border-radius: 999px; margin-top: 18px; }
.lgl-meta svg { color: #2563eb; }
.lgl-toc { margin-top: 14px; padding: clamp(24px, 3vw, 34px); border-radius: 24px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); }
.lgl-toc p { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #2563eb; margin-bottom: 16px; }
.lgl-toc ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; }
.lgl-toc a { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: #1f2937; padding: 7px 0; transition: color 0.2s var(--ease-out); }
.lgl-toc a:hover { color: #2563eb; }
.lgl-toc a b { color: #94a3b8; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.lgl-sec { padding-top: clamp(28px, 4vw, 44px); scroll-margin-top: 96px; }
.lgl-sec h2 { font-size: clamp(1.25rem, 2.3vw, 1.65rem); font-weight: 700; letter-spacing: -0.02em; color: #0b1024; margin-bottom: 16px; }
.lgl-sec h2 b { color: #2563eb; font-weight: 700; margin-right: 10px; font-variant-numeric: tabular-nums; }
.lgl-sec p { font-size: 16px; line-height: 1.75; color: #4b5563; margin-bottom: 14px; }
.lgl-sec ul { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 16px; }
.lgl-sec li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.7; color: #4b5563; }
.lgl-sec li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; }
.lgl-sec b, .lgl-sec strong { color: #0b1024; font-weight: 650; }
.lgl-sec a { color: #2563eb; }
.lgl-contact { margin-top: clamp(34px, 4vw, 52px); padding: clamp(26px, 3vw, 38px); border-radius: 26px; background: #f5f5f7; border: 1px solid rgba(15, 23, 42, 0.08); }
.lgl-contact h3 { font-size: 18px; font-weight: 650; color: #0b1024; margin-bottom: 12px; }
.lgl-contact p { font-size: 15px; line-height: 1.75; color: #4b5563; margin: 0; }
.lgl-contact a { color: #2563eb; }
@media (max-width: 640px) { .lgl-toc ol { grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════
43. CLIENTS PAGE — DARK SHOWCASE (.cl, builds on .aud)
════════════════════════════════════════════════ */
/* ---- Animated logo marquee ---- */
.cl-marquee { position: relative; overflow: hidden; padding: 6px 0; }
.cl-marquee::before, .cl-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px); z-index: 2; pointer-events: none; }
.cl-marquee::before { left: 0; background: linear-gradient(90deg, var(--aud-bg), transparent); }
.cl-marquee::after { right: 0; background: linear-gradient(270deg, var(--aud-bg), transparent); }
.cl-row { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); width: max-content; animation: clScroll var(--dur, 46s) linear infinite; }
.cl-row + .cl-row { margin-top: 22px; }
.cl-row--rev { animation-direction: reverse; }
.cl-marquee:hover .cl-row { animation-play-state: paused; }
.cl-row img { height: 32px; width: auto; max-width: 140px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity 0.25s var(--ease-out); flex: 0 0 auto; }
.cl-row img:hover { opacity: 0.95; }
@keyframes clScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cl-row { animation: none; } }
/* ---- Countries strip ---- */
.cl-countries { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-country { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); background: var(--aud-surface); border: 1px solid var(--aud-line); padding: 10px 16px; border-radius: 999px; transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.cl-country:hover { border-color: var(--aud-line-strong); transform: translateY(-2px); }
.cl-flag { font-size: 18px; line-height: 1; }
/* ---- Directory grid (tabbed) ---- */
.cl-count { margin-left: 7px; font-size: 12px; font-weight: 700; opacity: 0.6; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
/* Client tile — ONE definition shared by the clients page (.cl-grid) and the
homepage wall (.clients-wall): dark frosted glass, grey logo → full colour
on hover. (Tiles can be links on the homepage → reset underline.) */
.cl-co {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
min-height: 122px; padding: 22px 14px; border-radius: 18px;
background: rgba(17, 19, 24, 0.72);
border: 1px solid rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
text-decoration: none; color: inherit;
transition: transform 0.24s var(--ease-out), border-color 0.24s var(--ease-out), background 0.24s var(--ease-out);
}
.cl-co:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.32); background: rgba(23, 26, 34, 0.85); }
.cl-co img {
height: 46px; width: auto; max-width: 160px; object-fit: contain;
filter: brightness(0) invert(0.72); /* every logo forced to the SAME light grey → all equally visible */
opacity: 0.9;
transition: filter 0.24s var(--ease-out), opacity 0.24s var(--ease-out);
}
.cl-co:hover img { filter: brightness(1) invert(0); opacity: 1; } /* own colour on hover (smooth) */
.cl-co span { font-size: 12px; color: rgba(255, 255, 255, 0.55); text-align: center; line-height: 1.3; }
/* Homepage wall — same tile, just a wider 7-up grid (full content width) */
.clients-wall { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 1100px) { .clients-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .clients-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .clients-wall { grid-template-columns: repeat(3, 1fr); } }
/* Mobile: bigger client logos in the .clients-wall tiles */
@media (max-width: 620px) {
.cl-co { min-height: 136px; gap: 12px; padding: 20px 10px; }
.cl-co img { height: 62px; max-width: 100%; }
}
/* Mobile: partner & group cards in 2 compact columns */
@media (max-width: 620px) {
.partners-grid,
.group-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card-group { padding: 22px 14px; min-height: 0; }
.card-group-logo { height: 104px; margin-bottom: 14px; }
.card-group-logo img { max-height: 88px; max-width: 100%; }
.card-group h3 { font-size: 15px; }
.card-group p { font-size: 12.5px; max-width: none; }
}
.cl .akt-panel { animation: none; }
.cl .akt-panel.is-active { animation: pgalIn 320ms var(--ease-out) both; }
/* ════════════════════════════════════════════════
44. CONTACTS PAGE — LIGHT (.cf, builds on .abt)
════════════════════════════════════════════════ */
.cf-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.cf-info { display: flex; flex-direction: column; gap: 14px; }
.cf-item { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
a.cf-item:hover { border-color: rgba(37, 99, 235, 0.4); transform: translateY(-2px); }
.cf-item-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.cf-item-tx { min-width: 0; }
.cf-item-tx b { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 700; margin-bottom: 6px; }
.cf-item-tx p { font-size: 15.5px; line-height: 1.55; color: #0b1024; font-weight: 500; margin: 0; }
.cf-item-tx p.cf-sub { font-size: 13.5px; color: #6b7280; font-weight: 400; margin-top: 4px; }
.cf-hours { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.cf-hours > div { display: flex; justify-content: space-between; gap: 18px; font-size: 14.5px; }
.cf-hours > div > span:first-child { color: #6b7280; }
.cf-hours > div > span:last-child { color: #0b1024; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-hours .is-closed span:last-child { color: #ef4444; }
.cf-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cf-social { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #0b1024; background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); padding: 10px 16px; border-radius: 999px; transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.cf-social:hover { border-color: rgba(37, 99, 235, 0.4); transform: translateY(-2px); color: #2563eb; }
/* Light form */
.cf-form { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 16px 44px rgba(15, 23, 42, 0.07); }
.cf-form h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; color: #0b1024; margin-bottom: 6px; }
.cf-form > p { font-size: 14.5px; color: #6b7280; margin-bottom: 24px; }
.cf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field--full { grid-column: 1 / -1; }
.cf-field label { font-size: 13px; font-weight: 600; color: #475569; }
.cf-field input, .cf-field textarea { font: inherit; font-size: 15px; color: #0b1024; background: #f5f5f7; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 14px; padding: 13px 16px; transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out); }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: #2563eb; background: #fff; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: #9ca3af; }
.cf-form-foot { grid-column: 1 / -1; margin-top: 4px; }
.cf-form-foot .btn-primary { width: 100%; justify-content: center; }
.cf-note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: #94a3b8; }
.cf-note a { color: #2563eb; }
/* Map */
.cf-map { border-radius: 28px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06); line-height: 0; }
.cf-map iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block; }
@media (max-width: 860px) {
.cf-grid { grid-template-columns: 1fr; }
.cf-fields { grid-template-columns: 1fr; }
}
/* (section 45 removed — its colour-accent system was fully overridden by
§46/§48 and only added dead CSS + a stray arrow-hover background.) */
/* ════════════════════════════════════════════════
46. UNIFIED CARD SYSTEM — one Apple-style shell (homepage)
════════════════════════════════════════════════ */
/* one consistent shell for every card variant */
.card-service, .card-solution, .card-trust, .card-team, .card-partner, .card-group {
border-radius: 24px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.07);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: transform 0.36s var(--ease-out), box-shadow 0.36s var(--ease-out), border-color 0.36s var(--ease-out);
}
.card-service:hover, .card-solution:hover, .card-trust:hover,
.card-team:hover, .card-partner:hover, .card-group:hover {
transform: translateY(-6px);
border-color: rgba(37, 99, 235, 0.2);
box-shadow: 0 28px 60px -26px rgba(15, 23, 42, 0.22);
}
/* single brand accent — drop the per-category colours + extra decoration */
.card-service[data-accent] { --ac: #2563eb; }
.card-service::before, .card-service::after { display: none; }
/* unified icon tiles (service + trust) */
.card-service .card-service-ic, .card-trust-icon {
width: 56px; height: 56px; border-radius: 16px;
background: rgba(37, 99, 235, 0.1); color: var(--color-primary);
border: 1px solid rgba(37, 99, 235, 0.16);
margin-bottom: 22px;
transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.card-service:hover .card-service-ic, .card-trust:hover .card-trust-icon {
background: linear-gradient(135deg, #2563eb, #1e3a8a); color: #fff; border-color: transparent;
transform: none;
}
/* unified titles */
.card-service .card-body h3, .card-trust h3, .card-partner h3, .card-group h3 {
font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--color-dark);
}
.card-service:hover .card-body h3 { color: var(--color-dark); }
/* unified category labels with accent dot */
.card-service-cat, .card-partner-cat {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--color-primary); background: none; padding: 0; border-radius: 0; margin-bottom: 10px;
}
.card-service-cat::before, .card-partner-cat::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: 0 0 auto;
}
/* unified links — simple arrow that slides on hover */
.card-link { color: var(--color-primary); font-weight: 600; gap: 8px; }
.card-service .card-link .arrow-icon {
width: auto; height: auto; background: transparent; border-radius: 0; display: inline-flex;
}
.card-link .arrow-icon, .card-solution-cta .arrow-icon { transition: transform 0.26s var(--ease-out); }
.card-service:hover .card-link .arrow-icon,
.card-partner:hover .card-link .arrow-icon,
.card-trust:hover .card-link .arrow-icon,
.card-group:hover .card-link .arrow-icon,
.card-solution:hover .card-solution-cta .arrow-icon { transform: translateX(4px); }
/* solution cards → light to match the family */
.card-solution { background: #fff; color: var(--color-dark); }
.card-solution-top p { color: var(--color-body); }
.card-solution-num {
color: var(--color-primary);
background: rgba(37, 99, 235, 0.1);
border: 1px solid rgba(37, 99, 235, 0.22);
}
@media (prefers-reduced-motion: reduce) {
.card-service, .card-solution, .card-trust, .card-team, .card-partner, .card-group { transition: none; }
.card-service:hover, .card-solution:hover, .card-trust:hover,
.card-team:hover, .card-partner:hover, .card-group:hover { transform: none; }
}
/* ════════════════════════════════════════════════
48. HOMEPAGE CARDS — one shared shell + Apple-glass capsules
Light theme. Cards use the §46 white shell and the §46
tinted icon tiles, so every block looks identical.
The dark .aud twin of this lands on the service pages.
════════════════════════════════════════════════ */
/* calm services field (the cards themselves carry the look, not the bg) */
#services {
position: relative;
background:
radial-gradient(60% 52% at 12% 2%, rgba(37, 99, 235, 0.05), transparent 60%),
#f5f5f7;
}
/* ── ONE Apple-style frosted-glass capsule for every label / badge ── */
.card-service-cat,
.card-partner-cat,
.card-group-label {
display: inline-flex;
align-items: center;
gap: 0;
width: fit-content;
margin-bottom: 12px;
padding: 6px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(37, 99, 235, 0.18);
color: var(--color-primary);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.card-service-cat::before,
.card-partner-cat::before { display: none; }
/* ════════════════════════════════════════════════
47. SERVICE CARD POLISH — kill the hollow middle, tidy the
header row, finish the card with a real footer rule.
════════════════════════════════════════════════ */
/* don't force a tall box that leaves a void; the tallest card in
the flex row still sets the shared height, but with far less slack */
.card-service {
min-height: 0;
padding: 30px 30px 24px;
}
/* header: icon (left) + category pill (right) aligned to the top,
no stray stacking margins left over from the unified pass */
.card-service .card-service-top {
align-items: flex-start;
margin-bottom: 22px;
}
.card-service .card-service-ic { margin-bottom: 0; }
.card-service .card-service-cat { margin-bottom: 0; margin-top: 6px; }
/* body: tighter, consistent rhythm between title and copy */
.card-service .card-body { gap: 10px; }
.card-service .card-body p { margin-top: 0; }
/* footer: hairline rule + full-width CTA pinned to the bottom,
so the leftover space reads as deliberate footer breathing room */
.card-service .card-link {
margin-top: auto;
padding-top: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.card-service .card-link .arrow-icon { margin-left: 0; }
/* ════════════════════════════════════════════════
49. DESIGN-SYSTEM PARITY — light twin of the dark
internal pages (.itp-person / .aud-card look).
Keeps the homepage in the same card language.
════════════════════════════════════════════════ */
/* — TEAM: clean white tile + small gradient square avatar + exp pill,
matching .itp-person on the dark pages (was a colour banner header) — */
.card-team {
width: 300px;
padding: 28px;
border-radius: 24px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
}
.card-team .card-team-avatar {
width: 56px; height: 56px;
border-radius: 16px;
margin: 0 0 18px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; color: #fff;
border: none;
background: linear-gradient(135deg, var(--team-from, #1d4ed8), var(--team-to, #0b1024));
}
.card-team .card-body {
padding: 0;
display: flex; flex-direction: column; align-items: flex-start;
}
.card-team .card-body h3 {
font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
color: var(--color-dark); margin-bottom: 6px;
}
.card-team .card-body p {
font-size: 13.5px; line-height: 1.5; color: var(--color-muted);
margin-bottom: 16px;
}
.card-team .card-team-years {
margin-top: auto;
font-size: 12px; font-weight: 600;
color: var(--color-primary);
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(37, 99, 235, 0.18);
padding: 5px 12px; border-radius: 999px;
}
.card-team:hover {
border-color: rgba(37, 99, 235, 0.20);
}
@media (max-width: 600px) {
.card-team { width: 280px; padding: 24px; }
}
/* ════════════════════════════════════════════════
50. SERVICE PAGES (dark) — Apple-glass capsules, dark twin
Same frosted-glass pill as the homepage (§48), themed for
dark surfaces. These classes live only on dark pages, so
restyling them globally is safe (no light-page bleed).
════════════════════════════════════════════════ */
.itp-exp,
.itp-price-badge {
background: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #cfe0ff;
}
/* ════════════════════════════════════════════════
§52. LEAD MODAL — one site-wide request popup
(DOM injected by main.js module 16; every "Оставить
заявку" trigger opens it). Light card on dimmed overlay
so it reads cleanly over both dark and light pages.
════════════════════════════════════════════════ */
.lead-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.lead-modal.is-open { opacity: 1; visibility: visible; }
.lead-overlay {
position: absolute;
inset: 0;
background: rgba(8, 11, 18, 0.62);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.lead-card {
position: relative;
width: 100%;
max-width: 408px;
background: #fff;
border-radius: 26px;
padding: 34px 32px 30px;
box-shadow: 0 30px 80px rgba(8, 11, 18, 0.4);
transform: translateY(14px) scale(0.98);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.lead-modal.is-open .lead-card { transform: none; }
.lead-close {
position: absolute;
top: 16px;
right: 16px;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: #f1f3f7;
color: #6b7280;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.lead-close:hover { background: #e6e9ef; color: #111; }
.lead-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
}
.lead-title {
margin: 10px 0 6px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f1115;
}
.lead-sub {
margin: 0 0 22px;
font-size: 14px;
line-height: 1.5;
color: #6b7280;
}
.lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-input {
width: 100%;
padding: 13px 16px;
font-size: 15px;
font-family: inherit;
color: #0f1115;
background: #f6f7f9;
border: 1px solid #e5e7eb;
border-radius: 13px;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lead-input::placeholder { color: #9aa1ad; }
.lead-input:focus {
outline: none;
background: #fff;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(42, 111, 219, 0.14);
}
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-submit {
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
font-family: inherit;
color: #fff;
background: var(--color-primary);
border: none;
border-radius: 13px;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
.lead-submit:hover { background: #2360c2; }
.lead-submit:active { transform: translateY(1px); }
.lead-submit .arrow-icon { transition: transform 0.2s ease; }
.lead-submit:hover .arrow-icon { transform: translateX(3px); }
.lead-or {
position: relative;
text-align: center;
margin: 20px 0 16px;
}
.lead-or::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e9ebef;
}
.lead-or span {
position: relative;
padding: 0 12px;
background: #fff;
font-size: 12px;
color: #9aa1ad;
}
.lead-msgrs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lead-msgr {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
font-size: 14px;
font-weight: 600;
border-radius: 13px;
text-decoration: none;
transition: transform 0.2s ease, filter 0.2s ease;
}
.lead-msgr svg { flex: 0 0 auto; }
.lead-msgr:hover { transform: translateY(-2px); filter: brightness(1.05); }
.lead-tg { color: #fff; background: #2aabee; }
.lead-wa { color: #fff; background: #25d366; }
.lead-done { text-align: center; padding: 16px 4px 6px; }
.lead-done-mark {
width: 56px;
height: 56px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(37, 211, 102, 0.12);
color: #1ea952;
font-size: 28px;
}
.lead-done h3 { margin: 0 0 6px; font-size: 22px; color: #0f1115; }
.lead-done p { margin: 0; font-size: 14px; color: #6b7280; }
@media (max-width: 480px) {
.lead-card { padding: 28px 20px 24px; border-radius: 22px; }
.lead-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
.lead-modal,
.lead-card { transition: opacity 0.2s ease; }
.lead-card { transform: none; }
}