/* SESOTECH - Holographic Design System */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Holographic Color Palette - Dark theme with purple/amber accents */
--zexo-primary: #2a1a3a;      /* Deep purple */
--zexo-secondary: #4a2c5a;    /* Medium purple */
--zexo-accent: #ff6b35;       /* Vibrant orange */
--zexo-accent-light: #ff8c42; /* Light orange */
--zexo-surface: #1a0f26;      /* Dark purple-black */
--zexo-surface-light: #3d2a4a; /* Light surface */
--zexo-text: #f0e6ff;         /* Light purple-white */
--zexo-text-secondary: #b8a3c7; /* Muted purple */
--zexo-border: #6b4c7a;       /* Purple border */
--zexo-gradient: linear-gradient(135deg, #ff6b35, #ff8c42, #9d4edd);
--zexo-glow: 0 0 20px rgba(255, 107, 53, 0.3);
--zexo-glow-strong: 0 0 40px rgba(255, 107, 53, 0.6);
/* Holographic Effects */
--zexo-holo-bg: linear-gradient(45deg,
rgba(255, 107, 53, 0.1) 0%,
rgba(157, 78, 221, 0.1) 25%,
rgba(255, 140, 66, 0.1) 50%,
rgba(157, 78, 221, 0.1) 75%,
rgba(255, 107, 53, 0.1) 100%);
--zexo-holo-border: linear-gradient(45deg,
rgba(255, 107, 53, 0.3),
rgba(157, 78, 221, 0.3),
rgba(255, 140, 66, 0.3));
/* Typography Scale */
--zexo-font-display: clamp(2.5rem, 5vw, 4rem);
--zexo-font-h1: clamp(2rem, 4vw, 3rem);
--zexo-font-h2: clamp(1.5rem, 3vw, 2.25rem);
--zexo-font-h3: clamp(1.25rem, 2.5vw, 1.75rem);
--zexo-font-body: clamp(1rem, 2vw, 1.125rem);
--zexo-font-small: clamp(0.875rem, 1.5vw, 1rem);
/* Spacing Scale */
--zexo-space-xs: clamp(0.5rem, 1vw, 0.75rem);
--zexo-space-sm: clamp(0.75rem, 1.5vw, 1rem);
--zexo-space-md: clamp(1rem, 2vw, 1.5rem);
--zexo-space-lg: clamp(1.5rem, 3vw, 2.5rem);
--zexo-space-xl: clamp(2rem, 4vw, 4rem);
--zexo-space-xxl: clamp(3rem, 6vw, 6rem);
/* Border Radius */
--zexo-radius-sm: 0.5rem;
--zexo-radius-md: 1rem;
--zexo-radius-lg: 1.5rem;
--zexo-radius-xl: 2rem;
/* Shadows */
--zexo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--zexo-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
--zexo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
--zexo-shadow-holo: 0 0 30px rgba(255, 107, 53, 0.2),
0 0 60px rgba(157, 78, 221, 0.1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: var(--zexo-surface);
color: var(--zexo-text);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(157, 78, 221, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 140, 66, 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
/* Container */
.zexo-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--zexo-space-md);
}
/* Skip Link */
.zexo-skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--zexo-accent);
color: var(--zexo-surface);
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 1000;
transition: top 0.2s ease;
}
.zexo-skip-link:focus {
top: 6px;
}
/* Header */
.zexo-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(26, 15, 38, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(107, 76, 122, 0.2);
z-index: 100;
transition: all 0.3s ease;
}
/* Стилі для нової емблеми */
.zexo-logo-svg {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 2px 8px rgba(255, 107, 53, 0.2));
}
.zexo-nav__logo:hover .zexo-logo-svg {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 4px 16px rgba(255, 107, 53, 0.4));
}
/* Анімації для елементів логотипу */
.logo-container {
transform-origin: center;
transition: all 0.3s ease;
}
.logo-ring-outer {
stroke-dasharray: 138.23;
stroke-dashoffset: 138.23;
animation: logo-ring-draw 2s ease-in-out 0.5s forwards;
}
.logo-ring-middle {
stroke-dasharray: 113.1;
stroke-dashoffset: 113.1;
animation: logo-ring-draw 2s ease-in-out 0.7s forwards;
}
.logo-ring-inner {
stroke-dasharray: 87.96;
stroke-dashoffset: 87.96;
animation: logo-ring-draw 2s ease-in-out 0.9s forwards;
}
.logo-hexagon {
opacity: 0;
transform: scale(0.8);
animation: logo-hexagon-appear 1s ease-out 1.2s forwards;
}
.logo-hexagon-inner {
opacity: 0;
stroke-dasharray: 36;
stroke-dashoffset: 36;
animation: logo-hexagon-draw 1s ease-out 1.4s forwards;
}
.logo-center-dot {
opacity: 0;
transform: scale(0);
animation: logo-center-pulse 0.8s ease-out 1.6s forwards;
}
.logo-center-highlight {
opacity: 0;
animation: logo-highlight-fade 1s ease-out 1.8s forwards;
}
/* Анімації частинок */
.logo-particle {
opacity: 0;
transform: scale(0);
}
.logo-particle-1 {
animation: logo-particle-float 3s ease-in-out 2s infinite;
}
.logo-particle-2 {
animation: logo-particle-float 3s ease-in-out 2.2s infinite;
}
.logo-particle-3 {
animation: logo-particle-float 3s ease-in-out 2.4s infinite;
}
.logo-particle-4 {
animation: logo-particle-float 3s ease-in-out 2.6s infinite;
}
.logo-particle-5 {
animation: logo-particle-float 3s ease-in-out 2.8s infinite;
}
/* Інтерактивні ефекти при наведенні */
.zexo-nav__logo:hover .logo-ring-outer {
animation-play-state: paused;
stroke-width: 3;
opacity: 0.6;
}
.zexo-nav__logo:hover .logo-ring-middle {
animation-play-state: paused;
stroke-width: 2;
opacity: 0.8;
}
.zexo-nav__logo:hover .logo-ring-inner {
animation-play-state: paused;
stroke-width: 1.5;
opacity: 1;
}
.zexo-nav__logo:hover .logo-hexagon {
transform: scale(1.05);
filter: url(#logoGlow);
}
.zexo-nav__logo:hover .logo-center-dot {
transform: scale(1.2);
filter: url(#logoGlow);
}
.zexo-nav__logo:hover .logo-particle {
animation-duration: 1.5s;
transform: scale(1.2);
}
.zexo-nav__container {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--zexo-space-sm) var(--zexo-space-md);
max-width: 1200px;
margin: 0 auto;
}
.zexo-nav__logo {
display: flex;
align-items: center;
gap: var(--zexo-space-sm);
text-decoration: none;
color: var(--zexo-text);
font-weight: 700;
font-size: var(--zexo-font-body);
transition: all 0.3s ease;
}
.zexo-nav__logo:hover {
color: var(--zexo-accent);
transform: scale(1.05);
}
.zexo-nav__brand {
background: var(--zexo-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.zexo-nav__menu {
display: flex;
list-style: none;
gap: var(--zexo-space-lg);
align-items: center;
}
.zexo-nav__link {
color: var(--zexo-text-secondary);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.zexo-nav__link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--zexo-gradient);
transition: width 0.3s ease;
}
.zexo-nav__link:hover {
color: var(--zexo-text);
}
.zexo-nav__link:hover::after {
width: 100%;
}
.zexo-nav__toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: var(--zexo-space-xs);
}
.zexo-nav__toggle span {
width: 24px;
height: 2px;
background: var(--zexo-text);
transition: all 0.3s ease;
}
/* Hero Section */
.zexo-hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: var(--zexo-holo-bg);
}
.zexo-hero__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--zexo-space-xxl);
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--zexo-space-md);
position: relative;
z-index: 2;
}
.zexo-hero__content {
animation: zexo-fade-in-up 1s ease-out;
}
.zexo-hero__title {
font-size: var(--zexo-font-display);
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--zexo-space-lg);
background: var(--zexo-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.zexo-hero__accent {
display: block;
font-size: 0.8em;
margin-top: var(--zexo-space-sm);
background: linear-gradient(45deg, var(--zexo-accent), var(--zexo-accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.zexo-hero__description {
font-size: var(--zexo-font-body);
color: var(--zexo-text-secondary);
margin-bottom: var(--zexo-space-xl);
max-width: 500px;
}
.zexo-hero__actions {
display: flex;
gap: var(--zexo-space-md);
flex-wrap: wrap;
}
.zexo-hero__visual {
display: flex;
justify-content: center;
align-items: center;
animation: zexo-fade-in-right 1s ease-out 0.3s both;
}
/* Hologram Effect */
.zexo-hero__hologram {
position: relative;
width: 300px;
height: 300px;
perspective: 1000px;
}
.zexo-hologram__layer {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0.7;
animation: zexo-hologram-rotate 8s linear infinite;
}
.zexo-hologram__layer--1 {
background: conic-gradient(from 0deg,
transparent,
rgba(255, 107, 53, 0.3),
transparent,
rgba(157, 78, 221, 0.3),
transparent);
animation-duration: 6s;
animation-direction: reverse;
}
.zexo-hologram__layer--2 {
background: conic-gradient(from 120deg,
transparent,
rgba(255, 140, 66, 0.2),
transparent,
rgba(255, 107, 53, 0.2),
transparent);
animation-duration: 10s;
transform: scale(0.8);
}
.zexo-hologram__layer--3 {
background: conic-gradient(from 240deg,
transparent,
rgba(157, 78, 221, 0.2),
transparent,
rgba(255, 140, 66, 0.2),
transparent);
animation-duration: 12s;
transform: scale(0.6);
}
/* Particles Background */
.zexo-hero__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.zexo-particles {
position: absolute;
width: 100%;
height: 100%;
}
.zexo-particles::before,
.zexo-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: var(--zexo-accent);
border-radius: 50%;
animation: zexo-particle-float 6s ease-in-out infinite;
}
.zexo-particles::before {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.zexo-particles::after {
top: 60%;
right: 15%;
animation-delay: 3s;
}
/* Buttons */
.zexo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--zexo-space-sm) var(--zexo-space-lg);
border: none;
border-radius: var(--zexo-radius-md);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.zexo-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.zexo-btn:hover::before {
left: 100%;
}
.zexo-btn--primary {
background: var(--zexo-gradient);
color: var(--zexo-surface);
box-shadow: var(--zexo-glow);
}
.zexo-btn--primary:hover {
transform: translateY(-2px);
box-shadow: var(--zexo-glow-strong);
}
.zexo-btn--secondary {
background: transparent;
color: var(--zexo-accent);
border: 2px solid var(--zexo-accent);
}
.zexo-btn--secondary:hover {
background: var(--zexo-accent);
color: var(--zexo-surface);
transform: translateY(-2px);
}
.zexo-btn--full {
width: 100%;
}
/* Section Styles */
.zexo-section__header {
text-align: center;
margin-bottom: var(--zexo-space-xxl);
}
.zexo-section__title {
font-size: var(--zexo-font-h2);
font-weight: 700;
margin-bottom: var(--zexo-space-md);
background: var(--zexo-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.zexo-section__description {
font-size: var(--zexo-font-body);
color: var(--zexo-text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Services Section */
.zexo-services {
padding: var(--zexo-space-xxl) 0;
background: var(--zexo-surface-light);
position: relative;
}
.zexo-services::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 30% 20%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(157, 78, 221, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.zexo-services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--zexo-space-lg);
position: relative;
z-index: 2;
}
.zexo-service-card {
background: linear-gradient(145deg, rgba(61, 42, 74, 0.4), rgba(42, 26, 58, 0.6));
border: 1px solid rgba(107, 76, 122, 0.3);
border-radius: var(--zexo-radius-lg);
padding: var(--zexo-space-xl);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: zexo-card-glow 4s ease-in-out infinite;
}
.zexo-service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.1) 0%,
transparent 30%,
transparent 70%,
rgba(157, 78, 221, 0.1) 100%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: var(--zexo-radius-lg);
background-size: 200% 100%;
animation: zexo-shimmer 3s ease-in-out infinite;
}
.zexo-service-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
rgba(255, 107, 53, 0.3),
rgba(157, 78, 221, 0.3),
rgba(255, 140, 66, 0.3));
border-radius: var(--zexo-radius-lg);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
filter: blur(8px);
animation: zexo-pulse-glow 2s ease-in-out infinite;
}
.zexo-service-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 8px 25px rgba(255, 107, 53, 0.1),
0 4px 12px rgba(157, 78, 221, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: rgba(255, 107, 53, 0.4);
}
.zexo-service-card:hover::before {
opacity: 1;
}
.zexo-service-card:hover::after {
opacity: 0.6;
}
.zexo-service-card__icon {
width: 72px;
height: 72px;
margin-bottom: var(--zexo-space-lg);
color: var(--zexo-accent);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(157, 78, 221, 0.15));
border-radius: var(--zexo-radius-md);
border: 1px solid rgba(255, 107, 53, 0.2);
position: relative;
transition: all 0.3s ease;
box-shadow:
0 4px 12px rgba(255, 107, 53, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.service-icon {
width: 32px;
height: 32px;
color: inherit;
transition: all 0.3s ease;
}
.zexo-service-card__icon::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(45deg, rgba(255, 107, 53, 0.3), rgba(157, 78, 221, 0.3));
border-radius: var(--zexo-radius-md);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
filter: blur(4px);
}
.zexo-service-card:hover .zexo-service-card__icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(157, 78, 221, 0.2));
border-color: rgba(255, 107, 53, 0.4);
box-shadow:
0 8px 20px rgba(255, 107, 53, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.zexo-service-card:hover .zexo-service-card__icon::before {
opacity: 0.7;
}
.zexo-service-card__title {
font-size: var(--zexo-font-h3);
font-weight: 700;
margin-bottom: var(--zexo-space-md);
color: var(--zexo-text);
position: relative;
transition: all 0.3s ease;
letter-spacing: -0.02em;
}
.zexo-service-card:hover .zexo-service-card__title {
color: var(--zexo-accent-light);
transform: translateX(4px);
}
.zexo-service-card__description {
color: var(--zexo-text-secondary);
line-height: 1.7;
font-size: var(--zexo-font-body);
transition: all 0.3s ease;
position: relative;
}
.zexo-service-card:hover .zexo-service-card__description {
color: var(--zexo-text);
transform: translateX(2px);
}
/* Portfolio Section */
.zexo-portfolio {
padding: var(--zexo-space-xxl) 0;
}
.zexo-portfolio__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--zexo-space-xl);
}
.zexo-portfolio-item {
background: linear-gradient(145deg, rgba(61, 42, 74, 0.3), rgba(42, 26, 58, 0.5));
border: 1px solid rgba(107, 76, 122, 0.3);
border-radius: var(--zexo-radius-lg);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
backdrop-filter: blur(10px);
box-shadow:
0 6px 25px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
animation: zexo-card-glow 5s ease-in-out infinite;
}
.zexo-portfolio-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.05) 0%,
transparent 40%,
transparent 60%,
rgba(157, 78, 221, 0.05) 100%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
background-size: 200% 100%;
animation: zexo-shimmer 4s ease-in-out infinite;
}
.zexo-portfolio-item::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(45deg,
rgba(255, 107, 53, 0.2),
rgba(157, 78, 221, 0.2),
rgba(255, 140, 66, 0.2));
border-radius: var(--zexo-radius-lg);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
filter: blur(12px);
animation: zexo-pulse-glow 3s ease-in-out infinite;
}
.zexo-portfolio-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 12px 30px rgba(255, 107, 53, 0.1),
0 6px 15px rgba(157, 78, 221, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(255, 107, 53, 0.4);
}
.zexo-portfolio-item:hover::before {
opacity: 1;
}
.zexo-portfolio-item:hover::after {
opacity: 0.5;
}
.zexo-portfolio-item__image {
height: 220px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.1) 0%,
rgba(157, 78, 221, 0.1) 50%,
rgba(255, 140, 66, 0.1) 100%);
}
.zexo-portfolio-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.08) 0%,
rgba(157, 78, 221, 0.08) 25%,
rgba(255, 140, 66, 0.08) 50%,
rgba(157, 78, 221, 0.08) 75%,
rgba(255, 107, 53, 0.08) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s ease;
}
.portfolio-icon {
width: 48px;
height: 48px;
color: var(--zexo-accent);
opacity: 0.8;
transition: all 0.3s ease;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.zexo-portfolio-placeholder::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.zexo-portfolio-item:hover .zexo-portfolio-placeholder {
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.12) 0%,
rgba(157, 78, 221, 0.12) 25%,
rgba(255, 140, 66, 0.12) 50%,
rgba(157, 78, 221, 0.12) 75%,
rgba(255, 107, 53, 0.12) 100%);
}
.zexo-portfolio-item:hover .portfolio-icon {
transform: scale(1.1) rotate(10deg);
opacity: 1;
color: var(--zexo-accent-light);
}
.zexo-portfolio-item:hover .zexo-portfolio-placeholder::after {
transform: translateX(100%);
}
.zexo-portfolio-item__content {
padding: var(--zexo-space-lg);
position: relative;
z-index: 2;
}
.zexo-portfolio-item__title {
font-size: var(--zexo-font-h3);
font-weight: 700;
margin-bottom: var(--zexo-space-sm);
color: var(--zexo-text);
transition: all 0.3s ease;
letter-spacing: -0.02em;
}
.zexo-portfolio-item:hover .zexo-portfolio-item__title {
color: var(--zexo-accent-light);
transform: translateX(4px);
}
.zexo-portfolio-item__description {
color: var(--zexo-text-secondary);
margin-bottom: var(--zexo-space-md);
line-height: 1.7;
font-size: var(--zexo-font-body);
transition: all 0.3s ease;
}
.zexo-portfolio-item:hover .zexo-portfolio-item__description {
color: var(--zexo-text);
transform: translateX(2px);
}
.zexo-portfolio-item__tags {
display: flex;
flex-wrap: wrap;
gap: var(--zexo-space-xs);
}
.zexo-tag {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(157, 78, 221, 0.15));
color: var(--zexo-accent);
padding: var(--zexo-space-xs) var(--zexo-space-sm);
border-radius: var(--zexo-radius-sm);
font-size: var(--zexo-font-small);
font-weight: 600;
border: 1px solid rgba(255, 107, 53, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
}
.zexo-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.zexo-tag:hover {
transform: translateY(-2px) scale(1.05);
background: linear-gradient(135deg, rgba(255, 107, 53, 0.25), rgba(157, 78, 221, 0.25));
border-color: rgba(255, 107, 53, 0.5);
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}
.zexo-tag:hover::before {
left: 100%;
}
/* Process Section */
.zexo-process {
padding: var(--zexo-space-xxl) 0;
background: var(--zexo-surface-light);
position: relative;
}
.zexo-process::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 80% 30%, rgba(157, 78, 221, 0.03) 0%, transparent 50%),
radial-gradient(circle at 20% 70%, rgba(255, 140, 66, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.zexo-process__timeline {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.zexo-process-step {
display: flex;
align-items: flex-start;
gap: var(--zexo-space-lg);
margin-bottom: var(--zexo-space-xxl);
position: relative;
background: linear-gradient(145deg, rgba(61, 42, 74, 0.2), rgba(42, 26, 58, 0.4));
border: 1px solid rgba(107, 76, 122, 0.2);
border-radius: var(--zexo-radius-lg);
padding: var(--zexo-space-lg);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.zexo-process-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.05) 0%,
transparent 30%,
transparent 70%,
rgba(157, 78, 221, 0.05) 100%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: var(--zexo-radius-lg);
}
.zexo-process-step:hover {
transform: translateY(-4px);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.15),
0 6px 20px rgba(255, 107, 53, 0.1),
0 3px 10px rgba(157, 78, 221, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-color: rgba(255, 107, 53, 0.3);
}
.zexo-process-step:hover::before {
opacity: 1;
}
.zexo-process-step:not(:last-child)::after {
content: '';
position: absolute;
left: 24px;
top: 60px;
width: 2px;
height: calc(100% + var(--zexo-space-lg));
background: var(--zexo-holo-border);
opacity: 0.3;
}
.zexo-process-step__number {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--zexo-accent), var(--zexo-accent-light));
color: var(--zexo-surface);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--zexo-font-body);
flex-shrink: 0;
position: relative;
z-index: 3;
transition: all 0.3s ease;
box-shadow:
0 4px 15px rgba(255, 107, 53, 0.3),
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.zexo-process-step__number::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(45deg,
rgba(255, 107, 53, 0.3),
rgba(157, 78, 221, 0.3),
rgba(255, 140, 66, 0.3));
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
filter: blur(6px);
}
.zexo-process-step:hover .zexo-process-step__number {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 8px 25px rgba(255, 107, 53, 0.4),
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.zexo-process-step:hover .zexo-process-step__number::before {
opacity: 0.7;
}
.zexo-process-step__content {
flex: 1;
padding-top: var(--zexo-space-sm);
position: relative;
z-index: 2;
}
.zexo-process-step__title {
font-size: var(--zexo-font-h3);
font-weight: 700;
margin-bottom: var(--zexo-space-sm);
color: var(--zexo-text);
transition: all 0.3s ease;
letter-spacing: -0.02em;
}
.zexo-process-step:hover .zexo-process-step__title {
color: var(--zexo-accent-light);
transform: translateX(4px);
}
.zexo-process-step__description {
color: var(--zexo-text-secondary);
line-height: 1.7;
font-size: var(--zexo-font-body);
transition: all 0.3s ease;
}
.zexo-process-step:hover .zexo-process-step__description {
color: var(--zexo-text);
transform: translateX(2px);
}
/* Technology Section */
.zexo-tech {
padding: var(--zexo-space-xxl) 0;
}
.zexo-tech__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--zexo-space-lg);
}
.zexo-tech-category {
background: linear-gradient(145deg, rgba(61, 42, 74, 0.3), rgba(42, 26, 58, 0.5));
border: 1px solid rgba(107, 76, 122, 0.3);
border-radius: var(--zexo-radius-lg);
padding: var(--zexo-space-lg);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.zexo-tech-category::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.08) 0%,
transparent 30%,
transparent 70%,
rgba(157, 78, 221, 0.08) 100%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: var(--zexo-radius-lg);
}
.zexo-tech-category::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
rgba(255, 107, 53, 0.2),
rgba(157, 78, 221, 0.2),
rgba(255, 140, 66, 0.2));
border-radius: var(--zexo-radius-lg);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
filter: blur(8px);
}
.zexo-tech-category:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.15),
0 8px 25px rgba(255, 107, 53, 0.1),
0 4px 12px rgba(157, 78, 221, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: rgba(255, 107, 53, 0.4);
}
.zexo-tech-category:hover::before {
opacity: 1;
}
.zexo-tech-category:hover::after {
opacity: 0.6;
}
.zexo-tech-category__title {
font-size: var(--zexo-font-h3);
font-weight: 700;
margin-bottom: var(--zexo-space-md);
color: var(--zexo-accent);
text-align: center;
transition: all 0.3s ease;
letter-spacing: -0.02em;
position: relative;
z-index: 2;
}
.zexo-tech-category:hover .zexo-tech-category__title {
color: var(--zexo-accent-light);
transform: translateY(-2px);
}
.zexo-tech-category__items {
display: flex;
flex-wrap: wrap;
gap: var(--zexo-space-xs);
justify-content: center;
position: relative;
z-index: 2;
}
.zexo-tech-item {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(157, 78, 221, 0.15));
color: var(--zexo-text);
padding: var(--zexo-space-xs) var(--zexo-space-sm);
border-radius: var(--zexo-radius-sm);
font-size: var(--zexo-font-small);
font-weight: 600;
border: 1px solid rgba(255, 107, 53, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.zexo-tech-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.zexo-tech-item:hover {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.25), rgba(157, 78, 221, 0.25));
transform: translateY(-2px) scale(1.05);
border-color: rgba(255, 107, 53, 0.5);
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.2);
}
.zexo-tech-item:hover::before {
left: 100%;
}
/* Contact Section */
.zexo-contact {
padding: var(--zexo-space-xxl) 0;
background: var(--zexo-surface-light);
position: relative;
}
.zexo-contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 50% 50%, rgba(255, 107, 53, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.zexo-contact__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--zexo-space-xxl);
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.zexo-contact__info {
background: rgba(61, 42, 74, 0.3);
border: 1px solid rgba(107, 76, 122, 0.2);
border-radius: var(--zexo-radius-lg);
padding: var(--zexo-space-xl);
}
.zexo-contact__subtitle {
font-size: var(--zexo-font-h3);
font-weight: 600;
margin-bottom: var(--zexo-space-lg);
color: var(--zexo-text);
}
.zexo-contact__details {
display: flex;
flex-direction: column;
gap: var(--zexo-space-lg);
}
.zexo-contact-item {
display: flex;
align-items: flex-start;
gap: var(--zexo-space-md);
}
.contact-icon {
color: var(--zexo-accent);
flex-shrink: 0;
margin-top: 2px;
width: 24px;
height: 24px;
transition: all 0.3s ease;
}
.zexo-contact-item strong {
display: block;
color: var(--zexo-text);
margin-bottom: var(--zexo-space-xs);
}
.zexo-contact-item a {
color: var(--zexo-accent);
text-decoration: none;
transition: color 0.3s ease;
}
.zexo-contact-item a:hover {
color: var(--zexo-accent-light);
}
.zexo-contact-item:hover .contact-icon {
color: var(--zexo-accent-light);
transform: scale(1.1);
}
.zexo-contact__form {
background: rgba(61, 42, 74, 0.3);
border: 1px solid rgba(107, 76, 122, 0.2);
border-radius: var(--zexo-radius-lg);
padding: var(--zexo-space-xl);
}
.zexo-form-group {
margin-bottom: var(--zexo-space-lg);
}
.zexo-form-label {
display: block;
font-weight: 600;
margin-bottom: var(--zexo-space-xs);
color: var(--zexo-text);
}
.zexo-form-input,
.zexo-form-textarea {
width: 100%;
padding: var(--zexo-space-sm);
background: rgba(42, 26, 58, 0.5);
border: 1px solid rgba(107, 76, 122, 0.3);
border-radius: var(--zexo-radius-sm);
color: var(--zexo-text);
font-family: inherit;
transition: all 0.3s ease;
}
.zexo-form-input:focus,
.zexo-form-textarea:focus {
outline: none;
border-color: var(--zexo-accent);
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}
.zexo-form-textarea {
resize: vertical;
min-height: 120px;
}
/* Footer */
.zexo-footer {
background: var(--zexo-primary);
padding: var(--zexo-space-xxl) 0 var(--zexo-space-lg);
border-top: 1px solid rgba(107, 76, 122, 0.2);
}
.zexo-footer__content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--zexo-space-xxl);
margin-bottom: var(--zexo-space-xl);
}
.zexo-footer__brand {
max-width: 300px;
}
.zexo-footer__logo {
display: flex;
align-items: center;
gap: var(--zexo-space-sm);
margin-bottom: var(--zexo-space-md);
font-weight: 700;
font-size: var(--zexo-font-body);
color: var(--zexo-text);
transition: all 0.3s ease;
}
.zexo-footer__logo:hover {
transform: scale(1.05);
}
.zexo-footer__logo .zexo-logo-svg {
filter: drop-shadow(0 1px 4px rgba(255, 107, 53, 0.2));
transition: all 0.3s ease;
}
.zexo-footer__logo:hover .zexo-logo-svg {
transform: scale(1.1) rotate(3deg);
filter: drop-shadow(0 2px 8px rgba(255, 107, 53, 0.3));
}
.zexo-footer__description {
color: var(--zexo-text-secondary);
line-height: 1.6;
}
.zexo-footer__links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--zexo-space-lg);
}
.zexo-footer__title {
font-size: var(--zexo-font-h3);
font-weight: 600;
margin-bottom: var(--zexo-space-md);
color: var(--zexo-text);
}
.zexo-footer__list {
list-style: none;
}
.zexo-footer__list li {
margin-bottom: var(--zexo-space-xs);
}
.zexo-footer__link {
color: var(--zexo-text-secondary);
text-decoration: none;
transition: color 0.3s ease;
}
.zexo-footer__link:hover {
color: var(--zexo-accent);
}
.zexo-footer__text {
color: var(--zexo-text-secondary);
}
.zexo-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--zexo-space-lg);
border-top: 1px solid rgba(107, 76, 122, 0.2);
color: var(--zexo-text-secondary);
font-size: var(--zexo-font-small);
}
/* Animations */
@keyframes zexo-fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Анімації для логотипу */
@keyframes logo-ring-draw {
from {
stroke-dashoffset: 138.23;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes logo-hexagon-appear {
from {
opacity: 0;
transform: scale(0.8) rotate(-180deg);
}
to {
opacity: 0.9;
transform: scale(1) rotate(0deg);
}
}
@keyframes logo-hexagon-draw {
from {
stroke-dashoffset: 36;
opacity: 0;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes logo-center-pulse {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes logo-highlight-fade {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 0.8;
transform: scale(1);
}
}
@keyframes logo-particle-float {
0%, 100% {
opacity: 0;
transform: scale(0) translateY(0px);
}
20% {
opacity: 0.6;
transform: scale(1) translateY(-2px);
}
40% {
opacity: 0.8;
transform: scale(1.1) translateY(-4px);
}
60% {
opacity: 0.6;
transform: scale(1) translateY(-2px);
}
80% {
opacity: 0.4;
transform: scale(0.9) translateY(-1px);
}
}
@keyframes zexo-fade-in-right {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes zexo-hologram-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes zexo-particle-float {
0%, 100% {
transform: translateY(0px) translateX(0px);
opacity: 0.7;
}
25% {
transform: translateY(-20px) translateX(10px);
opacity: 1;
}
50% {
transform: translateY(-10px) translateX(-5px);
opacity: 0.8;
}
75% {
transform: translateY(-25px) translateX(5px);
opacity: 0.9;
}
}
@keyframes zexo-card-glow {
0%, 100% {
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
50% {
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.15),
0 4px 15px rgba(255, 107, 53, 0.1),
0 2px 8px rgba(157, 78, 221, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
}
@keyframes zexo-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes zexo-pulse-glow {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.05);
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.zexo-portfolio__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--zexo-space-lg);
}
}
@media (max-width: 768px) {
/* Мобільне меню - адаптивна верстка */
.zexo-nav__menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(26, 15, 38, 0.98);
backdrop-filter: blur(15px);
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--zexo-space-xl);
gap: var(--zexo-space-lg);
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
opacity: 0;
visibility: hidden;
}
.zexo-nav__menu--open {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.zexo-nav__menu li {
width: 100%;
text-align: center;
}
.zexo-nav__link {
display: block;
padding: var(--zexo-space-md) var(--zexo-space-lg);
font-size: var(--zexo-font-h3);
font-weight: 600;
color: var(--zexo-text);
text-decoration: none;
border-radius: var(--zexo-radius-md);
transition: all 0.3s ease;
position: relative;
min-height: 48px; /* Достатній розмір для тач-пристроїв */
display: flex;
align-items: center;
justify-content: center;
}
.zexo-nav__link::after {
display: none; /* Прибираємо підкреслення на мобільних */
}
.zexo-nav__link:hover,
.zexo-nav__link:focus {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(157, 78, 221, 0.2));
color: var(--zexo-accent-light);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}
/* Покращена кнопка бургер-меню */
.zexo-nav__toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
padding: var(--zexo-space-sm);
border-radius: var(--zexo-radius-sm);
transition: all 0.3s ease;
min-width: 48px;
min-height: 48px;
position: relative;
z-index: 1000;
}
.zexo-nav__toggle:hover {
background: rgba(255, 107, 53, 0.1);
transform: scale(1.05);
}
.zexo-nav__toggle span {
width: 28px;
height: 3px;
background: var(--zexo-text);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
/* Анімація бургер-меню при відкритті */
.zexo-nav__toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
background: var(--zexo-accent);
}
.zexo-nav__toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.zexo-nav__toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
background: var(--zexo-accent);
}
/* Контейнер навігації для мобільних */
.zexo-nav__container {
padding: var(--zexo-space-sm) var(--zexo-space-md);
position: relative;
z-index: 1001;
}
/* Логотип для мобільних */
.zexo-nav__logo {
font-size: var(--zexo-font-body);
z-index: 1001;
position: relative;
}
/* Оверлей для закриття меню при кліку поза ним */
.zexo-nav__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 998;
}
.zexo-nav__overlay--open {
opacity: 1;
visibility: visible;
}
/* Блокування прокрутки тіла при відкритому меню */
body.menu-open {
overflow: hidden;
height: 100vh;
}
.zexo-hero__container {
grid-template-columns: 1fr;
gap: var(--zexo-space-xl);
text-align: center;
}
.zexo-hero__visual {
order: -1;
}
.zexo-hero__hologram {
width: 200px;
height: 200px;
}
.zexo-services__grid {
grid-template-columns: 1fr;
}
.zexo-portfolio__grid {
grid-template-columns: 1fr;
gap: var(--zexo-space-lg);
}
.zexo-tech__grid {
grid-template-columns: repeat(2, 1fr);
}
.zexo-contact__content {
grid-template-columns: 1fr;
gap: var(--zexo-space-xl);
}
.zexo-footer__content {
grid-template-columns: 1fr;
gap: var(--zexo-space-xl);
}
.zexo-footer__links {
grid-template-columns: repeat(2, 1fr);
}
.zexo-footer__bottom {
flex-direction: column;
gap: var(--zexo-space-sm);
text-align: center;
}
}
@media (max-width: 480px) {
.zexo-container {
padding: 0 var(--zexo-space-sm);
}
/* Покращене мобільне меню для дуже малих екранів */
.zexo-nav__container {
padding: var(--zexo-space-xs) var(--zexo-space-sm);
}
.zexo-nav__logo {
font-size: var(--zexo-font-small);
}
.zexo-nav__logo svg {
width: 28px;
height: 28px;
}
/* Спрощені анімації для дуже малих екранів */
.logo-ring-outer,
.logo-ring-middle,
.logo-ring-inner {
animation-duration: 1s;
}
.logo-particle {
animation-duration: 1.5s;
}
.logo-hexagon,
.logo-center-dot,
.logo-center-highlight {
animation-duration: 0.8s;
}
.zexo-nav__toggle {
min-width: 44px;
min-height: 44px;
padding: var(--zexo-space-xs);
}
.zexo-nav__toggle span {
width: 24px;
height: 2px;
}
.zexo-nav__link {
font-size: var(--zexo-font-body);
padding: var(--zexo-space-sm) var(--zexo-space-md);
min-height: 44px; /* Мінімальний розмір для тач-пристроїв */
}
.zexo-hero__actions {
flex-direction: column;
align-items: center;
}
.zexo-hero__actions .zexo-btn {
width: 100%;
max-width: 300px;
}
.zexo-tech__grid {
grid-template-columns: 1fr;
}
.zexo-footer__links {
grid-template-columns: 1fr;
}
.zexo-process-step {
flex-direction: column;
text-align: center;
}
.zexo-process-step:not(:last-child)::after {
display: none;
}
/* Адаптивні розміри іконок для мобільних */
.service-icon {
width: 28px;
height: 28px;
}
.portfolio-icon {
width: 40px;
height: 40px;
}
.contact-icon {
width: 20px;
height: 20px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.zexo-hologram__layer {
animation: none;
}
.zexo-particles::before,
.zexo-particles::after {
animation: none;
}
/* Відключення анімацій логотипу для користувачів з обмеженим рухом */
.logo-ring-outer,
.logo-ring-middle,
.logo-ring-inner,
.logo-hexagon,
.logo-hexagon-inner,
.logo-center-dot,
.logo-center-highlight,
.logo-particle {
animation: none !important;
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
}
/* Focus Styles */
.zexo-btn:focus-visible,
.zexo-nav__link:focus-visible,
.zexo-form-input:focus-visible,
.zexo-form-textarea:focus-visible {
outline: 2px solid var(--zexo-accent);
outline-offset: 2px;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
:root {
--zexo-border: #ffffff;
--zexo-text-secondary: #ffffff;
}
.zexo-service-card,
.zexo-portfolio-item,
.zexo-tech-category,
.zexo-contact__info,
.zexo-contact__form {
border: 2px solid var(--zexo-border);
}
}