:root {
--aa-dark: #07151d;
--aa-dark-2: #102731;
--aa-ink: #111821;
--aa-paper: #f4f6f0;
--aa-white: #ffffff;
--aa-lime: #a8f45b;
--aa-cyan: #42c9df;
--aa-coral: #ff7a5c;
--aa-yellow: #f5bd3f;
--aa-pink: #ff5f91;
--aa-mint: #62d6a7;
--aa-line-dark: rgba(232, 247, 238, 0.16);
--aa-line-light: rgba(17, 24, 33, 0.13);
--aa-container: min(1396px, calc(100% - 48px));
}
.ai-catalog-page {
background: var(--aa-paper);
color: var(--aa-ink);
}
.aa-catalog-main,
.aa-service-main {
position: relative;
z-index: 1;
overflow: clip;
background: var(--aa-paper);
}
.aa-site-nav {
width: min(1396px, calc(100% - 40px));
}
.aa-site-nav .nav-links {
backdrop-filter: none;
}
.ai-catalog-page .aa-site-nav.is-scrolled {
padding: 8px 10px 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
background: rgba(6, 24, 33, 0.92);
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(16px);
}
.nav-services-item {
position: static;
}
.nav-services-toggle {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 10px 18px;
border: 0;
border-radius: 5px;
color: #fff;
background: transparent;
font-size: 0.92rem;
font-weight: 500;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
cursor: pointer;
}
.nav-services-toggle:hover,
.nav-services-toggle[aria-expanded="true"],
.nav-services-toggle.active,
.ai-catalog-page .nav-services-toggle {
background: rgba(255, 255, 255, 0.12);
}
.nav-services-toggle.active,
.ai-catalog-page .nav-services-toggle {
box-shadow: inset 0 -3px 0 var(--aa-lime);
}
.nav-chevron {
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 180ms ease;
}
.nav-services-toggle[aria-expanded="true"] .nav-chevron {
transform: translateY(2px) rotate(225deg);
}
.nav-tools-menu {
position: relative;
color: #fff;
}
.nav-tools-menu summary {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 40px;
padding: 10px 12px;
border-radius: 5px;
list-style: none;
font-size: 0.86rem;
font-weight: 800;
cursor: pointer;
}
.nav-tools-menu summary::-webkit-details-marker { display: none; }
.nav-tools-menu summary:hover,
.nav-tools-menu[open] summary { color: var(--aa-lime); background: rgba(255, 255, 255, 0.1); }
.nav-tools-menu[open] .nav-chevron { transform: translateY(2px) rotate(225deg); }
.nav-tools-panel {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 310px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 8px;
color: var(--aa-ink);
background: #f8faf5;
box-shadow: 0 24px 60px rgba(2, 12, 18, 0.3);
}
.nav-tools-panel > span {
display: block;
margin-bottom: 9px;
color: #67747a;
font-size: 0.68rem;
font-weight: 900;
text-transform: uppercase;
}
.nav-tools-panel a {
display: grid;
gap: 5px;
padding: 14px;
border: 1px solid var(--aa-line-light);
border-radius: 6px;
color: var(--aa-ink);
background: #fff;
text-decoration: none;
}
.nav-tools-panel a:hover { border-color: #397653; }
.nav-tools-panel small { color: #67747a; font-size: 0.76rem; }
.services-mega {
position: absolute;
top: calc(100% + 12px);
left: 50%;
width: min(1396px, calc(100vw - 40px));
max-height: calc(100vh - 112px);
padding: 0 24px 24px;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 8px;
color: var(--aa-ink);
background: #f8faf5;
box-shadow: 0 28px 70px rgba(2, 12, 18, 0.32);
transform: translate(-50%, -8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.services-mega.is-open,
.nav-services-item:hover .services-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
transition-delay: 0s;
}
.services-mega::before {
content: "";
position: absolute;
right: 0;
bottom: 100%;
left: 0;
height: 14px;
}
.mega-head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 82px;
padding: 18px 0;
border-bottom: 1px solid var(--aa-line-light);
background: #f8faf5;
}
.mega-head div {
display: grid;
gap: 2px;
}
.mega-head span,
.aa-footer-label {
color: #65727a;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.mega-head b {
font-size: 1rem;
}
.mega-head > a,
.aa-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1d5334;
font-weight: 800;
}
.mega-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
padding-top: 22px;
}
.mega-column {
min-width: 0;
padding: 0 16px;
border-left: 1px solid var(--aa-line-light);
}
.mega-column:first-child {
padding-left: 0;
border-left: 0;
}
.mega-column:last-child {
padding-right: 0;
}
.mega-category {
display: flex;
align-items: center;
gap: 8px;
min-height: 34px;
color: var(--aa-ink) !important;
font-size: 0.87rem !important;
font-weight: 900 !important;
}
.mega-category-dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
background: var(--category-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--category-accent) 20%, transparent);
}
.mega-column ul {
display: grid;
gap: 2px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.mega-column ul a {
display: block;
padding: 7px 0;
color: #59656c !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
line-height: 1.25;
text-shadow: none !important;
}
.mega-column ul a:hover {
color: #153e2b !important;
background: transparent !important;
transform: none !important;
}
.aa-mobile-menu details {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.aa-mobile-menu summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 14px;
color: #fff;
font-weight: 900;
cursor: pointer;
list-style: none;
}
.aa-mobile-menu summary::-webkit-details-marker {
display: none;
}
.aa-mobile-menu details[open] summary span {
transform: rotate(45deg);
}
.mobile-service-groups {
display: grid;
gap: 18px;
padding: 6px 12px 18px;
}
.mobile-service-groups section {
display: grid;
gap: 1px;
}
.mobile-service-groups a {
padding: 7px 8px;
color: rgba(239, 248, 242, 0.72);
font-size: 0.82rem;
font-weight: 650;
}
.mobile-service-groups .mobile-category-link {
color: var(--aa-lime);
font-size: 0.9rem;
font-weight: 900;
}
.aa-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 18px;
color: var(--service-accent, var(--category-accent, var(--aa-lime)));
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0;
text-transform: uppercase;
}
.aa-kicker::before {
content: "";
width: 9px;
height: 9px;
background: currentColor;
box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 18%, transparent);
}
.aa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 7px;
font-weight: 800;
transition: transform 160ms ease, background 160ms ease;
}
.aa-btn:hover {
transform: translateY(-2px);
}
.aa-btn-primary {
color: #102019;
background: var(--service-accent, var(--category-accent, var(--aa-lime)));
box-shadow: 0 12px 28px rgba(5, 16, 21, 0.24);
}
.aa-btn-secondary {
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
background: rgba(6, 18, 23, 0.38);
backdrop-filter: blur(10px);
}
.aa-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.aa-catalog-hero,
.aa-category-hero,
.aa-service-hero {
position: relative;
min-height: 760px;
overflow: hidden;
color: #fff;
background-image: var(--hero-scene);
background-position: center;
background-size: cover;
}
.aa-category-hero {
min-height: 690px;
}
.aa-service-hero {
min-height: 790px;
}
.aa-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(4, 15, 22, 0.96) 0%, rgba(4, 15, 22, 0.82) 43%, rgba(4, 15, 22, 0.18) 75%, rgba(4, 15, 22, 0.08) 100%),
linear-gradient(0deg, rgba(4, 15, 22, 0.78), transparent 38%);
}
.aa-catalog-hero-copy,
.aa-category-hero-copy,
.aa-service-hero-copy {
position: relative;
z-index: 2;
width: var(--aa-container);
margin: 0 auto;
padding-top: 164px;
}
.aa-category-hero-copy {
padding-top: 150px;
}
.aa-service-hero-copy {
padding-top: 142px;
}
.aa-catalog-hero-copy > *,
.aa-category-hero-copy > *,
.aa-service-hero-copy > * {
max-width: 790px;
}
.aa-catalog-hero h1,
.aa-category-hero h1,
.aa-service-hero h1 {
margin: 0;
color: #fff;
font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
font-size: 72px;
font-weight: 520;
line-height: 1.02;
letter-spacing: 0;
text-wrap: balance;
}
.aa-category-hero h1 {
font-size: 68px;
}
.aa-service-hero h1 {
max-width: 940px;
font-size: 66px;
}
.aa-catalog-hero-copy > p,
.aa-category-hero-copy > p,
.aa-service-hero-copy > p {
max-width: 720px;
margin: 24px 0 0;
color: rgba(242, 249, 245, 0.86);
font-size: 1.18rem;
line-height: 1.55;
}
.aa-catalog-stats,
.aa-service-facts {
position: absolute;
z-index: 2;
right: max(24px, calc((100% - 1396px) / 2));
bottom: 42px;
left: max(24px, calc((100% - 1396px) / 2));
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid rgba(255, 255, 255, 0.28);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.aa-catalog-stats span,
.aa-service-facts span {
display: grid;
gap: 3px;
min-width: 0;
padding: 18px 22px;
border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.aa-catalog-stats span:first-child,
.aa-service-facts span:first-child {
border-left: 0;
}
.aa-catalog-stats b,
.aa-service-facts b {
color: #fff;
font-size: 1.65rem;
line-height: 1.1;
}
.aa-catalog-stats small,
.aa-service-facts small {
color: rgba(242, 249, 245, 0.68);
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
}
.aa-service-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aa-breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
color: rgba(246, 252, 248, 0.68);
font-size: 0.8rem;
font-weight: 700;
}
.aa-breadcrumbs a:hover {
color: #fff;
}
.aa-category-showcase {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
width: var(--aa-container);
margin: -18px auto 0;
}
.aa-category-showcase a {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 1.7;
min-height: 230px;
padding: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 8px;
color: #fff;
background:
linear-gradient(0deg, rgba(4, 16, 21, 0.94), rgba(4, 16, 21, 0.08) 72%),
var(--category-scene) center / cover;
box-shadow: 0 16px 34px rgba(8, 22, 28, 0.18);
transition: transform 180ms ease;
}
.aa-category-showcase a:hover {
transform: translateY(-5px);
}
.aa-category-showcase a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 5px;
background: var(--category-accent);
}
.aa-category-showcase span,
.aa-category-showcase b {
position: relative;
z-index: 1;
}
.aa-category-showcase span {
font-size: 1.14rem;
font-weight: 850;
line-height: 1.2;
}
.aa-category-showcase b {
margin-top: 5px;
color: rgba(242, 249, 245, 0.68);
font-size: 0.78rem;
}
.aa-home-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 40px;
}
.aa-home-category-grid a {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 1.7;
min-height: 230px;
padding: 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #fff;
background:
linear-gradient(0deg, rgba(4, 16, 21, 0.96), rgba(4, 16, 21, 0.05) 76%),
var(--category-scene) center / cover;
transition: transform 180ms ease, border-color 180ms ease;
}
.aa-home-category-grid a::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 4px;
background: var(--category-accent);
}
.aa-home-category-grid a:hover {
border-color: var(--category-accent);
transform: translateY(-4px);
}
.aa-home-category-grid span,
.aa-home-category-grid b {
position: relative;
z-index: 1;
}
.aa-home-category-grid span {
font-size: 1.14rem;
font-weight: 850;
line-height: 1.18;
}
.aa-home-category-grid b {
margin-top: 5px;
color: rgba(243, 250, 246, 0.64);
font-size: 0.78rem;
}
.aa-home-services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.aa-home-services-grid .aa-service-card {
background: rgba(248, 250, 245, 0.96);
}
.aa-home-catalog-link {
display: flex;
justify-content: center;
margin-top: 28px;
}
.aa-home-catalog-link .btn {
color: #102019;
background: var(--aa-lime);
}
.aa-home-review-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.aa-home-review-stats span {
display: grid;
gap: 4px;
padding: 17px 20px;
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.aa-home-review-stats span:first-child {
border-left: 0;
}
.aa-home-review-stats b {
color: var(--aa-lime);
font-size: 1.5rem;
}
.aa-home-review-stats small {
color: rgba(240, 249, 243, 0.62);
font-size: 0.68rem;
font-weight: 750;
text-transform: uppercase;
}
.reviews-section .review-shot small {
display: block;
margin-top: 14px;
color: rgba(240, 249, 243, 0.56);
font-size: 0.7rem;
}
.aa-home-reviews-link {
display: inline-flex;
gap: 8px;
margin-top: 26px;
color: var(--aa-lime);
font-size: 0.88rem;
font-weight: 850;
}
.services-section,
.build-section,
.results-section,
.cases-section,
.reviews-section,
.contact-section {
scroll-margin-top: 92px;
}
.aa-catalog-sections,
.aa-category-services,
.aa-flow-section,
.aa-service-details,
.aa-gallery-section,
.aa-reviews-proof,
.aa-faq-section,
.aa-related-section {
width: var(--aa-container);
margin: 0 auto;
}
.aa-catalog-sections {
padding: 86px 0 50px;
}
.aa-category-band {
padding: 76px 0;
border-top: 1px solid var(--aa-line-light);
scroll-margin-top: 100px;
}
.aa-category-band:first-child {
border-top: 0;
}
.aa-band-head,
.aa-section-heading-row,
.aa-reviews-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
}
.aa-band-head {
margin-bottom: 34px;
}
.aa-band-head > div {
max-width: 780px;
}
.aa-section-index {
display: inline-block;
min-width: 38px;
margin-bottom: 14px;
padding: 5px 7px;
color: var(--aa-dark);
background: var(--category-accent);
font-size: 0.72rem;
font-weight: 900;
text-align: center;
}
.aa-band-head h2,
.aa-section-heading h2,
.aa-deliverables h2,
.aa-proof-lead h2,
.aa-brief-copy h2,
.aa-reviews-head h2 {
margin: 0;
color: var(--aa-ink);
font-size: 44px;
font-weight: 650;
line-height: 1.08;
letter-spacing: 0;
text-wrap: balance;
}
.aa-band-head p {
max-width: 720px;
margin: 16px 0 0;
color: #5a676d;
font-size: 1rem;
}
.aa-service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.aa-service-card {
position: relative;
min-width: 0;
min-height: 310px;
border: 1px solid var(--aa-line-light);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 14px 30px rgba(18, 38, 44, 0.06);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.aa-service-card:hover {
z-index: 1;
border-color: color-mix(in srgb, var(--service-accent) 68%, #35424a);
box-shadow: 0 20px 38px rgba(18, 38, 44, 0.12);
transform: translateY(-4px);
}
.aa-service-card::before {
content: "";
position: absolute;
top: -1px;
right: 22px;
left: 22px;
height: 4px;
background: var(--service-accent);
}
.aa-service-card-link {
display: flex;
flex-direction: column;
min-height: 308px;
padding: 28px;
}
.aa-service-card-category {
color: #6c797f;
font-size: 0.7rem;
font-weight: 850;
text-transform: uppercase;
}
.aa-service-card h3 {
margin: 18px 0 0;
color: var(--aa-ink);
font-size: 1.45rem;
font-weight: 780;
line-height: 1.15;
letter-spacing: 0;
}
.aa-service-card p {
margin: 14px 0 24px;
color: #5a676d;
font-size: 0.92rem;
line-height: 1.52;
}
.aa-service-card-meta {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
gap: 12px;
align-items: end;
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--aa-line-light);
}
.aa-service-card-meta span {
display: grid;
gap: 2px;
min-width: 0;
}
.aa-service-card-meta small {
color: #7a858a;
font-size: 0.66rem;
}
.aa-service-card-meta b {
color: var(--aa-ink);
overflow-wrap: anywhere;
font-size: 0.82rem;
}
.aa-service-card-meta i {
display: grid;
place-items: center;
width: 36px;
height: 36px;
color: var(--aa-dark);
background: var(--service-accent);
font-style: normal;
font-weight: 900;
}
.aa-process-band {
position: relative;
padding: 88px max(24px, calc((100% - 1396px) / 2));
color: #fff;
background:
linear-gradient(90deg, rgba(6, 22, 29, 0.98), rgba(12, 42, 48, 0.95)),
repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, 0.04) 40px),
repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.04) 40px);
}
.aa-process-band .aa-section-heading {
max-width: 760px;
margin-bottom: 42px;
}
.aa-process-band .aa-section-heading h2 {
color: #fff;
}
.aa-process-track {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
max-width: 1396px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.aa-process-track::before {
content: "";
position: absolute;
top: 23px;
right: 10%;
left: 10%;
height: 2px;
background: linear-gradient(90deg, var(--category-accent, var(--service-accent, var(--aa-lime))), var(--aa-cyan), var(--aa-yellow), var(--aa-coral));
}
.aa-process-track li {
position: relative;
min-width: 0;
padding: 0 28px;
border-left: 1px solid var(--aa-line-dark);
}
.aa-process-track li:first-child {
padding-left: 0;
border-left: 0;
}
.aa-process-track li:last-child {
padding-right: 0;
}
.aa-process-track li > span {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 2px solid rgba(255, 255, 255, 0.36);
color: #102019;
background: var(--category-accent, var(--service-accent, var(--aa-lime)));
font-size: 0.78rem;
font-weight: 950;
}
.aa-process-track h3 {
margin: 22px 0 9px;
color: #fff;
font-size: 1.08rem;
}
.aa-process-track p {
margin: 0;
color: rgba(234, 246, 239, 0.68);
font-size: 0.86rem;
}
.aa-category-services {
padding: 88px 0;
}
.aa-section-heading {
max-width: 820px;
margin-bottom: 36px;
}
.aa-section-heading-row {
max-width: none;
}
.aa-profile-proof {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 70px;
padding: 90px max(24px, calc((100% - 1396px) / 2));
color: #fff;
background: #10232c;
}
.aa-proof-lead h2 {
color: #fff;
}
.aa-proof-lead p {
max-width: 650px;
margin: 20px 0 0;
color: rgba(235, 247, 240, 0.7);
}
.aa-proof-numbers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--aa-line-dark);
border-left: 1px solid var(--aa-line-dark);
}
.aa-proof-numbers span {
display: grid;
gap: 5px;
min-height: 136px;
padding: 24px;
border-right: 1px solid var(--aa-line-dark);
border-bottom: 1px solid var(--aa-line-dark);
}
.aa-proof-numbers b {
color: var(--aa-lime);
font-size: 2rem;
}
.aa-proof-numbers small {
color: rgba(235, 247, 240, 0.68);
font-size: 0.76rem;
font-weight: 750;
text-transform: uppercase;
}
.aa-evidence-strip {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
width: var(--aa-container);
margin: 0 auto;
padding: 28px 0;
border-bottom: 1px solid var(--aa-line-light);
}
.aa-evidence-mark {
display: grid;
place-items: center;
width: 52px;
height: 52px;
color: #102019;
background: var(--service-accent);
font-size: 1.25rem;
font-weight: 900;
}
.aa-evidence-strip div {
display: grid;
gap: 3px;
}
.aa-evidence-strip small,
.aa-input-note small,
.aa-selected-service small,
.aa-panel-label {
color: #748087;
font-size: 0.72rem;
font-weight: 850;
text-transform: uppercase;
}
.aa-evidence-strip p {
margin: 0;
color: #34434a;
font-weight: 750;
}
.aa-evidence-strip > a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1c5736;
font-weight: 850;
}
.aa-flow-section {
padding: 94px 0;
}
.aa-flow-map {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.aa-flow-map li {
position: relative;
display: flex;
align-items: center;
gap: 16px;
min-height: 96px;
padding: 20px;
border: 1px solid var(--aa-line-light);
background: #fff;
}
.aa-flow-map li:not(:last-child)::after {
content: "→";
position: absolute;
right: -14px;
z-index: 2;
display: grid;
place-items: center;
width: 26px;
height: 26px;
color: var(--aa-dark);
background: var(--service-accent);
font-weight: 950;
}
.aa-flow-map span {
color: var(--service-accent);
font-size: 0.76rem;
font-weight: 950;
}
.aa-flow-map b {
min-width: 0;
font-size: 1rem;
}
.aa-service-details {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
gap: 68px;
padding: 30px 0 104px;
}
.aa-deliverables ul {
display: grid;
gap: 0;
margin: 34px 0 0;
padding: 0;
border-top: 1px solid var(--aa-line-light);
list-style: none;
}
.aa-deliverables li {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 14px;
align-items: center;
min-height: 66px;
padding: 12px 0;
border-bottom: 1px solid var(--aa-line-light);
color: #344149;
font-size: 1rem;
font-weight: 700;
}
.aa-deliverables li span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
color: #102019;
background: var(--service-accent);
font-size: 0.78rem;
font-weight: 950;
}
.aa-audience-panel {
align-self: start;
padding: 30px;
border: 1px solid var(--aa-line-light);
border-radius: 8px;
background:
linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
repeating-linear-gradient(0deg, transparent 0 23px, rgba(17, 24, 33, 0.08) 24px);
}
.aa-audience-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 18px;
}
.aa-audience-grid span {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: 8px;
align-items: center;
min-height: 58px;
padding: 10px;
border: 1px solid var(--aa-line-light);
background: #f7f9f4;
font-size: 0.8rem;
font-weight: 800;
}
.aa-audience-grid i {
color: var(--service-accent);
font-size: 0.68rem;
font-style: normal;
font-weight: 950;
}
.aa-input-note {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--aa-line-light);
}
.aa-input-note p {
margin: 7px 0 0;
color: #3d4b51;
font-size: 0.92rem;
}
.aa-gallery-section,
.aa-reviews-proof,
.aa-faq-section,
.aa-related-section {
padding: 98px 0;
}
.aa-gallery-note {
color: #66737a;
font-size: 0.8rem;
font-weight: 700;
}
.aa-gallery-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: 210px;
gap: 10px;
}
.aa-gallery-grid.is-single {
grid-auto-rows: auto;
}
.aa-gallery-grid figure {
position: relative;
grid-column: span 4;
min-width: 0;
margin: 0;
overflow: hidden;
border-radius: 8px;
background: #d9e3dc;
}
.aa-gallery-grid button {
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
border: 0;
border-radius: inherit;
background: #d9e3dc;
cursor: zoom-in;
}
.aa-gallery-grid figure:first-child,
.aa-gallery-grid figure:nth-child(5) {
grid-column: span 6;
grid-row: span 2;
}
.aa-gallery-grid figure:only-child {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 8 / 5;
}
.aa-gallery-grid figure:nth-last-child(2):first-child,
.aa-gallery-grid figure:nth-last-child(2):first-child ~ figure {
grid-column: span 6;
grid-row: span 2;
}
.aa-gallery-grid.is-seo-showcase {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
}
.aa-gallery-grid.is-seo-showcase figure,
.aa-gallery-grid.is-seo-showcase figure:first-child {
grid-column: span 1;
grid-row: auto;
aspect-ratio: 8 / 5;
}
.aa-gallery-grid.is-seo-showcase figure:first-child {
grid-column: 1 / -1;
}
.aa-gallery-grid figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 36px 18px 16px;
color: #fff;
background: linear-gradient(0deg, rgba(3, 14, 18, 0.92), transparent);
font-size: 0.82rem;
font-weight: 750;
line-height: 1.38;
pointer-events: none;
}
.aa-gallery-grid img {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: auto;
transition: transform 220ms ease;
}
.aa-gallery-grid button:hover img {
transform: scale(1.035);
}
.aa-video-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
.aa-video-grid figure {
margin: 0;
overflow: hidden;
border-radius: 8px;
background: #10232c;
}
.aa-video-grid video {
display: block;
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
background: #07151d;
}
.aa-video-grid figcaption {
min-height: 52px;
padding: 13px 15px;
color: #fff;
font-size: 0.82rem;
font-weight: 750;
line-height: 1.35;
}
.aa-gallery-dialog {
width: min(1100px, calc(100% - 32px));
max-height: calc(100% - 32px);
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 8px;
background: #07151d;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.aa-gallery-dialog::backdrop {
background: rgba(2, 10, 14, 0.88);
backdrop-filter: blur(8px);
}
.aa-gallery-dialog img {
display: block;
width: 100%;
max-height: calc(100vh - 64px);
object-fit: contain;
}
.aa-gallery-dialog button {
position: absolute;
top: 18px;
right: 18px;
z-index: 2;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 50%;
color: #fff;
background: rgba(6, 18, 23, 0.84);
font-size: 1.55rem;
cursor: pointer;
}
.aa-reviews-proof {
border-top: 1px solid var(--aa-line-light);
}
.aa-rating-lockup {
display: flex;
align-items: center;
gap: 14px;
}
.aa-rating-lockup b {
color: #255c39;
font-size: 3rem;
line-height: 1;
}
.aa-rating-lockup span {
color: #67747a;
font-size: 0.76rem;
font-weight: 750;
}
.aa-review-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 38px 0 28px;
}
.aa-review-grid article {
display: flex;
flex-direction: column;
min-height: 270px;
padding: 28px;
border: 1px solid var(--aa-line-light);
border-radius: 8px;
background: #fff;
}
.aa-review-stars {
color: #e1a520;
letter-spacing: 0;
}
.aa-review-grid p {
margin: 22px 0;
color: #35434a;
font-size: 0.98rem;
line-height: 1.58;
}
.aa-review-grid footer {
display: grid;
gap: 3px;
margin-top: auto;
padding-top: 17px;
border-top: 1px solid var(--aa-line-light);
}
.aa-review-grid footer span {
color: #768188;
font-size: 0.74rem;
}
.aa-faq-section {
display: grid;
grid-template-columns: minmax(240px, 0.42fr) minmax(0, 0.58fr);
gap: 80px;
border-top: 1px solid var(--aa-line-light);
}
.aa-faq-list {
border-top: 1px solid var(--aa-line-light);
}
.aa-faq-list details {
border-bottom: 1px solid var(--aa-line-light);
}
.aa-faq-list summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 72px;
padding: 14px 0;
color: var(--aa-ink);
font-weight: 850;
cursor: pointer;
list-style: none;
}
.aa-faq-list summary::-webkit-details-marker {
display: none;
}
.aa-faq-list summary span {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 30px;
height: 30px;
color: var(--aa-dark);
background: var(--service-accent);
font-size: 1rem;
transition: transform 160ms ease;
}
.aa-faq-list details[open] summary span {
transform: rotate(45deg);
}
.aa-faq-list p {
max-width: 760px;
margin: -2px 54px 24px 0;
color: #59666c;
line-height: 1.65;
}
.aa-related-section {
border-top: 1px solid var(--aa-line-light);
}
.aa-related-grid {
margin-top: 34px;
}
.aa-brief-section {
position: relative;
padding: 100px max(24px, calc((100% - 1396px) / 2));
color: #fff;
background:
linear-gradient(90deg, rgba(5, 18, 28, 0.97), rgba(5, 18, 28, 0.8) 52%, rgba(5, 18, 28, 0.46)),
url(//autopilotapp.ru/wp-content/themes/ai-agents-theme/assets/img/section-contact-bg.webp) center / cover;
scroll-margin-top: 84px;
}
.aa-brief-inner {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(480px, 0.74fr);
gap: 82px;
align-items: start;
max-width: 1396px;
margin: 0 auto;
}
.aa-brief-copy h2 {
max-width: 670px;
color: #fff;
}
.aa-brief-copy > p {
max-width: 620px;
margin: 22px 0 0;
color: rgba(235, 247, 240, 0.74);
font-size: 1rem;
}
.aa-brief-facts {
display: grid;
gap: 0;
max-width: 620px;
margin-top: 36px;
border-top: 1px solid var(--aa-line-dark);
}
.aa-brief-facts span {
padding: 15px 0;
border-bottom: 1px solid var(--aa-line-dark);
color: rgba(235, 247, 240, 0.7);
font-size: 0.88rem;
}
.aa-brief-facts b {
color: #fff;
}
.aa-brief-form {
padding: 28px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
color: var(--aa-ink);
background: rgba(248, 250, 245, 0.96);
box-shadow: 0 26px 60px rgba(0, 0, 0, 0.24);
}
.aa-selected-service {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px 18px;
margin-bottom: 22px;
padding: 0 0 18px;
border-bottom: 1px solid var(--aa-line-light);
}
.aa-selected-service small {
grid-column: 1 / -1;
}
.aa-selected-service b {
min-width: 0;
font-size: 0.92rem;
}
.aa-selected-service span {
color: #255c39;
font-size: 0.84rem;
font-weight: 850;
}
.aa-brief-form .brief-block {
margin-bottom: 17px;
}
.aa-brief-form .brief-block > span {
color: #65727a;
font-size: 0.72rem;
font-weight: 850;
text-transform: uppercase;
}
.aa-brief-form .brief-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
margin-top: 8px;
}
.aa-brief-form .brief-options[data-brief-group="budget"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aa-brief-form .brief-options button {
min-height: 40px;
padding: 5px 8px;
border: 1px solid var(--aa-line-light);
border-radius: 6px;
color: #445158;
background: #fff;
font-size: 0.76rem;
font-weight: 750;
cursor: pointer;
}
.aa-brief-form .brief-options button.active {
border-color: #10232c;
color: #fff !important;
background: #10232c !important;
}
.aa-brief-form .form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.aa-brief-form label {
display: grid;
gap: 7px;
margin-top: 12px;
color: #445158;
font-size: 0.78rem;
font-weight: 800;
}
.aa-brief-form input,
.aa-brief-form textarea {
width: 100%;
min-width: 0;
border: 1px solid var(--aa-line-light);
border-radius: 6px;
color: var(--aa-ink);
background: #fff;
outline: 0;
}
.aa-brief-form input {
min-height: 44px;
padding: 0 12px;
}
.aa-brief-form textarea {
min-height: 118px;
padding: 11px 12px;
resize: vertical;
}
.aa-brief-form input::placeholder,
.aa-brief-form textarea::placeholder {
color: #77838a;
opacity: 1;
}
.aa-brief-form input:focus,
.aa-brief-form textarea:focus {
border-color: #387550;
box-shadow: 0 0 0 3px rgba(56, 117, 80, 0.12);
}
.aa-brief-form .form-submit {
width: 100%;
min-height: 48px;
margin-top: 16px;
border: 0;
border-radius: 7px;
color: #102019;
background: var(--service-accent, var(--category-accent, var(--aa-lime))) !important;
cursor: pointer;
}
.aa-site-footer {
position: relative;
z-index: 1;
display: block;
width: 100%;
padding: 74px max(24px, calc((100% - 1396px) / 2)) 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
background: #07151d;
}
.aa-footer-main {
display: grid;
grid-template-columns: minmax(270px, 0.8fr) minmax(400px, 1.1fr) minmax(240px, 0.6fr);
gap: 66px;
max-width: 1396px;
margin: 0 auto;
}
.aa-footer-brand p {
max-width: 360px;
margin: 22px 0;
color: rgba(235, 247, 240, 0.66);
font-size: 0.9rem;
}
.aa-footer-proof {
display: flex;
align-items: center;
gap: 13px;
padding-top: 18px;
border-top: 1px solid var(--aa-line-dark);
}
.aa-footer-proof b {
color: var(--aa-lime);
font-size: 2rem;
}
.aa-footer-proof span {
color: rgba(235, 247, 240, 0.66);
font-size: 0.72rem;
}
.aa-footer-catalog,
.aa-footer-contact {
display: grid;
align-content: start;
gap: 16px;
}
.aa-footer-category-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 24px;
}
.aa-footer-category-grid a {
display: grid;
grid-template-columns: 8px minmax(0, 1fr);
gap: 10px;
align-items: center;
min-height: 34px;
color: rgba(245, 251, 247, 0.82);
font-size: 0.84rem;
font-weight: 700;
}
.aa-footer-category-grid i {
width: 8px;
height: 8px;
}
.aa-footer-contact a {
color: rgba(245, 251, 247, 0.82);
font-size: 0.84rem;
font-weight: 700;
overflow-wrap: anywhere;
}
.aa-footer-category-grid a:hover,
.aa-footer-contact a:hover {
color: var(--aa-lime);
}
.aa-footer-bottom {
display: flex;
justify-content: space-between;
gap: 20px;
max-width: 1396px;
margin: 56px auto 0;
padding-top: 20px;
border-top: 1px solid var(--aa-line-dark);
color: rgba(235, 247, 240, 0.48);
font-size: 0.72rem;
}
.aa-simple-main {
min-height: 70vh;
padding: 140px 24px 80px;
background: var(--aa-paper);
}
.aa-simple-main article {
max-width: 900px;
margin: 0 auto;
}
.error404 .not-found-card {
border-color: rgba(168, 244, 91, 0.2);
background: rgba(8, 30, 39, 0.9);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}
.error404 .not-found-copy .section-kicker {
color: var(--aa-lime);
}
.error404 .not-found-copy h1 {
color: #fff;
}
.error404 .not-found-copy > p:not(.section-kicker) {
color: rgba(235, 247, 240, 0.76);
}
@media (max-width: 1240px) {
.aa-nav-proof {
display: none;
}
.mega-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px 0;
}
.mega-column:nth-child(4) {
padding-left: 0;
border-left: 0;
}
.aa-category-showcase {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aa-home-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aa-home-category-grid a {
aspect-ratio: 1.8;
}
.aa-category-showcase a {
aspect-ratio: 2.1;
}
}
@media (max-width: 1080px) {
.aa-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aa-site-nav {
grid-template-columns: auto 1fr auto;
padding: 8px 10px 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
background: rgba(6, 18, 23, 0.82);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(18px);
}
.aa-site-nav .nav-actions {
display: flex;
justify-self: end;
}
.aa-site-nav .nav-ghost {
display: none;
}
.aa-site-nav .burger {
display: block;
}
.aa-mobile-menu {
top: 82px;
width: min(620px, calc(100% - 28px));
max-height: calc(100vh - 100px);
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
color: #fff;
background: rgba(7, 21, 29, 0.98);
}
.aa-mobile-menu > a {
color: #fff;
}
.mobile-service-groups {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-catalog-hero h1,
.aa-category-hero h1 {
font-size: 58px;
}
.aa-service-hero h1 {
font-size: 54px;
}
.aa-category-showcase {
margin-top: 12px;
}
.aa-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-home-services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-process-track {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px 0;
}
.aa-process-track::before {
display: none;
}
.aa-process-track li:nth-child(3) {
padding-left: 0;
border-left: 0;
}
.aa-profile-proof,
.aa-service-details,
.aa-brief-inner {
grid-template-columns: 1fr;
}
.aa-brief-inner {
gap: 48px;
}
.aa-brief-form {
max-width: 680px;
}
.aa-gallery-grid {
grid-auto-rows: 150px;
}
.aa-review-grid {
grid-template-columns: 1fr;
}
.aa-review-grid article {
min-height: 0;
}
.aa-footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-footer-contact {
grid-column: 2;
}
}
@media (max-width: 720px) {
:root {
--aa-container: min(100% - 28px, 1396px);
}
body.admin-bar .aa-site-nav {
top: 52px;
}
.aa-site-nav {
top: 10px;
left: 10px;
width: calc(100% - 20px);
transform: none;
}
.aa-site-nav .nav-logo {
font-size: 1.05rem;
}
.aa-site-nav .nav-cta {
min-height: 40px;
padding: 0 12px;
font-size: 0.78rem;
}
.nav-tools-menu { display: none; }
.aa-video-grid { grid-template-columns: 1fr; }
.aa-site-nav .burger {
width: 40px;
height: 40px;
}
.aa-mobile-menu {
top: 72px;
}
.mobile-service-groups {
grid-template-columns: 1fr;
}
.aa-catalog-hero,
.aa-category-hero,
.aa-service-hero {
min-height: 720px;
background-position: 58% center;
}
.aa-service-hero {
min-height: 760px;
}
.aa-hero-overlay {
background:
linear-gradient(180deg, rgba(4, 15, 22, 0.96) 0%, rgba(4, 15, 22, 0.84) 58%, rgba(4, 15, 22, 0.68) 100%);
}
.aa-catalog-hero-copy,
.aa-category-hero-copy,
.aa-service-hero-copy {
padding-top: 124px;
}
.aa-catalog-hero h1,
.aa-category-hero h1,
.aa-service-hero h1 {
font-size: 42px;
line-height: 1.04;
}
.aa-service-hero h1 {
font-size: 38px;
}
.aa-catalog-hero-copy > p,
.aa-category-hero-copy > p,
.aa-service-hero-copy > p {
margin-top: 18px;
font-size: 0.98rem;
}
.aa-hero-actions {
margin-top: 24px;
}
.aa-btn {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
padding: 0 12px;
font-size: 0.82rem;
text-align: center;
}
.aa-catalog-stats,
.aa-service-facts {
right: 14px;
bottom: 22px;
left: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-service-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aa-catalog-stats span,
.aa-service-facts span {
padding: 12px 10px;
}
.aa-catalog-stats span:nth-child(3) {
border-left: 0;
}
.aa-catalog-stats b,
.aa-service-facts b {
font-size: 1rem;
overflow-wrap: anywhere;
}
.aa-catalog-stats small,
.aa-service-facts small {
font-size: 0.58rem;
}
.aa-breadcrumbs {
margin-bottom: 20px;
font-size: 0.68rem;
}
.aa-category-showcase {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-home-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-home-category-grid a {
aspect-ratio: 1.25;
min-height: 142px;
}
.aa-home-services-grid {
grid-template-columns: 1fr;
}
.aa-home-review-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-home-review-stats span:nth-child(3) {
border-left: 0;
}
.aa-category-showcase a {
aspect-ratio: 1.15;
min-height: 138px;
padding: 14px;
}
.aa-catalog-sections {
padding-top: 54px;
}
.aa-category-band,
.aa-category-services,
.aa-flow-section,
.aa-gallery-section,
.aa-reviews-proof,
.aa-faq-section,
.aa-related-section {
padding: 60px 0;
}
.aa-band-head,
.aa-section-heading-row,
.aa-reviews-head {
display: grid;
align-items: start;
gap: 18px;
}
.aa-band-head h2,
.aa-section-heading h2,
.aa-deliverables h2,
.aa-proof-lead h2,
.aa-brief-copy h2,
.aa-reviews-head h2 {
font-size: 34px;
}
.aa-service-grid {
grid-template-columns: 1fr;
}
.aa-service-card,
.aa-service-card-link {
min-height: 0;
}
.aa-service-card-link {
padding: 23px;
}
.aa-service-card h3 {
font-size: 1.28rem;
}
.aa-process-band {
padding-top: 62px;
padding-bottom: 62px;
}
.aa-process-track {
grid-template-columns: 1fr;
gap: 0;
}
.aa-process-track li,
.aa-process-track li:nth-child(3) {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 4px 14px;
padding: 18px 0;
border-top: 1px solid var(--aa-line-dark);
border-left: 0;
}
.aa-process-track li:first-child {
border-top: 0;
}
.aa-process-track li > span {
grid-row: 1 / 3;
width: 40px;
height: 40px;
}
.aa-process-track h3 {
margin: 0;
}
.aa-profile-proof {
gap: 40px;
padding-top: 62px;
padding-bottom: 62px;
}
.aa-proof-numbers span {
min-height: 110px;
padding: 17px;
}
.aa-proof-numbers b {
font-size: 1.45rem;
}
.aa-evidence-strip {
grid-template-columns: 42px minmax(0, 1fr);
gap: 12px;
}
.aa-evidence-mark {
width: 42px;
height: 42px;
}
.aa-evidence-strip > a {
grid-column: 2;
font-size: 0.82rem;
}
.aa-flow-map {
grid-template-columns: 1fr;
}
.aa-flow-map li {
min-height: 74px;
}
.aa-flow-map li:not(:last-child)::after {
right: auto;
bottom: -17px;
left: 35px;
transform: rotate(90deg);
}
.aa-service-details {
gap: 44px;
padding: 0 0 70px;
}
.aa-audience-panel {
padding: 20px;
}
.aa-audience-grid {
grid-template-columns: 1fr;
}
.aa-gallery-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 150px;
}
.aa-gallery-grid figure,
.aa-gallery-grid figure:first-child,
.aa-gallery-grid figure:nth-child(5),
.aa-gallery-grid figure:only-child,
.aa-gallery-grid figure:nth-last-child(2):first-child,
.aa-gallery-grid figure:nth-last-child(2):first-child ~ figure {
grid-column: span 1;
grid-row: span 1;
}
.aa-gallery-grid figure:first-child {
grid-column: span 2;
grid-row: span 2;
}
.aa-gallery-grid figure:only-child {
grid-column: span 2;
grid-row: auto;
aspect-ratio: 8 / 5;
}
.aa-rating-lockup {
align-items: flex-start;
}
.aa-review-grid article {
padding: 22px;
}
.aa-faq-section {
grid-template-columns: 1fr;
gap: 10px;
}
.aa-brief-section {
padding-top: 64px;
padding-bottom: 64px;
}
.aa-brief-inner {
gap: 36px;
}
.aa-brief-form {
padding: 18px;
}
.aa-brief-form .brief-options,
.aa-brief-form .brief-options[data-brief-group="budget"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-brief-form .form-row {
grid-template-columns: 1fr;
gap: 0;
}
.aa-footer-main {
grid-template-columns: 1fr;
gap: 40px;
}
.aa-footer-contact {
grid-column: auto;
}
.aa-footer-bottom {
display: grid;
}
}
@media (max-width: 500px) {
.aa-site-nav .nav-cta {
display: none;
}
.aa-category-showcase {
grid-template-columns: 1fr;
}
.aa-home-category-grid {
grid-template-columns: 1fr;
}
.aa-home-category-grid a {
aspect-ratio: 2;
min-height: 128px;
}
.aa-category-showcase a {
aspect-ratio: 2;
min-height: 128px;
}
.aa-service-facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.aa-service-facts span {
padding: 10px 6px;
}
.aa-service-facts b {
font-size: 0.84rem;
}
.aa-service-facts small {
font-size: 0.52rem;
}
.aa-gallery-grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.aa-gallery-grid figure,
.aa-gallery-grid figure:first-child,
.aa-gallery-grid figure:only-child {
grid-column: span 1;
grid-row: auto;
aspect-ratio: auto;
}
.aa-gallery-grid.is-seo-showcase {
grid-template-columns: 1fr;
}
.aa-gallery-grid.is-seo-showcase figure,
.aa-gallery-grid.is-seo-showcase figure:first-child {
grid-column: span 1;
aspect-ratio: auto;
}
.aa-gallery-grid button {
height: auto;
aspect-ratio: 8 / 5;
}
.aa-gallery-grid figcaption {
position: static;
padding: 12px 14px;
background: #10232c;
}
.aa-footer-category-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.services-mega,
.nav-chevron,
.aa-service-card,
.aa-category-showcase a,
.aa-btn,
.aa-gallery-grid img {
transition: none;
}
} .mobile-service-groups {
display: grid;
gap: 6px;
}
.mobile-category-group {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
}
.mobile-category-group summary {
min-height: 44px;
padding: 10px 12px;
}
.mobile-category-group > div {
display: grid;
gap: 2px;
padding: 0 8px 8px;
}
.mobile-category-group > div a {
min-height: 38px;
padding: 8px 10px;
color: rgba(255, 255, 255, 0.76);
font-size: 0.78rem;
}
.mobile-category-group > div .mobile-category-link {
color: var(--aa-lime);
font-weight: 850;
}
.aa-catalog-tools {
position: sticky;
top: 18px;
z-index: 8;
display: grid;
gap: 12px;
width: var(--aa-container);
margin: 0 auto 28px;
padding: 14px;
border: 1px solid var(--aa-line-light);
border-radius: 8px;
background: rgba(248, 250, 245, 0.96);
box-shadow: 0 16px 36px rgba(12, 29, 35, 0.1);
backdrop-filter: blur(14px);
}
.aa-catalog-tools input {
width: 100%;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--aa-line-light);
border-radius: 6px;
color: var(--aa-ink);
background: #fff;
}
.aa-catalog-filters {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: thin;
}
.aa-catalog-filters button {
flex: 0 0 auto;
min-height: 36px;
padding: 0 12px;
border: 1px solid var(--aa-line-light);
border-radius: 6px;
color: #435159;
background: #fff;
font-weight: 800;
cursor: pointer;
}
.aa-catalog-filters button.active {
border-color: var(--aa-dark);
color: #fff;
background: var(--aa-dark);
}
.aa-catalog-empty { margin: 0; color: #5e6b72; }
[hidden] { display: none !important; }
.aa-band-summary-mobile { display: none; }
.aa-solution-preview,
.aa-proof-disclosure {
width: var(--aa-container);
margin: 0 auto;
padding: 84px 0;
}
.aa-review-context {
color: #397653;
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
}
.aa-review-context {
align-self: flex-start;
text-decoration: none;
}
.aa-solution-canvas {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 14px;
margin-top: 32px;
padding: clamp(22px, 4vw, 46px);
border: 1px solid var(--aa-line-light);
border-radius: 8px;
background:
linear-gradient(90deg, transparent 0 31px, rgba(17, 24, 33, 0.05) 32px 33px, transparent 34px) 0 0 / 34px 34px,
#f7f9f4;
}
.aa-solution-canvas > div {
display: grid;
gap: 8px;
min-height: 130px;
place-content: center;
padding: 20px;
border: 1px solid var(--aa-line-light);
border-radius: 8px;
background: #fff;
text-align: center;
}
.aa-solution-canvas > div.is-core { border-color: var(--service-accent); box-shadow: inset 0 4px 0 var(--service-accent); }
.aa-solution-canvas small { color: #68757b; font-weight: 800; text-transform: uppercase; }
.aa-solution-canvas > span { color: #397653; font-size: 1.5rem; font-weight: 900; }
.aa-proof-disclosure {
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
border-top: 1px solid var(--aa-line-light);
border-bottom: 1px solid var(--aa-line-light);
}
.aa-proof-disclosure > div { max-width: 760px; }
.aa-proof-disclosure h2 { margin: 12px 0; }
.aa-proof-disclosure p { color: #5d6a71; line-height: 1.6; }
.aa-content-page {
min-height: 72vh;
padding: 150px max(24px, calc((100% - 980px) / 2)) 90px;
background: var(--aa-paper);
}
.aa-content-page article { max-width: 980px; margin: 0 auto; }
.aa-content-page h1 { margin: 30px 0; font-size: clamp(2.4rem, 5vw, 4.8rem); }
.aa-page-content { color: #35434a; line-height: 1.75; }
.aa-page-content h2 { margin: 40px 0 12px; font-size: 1.55rem; }
.aa-page-content p, .aa-page-content li { max-width: 780px; }
.aa-footer-bottom a { color: inherit; }
.aa-brief-form input[type="file"] { padding: 9px 12px; }
.aa-brief-form .privacy-consent { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.aa-brief-form .privacy-consent input { flex: 0 0 auto; width: 18px; min-height: 18px; margin-top: 1px; }
.aa-brief-form .privacy-consent a { color: inherit; text-decoration: underline; }
.aa-brief-form .form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; }
.aa-brief-form .optional { color: #748087; font-size: 0.7rem; font-weight: 700; }
@media (max-width: 720px) {
.aa-mobile-menu { padding: 10px; }
.mobile-service-groups { grid-template-columns: 1fr; }
.aa-category-services,
.aa-flow-section,
.aa-gallery-section,
.aa-solution-preview,
.aa-reviews-proof,
.aa-proof-disclosure,
.aa-faq-section,
.aa-related-section { padding-top: 52px; padding-bottom: 52px; }
.aa-solution-canvas { grid-template-columns: 1fr; }
.aa-solution-canvas > span { transform: rotate(90deg); text-align: center; }
.aa-proof-disclosure { display: grid; }
.aa-catalog-tools { top: 8px; width: min(100% - 20px, 1396px); }
.aa-brief-section {
background:
linear-gradient(90deg, rgba(5, 18, 28, 0.97), rgba(5, 18, 28, 0.78)),
url(//autopilotapp.ru/wp-content/themes/ai-agents-theme/assets/img/section-contact-bg-mobile.webp) center / cover;
}
.aa-content-page { padding: 112px 16px 60px; }
.aa-category-band {
padding: 0;
border-top: 1px solid var(--aa-line-light);
}
.aa-category-band[open] { padding-bottom: 52px; }
.aa-band-summary-mobile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 28px;
gap: 10px;
align-items: center;
min-height: 62px;
padding: 12px 4px;
color: var(--aa-ink);
cursor: pointer;
list-style: none;
}
.aa-band-summary-mobile::-webkit-details-marker { display: none; }
.aa-band-summary-mobile span { font-size: 1rem; font-weight: 900; }
.aa-band-summary-mobile b { color: #68757b; font-size: 0.72rem; }
.aa-band-summary-mobile i { color: #397653; font-size: 1.2rem; font-style: normal; text-align: center; }
.aa-category-band[open] > .aa-band-summary-mobile i { transform: rotate(45deg); }
.aa-category-band .aa-band-head { margin-top: 28px; }
.aa-home-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.aa-home-category-grid a {
aspect-ratio: 1.15;
min-height: 138px;
}
.aa-home-services-grid {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 10px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.aa-home-services-grid .aa-service-card {
flex: 0 0 min(82vw, 340px);
min-height: 300px;
scroll-snap-align: start;
}
}